fix: 文档更新，多选、单选、折叠面板优化

src/packages/checkbox/demo.vue

@@ -74,7 +74,7 @@
     <h4>CheckboxGroup整体事件</h4>
     <div class="show-demo">
       <div>
-        <nut-checkboxgroup v-model="checkboxGroup4" @change="getChange">
+        <nut-checkboxgroup v-model="checkboxGroup5" @change="getChange">
           <nut-checkbox label="选项一"></nut-checkbox>
           <nut-checkbox label="选项二"></nut-checkbox>
         </nut-checkboxgroup>
@@ -92,7 +92,7 @@
       <div>
         <nut-checkboxgroup
           ref="checkboxGroupDemo"
-          v-model="checkboxGroup5"
+          v-model="checkboxGroup6"
           @change="getChange2"
         >
           <nut-checkbox label="选项一"></nut-checkbox>
@@ -117,7 +117,7 @@
     <div class="show-demo">
       <div>
         <nut-checkboxgroup
-          v-model="checkboxGroup6"
+          v-model="checkboxGroup7"
           direction="vertical"
           @change="getChange3"
         >
@@ -153,9 +153,10 @@ export default createDemo({
       checkboxGroup1: ['选项一'],
       checkboxGroup2: ['选项一'],
       checkboxGroup3: [],
-      checkboxGroup4: ['选项一'],
-      checkboxGroup5: [],
-      checkboxGroup6: []
+      checkboxGroup4: ['没有动效1'],
+      checkboxGroup5: ['选项一'],
+      checkboxGroup6: [],
+      checkboxGroup7: []
     });
     const result = reactive({
       result1: '',

src/packages/checkbox/doc.md

@@ -1,81 +1,114 @@
 # Checkbox 复选按钮
 
+### 介绍
+
+多选按钮用于选择。
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Checkbox } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Checkbox);
+```
+
 ## 基本用法
 
 ```html
