mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-17 11:49:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(components): clear deprecated API (#15922)

Browse Source 
* chore(components): clear deprecated API

* docs: update
This commit is contained in:
kooriookami 2024-02-28 12:42:17 +08:00 committed by GitHub
parent 5cf6f775c6
commit d8a9f902b2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 41 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
docs/en-US/component/menu.md
View File

@ -95,7 +95,7 @@ menu/popper-offset
## Menu Events
| Name | Description | Parameters |
| ------ | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|--------|-------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| select | callback function when menu is activated | index: index of activated menu, indexPath: index path of activated menu, item: the selected menu item, routeResult: result returned by `vue-router` if `router` is enabled |
| open | callback function when sub-menu expands | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu |
| close | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu |
@ -103,37 +103,37 @@ menu/popper-offset
## Menu Slots
| Name | Description | Subtags |
| ---- | ------------------------- | ------------------------------------- |
|------|---------------------------|---------------------------------------|
| — | customize default content | SubMenu / Menu-Item / Menu-Item-Group |
## SubMenu Attributes
| Name | 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(inherit `show-timeout` of the menu by default.) | number | — | — |
| hide-timeout | timeout before hiding a sub-menu(inherit `hide-timeout` of the menu by default.) | number | — | — |
| 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 |
| teleported | whether popup menu is teleported to the body | boolean | — | level one SubMenu: true / other SubMenus: false |
| popper-offset | offset of the popper (overrides the `popper` of menu) | number | — | — |
| expand-close-icon | Icon when menu are expanded and submenu are closed, `expand-close-icon` and `expand-open-icon` need to be passed together to take effect | `string \| Component` | — | — |
| expand-open-icon | Icon when menu are expanded and submenu are opened, `expand-open-icon` and `expand-close-icon` need to be passed together to take effect | `string \| Component` | — | — |
| collapse-close-icon | Icon when menu are collapsed and submenu are closed, `collapse-close-icon` and `collapse-open-icon` need to be passed together to take effect | `string \| Component` | — | — |
| collapse-open-icon | Icon when menu are collapsed and submenu are opened, `collapse-open-icon` and `collapse-close-icon` need to be passed together to take effect | `string \| Component` | — | — |
| Name | 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(inherit `show-timeout` of the menu by default.) | number | — | — |
| hide-timeout | timeout before hiding a sub-menu(inherit `hide-timeout` of the menu by default.) | number | — | — |
| 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 |
| teleported | whether popup menu is teleported to the body | boolean | — | level one SubMenu: true / other SubMenus: false |
| popper-offset | offset of the popper (overrides the `popper` of menu) | number | — | — |
| expand-close-icon | Icon when menu are expanded and submenu are closed, `expand-close-icon` and `expand-open-icon` need to be passed together to take effect | `string \| Component` | — | — |
| expand-open-icon | Icon when menu are expanded and submenu are opened, `expand-open-icon` and `expand-close-icon` need to be passed together to take effect | `string \| Component` | — | — |
| collapse-close-icon | Icon when menu are collapsed and submenu are closed, `collapse-close-icon` and `collapse-open-icon` need to be passed together to take effect | `string \| Component` | — | — |
| collapse-open-icon | Icon when menu are collapsed and submenu are opened, `collapse-open-icon` and `collapse-close-icon` need to be passed together to take effect | `string \| Component` | — | — |
## SubMenu Slots
| Name | Description | Subtags |
| ----- | ------------------------- | ------------------------------------- |
|-------|---------------------------|---------------------------------------|
| — | customize default content | SubMenu / Menu-Item / Menu-Item-Group |
| title | customize title content | — |
## Menu-Item Attributes
| Name | Description | Type | Accepted Values | Default |
| -------- | --------------------- | ----------- | --------------- | ------- |
|----------|-----------------------|-------------|-----------------|---------|
| index | unique identification | string/null | — | null |
| route | Vue Router object | object | — | — |
| disabled | whether disabled | boolean | — | false |
@ -141,25 +141,25 @@ menu/popper-offset
## Menu-Item Events
| Name | Description | Parameters |
| ----- | ------------------------------------------- | ---------------------- |
|-------|---------------------------------------------|------------------------|
| click | callback function when menu-item is clicked | el: menu-item instance |
## Menu-Item Slots
| Name | Description |
| ----- | ------------------------- |
|-------|---------------------------|
| — | customize default content |
| title | customize title content |
## Menu-Item-Group Attributes
| Name | Description | Type | Accepted Values | Default |
| ----- | ----------- | ------ | --------------- | ------- |
|-------|-------------|--------|-----------------|---------|
| title | group title | string | — | — |
## Menu-Item-Group Slots
| Name | Description | Subtags |
| ----- | ------------------------- | --------- |
|-------|---------------------------|-----------|
| — | customize default content | Menu-Item |
| title | customize group title | — |

16
packages/components/calendar/src/calendar.vue
View File

@ -20,12 +20,8 @@
</div>
<div v-if="validatedRange.length === 0" :class="ns.e('body')">
<date-table :date="date" :selected-day="realSelectedDay" @pick="pickDay">
<template
v-if="$slots['date-cell'] || $slots.dateCell"
#date-cell="data"
>
<slot v-if="$slots['date-cell']" name="date-cell" v-bind="data" />
<slot v-else name="dateCell" v-bind="data" />
<template v-if="$slots['date-cell']" #date-cell="data">
<slot name="date-cell" v-bind="data" />
</template>
</date-table>
</div>
@ -39,12 +35,8 @@
:hide-header="index !== 0"
@pick="pickDay"
>
<template
v-if="$slots['date-cell'] || $slots.dateCell"
#date-cell="data"
>
<slot v-if="$slots['date-cell']" name="date-cell" v-bind="data" />
<slot v-else name="dateCell" v-bind="data" />
<template v-if="$slots['date-cell']" #date-cell="data">
<slot name="date-cell" v-bind="data" />
</template>
</date-table>
</div>

17
packages/components/calendar/src/use-calendar.ts
View File

@ -1,6 +1,6 @@
import { computed, ref, useSlots } from 'vue'
import { computed, ref } from 'vue'
import dayjs from 'dayjs'
import { useDeprecated, useLocale } from '@element-plus/hooks'
import { useLocale } from '@element-plus/hooks'
import { debugWarn } from '@element-plus/utils'
import { INPUT_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
@ -56,7 +56,6 @@ export const useCalendar = (
emit: SetupContext<CalendarEmits>['emit'],
componentName: string
) => {
const slots = useSlots()
const { lang } = useLocale()
const selectedDay = ref<Dayjs>()
@ -173,18 +172,6 @@ export const useCalendar = (
}
}
useDeprecated(
{
from: '"dateCell"',
replacement: '"date-cell"',
scope: 'ElCalendar',
version: '2.3.0',
ref: 'https://element-plus.org/en-US/component/calendar.html#slots',
type: 'Slot',
},
computed(() => !!slots.dateCell)
)
return {
calculateValidatedDateRange,
date,

19
packages/components/menu/src/sub-menu.ts
View File

@ -23,7 +23,7 @@ import {
isString,
throwError,
} from '@element-plus/utils'
import { useDeprecated, useNamespace } from '@element-plus/hooks'
import { useNamespace } from '@element-plus/hooks'
import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'
import { ElIcon } from '@element-plus/components/icon'
import useMenu from './use-menu'
@ -42,10 +42,6 @@ export const subMenuProps = buildProps({
hideTimeout: Number,
popperClass: String,
disabled: Boolean,
popperAppendToBody: {
type: Boolean,
default: undefined,
},
teleported: {
type: Boolean,
default: undefined,
@ -72,17 +68,6 @@ export default defineComponent({
props: subMenuProps,
setup(props, { slots, expose }) {
useDeprecated(
{
from: 'popper-append-to-body',
replacement: 'teleported',
scope: COMPONENT_NAME,
version: '2.3.0',
ref: 'https://element-plus.org/en-US/component/menu.html#submenu-attributes',
},
computed(() => props.popperAppendToBody !== undefined)
)
const instance = getCurrentInstance()!
const { indexPath, parentMenu } = useMenu(
instance,
@ -130,7 +115,7 @@ export default defineComponent({
return subMenu.level === 0
})
const appendToBody = computed(() => {
const value = props.teleported ?? props.popperAppendToBody
const value = props.teleported
return value === undefined ? isFirstLevel.value : value
})
const menuTransitionName = computed(() =>

7
packages/components/select/src/select.ts
View File

@ -197,13 +197,6 @@ export const SelectProps = buildProps({
* @description in remote search method show suffix icon
*/
remoteShowSuffix: Boolean,
/**
* @deprecated will be removed in version 2.4.0, please use override style scheme
*/
suffixTransition: {
type: Boolean,
default: true,
},
/**
* @description position of dropdown
*/

17
packages/components/select/src/useSelect.ts
View File

@ -33,7 +33,6 @@ import {
scrollIntoView,
} from '@element-plus/utils'
import {
useDeprecated,
useFocusController,
useId,
useLocale,
@ -75,17 +74,6 @@ export const useSelect = (props: ISelectProps, emit) => {
isBeforeHide: false,
})
useDeprecated(
{
from: 'suffixTransition',
replacement: 'override style scheme',
version: '2.3.0',
scope: 'props',
ref: 'https://element-plus.org/en-US/component/select.html#select-attributes',
},
computed(() => props.suffixTransition === false)
)
// template refs
const selectRef = ref<HTMLElement>(null)
const selectionRef = ref<HTMLElement>(null)
@ -157,10 +145,7 @@ export const useSelect = (props: ISelectProps, emit) => {
: props.suffixIcon
)
const iconReverse = computed(() =>
nsSelect.is(
'reverse',
iconComponent.value && expanded.value && props.suffixTransition
)
nsSelect.is('reverse', iconComponent.value && expanded.value)
)
const validateState = computed(() => formItem?.validateState || '')

28
packages/components/switch/__tests__/switch.test.tsx
View File

@ -21,18 +21,10 @@ describe('Switch.vue', () => {
const props = {
activeText: 'on',
inactiveText: 'off',
activeColor: '#0f0',
inactiveColor: '#f00',
width: 100,
}
const wrapper = mount(() => <Switch {...props} />)
const vm = wrapper.vm
expect(vm.$el.style.getPropertyValue('--el-switch-on-color')).toEqual(
'#0f0'
)
expect(vm.$el.style.getPropertyValue('--el-switch-off-color')).toEqual(
'#f00'
)
expect(vm.$el.classList.contains('is-checked')).false
const coreEl = vm.$el.querySelector('.el-switch__core')
expect(coreEl.style.width).toEqual('100px')
@ -55,18 +47,10 @@ describe('Switch.vue', () => {
inlinePrompt: true,
activeText: 'on',
inactiveText: 'off',
activeColor: '#0f0',
inactiveColor: '#f00',
width: 100,
}
const wrapper = mount(() => <Switch {...props} />)
const vm = wrapper.vm
expect(vm.$el.style.getPropertyValue('--el-switch-on-color')).toEqual(
'#0f0'
)
expect(vm.$el.style.getPropertyValue('--el-switch-off-color')).toEqual(
'#f00'
)
expect(vm.$el.classList.contains('is-checked')).false
const coreEl = vm.$el.querySelector('.el-switch__core')
expect(coreEl.style.width).toEqual('100px')
@ -87,16 +71,8 @@ describe('Switch.vue', () => {
test('value correctly update', async () => {
const value = ref(true)
const wrapper = mount(() => (
<Switch v-model={value.value} activeColor="#0f0" inactiveColor="#f00" />
))
const wrapper = mount(() => <Switch v-model={value.value} />)
const vm = wrapper.vm
expect(vm.$el.style.getPropertyValue('--el-switch-on-color')).toEqual(
'#0f0'
)
expect(vm.$el.style.getPropertyValue('--el-switch-off-color')).toEqual(
'#f00'
)
expect(vm.$el.classList.contains('is-checked')).true
const coreWrapper = wrapper.find('.el-switch__core')
await coreWrapper.trigger('click')
@ -178,7 +154,7 @@ describe('Switch.vue', () => {
})
test('value is the single source of truth', async () => {
const wrapper = mount(() => <Switch value={true} />)
const wrapper = mount(() => <Switch modelValue={true} />)
const vm = wrapper.vm
const coreWrapper = wrapper.find('.el-switch__core')

28
packages/components/switch/src/switch.ts
View File

@ -111,27 +111,6 @@ export const switchProps = buildProps({
type: [Boolean, String, Number],
default: false,
},
/**
* @deprecated background color when in `on` state ( deprecated, use CSS var `--el-switch-on-color` instead )
*/
activeColor: {
type: String,
default: '',
},
/**
* @deprecated background color when in `off` state ( deprecated, use CSS var `--el-switch-off-color` instead )
*/
inactiveColor: {
type: String,
default: '',
},
/**
* @deprecated border color of the switch ( deprecated, use CSS var `--el-switch-border-color` instead )
*/
borderColor: {
type: String,
default: '',
},
/**
* @description input name of Switch
*/
@ -162,13 +141,6 @@ export const switchProps = buildProps({
tabindex: {
type: [String, Number],
},
/**
* @deprecated binding value ( deprecated, use `model-value / v-model` instead )
*/
value: {
type: [Boolean, String, Number],
default: false,
},
/**
* @description native input aria-label
*/

53
packages/components/switch/src/switch.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="switchKls" :style="styles" @click.prevent="switchValue">
<div :class="switchKls" @click.prevent="switchValue">
<input
:id="inputId"
ref="input"
@ -72,14 +72,7 @@
</template>
<script lang="ts" setup>
import {
computed,
getCurrentInstance,
nextTick,
onMounted,
ref,
watch,
} from 'vue'
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { isPromise } from '@vue/shared'
import { addUnit, debugWarn, isBoolean, throwError } from '@element-plus/utils'
import ElIcon from '@element-plus/components/icon'
@ -95,7 +88,7 @@ import {
INPUT_EVENT,
UPDATE_MODEL_EVENT,
} from '@element-plus/constants'
import { useDeprecated, useNamespace } from '@element-plus/hooks'
import { useNamespace } from '@element-plus/hooks'
import { switchEmits, switchProps } from './switch'
import type { CSSProperties } from 'vue'
@ -107,33 +100,10 @@ defineOptions({
const props = defineProps(switchProps)
const emit = defineEmits(switchEmits)
const vm = getCurrentInstance()!
const { formItem } = useFormItem()
const switchSize = useFormSize()
const ns = useNamespace('switch')
const useBatchDeprecated = (list: string[][]) => {
list.forEach((param) => {
useDeprecated(
{
from: param[0],
replacement: param[1],
scope: COMPONENT_NAME,
version: '2.3.0',
ref: 'https://element-plus.org/en-US/component/switch.html#attributes',
type: 'Attribute',
},
computed(() => !!vm.vnode.props?.[param[2]])
)
})
}
useBatchDeprecated([
['"value"', '"model-value" or "v-model"', 'value'],
['"active-color"', 'CSS var `--el-switch-on-color`', 'activeColor'],
['"inactive-color"', 'CSS var `--el-switch-off-color`', 'inactiveColor'],
['"border-color"', 'CSS var `--el-switch-border-color`', 'borderColor'],
])
const { inputId } = useFormItemInputId(props, {
formItemContext: formItem,
})
@ -173,15 +143,8 @@ watch(
}
)
watch(
() => props.value,
() => {
isControlled.value = false
}
)
const actualValue = computed(() => {
return isControlled.value ? props.modelValue : props.value
return isControlled.value ? props.modelValue : false
})
const checked = computed(() => actualValue.value === props.activeValue)
@ -247,14 +210,6 @@ const switchValue = () => {
}
}
const styles = computed(() => {
return ns.cssVarBlock({
...(props.activeColor ? { 'on-color': props.activeColor } : null),
...(props.inactiveColor ? { 'off-color': props.inactiveColor } : null),
...(props.borderColor ? { 'border-color': props.borderColor } : null),
})
})
const focus = (): void => {
input.value?.focus?.()
}

48
packages/components/tabs/src/tabs.tsx
View File

@ -1,5 +1,4 @@
import {
computed,
defineComponent,
getCurrentInstance,
nextTick,
@ -18,11 +17,7 @@ import {
import { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'
import ElIcon from '@element-plus/components/icon'
import { Plus } from '@element-plus/icons-vue'
import {
useDeprecated,
useNamespace,
useOrderedChildren,
} from '@element-plus/hooks'
import { useNamespace, useOrderedChildren } from '@element-plus/hooks'
import { tabsRootContextKey } from './constants'
import TabNav from './tab-nav'
@ -39,9 +34,6 @@ export const tabsProps = buildProps({
values: ['card', 'border-card', ''],
default: '',
},
activeName: {
type: [String, Number],
},
closable: Boolean,
addable: Boolean,
modelValue: {
@ -95,9 +87,7 @@ const Tabs = defineComponent({
} = useOrderedChildren<TabsPaneContext>(getCurrentInstance()!, 'ElTabPane')
const nav$ = ref<TabNavInstance>()
const currentName = ref<TabPaneName>(
props.modelValue ?? props.activeName ?? '0'
)
const currentName = ref<TabPaneName>(props.modelValue ?? '0')
const setCurrentName = async (value?: TabPaneName, trigger = false) => {
// should do nothing.
@ -139,35 +129,6 @@ const Tabs = defineComponent({
emit('tabAdd')
}
useDeprecated(
{
from: '"activeName"',
replacement: '"model-value" or "v-model"',
scope: 'ElTabs',
version: '2.3.0',
ref: 'https://element-plus.org/en-US/component/tabs.html#attributes',
type: 'Attribute',
},
computed(() => !!props.activeName)
)
useDeprecated(
{
from: '"addIcon"',
replacement: '"add-icon"',
scope: 'ElTabs',
version: '2.6.0',
ref: 'https://element-plus.org/en-US/component/tabs.html#slots',
type: 'Slot',
},
computed(() => !!slots.addIcon)
)
watch(
() => props.activeName,
(modelValue) => setCurrentName(modelValue)
)
watch(
() => props.modelValue,
(modelValue) => setCurrentName(modelValue)
@ -190,8 +151,7 @@ const Tabs = defineComponent({
})
return () => {
const addSlot = slots['add-icon'] || slots['addIcon']
const isCamelCase = addSlot && slots['addIcon']
const addSlot = slots['add-icon']
const newButton =
props.editable || props.addable ? (
<span
@ -203,7 +163,7 @@ const Tabs = defineComponent({
}}
>
{addSlot ? (
renderSlot(slots, isCamelCase ? 'addIcon' : 'add-icon')
renderSlot(slots, 'add-icon')
) : (
<ElIcon class={ns.is('icon-plus')}>
<Plus />