@xiaohaih/json-form-vant 0.0.1

package/components/date-time-picker-group/index.vue

@@ -0,0 +1,158 @@
+<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">
+                <VanPickerGroup
+                    v-bind="pickerGroupProps" v-on="pickerGroupOn"
+                    @confirm="pickerGroupHandle('confirm', $event)" @cancel="pickerGroupHandle('cancel', $event)"
+                >
+                    <VanDatePicker
+                        ref="datePickerRef"
+                        :model-value="checkedArr[0]"
+                        v-bind="datePickerProps" v-on="datePickerOn"
+                        @change="changeHandle($event, 0)"
+                    >
+                        <template v-for="(item, slotName) of datePickerSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                            <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+                        </template>
+                    </VanDatePicker>
+                    <VanTimePicker
+                        ref="timePickerRef"
+                        :model-value="checkedArr[1]"
+                        v-bind="timePickerProps" v-on="timePickerOn"
+                        @change="changeHandle($event, 1)"
+                    >
+                        <template v-for="(item, slotName) of timePickerSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                            <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+                        </template>
+                    </VanTimePicker>
+                    <template v-for="(item, slotName) of pickerGroupSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                        <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+                    </template>
+                </VanPickerGroup>
+            </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, isArray, usePlain } from '@xiaohaih/json-form-core';
+import type { DatePickerInstance, TimePickerInstance } from 'vant';
+import { DatePicker as VanDatePicker, Field as VanField, PickerGroup as VanPickerGroup, Popup as VanPopup, TimePicker as VanTimePicker } from 'vant';
+import type { SlotsType, VNode } from 'vue';
+import { computed, defineComponent, Fragment, markRaw, nextTick, ref, watch } from 'vue';
+import type { PickerOption } from '../picker/types';
+import { useCommonSetup } from '../use';
+import type { DateTimePickerGroupSlots } from './types';
+import { dateTimePickerGroupEmitsPrivate as emits, dateTimePickerGroupPropsPrivate as props } from './types';
+
+/**
+ * @file 日期时间组件
+ */
+export default defineComponent({
+    name: 'HDateTimePickerGroup',
+    components: { VanPickerGroup, VanField, VanPopup, VanDatePicker, VanTimePicker },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<DateTimePickerGroupSlots>,
+    setup(props, ctx) {
+        const plain = usePlain(props);
+        const { slotProps } = useCommonSetup(props, ctx, plain);
+        /** 展示在页面上的值 */
+        const showText = ref('');
+        /** 给日期组件的值 */
+        const checkedArr = ref<any[]>([]);
+        const datePickerRef = ref<DatePickerInstance>();
+        const timePickerRef = ref<TimePickerInstance>();
+        let tempValue: any;
+        // 监听外部值的改变, 如果改变且与临时值不一致时
+        // 则更新当前值, 并重置临时值
+        watch(
+            plain.checked,
+            (val) => {
+                if (val === tempValue) return tempValue = null;
+                tempValue = null;
+                checkedArr.value = val ? props.valueUnformat(val) : [];
+                showText.value = checkedArr.value.length ? props.format(checkedArr.value) : '';
+            },
+            { immediate: true },
+        );
+
+        /** 点击事件 */
+        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 changeHandle(value: PickerOption, idx: number) {
+            checkedArr.value[idx] = value.selectedValues;
+            pickerGroupHandle('change');
+        }
+        /**
+         * 日期更改事件
+         * @param {string} type 事件类型
+         * @param {PickerOption[]} [options] 确认事件会传递该选项
+         */
+        function pickerGroupHandle(type: string, options?: PickerOption[]) {
+            if (type !== 'change' && options) checkedArr.value = options.map((o) => o.selectedValues);
+            if ((props.valueTrigger === type || props.pickerGroupProps?.showToolbar === false) && checkedArr.value.length >= 2) {
+                plain.change(props.valueFormat(checkedArr.value));
+                showText.value = props.format(checkedArr.value);
+                tempValue = plain.checked.value;
+                nextTick(() => tempValue = null);
+            }
+            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,
+            checkedArr,
+            datePickerRef,
+            timePickerRef,
+            clickHandle,
+            changeHandle,
+            pickerGroupHandle,
+            popupInfo,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/date-time-picker-group/types.ts

@@ -0,0 +1,115 @@
+import type { emits2obj, PlainProps } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import type { DatePicker as VanDatePicker, Popup as VanPopup, TimePicker as VanTimePicker } from 'vant';
+import { Field as VanField, PickerGroup as VanPickerGroup } 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 dateTimePickerGroupPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** VanPickerGroup 组件的属性 */
+        pickerGroupProps: { type: Object as PropType<Partial<ComponentProps<typeof VanPickerGroup>>> },
+        /** VanPickerGroup 组件的事件 - 兼容 vue2 版本 */
+        pickerGroupOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanPickerGroup.emits>>>>>, default: () => ({}) },
+        /** VanPickerGroup 组件的插槽 */
+        pickerGroupSlots: { type: Object as PropType<{
+            // /** 默认渲染的内容 */
+            // default: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义整个顶部栏的内容 */
+            toolbar?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义标题内容 */
+            title?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义确认按钮内容 */
+            confirm?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义取消按钮内容 */
+            cancel?: ComponentType<CommonSlotsProps<any, any>>;
+        }> },
+        /** 是否展示右侧箭头并开启点击反馈 - Field 字段, 调整默认值 */
+        isLink: { type: Boolean, default: true },
+        /** 点击事件, 当传递了此事件时, 会忽略内部打开弹窗操作 */
+        onRowClick: { type: Function as PropType<(option: { open: () => void; close: () => void }, ev: MouseEvent) => void> },
+        /** 对值进行格式化 - 显示在页面上的值 */
+        format: { type: Function as PropType<(option: any) => any>, default: valueFormatDefault },
+        /** 对值进行格式化 - 提交值 */
+        valueFormat: { type: Function as PropType<(option: PickerOption | any) => any>, default: valueFormatDefault },
+        /** 取消值的格式化 - 给 VanPickerGroup 的值 */
+        valueUnformat: { type: Function as PropType<(option: any) => string[]>, default: valueUnformatDefault },
+        /** 值触发方式 @default confirm */
+        valueTrigger: { type: String as PropType<'change' | 'confirm' | 'cancel'>, default: 'confirm' },
+        /** VanDatePicker 组件的属性 */
+        datePickerProps: { type: Object as PropType<Partial<ComponentProps<typeof VanDatePicker>>> },
+        /** VanDatePicker 组件的事件 - 兼容 vue2 版本 */
+        datePickerOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanDatePicker.emits>>>>>, default: () => ({}) },
+        /** VanDatePicker 组件的插槽 */
+        datePickerSlots: { type: Object as PropType<{
+            /** 自定义选项内容 */
+            option?: ComponentType<{ option: PickerOption; index: number } & CommonSlotsProps<any, any>>;
+            /** 自定义选项上方内容 */
+            columnsTop?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义选项下方内容 */
+            columnsBottom?: ComponentType<CommonSlotsProps<any, any>>;
+        }> },
+        /** VanTimePicker 组件的属性 */
+        timePickerProps: { type: Object as PropType<Partial<ComponentProps<typeof VanTimePicker>>> },
+        /** VanTimePicker 组件的事件 - 兼容 vue2 版本 */
+        timePickerOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanTimePicker.emits>>>>>, default: () => ({}) },
+        /** VanTimePicker 组件的插槽 */
+        timePickerSlots: { type: Object as PropType<{
+            /** 自定义选项内容 */
+            option?: ComponentType<{ option: PickerOption; index: number } & CommonSlotsProps<any, any>>;
+            /** 自定义选项上方内容 */
+            columnsTop?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义选项下方内容 */
+            columnsBottom?: ComponentType<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 dateTimePickerGroupPropsPrivate = dateTimePickerGroupPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const dateTimePickerGroupProps = {
+    ...VanField.props as unknown as {},
+    ...dateTimePickerGroupPropsPrivate,
+};
+export type DateTimePickerGroupProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof dateTimePickerGroupPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function dateTimePickerGroupEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const dateTimePickerGroupEmitsPrivate = dateTimePickerGroupEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const dateTimePickerGroupEmits = {
+    ...VanField.emits,
+    ...dateTimePickerGroupEmitsPrivate,
+};
+
+export type DateTimePickerGroupEmits<T> = ReturnType<typeof dateTimePickerGroupEmitsGeneric<T>>;
+
+export interface DateTimePickerGroupSlots extends CommonSlots<any> {
+}
+
+/** 默认的合并函数 */
+function valueFormatDefault(option: any[]) {
+    const result: string[] = [];
+    option[0] && result.push(option[0].join('-'));
+    option[1] && result.push(option[1].join(':'));
+    return result.join(' ');
+}
+/** 默认的取消格式化函数 */
+function valueUnformatDefault(o: string) {
+    if (!o) return [];
+    const [date, time] = o.split(' ');
+    return [date?.split('-'), time?.split(':')].filter(Boolean);
+}

package/components/datetime-picker/index.ts

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

package/components/datetime-picker/index.vue

@@ -0,0 +1,128 @@
+<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">
+                <VanDatetimePicker
+                    :model-value="checked"
+                    v-bind="datetimePickerProps" v-on="datetimePickerOn"
+                    @change="changeHandle" @confirm="confirmHandle" @cancel="cancelHandle"
+                >
+                    <template v-for="(item, slotName) of datetimePickerSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                        <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+                    </template>
+                </VanDatetimePicker>
+            </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 { DatetimePicker as VanDatetimePicker, Field as VanField, Popup as VanPopup } from 'vant';
+import type { SlotsType } from 'vue';
+import { computed, defineComponent, nextTick, ref, watch } from 'vue';
+import { useCommonSetup } from '../use';
+import type { DatetimePickerSlots } from './types';
+import { datetimePickerEmitsPrivate as emits, datetimePickerPropsPrivate as props } from './types';
+
+/**
+ * @file 日期时间选择框 - vant@3.x版本
+ */
+export default defineComponent({
+    name: 'HDatetimePicker',
+    components: { VanDatetimePicker, VanField, VanPopup },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<DatetimePickerSlots>,
+    setup(props, ctx) {
+        const plain = usePlain(props);
+        const { slotProps } = useCommonSetup(props, ctx, plain);
+        /** 展示在页面上的值 */
+        const showText = ref<string | number>();
+        const datetimeValue = ref<Date>();
+        let tempValue: any;
+        // 监听外部值的改变, 如果改变且与临时值不一致时
+        // 则更新当前值, 并重置临时值
+        watch(
+            plain.checked,
+            (val) => {
+                if (val === tempValue) return tempValue = null;
+                tempValue = null;
+                datetimeValue.value = val
+                    ? props.valueUnformat ? props.valueUnformat(val) : val
+                    : undefined;
+                showText.value = datetimeValue.value ? props.format(datetimeValue.value) : '';
+            },
+            { immediate: true },
+        );
+
+        /** 点击事件 */
+        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: Date) {
+            if (props.valueTrigger === type || props.datetimePickerProps?.showToolbar === false) {
+                plain.change(props.valueFormat ? props.valueFormat(value) : value);
+                showText.value = props.format(value);
+                tempValue = plain.checked.value;
+                nextTick(() => tempValue = null);
+            }
+            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/datetime-picker/types.ts

@@ -0,0 +1,78 @@
+import type { emits2obj, PlainProps } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import type { Popup as VanPopup } from 'vant';
+import { DatetimePicker as VanDatetimePicker, Field as VanField } from 'vant';
+import type { ExtractPublicPropTypes, PropType } 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 datetimePickerPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** VanDatetimePicker 组件的属性 */
+        datetimePickerProps: { type: Object as PropType<Partial<ComponentProps<typeof VanDatetimePicker>>> },
+        /** VanDatetimePicker 组件的事件 - 兼容 vue2 版本 */
+        datetimePickerOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanDatetimePicker.emits>>>>>, default: () => ({}) },
+        /** VanDatetimePicker 组件的插槽 */
+        datetimePickerSlots: { type: Object as PropType<{
+            /** 自定义整个顶部栏的内容 */
+            default?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义标题内容 */
+            title?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义确认按钮内容 */
+            confirm?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义取消按钮内容 */
+            cancel?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义选项内容 */
+            option?: ComponentType<{ option: string | Record<string, any> } & 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> },
+        /** 对值进行格式化 - 显示在页面上的值 */
+        format: { type: Function as PropType<(value: Date) => string | number>, required: true },
+        /** 对值进行格式化 - 提交值 */
+        valueFormat: { type: Function as PropType<(value: Date) => any> },
+        /** 取消值的格式化 - 给 VanDatetimePicker 的值 */
+        valueUnformat: { type: Function as PropType<(value: any) => Date> },
+        /** 值触发方式 @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 datetimePickerPropsPrivate = datetimePickerPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const datetimePickerProps = {
+    ...VanField.props as unknown as {},
+    ...datetimePickerPropsPrivate,
+};
+export type DatetimePickerProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof datetimePickerPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function datetimePickerEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const datetimePickerEmitsPrivate = datetimePickerEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const datetimePickerEmits = {
+    ...VanField.emits,
+    ...datetimePickerEmitsPrivate,
+};
+
+export type DatetimePickerEmits<T> = ReturnType<typeof datetimePickerEmitsGeneric<T>>;
+
+export interface DatetimePickerSlots extends CommonSlots<any> {
+}

package/components/dynamic-group/index.ts

@@ -0,0 +1,10 @@
+import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
+import { registerComponent } from '../group/index';
+import HDynamicGroup from './index.vue';
+// 为防止循环依赖(dynamic-group -> group -> assist -> dynamic-group),
+// 异步注册组件
+registerComponent('dynamic-group', HDynamicGroup);
+
+export { HDynamicGroup };
+export type HDynamicGroupInstance = ComponentExposed<typeof HDynamicGroup>;
+export * from './types';

package/components/dynamic-group/index.vue

@@ -0,0 +1,140 @@
+<template>
+    <VirtualGroup ref="virtualGroupRef" :tag="tag">
+        <template v-if="slots?.prepend || ($slots as DynamicGroupSlots).prepend">
+            <component :is="getNode(slots?.prepend || ($slots as DynamicGroupSlots).prepend)" :query="query" :checked="plain.checked.value" :plain="plain" />
+        </template>
+        <template v-for="(opt, idx) of finalConfig" :key="opt.uniqueValue">
+            <div v-bind="contentProps">
+                <component :is="itemSlots.prepend" :query="query" :checked="plain.checked.value" :index="idx" :plain="plain" />
+                <template v-for="(item) of opt.options" :key="`${field}.${idx}.${item.field || item[REWRITE_FIELD_KEY]}`">
+                    <component :is="getComponent2(item.t)!" v-if="item" v-bind="item" :unique-value="opt.uniqueValue" :field="`${field}.${idx}.${item.field || item[REWRITE_FIELD_KEY]}`" :query="query" :parent-query="plain.checked.value[idx]" />
+                </template>
+                <component :is="itemSlots.append" :query="query" :checked="plain.checked.value" :index="idx" :plain="plain" />
+            </div>
+        </template>
+        <template v-if="slots?.append || ($slots as DynamicGroupSlots).append">
+            <component :is="getNode(slots?.append || ($slots as DynamicGroupSlots).append)" :query="query" :checked="plain.checked.value" :plain="plain" />
+        </template>
+    </VirtualGroup>
+</template>
+
+<script lang="tsx">
+import type { PlainProps } from '@xiaohaih/json-form-core';
+import { defineCommonMethod, get, getNode, getProvideValue, hyphenate, isPlainObject, set, usePlain } from '@xiaohaih/json-form-core';
+import type { ExtractPublicPropTypes, Ref, SlotsType } from 'vue';
+import { computed, defineComponent, inject, markRaw, ref, watch } from 'vue';
+import { pick } from '../../src/utils';
+import { getComponent, HGroup } from '../group/index';
+import VirtualGroup from '../group/virtual-group.vue';
+import type { DynamicGroupSlots } from './types';
+import { dynamicGroupEmitsPrivate as emits, dynamicGroupPropsPrivate as props } from './types';
+
+type Option = Omit<ExtractPublicPropTypes<PlainProps<Record<string, any>, Record<string, any>>>, 'query'> & { t: string; [REWRITE_FIELD_KEY]: string };
+
+let globalId = 0;
+/** 当 field 不存在, 但 fields 存在时, 合并 fields 到对象上的 key */
+const REWRITE_FIELD_KEY = '__field__' as const;
+
+/**
+ * @file 自定义组件 - 动态删减组件(对应动态表单)
+ */
+export default defineComponent({
+    name: 'HDynamicGroup',
+    components: {
+        VirtualGroup,
+    },
+    props,
+    emits,
+    slots: Object as SlotsType<DynamicGroupSlots>,
+    setup(props, ctx) {
+        const virtualGroupRef = ref<Record<string, any> | undefined>();
+        const tagRef = computed(() => virtualGroupRef.value?.tagRef);
+        const plain = usePlain(props);
+        const checked = plain.checked as Ref<Record<string, any>[] | undefined>;
+
+        // /** watch 版本的配置项, watch 自带旧值记录, 方便做优化 */
+        // const finalConfig = ref<{ uniqueValue: string | number; options: Option[] }[]>([]);
+        // watch(
+        //     [() => checked.value && [...checked.value], () => props.config],
+        //     ([value, config], oldVal) => {
+        //         if (!value?.length) return finalConfig.value = [];
+        //         const { uniqueKey } = props;
+        //         const isFunc = typeof config === 'function';
+        //         const arr = !isFunc && coverObjOption2Arr<Option[]>(config);
+        //         finalConfig.value = value.map((o, i) => ({
+        //             uniqueValue: uniqueKey ? o[uniqueKey] : getId(o, oldVal?.[0], i),
+        //             options: isFunc ? coverObjOption2Arr<Option[]>(config({ item: o, index: i, query: props.query })) : arr as Option[],
+        //         }));
+        //     },
+        //     { immediate: true },
+        // );
+        // /**
+        //  * 获取唯一 id, 如果与旧引用相同, 则复用唯一 id(配合 finalConfig - watch 版本使用)
+        //  * (为动态新增的表单项做的优化, 不然可以用下方的计算属性(finalConfig))
+        //  */
+        // function getId(val: Record<string, any>, oldVal: Record<string, any>[] | undefined, idx: number) {
+        //     return oldVal?.[idx] === val ? finalConfig.value[idx].uniqueValue : ++globalId;
+        // }
+        /** 由于计算属性不似 watch 有上条数据, 因为手动记录 */
+        let configSnapshot = {
+            /** 记录每行配置项的唯一值集合 */
+            configUniqueValue: [] as any[],
+            /** 记录每行数据的值集合 */
+            checkedValue: [] as any[],
+        };
+        /** 计算属性版本的 config 配置项(防止生成的配置项中用了响应式变量, 不在计算属性中生成无法捕捉到) */
+        const finalConfig = computed(() => {
+            const { config } = props;
+            if (!config) return [];
+            const value = checked.value;
+            if (!value?.length) return [];
+            const isFunc = typeof config === 'function';
+            const arr = !isFunc && coverObjOption2Arr<Option[]>(config);
+            const { uniqueKey } = props;
+            const result = value.map((o, i) => ({ uniqueValue: uniqueKey ? o[uniqueKey] : getId(o, i), options: isFunc ? coverObjOption2Arr<Option[]>(config({ item: o, index: i, checked: value, query: props.query, plain })) : arr as Option[] }));
+            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+            configSnapshot.configUniqueValue = result.map((r) => r.uniqueValue);
+            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+            configSnapshot.checkedValue = [...value];
+            return result;
+        });
+        /**
+         * 获取唯一 id, 如果与旧引用相同, 则复用唯一 id(配合 finalConfig - computed 版本使用)
+         * (为动态新增的表单项做的优化, 不然可以用下方的计算属性(finalConfig))
+         */
+        function getId(val: Record<string, any>, idx: number) {
+            return configSnapshot.checkedValue[idx] === val ? configSnapshot.configUniqueValue[idx] : ++globalId;
+        }
+        /** 将对象形式的配置项转为数组 */
+        function coverObjOption2Arr<T>(opt: any): T {
+            if (isPlainObject(opt)) {
+                const r: any[] = [];
+                Object.entries(opt).forEach(([key, value]) => {
+                    value.field = key;
+                    r.push(value);
+                });
+                return r as unknown as T;
+            }
+            opt.forEach((o: any) => !o.field && o.fields && (o[REWRITE_FIELD_KEY] = o.fields.join(',')));
+            return opt as unknown as T;
+        }
+
+        function getComponent2(name: string) {
+            return name === 'dynamic-group' ? 'HDynamicGroup' : name === 'group' ? HGroup : getComponent(name);
+        }
+
+        return {
+            hyphenate,
+            getNode,
+            REWRITE_FIELD_KEY,
+            virtualGroupRef,
+            tagRef,
+            plain,
+            finalConfig,
+            getComponent2,
+        };
+    },
+});
+</script>
+
+<style lang="css" scoped></style>