-<nut-checkbox v-model="checkbox1">
-  选项
-</nut-checkbox>
+<nut-checkbox v-model="checkbox">选项</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
-data() {
-    return {
-      	checkbox1: false,
-    };
+setup() {
+  return {
+    checkboxGroup: ['选项一'],
+  };
 }
 ```
 ## 禁用状态
 
-非选中时的禁用状态
-
 ```html
-<nut-checkbox v-model="checkbox1" disabled>
-  未选时禁用状态
-</nut-checkbox>
+<nut-checkbox v-model="checkbox1" disabled>未选时禁用状态</nut-checkbox>
+<nut-checkbox v-model="checkbox2" disabled>已选时禁用状态</nut-checkbox>
 ```
 
 ```javascript
-data() {
-    return {
-      	checkbox1: false,
-    };
+setup() {
+  return {
+    checkbox1: false,
+    checkbox2: true,
+  };
 }
 ```
 
-选中时的禁用状态
+## CheckboxGroup整体禁用
 
 ```html
-<nut-checkbox v-model="checkbox1" disabled>
-  已选时禁用状态
-</nut-checkbox>
+<nut-checkboxgroup v-model="checkboxGroup" disabled>
+  <nut-checkbox label="选项一"></nut-checkbox>
+  <nut-checkbox label="选项二"></nut-checkbox>
+</nut-checkboxgroup>
 ```
 
 ```javascript
-data() {
-    return {
-      	checkbox1: true,
-    };
-},
+setup() {
+  return {
+    checkboxGroup: ['选项一'],
+  };
+}
 ```
 
 ## 自定义尺寸
 
 内置 **small**，**base**，**large** 三种规格供使用。
-
 ```html
-<nut-checkbox v-model="checkbox1" size="small">
-  小号
-</nut-checkbox>
+<nut-checkbox v-model="checkbox1" size="small">小号1</nut-checkbox>
+<nut-checkbox v-model="checkbox2" size="base">默认</nut-checkbox>
+<nut-checkbox v-model="checkbox3" size="large">大号</nut-checkbox>
+```
 
-<nut-checkbox v-model="checkbox2" size="base" >
-  默认
-</nut-checkbox>
+```javascript
+setup() {
+  return {
+    checkbox1: true,
+    checkbox2: true,
+    checkbox3: true,
+  };
+}
 
-<nut-checkbox v-model="checkbox3" size="large">
-  大号
-</nut-checkbox>
+```
+
+## CheckboxGroup整体尺寸
+
+```html
+<nut-checkboxgroup v-model="checkboxGroup" size="small">
+  <nut-checkbox label="选项一"></nut-checkbox>
+  <nut-checkbox label="选项二"></nut-checkbox>
+</nut-checkboxgroup>
 ```
 
 ```javascript
-data() {
-    return {
-      	checkbox1: true,
-      	checkbox2: true,
-      	checkbox3: true,
-    };
+setup() {
+  return {
+    checkboxGroup: [],
+  };
 }
-
 ```
 
 ## 禁用动效
@@ -83,16 +116,31 @@ data() {
 animation属性值为false时，禁用自带动效
 
 ```html
-<nut-checkbox v-model="checkbox1" :animation="false">
-  没有动效
-</nut-checkbox>
+<nut-checkbox v-model="checkbox" :animation="false">没有动效</nut-checkbox>
 ```
 
 ```javascript
-data() {
-    return {
-      	checkbox1: false,
-    };
+setup() {
+  return {
+    checkbox: false,
+  };
+}
+```
+
+## CheckboxGroup整体禁用动效
+
+```html
+<nut-checkboxgroup v-model="checkboxGroup" :animation="false">
+  <nut-checkbox label="没有动效1"></nut-checkbox>
+  <nut-checkbox label="没有动效2"></nut-checkbox>
+</nut-checkboxgroup>
+```
+
+```javascript
+setup() {
+  return {
+    checkboxGroup: ['没有动效1'],
+  };
 }
 ```
 
@@ -101,44 +149,115 @@ data() {
 值发生变化时，将触发change事件
 
 ```html
-<nut-checkbox v-model="checkbox1" @change="checkboxChange">
+<nut-checkbox v-model="checkbox" @change="checkboxChange">
   change事件
 </nut-checkbox>
 ```
 
 ```javascript
-methods: {
-	checkboxChange(checked) {
-        alert('change事件触发' + checked);
+setup() {
+  const checkbox = ref(false);
+  const checkboxChange= (checked) => {
+    console.log('change事件触发' + checked);
 	}  
+  return {
+    checkbox,
+    checkboxChange
+  };
 }
 ```
 
-设置label属性，获取选项状态和选项label值的方法：
+## CheckboxGroup整体事件
 
 ```html
-<nut-checkbox v-model="checkbox1" :label="'选项值'" @change="getChange">
-  备选项
-</nut-checkbox>
+<nut-checkboxgroup v-model="checkboxGroup" @change="getChange">
+  <nut-checkbox label="选项一"></nut-checkbox>
+  <nut-checkbox label="选项二"></nut-checkbox>
+</nut-checkboxgroup>
 ```
 
 ```javascript
-methods: {
-    getChange(checked,val){
-        console.log('选中状态：' + checked +'，选中选项：' + val) 
-    }
-    
+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,
+  };
 }
 ```
 
-**注意**：当设置了label属性时，第二个参数label才有值，否则默认为空。(label设置后替换插值内容)
+## 全选与反选
+```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排列方向
 
-## 新增自定义class
 ```html
-<nut-checkbox v-model="checkbox1" class="my-checkbox">
-  自定义了Class:"my-checkbox"
-</nut-checkbox>
+<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,
+  };
+}
 ```
 
 ## Prop
@@ -153,6 +272,15 @@ methods: {
 | disabled | 是否禁用 | Boolean | false
 | animation | 是否需要动效 | Boolean | true
 
+### CheckGroup
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| v-model | 必填项，当前选中项的选中状态,同步value | Boolean | false
+| size | 尺寸，可选值small/base/large | String | base
+| disabled | 是否禁用 | Boolean | false
+| animation | 是否需要动效 | Boolean | true
+
 
 ## Event
 

src/packages/collapse/demo.vue

@@ -119,9 +119,10 @@ export default createDemo({
 </style>
 <style lang="scss" scoped>
 .demo-list {
+  padding-top: 0;
   margin: 60px 0;
   h4 {
-    margin: 20px 0 10px 25px;
+    margin: 20px 0 10px 10px;
     font-size: 14px;
     color: #909ca4;
   }

src/packages/collapse/doc.md

@@ -18,13 +18,12 @@
 ```
 
 ``` javascript
-export default {
-  data() {
-    return {
-        activeNames: [1, 2]
-    };
-  }
-};
+setup() {
+  const activeNames = reactive([1, 2]);
+  return {
+    activeNames
+  };
+}
 ```
 
 
@@ -47,14 +46,13 @@ export default {
 ```
 
 ``` javascript
-export default {
-  data() {
-    return {
-      activeName: 1,
-      subTitle: '副标题'
-    };
-  }
-};
+setup() {
+  const activeName = ref(1);
+  return {
+    activeName,
+    subTitle: '副标题'
+  };
+}
 ```
 
 
@@ -75,18 +73,16 @@ export default {
 ```
 
 ``` javascript
-export default {
-  data() {
-    return {
-      activeName: 1,
-      expandIconPosition: 'left',
-      icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/132849/8/9709/550/5f5f0d8aE802abee7/68bd02b3a52c3988.png'
-      rotate: 180,
-      iconWidth: '20px',
-      iconHeight: '20px',
-    };
-  }
-};
+setup() {
+  return {
+    activeName: 1,
+    expandIconPosition: 'left',
+    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/132849/8/9709/550/5f5f0d8aE802abee7/68bd02b3a52c3988.png'
+    rotate: 180,
+    iconWidth: '20px',
+    iconHeight: '20px',
+  };
+}
 ```
 
 ## Collapse Prop
@@ -109,7 +105,7 @@ export default {
 | title | 标题栏左侧内容 | string | - |
 | name | 唯一标识符，必填 | string \ number | -1 |
 | expand-icon-position | 标题图标的位置 | string | right |
-| title-icon | 标题图标链接 | string | ‘none’ 为不展示图标，默认 ‘’ |
+| title-icon | 标题图标链接 | string | ‘’ 为不展示图标，默认 ‘’ |
 | title-icon-width | 标题图标宽度 | string | 13px |
 | title-icon-height | 标题图标高度 | string | 13px |
 | title-icon-position | 标题图标位置 | string | ‘left' 'right' |

src/packages/collapse/index.vue

@@ -55,6 +55,7 @@ export default create({
       default: 180
     }
   },
+  emits: ['update:active', 'change'],
   setup(props, { emit }) {
     const { active } = toRefs(props);
     // 多个 item 展开
@@ -72,6 +73,7 @@ export default create({
       const v = JSON.parse(JSON.stringify(activeItem));
       index > -1 ? v.splice(index, 1) : v.push(name);
       emit('update:active', v);
+      emit('change', v);
     };
 
     // 更新v-modal的值
@@ -80,6 +82,7 @@ export default create({
       expanded: boolean
     ) => {
       emit('update:active', val);
+      emit('change', val);
     };
 
     const isExpanded = (name: string | number | Array<string | number>) => {

src/packages/collapseitem/index.vue

@@ -17,14 +17,22 @@
       <view class="collapse-title">
         <view>
           <img
-            v-if="titleIcon != 'none' && titleIconPosition == 'left'"
+            v-if="
+              titleIcon != '' &&
+                titleIcon != 'none' &&
+                titleIconPosition == 'left'
+            "
             :src="titleIcon"
             :style="titleIconWH"
             class="titleIconLeft"
           />
           <view v-html="title"></view>
           <img
-            v-if="titleIcon != 'none' && titleIconPosition == 'right'"
+            v-if="
+              titleIcon != '' &&
+                titleIcon != 'none' &&
+                titleIconPosition == 'right'
+            "
             :src="titleIcon"
             :style="titleIconWH"
             class="titleIconRight"
@@ -112,6 +120,7 @@ export default create({
         transform: 'rotate(0deg)'
       }
     });
+    console.log(parent.titleIcon);
 
     const titleIconStyle = reactive({
       titleIcon: parent.titleIcon,
@@ -184,6 +193,8 @@ export default create({
           }
         });
         nextTick(() => {
+          console.log(currentName.value);
+
           parent.changeVal(currentName.value, !proxyData.openExpanded);
           animation();
         });

src/packages/radio/doc.md

@@ -1,75 +1,102 @@
 # Radio 单选按钮
 
-## 基本用法
+## Radio 基本用法
 
 通过 **v-model** 绑定值当前选中项的 **label** ，二者一致时 **Radio** 选中。
 ```html
-<nut-radio 
-  v-model="radioVal"
-  :label="b"
->备选项1
-</nut-radio>
+<nut-radio v-model="radioVal" :label="b">备选项1</nut-radio>
 ```
 ```javascript
-export default {
-  data() {
-    return {
-      radioVal:"a",
-    }
-  }
-};
+setup() {
+  return {
+    radioVal:"a",
+  };
+}
 ```
 
-## 组合使用
+## 组合使用 Radio
 
 ```html
-<nut-radio 
-  v-model="radioVal1"
-  :label="1"
->备选项1
-</nut-radio>
+<nut-radio v-model="radioVal" :label="1">备选项1</nut-radio>
+<nut-radio v-model="radioVal" :label="2">备选项2</nut-radio>
+```
+```javascript
+setup() {
+  return {
+    radioVal:"2",
+  };
+}
+```
 
-<nut-radio 
-  v-model="radioVal1"
-  :label="2"
->备选项2
-</nut-radio>
+## RadioGroup基本用法
+
+```html
+<nut-radiogroup v-model="radioGroupVal">
+  <nut-radio label="a">备选项1</nut-radio>
+  <nut-radio label="b">备选项2</nut-radio>
+</nut-radiogroup>
+```
+```javascript
+setup() {
+  return {
+    radioGroupVal:"b",
+  };
+}
 ```
 
 
-## 禁用状态
+## Radio 禁用
 
 通过给 **disabled** 传布尔值 **false** ，可将组件禁用
 
 ```html
-<nut-radio 
-  :disabled="true" 
-  v-model="radioVal2" 
-  label="禁用"
->备选项1
-</nut-radio>
+<nut-radio :disabled="true" label="禁用">备选项1</nut-radio>
 ```
 
+## RadioGroup 整体禁用
 
-## 自定义尺寸
+```html
+<nut-radiogroup v-model="radioGroupVal" :animated="false">
+  <nut-radio label="a">备选项1</nut-radio>
+  <nut-radio label="b">备选项2</nut-radio>
+  <nut-radio label="c">备选项3</nut-radio>
+</nut-radiogroup>
+```
+```javascript
+setup() {
+  return {
+    radioGroupVal:"c",
+  };
+}
+```
+
+## Radio 自定义尺寸
 
 内置 **small**，**base**，**large** 三种规格供使用。
 
 ```html
-<nut-radio 
-  size="small"
->小号
-</nut-radio>
+<nut-radio size="small">小号</nut-radio>
+<nut-radio size="base">默认</nut-radio>
+<nut-radio size="large">大号</nut-radio>
+```
 
-<nut-radio 
-  size="base"
->默认
-</nut-radio>
+## RadioGroup整体定义尺寸
 
-<nut-radio 
-  size="large"
->大号
-</nut-radio>
+内置 **small**，**base**，**large** 三种规格供使用。
+
+```html
+<nut-radiogroup v-model="radioGroupVal" size="large">
+  <nut-radio label="1">备选项1</nut-radio>
+  <nut-radio label="2">备选项2</nut-radio>
+  <nut-radio label="3">备选项3</nut-radio>
+</nut-radiogroup>
+```
+```javascript
+setup() {
+  return {
+    radioGroupVal:"2",
+  };
+}
 ```
 
 ## 禁用动效
@@ -77,36 +104,38 @@ export default {
 通过给 **animated** 传布尔值 **false** ，禁用自带动效
 
 ```html
-<nut-radio 
-   :animated="false" 
-   v-model="radioVal3" 
-   label="a"
->备选项1
-</nut-radio>
-
-<nut-radio 
-   :animated="false" 
-   v-model="radioVal3" 
-   label="b"
->备选项2</nut-radio>
+<nut-radio :animated="false" v-model="radioVal" label="a">备选项1</nut-radio>
+<nut-radio :animated="false" v-model="radioVal" label="b">备选项2</nut-radio>
+```
+```javascript
+setup() {
+  return {
+    radioVal: 'b',
+  };
+}
 ```
 
-禁用 **RadioGroup** 动效
+## RadioGroup 禁用动效
 
 ```html
-<nut-radiogroup v-model="radioGroupVal4" :animated="false">
+<nut-radiogroup v-model="radioGroupVal" :animated="false">
   <nut-radio label="a">备选项1</nut-radio>
   <nut-radio label="b">备选项2</nut-radio>
   <nut-radio label="c">备选项3</nut-radio>
 </nut-radiogroup>
 ```
+```javascript
+setup() {
+  return {
+    radioGroupVal: 'c',
+  };
+}
+```
 
 
 ## 新增自定义class
 ```html
-<nut-radio 
-   class="my-radio"
->备选项</nut-radio>
+<nut-radio class="my-radio">备选项</nut-radio>
 ```
 **RadioGroup** 也支持新增自定义class
 
@@ -122,3 +151,17 @@ export default {
 | disabled | 是否禁用 | Boolean | false
 | animated | 是否需要动效 | Boolean | true
 
+### RadioGroup
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| v-model | 当前选中项的标识符，与label值一致时呈选中状态 | 任意类型 | -
+| size | 尺寸，可选值small/base/large | String | base
+| disabled | 是否禁用 | Boolean | false
+| animated | 是否需要动效 | Boolean | true
+
+## Event
+
+| 字段 | 说明 | 回调参数 
+|----- | ----- | ----- 
+| change | 值变化时触发 | 当前选中项值（label）【设置label后有值、默认为空】,event

src/packages/radio/index.vue

@@ -51,7 +51,7 @@ export default create({
     }
   },
   components: {},
-  emits: ['input', 'update:modelValue'],
+  emits: ['input', 'update:modelValue', 'change'],
   setup(props, { emit }) {
     const parentGroup = inject('radiogroup', {
       parentNode: false,
@@ -110,6 +110,7 @@ export default create({
       }
       currentValue.value = props.label ?? '';
       emit('update:modelValue', props.label);
+      emit('change', props.label, event);
     };
 
     return {

src/packages/radiogroup/index.vue

@@ -4,7 +4,7 @@
   </view>
 </template>
 <script lang="ts">
-import { toRefs, provide } from 'vue';
+import { toRefs, provide, watch } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('radiogroup');
 
@@ -27,7 +27,14 @@ export default create({
       default: true
     }
   },
+  emits: ['change', 'update:modelValue'],
   setup(props, { emit }) {
+    watch(
+      () => props.modelValue,
+      value => {
+        emit('change', value, event);
+      }
+    );
     provide('radiogroup', {
       parentNode: true,
       changeVal: (val: string | number) => {