@carefrees/form-utils-vue-hooks 0.0.13

package/esm/hooks/useFormList.js

@@ -0,0 +1,21 @@
+import { FormListInstanceBase } from "../instance/formListInstance.js";
+import { inject, provide, ref, toValue } from "vue";
+const formListProvideSymbol = Symbol('carefrees-form-list');
+function useFormListProvide(formList) {
+    const newFormList = useFormList(formList);
+    provide(formListProvideSymbol, newFormList);
+}
+function useFormListInject() {
+    const formList = inject(formListProvideSymbol, ref(new FormListInstanceBase()));
+    return formList;
+}
+function useFormList(formList) {
+    const refForm = ref();
+    if (!refForm.value) {
+        const value = toValue(formList);
+        if (value) refForm.value = value;
+        else refForm.value = new FormListInstanceBase();
+    }
+    return refForm;
+}
+export { useFormList, useFormListInject, useFormListProvide };

package/esm/hooks/useHtmlFor.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export declare const useHtmlFor: (suffix: Ref<string>) => import("vue").ComputedRef<string>;

package/esm/hooks/useHtmlFor.js

@@ -0,0 +1,7 @@
+import { computed, ref } from "vue";
+let localId = 0;
+const useHtmlFor = (suffix)=>{
+    const count = ref(localId++);
+    return computed(()=>`carefree-vue-form-item_${count.value.toString(32)}_${suffix.value}`);
+};
+export { useHtmlFor };

package/esm/hooks/useMultipleForm.d.ts

@@ -0,0 +1,8 @@
+import { MultipleInstanceBase } from '../instance/multipleInstance';
+import { Ref } from 'vue';
+/**多表单收集 Context */
+export declare function useMultipleFormProvide(multipleForm?: Ref<MultipleInstanceBase> | MultipleInstanceBase): void;
+/**子项中获取 多表单收集 实例*/
+export declare function useMultipleFormInject(): Ref<MultipleInstanceBase, MultipleInstanceBase>;
+/**初始化 多表单收集 实例*/
+export declare function useMultipleForm(multipleForm?: Ref<MultipleInstanceBase> | MultipleInstanceBase): Ref<MultipleInstanceBase | undefined, MultipleInstanceBase | undefined>;

package/esm/hooks/useMultipleForm.js

@@ -0,0 +1,21 @@
+import { MultipleInstanceBase } from "../instance/multipleInstance.js";
+import { inject, provide, ref, toValue } from "vue";
+const multipleFormProvideSymbol = Symbol('carefrees-multiple-form');
+function useMultipleFormProvide(multipleForm) {
+    const newMultipleForm = useMultipleForm(multipleForm);
+    provide(multipleFormProvideSymbol, newMultipleForm);
+}
+function useMultipleFormInject() {
+    const multipleForm = inject(multipleFormProvideSymbol, ref(new MultipleInstanceBase()));
+    return multipleForm;
+}
+function useMultipleForm(multipleForm) {
+    const refForm = ref();
+    if (!refForm.value) {
+        const value = toValue(multipleForm);
+        if (value) refForm.value = value;
+        else refForm.value = new MultipleInstanceBase();
+    }
+    return refForm;
+}
+export { useMultipleForm, useMultipleFormInject, useMultipleFormProvide };

package/esm/hooks/useRule.d.ts

@@ -0,0 +1,4 @@
+import { RuleInstanceBase } from '../instance/ruleIntsnace';
+import { Ref } from 'vue';
+/** 初始化 规则实例*/
+export declare function useRules(rules?: Ref<RuleInstanceBase> | RuleInstanceBase): Ref<RuleInstanceBase>;

package/esm/hooks/useRule.js

@@ -0,0 +1,12 @@
+import { RuleInstanceBase } from "../instance/ruleIntsnace.js";
+import { ref, toValue } from "vue";
+function useRules(rules) {
+    const refRules = ref();
+    if (!refRules.value) {
+        const value = toValue(rules);
+        if (value) refRules.value = value;
+        else refRules.value = new RuleInstanceBase();
+    }
+    return refRules;
+}
+export { useRules };

package/esm/index.d.ts

