@leiyin/v-form-renderer 0.1.3-alpha.2 → 0.1.3-alpha.4

package/dist/types/components/RenderFormGroup.vue.d.ts

@@ -0,0 +1,73 @@
+declare var __VLS_2: `id:${string}`, __VLS_3: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        readonly type: PropType<import("../index.js").Content>;
+        readonly default: () => void;
+    };
+    value: {
+        readonly type: ObjectConstructor;
+        readonly default: () => void;
+    };
+    disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    id: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    itemValue: {
+        type: import("vue").PropType<any>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updateValue: (...args: any[]) => void;
+    "update:itemValue": (value: any) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        readonly type: PropType<import("../index.js").Content>;
+        readonly default: () => void;
+    };
+    value: {
+        readonly type: ObjectConstructor;
+        readonly default: () => void;
+    };
+    disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    id: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    itemValue: {
+        type: import("vue").PropType<any>;
+    };
+}>> & Readonly<{
+    onUpdateValue?: ((...args: any[]) => any) | undefined;
+    "onUpdate:itemValue"?: ((value: any) => any) | undefined;
+}>, {
+    disabled: boolean;
+    readonly: boolean;
+    id: string;
+    data: import("../index.js").Content;
+    value: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/RenderFormItem.vue.d.ts

@@ -0,0 +1,63 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        readonly type: PropType<import("..").Content>;
+        readonly default: () => void;
+    };
+    value: {
+        readonly type: ObjectConstructor;
+        readonly default: () => void;
+    };
+    disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    id: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    itemValue: {
+        type: import("vue").PropType<any>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updateValue: (...args: any[]) => void;
+    "update:itemValue": (value: any) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        readonly type: PropType<import("..").Content>;
+        readonly default: () => void;
+    };
+    value: {
+        readonly type: ObjectConstructor;
+        readonly default: () => void;
+    };
+    disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    id: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    itemValue: {
+        type: import("vue").PropType<any>;
+    };
+}>> & Readonly<{
+    onUpdateValue?: ((...args: any[]) => any) | undefined;
+    "onUpdate:itemValue"?: ((value: any) => any) | undefined;
+}>, {
+    disabled: boolean;
+    readonly: boolean;
+    id: string;
+    data: import("..").Content;
+    value: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/render-component.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("vue").DefineComponent<{}, (() => null) | (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>), {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/types/components/render-form-item.d.ts

@@ -0,0 +1,23 @@
+import type { Content } from '../types';
+export declare const renderFormItemProps: {
+    readonly data: {
+        readonly type: PropType<Content>;
+        readonly default: () => void;
+    };
+    readonly value: {
+        readonly type: ObjectConstructor;
+        readonly default: () => void;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly readonly: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly id: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+};

package/dist/types/hooks/index.d.ts

@@ -0,0 +1,8 @@
+import type { FormState } from './useFormState';
+import type { FormMethods } from './useFormMethods';
+import type { FormEvents } from './useFormEvents';
+export * from './useFormState';
+export * from './useFormMethods';
+export * from './useFormEvents';
+export * from './useFormContext';
+export type FormRendererType = FormState & FormMethods & FormEvents;

package/dist/types/hooks/useFormContext.d.ts

@@ -0,0 +1,3 @@
+import type { FormRendererType } from './';
+export declare function createFormContext(instance: FormRendererType): void;
+export declare function useFormContext(formProps?: {}): FormRendererType;

package/dist/types/hooks/useFormEvents.d.ts

@@ -0,0 +1,11 @@
+import { FormState } from './useFormState';
+type UseFormEventsContext = FormState;
+export type FormEvents = ReturnType<typeof useFormEvents>;
+export declare const useFormEvents: (useFormEventsContext: UseFormEventsContext) => {
+    getFormValue: () => Record<string, any>;
+    validate: () => Promise<boolean | undefined | void>;
+    resetFields: () => Promise<void>;
+    updateForm: (newValue: Record<string, any>) => void;
+    setOptions: (id: string, data: any[]) => void;
+};
+export {};

package/dist/types/hooks/useFormMethods.d.ts

@@ -0,0 +1,8 @@
+import { FormState } from './useFormState';
+type UseFormMethodsContext = FormState;
+export type FormMethods = ReturnType<typeof useFormMethods>;
+export declare const useFormMethods: (formMethodsContext: UseFormMethodsContext) => {
+    updateFormValue: ({ id, val }: any) => void;
+    initFormValues: () => void;
+};
+export {};

package/dist/types/hooks/useFormState.d.ts

@@ -0,0 +1,17 @@
+import type { Ref, ComputedRef } from 'vue';
+import type { FormInstance } from 'element-plus';
+import type { VFormProps } from '../v-form-renderer';
+import type { Content } from '../types';
+export interface FormState {
+    elFormRef: Ref<FormInstance | undefined>;
+    formModel: Record<string, any>;
+    defaultFormValues: Record<string, any>;
+    options: Ref<Record<string, any[]>>;
+    formPropsRef: Ref<VFormProps>;
+    contentRef: ComputedRef<Content[]>;
+}
+type useFormStateParams = {
+    props: VFormProps;
+};
+export declare const useFormState: ({ props }: useFormStateParams) => FormState;
+export {};

package/dist/types/index.d.ts

@@ -1,5 +1,4 @@
 import VFormRenderer from './v-form-renderer.vue';
-export interface TFormProp {
-    content: any[];
-}
+export * from './types/';
+export * from './v-form-renderer';
 export default VFormRenderer;

package/dist/types/types/form.d.ts

@@ -0,0 +1,111 @@
+import { Component } from 'vue';
+import { type FormItemRule } from 'element-plus';
+/** 表单项类型 */
+export type Content = {
+    /**
+     * 每一个原子都存在 id，用于存储该原子的值，不能重复
+     */
+    id: string;
+    /**
+     * 对应el-form-item 的 label值
+     *
+     */
+    label?: string | Function;
+    /**
+     * 可以是element提供的所有表单组件类型，如传入'input'，则渲染出'el-input'
+     * 当type="group"时，可以创造复杂对象类型的表单数据，配合items使用。此时getFormValue()返回的是对象类型的数据，对象的每个属性对应items里的每一项
+     */
+    type?: string;
+    /**
+     * 用于定义具体原子表单（如el-input）的属性，比如定义el-input的placeholder,
+     * tips: 原始属性,尽量不要传响应式数据
+     */
+    el?: Record<string, any>;
+    /**
+     * 当 type === 'input' 时展示文本值
+     * 当 type === 'select' 时展示对应 label
+     * 对于其他组件等同于 disabled = true
+     */
+    readonly?: boolean;
+    /**
+     * 输入时自动去掉前后空格
+     */
+    trim?: boolean;
+    /**
+     * 表单初始化时的默认值
+     */
+    default?: any;
+    /**
+     * 当type="group"时使用
+     * items内依然遵循同一层级的id不重复的原则
+     */
+    items?: Content[];
+    /**
+     * 传入一个方法，并返回 boolean，返回 true 时则隐藏该表单项
+     * formValue 为当前 form 的值，item 为当前表单项的定义
+     */
+    hidden?: (formValue: Record<string, any>, item: Content) => boolean;
+    /**
+     * 传入一个方法，并返回 boolean，返回 true 时则禁用该表单项
+     * formValue 为当前 form 的值，item 为当前表单项的定义
+     */
+    disabled?: (formValue: Record<string, any>, item: Content) => boolean;
+    /**
+     * 具有选择功能的原子表单可用此定义可选项
+     */
+    options?: {
+        label: string;
+        value?: any;
+    }[];
+    /**
+     * 使用自定义组件
+     * component适用于渲染局部注册组件和自定义组件，而type适用于带el-前缀的全局组件
+     */
+    component?: Component;
+    /**
+     * 用于处理输入值，输入的值包括：1. default；2. v-model；3. updateForm。参数为整个表单的值对象或 updateForm 传入的对象
+     * 如果 inputFormat 返回 undefined，则不会更新此表单项
+     */
+    inputFormat?: (obj: any) => any;
+    /**
+     * 用于处理输出值，参数为对应组件返回值
+     * 如果处理后的值是对象类型，会覆盖（Object.assign）到整个表单的值上
+     */
+    outputFormat?: (val: any, obj: any) => any;
+    /** 设置表单校验规则 */
+    rules?: FormItemRule[];
+    /**
+     * 配置remote.url，即可远程配置组件的某个prop！
+     * remote接受以下属性：
+     * url: 远程接口的地址
+     * prop: 要注入的 prop 的名称，默认为 options
+     * request: 可选，请求方法
+     * dataPath: 可选，data在响应体中的路径
+     * onResponse: 可选，处理请求回来的数据
+     * onError: 可选，处理请求出错的情况
+     * 另外，针对 select、radio-group、checkbox-group，远程数据能自动映射成 el-option 选项！以下属性仅在此情况使用
+     * label: 可选，可直接配置远程数据中用作 label 的key
+     * value: 可选，可直接配置远程数据中用作 value 的key
+     */
+    remote?: {
+        url?: (params: Record<string, any>) => Promise<any>;
+        request?: () => Promise<any>;
+        params?: Record<string, any>;
+        prop?: string;
+        dataPath?: string;
+        onResponse?: (resp: any) => any;
+        onError?: (error: any) => void;
+        label?: string | Function;
+        value?: string | Function;
+        children?: string;
+    };
+    /**
+     * 监听表单项发出的事件
+     * listen to any events emitted by component of form item
+     * @param {any[]} args - what that event emits
+     * @param {function} updateForm - same as methods.updateForm
+     */
+    on?: {
+        [eventName: string]: (args: any[], updateForm: Function, setOptions: Function) => void;
+    };
+};

package/dist/types/types/index.d.ts

@@ -0,0 +1 @@
+export type * from './form';

package/dist/types/utils/index.d.ts

@@ -0,0 +1,37 @@
+import type { Content } from '../types';
+export declare function noop(): void;
+export declare function collect(content: Content[], key: keyof Content): Record<string, any>;
+export declare function correctValue(value: any, content: any[]): void;
+/**
+ * 根据 content 中的 outputFormat 来处理 value；
+ * 如果 outputFormat 处理后的值是对象类型，会覆盖（Object.assign）到 value 上
+ */
+export declare function transformOutputValue(value: Record<string, any>, content: Content[]): Record<string, any>;
+/**
+ * 根据 content 中的 inputFormat 来处理 value
+ * inputFormat 接受的是当前层级的 value
+ * 复杂点在于，不管传入的 value 是否包含某表单项的 key，所有使用了 inputFormat 的项都有可能在这次 update 中被更新
+ */
+export declare function transformInputValue(value: Record<string, any>, content: Content[]): Record<string, any>;
+/**
+ * 递归合并 oldV & newV，策略如下：
+ * 1. 过滤掉 newV 中不存在于 content 中的项
+ * 2. 如果该项的 type 不是 GROUP，直接覆盖合并到 oldV
+ * 3. 如果是，则递归执行步骤 1 到 3
+ */
+export declare function mergeValue(oldV: Record<string, any>, newV: Record<string, any>, content: Content[]): void;
+/**
+ * 格式化树状结构数据
+ *
+ * @param {Array} orignData 数据
+ * @param {Object} params 配置项
+ * @param {String} params.label 按orignData，label取值设置label
+ * @param {String} params.value 按orignData，value取值设置value
+ * @param {String} params.children 按orignData，children取值设置children
+ * @returns {Array}
+ */
+export declare function transformTreeValue(orignData: any[], params?: {
+    label: string | Function;
+    value: string | Function;
+    children: string;
+}): any[];

package/dist/types/v-form-renderer.d.ts

@@ -0,0 +1,29 @@
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import VFormRenderer from './v-form-renderer.vue';
+import type { Content } from './types';
+export declare const vFormProps: {
+    readonly content: {
+        readonly type: PropType<Content[]>;
+        readonly required: true;
+        readonly default: () => never[];
+    };
+    /** 统一label宽度 */
+    readonly labelWidth: {
+        readonly type: StringConstructor;
+        readonly default: "98px";
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly inline: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly readonly: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};
+export type VFormProps = ExtractPublicPropTypes<typeof vFormProps>;
+export type VFormRendererInstance = InstanceType<typeof VFormRenderer>;

package/dist/types/v-form-renderer.vue.d.ts

@@ -1,3 +1,83 @@
-declare const __VLS_export: any;
+declare var __VLS_13: `id:${string}`, __VLS_14: {}, __VLS_23: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_13>]?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_23) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    content: {
+        readonly type: import("vue").PropType<import("./types").Content[]>;
+        readonly required: true;
+        readonly default: () => never[];
+    };
+    labelWidth: {
+        readonly type: StringConstructor;
+        readonly default: "98px";
+    };
+    disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    inline: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    model: {
+        type: import("vue").PropType<any>;
+    };
+}>, {
+    getFormValue: () => Record<string, any>;
+    validate: () => Promise<boolean | undefined | void>;
+    resetFields: () => Promise<void>;
+    updateForm: (newValue: Record<string, any>) => void;
+    setOptions: (id: string, data: any[]) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    enter: (...args: any[]) => void;
+    "update:model": (value: any) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    content: {
+        readonly type: import("vue").PropType<import("./types").Content[]>;
+        readonly required: true;
+        readonly default: () => never[];
+    };
+    labelWidth: {
+        readonly type: StringConstructor;
+        readonly default: "98px";
+    };
+    disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    inline: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    model: {
+        type: import("vue").PropType<any>;
+    };
+}>> & Readonly<{
+    "onUpdate:model"?: ((value: any) => any) | undefined;
+    onEnter?: ((...args: any[]) => any) | undefined;
+}>, {
+    content: import("./types").Content[];
+    labelWidth: string;
+    disabled: boolean;
+    inline: boolean;
+    readonly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leiyin/v-form-renderer",
-  "version": "0.1.3-alpha.2",
+  "version": "0.1.3-alpha.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -21,14 +21,24 @@
     "clean": "rimraf dist node_modules/.cache",
     "build": "pnpm clean && vue-tsc --declaration --emitDeclarationOnly && rollup -c && rollup -c rollup.dts.config.mjs"
   },
+  "peerDependencies": {
+    "element-plus": "2.11.7",
+    "vue": "^3.2.0"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.21"
+  },
   "devDependencies": {
+    "@types/lodash-es": "4.17.12",
+    "element-plus": "2.11.7",
     "rimraf": "^6.1.2",
     "rollup-plugin-dts": "^6.3.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-vue": "^6.0.0",
     "typescript": "^5.9.3",
+    "vue": "^3.2.0",
     "vue-tsc": "^3.2.1"
   },
-  "gitHead": "bcb0a10c4515521c7fd6250b0089a4f8813f84af"
+  "gitHead": "5bf19378238c1c642a9e001790f159ecbc7d1628"
 }

package/dist/index.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/index.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}