fix: collapse 折叠面板文档及props优化

src/packages/__VUE/collapse/demo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo full">
     <h2>{{ translate('basic1') }}</h2>
-    <nut-collapse v-model:active="active1" @change="change">
+    <nut-collapse v-model="active1" @change="change">
       <nut-collapse-item :name="1">
         <template v-slot:mTitle>
           {{ translate('title1') }}
@@ -14,14 +14,14 @@
       <nut-collapse-item :title="translate('title3')" :name="3" disabled> </nut-collapse-item>
     </nut-collapse>
     <!-- <h2>{{ translate('basic2') }}</h2>
-    <nut-collapse v-model:active="active4" :accordion="true" @change="change">
+    <nut-collapse v-model="active4" :accordion="true" @change="change">
       <nut-collapse-item :title="translate('title1')" :name="1">
         {{ translate('desc3') }}
       </nut-collapse-item>
       <nut-collapse-item :title="translate('title2')" :name="2"> {{ translate('desc4') }} </nut-collapse-item>
     </nut-collapse> -->
     <h2>{{ translate('basic3') }}</h2>
-    <nut-collapse v-model:active="active2" :accordion="true">
+    <nut-collapse v-model="active2" :accordion="true">
       <nut-collapse-item :title="translate('title1')" :name="1"> {{ translate('desc5') }} </nut-collapse-item>
       <nut-collapse-item :title="translate('title2')" :name="2" :value="translate('subtitle')">
         {{ translate('desc6') }}
@@ -31,7 +31,7 @@
       </nut-collapse-item>
     </nut-collapse>
     <h2>{{ translate('basic4') }}</h2>
-    <nut-collapse v-model:active="active3" :accordion="true">
+    <nut-collapse v-model="active3" :accordion="true">
       <nut-collapse-item :title="translate('title1')" :name="1" :icon="Notice">
         <template v-slot:value> {{ translate('title4') }} </template>
         {{ translate('desc8') }}
@@ -41,7 +41,7 @@
       </nut-collapse-item>
     </nut-collapse>
     <!-- <h2>{{ translate('basic5') }}</h2>
-    <nut-collapse v-model:active="active5" :accordion="true">
+    <nut-collapse v-model="active5" :accordion="true">
       <nut-collapse-item :title="translate('title1')" :name="1" :icon="Comment">
         {{ translate('desc10') }}
       </nut-collapse-item>
@@ -50,7 +50,7 @@
       </nut-collapse-item>
     </nut-collapse> -->
     <h2>{{ translate('basic6') }}</h2>
-    <nut-collapse v-model:active="active6" :accordion="true">
+    <nut-collapse v-model="active6" :accordion="true">
       <nut-collapse-item :title="translate('title1')" :name="1">
         <template v-slot:extraRender>{{ translate('title5') }}</template>
         {{ translate('desc1') }}

src/packages/__VUE/collapse/doc.en-US.md