@@ -0,0 +1,4 @@
+export * from './interface';
+export * from './hooks/index';
+export * from './utils';
+export * from './instance';

package/esm/index.js

@@ -0,0 +1,4 @@
+export * from "./interface/index.js";
+export * from "./hooks/index.js";
+export * from "./utils/index.js";
+export * from "./instance/index.js";

package/esm/instance/formInstance.d.ts

@@ -0,0 +1,58 @@
+import { FormListInstanceBase } from './formListInstance';
+import { FormItemInstanceBase } from './formItemInstance';
+import { ValidateErrorEntity } from '../interface';
+import { Ref } from 'vue';
+/**基础实例*/
+export declare class FormInstanceBase<T = any> {
+    /**表单数据*/
+    formData: Ref<Partial<T>>;
+    /**表单每一项实例*/
+    formItemInstances: Ref<FormItemInstanceBase>[];
+    /**表单中List实例集合*/
+    formListInstances: Map<string, Ref<FormListInstanceBase>>;
+    /**隐藏组件字段对应的值*/
+    hideState: Ref<Record<string, boolean>>;
+    /**是否保护值(不进行表单项组件卸载重置初始值)*/
+    preserve?: boolean;
+    /**值更新触发*/
+    onValuesChange?: (changedValues: any, values: T) => void;
+    /**提交保存 验证成功*/
+    onFinish?: (values: T) => void;
+    /**提交保存 验证失败*/
+    onFinishFailed?: (errorInfo: ValidateErrorEntity<T>) => void;
+    /**
+     * 重置字段数据值
+     */
+    resetFieldsValue: (initial?: Partial<T>) => this;
+    /**注册一个 formIList 实例*/
+    registerFormList: (name: string, itemInstance: Ref<FormListInstanceBase>) => () => void;
+    /**注册一个 formItem 实例*/
+    registerFormItem: (itemInstance: Ref<FormItemInstanceBase>) => () => void;
+    /**更新字段是否隐藏*/
+    updatedFieldHideValue: (value: Record<string, boolean>) => this;
+    /**更新字段value值
+     *
+     * @param name 字段
+     * @param value 字段值
+     * @param validateType 校验规则处理
+     * @param isOnlySave 仅用于存储
+     *
+     */
+    updatedFieldValue: (name: string, value: any, validateType?: "validate" | "clear" | "none") => this;
+    /**获取 formList 实例或者集合*/
+    getFormListInstance: (name: string) => Ref<FormListInstanceBase, FormListInstanceBase> | undefined;
+    /**获取字段值*/
+    getFieldValue: (name?: string) => any;
+    /**获取字段隐藏值*/
+    getFieldHideValue: (name?: string) => any;
+    /**
+     * 只进行验证，没有返回值
+     * */
+    onlyValidate: (name: string | string[]) => Promise<this>;
+    /**规则验证 ，默认不传递验证所有 */
+    validate: (names?: string[], isGetAllData?: boolean) => Promise<T>;
+    /**
+     * 提交
+     */
+    submit: () => Promise<void>;
+}

package/esm/instance/formInstance.js

