refactor(components): [checkbox] switch to script-setup syntax (#7794)

* refactor: checkbox switch to script-setup syntax

* refactor: checkbox use useSizeProps and edit test
This commit is contained in:
Xc 2022-05-20 15:35:02 +08:00 committed by GitHub
parent 82030446c7
commit d96470f9d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 64 additions and 50 deletions

View File

@ -5,13 +5,12 @@ import { ElFormItem } from '@element-plus/components/form'
import Checkbox from '../src/checkbox.vue'
import CheckboxButton from '../src/checkbox-button.vue'
import CheckboxGroup from '../src/checkbox-group.vue'
import type { VueWrapper } from '@vue/test-utils'
import type { FormItemInstance } from '@element-plus/components/form'
import type { CheckboxInstance } from '@element-plus/components/checkbox'
const _mount = <D>(
template: string,
data: () => D,
otherObj?: Record<string, unknown>
) =>
mount<D>({
const _mount = (template: string, data, otherObj?: Record<string, unknown>) =>
mount({
components: {
'el-checkbox': Checkbox,
'el-checkbox-group': CheckboxGroup,
@ -55,7 +54,7 @@ describe('Checkbox', () => {
describe('disabled', () => {
test('checkbox without label', async () => {
const wrapper = _mount(
const wrapper: VueWrapper<FormItemInstance> = _mount(
`<el-form-item label="test">
<el-checkbox ref="check" v-model="checkbox" disabled/>
</el-form-item>`,
@ -71,7 +70,7 @@ describe('Checkbox', () => {
})
test('checkbox with label attribute', async () => {
const wrapper = _mount(
const wrapper: VueWrapper<CheckboxInstance> = _mount(
'<el-checkbox v-model="checkbox" disabled label="a"/>',
() => ({ checkbox: false })
)
@ -86,7 +85,7 @@ describe('Checkbox', () => {
describe('change event', () => {
test('checkbox without label', async () => {
const wrapper = _mount(
const wrapper: VueWrapper<FormItemInstance> = _mount(
`<el-form-item label="test">
<el-checkbox ref="check" v-model="checked" @change="onChange" />
</el-form-item>`,
@ -108,7 +107,7 @@ describe('Checkbox', () => {
})
test('checkbox with label attribute', async () => {
const wrapper = _mount(
const wrapper: VueWrapper<CheckboxInstance> = _mount(
`<el-checkbox v-model="checked" label="Foobar" @change="onChange" />`,
() => ({
data: null,
@ -128,7 +127,7 @@ describe('Checkbox', () => {
})
test('checkbox with label as slot content', async () => {
const wrapper = _mount(
const wrapper: VueWrapper<CheckboxInstance> = _mount(
`<el-checkbox v-model="checked" @change="onChange">Foobar</el-checkbox>`,
() => ({
data: null,

View File

@ -12,3 +12,6 @@ export default ElCheckbox
export const ElCheckboxButton = withNoopInstall(CheckboxButton)
export const ElCheckboxGroup = withNoopInstall(CheckboxGroup)
export * from './src/checkbox'
export * from './src/checkbox.type'

View File

@ -49,11 +49,11 @@
import { computed, defineComponent } from 'vue'
import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
import { useNamespace } from '@element-plus/hooks'
import { useCheckbox, useCheckboxGroup, useCheckboxProps } from './useCheckbox'
import { checkboxProps, useCheckbox, useCheckboxGroup } from './checkbox'
export default defineComponent({
name: 'ElCheckboxButton',
props: useCheckboxProps,
props: checkboxProps,
emits: [UPDATE_MODEL_EVENT, 'change'],
setup(props, { slots }) {
const { focus, isChecked, isDisabled, size, model, handleChange } =

View File

@ -16,7 +16,7 @@ import {
useCheckboxGroup,
useCheckboxGroupId,
useCheckboxGroupProps,
} from './useCheckbox'
} from './checkbox'
export default defineComponent({
name: 'ElCheckboxGroup',

View File

@ -2,12 +2,12 @@ import { computed, getCurrentInstance, inject, nextTick, ref, watch } from 'vue'
import { toTypeString } from '@vue/shared'
import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
import { formContextKey, formItemContextKey } from '@element-plus/tokens'
import { useFormItemInputId, useSize } from '@element-plus/hooks'
import { debugWarn, isValidComponentSize } from '@element-plus/utils'
import { useFormItemInputId, useSize, useSizeProp } from '@element-plus/hooks'
import { debugWarn, isBoolean, isNumber, isString } from '@element-plus/utils'
import type { ComponentInternalInstance, ExtractPropTypes, PropType } from 'vue'
import type { ComponentSize } from '@element-plus/constants'
import type { FormContext, FormItemContext } from '@element-plus/tokens'
import type { ICheckboxGroupInstance } from './checkbox.type'
import type Checkbox from './checkbox.vue'
export const useCheckboxGroupProps = {
modelValue: {
@ -23,10 +23,7 @@ export const useCheckboxGroupProps = {
type: Number,
default: undefined,
},
size: {
type: String as PropType<ComponentSize>,
validator: isValidComponentSize,
},
size: useSizeProp,
id: {
type: String,
default: undefined,
@ -53,7 +50,7 @@ export type IUseCheckboxGroupProps = ExtractPropTypes<
typeof useCheckboxGroupProps
>
export const useCheckboxProps = {
export const checkboxProps = {
modelValue: {
type: [Number, String, Boolean],
default: () => undefined,
@ -85,15 +82,10 @@ export const useCheckboxProps = {
default: undefined,
},
border: Boolean,
size: {
type: String as PropType<ComponentSize>,
validator: isValidComponentSize,
},
size: useSizeProp,
tabindex: [String, Number],
}
export type IUseCheckboxProps = ExtractPropTypes<typeof useCheckboxProps>
export const useCheckboxGroup = () => {
const elForm = inject(formContextKey, {} as FormContext)
const elFormItem = inject(formItemContextKey, {} as FormItemContext)
@ -127,7 +119,7 @@ export const useCheckboxGroupId = (
}
}
const useModel = (props: IUseCheckboxProps) => {
const useModel = (props: CheckboxProps) => {
const selfModel = ref<any>(false)
const { emit } = getCurrentInstance()!
const { isGroup, checkboxGroup, elFormItem } = useCheckboxGroup()
@ -161,7 +153,7 @@ const useModel = (props: IUseCheckboxProps) => {
}
const useCheckboxStatus = (
props: IUseCheckboxProps,
props: CheckboxProps,
slots: ComponentInternalInstance['slots'],
{ model }: Partial<ReturnType<typeof useModel>>
) => {
@ -201,7 +193,7 @@ const useCheckboxStatus = (
}
const useDisabled = (
props: IUseCheckboxProps,
props: CheckboxProps,
{
model,
isChecked,
@ -233,7 +225,7 @@ const useDisabled = (
}
const setStoreValue = (
props: IUseCheckboxProps,
props: CheckboxProps,
{ model }: Partial<ReturnType<typeof useModel>>
) => {
function addToStore() {
@ -247,7 +239,7 @@ const setStoreValue = (
}
const useEvent = (
props: IUseCheckboxProps,
props: CheckboxProps,
{
model,
isLimitExceeded,
@ -277,7 +269,7 @@ const useEvent = (
emit('change', getLabeledValue(checked), e)
}
function handleChange(e: InputEvent) {
function handleChange(e: Event) {
if (isLimitExceeded!.value) return
const target = e.target as HTMLInputElement
emit('change', getLabeledValue(target.checked), e)
@ -311,8 +303,15 @@ const useEvent = (
}
}
export const checkboxEmits = {
[UPDATE_MODEL_EVENT]: (val: string | number | boolean) =>
isString(val) || isNumber(val) || isBoolean(val),
change: (val: string | number | boolean) =>
isString(val) || isNumber(val) || isBoolean(val),
}
export const useCheckbox = (
props: IUseCheckboxProps,
props: CheckboxProps,
slots: ComponentInternalInstance['slots']
) => {
const { model, isGroup, isLimitExceeded, elFormItem } = useModel(props)
@ -352,3 +351,7 @@ export const useCheckbox = (
size,
}
}
export type CheckboxProps = ExtractPropTypes<typeof checkboxProps>
export type CheckboxEmits = typeof checkboxEmits
export type CheckboxInstance = InstanceType<typeof Checkbox>

View File

@ -62,23 +62,32 @@
</span>
</component>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
<script lang="ts" setup>
import { useSlots } from 'vue'
import { useNamespace } from '@element-plus/hooks'
import { useCheckbox, useCheckboxProps } from './useCheckbox'
import { checkboxEmits, checkboxProps, useCheckbox } from './checkbox'
export default defineComponent({
defineOptions({
name: 'ElCheckbox',
props: useCheckboxProps,
emits: [UPDATE_MODEL_EVENT, 'change'],
setup(props, { slots }) {
const ns = useNamespace('checkbox')
return {
ns,
...useCheckbox(props, slots),
}
},
})
const props = defineProps(checkboxProps)
defineEmits(checkboxEmits)
const slots = useSlots()
const {
inputId,
isLabeledByFormItem,
isChecked,
isDisabled,
checkboxSize,
hasOwnLabel,
model,
handleChange,
onClickRoot,
focus,
} = useCheckbox(props, slots)
const ns = useNamespace('checkbox')
</script>