@@ -184,22 +184,22 @@ export default {
 ## API
 ### Collapse Props
 
-|Field | Description | Type | Default
+| Field | Description | Type | Default
 |----- | ----- | ----- | -----
-|V-model | name of the current expansion panel | accordion mode: string | number<br>Non accordion mode: (string | number) [] | -|
-|Accordion | Enable accordion mode |_boolean_ | `false` |
+| v-model | `name` of the currently expanded panel | accordion-mode: string \| number<br>non-accordion-mode: (string \| number)[] | `-` |
+| accordion | Whether to enable accordion mode | boolean | `false` |
 
 ### CollapseItem Props
-
-|Parameter | Description | Type | Default|
+| Parameter | Description | Type | Default |
 |------|------|------|------|
-|Name | Unique identifier, required | string number | - 1|
-|Title | The content on the left side of the title bar supports slot incoming (the incoming priority of props is higher) | string | -|
-|Value | The content on the right side of the title bar supports slot incoming (the incoming priority of props is higher) | string | -|
-|Label | Title bar description information |_number \| string_ | - |
-|Rotate | Click the rotation angle of folding and unfolding to take effect in custom icon mode | string number | 180|
-|Disabled | Disable the title bar |_boolean_ | false |
-|Border | Display border |_boolean_ | `true` |
+| name | unique identifier, required | string \| number | `-1` |
+| title | The content on the left side of the title bar, supports slot input (`props` input has a higher priority) | string |`-` |
+| value | The content on the right side of the title bar, support slot input (`props` input has a higher priority) | string | `-` |
+| icon | The icon component on the left side of the title bar, equivalent to the `nutui-icon` component | - | `-` |
+| label | title bar description | number \| string | `-` |
+| rotate | Click the rotation angle of folding and unfolding, effective in the custom icon mode | string \| number | `180` |
+| disabled | whether the title bar is disabled | boolean | `false` |
+| border | Whether to display borders | boolean | `true` |
 
 
 ### CollapseItem Slots
@@ -224,18 +224,18 @@ export default {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-collapse-item-padding| _13px 36px 13px 26px_ | -  |
-| --nut-collapse-item-color| _#666666_ | -  |
-| --nut-collapse-item-disabled-color| _#c8c9cc_ | -  |
-| --nut-collapse-item-icon-color| _#666666_ | -  |
-| --nut-collapse-item-font-size| _var(--nut-font-size-2)_ | -  |
-| --nut-collapse-item-line-height| _24px_ | -  |
-| --nut-collapse-item-sub-title-color| _#666666_ | -  |
-| --nut-collapse-wrapper-content-padding| _12px 26px_ | -  |
-| --nut-collapse-wrapper-empty-content-padding| _0 26px_ | -  |
-| --nut-collapse-wrapper-content-color| _#666666_ | -  |
-| --nut-collapse-wrapper-content-font-size| _var(--nut-font-size-2)_ | -  |
-| --nut-collapse-wrapper-content-line-height| _1.5_ | -  |
-| --nut-collapse-wrapper-content-background-color| _var(--nut-white)_ | -  |
+| 名称                                    | 默认值                     |
+| --------------------------------------- | -------------------------- | 
+| --nut-collapse-item-padding| _13px 36px 13px 26px_ |
+| --nut-collapse-item-color| _#666666_ |
+| --nut-collapse-item-disabled-color| _#c8c9cc_ |
+| --nut-collapse-item-icon-color| _#666666_ |
+| --nut-collapse-item-font-size| _var(--nut-font-size-2)_ |
+| --nut-collapse-item-line-height| _24px_ |
+| --nut-collapse-item-sub-title-color| _#666666_ |
+| --nut-collapse-wrapper-content-padding| _12px 26px_ |
+| --nut-collapse-wrapper-empty-content-padding| _0 26px_ |
+| --nut-collapse-wrapper-content-color| _#666666_ |
+| --nut-collapse-wrapper-content-font-size| _var(--nut-font-size-2)_ |
+| --nut-collapse-wrapper-content-line-height| _1.5_ |
+| --nut-collapse-wrapper-content-background-color| _var(--nut-white)_ |

src/packages/__VUE/collapse/doc.md

@@ -185,20 +185,20 @@ export default {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| v-model | 当前展开面板的 name | 手风琴模式：string \| number<br>非手风琴模式：(string \| number)[] | - |
-| accordion | 是否开启手风琴模式 | _boolean_ | `false` |
+| v-model | 当前展开面板的 `name` | 手风琴模式：string \| number<br>非手风琴模式：(string \| number)[] | `-` |
+| accordion | 是否开启手风琴模式 | boolean | `false` |
 
 ### CollapseItem Props
 | 参数 | 说明 | 类型 | 默认值 | 
 |------|------|------|------|
-| name | 唯一标识符，必填 | string \ number | -1 |
-| title | 标题栏左侧内容，支持插槽传入（props传入的优先级更高） | string | - |
-| value | 标题栏右侧内容，支持插槽传入（props传入的优先级更高） | string | - |
-| icon | 标题栏左侧图标组件，等同于 nutui-icon 组件 | - | - |
-| label | 标题栏描述信息 | _number \| string_ | - |
-| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | string \ number | 180 |
-| disabled | 标题栏是否禁用 | _boolean_ | false |
-| border | 是否显示边框 | _boolean_ | `true` |
+| name | 唯一标识符，必填 | string \| number | `-1` |
+| title | 标题栏左侧内容，支持插槽传入（`props` 传入的优先级更高） | string |`-` |
+| value | 标题栏右侧内容，支持插槽传入（`props` 传入的优先级更高） | string | `-` |
+| icon | 标题栏左侧图标组件，等同于 `nutui-icon` 组件 | - | `-` |
+| label | 标题栏描述信息 | number \| string | `-` |
+| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | string \| number | `180` |
+| disabled | 标题栏是否禁用 | boolean | `false` |
+| border | 是否显示边框 | boolean | `true` |
 
 ### CollapseItem Slots
 
@@ -212,25 +212,25 @@ export default {
 
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
-| change | 切换面板时触发 | 类型与 v-model 绑定的值一致 |
+| change | 切换面板时触发 | 打开状态的面板`name`值 |
 ## 主题定制
 
 ### 样式变量
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-collapse-item-padding| _13px 36px 13px 26px_ | -  |
-| --nut-collapse-item-color| _#666666_ | -  |
-| --nut-collapse-item-disabled-color| _#c8c9cc_ | -  |
-| --nut-collapse-item-icon-color| _#666666_ | -  |
-| --nut-collapse-item-font-size| _var(--nut-font-size-2)_ | -  |
-| --nut-collapse-item-line-height| _24px_ | -  |
-| --nut-collapse-item-sub-title-color| _#666666_ | -  |
-| --nut-collapse-wrapper-content-padding| _12px 26px_ | -  |
-| --nut-collapse-wrapper-empty-content-padding| _0 26px_ | -  |
-| --nut-collapse-wrapper-content-color| _#666666_ | -  |
-| --nut-collapse-wrapper-content-font-size| _var(--nut-font-size-2)_ | -  |
-| --nut-collapse-wrapper-content-line-height| _1.5_ | -  |
-| --nut-collapse-wrapper-content-background-color| _var(--nut-white)_ | -  |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- |
+| --nut-collapse-item-padding| _13px 36px 13px 26px_ |
+| --nut-collapse-item-color| _#666666_ |
+| --nut-collapse-item-disabled-color| _#c8c9cc_ |
+| --nut-collapse-item-icon-color| _#666666_ |
+| --nut-collapse-item-font-size| _var(--nut-font-size-2)_ |
+| --nut-collapse-item-line-height| _24px_ |
+| --nut-collapse-item-sub-title-color| _#666666_ |
+| --nut-collapse-wrapper-content-padding| _12px 26px_ |
+| --nut-collapse-wrapper-empty-content-padding| _0 26px_ |
+| --nut-collapse-wrapper-content-color| _#666666_ |
+| --nut-collapse-wrapper-content-font-size| _var(--nut-font-size-2)_ |
+| --nut-collapse-wrapper-content-line-height| _1.5_ |
+| --nut-collapse-wrapper-content-background-color| _var(--nut-white)_ |

src/packages/__VUE/collapse/doc.taro.md

@@ -185,20 +185,20 @@ export default {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| v-model | 当前展开面板的 name | 手风琴模式：string \| number<br>非手风琴模式：(string \| number)[] | - |
-| accordion | 是否开启手风琴模式 | _boolean_ | `false` |
+| v-model | 当前展开面板的 `name` | 手风琴模式：string \| number<br>非手风琴模式：(string \| number)[] | `-` |
+| accordion | 是否开启手风琴模式 | boolean | `false` |
 
 ### CollapseItem Props
 | 参数 | 说明 | 类型 | 默认值 | 
 |------|------|------|------|
-| name | 唯一标识符，必填 | string \ number | -1 |
-| title | 标题栏左侧内容，支持插槽传入（props传入的优先级更高） | string | - |
-| value | 标题栏右侧内容，支持插槽传入（props传入的优先级更高） | string | - |
-| icon | 标题栏左侧图标组件，等同于 nutui-icon 组件 | - | - |
-| label | 标题栏描述信息 | _number \| string_ | - |
-| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | string \ number | 180 |
-| disabled | 标题栏是否禁用 | _boolean_ | false |
-| border | 是否显示边框 | _boolean_ | `true` |
+| name | 唯一标识符，必填 | string \| number | `-1` |
+| title | 标题栏左侧内容，支持插槽传入（`props` 传入的优先级更高） | string |`-` |
+| value | 标题栏右侧内容，支持插槽传入（`props` 传入的优先级更高） | string | `-` |
+| icon | 标题栏左侧图标组件，等同于 `nutui-icon` 组件 | - | `-` |
+| label | 标题栏描述信息 | number \| string | `-` |
+| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | string \| number | `180` |
+| disabled | 标题栏是否禁用 | boolean | `false` |
+| border | 是否显示边框 | boolean | `true` |
 
 ### CollapseItem Slots
 
@@ -216,22 +216,22 @@ export default {
 
 ## Theming
 
-### CSS Variables
-
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
-
-| Name | Default Value | Description |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-collapse-item-padding| _13px 36px 13px 26px_ | -  |
-| --nut-collapse-item-color| _#666666_ | -  |
-| --nut-collapse-item-disabled-color| _#c8c9cc_ | -  |
-| --nut-collapse-item-icon-color| _#666666_ | -  |
-| --nut-collapse-item-font-size| _var(--nut-font-size-2)_ | -  |
-| --nut-collapse-item-line-height| _24px_ | -  |
-| --nut-collapse-item-sub-title-color| _#666666_ | -  |
-| --nut-collapse-wrapper-content-padding| _12px 26px_ | -  |
-| --nut-collapse-wrapper-empty-content-padding| _0 26px_ | -  |
-| --nut-collapse-wrapper-content-color| _#666666_ | -  |
-| --nut-collapse-wrapper-content-font-size| _var(--nut-font-size-2)_ | -  |
-| --nut-collapse-wrapper-content-line-height| _1.5_ | -  |
-| --nut-collapse-wrapper-content-background-color| _var(--nut-white)_ | -  |
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| Name | Default Value |
+| --------------------------------------- | -------------------------- |
+| --nut-collapse-item-padding| _13px 36px 13px 26px_ |
+| --nut-collapse-item-color| _#666666_ |
+| --nut-collapse-item-disabled-color| _#c8c9cc_ |
+| --nut-collapse-item-icon-color| _#666666_ |
+| --nut-collapse-item-font-size| _var(--nut-font-size-2)_ |
+| --nut-collapse-item-line-height| _24px_ |
+| --nut-collapse-item-sub-title-color| _#666666_ |
+| --nut-collapse-wrapper-content-padding| _12px 26px_ |
+| --nut-collapse-wrapper-empty-content-padding| _0 26px_ |
+| --nut-collapse-wrapper-content-color| _#666666_ |
+| --nut-collapse-wrapper-content-font-size| _var(--nut-font-size-2)_ |
+| --nut-collapse-wrapper-content-line-height| _1.5_ |
+| --nut-collapse-wrapper-content-background-color| _var(--nut-white)_ |

src/packages/__VUE/collapse/index.taro.vue

@@ -10,7 +10,7 @@ import { nextTick } from '@tarojs/taro';
 const { create, componentName } = createComponent('collapse');
 export default create({
   props: {
-    active: {
+    modelValue: {
       type: [String, Number, Array]
     },
     accordion: {
@@ -18,7 +18,7 @@ export default create({
       default: false
     }
   },
-  emits: ['update:active', 'change'],
+  emits: ['update:modelValue', 'change'],
   setup(props, { emit, slots }) {
     const collapseDom: any = ref(null);
     const classes = computed(() => {
@@ -29,12 +29,12 @@ export default create({
     });
 
     const changeVal = (val: string | number | Array<string | number>) => {
-      emit('update:active', val);
+      emit('update:modelValue', val);
       emit('change', val);
     };
 
     const changeValAry = (name: string) => {
-      const activeItem: any = props.active instanceof Object ? Object.values(props.active) : props.active;
+      const activeItem: any = props.modelValue instanceof Object ? Object.values(props.modelValue) : props.modelValue;
       let index = -1;
 
       activeItem.forEach((item: string | number, idx: number) => {
@@ -47,14 +47,14 @@ export default create({
     };
 
     const isExpanded = (name: string | number | Array<string | number>) => {
-      const { accordion, active } = props;
+      const { accordion, modelValue } = props;
       if (accordion) {
-        return typeof active === 'number' || typeof active === 'string' ? active == name : false;
+        return typeof modelValue === 'number' || typeof modelValue === 'string' ? modelValue == name : false;
       }
     };
 
     const activeIndex = () => {
-      const activeCollapse: any = props.active;
+      const activeCollapse: any = props.modelValue;
       const childrenList: any = slots.default?.();
       let act: any = [];
       childrenList.forEach((item: any, index: number) => {
@@ -78,19 +78,15 @@ export default create({
     });
 
     watch(
-      () => props.active,
-      (newval: any, oldval) => {
+      () => props.modelValue,
+      (newval: any) => {
         nextTick(() => {
           let domsProps: any = slots?.default?.();
           let doms: any = childrenDom.value;
           Array.from(doms).forEach((item: any, index: number) => {
             if (typeof newval == 'number' || typeof newval == 'string') {
-              if (domsProps[index]) {
-                if (domsProps[index].props) {
-                  item.changeOpen(newval == domsProps[index].props.name ? true : false);
-                } else {
-                  item.changeOpen(newval == item.name ? true : false);
-                }
+              if (domsProps[index] && domsProps[index].props) {
+                item.changeOpen(newval == domsProps[index].props.name ? true : false);
               } else {
                 item.changeOpen(newval == item.name ? true : false);
               }

src/packages/__VUE/collapse/index.vue

@@ -9,7 +9,7 @@ import { createComponent } from '@/packages/utils/create';
 const { create, componentName } = createComponent('collapse');
 export default create({
   props: {
-    active: {
+    modelValue: {
       type: [String, Number, Array],
       default: () => []
     },
@@ -18,7 +18,7 @@ export default create({
       default: false
     }
   },
-  emits: ['update:active', 'change'],
+  emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {
     const collapseDom: any = ref(null);
     const collapseChldren: any = ref([]);
@@ -30,7 +30,7 @@ export default create({
     });
 
     watch(
-      () => props.active,
+      () => props.modelValue,
       (newval: number | string | any) => {
         let doms: any = collapseChldren.value;
         Array.from(doms).forEach((item: any) => {
@@ -50,12 +50,12 @@ export default create({
     });
 
     const changeVal = (val: string | number | Array<string | number>) => {
-      emit('update:active', val);
+      emit('update:modelValue', val);
       emit('change', val);
     };
 
     const changeValAry = (name: string) => {
-      const activeItem: any = props.active instanceof Object ? Object.values(props.active) : props.active;
+      const activeItem: any = props.modelValue instanceof Object ? Object.values(props.modelValue) : props.modelValue;
       let index = -1;
       activeItem.forEach((item: string | number, idx: number) => {
         if (String(item) == String(name)) {
@@ -67,9 +67,9 @@ export default create({
     };
 
     const isExpanded = (name: string | number | Array<string | number>) => {
-      const { accordion, active } = props;
+      const { accordion, modelValue } = props;
       if (accordion) {
-        return typeof active === 'number' || typeof active === 'string' ? active == name : false;
+        return typeof modelValue === 'number' || typeof modelValue === 'string' ? modelValue == name : false;
       }
     };
 

src/packages/__VUE/collapseitem/index.taro.vue

@@ -171,7 +171,7 @@ export default create({
     const toggleOpen = () => {
       if (parent.props.accordion) {
         nextTick(() => {
-          if (currentName.value == parent.props.active) {
+          if (currentName.value == parent.props.modelValue) {
             open();
           } else {
             parent.changeVal(currentName.value);
@@ -241,7 +241,7 @@ export default create({
     };
     onMounted(() => {
       const { name } = props;
-      const active = parent && parent.props.active;
+      const active = parent && parent.props.modelValue;
       if (typeof active == 'number' || typeof active == 'string') {
         if (name == active) {
           defaultOpen();

src/packages/__VUE/collapseitem/index.vue

@@ -159,7 +159,7 @@ export default create({
     const toggleOpen = () => {
       if (parent.props.accordion) {
         nextTick(() => {
-          if (currentName.value == parent.props.active) {
+          if (currentName.value == parent.props.modelValue) {
             open();
           } else {
             parent.changeVal(currentName.value);
@@ -190,7 +190,7 @@ export default create({
 
     const init = () => {
       const { name } = props;
-      const active = parent && parent.props.active;
+      const active = parent && parent.props.modelValue;
       nextTick(() => {
         if (typeof active == 'number' || typeof active == 'string') {
           if (name == active) {