@xiaohaih/json-form-vant 0.0.1

package/components/dynamic-group/types.ts

@@ -0,0 +1,68 @@
+import type { CamelCase, Obj2Props, PlainProps, usePlain } from '@xiaohaih/json-form-core';
+import { plainProps } from '@xiaohaih/json-form-core';
+import type { Component, ExtractPublicPropTypes, PropType } from 'vue';
+import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
+import type { groupPropsGeneric, GroupSlots } from '../group/index';
+import { groupProps } from '../group/index';
+import type { ComponentType } from '../share';
+
+/** 组件传参 - 私有 */
+export function dynamicGroupPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** 当前组件类型(防止被继承, 主动声明) */
+        t: { type: String },
+        /** 渲染的标签 */
+        tag: { type: [Object, String, Array, Function] as PropType<any>, default: 'div' },
+        /** 渲染的子条件 */
+        config: { type: [Object, Array, Function] as PropType<any> },
+        /**
+         * 如果是组件是存在于数组中的, 需要传递一个唯一键, 读取当前对象中的某个值
+         * 防止依赖本数组其它下标中的值时, 如果前一项被删除, 导致依赖误触发
+         * 也是作为循环时唯一 key
+         *
+         * @example
+         * ``` ts
+         * // 当表单项根据 query.users 动态生成时, 想保证某些情况下依赖不会产生错误
+         * // 可传递 uniqueKey: 'id', 此时依赖判断会以条件项的 user[].id 的值做唯一值判断
+         * const query = { users: [{ id: '1', name: '', value: '' }, { id: '2', name: '', value: '' }, ...] }
+         * ```
+         */
+        uniqueKey: { type: String },
+        /** 传递给每行表单项 DOM 节点的属性 */
+        contentProps: { type: Object as PropType<Partial<Record<'class' | 'style', string | Record<string, any> | any[]>>> },
+        /** 传递给组件的插槽 - 重写声明 */
+        slots: { type: Object as PropType<DynamicGroupSlots<Query, OptionQuery>> },
+        /** 传递给动态渲染组件的插槽 */
+        itemSlots: { type: Object as PropType<{
+            /** 在动态表单项前渲染 */
+            prepend?: ComponentType<{ query: Query; checked: any[]; index: number; plain: ReturnType<typeof usePlain> }>;
+            /** 在动态表单项后渲染 */
+            append?: ComponentType<{ query: Query; checked: any[]; index: number; plain: ReturnType<typeof usePlain> }>;
+        }>, default: () => ({}) },
+    } as const;
+}
+/** 组件传参 - 私有 */
+export const dynamicGroupPropsPrivate = dynamicGroupPropsGeneric();
+/** 组件传参 - 外部调用 */
+
+export const dynamicGroupProps = dynamicGroupPropsPrivate;
+export type DynamicGroupProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof dynamicGroupPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function dynamicGroupEmitsGeneric<T>() {
+    return {
+    };
+}
+/** 组件事件 - 私有 */
+export const dynamicGroupEmitsPrivate = dynamicGroupEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const dynamicGroupEmits = dynamicGroupEmitsPrivate;
+export type DynamicGroupEmits<T> = ReturnType<typeof dynamicGroupEmitsGeneric<T>>;
+
+export interface DynamicGroupSlots<Query extends Record<string, any> = any, OptionQuery extends Record<string, any> = any> {
+    /** 在表单项前渲染 */
+    prepend?: ComponentType<{ query: Query; checked: any[]; plain: ReturnType<typeof usePlain> }>;
+    /** 在表单项后渲染 */
+    append?: ComponentType<{ query: Query; checked: any[]; plain: ReturnType<typeof usePlain> }>;
+}

package/components/group/assist.ts

