@xiaohaih/json-form-vant 0.0.1

package/components/use.ts

@@ -0,0 +1,45 @@
+import type { usePlain } from '@xiaohaih/json-form-core';
+import type { Ref } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
+import { pick } from '../src/utils';
+
+/** 表单组件的常用属性 */
+export function useCommonSetup<Props extends Record<string, any>, Context extends Record<string, any>>(props: Props, ctx: Context, plain: ReturnType<typeof usePlain>) {
+    /** 插槽常用属性 */
+    const slotProps = computed(() => ({ props, plain }));
+
+    return { slotProps };
+}
+
+/**
+ * 为选中值构建临时变量
+ * 某些 UI 组件并不直接使用 modelValue, 而是内部维护一个变量
+ * 当内部值发生变化, 而 modelValue 又立马重置为相同值时
+ * 导致组件内部值无法同步 modelValue
+ */
+export function useTempChecked(checked: Ref<any>) {
+    const tempChecked = ref(checked.value);
+    // 监听外部值变化, 当第三方组件直接改变值时, 需要同步
+    watch(checked, (val) => tempChecked.value = val);
+
+    /**
+     * 对 change 做特殊处理, 异步改变值
+     * 防止存在默认值时, vant 组件清空值时
+     * 内部马上重写会导致值更新了, ui 未更新
+     */
+    function change(value: any) {
+        checked.value = tempChecked.value = value;
+        tempChecked.value !== checked.value && nextTick(() => tempChecked.value = checked.value);
+    }
+    /**
+     * 对 change 做特殊处理, 同步改变值
+     * 临时变量直接等于值时, 无法得到 checked.value 最新的值
+     * 因此等 checked.value 赋值后再等于其即可
+     */
+    function changeSync(value: any) {
+        checked.value = value;
+        tempChecked.value = checked.value;
+    }
+
+    return { tempChecked, change, changeSync };
+}

package/components/utils.ts

@@ -0,0 +1,52 @@
+/**
+ * 根据指定值获取树形链
+ * @param {Array} sources 待查找的数据源
+ * @param {object} value 匹配值
+ * @param {string} childrenKey 子级的 key, 默认 children
+ */
+export function getChained<T extends Record<string, any>>(
+    sources: T[],
+    value: Partial<T>,
+    childrenKey = 'children',
+): T[] {
+    const result: T[] = [];
+    carryChained(
+        sources,
+        value,
+        (data) => {
+            result.unshift(data);
+        },
+        childrenKey,
+    );
+    return result;
+}
+
+/**
+ * 寻找匹配条件值并执行回调
+ * @param {Array} sources 待查找的数据源
+ * @param {object} value 匹配值
+ * @param {Function} callback 执行的回调
+ * @param {string} childrenKey 子级的 key, 默认 children
+ */
+export function carryChained<T extends Record<string, any>>(
+    sources: T[],
+    value: Partial<T>,
+    callback: (data: T, isDeep?: boolean) => void,
+    childrenKey = 'children',
+): boolean | undefined {
+    const conditions = Object.entries(value);
+    for (const v of sources) {
+        const status = conditions.every(([k, val]) => val === v[k]);
+        if (status) {
+            callback(v, true);
+            return true;
+        }
+        if (v[childrenKey] && v[childrenKey].length) {
+            const result = carryChained(v[childrenKey], value, callback, childrenKey);
+            if (result) {
+                callback(v);
+                return true;
+            }
+        }
+    }
+}

package/components/wrapper/index.ts

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

package/components/wrapper/index.vue

@@ -0,0 +1,117 @@
+<template>
+    <HGroup v-bind="$attrs" ref="groupRef" :disabled="disabled" :config="config" :model="query" :query="query" :get-form-ref="getFormRef" :tag="VanForm" v-on="events" @submit="submitHandle">
+        <template v-if="$slots.prepend" #prepend>
+            <slot name="prepend" v-bind="slotProps" />
+        </template>
+        <template #append>
+            <slot v-bind="slotProps" />
+        </template>
+    </HGroup>
+</template>
+
+<script lang="ts">
+import { execOnCallback, useWrapper } from '@xiaohaih/json-form-core';
+import type { FormInstance } from 'vant';
+import { Form as VanForm } from 'vant';
+import type { Ref, SlotsType } from 'vue';
+import { computed, defineComponent, Fragment, markRaw, nextTick, onMounted, ref, watch } from 'vue';
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import { pick } from '../../src/utils';
+import { HGroup } from '../group/index';
+import type { FormSlots } from './types';
+import { formEmitsPrivate as emits, formPropsPrivate as props } from './types';
+
+/**
+ * @file 容器
+ */
+export default defineComponent({
+    name: 'HForm',
+    components: {
+        HGroup,
+    },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<FormSlots<any, any>>,
+    setup(props, ctx) {
+        const groupRef = ref<ComponentExposed<typeof HGroup>>();
+        const formRef = computed(() => groupRef.value?.tagRef as FormInstance | undefined);
+        // @ts-expect-error 兼容 vue2.x
+        const events = computed(() => ctx.listeners || {});
+
+        /** 覆盖 van-form 的 submit 事件 */
+        function submitHandle(params: Record<any, string>) {
+            ctx.emit('submit', wrapper.getQuery());
+        }
+
+        /** 验证 vant 的表单 */
+        function validate(...args: Parameters<FormInstance['validate']>) {
+            return formRef.value!.validate(...args);
+        }
+        /** 验证 vant 的表单字段 */
+        function validateField(...args: Parameters<FormInstance['validate']>) {
+            return formRef.value!.validate(...args);
+        }
+        /** 清除 vant 的表单验证 */
+        function clearValidate(...args: Parameters<FormInstance['resetValidation']>) {
+            return formRef.value!.resetValidation(...args);
+        }
+        /** 重置 vant 的表单验证 */
+        function resetValidation(...args: Parameters<FormInstance['resetValidation']>) {
+            return formRef.value!.resetValidation(...args);
+        }
+        /** 获取所有表单项当前的值 */
+        function getValues(...args: Parameters<FormInstance['getValues']>) {
+            return formRef.value!.getValues(...args);
+        }
+        /** 获取所有表单项的校验状态 */
+        function getValidationStatus(...args: Parameters<FormInstance['getValidationStatus']>) {
+            return formRef.value!.getValidationStatus(...args);
+        }
+        /** 滚动到指定表单字段 */
+        function scrollToField(...args: Parameters<FormInstance['scrollToField']>) {
+            return formRef.value!.scrollToField(...args);
+        }
+        /** 获取表单实例 */
+        function getFormRef() {
+            return formRef.value;
+        }
+        const wrapper = useWrapper(props, {
+            formRef,
+        });
+        /** 触发提交事件 */
+        function submit() {
+            formRef.value?.submit();
+        }
+        /** 重置 */
+        function reset() {
+            wrapper.reset();
+            setTimeout(clearValidate);
+        }
+
+        const slotProps = computed(() => ({ props, wrapper }));
+
+        return {
+            groupRef,
+            VanForm: markRaw(VanForm),
+            formRef: formRef as Ref<ComponentExposed<typeof VanForm>>,
+            events,
+            submitHandle,
+            ...wrapper,
+            validate,
+            validateField,
+            clearValidate,
+            resetValidation,
+            submit,
+            reset,
+            getValues,
+            getValidationStatus,
+            scrollToField,
+            getFormRef,
+            slotProps,
+        };
+    },
+});
+</script>
+
+<style></style>

