feat(data-form): 添加 CheckboxGroup组件并更新相关配置

- 新增 CheckboxGroup 组件，用于数据表单中的复选框组
- 在 DataFormConstant 中替换原有的 ElCheckboxGroup 为自定义的 CheckboxGroup
- 在示例页面 DataForm01.vue 中添加 CheckboxGroup 组件的使用演示

src/components/data-form/DataFormConstant.ts

@@ -3,7 +3,6 @@ import {
     ElAutocomplete,
     ElCascader,
     ElCheckbox,
-    ElCheckboxGroup,
     ElColorPicker,
     ElDatePicker,
     ElInput,
@@ -22,6 +21,7 @@ import {
     ElTreeSelect,
     ElUpload,
 } from "element-plus";
+import CheckboxGroup from "./inputs/CheckboxGroup.vue";
 import RadioGroup from "./inputs/RadioGroup.vue";
 import type { DisplayMode } from "./DataFormTypes.ts";
 
@@ -30,7 +30,7 @@ const builtInInputComponents = {
     Input: markRaw<any>(ElInput),
     InputNumber: markRaw<any>(ElInputNumber),
     Checkbox: markRaw<any>(ElCheckbox),
-    CheckboxGroup: markRaw<any>(ElCheckboxGroup),
+    CheckboxGroup: markRaw<any>(CheckboxGroup),
     Radio: markRaw<any>(ElRadio),
     RadioGroup: markRaw<any>(RadioGroup),
     Switch: markRaw<any>(ElSwitch),

src/components/data-form/inputs/CheckboxGroup.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import lodash from "lodash";
+import { computed, createVNode, defineExpose, onMounted, reactive, useAttrs, useSlots, useTemplateRef } from "vue";
+import { ElCheckbox, ElCheckboxGroup } from "element-plus";
+import { Typeof } from "@ease-forge/shared";
+import { mergeExpose } from "../DataFormUtils.tsx";
+
+defineOptions({
+    name: 'CheckboxGroup',
+});
+
+// 组件属性
+const attrs = useAttrs();
+// 组件插槽
+const slots = useSlots();
+
+interface OptionItem {
+    value: string | number | boolean;
+    label: string;
+
+    [key: string]: any;
+}
+
+// 定义 Props 类型
+interface CheckboxGroupProps {
+    options?: Array<OptionItem>;
+}
+
+// 读取组件 props 属性
+const props = withDefaults(defineProps<CheckboxGroupProps>(), {
+    options: () => ([]),
+});
+
+// 定义 State 类型
+interface CheckboxGroupState {
+}
+
+// state 属性
+const state = reactive<CheckboxGroupState>({
+    loading: false,
+});
+// 输入组件实例
+const input = useTemplateRef<InstanceType<typeof ElCheckboxGroup>>("inputRef");
+// 选项数据
+const options = computed(() => {
+    let opts: Array<OptionItem> = [];
+    let options = props.options;
+    if (options) {
+        if (Typeof.isArray(options)) {
+            opts = options;
+        } else {
+            console.log("options 配置必须是数组类型");
+        }
+    }
+    return opts;
+});
+// 输入组件 props 属性
+const inputProps = computed<any>(() => {
+    const res: any = { ...attrs };
+    if (Typeof.hasValue(res.modelValue) && !Typeof.isStr(res.modelValue)) res.modelValue = lodash.toString(res.modelValue);
+    return res;
+});
+
+function toString(val: any) {
+    if (Typeof.hasValue(val) && !Typeof.isStr(val)) return lodash.toString(val);
+    return val;
+}
+
+const expose = {
+    /** 组件状态 */
+    state,
+};
+
+onMounted(() => {
+    if (input.value) mergeExpose(expose, input.value);
+});
+
+// 定义组件公开内容
+defineExpose(expose);
+
+export type {
+    OptionItem,
+    CheckboxGroupProps,
+    CheckboxGroupState,
+}
+</script>
+
+<template>
+    <component ref="inputRef" :is="createVNode(ElCheckboxGroup, inputProps, slots)">
+        <ElCheckbox v-for="(item, idx) in options" v-bind="item" :value="toString(item.value)"/>
+    </component>
+</template>
+
+<style scoped>
+
+</style>

src/pages/DataForm01.vue

@@ -93,7 +93,10 @@ const dataForm1 = reactive<DataFormProps>({
             dataPath: 'checkbox_group_1', label: '复选组', input: 'CheckboxGroup',
             inputProps: {
                 max: 2,
-                // TODO options
+                options: [
+                    { value: "001", label: "选项1" },
+                    { value: "v2", label: "选项2" },
+                ],
             },
         },
         {