From 43057457175a3f4a5d357209cee8e1ba3f3ee859 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=98=BF=20Cai?= Date: Tue, 3 Dec 2024 20:31:40 +0800 Subject: [PATCH 1/3] feat: `valueDisplay` value params expanded options docs: update example code --- .vscode/launch.json | 17 ++ .../__snapshots__/index.test.jsx.snap | 49 +++++ src/select/__tests__/index.test.jsx | 194 +++++++++++++++++ src/select/_example-composition/collapsed.vue | 191 ++++++++++------- src/select/_example/collapsed.vue | 202 +++++++++++++----- src/select/_example/custom-selected.vue | 16 +- src/select/select.tsx | 13 +- 7 files changed, 542 insertions(+), 140 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..2d8d88130 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,17 @@ +{ + // 想了解更多的信息, 请访问：https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Debug Current Test File", + "autoAttachChildProcesses": true, + "skipFiles": ["/**", "**/node_modules/**"], + "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs", + "args": ["run", "${relativeFile}"], + "smartStep": true, + "console": "integratedTerminal" + } + ] +} \ No newline at end of file diff --git a/src/select/__tests__/__snapshots__/index.test.jsx.snap b/src/select/__tests__/__snapshots__/index.test.jsx.snap index 0d6b9960d..01f813df0 100644 --- a/src/select/__tests__/__snapshots__/index.test.jsx.snap +++ b/src/select/__tests__/__snapshots__/index.test.jsx.snap @@ -50,6 +50,55 @@ exports[`Select > :props > :bordered 1`] = ` `; +exports[`Select > :props > :borderless 1`] = ` +
+
+
+
+
+ + + + + + +
+
+
+
+`; + exports[`Select > :props > :clearable 1`] = `
{ // test props api @@ -92,6 +95,197 @@ describe('Select', () => { }); expect(wrapper.element).toMatchSnapshot(); }); + + it(':collapsedItems', async () => { + // const visible = ref(false); + + const disPlayCollapsedItems = (h, { collapsedSelectedItems, onClose }) => { + console.log('collapsedSelectedItems', collapsedSelectedItems); + if (!(collapsedSelectedItems instanceof Array)) return null; + const count = collapsedSelectedItems.length; + if (count <= 0) return null; + return ( + + {{ + content: () => collapsedSelectedItems.map((item, index) => ( + + )), + default: () => Function - More({count}), + }} + + ); + }; + + const currentOptions = [ + { label: '架构云', value: '1' }, + { label: '大数据', value: '2' }, + { label: '区块链', value: '3' }, + ]; + const wrapper = mount( + { + render() { + return ( + + // ); + // }, + // }, + // { + // attachTo: document.body, + // }, + // ); + + // // 默认 + // const tags = wrapper.findAll('.t-tag'); + // expect(tags.length).toBe(0); + + // // 第一次选择 + // // 目前无法通过 triggerEvent 触发 mouseenter 事件展开 select popup + // await wrapper.setProps({ popupProps: { attach: 'multiple-select', visible: true } }); + // await wrapper.vm.$nextTick(); + // const groupNode1 = wrapper.findAll('.t-select-option'); + // expect(groupNode1.length).toBe(3); + + // await groupNode1[0].trigger('click'); + // await wrapper.vm.$nextTick(); + // const tags1 = wrapper.findAll('.t-tag'); + // expect(tags1.length).toBe(1); + // expect(tags1[0].text()).toBe(currentOptions[0].label); + + // // 第二次选择(选择options的第三个数据-区块链) + // await wrapper.setProps({ popupProps: { attach: 'multiple-select', visible: true } }); + // await wrapper.vm.$nextTick(); + // const groupNode2 = wrapper.findAll('.t-select-option'); + // expect(groupNode2.length).toBe(3); + + // await groupNode2[2].trigger('click'); + // await wrapper.vm.$nextTick(); + // const tags2 = wrapper.findAll('.t-tag'); + // expect(tags2.length).toBe(2); + // expect(tags2[0].text()).toBe(currentOptions[0].label); + // expect(tags2[1].text()).toBe(`Function - More(${selectedOptions.length - minCollapsedNum})`); + // // 这里使用 triggerEvent 无法触发 mouseenter 事件展开 select popup + // visible.value = true; + // await wrapper.vm.$nextTick(); + // const buttons1 = document.querySelectorAll('.t-button'); + // expect(buttons1.length).toBe(1); + // expect(buttons1[0].textContent).toBe('区块链'); + + // // 第三次选择(选择options的第二个数据-大数据) + // await wrapper.setProps({ popupProps: { attach: 'multiple-select', visible: true } }); + // await wrapper.vm.$nextTick(); + // const groupNode3 = wrapper.findAll('.t-select-option'); + // expect(groupNode3.length).toBe(3); + + // await groupNode3[1].trigger('click'); + // await wrapper.vm.$nextTick(); + // const tags3 = wrapper.findAll('.t-tag'); + // expect(tags3.length).toBe(2); + // expect(tags3[0].text()).toBe(currentOptions[0].label); + // expect(tags3[1].text()).toBe(`Function - More(${selectedOptions.length - minCollapsedNum})`); + // // 这里使用 triggerEvent 无法触发 mouseenter 事件展开 select popup + // visible.value = true; + // await wrapper.vm.$nextTick(); + // const buttons2 = document.querySelectorAll('.t-button'); + // expect(buttons2.length).toBe(2); + // expect(buttons2[0].textContent).toBe('区块链'); + // expect(buttons2[1].textContent).toBe('大数据'); + + // // 清理测试数据 + // document.body.innerHTML = ''; + // }); }); }); diff --git a/src/select/_example-composition/collapsed.vue b/src/select/_example-composition/collapsed.vue index 475d20667..9078293d6 100644 --- a/src/select/_example-composition/collapsed.vue +++ b/src/select/_example-composition/collapsed.vue @@ -1,39 +1,63 @@