refactor: checkbox

src/packages/checkbox/demo.vue

@@ -2,194 +2,85 @@
   <div class="demo-list">
     <h4>基础用法</h4>
     <div class="show-demo">
-      <nut-checkbox v-model="checkbox1" @change="changeBox1"
-        >复选框</nut-checkbox
+      <nut-checkbox v-model="checkbox1" label="复选框" @change="changeBox1"
+        ><span>复选框</span></nut-checkbox
       >
       <span>{{ checkbox1 }}</span>
     </div>
-    <h4>CheckboxGroup基本用法</h4>
     <div class="show-demo">
-      <nut-checkboxgroup v-model="checkboxGroup1">
-        <nut-checkbox label="选项一"></nut-checkbox>
-        <nut-checkbox label="选项二"></nut-checkbox>
-      </nut-checkboxgroup>
-      <p>选择状态：{{ checkboxGroup1 }}</p>
+      <nut-checkbox
+        v-model="checkbox2"
+        text-position="left"
+        @change="changeBox2"
+        >复选框</nut-checkbox
+      >
+      <span>{{ checkbox2 }}</span>
     </div>
     <h4>禁用状态</h4>
-    <div class="show-demo show-demo-block">
-      <nut-checkbox v-model="checkbox2" disabled>未选时禁用状态</nut-checkbox>
-      <nut-checkbox v-model="checkbox3" disabled>已选时禁用状态</nut-checkbox>
-    </div>
-    <h4>CheckboxGroup整体禁用</h4>
     <div class="show-demo">
-      <nut-checkboxgroup v-model="checkboxGroup2" disabled>
-        <nut-checkbox label="选项一"></nut-checkbox>
-        <nut-checkbox label="选项二"></nut-checkbox>
-      </nut-checkboxgroup>
-      <p>选择状态：{{ checkboxGroup2 }}</p>
+      <nut-checkbox v-model="checkbox3" disabled>未选时禁用状态</nut-checkbox>
+      <nut-checkbox v-model="checkbox4" disabled>选中时禁用状态</nut-checkbox>
     </div>
     <h4>自定义尺寸</h4>
-    <div class="show-demo show-demo-block">
-      <nut-checkbox v-model="checkbox4" size="small">小号1</nut-checkbox>
-      <nut-checkbox v-model="checkbox5" size="base">默认</nut-checkbox>
-      <nut-checkbox v-model="checkbox6" size="large">大号</nut-checkbox>
-      <p>size可选值：'small', 'base', 'large'</p>
-    </div>
-    <h4>CheckboxGroup整体尺寸</h4>
-    <div class="show-demo">
-      <nut-checkboxgroup v-model="checkboxGroup3" size="small">
-        <nut-checkbox label="选项一"></nut-checkbox>
-        <nut-checkbox label="选项二"></nut-checkbox>
-      </nut-checkboxgroup>
-    </div>
-    <h4>禁用动效</h4>
     <div class="show-demo">
-      <nut-checkbox v-model="checkbox7" :is-animation="false"
-        >没有动效</nut-checkbox
+      <nut-checkbox v-model="checkbox5" icon-size="25"
+        >自定义尺寸25</nut-checkbox
       >
-      <p>is-animation属性值为false时，禁用自带动效</p>
-    </div>
-    <h4>CheckboxGroup整体禁用动效</h4>
-    <div class="show-demo">
-      <nut-checkboxgroup v-model="checkboxGroup4" :is-animation="false">
-        <nut-checkbox label="没有动效1"></nut-checkbox>
-        <nut-checkbox label="没有动效2"></nut-checkbox>
-      </nut-checkboxgroup>
-    </div>
-    <h4>事件</h4>
-    <div class="show-demo">
-      <div class="demo-box">
-        <nut-checkbox
-          v-model="checkbox9"
-          :label="'change事件'"
-          @change="checkboxChange"
-          >备选项</nut-checkbox
-        >
-        <span>{{ result1 }}</span>
-      </div>
-    </div>
-    <h4>CheckboxGroup整体事件</h4>
-    <div class="show-demo">
-      <div>
-        <nut-checkboxgroup v-model="checkboxGroup5" @change="getChange">
-          <nut-checkbox label="选项一"></nut-checkbox>
-          <nut-checkbox label="选项二"></nut-checkbox>
-        </nut-checkboxgroup>
-      </div>
-      <span>{{ result2 }}</span>
-    </div>
-    <h4>自定义Class</h4>
-    <div class="show-demo">
-      <nut-checkbox class="my-checkbox" v-model="checkbox12"
-        >自定义Class:"my-checkbox"</nut-checkbox
+      <nut-checkbox v-model="checkbox6" icon-size="10"
+        >自定义尺寸10</nut-checkbox
       >
     </div>
