@xiaohaih/json-form-vant 0.0.1

package/TODO.md

@@ -0,0 +1,36 @@
+# 组件改造任务清单
+
+## 每个组件需要满足的两个条件：
+1. **slotProps**: `const { slotProps } = useCommonSetup(props, ctx, plain);` 并在 setup 返回 slotProps
+2. **Slots声明+渲染**: types.ts 中声明插槽类型 + index.vue 中 v-for 遍历渲染插槽
+
+## 各组件状态一览
+
+### ✅ 已完成（不需要修改）
+- cascader - ✅ slotProps + slots渲染
+- checkbox - ✅ slotProps + slots渲染
+- input - ✅ slotProps + slots渲染
+- radio - ✅ slotProps + slots渲染
+
+### ❌ 缺少 useCommonSetup + slotProps (但Slots已声明)
+- datepicker - ❌ 无useCommonSetup/slotProps，无slots渲染
+- number-keyboard - ❌ 无useCommonSetup/slotProps，无slots渲染
+- rate - ❌ 无useCommonSetup/slotProps，无slots渲染
+- signature - ❌ 无useCommonSetup/slotProps，无slots渲染
+- slider - ❌ 无useCommonSetup/slotProps，无slots渲染
+- stepper - ❌ 无useCommonSetup/slotProps，无slots渲染
+- switch - ❌ 无useCommonSetup/slotProps，无slots渲染
+- timepicker - ❌ 无useCommonSetup/slotProps，无slots渲染
+- upload - ❌ 无useCommonSetup/slotProps，无slots渲染
+
+### ❌ 缺少 slotProps 渲染 + types.ts 中Slots需要修复
+- password-input - ❌ 无slots声明，无useCommonSetup/slotProps，无slots渲染，PasswordInputSlots为空
+
+### ❌ 已有slotProps但模板缺少slots渲染
+- checkbox-group - ✅ slotProps，但模板缺少slots渲染
+- radio-group - ✅ slotProps，但模板缺少slots渲染
+
+### ⬜ 不适用（非标准表单组件）
+- group - 不适用
+- input-slot - 不适用
+- wrapper - 不适用

package/components/area/index.ts

@@ -0,0 +1,6 @@
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import HArea from './index.vue';
+
+export { HArea };
+export type HAreaInstance = ComponentExposed<typeof HArea>;
+export * from './types';

package/components/area/index.vue

