refactor(collapse): script setup (jd-opensource#2907)

src/config.json

@@ -1082,6 +1082,7 @@
           "cName": "折叠面板",
           "type": "component",
           "show": true,
+          "setup": true,
           "desc": "折叠面板",
           "author": "Ymm0008"
         },
@@ -1095,6 +1096,7 @@
           "show": false,
           "exportEmpty": true,
           "exportEmptyTaro": true,
+          "setup": true,
           "desc": "折叠面板-item",
           "author": "Ymm0008"
         },

src/packages/__VUE/collapse/__tests__/collapse.spec.tsx

@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { Heart } from '@nutui/icons-vue';
-import Collapse from '../index.vue';
-import CollapseItem from '../../collapseitem/index.vue';
+import Collapse from '../';
+import CollapseItem from '../../collapseitem';
 
 test('Collapse: should props active', async () => {
   const wrapper = mount(() => {
@@ -131,10 +131,17 @@ test('Collapse: v-model is undefined', async () => {
   const collapseTitles = wrapper.findAll('.nut-collapse-item__title');
   expect(collapseTitles.length).toBe(2);
   collapseTitles[1].trigger('click');
-  expect(onChange).toBeCalledWith([222222], 222222, true);
+  expect(onChange).toBeCalledTimes(1);
+  expect(onChange).toHaveBeenLastCalledWith([222222], 222222, true);
 
   // collapse-item can expand
   const items = wrapper.findAllComponents(CollapseItem);
+  // @ts-ignore
   expect(items[0].vm.expanded).toBe(false);
+  // @ts-ignore
   expect(items[1].vm.expanded).toBe(true);
+
+  collapseTitles[1].trigger('click');
+  expect(onChange).toBeCalledTimes(2);
+  expect(onChange).toHaveBeenLastCalledWith([], 222222, false);
 });

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

@@ -0,0 +1,76 @@
+<template>
+  <view class="nut-collapse">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { provide, ref, watch } from 'vue';
+import { COLLAPSE_KEY, type CollapseValue } from './types';
+
+defineOptions({
+  name: 'NutCollapse'
+});
+
+export type CollapseProps = Partial<{
+  modelValue: CollapseValue;
+  accordion: boolean;
+}>;
+
+const props = withDefaults(defineProps<CollapseProps>(), {
+  modelValue: '',
+  accordion: false
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const innerValue = ref(props.modelValue || (props.accordion ? '' : []));
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    innerValue.value = val;
+  }
+);
+
+const changeVal = (val: string | number | Array<string | number>, name: string | number, status = true) => {
+  innerValue.value = val;
+  emit('update:modelValue', val);
+  emit('change', val, name, status);
+};
+
+const updateVal = (name: string | number) => {
+  if (props.accordion) {
+    if (innerValue.value === name) {
+      changeVal('', name, false);
+    } else {
+      changeVal(name, name, true);
+    }
+  } else {
+    if (Array.isArray(innerValue.value)) {
+      if (innerValue.value.includes(name)) {
+        const newValue = innerValue.value.filter((v: string | number) => v !== name);
+        changeVal(newValue, name, false);
+      } else {
+        const newValue = innerValue.value.concat([name]);
+        changeVal(newValue, name, true);
+      }
+    } else {
+      console.warn('[NutUI] <Collapse> 未开启手风琴模式时 v-model 应为数组');
+    }
+  }
+};
+
+const isExpanded = (name: string | number) => {
+  if (props.accordion) {
+    return innerValue.value === name;
+  } else if (Array.isArray(innerValue.value)) {
+    return innerValue.value.includes(name);
+  }
+  return false;
+};
+
+provide(COLLAPSE_KEY, {
+  updateVal,
+  isExpanded
+});
+</script>

src/packages/__VUE/collapse/collapse.vue

@@ -0,0 +1,76 @@
+<template>
+  <view class="nut-collapse">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { provide, ref, watch } from 'vue';
+import { COLLAPSE_KEY, type CollapseValue } from './types';
+
+defineOptions({
+  name: 'NutCollapse'
+});
+
+export type CollapseProps = Partial<{
+  modelValue: CollapseValue;
+  accordion: boolean;
+}>;
+
+const props = withDefaults(defineProps<CollapseProps>(), {
+  modelValue: '',
+  accordion: false
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const innerValue = ref(props.modelValue || (props.accordion ? '' : []));
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    innerValue.value = val;
+  }
+);
+
+const changeVal = (val: string | number | Array<string | number>, name: string | number, status = true) => {
+  innerValue.value = val;
+  emit('update:modelValue', val);
+  emit('change', val, name, status);
+};
+
+const updateVal = (name: string | number) => {
+  if (props.accordion) {
+    if (innerValue.value === name) {
+      changeVal('', name, false);
+    } else {
+      changeVal(name, name, true);
+    }
+  } else {
+    if (Array.isArray(innerValue.value)) {
+      if (innerValue.value.includes(name)) {
+        const newValue = innerValue.value.filter((v: string | number) => v !== name);
+        changeVal(newValue, name, false);
+      } else {
+        const newValue = innerValue.value.concat([name]);
+        changeVal(newValue, name, true);
+      }
+    } else {
+      console.warn('[NutUI] <Collapse> 未开启手风琴模式时 v-model 应为数组');
+    }
+  }
+};
+
+const isExpanded = (name: string | number) => {
+  if (props.accordion) {
+    return innerValue.value === name;
+  } else if (Array.isArray(innerValue.value)) {
+    return innerValue.value.includes(name);
+  }
+  return false;
+};
+
+provide(COLLAPSE_KEY, {
+  updateVal,
+  isExpanded
+});
+</script>

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

@@ -84,6 +84,20 @@ Set a custom icon through the `slots.icon` or `props.icon` property.
 | --- | --- | --- |
 | change | Triggered when switching panels | `(modelValue, currName, status)` |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  CollapseValue,
+  CollapseProps,
+  CollapseInstance,
+  CollapseItemProps,
+  CollapseItemInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量

src/packages/__VUE/collapse/doc.md

@@ -84,6 +84,20 @@ CollapseItem 组件必须设置 name 属性作为唯一标识符。
 | --- | --- | --- |
 | change | 切换面板时触发 | `(modelValue, currName, status)` |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  CollapseValue,
+  CollapseProps,
+  CollapseInstance,
+  CollapseItemProps,
+  CollapseItemInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量

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

@@ -84,6 +84,20 @@ CollapseItem 组件必须设置 name 属性作为唯一标识符。
 | --- | --- | --- |
 | change | 切换面板时触发 | `(modelValue, currName, status)` |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  CollapseValue,
+  CollapseProps,
+  CollapseInstance,
+  CollapseItemProps,
+  CollapseItemInstance
+} from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量

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

@@ -0,0 +1,13 @@
+import Collapse from './collapse.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Collapse);
+
+export type { CollapseProps } from './collapse.taro.vue';
+
+export type { CollapseValue } from './types';
+
+export type CollapseInstance = ComponentPublicInstance & InstanceType<typeof Collapse>;
+
+export { Collapse, Collapse as default };

src/packages/__VUE/collapse/index.ts

@@ -0,0 +1,13 @@
+import Collapse from './collapse.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Collapse);
+
+export type { CollapseProps } from './collapse.vue';
+
+export type { CollapseValue } from './types';
+
+export type CollapseInstance = ComponentPublicInstance & InstanceType<typeof Collapse>;
+
+export { Collapse, Collapse as default };