Skip to content

Commit 0567135

Browse files
eiinueiinu
authored
refactor(collapse): script setup (#2907)
1 parent 14da68a commit 0567135

18 files changed

+561
-514
lines changed

‎src/config.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1082,6 +1082,7 @@
10821082
"cName": "折叠面板",
10831083
"type": "component",
10841084
"show": true,
1085+
"setup": true,
10851086
"desc": "折叠面板",
10861087
"author": "Ymm0008"
10871088
},
@@ -1095,6 +1096,7 @@
10951096
"show": false,
10961097
"exportEmpty": true,
10971098
"exportEmptyTaro": true,
1099+
"setup": true,
10981100
"desc": "折叠面板-item",
10991101
"author": "Ymm0008"
11001102
},

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { mount } from '@vue/test-utils';
22
import { nextTick } from 'vue';
33
import { Heart } from '@nutui/icons-vue';
4-
import Collapse from '../index.vue';
5-
import CollapseItem from '../../collapseitem/index.vue';
4+
import Collapse from '../';
5+
import CollapseItem from '../../collapseitem';
66

77
test('Collapse: should props active', async () => {
88
const wrapper = mount(() => {
@@ -131,10 +131,17 @@ test('Collapse: v-model is undefined', async () => {
131131
const collapseTitles = wrapper.findAll('.nut-collapse-item__title');
132132
expect(collapseTitles.length).toBe(2);
133133
collapseTitles[1].trigger('click');
134-
expect(onChange).toBeCalledWith([222222], 222222, true);
134+
expect(onChange).toBeCalledTimes(1);
135+
expect(onChange).toHaveBeenLastCalledWith([222222], 222222, true);
135136

136137
// collapse-item can expand
137138
const items = wrapper.findAllComponents(CollapseItem);
139+
// @ts-ignore
138140
expect(items[0].vm.expanded).toBe(false);
141+
// @ts-ignore
139142
expect(items[1].vm.expanded).toBe(true);
143+
144+
collapseTitles[1].trigger('click');
145+
expect(onChange).toBeCalledTimes(2);
146+
expect(onChange).toHaveBeenLastCalledWith([], 222222, false);
140147
});

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<view class="nut-collapse">
3+
<slot></slot>
4+
</view>
5+
</template>
6+
<script setup lang="ts">
7+
import { provide, ref, watch } from 'vue';
8+
import { COLLAPSE_KEY, type CollapseValue } from './types';
9+
10+
defineOptions({
11+
name: 'NutCollapse'
12+
});
13+
14+
export type CollapseProps = Partial<{
15+
modelValue: CollapseValue;
16+
accordion: boolean;
17+
}>;
18+
19+
const props = withDefaults(defineProps<CollapseProps>(), {
20+
modelValue: '',
21+
accordion: false
22+
});
23+
24+
const emit = defineEmits(['update:modelValue', 'change']);
25+
26+
const innerValue = ref(props.modelValue || (props.accordion ? '' : []));
27+
28+
watch(
29+
() => props.modelValue,
30+
(val) => {
31+
innerValue.value = val;
32+
}
33+
);
34+
35+
const changeVal = (val: string | number | Array<string | number>, name: string | number, status = true) => {
36+
innerValue.value = val;
37+
emit('update:modelValue', val);
38+
emit('change', val, name, status);
39+
};
40+
41+
const updateVal = (name: string | number) => {
42+
if (props.accordion) {
43+
if (innerValue.value === name) {
44+
changeVal('', name, false);
45+
} else {
46+
changeVal(name, name, true);
47+
}
48+
} else {
49+
if (Array.isArray(innerValue.value)) {
50+
if (innerValue.value.includes(name)) {
51+
const newValue = innerValue.value.filter((v: string | number) => v !== name);
52+
changeVal(newValue, name, false);
53+
} else {
54+
const newValue = innerValue.value.concat([name]);
55+
changeVal(newValue, name, true);
56+
}
57+
} else {
58+
console.warn('[NutUI] <Collapse> 未开启手风琴模式时 v-model 应为数组');
59+
}
60+
}
61+
};
62+
63+
const isExpanded = (name: string | number) => {
64+
if (props.accordion) {
65+
return innerValue.value === name;
66+
} else if (Array.isArray(innerValue.value)) {
67+
return innerValue.value.includes(name);
68+
}
69+
return false;
70+
};
71+
72+
provide(COLLAPSE_KEY, {
73+
updateVal,
74+
isExpanded
75+
});
76+
</script>

‎src/packages/__VUE/collapse/collapse.vue‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<view class="nut-collapse">
3+
<slot></slot>
4+
</view>
5+
</template>
6+
<script setup lang="ts">
7+
import { provide, ref, watch } from 'vue';
8+
import { COLLAPSE_KEY, type CollapseValue } from './types';
9+
10+
defineOptions({
11+
name: 'NutCollapse'
12+
});
13+
14+
export type CollapseProps = Partial<{
15+
modelValue: CollapseValue;
16+
accordion: boolean;
17+
}>;
18+
19+
const props = withDefaults(defineProps<CollapseProps>(), {
20+
modelValue: '',
21+
accordion: false
22+
});
23+
24+
const emit = defineEmits(['update:modelValue', 'change']);
25+
26+
const innerValue = ref(props.modelValue || (props.accordion ? '' : []));
27+
28+
watch(
29+
() => props.modelValue,
30+
(val) => {
31+
innerValue.value = val;
32+
}
33+
);
34+
35+
const changeVal = (val: string | number | Array<string | number>, name: string | number, status = true) => {
36+
innerValue.value = val;
37+
emit('update:modelValue', val);
38+
emit('change', val, name, status);
39+
};
40+
41+
const updateVal = (name: string | number) => {
42+
if (props.accordion) {
43+
if (innerValue.value === name) {
44+
changeVal('', name, false);
45+
} else {
46+
changeVal(name, name, true);
47+
}
48+
} else {
49+
if (Array.isArray(innerValue.value)) {
50+
if (innerValue.value.includes(name)) {
51+
const newValue = innerValue.value.filter((v: string | number) => v !== name);
52+
changeVal(newValue, name, false);
53+
} else {
54+
const newValue = innerValue.value.concat([name]);
55+
changeVal(newValue, name, true);
56+
}
57+
} else {
58+
console.warn('[NutUI] <Collapse> 未开启手风琴模式时 v-model 应为数组');
59+
}
60+
}
61+
};
62+
63+
const isExpanded = (name: string | number) => {
64+
if (props.accordion) {
65+
return innerValue.value === name;
66+
} else if (Array.isArray(innerValue.value)) {
67+
return innerValue.value.includes(name);
68+
}
69+
return false;
70+
};
71+
72+
provide(COLLAPSE_KEY, {
73+
updateVal,
74+
isExpanded
75+
});
76+
</script>

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,20 @@ Set a custom icon through the `slots.icon` or `props.icon` property.
8484
| --- | --- | --- |
8585
| change | Triggered when switching panels | `(modelValue, currName, status)` |
8686

87+
### Types version
88+
89+
The component exports the following type definitions:
90+
91+
```js
92+
import type {
93+
CollapseValue,
94+
CollapseProps,
95+
CollapseInstance,
96+
CollapseItemProps,
97+
CollapseItemInstance
98+
} from '@nutui/nutui';
99+
```
100+
87101
## 主题定制
88102

89103
### 样式变量

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,20 @@ CollapseItem 组件必须设置 name 属性作为唯一标识符。
8484
| --- | --- | --- |
8585
| change | 切换面板时触发 | `(modelValue, currName, status)` |
8686

87+
### 类型定义 version
88+
89+
组件导出以下类型定义：
90+
91+
```js
92+
import type {
93+
CollapseValue,
94+
CollapseProps,
95+
CollapseInstance,
96+
CollapseItemProps,
97+
CollapseItemInstance
98+
} from '@nutui/nutui';
99+
```
100+
87101
## 主题定制
88102

89103
### 样式变量

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,20 @@ CollapseItem 组件必须设置 name 属性作为唯一标识符。
8484
| --- | --- | --- |
8585
| change | 切换面板时触发 | `(modelValue, currName, status)` |
8686

87+
### 类型定义 version
88+
89+
组件导出以下类型定义：
90+
91+
```js
92+
import type {
93+
CollapseValue,
94+
CollapseProps,
95+
CollapseInstance,
96+
CollapseItemProps,
97+
CollapseItemInstance
98+
} from '@nutui/nutui-taro';
99+
```
100+
87101
## 主题定制
88102

89103
### 样式变量

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Collapse from './collapse.taro.vue';
2+
import type { ComponentPublicInstance } from 'vue';
3+
import { withInstall } from '@/packages/utils';
4+
5+
withInstall(Collapse);
6+
7+
export type { CollapseProps } from './collapse.taro.vue';
8+
9+
export type { CollapseValue } from './types';
10+
11+
export type CollapseInstance = ComponentPublicInstance & InstanceType<typeof Collapse>;
12+
13+
export { Collapse, Collapse as default };

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

Lines changed: 0 additions & 79 deletions
This file was deleted.

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Collapse from './collapse.vue';
2+
import type { ComponentPublicInstance } from 'vue';
3+
import { withInstall } from '@/packages/utils';
4+
5+
withInstall(Collapse);
6+
7+
export type { CollapseProps } from './collapse.vue';
8+
9+
export type { CollapseValue } from './types';
10+
11+
export type CollapseInstance = ComponentPublicInstance & InstanceType<typeof Collapse>;
12+
13+
export { Collapse, Collapse as default };

0 commit comments

Comments
 (0)