@@ -0,0 +1,132 @@
+import { cloneByNamePathList, get, has, set } from "../utils/index.js";
+import { ref, toValue } from "vue";
+class FormInstanceBase {
+    formData = ref({});
+    formItemInstances = [];
+    formListInstances = new Map([]);
+    hideState = ref({});
+    preserve = true;
+    onValuesChange;
+    onFinish;
+    onFinishFailed;
+    resetFieldsValue = (initial = {})=>{
+        this.formData.value = Object.assign(this.formData.value, initial);
+        return this;
+    };
+    registerFormList = (name, itemInstance)=>{
+        this.formListInstances.set(name, itemInstance);
+        return ()=>{
+            this.formListInstances.delete(name);
+        };
+    };
+    registerFormItem = (itemInstance)=>{
+        this.formItemInstances.push(itemInstance);
+        return ()=>{
+            const instanceItem = toValue(itemInstance);
+            this.formItemInstances = this.formItemInstances.filter((ite)=>ite !== itemInstance);
+            let preserve = this.preserve;
+            if (instanceItem?.preserve === false) preserve = instanceItem.preserve;
+            const name = `${instanceItem?.name}`;
+            const formData = toValue(this.formData);
+            if (name && has(formData, name) && !preserve) this.formData.value = set(formData, instanceItem.name, void 0);
+        };
+    };
+    updatedFieldHideValue = (value)=>{
+        const names = Object.keys(value || {});
+        names.forEach((key)=>{
+            this.hideState.value = set(this.hideState.value, key, value[key]);
+        });
+        return this;
+    };
+    updatedFieldValue = (name, value, validateType = 'validate')=>{
+        this.formData.value = set(this.formData.value, name, value);
+        if ('validate' === validateType) this.onlyValidate(name);
+        else if ('clear' === validateType) {
+            const formItemInstance = this.formItemInstances.find((ite)=>ite.value.name === name);
+            const instanceItem = toValue(formItemInstance);
+            const instanceItemRule = toValue(instanceItem?.rule);
+            if (instanceItemRule) instanceItemRule?.updatedMessages?.([]);
+        }
+        return this;
+    };
+    getFormListInstance = (name)=>this.formListInstances.get(name);
+    getFieldValue = (name)=>{
+        const fromData = toValue(this.formData);
+        if (name) {
+            if (has(fromData, name)) return get(fromData, name);
+            return;
+        }
+        return fromData;
+    };
+    getFieldHideValue = (name)=>{
+        const hideData = toValue(this.hideState);
+        if (name) return get(hideData, name);
+        return hideData;
+    };
+    onlyValidate = async (name)=>{
+        try {
+            if (Array.isArray(name)) await this.validate(name, false);
+            else await this.validate([
+                name
+            ], false);
+        } catch (err) {
+            console.log(err);
+        }
+        return this;
+    };
+    validate = (names, isGetAllData = true)=>new Promise(async (resolve, reject)=>{
+            const errorFields = [];
+            const notErrorFields = [];
+            const newFormItemInstances = this.formItemInstances;
+            const nameListPath = newFormItemInstances.map((item)=>item.value.name);
+            const lg = newFormItemInstances.length;
+            const isNames = Array.isArray(names) && names.length;
+            for(let index = 0; index < lg; index++){
+                const instanceItemRef = newFormItemInstances[index];
+                const instanceItem = toValue(instanceItemRef);
+                const rule = toValue(instanceItem.rule);
+                if (rule && rule.isValidate()) {
+                    let isValidate = true;
+                    if (isNames) {
+                        const findx = names.find((name)=>name === instanceItem.name);
+                        if (!findx) isValidate = false;
+                    }
+                    try {
+                        if (isValidate) {
+                            await rule.validate();
+                            notErrorFields.push({
+                                errors: [],
+                                sort: instanceItem.sort,
+                                name: instanceItem.name
+                            });
+                        }
+                    } catch (errors) {
+                        if (errors) errorFields.push({
+                            errors,
+                            sort: instanceItem.sort,
+                            name: instanceItem.name
+                        });
+                    }
+                } else notErrorFields.push({
+                    errors: [],
+                    sort: instanceItem.sort,
+                    name: instanceItem.name
+                });
+            }
+            const values = isGetAllData ? cloneByNamePathList(this.getFieldValue(), nameListPath) : {};
+            if (errorFields.length) reject({
+                errorFields,
+                values: values
+            });
+            else resolve(values);
+        });
+    submit = async ()=>{
+        try {
+            const result = await this.validate();
+            if (result) this?.onFinish?.(result);
+        } catch (error) {
+            this.onFinishFailed?.(error);
+        }
+    };
+}
+export { FormInstanceBase };

package/esm/instance/formItemBaseInstance.d.ts

@@ -0,0 +1,23 @@
+import { Ref } from 'vue';
+import { FormInstanceBase } from './formInstance';
+export declare class FormItemBaseInstance {
+    /**
+     * 顺序
+     * @example
+     * "0"
+     * "0-0"
+     * "0-0-0"
+     */
+    sort?: string;
+    /**
+     * 字段 ，分割方式与lodash的get和set方法值更新或设置路径一致
+     * @example
+     * 默认："name"
+     * 嵌套字段："name.a.doc"
+     * 嵌套字段："name[1].a.doc"
+     * 嵌套字段："name.a[2].doc"
+     */
+    name: string;
+    /**表单实例*/
+    instance?: Ref<FormInstanceBase>;
+}