-    <h4>全选与反选</h4>
+    <h4>自定义图标</h4>
     <div class="show-demo">
-      <div>
-        <nut-checkboxgroup
-          ref="checkboxGroupDemo"
-          v-model="checkboxGroup6"
-          @change="getChange2"
-        >
-          <nut-checkbox label="选项一"></nut-checkbox>
-          <nut-checkbox label="选项二"></nut-checkbox>
-          <nut-checkbox label="选项三"></nut-checkbox>
-        </nut-checkboxgroup>
-      </div>
-      <div>
-        <span>{{ result3 }}</span>
-      </div>
-      <nut-button size="small" type="primary" @click="chooseAll(true)"
-        >全选</nut-button
-      >
-      <nut-button size="small" type="primary" @click="chooseAll()"
-        >反选</nut-button
-      >
-      <nut-button size="small" type="primary" @click="chooseAll(false)"
-        >取消</nut-button
+      <nut-checkbox
+        v-model="checkbox7"
+        icon-name="checklist"
+        icon-active-name="checklist"
+        >自定义图标</nut-checkbox
       >
     </div>
-    <h4>CheckboxGroup排列方向</h4>
+    <h4>点击触发change事件</h4>
     <div class="show-demo">
-      <div>
-        <nut-checkboxgroup
-          v-model="checkboxGroup7"
-          direction="vertical"
-          @change="getChange3"
-        >
-          <nut-checkbox label="选项一"></nut-checkbox>
-          <nut-checkbox label="选项二"></nut-checkbox>
-          <nut-checkbox label="选项三"></nut-checkbox>
-        </nut-checkboxgroup>
-      </div>
-      <span>{{ result4 }}</span>
+      <nut-checkbox v-model="checkbox8" @change="changeBox3"
+        >change复选框</nut-checkbox
+      >
     </div>
   </div>
 </template>
 <script lang="ts">
 import { reactive, ref, toRefs } from 'vue';
 import { createComponent } from '@/utils/create';
