mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-05 12:48:04 +08:00
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:
parent
82030446c7
commit
d96470f9d2
@ -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,
|
@ -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'
|
||||
|
@ -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 } =
|
||||
|
@ -16,7 +16,7 @@ import {
|
||||
useCheckboxGroup,
|
||||
useCheckboxGroupId,
|
||||
useCheckboxGroupProps,
|
||||
} from './useCheckbox'
|
||||
} from './checkbox'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ElCheckboxGroup',
|
||||
|
@ -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>
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user