package/esm/instance/formItemBaseInstance.js

@@ -0,0 +1,6 @@
+class FormItemBaseInstance {
+    sort;
+    name = '';
+    instance;
+}
+export { FormItemBaseInstance };

package/esm/instance/formItemInstance.d.ts

@@ -0,0 +1,18 @@
+import { RuleInstanceBase } from './ruleIntsnace';
+import { FormInstanceBase } from './formInstance';
+import { FormItemBaseInstance } from './formItemBaseInstance';
+import { Ref } from 'vue';
+export declare class FormItemInstanceBase extends FormItemBaseInstance {
+    /**父级字段*/
+    parentDataField?: string;
+    /**通知 只用于校验规则提示 字段 */
+    noticeOnlyRuleDataField?: string[];
+    htmlFor?: string;
+    control?: Ref<any>;
+    /**规则*/
+    rule?: Ref<RuleInstanceBase>;
+    /**是否保护值(不进行表单项组件卸载重置初始值)*/
+    preserve?: boolean;
+    /**触发数据更新之后触发（用于数据联动之类的）*/
+    onAfterUpdate?: (value: any, instance: Ref<FormInstanceBase>, instanceAttr: Ref<FormItemInstanceBase>, event: any) => void;
+}

package/esm/instance/formItemInstance.js

@@ -0,0 +1,11 @@
+import { FormItemBaseInstance } from "./formItemBaseInstance.js";
+class FormItemInstanceBase extends FormItemBaseInstance {
+    parentDataField;
+    noticeOnlyRuleDataField;
+    htmlFor;
+    control;
+    rule;
+    preserve = true;
+    onAfterUpdate;
+}
+export { FormItemInstanceBase };

package/esm/instance/formListInstance.d.ts

@@ -0,0 +1,43 @@
+import { FormItemBaseInstance } from './formItemBaseInstance';
+import { RuleInstanceBase } from './ruleIntsnace';
+import { FormItemInstanceBase } from './formItemInstance';
+import { Ref } from 'vue';
+export declare class FormListInstanceBase extends FormItemBaseInstance {
+    /**规则*/
+    rule?: Ref<RuleInstanceBase>;
+    /**表单实例*/
+    formItemInstance?: Ref<FormItemInstanceBase>;
+    /**父级字段*/
+    parentDataField?: string;
+    /**记录key值*/
+    keys: number[];
+    /**累加数据，唯一性*/
+    id: number;
+    /**
+     * 初始化
+     * @param name 字段
+     */
+    ctor: (name: string) => this;
+    /**获取值*/
+    getLastValue: () => any[];
+    /**
+     * 添加一条
+     * @param initialValue 初始值
+     * @param unshift 是否加入数组前面
+     */
+    onAdd: (initialValue?: Object, unshift?: boolean) => void;
+    /**
+     * 删除
+     * @param index 删除数据下标
+     */
+    onDelete: (index: number | number[]) => void;
+    /**移动*/
+    onMove: (from: number, to: number) => void;
+    /**更新某个item数据*/
+    updatedItem: (index: number, item: any) => void;
+    /**获取渲染 list 字段拼接*/
+    getFields: () => {
+        name: number;
+        key: number;
+    }[];
+}

package/esm/instance/formListInstance.js