@@ -0,0 +1,99 @@
+import { markRaw } from 'vue';
+import {
+    HArea,
+    HCascader,
+    HCheckbox,
+    HCheckboxGroup,
+    HCustomRender,
+    HDatePicker,
+    HDatetimePicker,
+    HDateTimePickerGroup,
+    HInput,
+    HNumberKeyboard,
+    HPasswordInput,
+    HPicker,
+    HRadio,
+    HRadioGroup,
+    HRate,
+    HSignature,
+    HSlider,
+    HStepper,
+    HSwitch,
+    HTimePicker,
+    HTreeSelect,
+    HUpload,
+} from '../component-definition/components';
+
+/* eslint-disable ts/no-unnecessary-type-assertion */
+const compMap = {
+    'area': markRaw(HArea) as typeof HArea,
+    'cascader': markRaw(HCascader) as typeof HCascader,
+    'checkbox': markRaw(HCheckbox) as typeof HCheckbox,
+    'checkbox-group': markRaw(HCheckboxGroup) as typeof HCheckboxGroup,
+    'custom-render': markRaw(HCustomRender) as typeof HCustomRender,
+    'datepicker': markRaw(HDatePicker) as typeof HDatePicker,
+    'date-picker': markRaw(HDatePicker) as typeof HDatePicker,
+    'date-time-picker-group': markRaw(HDateTimePickerGroup) as typeof HDateTimePickerGroup,
+    'datetime-picker': markRaw(HDatetimePicker) as typeof HDatetimePicker,
+    'input': markRaw(HInput) as typeof HInput,
+    'number-keyboard': markRaw(HNumberKeyboard) as typeof HNumberKeyboard,
+    'password-input': markRaw(HPasswordInput) as typeof HPasswordInput,
+    'picker': markRaw(HPicker) as typeof HPicker,
+    'select': markRaw(HPicker) as typeof HPicker,
+    'radio': markRaw(HRadio) as typeof HRadio,
+    'radio-group': markRaw(HRadioGroup) as typeof HRadioGroup,
+    'rate': markRaw(HRate) as typeof HRate,
+    'signature': markRaw(HSignature) as typeof HSignature,
+    'slider': markRaw(HSlider) as typeof HSlider,
+    'stepper': markRaw(HStepper) as typeof HStepper,
+    'switch': markRaw(HSwitch) as typeof HSwitch,
+    'time-picker': markRaw(HTimePicker) as typeof HTimePicker,
+    'timepicker': markRaw(HTimePicker) as typeof HTimePicker,
+    'tree-select': markRaw(HTreeSelect) as typeof HTreeSelect,
+    'upload': markRaw(HUpload) as typeof HUpload,
+};
+/* eslint-enable ts/no-unnecessary-type-assertion */
+const userCompMap: Record<string, any> = {};
+
+/** 默认定义组件的类型 */
+export type ComponentTypeDef = (typeof compMap)[keyof typeof compMap];
+
+/**
+ * 注册自定义组件
+ * @param {string} name 类型
+ * @param {} comp 可渲染的组件
+ */
+export function registerComponent(name: string, comp: any) {
+    userCompMap[name] = markRaw(comp);
+}
+
+/**
+ * 删除自定义组件
+ * @param {string} name 定义的类型
+ */
+export function unregisterComponent(name: string) {
+    delete userCompMap[name];
+}
+
+/**
+ * 获取指定组件
+ * 根据组件类型名称获取对应的组件实例，优先从用户自定义组件中查找
+ *
+ * @param {string} name - 组件类型名称
+ * @returns {ComponentTypeDef | null} - 返回指定的组件
+ */
+export function getComponent(name: string): ComponentTypeDef | null {
+    return userCompMap[name] || compMap[name as keyof typeof compMap] || (console.warn('未找到该组件类型: ', name), null);
+}
+
+/**
+ * 获取指定类型/所有组件
+ *
+ * @param {string} [type] 内置组件(builtIn)
+ *
+ * @returns {Record<string, ComponentTypeDef>} - 返回指定的组件或所有组件的映射表
+ */
+export function getAllComponent(type?: 'builtIn' | 'user'): Record<string, ComponentTypeDef> {
+    if (!type) return { ...compMap, ...userCompMap };
+    else return type === 'user' ? { ...userCompMap } : { ...compMap };
+}

package/components/group/index.ts

@@ -0,0 +1,7 @@
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import HGroup from './index.vue';
+
+export { HGroup };
+export type HGroupInstance = ComponentExposed<typeof HGroup>;
+export * from './assist';
+export * from './types';

package/components/group/index.vue

