mirror of
https://github.com/element-plus/element-plus.git
synced 2025-03-07 15:47:57 +08:00
chore(components): remove deprecated 2.8.0 (#17735)
* chore(components): remove deprecated 2.8.0 * chore(components): update
This commit is contained in:
parent
0456c790db
commit
0f8282520f
@ -43,12 +43,6 @@ export const badgeProps = buildProps({
|
||||
* @description customize dot background color
|
||||
*/
|
||||
color: String,
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
dotStyle: {
|
||||
type: definePropType<StyleValue>([String, Object, Array]),
|
||||
},
|
||||
/**
|
||||
* @description CSS style of badge
|
||||
*/
|
||||
@ -62,12 +56,6 @@ export const badgeProps = buildProps({
|
||||
type: definePropType<[number, number]>(Array),
|
||||
default: [0, 0],
|
||||
},
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
dotClass: {
|
||||
type: String,
|
||||
},
|
||||
/**
|
||||
* @description custom class name of badge
|
||||
*/
|
||||
|
@ -9,7 +9,6 @@
|
||||
ns.em('content', type),
|
||||
ns.is('fixed', !!$slots.default),
|
||||
ns.is('dot', isDot),
|
||||
dotClass,
|
||||
badgeClass,
|
||||
]"
|
||||
:style="style"
|
||||
@ -21,7 +20,7 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { useDeprecated, useNamespace } from '@element-plus/hooks'
|
||||
import { useNamespace } from '@element-plus/hooks'
|
||||
import { addUnit, isNumber } from '@element-plus/utils'
|
||||
import { badgeProps } from './badge'
|
||||
import type { StyleValue } from 'vue'
|
||||
@ -51,33 +50,10 @@ const style = computed<StyleValue>(() => {
|
||||
marginRight: addUnit(-(props.offset?.[0] ?? 0)),
|
||||
marginTop: addUnit(props.offset?.[1] ?? 0),
|
||||
},
|
||||
props.dotStyle ?? {},
|
||||
props.badgeStyle ?? {},
|
||||
]
|
||||
})
|
||||
|
||||
useDeprecated(
|
||||
{
|
||||
from: 'dot-style',
|
||||
replacement: 'badge-style',
|
||||
version: '2.8.0',
|
||||
scope: 'el-badge',
|
||||
ref: 'https://element-plus.org/en-US/component/badge.html',
|
||||
},
|
||||
computed(() => !!props.dotStyle)
|
||||
)
|
||||
|
||||
useDeprecated(
|
||||
{
|
||||
from: 'dot-class',
|
||||
replacement: 'badge-class',
|
||||
version: '2.8.0',
|
||||
scope: 'el-badge',
|
||||
ref: 'https://element-plus.org/en-US/component/badge.html',
|
||||
},
|
||||
computed(() => !!props.dotClass)
|
||||
)
|
||||
|
||||
defineExpose({
|
||||
/** @description badge content */
|
||||
content,
|
||||
|
@ -32,10 +32,6 @@ export const checkboxGroupProps = buildProps({
|
||||
* @description size of checkbox
|
||||
*/
|
||||
size: useSizeProp,
|
||||
/**
|
||||
* @deprecated label for screen reader
|
||||
*/
|
||||
label: String,
|
||||
/**
|
||||
* @description border and background color when button is active
|
||||
*/
|
||||
|
@ -5,7 +5,7 @@
|
||||
:class="ns.b('group')"
|
||||
role="group"
|
||||
:aria-label="
|
||||
!isLabeledByFormItem ? label || ariaLabel || 'checkbox-group' : undefined
|
||||
!isLabeledByFormItem ? ariaLabel || 'checkbox-group' : undefined
|
||||
"
|
||||
:aria-labelledby="isLabeledByFormItem ? formItem?.labelId : undefined"
|
||||
>
|
||||
@ -18,7 +18,7 @@ import { computed, nextTick, provide, toRefs, watch } from 'vue'
|
||||
import { pick } from 'lodash-unified'
|
||||
import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
|
||||
import { debugWarn } from '@element-plus/utils'
|
||||
import { useDeprecated, useNamespace } from '@element-plus/hooks'
|
||||
import { useNamespace } from '@element-plus/hooks'
|
||||
import { useFormItem, useFormItemInputId } from '@element-plus/components/form'
|
||||
import { checkboxGroupEmits, checkboxGroupProps } from './checkbox-group'
|
||||
import { checkboxGroupContextKey } from './constants'
|
||||
@ -67,17 +67,6 @@ provide(checkboxGroupContextKey, {
|
||||
changeEvent,
|
||||
})
|
||||
|
||||
useDeprecated(
|
||||
{
|
||||
from: 'label',
|
||||
replacement: 'aria-label',
|
||||
version: '2.8.0',
|
||||
scope: 'el-checkbox-group',
|
||||
ref: 'https://element-plus.org/en-US/component/checkbox.html',
|
||||
},
|
||||
computed(() => !!props.label)
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
|
@ -85,13 +85,6 @@ export const checkboxProps = {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
/**
|
||||
* @deprecated same as [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls), takes effect when `indeterminate` is `true`
|
||||
*/
|
||||
controls: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
/**
|
||||
* @description whether to add a border around Checkbox
|
||||
*/
|
||||
|
@ -2,7 +2,7 @@
|
||||
<component
|
||||
:is="!hasOwnLabel && isLabeledByFormItem ? 'span' : 'label'"
|
||||
:class="compKls"
|
||||
:aria-controls="indeterminate ? controls || ariaControls : null"
|
||||
:aria-controls="indeterminate ? ariaControls : null"
|
||||
@click="onClickRoot"
|
||||
>
|
||||
<span :class="spanKls">
|
||||
|
@ -51,17 +51,6 @@ export const useCheckbox = (
|
||||
|
||||
setStoreValue()
|
||||
|
||||
useDeprecated(
|
||||
{
|
||||
from: 'controls',
|
||||
replacement: 'aria-controls',
|
||||
version: '2.8.0',
|
||||
scope: 'el-checkbox',
|
||||
ref: 'https://element-plus.org/en-US/component/checkbox.html',
|
||||
},
|
||||
computed(() => !!props.controls)
|
||||
)
|
||||
|
||||
useDeprecated(
|
||||
{
|
||||
from: 'label act as value',
|
||||
|
@ -39,13 +39,6 @@ export const colorPickerProps = buildProps({
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @deprecated ColorPicker aria-label
|
||||
*/
|
||||
label: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
/**
|
||||
* @description ColorPicker tabindex
|
||||
*/
|
||||
|
@ -129,7 +129,6 @@ import {
|
||||
useFormSize,
|
||||
} from '@element-plus/components/form'
|
||||
import {
|
||||
useDeprecated,
|
||||
useFocusController,
|
||||
useLocale,
|
||||
useNamespace,
|
||||
@ -219,21 +218,10 @@ const currentColor = computed(() => {
|
||||
|
||||
const buttonAriaLabel = computed<string | undefined>(() => {
|
||||
return !isLabeledByFormItem.value
|
||||
? props.label || props.ariaLabel || t('el.colorpicker.defaultLabel')
|
||||
? props.ariaLabel || t('el.colorpicker.defaultLabel')
|
||||
: undefined
|
||||
})
|
||||
|
||||
useDeprecated(
|
||||
{
|
||||
from: 'label',
|
||||
replacement: 'aria-label',
|
||||
version: '2.8.0',
|
||||
scope: 'el-color-picker',
|
||||
ref: 'https://element-plus.org/en-US/component/color-picker.html',
|
||||
},
|
||||
computed(() => !!props.label)
|
||||
)
|
||||
|
||||
const buttonAriaLabelledby = computed<string | undefined>(() => {
|
||||
return isLabeledByFormItem.value ? formItem?.labelId : undefined
|
||||
})
|
||||
|
@ -86,10 +86,6 @@ export const inputNumberProps = buildProps({
|
||||
* @description same as `name` in native input
|
||||
*/
|
||||
name: String,
|
||||
/**
|
||||
* @deprecated same as `label` in native input
|
||||
*/
|
||||
label: String,
|
||||
/**
|
||||
* @description same as `placeholder` in native input
|
||||
*/
|
||||
|
@ -52,7 +52,7 @@
|
||||
:max="max"
|
||||
:min="min"
|
||||
:name="name"
|
||||
:aria-label="label || ariaLabel"
|
||||
:aria-label="ariaLabel"
|
||||
:validate-event="false"
|
||||
@keydown.up.prevent="increase"
|
||||
@keydown.down.prevent="decrease"
|
||||
@ -74,7 +74,7 @@ import {
|
||||
useFormSize,
|
||||
} from '@element-plus/components/form'
|
||||
import { vRepeatClick } from '@element-plus/directives'
|
||||
import { useDeprecated, useLocale, useNamespace } from '@element-plus/hooks'
|
||||
import { useLocale, useNamespace } from '@element-plus/hooks'
|
||||
import {
|
||||
debugWarn,
|
||||
isNumber,
|
||||
@ -341,16 +341,6 @@ onUpdated(() => {
|
||||
const innerInput = input.value?.input
|
||||
innerInput?.setAttribute('aria-valuenow', `${data.currentValue ?? ''}`)
|
||||
})
|
||||
useDeprecated(
|
||||
{
|
||||
from: 'label',
|
||||
replacement: 'aria-label',
|
||||
version: '2.8.0',
|
||||
scope: 'el-input-number',
|
||||
ref: 'https://element-plus.org/en-US/component/input-number.html',
|
||||
},
|
||||
computed(() => !!props.label)
|
||||
)
|
||||
defineExpose({
|
||||
/** @description get focus the input component */
|
||||
focus,
|
||||
|
@ -138,13 +138,6 @@ export const inputProps = buildProps({
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
/**
|
||||
* @deprecated native input aria-label
|
||||
*/
|
||||
label: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
/**
|
||||
* @description input tabindex
|
||||
*/
|
||||
|
@ -43,7 +43,7 @@
|
||||
:readonly="readonly"
|
||||
:autocomplete="autocomplete"
|
||||
:tabindex="tabindex"
|
||||
:aria-label="label || ariaLabel"
|
||||
:aria-label="ariaLabel"
|
||||
:placeholder="placeholder"
|
||||
:style="inputStyle"
|
||||
:form="form"
|
||||
@ -123,7 +123,7 @@
|
||||
:readonly="readonly"
|
||||
:autocomplete="autocomplete"
|
||||
:style="textareaStyle"
|
||||
:aria-label="label || ariaLabel"
|
||||
:aria-label="ariaLabel"
|
||||
:placeholder="placeholder"
|
||||
:form="form"
|
||||
:autofocus="autofocus"
|
||||
@ -185,7 +185,6 @@ import {
|
||||
useAttrs,
|
||||
useComposition,
|
||||
useCursor,
|
||||
useDeprecated,
|
||||
useFocusController,
|
||||
useNamespace,
|
||||
} from '@element-plus/hooks'
|
||||
@ -517,17 +516,6 @@ onMounted(() => {
|
||||
nextTick(resizeTextarea)
|
||||
})
|
||||
|
||||
useDeprecated(
|
||||
{
|
||||
from: 'label',
|
||||
replacement: 'aria-label',
|
||||
version: '2.8.0',
|
||||
scope: 'el-input',
|
||||
ref: 'https://element-plus.org/en-US/component/input.html',
|
||||
},
|
||||
computed(() => !!props.label)
|
||||
)
|
||||
|
||||
defineExpose({
|
||||
/** @description HTML input element */
|
||||
input,
|
||||
|
@ -34,13 +34,6 @@ export const radioGroupProps = buildProps({
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @deprecated same as `aria-label` in RadioGroup
|
||||
*/
|
||||
label: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
/**
|
||||
* @description font color when button is active
|
||||
*/
|
||||
|
@ -4,9 +4,7 @@
|
||||
ref="radioGroupRef"
|
||||
:class="ns.b('group')"
|
||||
role="radiogroup"
|
||||
:aria-label="
|
||||
!isLabeledByFormItem ? label || ariaLabel || 'radio-group' : undefined
|
||||
"
|
||||
:aria-label="!isLabeledByFormItem ? ariaLabel || 'radio-group' : undefined"
|
||||
:aria-labelledby="isLabeledByFormItem ? formItem!.labelId : undefined"
|
||||
>
|
||||
<slot />
|
||||
@ -26,7 +24,7 @@ import {
|
||||
} from 'vue'
|
||||
import { useFormItem, useFormItemInputId } from '@element-plus/components/form'
|
||||
import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
|
||||
import { useDeprecated, useId, useNamespace } from '@element-plus/hooks'
|
||||
import { useId, useNamespace } from '@element-plus/hooks'
|
||||
import { debugWarn } from '@element-plus/utils'
|
||||
import { radioGroupEmits, radioGroupProps } from './radio-group'
|
||||
import { radioGroupKey } from './constants'
|
||||
@ -83,15 +81,4 @@ watch(
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
useDeprecated(
|
||||
{
|
||||
from: 'label',
|
||||
replacement: 'aria-label',
|
||||
version: '2.8.0',
|
||||
scope: 'el-radio-group',
|
||||
ref: 'https://element-plus.org/en-US/component/radio.html',
|
||||
},
|
||||
computed(() => !!props.label)
|
||||
)
|
||||
</script>
|
||||
|
@ -140,13 +140,6 @@ export const rateProps = buildProps({
|
||||
* @description size of Rate
|
||||
*/
|
||||
size: useSizeProp,
|
||||
/**
|
||||
* @deprecated same as `aria-label` in Rate
|
||||
*/
|
||||
label: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
/**
|
||||
* @description whether value can be reset to `0`
|
||||
*/
|
||||
|
@ -3,9 +3,7 @@
|
||||
:id="inputId"
|
||||
:class="[rateClasses, ns.is('disabled', rateDisabled)]"
|
||||
role="slider"
|
||||
:aria-label="
|
||||
!isLabeledByFormItem ? label || ariaLabel || 'rating' : undefined
|
||||
"
|
||||
:aria-label="!isLabeledByFormItem ? ariaLabel || 'rating' : undefined"
|
||||
:aria-labelledby="
|
||||
isLabeledByFormItem ? formItemContext?.labelId : undefined
|
||||
"
|
||||
@ -67,7 +65,7 @@ import {
|
||||
useFormSize,
|
||||
} from '@element-plus/components/form'
|
||||
import { ElIcon } from '@element-plus/components/icon'
|
||||
import { useDeprecated, useNamespace } from '@element-plus/hooks'
|
||||
import { useNamespace } from '@element-plus/hooks'
|
||||
import { rateEmits, rateProps } from './rate'
|
||||
import type { CSSProperties, Component } from 'vue'
|
||||
|
||||
@ -304,17 +302,6 @@ if (!props.modelValue) {
|
||||
emit(UPDATE_MODEL_EVENT, 0)
|
||||
}
|
||||
|
||||
useDeprecated(
|
||||
{
|
||||
from: 'label',
|
||||
replacement: 'aria-label',
|
||||
version: '2.8.0',
|
||||
scope: 'el-rate',
|
||||
ref: 'https://element-plus.org/en-US/component/rate.html',
|
||||
},
|
||||
computed(() => !!props.label)
|
||||
)
|
||||
|
||||
defineExpose({
|
||||
/** @description set current value */
|
||||
setCurrentValue,
|
||||
|
@ -119,13 +119,6 @@ export const sliderProps = buildProps({
|
||||
type: Number,
|
||||
default: 300,
|
||||
},
|
||||
/**
|
||||
* @deprecated label for screen reader
|
||||
*/
|
||||
label: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
/**
|
||||
* @description when `range` is true, screen reader label for the start of the range
|
||||
*/
|
||||
|
@ -111,7 +111,7 @@ import { computed, provide, reactive, toRefs } from 'vue'
|
||||
import { useEventListener } from '@vueuse/core'
|
||||
import ElInputNumber from '@element-plus/components/input-number'
|
||||
import { useFormItemInputId, useFormSize } from '@element-plus/components/form'
|
||||
import { useDeprecated, useLocale, useNamespace } from '@element-plus/hooks'
|
||||
import { useLocale, useNamespace } from '@element-plus/hooks'
|
||||
import { sliderContextKey } from './constants'
|
||||
import { sliderEmits, sliderProps } from './slider'
|
||||
import SliderButton from './button.vue'
|
||||
@ -175,7 +175,6 @@ const sliderInputSize = computed(
|
||||
|
||||
const groupLabel = computed<string>(() => {
|
||||
return (
|
||||
props.label ||
|
||||
props.ariaLabel ||
|
||||
t('el.slider.defaultLabel', {
|
||||
min: props.min,
|
||||
@ -252,17 +251,6 @@ provide(sliderContextKey, {
|
||||
updateDragging,
|
||||
})
|
||||
|
||||
useDeprecated(
|
||||
{
|
||||
from: 'label',
|
||||
replacement: 'aria-label',
|
||||
version: '2.8.0',
|
||||
scope: 'el-slider',
|
||||
ref: 'https://element-plus.org/en-US/component/slider.html',
|
||||
},
|
||||
computed(() => !!props.label)
|
||||
)
|
||||
|
||||
defineExpose({
|
||||
onSliderClick,
|
||||
})
|
||||
|
@ -133,13 +133,6 @@ export const switchProps = buildProps({
|
||||
tabindex: {
|
||||
type: [String, Number],
|
||||
},
|
||||
/**
|
||||
* @deprecated native input aria-label
|
||||
*/
|
||||
label: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
...useAriaProps(['ariaLabel']),
|
||||
} as const)
|
||||
|
||||
|
@ -8,7 +8,7 @@
|
||||
role="switch"
|
||||
:aria-checked="checked"
|
||||
:aria-disabled="switchDisabled"
|
||||
:aria-label="label || ariaLabel"
|
||||
:aria-label="ariaLabel"
|
||||
:name="name"
|
||||
:true-value="activeValue"
|
||||
:false-value="inactiveValue"
|
||||
@ -88,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'
|
||||
|
||||
@ -218,17 +218,6 @@ onMounted(() => {
|
||||
input.value!.checked = checked.value
|
||||
})
|
||||
|
||||
useDeprecated(
|
||||
{
|
||||
from: 'label',
|
||||
replacement: 'aria-label',
|
||||
version: '2.8.0',
|
||||
scope: 'el-switch',
|
||||
ref: 'https://element-plus.org/en-US/component/switch.html',
|
||||
},
|
||||
computed(() => !!props.label)
|
||||
)
|
||||
|
||||
defineExpose({
|
||||
/**
|
||||
* @description manual focus to the switch component
|
||||
|
@ -41,7 +41,7 @@
|
||||
isYearsPicker ||
|
||||
type === 'week'
|
||||
"
|
||||
:aria-label="label || ariaLabel"
|
||||
:aria-label="ariaLabel"
|
||||
:tabindex="tabindex"
|
||||
:validate-event="false"
|
||||
@input="onUserInput"
|
||||
@ -174,12 +174,7 @@ import {
|
||||
} from 'vue'
|
||||
import { isEqual } from 'lodash-unified'
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
import {
|
||||
useDeprecated,
|
||||
useEmptyValues,
|
||||
useLocale,
|
||||
useNamespace,
|
||||
} from '@element-plus/hooks'
|
||||
import { useEmptyValues, useLocale, useNamespace } from '@element-plus/hooks'
|
||||
import { useFormItem, useFormSize } from '@element-plus/components/form'
|
||||
import ElInput from '@element-plus/components/input'
|
||||
import ElIcon from '@element-plus/components/icon'
|
||||
@ -762,17 +757,6 @@ provide('EP_PICKER_BASE', {
|
||||
props,
|
||||
})
|
||||
|
||||
useDeprecated(
|
||||
{
|
||||
from: 'label',
|
||||
replacement: 'aria-label',
|
||||
version: '2.8.0',
|
||||
scope: 'el-time-picker',
|
||||
ref: 'https://element-plus.org/en-US/component/time-picker.html',
|
||||
},
|
||||
computed(() => !!props.label)
|
||||
)
|
||||
|
||||
defineExpose({
|
||||
/**
|
||||
* @description focus input box.
|
||||
|
@ -190,13 +190,6 @@ export const timePickerDefaultProps = buildProps({
|
||||
* @description whether to pick time using arrow buttons
|
||||
*/
|
||||
arrowControl: Boolean,
|
||||
/**
|
||||
* @deprecated same as `aria-label` in native input
|
||||
*/
|
||||
label: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
/**
|
||||
* @description input tabindex
|
||||
*/
|
||||
|
Loading…
Reference in New Issue
Block a user