+import { Toast } from '@/nutui';
 const { createDemo } = createComponent('checkbox');
 export default createDemo({
   setup(props, context) {
     const data = reactive({
-      checkbox1: false,
+      checkbox1: true,
       checkbox2: false,
-      checkbox3: true,
+      checkbox3: false,
       checkbox4: true,
-      checkbox5: true,
-      checkbox6: true,
+      checkbox5: false,
+      checkbox6: false,
       checkbox7: false,
-      checkbox8: true,
-      checkbox9: false,
-      checkbox10: true,
-      checkbox11: false,
-      checkbox12: true,
-      checkbox13: false,
-      checkboxGroup1: ['选项一'],
-      checkboxGroup2: ['选项一'],
-      checkboxGroup3: [],
-      checkboxGroup4: ['没有动效1'],
-      checkboxGroup5: ['选项一'],
-      checkboxGroup6: [],
-      checkboxGroup7: []
+      checkbox8: false
     });
-    const result = reactive({
-      result1: 'false',
-      result2: '选中状态选项：',
-      result3: '选中状态选项：',
-      result4: '选中状态选项：'
-    });
-    const changeBox1 = (state: boolean) => {
-      data.checkbox1 = state;
-    };
-    const checkboxChange = (state: string, val: string) => {
-      result.result1 = state;
-    };
-    const getChange = (val: string) => {
-      result.result2 = '选中状态选项：' + val;
+    const changeBox1 = (state: boolean, label: string) => {
+      console.log(state, label);
     };
-    const getChange2 = (val: string) => {
-      result.result3 = '选中状态选项：' + val;
+
+    const changeBox2 = (state: boolean, label: string) => {
+      console.log(state, label);
     };
-    const getChange3 = (val: string) => {
-      result.result4 = '选中状态选项：' + val;
-    };
-    const checkboxGroupDemo = ref();
-    const chooseAll = (val: boolean | string) => {
-      (checkboxGroupDemo.value as any).toggleAll(val);
+
+    const changeBox3 = (state: boolean, label: string) => {
+      Toast.text(`您${state ? '选中' : '取消'}了${label}`);
     };
+
     return {
       changeBox1,
-      checkboxChange,
-      checkboxGroupDemo,
-      getChange,
-      getChange2,
-      getChange3,
-      chooseAll,
-      ...toRefs(data),
-      ...toRefs(result)
+      changeBox2,
+      changeBox3,
+      ...toRefs(data)
     };
   }
 });
@@ -205,6 +96,9 @@ export default createDemo({
     font-size: 14px;
   }
   .show-demo {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     margin-top: 10px;
     padding: 15px;
     background-color: #ffffff;
@@ -213,29 +107,12 @@ export default createDemo({
     p,
     span {
       display: block;
-      margin-top: 15px;
       font-size: 14px;
       color: #636363;
     }
     span {
       font-size: 12px;
     }
-    .nut-button {
-      margin: 10px 10px 0 0;
-    }
-  }
-  .show-demo-block {
-    view {
-      display: block;
-      margin-bottom: 10px;
-    }
-  }
-  .my-checkbox::v-deep .nut-checkbox {
-    input:checked {
-      background-image: url('https://img13.360buyimg.com/imagetools/jfs/t1/154120/1/10623/372/5fe013e6E4694fbf9/fd38d389b3a3b9c6.png');
-      background-size: 100%;
-      border: none;
-    }
   }
 }
 </style>

src/packages/checkbox/doc.md

@@ -6,7 +6,7 @@
 
 ### 安装
 
-``` javascript
+``` ts
 import { createApp } from 'vue';
 import { Checkbox } from '@nutui/nutui';
 
@@ -17,245 +17,85 @@ app.use(Checkbox);
 ## 基本用法
 
 ```html
-<nut-checkbox v-model="checkbox">选项</nut-checkbox>
+<nut-checkbox v-model="checkbox1" label="复选框"><span>复选框</span></nut-checkbox>
+<nut-checkbox v-model="checkbox2" text-position="left">复选框</nut-checkbox>
 ```
-```javascript
-setup() {
-  return {
-    checkbox: false,
-  };
-}
-```
-
-## CheckboxGroup基本用法
-```html
-<nut-checkboxgroup v-model="checkboxGroup">
-  <nut-checkbox label="选项一"></nut-checkbox>
-  <nut-checkbox label="选项二"></nut-checkbox>
-</nut-checkboxgroup>
-```
-```javascript
-setup() {
-  return {
-    checkboxGroup: ['选项一'],
-  };
-}
-```
-## 禁用状态
-
-```html
-<nut-checkbox v-model="checkbox1" disabled>未选时禁用状态</nut-checkbox>
-<nut-checkbox v-model="checkbox2" disabled>已选时禁用状态</nut-checkbox>
-```
-
-```javascript
+```ts
 setup() {
   return {
     checkbox1: false,
-    checkbox2: true,
+    checkbox2: false,
   };
 }
 ```
 
-## CheckboxGroup整体禁用
+## 禁用状态
 
 ```html
-<nut-checkboxgroup v-model="checkboxGroup" disabled>
-  <nut-checkbox label="选项一"></nut-checkbox>
-  <nut-checkbox label="选项二"></nut-checkbox>
-</nut-checkboxgroup>
+<nut-checkbox v-model="checkbox3" disabled>未选时禁用状态</nut-checkbox>
+<nut-checkbox v-model="checkbox4" disabled>选中时禁用状态</nut-checkbox>
 ```
 
-```javascript
+```ts
 setup() {
   return {
-    checkboxGroup: ['选项一'],
+    checkbox3: false,
+    checkbox4: true,
   };
 }
 ```
 
 ## 自定义尺寸
 
-内置 **small**，**normal**，**large** 三种规格供使用。
 ```html
-<nut-checkbox v-model="checkbox1" size="small">小号1</nut-checkbox>
-<nut-checkbox v-model="checkbox2" size="normal">默认</nut-checkbox>
-<nut-checkbox v-model="checkbox3" size="large">大号</nut-checkbox>
+<nut-checkbox v-model="checkbox5" icon-size="25">自定义尺寸25</nut-checkbox>
+<nut-checkbox v-model="checkbox6" icon-size="10">自定义尺寸10</nut-checkbox>
 ```
 
-```javascript
+```ts
 setup() {
   return {
-    checkbox1: true,
-    checkbox2: true,
-    checkbox3: true,
+    checkbox5: true,
+    checkbox6: false,
   };
 }
 
 ```
 
-## CheckboxGroup整体尺寸
+## 自定义图标
 
-```html
-<nut-checkboxgroup v-model="checkboxGroup" size="small">
-  <nut-checkbox label="选项一"></nut-checkbox>
-  <nut-checkbox label="选项二"></nut-checkbox>
-</nut-checkboxgroup>
-```
-
-```javascript
-setup() {
-  return {
-    checkboxGroup: [],
-  };
-}
-```
-
-## 禁用动效
-
-is-animation属性值为false时，禁用自带动效
+这里建议同时设置 `icon-name` 和 `icon-active-name` 属性
 
 ```html
-<nut-checkbox v-model="checkbox" :is-animation="false">没有动效</nut-checkbox>
+<nut-checkbox v-model="checkbox7" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-checkbox>
 ```
 
-```javascript
+```ts
 setup() {
   return {
-    checkbox: false,
+    checkbox7: true,
   };
 }
-```
-
-## CheckboxGroup整体禁用动效
 
-```html
-<nut-checkboxgroup v-model="checkboxGroup" :is-animation="false">
-  <nut-checkbox label="没有动效1"></nut-checkbox>
-  <nut-checkbox label="没有动效2"></nut-checkbox>
-</nut-checkboxgroup>
-```
-
-```javascript
-setup() {
-  return {
-    checkboxGroup: ['没有动效1'],
-  };
-}
 ```
 
-## 事件
+## change事件
 
 值发生变化时，将触发change事件
 
 ```html
-<nut-checkbox v-model="checkbox" @change="checkboxChange">
-  change事件
-</nut-checkbox>
+<nut-checkbox v-model="checkbox8" @change="changeBox3">change复选框</nut-checkbox>
 ```
 
-```javascript
+```ts
 setup() {
   const checkbox = ref(false);
-  const checkboxChange= (checked) => {
-    console.log('change事件触发' + checked);
+  const changeBox3= (checked: boolean, label: string) => {
+    console.log('change事件触发' + checked, label);
 	}  
   return {
     checkbox,
-    checkboxChange
-  };
-}
-```
-
-## CheckboxGroup整体事件
-
-```html
-<nut-checkboxgroup v-model="checkboxGroup" @change="getChange">
-  <nut-checkbox label="选项一"></nut-checkbox>
-  <nut-checkbox label="选项二"></nut-checkbox>
-</nut-checkboxgroup>
-```
-
-```javascript
-setup() {
-  const checkboxGroup = reactive(['选项一']);
-  const getChange= (val) => {
-    console.log('选中状态选项：' + val);
-	}  
-  return {
-    checkboxGroup,
-    getChange
-  };
-}
-```
-## 自定义class
-```html
-<nut-checkbox class="my-checkbox" v-model="checkbox">自定义Class:"my-checkbox"</nut-checkbox>
-```
-```javascript
-setup() {
-  const checkbox = ref(false);
-  return {
-    checkbox,
-  };
-}
-```
-
-## 全选与反选
-```html
-<nut-checkboxgroup
-  ref="checkboxGroupDemo"
-  v-model="checkboxGroup"
-  @change="getChange"
->
-  <nut-checkbox label="选项一"></nut-checkbox>
-  <nut-checkbox label="选项二"></nut-checkbox>
-  <nut-checkbox label="选项三"></nut-checkbox>
-</nut-checkboxgroup>
-<nut-button size="small" type="primary" @click="chooseAll(true)">全选</nut-button>
-<nut-button size="small" type="primary" @click="chooseAll()">反选</nut-button>
-<nut-button size="small" type="primary" @click="chooseAll(false)">取消</nut-button>
-```
-```javascript
-setup() {
-  const checkboxGroup = ref([]);
-  const getChange = (val: string) => {
-    console.log('选中状态选项：' + val);
-  };
-  const checkboxGroupDemo = ref(null);
-  const chooseAll = (val: boolean | string) => {
-    (checkboxGroupDemo.value as any).toggleAll(val);
-  };
-  return {
-    checkboxGroup,
-    getChange,
-    chooseAll
-  };
-}
-```
-
-## CheckboxGroup排列方向
-
-```html
-<nut-checkboxgroup
-  v-model="checkboxGroup"
-  direction="vertical"
-  @change="getChange"
->
-  <nut-checkbox label="选项一"></nut-checkbox>
-  <nut-checkbox label="选项二"></nut-checkbox>
-  <nut-checkbox label="选项三"></nut-checkbox>
-</nut-checkboxgroup>
-```
-```javascript
-setup() {
-  const checkboxGroup = ref([]);
-  const getChange = (val: string) => {
-    console.log('选中状态选项：' + val);
-  };
-  return {
-    checkboxGroup,
-    getChange,
+    changeBox3
   };
 }
 ```
@@ -264,26 +104,18 @@ setup() {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| name | checkbox的name属性 | String | -
-| v-model | 必填项，当前选中项的选中状态,同步value | Boolean | false
-| label | 当前选中项的label值，（可不设，设置后label有值，替换插值内容） | String | -
-| checked | checkbox的checked属性 | Boolean | false
-| size | 尺寸，可选值small/normal/large | String | normal
-| disabled | 是否禁用 | Boolean | false
-| is-animation | 是否需要动效 | Boolean | true
-
-### CheckGroup
+| v-model | 是否处于选中状态 | String | `false`
+| disabled | 是否禁用选择 | Boolean | `false`
+| text-position | 文本所在的位置，可选值：`left`,`right` | String | `right`
+| icon-size | [图标尺寸](#/icon) | String、Number | `18`
+| icon-name | [图标名称](#/icon)，选中前(建议和`icon-active-name`一起修改) | String | `'check-normal'`
+| icon-active-name | [图标名称](#/icon)，选中后(建议和`icon-name`一起修改) | String | `'checked'`
+| label | 复选框的文本内容 | String | -
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| v-model | 必填项，当前选中项的选中状态,同步value | Boolean | false
-| size | 尺寸，可选值small/normal/large | String | normal
-| disabled | 是否禁用 | Boolean | false
-| is-animation | 是否需要动效 | Boolean | true
 
 
 ## Event
 
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
-| change | 值变化时触发 | 当前选中项状态（checked），当前选中项值（label）【设置label后有值、默认为空】,event
+| change | 值变化时触发 | (state, label),`state`代表当前状态，`label`表示当前选中的值

src/packages/checkbox/index.scss

@@ -1,96 +1,19 @@
-.nut-checkboxgroup-vertical .nut-checkbox {
-  display: block;
-  margin-top: 8px;
-}
 .nut-checkbox {
-  margin-right: 10px;
-  .nut-checkbox-label {
-    pointer-events: none;
-    vertical-align: middle;
-  }
-  input {
-    position: relative;
-    -webkit-appearance: none;
-    border-radius: 1%;
-    background-image: url('https://img11.360buyimg.com/imagetools/jfs/t1/153637/38/10229/854/5fd9cfd3E25c62c2a/fed43bc74cd473dd.png');
-    background-size: cover;
-    outline: 0;
-    opacity: 1;
-    vertical-align: middle;
-    margin: 0;
-    &::after {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      content: '';
-      width: 0;
-      height: 0;
-      transform: translate(-50%, -50%);
-      background: $primary-color;
-      border-radius: 1%;
-      opacity: 0;
-      pointer-events: none;
-    }
-    &:checked {
-      background-image: url('https://img13.360buyimg.com/imagetools/jfs/t1/131359/19/19372/2463/5fd3101bEdaf04120/3c8fa97cd4b22c02.png');
-      background-repeat: no-repeat;
-      background-position: center;
-      border-color: $primary-color;
-      &:not(:disabled).nut-checkbox-ani::after {
-        animation: nutPulse 0.25s;
-      }
+  display: inline-flex;
+  align-items: center;
+  &--reverse {
+    flex-direction: row-reverse;
+    .nut-checkbox__label {
+      margin-right: 15px;
+      margin-left: 0;
+    }
+  }
+  &__label {
+    margin-left: 15px;
+    font-size: 16px;
+    color: $checkbox-label-color;
+    &--disabled {
+      color: $checkbox-label-disable-color;
     }
-    &:disabled {
-      background-image: url('https://img14.360buyimg.com/imagetools/jfs/t1/155506/4/9365/704/5fd3103cE779ad491/1939699720df7770.png');
-      // border-color: $disable-color;
-      &:checked {
-        background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/151947/10/10769/2246/5fe04ceeEd31c1a06/2bb48d747c49f9dd.png');
-      }
-    }
-  }
-  .nut-checkbox-label {
-    color: #1d1e1e;
-  }
-  &.nut-checkbox-size-normal {
-    input {
-      width: 18px;
-      height: 18px;
-    }
-    .nut-checkbox-label {
-      font-size: $font-size-2;
-      margin-left: 10px;
-    }
-  }
-  &.nut-checkbox-size-small {
-    input {
-      width: 16px;
-      height: 16px;
-    }
-    .nut-checkbox-label {
-      font-size: $font-size-1;
-      margin-left: 6px;
-    }
-  }
-  &.nut-checkbox-size-large {
-    input {
-      width: 22px;
-      height: 22px;
-    }
-    .nut-checkbox-label {
-      font-size: $font-size-3;
-      margin-left: 10px;
-    }
-  }
-}
-@keyframes nutPulse {
-  0% {
-    width: 100%;
-    height: 100%;
-    opacity: 0.5;
-  }
-  100% {
-    width: 150%;
-    height: 150%;
-    opacity: 0;
   }
 }

src/packages/checkbox/index.vue

@@ -1,56 +1,15 @@
-<template>
-  <view :class="['nut-checkbox', 'nut-checkbox-size-' + currentSize]">
-    <input
-      type="checkbox"
-      :name="name"
-      :class="{ 'nut-checkbox-ani': isAnimated }"
-      :disabled="isDisabled"
-      :checked.prop="isChecked"
-      :value="submittedValue"
-      @change="changeEvt"
-    />
-    <view class="nut-checkbox-label" v-if="label">
-      {{ label }}
-    </view>
-    <view class="nut-checkbox-label" v-else>
-      <slot></slot>
-    </view>
-  </view>
-</template>
 <script lang="ts">
-import { reactive, computed, getCurrentInstance, inject } from 'vue';
+import { h, computed } from 'vue';
 import { createComponent } from '@/utils/create';
-import checkboxgroup from '@/packages/checkboxgroup/index.vue';
-const { create } = createComponent('checkbox');
+const { create, componentName } = createComponent('checkbox');
+import nutIcon from '@/packages/icon/index.vue';
 
 export default create({
-  children: [checkboxgroup],
+  components: {
+    nutIcon
+  },
   props: {
-    name: {
-      type: String
-    },
-    size: {
-      type: [String, Number, Boolean],
-      default: 'normal'
-    },
-    label: {
-      type: String,
-      default: ''
-    },
     modelValue: {
-      required: false
-    },
-    trueValue: {
-      default: true
-    },
-    falseValue: {
-      default: false
-    },
-    submittedValue: {
-      type: String,
-      default: 'on'
-    },
-    checked: {
       type: Boolean,
       default: false
     },
@@ -58,119 +17,94 @@ export default create({
       type: Boolean,
       default: false
     },
-    isAnimation: {
-      type: Boolean,
-      default: true
+    textPosition: {
+      type: String,
+      default: 'right'
+    },
+    iconSize: {
+      type: [String, Number],
+      default: '18'
+    },
+    iconName: {
+      type: String,
+      default: 'check-normal'
+    },
+    iconActiveName: {
+      type: String,
+      default: 'checked'
+    },
+    label: {
+      type: String,
+      default: ''
     }
   },
-  setup(props, { emit }) {
-    const parentGroup = inject('checkboxgroup', {
-      parentNode: false,
-      changeVal: (val: number) => {
-        console.log(1);
-      }
-    });
-    const parentProps = getCurrentInstance()?.parent?.props;
+  emits: ['change', 'update:modelValue'],
+  setup(props, { emit, slots }) {
+    const checked = computed(() => !!props.modelValue);
 
-    const isChecked = computed(() => {
-      if (parentGroup && parentGroup.parentNode) {
-        const choosedVal = parentProps?.modelValue;
-        const chooseFlag =
-          (choosedVal as any).indexOf(props.label) == -1 ? false : true;
-        return chooseFlag;
-      } else {
-        const isCheckedVal =
-          props.modelValue == props.trueValue || props.checked;
-        return isCheckedVal;
-      }
+    const label = computed(() => {
+      return props.label ? props.label : slots.default?.();
     });
 
-    const isDisabled = computed(() => {
-      if (parentGroup && parentGroup.parentNode) {
-        return parentProps?.disabled;
-      } else {
-        return props.disabled;
-      }
+    const color = computed(() => {
+      return !props.disabled
+        ? !props.modelValue
+          ? '#d6d6d6'
+          : '#fa2c19'
+        : '#f5f5f5';
     });
 
-    const currentSize = computed(() => {
-      if (parentGroup && parentGroup.parentNode) {
-        return parentProps?.size;
-      } else {
-        return props.size;
-      }
-    });
-
-    const isAnimated = computed(() => {
-      if (parentGroup && parentGroup.parentNode) {
-        return parentProps?.isAnimation;
-      } else {
-        return props.isAnimation;
-      }
-    });
-
-    const { label, name, submittedValue } = reactive(props);
+    const emitChange = (value: string | boolean, label?: string) => {
+      emit('update:modelValue', value);
+      emit('change', value, label);
+    };
 
-    const setParentValue = (checked: boolean) => {
-      // const { label } = props;
-      // const { max, modelValue } = parentProps?.modelValue;
-      const modelValue = parentProps?.modelValue;
-      const value = (modelValue as any).slice();
-      if (checked) {
-        if (value.indexOf(label) === -1) {
-          value.push(label);
-          parentGroup?.changeVal(value);
-        }
-      } else {
-        const index = value.indexOf(label);
-        if (index !== -1) {
-          value.splice(index, 1);
-          parentGroup?.changeVal(value);
-        }
-      }
+    const renderIcon = () => {
+      const { iconName, iconSize, iconActiveName, modelValue } = props;
+      return h(nutIcon, {
+        name: !modelValue ? iconName : iconActiveName,
+        size: iconSize,
+        color: color.value
+      });
     };
 
-    const changeEvt = (event: any) => {
-      event?.stopPropagation();
-      const isCheck: boolean = event.target.checked;
-      if (isDisabled.value) {
-        return false;
-      }
-      if (parentGroup.parentNode) {
-        setParentValue(isCheck);
-        return false;
-      }
-      emit('update:modelValue', isCheck);
-      emit(
-        'input',
-        isCheck ? props.trueValue : props.falseValue,
-        props.label,
-        event
+    const renderLabel = () => {
+      return h(
+        'view',
+        {
+          class: `${componentName}__label ${
+            props.disabled ? `${componentName}__label--disabled` : ''
+          }`
+        },
+        label.value
       );
-      if (isChecked.value !== isCheck) {
-        emit(
-          'change',
-          isCheck ? props.trueValue : props.falseValue,
-          props.label,
-          event
-        );
-      }
     };
 
-    return {
-      currentSize,
-      label,
-      name,
-      isDisabled,
-      submittedValue,
-      isAnimated,
-      isChecked,
-      changeEvt
+    const handleClick = (e: MouseEvent | TouchEvent) => {
+      if (props.disabled) return;
+      const text =
+        typeof label.value === 'string'
+          ? label.value
+          : label.value && label.value[0].children;
+      emitChange(!checked.value, text as string);
+    };
+
+    return () => {
+      return h(
+        'view',
+        {
+          class: `${componentName} ${
+            props.textPosition === 'left' ? `${componentName}--reverse` : ''
+          }`,
+          onClick: handleClick
+        },
+        [renderIcon(), renderLabel()]
+      );
     };
   }
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import 'index.scss';
 </style>

src/styles/variables.scss

@@ -255,10 +255,13 @@ $address-region-tab-line: linear-gradient(
 
 //steps
 
-
 // dialog
 $dialog-width: 296px;
 
+// checkbox
+$checkbox-label-color: #1d1e1e;
+$checkbox-label-disable-color: #999;
+
 view-block {
   display: block;
 }