@@ -0,0 +1,117 @@
+<template>
+    <!-- eslint-disable-next-line vue/no-unused-refs -->
+    <VirtualGroup ref="virtualGroupRef" v-bind="$attrs" :tag="virtualTag" :slots="virtualSlots || tagSlots" :query="query" :wrapper="wrapper">
+        <template v-if="slots?.prepend || ($slots as GroupSlots).prepend">
+            <component :is="getNode(slots?.prepend || ($slots as GroupSlots).prepend)" :query="query" :wrapper="wrapper" />
+        </template>
+        <template v-if="slots?.default">
+            <component :is="slots.default" :config="finalConfig" :query="query" :wrapper="wrapper" />
+        </template>
+        <slot v-else-if="$slots.default" :config="finalConfig" :query="query" />
+        <template v-else>
+            <template v-for="(item, key) of finalConfig" :key="item.as || item.field || item[REWRITE_FIELD_KEY] || key">
+                <component :is="getComponent2(item.t)!" v-if="item" v-bind="item" :field="item.as || item.field || item[REWRITE_FIELD_KEY] || key" :query="query" />
+            </template>
+        </template>
+        <template v-if="slots?.append || ($slots as GroupSlots).append">
+            <component :is="getNode(slots?.append || ($slots as GroupSlots).append)" :query="query" :wrapper="wrapper" />
+        </template>
+    </VirtualGroup>
+</template>
+
+<script lang="tsx">
+import { get, getNode, getProvideValue, hasOwn, hyphenate, isPlainObject, useEmitter, usePlain } from '@xiaohaih/json-form-core';
+import { CellGroup as VanCellGroup } from 'vant';
+import type { FunctionalComponent, SlotsType } from 'vue';
+import { computed, defineComponent, markRaw, ref, watch } from 'vue';
+import { pick } from '../../src/utils';
+import { getComponent } from './assist';
+import type { GroupSlots } from './types';
+import { groupEmitsPrivate as emits, groupPropsPrivate as props } from './types';
+import VirtualGroup from './virtual-group.vue';
+
+/** 当 field 不存在, 但 fields 存在时, 合并 fields 到对象上的 key */
+const REWRITE_FIELD_KEY = '__field__' as const;
+/** 特殊类型可以直接复用组件的 */
+const specialComponents: Record<string, {
+    /** 重渲染的组件 */
+    tag: any;
+    /** 该组件所拥有的插槽(默认插槽不用定义) */
+    slots?: (slots: Record<string, any> | undefined) => Record<string, any> | undefined;
+}> = {
+    'cell-group': {
+        tag: markRaw(VanCellGroup),
+        slots: (slots) => slots?.title ? { title: slots.title } : undefined,
+    },
+};
+
+/**
+ * @file 自定义组件 - 支持多列渲染
+ */
+export default defineComponent({
+    name: 'HGroup',
+    components: {
+        VirtualGroup,
+    },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<GroupSlots>,
+    setup(props, ctx) {
+        const virtualGroupRef = ref<Record<string, any> | undefined>();
+        const virtualTag = computed(() => {
+            const { tag, t } = props;
+            return specialComponents[t!]?.tag || tag;
+        });
+        const virtualSlots = computed(() => {
+            const { t, slots } = props;
+            return specialComponents[t!]?.slots?.(slots);
+        });
+        const tagRef = computed(() => virtualGroupRef.value?.tagRef);
+        /** 容器注入值 */
+        const wrapper = getProvideValue();
+        const finalConfig = computed(() => {
+            const { config } = props;
+            // 如果函数且提供了 formRef 时, formRef 获取失败时不渲染
+            // 防止重复渲染一次导致 getOptions 重复请求
+            if (typeof config === 'function' && props.getFormRef && !props.getFormRef?.()) return [];
+            return typeof config === 'function' ? coverObjOption2Arr<any[]>(config({ query: props.query, wrapper, formRef: props.getFormRef?.() })) : coverObjOption2Arr<any[]>(config);
+        });
+        /** 将对象形式的配置项转为数组 */
+        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;
+        }
+        /** 对 group 组件特殊处理 */
+        function getComponent2(name: string) {
+            return name === 'group' || specialComponents[name] ? 'HGroup' : getComponent(name);
+        }
+
+        const emitter = useEmitter(wrapper);
+        props.hooks?.created?.({ props, wrapper, ...emitter });
+
+        return {
+            hyphenate,
+            getNode,
+            REWRITE_FIELD_KEY,
+            virtualGroupRef,
+            virtualTag,
+            virtualSlots,
+            tagRef,
+            wrapper,
+            finalConfig,
+            getComponent2,
+        };
+    },
+});
+</script>
+
+<style lang="css" scoped></style>

