@leiyin/v-form-renderer 0.1.3-alpha.3 → 1.0.0

package/dist/index.d.ts

@@ -1,9 +1,229 @@
-declare const __VLS_export: any;
+import * as vue from 'vue';
+import { Component, PropType, ExtractPublicPropTypes } from 'vue';
+import { FormItemRule } from 'element-plus';
+
+/** 表单项类型 */
+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;
+    };
+};
+
+declare var __VLS_13: `id:${string}`;
+declare var __VLS_14: {};
+declare var __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: vue.DefineComponent<vue.ExtractPropTypes<{
+    content: {
+        readonly type: vue.PropType<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: 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;
+}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    enter: (...args: any[]) => void;
+    "update:model": (value: any) => void;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    content: {
+        readonly type: vue.PropType<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: vue.PropType<any>;
+    };
+}>> & Readonly<{
+    "onUpdate:model"?: ((value: any) => any) | undefined;
+    onEnter?: ((...args: any[]) => any) | undefined;
+}>, {
+    content: Content[];
+    labelWidth: string;
+    disabled: boolean;
+    inline: boolean;
+    readonly: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 
-interface TFormProp {
-    content: any[];
-}
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+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;
+    };
+};
+type VFormProps = ExtractPublicPropTypes<typeof vFormProps>;
+type VFormRendererInstance = InstanceType<typeof _default>;
 
-export { _default as default };
-export type { TFormProp };
+export { _default as default, vFormProps };
+export type { Content, VFormProps, VFormRendererInstance };

package/dist/index.esm.css

@@ -1 +1 @@
-.red-text[data-v-3f4b8568]{color:red}
+.el-form-renderer{.el-form-item{.el-form-item__content{&>.el-input{&>input[readonly][data-v-3f4b8568]{background-color:transparent;border:none;color:#606266}}&>.el-date-editor>input[disabled][data-v-3f4b8568],&>.el-textarea>textarea[readonly][data-v-3f4b8568]{background-color:transparent;border:none;color:#606266}}.no-label-form-item{.el-form-item__content[data-v-3f4b8568]{margin-left:0!important}}}}