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
This commit is contained in:
sea
2024-06-26 11:07:29 +08:00
committed by GitHub
parent c1fcf9e2b8
commit 17fc769abd
11 changed files with 22 additions and 1 deletions

View File

@@ -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` |

View File

@@ -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` |

View File

@@ -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` |

View File

@@ -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 |

View File

@@ -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

View File

@@ -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

View File

@@ -152,11 +152,16 @@ describe('Cascader.vue', () => {
})
test('clearable', async () => {
const isClear = ref(false)
const wrapper = _mount(() => (
<Cascader
modelValue={['zhejiang', 'hangzhou']}
clearable
options={OPTIONS}
onClear={() => {
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 () => {

View File

@@ -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,

View File

@@ -577,6 +577,7 @@ const handleClear = () => {
syncPresentTextValue()
}
togglePopperVisible(false)
emit('clear')
}
const syncPresentTextValue = () => {

View File

@@ -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(() => {

View File

@@ -16,6 +16,7 @@
@change="(event) => $emit('change', event)"
@blur="(event) => $emit('blur', event)"
@focus="(event) => $emit('focus', event)"
@clear="() => $emit('clear')"
>
<el-option
v-for="item in items"
@@ -51,7 +52,7 @@ defineOptions({
name: 'ElTimeSelect',
})
defineEmits(['change', 'blur', 'focus', 'update:modelValue'])
defineEmits(['change', 'blur', 'focus', 'clear', 'update:modelValue'])
const props = defineProps(timeSelectProps)