diff --git a/CHANGELOG.md b/CHANGELOG.md index f6de2065..b69b07cb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ ### Features -* include documents in npm package for ai agents ([#960](https://github.com/WeBankFinTech/fes-design/issues/960)) ([3cc476c](https://github.com/WeBankFinTech/fes-design/commit/3cc476c81fb652c7fc3887884d99b46a02de0b74)) +* feat(dropdown): 支持默认值显示 ([#910](https://github.com/WeBankFinTech/fes-design/issues/910)) diff --git a/components/dropdown/__tests__/dropdown-910.spec.tsx b/components/dropdown/__tests__/dropdown-910.spec.tsx new file mode 100644 index 00000000..4bfb9d10 --- /dev/null +++ b/components/dropdown/__tests__/dropdown-910.spec.tsx @@ -0,0 +1,77 @@ +import { mount } from '@vue/test-utils'; +import Dropdown from '../dropdown'; +import { ref } from 'vue'; + +const POPPER_CONTAINER_SELECTOR = '.fes-popper-wrapper'; + +const OPTIONS = [ + { + value: '1', + label: '删除', + }, + { + value: '2', + label: '修改', + }, + { + value: '3', + label: '添加', + }, + { + value: '4', + label: '评论', + }, + { + value: '5', + label: '收藏', + }, +]; + +describe('Dropdown #910', () => { + test('trigger slot receives selectedLabel and selectedValue', async () => { + const wrapper = mount(Dropdown, { + props: { + options: OPTIONS, + appendToContainer: false, + }, + slots: { + default: ({ selectedLabel, selectedValue }) => ( +
+ {selectedLabel}-{selectedValue} +
+ ), + }, + attachTo: 'body', + }); + + await wrapper.find('.trigger-slot').trigger('mouseenter'); + // No v-model: both should be undefined → template string renders as "-" + const text = wrapper.find('.trigger-slot').text(); + expect(text.startsWith('-')).toBe(true); + expect(text).not.toContain('undefined'); + }); + + test('mount FDropdown with v-model and default slot displays selectedLabel', async () => { + const value = ref('2'); + const wrapper = mount(Dropdown, { + props: { + options: OPTIONS, + modelValue: value.value, + appendToContainer: false, + }, + slots: { + default: ({ selectedLabel }) => ( +
{selectedLabel}
+ ), + }, + attachTo: 'body', + }); + + await wrapper.find('.trigger-slot').trigger('mouseenter'); + expect(wrapper.find('.trigger-slot').text()).toBe('修改'); + + await wrapper.setProps({ modelValue: '3' }); + await wrapper.find('.trigger-slot').trigger('mouseenter'); + expect(wrapper.find('.trigger-slot').text()).toBe('添加'); + }); +}); \ No newline at end of file diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index 2a1d36f8..cb70c156 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -96,22 +96,42 @@ export default defineComponent({ ); - return () => ( - - ); + return () => { + const selectedOption = props.options.find( + (option) => option[props.valueField] === currentValue.value, + ); + const selectedLabel = selectedOption + ? selectedOption[props.labelField] + : undefined; + const slotContent = slots.default?.({ + selectedLabel: + typeof selectedLabel === 'function' + ? selectedLabel(selectedOption) + : selectedLabel, + selectedValue: currentValue.value, + }); + return ( + slotContent + : () => selectedLabel, + }} + /> + ); + }; }, }); diff --git a/vitest.config.ts b/vitest.config.ts index 408462b0..f181a1e8 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -6,7 +6,7 @@ export default defineConfig({ plugins: [vue(), vueJsx()], test: { environment: 'happy-dom', - include: ['components/**/__tests__/**/*.spec.ts'], + include: ['components/**/__tests__/**/*.{spec,test}.{ts,tsx}'], globals: true, }, })