package/components/group/types.ts

@@ -0,0 +1,57 @@
+import type { EventsWithoutInstance, getProvideValue } from '@xiaohaih/json-form-core';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import type { ComponentType } from '../share';
+
+export interface GroupHookOption {
+    /** 组件创建前触发的钩子, 可在内部监听生命周期, 获取实例, 以及操作该组件内的各种属性 */
+    created?: (options: { props: ExtractPublicPropTypes<ReturnType<typeof groupPropsGeneric>>; wrapper: ReturnType<typeof getProvideValue> } & EventsWithoutInstance) => void;
+}
+
+/** 组件传参 */
+export function groupPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...{} as unknown as Record<'class' | 'style', { type: PropType<string | Record<string, any> | any[]> }>,
+        /** 当前组件类型(防止被继承, 主动声明) */
+        t: { type: String },
+        /** 提交字段 */
+        field: { type: String },
+        /** 当前条件对象 */
+        query: { type: Object as PropType<Query>, required: true },
+        /** 渲染的标签 */
+        tag: { type: [Object, String, Array, Function] as PropType<any>, default: 'div' },
+        /** 传递给渲染标签的插槽(默认插槽是渲染的子条件) */
+        tagSlots: { type: Object as PropType<Record<string, ComponentType<{ query: Query; wrapper: ReturnType<typeof getProvideValue> }>>> },
+        /** 渲染的子条件 */
+        config: { type: [Object, Array, Function] as PropType<any> },
+        /** 传递给组件的插槽 */
+        slots: { type: Object as PropType<GroupSlots<Query, OptionQuery>> },
+        /** 组件额外的钩子() */
+        hooks: { type: [Object] as PropType<GroupHookOption>, default: undefined },
+        /** 获取表单组件实例 */
+        getFormRef: { type: Function as PropType<() => any> },
+    } as const;
+}
+/** 组件传参 */
+export const groupPropsPrivate = groupPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const groupProps = groupPropsPrivate;
+export type GroupProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof groupPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 */
+export function groupEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 */
+export const groupEmitsPrivate = groupEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const groupEmits = groupEmitsPrivate;
+export type GroupEmits<T> = ReturnType<typeof groupEmitsGeneric<T>>;
+
+export interface GroupSlots<Query extends Record<string, any> = any, OptionQuery extends Record<string, any> = any> {
+    /** 在表单项前渲染 */
+    prepend?: ComponentType<{ query: Query; wrapper: ReturnType<typeof getProvideValue> }>;
+    /** 自定义表单渲染逻辑 */
+    default?: ComponentType<{ config: Record<string, any> | Record<string, any>[]; query: Query; wrapper: ReturnType<typeof getProvideValue> }>;
+    /** 在表单项后渲染 */
+    append?: ComponentType<{ query: Query; wrapper: ReturnType<typeof getProvideValue> }>;
+}

package/components/group/virtual-group.vue

@@ -0,0 +1,38 @@
+<template>
+    <template v-if="tag">
+        <component :is="tag" v-bind="$attrs" ref="tagRef" v-on="events">
+            <slot />
+            <template v-for="(item, slotName) in slots" :key="slotName" #[slotName]="row">
+                <component :is="getNode(item)" v-bind="row" :wrapper="wrapper" :query="query" />
+            </template>
+        </component>
+    </template>
+    <slot v-else />
+</template>
+
+<script lang="tsx">
+import { getNode } from '@xiaohaih/json-form-core';
+import type { PropType } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
+
+/**
+ * @file 对 Group 组件进行包装, 以支持无根节点渲染
+ */
+export default defineComponent({
+    name: 'VirtualGroup',
+    inheritAttrs: false,
+    props: {
+        tag: { type: [Object, String, Array, Function] as PropType<any>, default: 'div' },
+        slots: { type: [Object] as PropType<Record<string, any>> },
+        wrapper: { type: [Object] as PropType<Record<string, any>> },
+        query: { type: [Object] as PropType<Record<string, any>> },
+    },
+    setup(props, ctx) {
+        // @ts-expect-error 兼容 vue2.x
+        const events = computed(() => ctx.listeners || {});
+        return { getNode, tagRef: ref<Record<string, any> | undefined>(), events };
+    },
+});
+</script>
+
+<style lang="css" scoped></style>

