init

src/component/checkbox/index.less

@@ -0,0 +1,187 @@
+@checkbox-lg: 18px;
+@checkbox-md: 16px;
+@checkbox-sm: 14px;
+@checkbox-xs: 12px;
+
+@checkbox-lg-font-size: 16px;
+@checkbox-md-font-size: 14px;
+@checkbox-sm-font-size: 12px;
+@checkbox-xs-font-size: 10px;
+
+.set-size(@size, @font-size) {
+  & {
+    height: @size;
+    line-height: @size;
+    .layui-form-checkbox[lay-skin="primary"]  {
+      .layui-icon {
+        width: @size;
+        height: @size;
+        font-size: @font-size;
+      }
+      .layui-checkbox-label {
+        height: @size;
+        line-height: @size;
+        font-size: @font-size;
+      }
+    }
+  }
+}
+
+.layui-checkbox{
+  &[size="lg"] {
+    .set-size(@checkbox-lg, @checkbox-lg-font-size);
+  }
+  &[size="md"] {
+    .set-size(@checkbox-md, @checkbox-md-font-size);
+  }
+  &[size="sm"] {
+    .set-size(@checkbox-sm, @checkbox-sm-font-size);
+  }
+  &[size="xs"] {
+    .set-size(@checkbox-xs, @checkbox-xs-font-size);
+  }
+}
+
+.layui-checkbox input[type="checkbox"] {
+  display: none;
+}
+
+.layui-form-checkbox {
+  position: relative;
+  height: 30px;
+  line-height: 30px;
+  margin-right: 10px;
+  padding-right: 30px;
+  cursor: pointer;
+  font-size: 0;
+  -webkit-transition: 0.1s linear;
+  transition: 0.1s linear;
+  box-sizing: border-box;
+}
+
+.layui-form-checkbox span {
+  padding: 0 10px;
+  height: 100%;
+  font-size: 14px;
+  border-radius: 2px 0 0 2px;
+  background-color: var(--global-neutral-color-6);
+  color: #fff;
+  overflow: hidden;
+}
+
+.layui-form-checkbox:hover span {
+  background-color: var(--global-neutral-color-8);
+}
+
+.layui-form-checkbox i {
+  top: 0;
+  right: 0;
+  width: 29px;
+  height: 28px;
+  position: absolute;
+  border: 1px solid var(--global-neutral-color-6);
+  border-radius: 0 2px 2px 0;
+  color: #fff;
+  font-size: 20px;
+  text-align: center;
+}
+
+.layui-form-checkbox:hover i {
+  border-color: var(--global-neutral-color-8);
+  color: var(--global-neutral-color-8);
+}
+
+.layui-form-checkbox[lay-skin="primary"] {
+  height: auto !important;
+  line-height: normal !important;
+  min-width: 18px;
+  min-height: 18px;
+  border: none !important;
+  margin-right: 0;
+  padding-left: 28px;
+  padding-right: 0;
+  background: 0 0;
+}
+
+.layui-form-checkbox[lay-skin="primary"] span {
+  padding-left: 0;
+  padding-right: 15px;
+  line-height: 18px;
+  background: 0 0;
+  color: #666;
+}
+
+.layui-form-checkbox[lay-skin="primary"] i {
+  right: auto;
+  left: 0;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  border: 1px solid var(--global-neutral-color-6);
+  font-size: 12px;
+  border-radius: 2px;
+  background-color: #fff;
+  -webkit-transition: 0.1s linear;
+  transition: 0.1s linear;
+}
+
+.layui-form-checkbox[lay-skin="primary"]:hover i {
+  border-color: var(--global-checked-color);
+  color: #fff;
+}
+
+.layui-form-checked,
+.layui-form-checked:hover {
+  border-color: var(--global-checked-color);
+}
+
+.layui-form-checked i,
+.layui-form-checked:hover i {
+  color: var(--global-checked-color);
+}
+
+.layui-form-checked span,
+.layui-form-checked:hover span {
+  background-color: var(--global-checked-color);
+}
+
+.layui-form-checked[lay-skin="primary"] i {
+  border-color: var(--global-checked-color);
+  background-color: var(--global-checked-color);
+  color: #fff;
+}
+
+.layui-form-checked[lay-skin="primary"] span {
+  background: 0 0 !important;
+}
+
+.layui-checkbox-disabled[lay-skin="primary"] span {
+  background: 0 0 !important;
+  color: var(--global-neutral-color-8) !important;
+}
+
+.layui-checkbox-disabled[lay-skin="primary"]:hover i {
+  border-color: var(--global-neutral-color-6);
+}
+
+.layui-checkbox-disabled,
+.layui-checkbox-disabled i {
+  border-color: var(--global-neutral-color-3) !important;
+}
+
+.layui-checkbox-disabled span {
+  background-color: var(--global-neutral-color-3) !important;
+}
+
+.layui-checkbox-disabled em {
+  color: var(--global-neutral-color-6) !important;
+}
+
+.layui-checkbox-disabled:hover i {
+  color: #fff !important;
+}
+
+.layui-checkbox-disabled .layui-icon-ok,.layui-checkbox-disabled .layui-icon-subtraction{
+  background-color: var(--global-neutral-color-3) !important;
+  border-color: var(--global-neutral-color-3) !important;
+}

