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

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

Browse Source 
* refactor(components): [checkbox-group] switch to script-setup syntax

* refactor(components): [checkbox-group] switch to script-setup syntax

* refactor(components): [checkbox-group] switch to script-setup syntax
This commit is contained in:
Xc 2022-05-24 15:49:12 +08:00 committed by GitHub
parent 0600f27af5
commit 452f9fc4f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 53 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
packages/components/checkbox/src/checkbox-group.vue
View File

@ -1,85 +1,70 @@
<script lang="ts">
import {
computed,
defineComponent,
h,
nextTick,
provide,
renderSlot,
toRefs,
watch,
} from 'vue'
<template>
<component
:is="tag"
:id="groupId"
:class="ns.b('group')"
role="group"
:aria-label="!isLabeledByFormItem ? label || 'checkbox-group' : undefined"
:aria-labelledby="isLabeledByFormItem ? elFormItem.labelId : undefined"
>
<slot />
</component>
</template>
<script lang="ts" setup>
import { computed, nextTick, provide, toRefs, watch } from 'vue'
import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
import { debugWarn } from '@element-plus/utils'
import { useNamespace, useSize } from '@element-plus/hooks'
import {
checkboxEmits,
useCheckboxGroup,
useCheckboxGroupId,
useCheckboxGroupProps,
} from './checkbox'
export default defineComponent({
defineOptions({
name: 'ElCheckboxGroup',
})
props: useCheckboxGroupProps,
const props = defineProps(useCheckboxGroupProps)
const emit = defineEmits(checkboxEmits)
emits: [UPDATE_MODEL_EVENT, 'change'],
const { elFormItem } = useCheckboxGroup()
const { groupId, isLabeledByFormItem } = useCheckboxGroupId(props, {
elFormItem,
})
const checkboxGroupSize = useSize()
const ns = useNamespace('checkbox')
setup(props, { emit, slots }) {
const { elFormItem } = useCheckboxGroup()
const { groupId, isLabeledByFormItem } = useCheckboxGroupId(props, {
elFormItem,
})
const checkboxGroupSize = useSize()
const ns = useNamespace('checkbox')
const changeEvent = (value) => {
emit(UPDATE_MODEL_EVENT, value)
nextTick(() => {
emit('change', value)
})
}
const changeEvent = (value) => {
emit(UPDATE_MODEL_EVENT, value)
nextTick(() => {
emit('change', value)
})
}
const modelValue = computed({
get() {
return props.modelValue
},
set(val) {
changeEvent(val)
},
})
provide('CheckboxGroup', {
name: 'ElCheckboxGroup',
modelValue,
...toRefs(props),
checkboxGroupSize,
changeEvent,
})
watch(
() => props.modelValue,
() => {
elFormItem.validate?.('change').catch((err) => debugWarn(err))
}
)
return () => {
return h(
props.tag,
{
id: groupId.value,
class: ns.b('group'),
role: 'group',
'aria-label': !isLabeledByFormItem.value
? props.label || 'checkbox-group'
: undefined,
'aria-labelledby': isLabeledByFormItem.value
? elFormItem.labelId
: undefined,
},
[renderSlot(slots, 'default')]
)
}
const modelValue = computed({
get() {
return props.modelValue
},
set(val) {
changeEvent(val)
},
})
provide('CheckboxGroup', {
name: 'ElCheckboxGroup',
modelValue,
...toRefs(props),
checkboxGroupSize,
changeEvent,
})
watch(
() => props.modelValue,
() => {
elFormItem.validate?.('change').catch((err) => debugWarn(err))
}
)
</script>