package/components/index.ts

@@ -0,0 +1,10 @@
+// 在 pnpm 中, 由于打包时引用的 @vue/shared 路径实际被解析为'.pnpm/@vue+shared@3.5.26/node_modules/@vue/shared'
+// 导致无法生成声明文件, 因此需要单独引入 @vue/shared, 避免报错(不确定是否是 vant 导致的)
+// 报错原因可参考下方链接
+// https://blog.gitcode.com/8425e0ada8aa47b422a780f6e0b1ae0f.html
+// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-5.html#consulting-packagejson-dependencies-for-declaration-file-generation
+import type {} from '@vue/shared';
+
+export * from './component-definition/index';
+export * from './share';
+export * from './wrapper/index';

package/components/input/index.ts

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

package/components/input/index.vue

@@ -0,0 +1,83 @@
+<template>
+    <VanField
+        v-if="!hide"
+        v-bind="$attrs"
+        ref="fieldRef"
+        :name="field"
+        :disabled="globalDisabled || disabled"
+        :readonly="globalDisabled || readonly"
+        :clearable="clearable"
+        :model-value="(tempChecked as string)"
+        @update:model-value="change"
+        @keydown.enter="enterHandle"
+    >
+        <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 { Field as VanField } from 'vant';
+import type { SlotsType } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import { useCommonSetup, useTempChecked } from '../use';
+import type { InputSlots } from './types';
+import { inputEmitsPrivate as emits, inputPropsPrivate as props } from './types';
+
+/**
+ * @file 输入框
+ */
+export default defineComponent({
+    name: 'HInput',
+    components: { VanField },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<InputSlots>,
+    setup(props, ctx) {
+        const plain = usePlain(props);
+        const { slotProps } = useCommonSetup(props, ctx, plain);
+        const { tempChecked, changeSync } = useTempChecked(plain.checked);
+        const fieldRef = ref<ComponentExposed<typeof VanField>>();
+
+        /**
+         * 节流
+         * @param {string} value: 输入值
+         */
+        let timer = 0;
+        function change(value: string) {
+            if (value === tempChecked.value) return;
+            const { debounceTime } = props;
+            timer && clearTimeout(timer);
+            tempChecked.value = value;
+
+            debounceTime
+                ? timer = setTimeout(() => changeSync(tempChecked.value), debounceTime) as unknown as number
+                : changeSync(value);
+        }
+        /** 回车事件 */
+        function enterHandle(ev: Event | KeyboardEvent) {
+            timer && clearTimeout(timer);
+            plain.checked.value !== tempChecked.value && (plain.checked.value = tempChecked.value);
+            plain.wrapper?.search();
+        }
+
+        return {
+            hyphenate,
+            getNode,
+            fieldRef,
+            ...plain,
+            slotProps,
+            tempChecked,
+            change,
+            enterHandle,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/input/types.ts

@@ -0,0 +1,43 @@
+import type { emits2obj, PlainProps } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import { Field as VanField } from 'vant';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import type { CommonProps, CommonSlots, ComponentType } from '../share';
+import { commonProps } from '../share';
+
+/** 组件传参 - 私有 */
+export function inputPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** 是否显示清除按钮 @default true */
+        clearable: { type: Boolean as PropType<boolean>, default: true },
+        /** 实时触发时防抖动的时间 */
+        debounceTime: { type: Number as PropType<number>, default: 300 },
+    } as const;
+}
+/** 组件传参 - 私有 */
+export const inputPropsPrivate = inputPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const inputProps = {
+    ...VanField.props as unknown as {},
+    ...inputPropsPrivate,
+};
+export type InputProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof inputPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function inputEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const inputEmitsPrivate = inputEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const inputEmits = {
+    ...VanField.emits,
+    ...inputEmitsPrivate,
+};
+
+export type InputEmits<T> = ReturnType<typeof inputEmitsGeneric<T>>;
+
+export interface InputSlots extends CommonSlots<any> {
+}

package/components/input-slot/index.ts

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