From 452f9fc4f972260a0ea587f44e74efd6fc4ba486 Mon Sep 17 00:00:00 2001
From: Xc <124118265@qq.com>
Date: Tue, 24 May 2022 15:49:12 +0800
Subject: [PATCH] refactor(components): [checkbox-group] switch to script-setup
 syntax (#7825)

* 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
---
 .../checkbox/src/checkbox-group.vue           | 121 ++++++++----------
 1 file changed, 53 insertions(+), 68 deletions(-)

diff --git a/packages/components/checkbox/src/checkbox-group.vue b/packages/components/checkbox/src/checkbox-group.vue
index d1a727c875..c154e58bd6 100644
--- a/packages/components/checkbox/src/checkbox-group.vue
+++ b/packages/components/checkbox/src/checkbox-group.vue
@@ -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>