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

packages/components/checkbox/src/checkbox-button.vue

@@ -39,48 +39,46 @@
     <span
       v-if="$slots.default || label"
       :class="ns.be('button', 'inner')"
-      :style="isChecked ? activeStyle : null"
+      :style="isChecked ? activeStyle : undefined"
     >
       <slot>{{ label }}</slot>
     </span>
   </label>
 </template>
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
-import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
+
+<script lang="ts" setup>
+import { computed, useSlots } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
-import { checkboxProps, useCheckbox, useCheckboxGroup } from './checkbox'
+import {
+  checkboxEmits,
+  checkboxProps,
+  useCheckbox,
+  useCheckboxGroup,
+} from './checkbox'
+import type { CSSProperties } from 'vue'
 
-export default defineComponent({
+defineOptions({
   name: 'ElCheckboxButton',
-  props: checkboxProps,
-  emits: [UPDATE_MODEL_EVENT, 'change'],
-  setup(props, { slots }) {
-    const { focus, isChecked, isDisabled, size, model, handleChange } =
-      useCheckbox(props, slots)
-    const { checkboxGroup } = useCheckboxGroup()
-    const ns = useNamespace('checkbox')
+})
 
-    const activeStyle = computed(() => {
-      const fillValue = checkboxGroup?.fill?.value ?? ''
-      return {
-        backgroundColor: fillValue,
-        borderColor: fillValue,
-        color: checkboxGroup?.textColor?.value ?? '',
-        boxShadow: fillValue ? `-1px 0 0 0 ${fillValue}` : null,
-      }
-    })
+const props = defineProps(checkboxProps)
+defineEmits(checkboxEmits)
+const slots = useSlots()
 
-    return {
-      focus,
-      isChecked,
-      isDisabled,
-      model,
-      handleChange,
-      activeStyle,
-      size,
-      ns,
-    }
-  },
+const { focus, isChecked, isDisabled, size, model, handleChange } = useCheckbox(
+  props,
+  slots
+)
+const { checkboxGroup } = useCheckboxGroup()
+const ns = useNamespace('checkbox')
+
+const activeStyle = computed<CSSProperties>(() => {
+  const fillValue = checkboxGroup?.fill?.value ?? ''
+  return {
+    backgroundColor: fillValue,
+    borderColor: fillValue,
+    color: checkboxGroup?.textColor?.value ?? '',
+    boxShadow: fillValue ? `-1px 0 0 0 ${fillValue}` : undefined,
+  }
 })
 </script>