@@ -0,0 +1,120 @@
+<template>
+    <VanField
+        v-if="!hide"
+        :name="field"
+        :disabled="globalDisabled || disabled"
+        :readonly="true"
+        :is-link="isLink"
+        :model-value="showText"
+        v-bind="$attrs"
+        @click="clickHandle"
+    >
+        <template #extra>
+            <VanPopup v-model:show="popupInfo.visible" teleport="body" round position="bottom" v-bind="popupProps" v-on="popupOn" @close="popupInfo.close">
+                <VanArea
+                    :model-value="checked"
+                    :area-list="finalOption"
+                    v-bind="areaProps" v-on="areaOn"
+                    @change="changeHandle" @confirm="confirmHandle" @cancel="cancelHandle"
+                >
+                    <template v-for="(item, slotName) of areaSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                        <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+                    </template>
+                </VanArea>
+            </VanPopup>
+        </template>
+        <template v-for="(item, slotName) of slots" :key="slotName" #[hyphenate(slotName)]="row">
+            <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+        </template>
+    </VanField>
+</template>
+
+<script lang="ts">
+import { getNode, hyphenate, usePlain } from '@xiaohaih/json-form-core';
+import { Area as VanArea, Field as VanField, Popup as VanPopup } from 'vant';
+import type { SlotsType } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
+import type { PickerOption } from '../picker/types';
+import { useCommonSetup } from '../use';
+import type { AreaSlots } from './types';
+import { areaEmitsPrivate as emits, areaPropsPrivate as props } from './types';
+
+/**
+ * @file 区域选择框
+ */
+export default defineComponent({
+    name: 'HArea',
+    components: { VanArea, VanField, VanPopup },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<AreaSlots>,
+    setup(props, ctx) {
+        const plain = usePlain(props);
+        const { slotProps } = useCommonSetup(props, ctx, plain);
+        /** 展示在页面上的值 */
+        const showText = computed(() => {
+            const value = plain.checked.value as string;
+            if (!value) return '';
+            const { format, showAllLevels, separator } = props;
+            const source = (props.areaProps?.areaList || plain.finalOption.value) as Record<string, any>;
+            if (format) return format({ source, value, showAllLevels, separator });
+            const result: string[] = [];
+            source.province_list && result.push(source.province_list[`${value.slice(0, 2)}0000`]);
+            value.length >= 4 && source.city_list && result.push(source.city_list[`${value.slice(0, 4)}00`]);
+            value.length >= 6 && source.county_list && result.push(source.county_list[value]);
+            return result.filter(Boolean).join(separator);
+        });
+        /** 点击事件 */
+        function clickHandle(ev: MouseEvent) {
+            if (plain.globalDisabled.value || props.disabled || plain.globalReadonly.value || props.readonly) return;
+            props.onRowClick ? props.onRowClick(popupInfo.value, ev) : popupInfo.value.open();
+        }
+        /**
+         * 更改事件
+         * @param {string} type 事件类型
+         * @param {string} value 日期值
+         */
+        function dateEventHandle(type: string, value: PickerOption) {
+            // @ts-expect-error 忽视 showToolbar 声明报错
+            (props.valueTrigger === type || props.areaProps?.showToolbar === false) && plain.change(value.selectedValues.slice(-1)[0]);
+            switch (type) {
+                case 'confirm':
+                case 'cancel':
+                {
+                    popupInfo.value.close();
+                    break;
+                }
+                default: break;
+            }
+        }
+
+        /** 弹窗显示状态 */
+        const popupInfo = ref({
+            visible: false,
+            open() {
+                popupInfo.value.visible = true;
+            },
+            close() {
+                popupInfo.value.visible = false;
+            },
+        });
+
+        return {
+            hyphenate,
+            getNode,
+            ...plain,
+            slotProps,
+            showText,
+            clickHandle,
+            changeHandle: dateEventHandle.bind(null, 'change'),
+            confirmHandle: dateEventHandle.bind(null, 'confirm'),
+            cancelHandle: dateEventHandle.bind(null, 'cancel'),
+            popupInfo,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/area/types.ts

@@ -0,0 +1,84 @@
+import type { emits2obj, PlainProps } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import type { Area as VanArea, Popup as VanPopup } from 'vant';
+import { Field as VanField } from 'vant';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import type { ComponentEmit, ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
+import type { PickerOption } from '../picker/types';
+import type { CommonProps, CommonSlots, CommonSlotsProps, ComponentType } from '../share';
+import { commonProps } from '../share';
+
+/** 组件传参 - 私有 */
+export function areaPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** 重写 option 属性, 增加支持的类型 */
+        options: { type: [Object, Array] as PropType<any> },
+        /** VanArea 组件的属性 */
+        areaProps: { type: Object as PropType<Partial<ComponentProps<typeof VanArea>>> },
+        /** VanArea 组件的事件 - 兼容 vue2 版本 */
+        areaOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanArea.emits>>>>>, default: () => ({}) },
+        /** VanArea 组件的插槽 */
+        areaSlots: { type: Object as PropType<{
+            /** 自定义整个顶部栏的内容 */
+            toolbar?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义标题内容 */
+            title?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义确认按钮内容 */
+            confirm?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义取消按钮内容 */
+            cancel?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义选项上方内容 */
+            columnsTop?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义选项下方内容 */
+            columnsBottom?: ComponentType<CommonSlotsProps<any, any>>;
+        }> },
+        /** 是否展示右侧箭头并开启点击反馈 - Field 字段, 调整默认值 */
+        isLink: { type: Boolean, default: true },
+        /** 点击事件, 当传递了此事件时, 会忽略内部打开弹窗操作 */
+        onRowClick: { type: Function as PropType<(option: { open: () => void; close: () => void }, ev: MouseEvent) => void> },
+        /** 显示文本的分隔符 @default / */
+        separator: { type: String, default: '/' },
+        /** 是否显示全路径 */
+        showAllLevels: { type: Boolean, default: true },
+        /** 对值进行格式化 - 显示在页面上的值 */
+        format: { type: Function as PropType<(option: {
+            source: Record<'province_list' | 'city_list' | 'county_list', Record<string, any>>;
+            value: string | undefined;
+            showAllLevels: boolean;
+            separator: string;
+        }) => any> },
+        /** 值触发方式 @default confirm */
+        valueTrigger: { type: String as PropType<'change' | 'confirm' | 'cancel'>, default: 'confirm' },
+        /** 弹窗组件的属性 */
+        popupProps: { type: Object as PropType<Partial<ComponentExposed<typeof VanPopup>>> },
+        /** 弹窗组件的事件 - 兼容 vue2 版本 */
+        popupOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanPopup.emits>>>>>, default: () => ({}) },
+    } as const;
+}
+/** 组件传参 - 私有 */
+export const areaPropsPrivate = areaPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const areaProps = {
+    ...VanField.props as unknown as {},
+    ...areaPropsPrivate,
+};
+export type AreaProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof areaPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function areaEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const areaEmitsPrivate = areaEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const areaEmits = {
+    ...VanField.emits,
+    ...areaEmitsPrivate,
+};
+
+export type AreaEmits<T> = ReturnType<typeof areaEmitsGeneric<T>>;
+
+export interface AreaSlots extends CommonSlots<any> {
+}

package/components/cascader/index.ts

@@ -0,0 +1,6 @@
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import HCascader from './index.vue';
+
+export { HCascader };
+export type HCascaderInstance = ComponentExposed<typeof HCascader>;
+export * from './types';

package/components/cascader/index.vue

@@ -0,0 +1,146 @@
+<template>
+    <VanField
+        v-if="!hide"
+        :name="field" :label="label"
+        :disabled="globalDisabled || disabled"
+        :readonly="true"
+        :placeholder="placeholder"
+        :model-value="lastCheckedValue" :is-link="isLink"
+        v-bind="$attrs"
+        @click="clickHandle"
+    >
+        <template #input>
+            <HInputSlot
+                :value="showText" :placeholder="placeholder"
+                :disabled="globalDisabled || disabled" :readonly="globalReadonly || readonly"
+                v-bind="$attrs"
+            />
+        </template>
+        <template #extra>
+            <VanPopup v-model:show="popupInfo.visible" teleport="body" round position="bottom" v-bind="popupProps" v-on="popupOn" @close="popupInfo.close">
+                <VanCascader
+                    :title="cascaderProps.title || label" :placeholder="cascaderProps.placeholder || placeholder"
+                    :model-value="lastCheckedValue" :options="finalOption"
+                    v-bind="cascaderProps" v-on="cascaderOn"
+                    @change="change" @finish="finish" @close="popupInfo.close"
+                >
+                    <template v-for="(item, slotName) of cascaderSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                        <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+                    </template>
+                </VanCascader>
+            </VanPopup>
+        </template>
+        <template v-for="(item, slotName) of slots" :key="slotName" #[hyphenate(slotName)]="row">
+            <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+        </template>
+    </VanField>
+</template>
+
+<script lang="ts">
+import { getNode, hyphenate, usePlain } from '@xiaohaih/json-form-core';
+import type { CascaderOption } from 'vant';
+import { Cascader as VanCascader, Field as VanField, Popup as VanPopup } from 'vant';
+import type { SlotsType } from 'vue';
+import { computed, defineComponent, ref, watch } from 'vue';
+import { pick } from '../../src/utils';
+import { HInputSlot } from '../input-slot/index';
+import { useCommonSetup, useTempChecked } from '../use';
+import { getChained } from '../utils';
+import type { CascaderSlots } from './types';
+import { cascaderEmitsPrivate as emits, cascaderPropsPrivate as props } from './types';
+
+interface Datum {
+    /** 当前选中项 */
+    value: string | number;
+    /** 选中项的所有值 */
+    selectedOptions: CascaderOption[];
+    /** 选中项下标 */
+    tabIndex: number;
+}
+
+/**
+ * @file 级联框
+ */
+export default defineComponent({
+    name: 'HCascader',
+    components: { VanCascader, VanField, VanPopup, HInputSlot },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<CascaderSlots>,
+    setup(props, ctx) {
+        const plain = usePlain(props);
+        /** 选中值的最后一位 */
+        const lastCheckedValue = computed(() => {
+            const val = plain.checked.value;
+            return (Array.isArray(val) ? val[val.length - 1] : val) as string;
+        });
+        /** 展示的文字 */
+        const showText = computed(() => {
+            const val = lastCheckedValue.value;
+            const options = plain.finalOption.value;
+            if (!val || !options.length) return '';
+            const { labelKey, valueKey, children } = fieldInfo.value;
+            const result = getChained(options, { [valueKey]: val }, children);
+            if (!result.length) return '';
+            return props.showAllLevels ? result.map((v) => v[labelKey]).join('/') : result[result.length - 1]![labelKey];
+        });
+        const { slotProps } = useCommonSetup(props, ctx, plain);
+        /** 级联下拉框的字段信息 */
+        const fieldInfo = computed(() => {
+            const fieldNames = props.cascaderProps?.fieldNames || {};
+            return {
+                labelKey: fieldNames.text || 'text',
+                valueKey: fieldNames.value || 'value',
+                children: fieldNames.children || 'children',
+            };
+        });
+
+        /** 点击事件 */
+        function clickHandle(ev: MouseEvent) {
+            if (plain.globalDisabled.value || props.disabled || plain.globalReadonly.value || props.readonly) return;
+            props.onRowClick ? props.onRowClick(popupInfo.value, ev) : popupInfo.value.open();
+        }
+        /** 级联选择值更改事件 */
+        function change(option: Datum) {
+            props.checkStrictly && setValue(option);
+        }
+        /** 级联选择完成事件 */
+        function finish(option: Datum) {
+            props.checkStrictly || setValue(option);
+        }
+        /** 设置文本框显示的值 */
+        function setValue(option: Datum) {
+            const { valueKey } = fieldInfo.value;
+            props.emitPath ? plain.change(option.selectedOptions.map((v) => v[valueKey])) : plain.change(option.value);
+        }
+        /** 弹窗显示状态 */
+        const popupInfo = ref({
+            visible: false,
+            open() {
+                popupInfo.value.visible = true;
+            },
+            close() {
+                popupInfo.value.visible = false;
+            },
+        });
+
+        return {
+            hyphenate,
+            getNode,
+            ...plain,
+            slotProps,
+            fieldInfo,
+            lastCheckedValue,
+            showText,
+            clickHandle,
+            change,
+            finish,
+            setValue,
+            popupInfo,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped></style>

package/components/cascader/types.ts

@@ -0,0 +1,75 @@
+import type { emits2obj, PlainProps } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import type { CascaderOption, Cascader as VanCascader, Popup as VanPopup } from 'vant';
+import { Field as VanField } from 'vant';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import { camelize } from 'vue';
+import type { ComponentEmit, ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
+import type { CommonProps, CommonSlots, CommonSlotsProps, ComponentType } from '../share';
+import { commonProps } from '../share';
+
+/** 组件传参 - 私有 */
+export function cascaderPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** 输入框左侧文本 */
+        label: { type: String },
+        /** 输入框的提示文字 */
+        placeholder: { type: String },
+        /** 是否展示右侧箭头并开启点击反馈 */
+        isLink: { type: Boolean, default: true },
+        /** 是否严格的遵守父子节点不互相关联(可选任意级) */
+        checkStrictly: { type: Boolean, default: undefined },
+        /** 是否显示全路径 */
+        showAllLevels: { type: Boolean, default: undefined },
+        /** 节点关联的情况下, 是否返回所有路径(即返回数组) */
+        emitPath: { type: Boolean, default: undefined },
+        /** 点击事件, 当传递了此事件时, 会忽略内部打开弹窗操作 */
+        onRowClick: { type: Function as PropType<(option: { open: () => void; close: () => void }, ev: MouseEvent) => void> },
+        /** VanCascader 组件的属性 */
+        cascaderProps: { type: Object as PropType<Partial<ComponentProps<typeof VanCascader>>>, default: () => ({}) },
+        /** VanCascader 组件的事件 - 兼容 vue2 版本 */
+        cascaderOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanCascader.emits>>>>>, default: () => ({}) },
+        /** VanCascader 组件的插槽 */
+        cascaderSlots: { type: Object as PropType<{
+            /** 自定义顶部标题 */
+            title?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义选项文字 */
+            option?: ComponentType<{ option: CascaderOption; selected: boolean } & CommonSlotsProps<any, any>>;
+            /** 自定义选项上方的内容 */
+            optionsTop?: ComponentType<{ tabIndex: number } & CommonSlotsProps<any, any>>;
+            /** 自定义选项下方的内容 */
+            optionsBottom?: ComponentType<{ tabIndex: number } & CommonSlotsProps<any, any>>;
+        }> },
+        /** 弹窗组件的属性 */
+        popupProps: { type: Object as PropType<Partial<ComponentExposed<typeof VanPopup>>> },
+        /** 弹窗组件的事件 - 兼容 vue2 版本 */
+        popupOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanPopup.emits>>>>>, default: () => ({}) },
+    } as const;
+}
+/** 组件传参 - 私有 */
+export const cascaderPropsPrivate = cascaderPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const cascaderProps = {
+    ...VanField.props as unknown as {},
+    ...cascaderPropsPrivate,
+};
+export type CascaderProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof cascaderPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function cascaderEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const cascaderEmitsPrivate = cascaderEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const cascaderEmits = {
+    ...VanField.emits,
+    ...cascaderEmitsPrivate,
+};
+
+export type CascaderEmits<T> = ReturnType<typeof cascaderEmitsGeneric<T>>;
+
+export interface CascaderSlots extends CommonSlots<any> {
+}

package/components/checkbox/index.ts

@@ -0,0 +1,6 @@
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import HCheckbox from './index.vue';
+
+export { HCheckbox };
+export type HCheckboxInstance = ComponentExposed<typeof HCheckbox>;
+export * from './types';

package/components/checkbox/index.vue

@@ -0,0 +1,59 @@
+<template>
+    <VanField
+        v-if="!hide"
+        :name="field" :label="label"
+        :disabled="globalDisabled || disabled"
+        :readonly="globalReadonly || readonly"
+        v-bind="$attrs"
+    >
+        <template #input>
+            <VanCheckbox
+                :name="field" :model-value="checked"
+                :disabled="globalDisabled || disabled || globalReadonly || readonly"
+                v-bind="checkboxProps" v-on="checkboxOn"
+                @update:model-value="change"
+            >
+                <template v-for="(item, slotName) of checkboxSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                    <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+                </template>
+            </VanCheckbox>
+        </template>
+    </VanField>
+</template>
+
+<script lang="ts">
+import { getNode, hyphenate, usePlain } from '@xiaohaih/json-form-core';
+import { Checkbox as VanCheckbox, Field as VanField } from 'vant';
+import type { SlotsType } from 'vue';
+import { computed, defineComponent } from 'vue';
+import { pick } from '../../src/utils';
+import { useCommonSetup, useTempChecked } from '../use';
+import type { CheckboxSlots } from './types';
+import { checkboxEmitsPrivate as emits, checkboxPropsPrivate as props } from './types';
+
+/**
+ * @file 多选框
+ */
+export default defineComponent({
+    name: 'HCheckbox',
+    components: { VanCheckbox, VanField },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<CheckboxSlots>,
+    setup(props, ctx) {
+        const plain = usePlain(props);
+        const { slotProps } = useCommonSetup(props, ctx, plain);
+
+        return {
+            hyphenate,
+            getNode,
+            ...plain,
+            slotProps,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/checkbox/types.ts

@@ -0,0 +1,54 @@
+import type { emits2obj, PlainProps } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import { Checkbox as VanCheckbox, Field as VanField } from 'vant';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import { camelize } from 'vue';
+import type { ComponentEmit, ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
+import type { CommonProps, CommonSlots, CommonSlotsProps, ComponentType } from '../share';
+import { commonProps } from '../share';
+
+/** 组件传参 - 私有 */
+export function checkboxPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** 输入框左侧文本 */
+        label: { type: String },
+        /** VanCheckbox 组件的属性 */
+        checkboxProps: { type: Object as PropType<Partial<ComponentProps<typeof VanCheckbox>>> },
+        /** VanCheckbox 组件的事件 - 兼容 vue2 版本 */
+        checkboxOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanCheckbox.emits>>>>>, default: () => ({}) },
+        /** VanCheckbox 组件的插槽 */
+        checkboxSlots: { type: Object as PropType<{
+            /** 自定义文本 */
+            default?: ComponentType<{ checked: boolean; disabled: boolean } & CommonSlotsProps<any, any>>;
+            /** 自定义图标 */
+            icon?: ComponentType<{ checked: boolean; disabled: boolean } & CommonSlotsProps<any, any>>;
+        }> },
+    } as const;
+}
+/** 组件传参 - 私有 */
+export const checkboxPropsPrivate = checkboxPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const checkboxProps = {
+    ...VanField.props as unknown as {},
+    ...checkboxPropsPrivate,
+};
+export type CheckboxProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof checkboxPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function checkboxEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const checkboxEmitsPrivate = checkboxEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const checkboxEmits = {
+    ...VanField.emits,
+    ...checkboxEmitsPrivate,
+};
+
+export type CheckboxEmits<T> = ReturnType<typeof checkboxEmitsGeneric<T>>;
+
+export interface CheckboxSlots extends CommonSlots<any> {
+}

package/components/checkbox-group/index.ts

@@ -0,0 +1,6 @@
+import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
+import HCheckboxGroup from './index.vue';
+
+export { HCheckboxGroup };
+export type HCheckboxGroupInstance = ComponentExposed<typeof HCheckboxGroup>;
+export * from './types';