From 17fc769abd40dbbde166e2b2540d72c3cc676d31 Mon Sep 17 00:00:00 2001 From: sea <45450994+warmthsea@users.noreply.github.com> Date: Wed, 26 Jun 2024 11:07:29 +0800 Subject: [PATCH] feat(components): improve event and supplement docs (#17150) * feat: improve event and supplement documentation * feat: improve event and supplement documentation * style: lint back old * docs: autocomplate select event content back old * docs: cascader clear event add version * fix: delete redundant code * feat: back old code * feat: back old code * feat: back old code * chore: update version --- docs/en-US/component/autocomplete.md | 4 ++++ docs/en-US/component/cascader.md | 1 + docs/en-US/component/date-picker.md | 1 + docs/en-US/component/datetime-picker.md | 1 + docs/en-US/component/time-picker.md | 1 + docs/en-US/component/time-select.md | 1 + packages/components/cascader/__tests__/cascader.test.tsx | 7 +++++++ packages/components/cascader/src/cascader.ts | 1 + packages/components/cascader/src/cascader.vue | 1 + packages/components/time-picker/src/common/picker.vue | 2 ++ packages/components/time-select/src/time-select.vue | 3 ++- 11 files changed, 22 insertions(+), 1 deletion(-) diff --git a/docs/en-US/component/autocomplete.md b/docs/en-US/component/autocomplete.md index 7dbba180a1..1122e862f7 100644 --- a/docs/en-US/component/autocomplete.md +++ b/docs/en-US/component/autocomplete.md @@ -82,6 +82,10 @@ autocomplete/custom-loading | Name | Description | Type | | ------ | ------------------------------------------------ | ----------------------------------------------------- | +| blur | triggers when Input blurs | ^[Function]`(event: FocusEvent) => void` | +| focus | triggers when Input focuses | ^[Function]`(event: FocusEvent) => void` | +| input | triggers when the Input value change | ^[Function]`(value: string \| number) => void` | +| clear | triggers when the Input is cleared by clicking the clear button | ^[Function]`() => void` | | select | triggers when a suggestion is clicked | ^[Function]`(item: typeof modelValue \| any) => void` | | change | triggers when the icon inside Input value change | ^[Function]`(value: string \| number) => void` | diff --git a/docs/en-US/component/cascader.md b/docs/en-US/component/cascader.md index b62783e2c2..3b764f302e 100644 --- a/docs/en-US/component/cascader.md +++ b/docs/en-US/component/cascader.md @@ -171,6 +171,7 @@ cascader/panel | expand-change | triggers when expand option changes | ^[Function]`(value: CascaderValue) => void` | | blur | triggers when Cascader blurs | ^[Function]`(event: FocusEvent) => void` | | focus | triggers when Cascader focuses | ^[Function]`(event: FocusEvent) => void` | +| clear ^(2.7.7) | triggers when the clear icon is clicked in a clearable Select | ^[Function]`() => void` | | visible-change | triggers when the dropdown appears/disappears | ^[Function]`(value: boolean) => void` | | remove-tag | triggers when remove tag in multiple selection mode | ^[Function]`(value: CascaderNode['valueByOption']) => void` | diff --git a/docs/en-US/component/date-picker.md b/docs/en-US/component/date-picker.md index febafc603d..cf4b022682 100644 --- a/docs/en-US/component/date-picker.md +++ b/docs/en-US/component/date-picker.md @@ -186,6 +186,7 @@ Note, date time locale (month name, first day of the week ...) are also configur | change | triggers when user confirms the value | ^[Function]`(val: typeof v-model) => void` | | blur | triggers when Input blurs | ^[Function]`(e: FocusEvent) => void` | | focus | triggers when Input focuses | ^[Function]`(e: FocusEvent) => void` | +| clear ^(2.7.7) | triggers when the clear icon is clicked in a clearable DatePicker | ^[Function]`() => void` | | calendar-change | triggers when the calendar selected date is changed. | ^[Function]`(val: [Date, null \| Date]) => void` | | panel-change | triggers when the navigation button click. | ^[Function]`(date: Date \| [Date, Date], mode: 'month' \| 'year', view?: string) => void` | | visible-change | triggers when the DatePicker's dropdown appears/disappears | ^[Function]`(visibility: boolean) => void` | diff --git a/docs/en-US/component/datetime-picker.md b/docs/en-US/component/datetime-picker.md index f866e83ef9..dd28012a55 100644 --- a/docs/en-US/component/datetime-picker.md +++ b/docs/en-US/component/datetime-picker.md @@ -115,6 +115,7 @@ datetime-picker/default-time | change | triggers when user confirms the value | component's binding value | | blur | triggers when Input blurs | `(e: FocusEvent)` | | focus | triggers when Input focuses | `(e: FocusEvent)` | +| clear ^(2.7.7) | triggers when the clear icon is clicked in a clearable DateTimePicker | ^[Function]`() => void` | | calendar-change | triggers when the calendar selected date is changed. Only for `datetimerange` | [Date, Date] | | visible-change | triggers when the DateTimePicker's dropdown appears/disappears | true when it appears, and false otherwise | diff --git a/docs/en-US/component/time-picker.md b/docs/en-US/component/time-picker.md index 79c0fc5b6e..8e35eaf191 100644 --- a/docs/en-US/component/time-picker.md +++ b/docs/en-US/component/time-picker.md @@ -86,6 +86,7 @@ time-picker/range | change | triggers when user confirms the value | ^[Function]`(val: number \| string \| Date \| [number, number] \| [string, string] \| [Date, Date]) => void` | | blur | triggers when Input blurs | ^[Function]`(e: FocusEvent) => void` | | focus | triggers when Input focuses | ^[Function]`(e: FocusEvent) => void` | +| clear ^(2.7.7) | triggers when the clear icon is clicked in a clearable TimePicker | ^[Function]`() => void` | | visible-change | triggers when the TimePicker's dropdown appears/disappears | ^[Function]`(visibility: boolean) => void` | ### Exposes diff --git a/docs/en-US/component/time-select.md b/docs/en-US/component/time-select.md index 3da18c124d..3e46c17f9d 100644 --- a/docs/en-US/component/time-select.md +++ b/docs/en-US/component/time-select.md @@ -85,6 +85,7 @@ time-select/time-range | change | triggers when user confirms the value | ^[Function]`(value: string) => void` | | blur | triggers when Input blurs | ^[Function]`(event: FocusEvent) => void` | | focus | triggers when Input focuses | ^[Function]`(event: FocusEvent) => void` | +| clear ^(2.7.7) | triggers when the clear icon is clicked in a clearable TimeSelect | ^[Function]`() => void` | ### Exposes diff --git a/packages/components/cascader/__tests__/cascader.test.tsx b/packages/components/cascader/__tests__/cascader.test.tsx index 9f505d7e4f..523f91edb6 100644 --- a/packages/components/cascader/__tests__/cascader.test.tsx +++ b/packages/components/cascader/__tests__/cascader.test.tsx @@ -152,11 +152,16 @@ describe('Cascader.vue', () => { }) test('clearable', async () => { + const isClear = ref(false) + const wrapper = _mount(() => ( { + isClear.value = true + }} /> )) @@ -164,6 +169,7 @@ describe('Cascader.vue', () => { expect(wrapper.findComponent(ArrowDown).exists()).toBe(true) await trigger.trigger('mouseenter') expect(wrapper.findComponent(ArrowDown).exists()).toBe(false) + expect(isClear.value).toBe(false) await wrapper.findComponent(CircleClose).trigger('click') expect(wrapper.find('input').element.value).toBe('') expect( @@ -172,6 +178,7 @@ describe('Cascader.vue', () => { await trigger.trigger('mouseleave') await trigger.trigger('mouseenter') await expect(wrapper.findComponent(CircleClose).exists()).toBe(false) + expect(isClear.value).toBe(true) }) test('show last level label', async () => { diff --git a/packages/components/cascader/src/cascader.ts b/packages/components/cascader/src/cascader.ts index 9f7f0ac54e..92f4c286a8 100644 --- a/packages/components/cascader/src/cascader.ts +++ b/packages/components/cascader/src/cascader.ts @@ -120,6 +120,7 @@ export const cascaderEmits = { [CHANGE_EVENT]: (_: CascaderValue) => true, focus: (evt: FocusEvent) => evt instanceof FocusEvent, blur: (evt: FocusEvent) => evt instanceof FocusEvent, + clear: () => true, visibleChange: (val: boolean) => isBoolean(val), expandChange: (val: CascaderValue) => !!val, removeTag: (val: CascaderNode['valueByOption']) => !!val, diff --git a/packages/components/cascader/src/cascader.vue b/packages/components/cascader/src/cascader.vue index 31ef7455ad..ee4df66c23 100644 --- a/packages/components/cascader/src/cascader.vue +++ b/packages/components/cascader/src/cascader.vue @@ -577,6 +577,7 @@ const handleClear = () => { syncPresentTextValue() } togglePopperVisible(false) + emit('clear') } const syncPresentTextValue = () => { diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue index 0774af2a30..fabb0d1aeb 100644 --- a/packages/components/time-picker/src/common/picker.vue +++ b/packages/components/time-picker/src/common/picker.vue @@ -215,6 +215,7 @@ const emit = defineEmits([ 'change', 'focus', 'blur', + 'clear', 'calendar-change', 'panel-change', 'visible-change', @@ -514,6 +515,7 @@ const onClearIconClick = (event: MouseEvent) => { pickerVisible.value = false pickerOptions.value.handleClear && pickerOptions.value.handleClear() } + emit('clear') } const valueIsEmpty = computed(() => { diff --git a/packages/components/time-select/src/time-select.vue b/packages/components/time-select/src/time-select.vue index 9e9a2b5425..6f93269d0c 100644 --- a/packages/components/time-select/src/time-select.vue +++ b/packages/components/time-select/src/time-select.vue @@ -16,6 +16,7 @@ @change="(event) => $emit('change', event)" @blur="(event) => $emit('blur', event)" @focus="(event) => $emit('focus', event)" + @clear="() => $emit('clear')" >