@@ -0,0 +1,95 @@
+import { FormItemBaseInstance } from "./formItemBaseInstance.js";
+import { toValue } from "vue";
+class FormListInstanceBase extends FormItemBaseInstance {
+    rule;
+    formItemInstance;
+    parentDataField;
+    keys = [];
+    id = 0;
+    ctor = (name)=>{
+        this.name = name;
+        return this;
+    };
+    getLastValue = ()=>{
+        const form = toValue(this.instance);
+        const value = form?.getFieldValue?.(this.name);
+        const lastValue = Array.isArray(value) ? value : [];
+        return lastValue;
+    };
+    onAdd = (initialValue = {}, unshift)=>{
+        const form = toValue(this.instance);
+        const value = this.getLastValue();
+        if (unshift) {
+            const listData = [
+                initialValue || {},
+                ...value
+            ];
+            this.keys = [
+                this.id,
+                ...this.keys
+            ];
+            this.id++;
+            form?.updatedFieldValue?.(this.name, listData);
+        } else {
+            const listData = [
+                ...value,
+                initialValue || {}
+            ];
+            this.keys = [
+                ...this.keys,
+                this.id
+            ];
+            this.id++;
+            form?.updatedFieldValue?.(this.name, listData);
+        }
+    };
+    onDelete = (index)=>{
+        const form = toValue(this.instance);
+        const value = this.getLastValue();
+        const newIndexs = Array.isArray(index) ? index : [
+            index
+        ];
+        this.keys = this.keys.filter((_, index)=>!newIndexs.includes(index));
+        const listData = value.filter((_, index)=>!newIndexs.includes(index));
+        form?.updatedFieldValue?.(this.name, listData);
+    };
+    onMove = (from, to)=>{
+        const form = toValue(this.instance);
+        const newList = this.getLastValue();
+        const fromItem = newList[from];
+        const toItem = newList[to];
+        newList[from] = toItem;
+        newList[to] = fromItem;
+        form?.updatedFieldValue?.(this.name, [
+            ...newList
+        ]);
+    };
+    updatedItem = (index, item)=>{
+        const form = toValue(this.instance);
+        const newList = this.getLastValue();
+        const newItem = newList[index];
+        newList[index] = {
+            ...newItem,
+            ...item
+        };
+        form?.updatedFieldValue?.(this.name, [
+            ...newList
+        ]);
+    };
+    getFields = ()=>{
+        const values = this.getLastValue();
+        return values.map((__, index)=>{
+            let key = this.keys[index];
+            if (void 0 === key) {
+                this.keys[index] = this.id;
+                key = this.keys[index];
+                this.id++;
+            }
+            return {
+                name: index,
+                key
+            };
+        });
+    };
+}
+export { FormListInstanceBase };

package/esm/instance/index.d.ts

@@ -0,0 +1,5 @@
+export * from './formInstance';
+export * from './formItemInstance';
+export * from './formListInstance';
+export * from './multipleInstance';
+export * from './ruleIntsnace';

package/esm/instance/index.js

@@ -0,0 +1,5 @@
+export * from "./formInstance.js";
+export * from "./formItemInstance.js";
+export * from "./formListInstance.js";
+export * from "./multipleInstance.js";
+export * from "./ruleIntsnace.js";

package/esm/instance/multipleInstance.d.ts

@@ -0,0 +1,32 @@
+import type { FormInstanceBase } from './formInstance';
+import { Ref } from 'vue';
+export declare class MultipleInstanceBase {
+    instanceMap: Map<string, Ref<FormInstanceBase>>;
+    /**
+     * 注册表单实例
+     * @param name 表单名称
+     * @param form 表单实例
+     */
+    ctor: (name: string, form: Ref<FormInstanceBase>) => () => void;
+    /**
+     * 获取表单实例
+     * @param name 表单名称
+     */
+    getInstance: (name?: string) => Ref<FormInstanceBase<any>, FormInstanceBase<any>> | Map<string, Ref<FormInstanceBase<any>, FormInstanceBase<any>>> | undefined;
+    /**
+     * 验证表单规则
+     * @param namePath 表单名称(如果不传递表单名称,则验证所有表单)
+     *
+     * @example
+     */
+    validate: (namePath?: string | string[] | Record<string, string[]>) => Promise<unknown>;
+    /**
+     * 获取表单中值
+     * @param name 表单名称 (不存在时，获取所有表单值)
+     * @param path 字段路径 (不存在的时候直接获取对应表单所有值)
+     *
+     */
+    getFormFieldValue: (name?: string, dataField?: string | string[]) => {
+        [x: string]: any;
+    };
+}