package/components/wrapper/types.ts

@@ -0,0 +1,94 @@
+/**
+ * 表单包装器类型定义文件
+ *
+ * 定义表单组件所需的各种类型、属性和事件
+ */
+import type { CamelCase, WrapperProps as CoreWrapperProps, emits2props, Obj2Props, useWrapper, WrapperArrayable } from '@xiaohaih/json-form-core';
+import { wrapperProps as coreWrapperProps, emits2obj } from '@xiaohaih/json-form-core';
+import { Form as VanForm } from 'vant';
+import type { Component, ExtractPublicPropTypes, PropType } from 'vue';
+import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
+import type { defineOption } from '../../src/assist';
+import type { ComponentType } from '../share';
+
+/**
+ * Vant 表单属性对象
+ * 从 Vant Form 组件中提取属性定义
+ */
+const vantFormProps = VanForm.props as unknown as Obj2Props<ComponentProps<typeof VanForm>>;
+/**
+ * Vant 表单事件对象
+ */
+const vantFormEmits = emits2obj(VanForm.emits);
+
+/** 表单属性生成函数 */
+export function formPropsGeneric<T extends Record<string, any> = Record<string, any>, O extends Record<keyof T, any> = Record<keyof T, any>>() {
+    type _Prop = typeof vantFormProps & ReturnType<typeof emits2props<null, [NonNullable<typeof vantFormEmits>]>> & {
+        class: { type: PropType<string | Record<string, any> | any[]> };
+        style: { type: PropType<string | Record<string, any> | any[]> };
+    };
+
+    return {
+        ...{} as Omit<_Prop, 'model'>,
+        ...coreWrapperProps,
+        /** 数据源 - 表单项配置对象 */
+        config: { type: [Object, Array, Function] as PropType<any[] | ((...args: any[]) => any) | Record<string, any>> },
+    } as const;
+}
+/** 表单组件内部使用的属性定义 */
+export const formPropsPrivate = formPropsGeneric();
+
+/**
+ * 表单组件对外暴露的属性定义
+ */
+export const formProps = {
+    ...vantFormProps,
+    ...formPropsPrivate,
+};
+
+/**
+ * 表单事件生成函数 - 泛型版本
+ */
+export function formEmitsGeneric<T>() {
+    return {
+        ...{} as typeof vantFormEmits,
+        /** 重写提交事件 - 覆盖传参 */
+        submit: (params: Record<string, any>) => true,
+    };
+}
+
+/** 表单组件内部使用的事件定义 */
+export const formEmitsPrivate = formEmitsGeneric();
+
+/**
+ * 表单组件对外暴露的事件定义
+ */
+export const formEmits = {
+    ...vantFormEmits,
+    ...formEmitsPrivate,
+} as typeof vantFormEmits & typeof formEmitsPrivate;
+
+/**
+ * 表单事件类型定义
+ */
+export type FormEmits<T> = ReturnType<typeof formEmitsGeneric<T>>;
+
+/**
+ * 表单插槽接口
+ */
+export interface FormSlots<Query extends Record<string, any>, OptionQuery extends Partial<Record<keyof Query, any>>> {
+    /** 前置插槽 - 在表单项之前 */
+    prepend?: ComponentType<FormSlotProps<Query, OptionQuery>>;
+    /** 默认插槽 - 在表单项之后 */
+    default?: ComponentType<FormSlotProps<Query, OptionQuery>>;
+}
+
+/**
+ * 表单插槽属性接口
+ */
+export interface FormSlotProps<Query extends Record<string, any>, OptionQuery extends Partial<Record<keyof Query, any>>> {
+    /** 获取表单属性的方法 */
+    props: ExtractPublicPropTypes<ReturnType<typeof formPropsGeneric<Query, OptionQuery>>>;
+    /** 表单包装器实例 */
+    wrapper: ReturnType<typeof useWrapper>;
+}

package/dist/components/area/index.d.ts

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