src/component/checkbox/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/checkbox/index.vue

@@ -0,0 +1,145 @@
+<script lang="ts">
+export default {
+  name: "LayCheckbox",
+};
+</script>
+
+<script setup lang="ts">
+import { LayIcon } from "@layui/icons-vue";
+import { computed, inject, useSlots } from "vue";
+import "./index.less";
+import { CheckboxSize } from "./interface";
+
+export interface CheckboxProps {
+  name?: string;
+  skin?: string;
+  label?: string;
+  value: string | number | object;
+  modelValue?: boolean | Array<string | number | object>;
+  isIndeterminate?: boolean;
+  size?: CheckboxSize;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  isIndeterminate: false,
+  modelValue: false,
+  disabled: false,
+  label: "",
+  size: "md",
+});
+
+const checkboxGroup: any = inject("checkboxGroup", {});
+
+const isGroup = computed(() => {
+  return (
+    checkboxGroup != undefined && checkboxGroup?.name === "LayCheckboxGroup"
+  );
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const slots = useSlots();
+
+const isChecked = computed({
+  get() {
+    if (isGroup.value) {
+      return checkboxGroup.modelValue.value.includes(props.value);
+    } else {
+      if (Array.isArray(props.modelValue)) {
+        return props.modelValue.includes(props.value);
+      } else {
+        return props.modelValue;
+      }
+    }
+  },
+  set(val) {
+    if (isGroup.value) {
+      setGroupModelValue(val);
+    } else {
+      if (Array.isArray(props.modelValue)) {
+        setArrayModelValue(val);
+      } else {
+        emit("change", val);
+        emit("update:modelValue", val);
+      }
+    }
+  },
+});
+
+const arrayModelValue = computed(() => {
+  if (Array.isArray(props.modelValue)) {
+    return [...props.modelValue];
+  } else {
+    return [];
+  }
+});
+
+const setGroupModelValue = function (checked: any) {
+  let groupModelValue = [...checkboxGroup.modelValue.value];
+  if (!checked) {
+    groupModelValue.splice(groupModelValue.indexOf(props.value), 1);
+  } else {
+    groupModelValue.push(props.value);
+  }
+  checkboxGroup.modelValue.value = groupModelValue;
+};
+
+const setArrayModelValue = function (checked: any) {
+  let arr = [...arrayModelValue.value];
+  if (!checked) {
+    arr.splice(arr.indexOf(props.value), 1);
+  } else {
+    arr.push(props.value);
+  }
+  emit("change", arr);
+  emit("update:modelValue", arr);
+};
+
+const handleClick = function () {
+  if (!isDisabled.value) {
+    isChecked.value = !isChecked.value;
+  }
+};
+const isDisabled = computed(() => {
+  if (props.disabled) {
+    return true;
+  }
+  if (
+    checkboxGroup.hasOwnProperty("disabled") &&
+    checkboxGroup.disabled.value
+  ) {
+    return true;
+  }
+  return false;
+});
+
+defineExpose({ toggle: handleClick });
+</script>
+
+<template>
+  <span @click.stop="handleClick" class="layui-checkbox" :size="size">
+    <input type="checkbox" :name="name" :value="value" />
+    <div
+      class="layui-form-checkbox"
+      :class="{
+        'layui-form-checked': isChecked,
+        'layui-checkbox-disabled layui-disabled': isDisabled,
+      }"
+      :lay-skin="skin"
+    >
+      <span class="layui-checkbox-label" v-if="slots.default || label">
+        <slot>{{ label }}</slot>
+      </span>
+      <lay-icon
+        :type="
+          props.isIndeterminate && isChecked
+            ? 'layui-icon-subtraction'
+            : isChecked
+            ? 'layui-icon-ok'
+            : ''
+        "
+      ></lay-icon>
+    </div>
+  </span>
+</template>

src/component/checkbox/interface.ts

@@ -0,0 +1 @@
+export type CheckboxSize = "lg" | "md" | "sm" | "xs";