test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-05 04:37:47 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs(components): [switch] use new display tag (#12678)

Browse Source 
* docs(components): [switch] use new display tag

* style(components): [switch] update the batch deprecate

* docs(components): [switch] delete deprecated attributes
This commit is contained in:
wzc520pyfm 2023-06-06 08:10:47 +08:00 committed by GitHub
parent 266b13eca8
commit 6b8b0627db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 189 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
docs/en-US/component/switch.md
View File

@ -79,37 +79,41 @@ switch/prevent-switching
:::
## Attributes
## API
| Name | Description | Type | Accepted Values | Default |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------------------- | ------- |
| model-value / v-model | binding value, it should be equivalent to either `active-value` or `inactive-value`, by default it's `boolean` type | boolean / string / number | — | — |
| disabled | whether Switch is disabled | boolean | — | false |
| loading | whether Switch is in loading state | boolean | — | false |
| size | size of Switch | string | large / default / small | default |
| width | width of Switch | number / string | — | — |
| inline-prompt | whether icon or text is displayed inside dot, only the first character will be rendered for text | boolean | — | false |
| active-icon | component of the icon displayed when in `on` state, overrides `active-text` | `string \| Component` | — | — |
| inactive-icon | component of the icon displayed when in `off` state, overrides `inactive-text` | `string \| Component` | — | — |
| active-text | text displayed when in `on` state | string | — | — |
| inactive-text | text displayed when in `off` state | string | — | — |
| active-value | switch value when in `on` state | boolean / string / number | — | true |
| inactive-value | switch value when in `off` state | boolean / string / number | — | false |
| active-color | background color when in `on` state ( deprecated, use CSS var `--el-switch-on-color` instead ) | string | — | — |
| inactive-color | background color when in `off` state ( deprecated, use CSS var `--el-switch-off-color` instead ) | string | — | — |
| border-color | border color of the switch ( deprecated, use CSS var `--el-switch-border-color` instead ) | string | — | — |
| name | input name of Switch | string | — | — |
| validate-event | whether to trigger form validation | boolean | — | true |
| before-change | before-change hook before the switch state changes. If `false` is returned or a `Promise` is returned and then is rejected, will stop switching | `() => Promise<boolean> \| boolean` | — | — |
### Attributes
## Events
| Name | Description | Type | Default |
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------- |
| model-value / v-model | binding value, it should be equivalent to either `active-value` or `inactive-value`, by default it's `boolean` type | ^[boolean] / ^[string] / ^[number] | false |
| disabled | whether Switch is disabled | ^[boolean] | false |
| loading | whether Switch is in loading state | ^[boolean] | false |
| size | size of Switch | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | '' |
| width | width of Switch | ^[number] / ^[string] | '' |
| inline-prompt | whether icon or text is displayed inside dot, only the first character will be rendered for text | ^[boolean] | false |
| active-icon | component of the icon displayed when in `on` state, overrides `active-text` | ^[string] / ^[Component] | — |
| inactive-icon | component of the icon displayed when in `off` state, overrides `inactive-text` | ^[string] / ^[Component] | — |
| active-text | text displayed when in `on` state | ^[string] | '' |
| inactive-text | text displayed when in `off` state | ^[string] | '' |
| active-value | switch value when in `on` state | ^[boolean] / ^[string] / ^[number] | true |
| inactive-value | switch value when in `off` state | ^[boolean] / ^[string] / ^[number] | false |
| active-color ^(deprecated) | background color when in `on` state ( deprecated, use CSS var `--el-switch-on-color` instead ) | ^[string] | '' |
| inactive-color ^(deprecated) | background color when in `off` state ( deprecated, use CSS var `--el-switch-off-color` instead ) | ^[string] | '' |
| border-color ^(deprecated) | border color of the switch ( deprecated, use CSS var `--el-switch-border-color` instead ) | ^[string] | '' |
| name | input name of Switch | ^[string] | '' |
| validate-event | whether to trigger form validation | ^[boolean] | true |
| before-change | before-change hook before the switch state changes. If `false` is returned or a `Promise` is returned and then is rejected, will stop switching | ^[boolean] / ^[Function]`() => Promise<boolean>` | — |
| id | id for input | ^[string] | — |
| tabindex | tabindex for input | ^[string] / ^[number] | — |
| Name | Description | Parameters |
| ------ | --------------------------- | -------------------- |
| change | triggers when value changes | value after changing |
### Events
## Methods
| Name | Description | Type |
| ------ | --------------------------- | ------------------------------------------------------- |
| change | triggers when value changes | ^[Function]`(val: boolean \| string \| number) => void` |
| Method | Description | Parameters |
| ------ | -------------------------- | ---------- |
| focus | focus the Switch component | — |
### Exposes
| Method | Description | Type |
| ------ | ------------------------------------ | ----------------------- |
| focus | manual focus to the switch component | ^[Function]`() => void` |

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

@ -17,83 +17,146 @@ import type Switch from './switch.vue'
import type { ExtractPropTypes, PropType } from 'vue'
export const switchProps = buildProps({
/**
* @description binding value, it should be equivalent to either `active-value` or `inactive-value`, by default it's `boolean` type
*/
modelValue: {
type: [Boolean, String, Number],
default: false,
},
value: {
type: [Boolean, String, Number],
default: false,
},
/**
* @description whether Switch is disabled
*/
disabled: {
type: Boolean,
default: false,
},
width: {
type: [String, Number],
default: '',
},
inlinePrompt: {
type: Boolean,
default: false,
},
activeIcon: {
type: iconPropType,
},
inactiveIcon: {
type: iconPropType,
},
activeText: {
type: String,
default: '',
},
inactiveText: {
type: String,
default: '',
},
activeColor: {
type: String,
default: '',
},
inactiveColor: {
type: String,
default: '',
},
borderColor: {
type: String,
default: '',
},
activeValue: {
type: [Boolean, String, Number],
default: true,
},
inactiveValue: {
type: [Boolean, String, Number],
default: false,
},
name: {
type: String,
default: '',
},
validateEvent: {
type: Boolean,
default: true,
},
id: String,
/**
* @description whether Switch is in loading state
*/
loading: {
type: Boolean,
default: false,
},
beforeChange: {
type: definePropType<() => Promise<boolean> | boolean>(Function),
},
/**
* @description size of Switch
*/
size: {
type: String as PropType<ComponentSize>,
validator: isValidComponentSize,
},
/**
* @description width of Switch
*/
width: {
type: [String, Number],
default: '',
},
/**
* @description whether icon or text is displayed inside dot, only the first character will be rendered for text
*/
inlinePrompt: {
type: Boolean,
default: false,
},
/**
* @description component of the icon displayed when in `on` state, overrides `active-text`
*/
activeIcon: {
type: iconPropType,
},
/**
* @description component of the icon displayed when in `off` state, overrides `inactive-text`
*/
inactiveIcon: {
type: iconPropType,
},
/**
* @description text displayed when in `on` state
*/
activeText: {
type: String,
default: '',
},
/**
* @description text displayed when in `off` state
*/
inactiveText: {
type: String,
default: '',
},
/**
* @description switch value when in `on` state
*/
activeValue: {
type: [Boolean, String, Number],
default: true,
},
/**
* @description switch value when in `off` state
*/
inactiveValue: {
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
*/
name: {
type: String,
default: '',
},
/**
* @description whether to trigger form validation
*/
validateEvent: {
type: Boolean,
default: true,
},
/**
* @description before-change hook before the switch state changes. If `false` is returned or a `Promise` is returned and then is rejected, will stop switching
*/
beforeChange: {
type: definePropType<() => Promise<boolean> | boolean>(Function),
},
/**
* @description id for input
*/
id: String,
/**
* @description tabindex for input
*/
tabindex: {
type: [String, Number],
},
/**
* @deprecated binding value ( deprecated, use `model-value / v-model` instead )
*/
value: {
type: [Boolean, String, Number],
default: false,
},
} as const)
export type SwitchProps = ExtractPropTypes<typeof switchProps>

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

@ -18,11 +18,7 @@
/>
<span
v-if="!inlinePrompt && (inactiveIcon || inactiveText)"
:class="[
ns.e('label'),
ns.em('label', 'left'),
ns.is('active', !checked),
]"
:class="labelLeftKls"
>
<el-icon v-if="inactiveIcon">
<component :is="inactiveIcon" />
@ -52,11 +48,7 @@
</span>
<span
v-if="!inlinePrompt && (activeIcon || activeText)"
:class="[
ns.e('label'),
ns.em('label', 'right'),
ns.is('active', checked),
]"
:class="labelRightKls"
>
<el-icon v-if="activeIcon">
<component :is="activeIcon" />
@ -109,17 +101,27 @@ const { formItem } = useFormItem()
const switchSize = useFormSize()
const ns = useNamespace('switch')
useDeprecated(
{
from: '"value"',
replacement: '"model-value" or "v-model"',
scope: COMPONENT_NAME,
version: '2.3.0',
ref: 'https://element-plus.org/en-US/component/switch.html#attributes',
type: 'Attribute',
},
computed(() => !!vm.vnode.props?.value)
)
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,
@ -137,6 +139,18 @@ const switchKls = computed(() => [
ns.is('checked', checked.value),
])
const labelLeftKls = computed(() => [
ns.e('label'),
ns.em('label', 'left'),
ns.is('active', !checked.value),
])
const labelRightKls = computed(() => [
ns.e('label'),
ns.em('label', 'right'),
ns.is('active', checked.value),
])
const coreStyle = computed<CSSProperties>(() => ({
width: addUnit(props.width),
}))