package/esm/instance/multipleInstance.js

@@ -0,0 +1,77 @@
+import { cloneByNamePathList } from "../utils/index.js";
+import { toValue } from "vue";
+class MultipleInstanceBase {
+    instanceMap = new Map([]);
+    ctor = (name, form)=>{
+        this.instanceMap.set(name, form);
+        return ()=>{
+            this.instanceMap.delete(name);
+        };
+    };
+    getInstance = (name)=>{
+        if (name) return this.instanceMap.get(name);
+        return this.instanceMap;
+    };
+    validate = (namePath)=>new Promise(async (resolve, reject)=>{
+            const listFormErrors = {};
+            let isSuccess = true;
+            let nameKeys = [];
+            let isObject = false;
+            if (namePath) if (Array.isArray(namePath)) nameKeys = namePath;
+            else if ('[object Object]' === Object.prototype.toString.call(namePath)) {
+                isObject = true;
+                nameKeys = Object.keys(namePath);
+            } else nameKeys = [
+                namePath
+            ];
+            else nameKeys = Array.from(this.instanceMap.keys());
+            const lg = nameKeys.length;
+            for(let index = 0; index < lg; index++){
+                const name = nameKeys[index];
+                const form = this.instanceMap.get(name);
+                const formInstacne = toValue(form);
+                try {
+                    if (formInstacne) {
+                        const paths = isObject ? namePath[name] : void 0;
+                        const result = await formInstacne.validate(paths);
+                        listFormErrors[name] = {
+                            errorFields: [],
+                            values: result
+                        };
+                    }
+                } catch (errs) {
+                    isSuccess = false;
+                    listFormErrors[name] = errs;
+                }
+            }
+            if (isSuccess) resolve(listFormErrors);
+            else reject(listFormErrors);
+        });
+    getFormFieldValue = (name, dataField)=>{
+        if (!name) {
+            const data = {};
+            this.instanceMap.forEach((form, key)=>{
+                data[key] = form.value.getFieldValue();
+            });
+            return data;
+        }
+        const form = this.instanceMap.get(name);
+        const formInstacne = toValue(form);
+        if (formInstacne) {
+            if ('string' == typeof dataField) return {
+                [name]: formInstacne.getFieldValue(dataField)
+            };
+            if (dataField) {
+                const formData = formInstacne.getFieldValue();
+                const data = cloneByNamePathList(formData, dataField);
+                return {
+                    [name]: data
+                };
+            }
+        }
+        return {
+            [name]: {}
+        };
+    };
+}
+export { MultipleInstanceBase };

package/esm/instance/ruleIntsnace.d.ts

@@ -0,0 +1,45 @@
+import { RuleItem } from 'async-validator';
+import { FormInstanceBase } from './formInstance';
+import { MessageType } from '../interface';
+import { Ref } from 'vue';
+export declare class RuleInstanceBase {
+    /**
+     * 顺序
+     * @example
+     * "0"
+     * "0-0"
+     * "0-0-0"
+     */
+    sort?: string;
+    /**表单实例*/
+    instance?: Ref<FormInstanceBase<any>>;
+    /**
+     * 字段 ，分割方式与lodash的get和set方法值更新或设置路径一致
+     * @example
+     * 默认："name"
+     * 嵌套字段："name.a.doc"
+     * 嵌套字段："name[1].a.doc"
+     * 嵌套字段："name.a[2].doc"
+     */
+    name: string;
+    /**规则*/
+    rules: Ref<RuleItem[]>;
+    /**错误提示内容*/
+    messages: Ref<MessageType[] | undefined>;
+    /**判断是否必填*/
+    isRequired: () => boolean;
+    /**判断是否需要验证*/
+    isValidate: () => number | false;
+    /**更新提示信息*/
+    updatedMessages: (messages?: MessageType[]) => void;
+    /**更新规则*/
+    updatedRules: (rules: RuleItem[]) => void;
+    /**验证规则
+     */
+    validate: () => Promise<unknown>;
+    /**获取校验结果*/
+    getValidateResult: () => {
+        tip: string | (string | undefined)[];
+        isInvalid: boolean;
+    };
+}