From dbb00ef4b691beacc4dfded83124234408003f87 Mon Sep 17 00:00:00 2001 From: jeremywu <15975785+JeremyWuuuuu@users.noreply.github.com> Date: Fri, 4 Feb 2022 14:59:58 +0800 Subject: [PATCH] fix(components): [el-popper] append to body compatability (#5755) * fix(components): [el-popper] append to body compatability - Add a new hook for deprecation warning - Add deprecation warnings for previous used `append-to-body` API - Add test for the API. * Address PR comments * Update documentations for deprecated * Fix formatting issue --- docs/en-US/component/cascader.md | 37 ++++---- docs/en-US/component/input.md | 43 ++++----- docs/en-US/component/menu.md | 16 ++-- docs/en-US/component/select-v2.md | 55 ++++++------ docs/en-US/component/select.md | 63 ++++++------- docs/en-US/component/tooltip.md | 49 +++++----- .../__tests__/autocomplete.spec.ts | 27 +++++- .../components/autocomplete/src/index.vue | 20 ++++- .../cascader/__tests__/cascader.spec.ts | 52 +++++++++++ packages/components/cascader/src/index.vue | 21 +++-- .../popconfirm/__test__/popconfirm.spec.ts | 23 +++++ .../components/popconfirm/src/popconfirm.ts | 90 ++++++++++--------- .../components/popconfirm/src/popconfirm.vue | 13 ++- .../popover/__tests__/popover.spec.ts | 29 +++++- packages/components/popover/src/index.vue | 12 ++- packages/components/popover/src/popover.ts | 2 + packages/components/popper/index.ts | 1 + packages/components/popper/src/deprecation.ts | 28 ++++++ .../select-v2/__tests__/select.spec.ts | 84 ++++++++++++++++- packages/components/select-v2/src/defaults.ts | 4 +- packages/components/select-v2/src/select.vue | 2 +- .../components/select-v2/src/useSelect.ts | 11 ++- .../select/__tests__/select.spec.ts | 63 +++++++++++++ packages/components/select/src/select.vue | 21 +++-- .../hooks/__tests__/use-deprecated.spec.ts | 50 +++++++++++ packages/hooks/index.ts | 1 + packages/hooks/use-deprecated/index.ts | 34 +++++++ 27 files changed, 652 insertions(+), 199 deletions(-) create mode 100644 packages/components/popper/src/deprecation.ts create mode 100644 packages/hooks/__tests__/use-deprecated.spec.ts create mode 100644 packages/hooks/use-deprecated/index.ts diff --git a/docs/en-US/component/cascader.md b/docs/en-US/component/cascader.md index 437513cfc4..fab6a73d6c 100644 --- a/docs/en-US/component/cascader.md +++ b/docs/en-US/component/cascader.md @@ -138,24 +138,25 @@ cascader/panel ## Cascader Attributes -| Attribute | Description | Type | Accepted Values | Default | -| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ---------------------- | ------- | -| model-value / v-model | binding value | - | — | — | -| options | data of the options，the key of `value` and `label` can be customize by `Props`. | array | — | — | -| props | configuration options, see the following table. | object | — | — | -| size | size of input | string | large / default /small | — | -| placeholder | placeholder of input | string | — | Select | -| disabled | whether Cascader is disabled | boolean | — | false | -| clearable | whether selected value can be cleared | boolean | — | false | -| show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true | -| collapse-tags | whether to collapse tags in multiple selection mode | boolean | - | false | -| separator | option label separator | string | — | ' / ' | -| filterable | whether the options can be searched | boolean | — | — | -| filter-method | customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits. | function(node, keyword) | - | - | -| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 | -| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — | -| popper-class | custom class name for Cascader's dropdown | string | — | — | -| popper-append-to-body | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true | +| Attribute | Description | Type | Accepted Values | Default | +| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ---------------------- | ------- | +| model-value / v-model | binding value | - | — | — | +| options | data of the options，the key of `value` and `label` can be customize by `Props`. | array | — | — | +| props | configuration options, see the following table. | object | — | — | +| size | size of input | string | large / default /small | — | +| placeholder | placeholder of input | string | — | Select | +| disabled | whether Cascader is disabled | boolean | — | false | +| clearable | whether selected value can be cleared | boolean | — | false | +| show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true | +| collapse-tags | whether to collapse tags in multiple selection mode | boolean | - | false | +| separator | option label separator | string | — | ' / ' | +| filterable | whether the options can be searched | boolean | — | — | +| filter-method | customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits. | function(node, keyword) | - | - | +| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 | +| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — | +| popper-class | custom class name for Cascader's dropdown | string | — | — | +| teleported | whether cascader popup is teleported | boolean | true / false | true | +| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true | ## Cascader Events diff --git a/docs/en-US/component/input.md b/docs/en-US/component/input.md index 4cdb541509..46205ce2c6 100644 --- a/docs/en-US/component/input.md +++ b/docs/en-US/component/input.md @@ -196,27 +196,28 @@ input/length-limiting ## Autocomplete Attributes -| Attribute | Description | Type | Accepted Values | Default | -| --------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------------------- | ------------ | -| placeholder | the placeholder of Autocomplete | string | — | — | -| clearable | whether to show clear button | boolean | — | false | -| disabled | whether Autocomplete is disabled | boolean | — | false | -| value-key | key name of the input suggestion object for display | string | — | value | -| icon | icon component | string / Component | — | — | -| model-value / v-model | binding value | string | — | — | -| debounce | debounce delay when typing, in milliseconds | number | — | 300 | -| placement | placement of the popup menu | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start | -| fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — | -| popper-class | custom class name for autocomplete's dropdown | string | — | — | -| trigger-on-focus | whether show suggestions when input focus | boolean | — | true | -| name | same as `name` in native input | string | — | — | -| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | boolean | — | false | -| label | label text | string | — | — | -| prefix-icon | prefix icon class | string | — | — | -| suffix-icon | suffix icon class | string | — | — | -| hide-loading | whether to hide the loading icon in remote search | boolean | — | false | -| popper-append-to-body | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | boolean | - | false | -| highlight-first-item | whether to highlight first item in remote search suggestions by default | boolean | — | false | +| Attribute | Description | Type | Accepted Values | Default | +| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------------------- | ------------ | +| placeholder | the placeholder of Autocomplete | string | — | — | +| clearable | whether to show clear button | boolean | — | false | +| disabled | whether Autocomplete is disabled | boolean | — | false | +| value-key | key name of the input suggestion object for display | string | — | value | +| icon | icon component | string / Component | — | — | +| model-value / v-model | binding value | string | — | — | +| debounce | debounce delay when typing, in milliseconds | number | — | 300 | +| placement | placement of the popup menu | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start | +| fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — | +| popper-class | custom class name for autocomplete's dropdown | string | — | — | +| trigger-on-focus | whether show suggestions when input focus | boolean | — | true | +| name | same as `name` in native input | string | — | — | +| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | boolean | — | false | +| label | label text | string | — | — | +| prefix-icon | prefix icon class | string | — | — | +| suffix-icon | suffix icon class | string | — | — | +| hide-loading | whether to hide the loading icon in remote search | boolean | — | false | +| popper-append-to-body(deprecated) | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | boolean | - | false | +| teleported | whether select dropdown is teleported to the body | boolean | true / false | true | +| highlight-first-item | whether to highlight first item in remote search suggestions by default | boolean | — | false | ## Autocomplete Slots diff --git a/docs/en-US/component/menu.md b/docs/en-US/component/menu.md index e1f576a1b3..059dc528db 100644 --- a/docs/en-US/component/menu.md +++ b/docs/en-US/component/menu.md @@ -77,14 +77,14 @@ menu/collapse ## SubMenu Attributes -| Attribute | Description | Type | Accepted Values | Default | -| --------------------- | ---------------------------------------------------------------------------------------------------------------- | ------- | --------------- | ----------------------------------------------- | -| index | unique identification | string | — | — | -| popper-class | custom class name for the popup menu | string | — | — | -| show-timeout | timeout before showing a sub-menu | number | — | 300 | -| hide-timeout | timeout before hiding a sub-menu | number | — | 300 | -| disabled | whether the sub-menu is disabled | boolean | — | false | -| popper-append-to-body | whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop | boolean | - | level one SubMenu: true / other SubMenus: false | +| Attribute | Description | Type | Accepted Values | Default | +| --------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------- | --------------- | ----------------------------------------------- | +| index | unique identification | string | — | — | +| popper-class | custom class name for the popup menu | string | — | — | +| show-timeout | timeout before showing a sub-menu | number | — | 300 | +| hide-timeout | timeout before hiding a sub-menu | number | — | 300 | +| disabled | whether the sub-menu is disabled | boolean | — | false | +| popper-append-to-body(deprecated) | whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop | boolean | - | level one SubMenu: true / other SubMenus: false | ## SubMenu Slots diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md index 10d46ddb75..d2f262fe15 100644 --- a/docs/en-US/component/select-v2.md +++ b/docs/en-US/component/select-v2.md @@ -124,33 +124,34 @@ select-v2/remote-search ## SelectV2 Attributes -| Param | Description | Type | Accepted Values | Default | -| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------- | ------------- | -| model-value / v-model | biding value | string / number / boolean / object | — | — | -| multiple | is multiple | boolean | — | false | -| disabled | is disabled | boolean | — | false | -| value-key | unique identity key name for value, required when value is an object | string | — | value | -| size | input box size | string | large/default/small | default | -| clearable | whether select can be cleared | boolean | — | false | -| clear-icon | custom clear icon | string / component | — | CircleClose | -| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false | -| multiple-limit | maximum number of options user can select when multiple is true. No limit when set to 0 | number | — | 0 | -| name | the name attribute of select input | string | — | — | -| autocomplete | autocomplete of select input | string | — | off | -| placeholder | the autocomplete attribute of select input | string | — | Please select | -| filterable | is filterable | boolean | — | false | -| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false | -| reserve-keyword | whether reserve the keyword after select filtered option. | boolean | — | true | -| no-data-text | displayed text when there is no options, you can also use slot empty | string | — | No Data | -| popper-class | custom class name for Select's dropdown | string | — | — | -| popper-append-to-body | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | false | -| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/documentation.html) | object | - | - | -| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false | -| clear-icon | Customized clear icon component | string / Component | — | CircleClose | -| height | The height of the dropdown panel, 34px for each item | number | - | 170 | -| scrollbar-always-on | Controls whether the scrollbar is always displayed | boolean | - | false | -| remote | whether search data from server | boolean | — | false | -| remote-method | function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true | function(keyword: string) | — | — | +| Param | Description | Type | Accepted Values | Default | +| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------- | ------------- | +| model-value / v-model | biding value | string / number / boolean / object | — | — | +| multiple | is multiple | boolean | — | false | +| disabled | is disabled | boolean | — | false | +| value-key | unique identity key name for value, required when value is an object | string | — | value | +| size | input box size | string | large/default/small | default | +| clearable | whether select can be cleared | boolean | — | false | +| clear-icon | custom clear icon | string / component | — | CircleClose | +| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false | +| multiple-limit | maximum number of options user can select when multiple is true. No limit when set to 0 | number | — | 0 | +| name | the name attribute of select input | string | — | — | +| autocomplete | autocomplete of select input | string | — | off | +| placeholder | the autocomplete attribute of select input | string | — | Please select | +| filterable | is filterable | boolean | — | false | +| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false | +| reserve-keyword | whether reserve the keyword after select filtered option. | boolean | — | true | +| no-data-text | displayed text when there is no options, you can also use slot empty | string | — | No Data | +| popper-class | custom class name for Select's dropdown | string | — | — | +| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | false | +| teleported | whether select dropdown is teleported to the body | boolean | true / false | true | +| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/documentation.html) | object | - | - | +| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false | +| clear-icon | Customized clear icon component | string / Component | — | CircleClose | +| height | The height of the dropdown panel, 34px for each item | number | - | 170 | +| scrollbar-always-on | Controls whether the scrollbar is always displayed | boolean | - | false | +| remote | whether search data from server | boolean | — | false | +| remote-method | function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true | function(keyword: string) | — | — |