@carefrees/form-utils-vue 0.0.8

package/lib/hooks/register/register.FormList.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const register_FormItem = require("./register.FormItem.js");
+const useFormList = require("../useFormList.js");
+const useEffect = require("../useEffect.js");
+const useRegisterFormList = (options) => {
+  const { ruleInstance, formItemInstance, form, newName, parentItem } = register_FormItem.useRegisterFormItem(options);
+  const formListInstance = useFormList.useFormList();
+  vue.watch(
+    [newName.value],
+    () => {
+      formListInstance.ctor(newName.value);
+    },
+    { immediate: true }
+  );
+  vue.watch(
+    [form, formItemInstance, ruleInstance.value],
+    () => {
+      formListInstance.instance = form;
+      formListInstance.formItemInstance = formItemInstance;
+      formListInstance.rule = ruleInstance.value;
+    },
+    { immediate: true }
+  );
+  vue.watch(
+    [options.sort, parentItem.value],
+    () => {
+      formListInstance.sort = vue.toValue(parentItem.value.sort);
+      formListInstance.parentDataField = vue.toValue(parentItem.value.name);
+    },
+    { immediate: true }
+  );
+  useEffect.useEffect(() => {
+    return form.registerFormList(newName.value, formListInstance);
+  });
+  return {
+    ruleInstance,
+    formItemInstance,
+    formListInstance
+  };
+};
+exports.useRegisterFormList = useRegisterFormList;

package/lib/hooks/register/register.form.d.ts

@@ -0,0 +1,3 @@
+import { FormInstanceBase } from '@carefrees/form-utils';
+/**注册表单实例到多表单收集实例中*/
+export declare const useRegisterForm: (form: FormInstanceBase, name?: string) => import('@carefrees/form-utils').MultipleInstanceBase;

package/lib/hooks/register/register.form.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const useMultipleForm = require("../useMultipleForm.js");
+const useEffect = require("../useEffect.js");
+const useRegisterForm = (form, name) => {
+  const multipleForm = useMultipleForm.useMultipleFormInject();
+  useEffect.useEffect(() => {
+    if (name) return multipleForm.ctor(name, form);
+  });
+  return multipleForm;
+};
+exports.useRegisterForm = useRegisterForm;

package/lib/hooks/useAttrs.d.ts

@@ -0,0 +1,24 @@
+import { StyleValue, ComputedRef } from 'vue';
+import { ComputedRefBase } from '../interface';
+export type AttrsOptions = {
+    /**列数据*/
+    colCount?: ComputedRefBase<number | undefined>;
+    /**规则校验失败错误提示位置*/
+    errorLayout?: ComputedRefBase<'left-bottom' | 'right-bottom' | 'top-right' | 'top-left' | undefined>;
+    /**label显示模式*/
+    labelMode?: ComputedRefBase<'left' | 'top' | 'hide' | undefined>;
+    /**是否显示label后的冒号*/
+    showColon?: ComputedRefBase<boolean | undefined>;
+    /**表单项 className*/
+    formItemClass?: ComputedRefBase<string | undefined>;
+    /**表单项 style*/
+    formItemStyle?: ComputedRefBase<StyleValue | undefined>;
+    /**表单项 label  className*/
+    formItemLabelClass?: ComputedRefBase<string | undefined>;
+    /**表单项 label  style*/
+    formItemLabelStyle?: ComputedRefBase<StyleValue | undefined>;
+};
+/**公共属性 Context */
+export declare function useAttrsProvide(options: AttrsOptions): void;
+/**子项中获取公共属性*/
+export declare function useAttrsInject(): ComputedRef<AttrsOptions>;

package/lib/hooks/useAttrs.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const attrsProvideSymbol = Symbol("carefrees-attrs");
+function useAttrsProvide(options) {
+  const {
+    colCount = vue.ref(4),
+    errorLayout = vue.ref("left-bottom"),
+    labelMode = vue.ref("top"),
+    showColon = vue.ref(true),
+    formItemClass,
+    formItemStyle,
+    formItemLabelClass,
+    formItemLabelStyle
+  } = options;
+  const data = vue.computed(() => {
+    return {
+      colCount,
+      errorLayout,
+      labelMode,
+      showColon,
+      formItemClass,
+      formItemStyle,
+      formItemLabelClass,
+      formItemLabelStyle
+    };
+  });
+  vue.provide(attrsProvideSymbol, vue.reactive(data));
+}
+function useAttrsInject() {
+  const attrs = vue.inject(
+    attrsProvideSymbol,
+    vue.computed(
+      () => vue.toRefs({
+        colCount: 4,
+        errorLayout: "left-bottom",
+        labelMode: "top",
+        showColon: true
+      })
+    )
+  );
+  return attrs;
+}
+exports.useAttrsInject = useAttrsInject;
+exports.useAttrsProvide = useAttrsProvide;

package/lib/hooks/useEffect.d.ts

@@ -0,0 +1,2 @@
+/**挂载卸载*/
+export declare const useEffect: (fun: () => Function | undefined) => void;

package/lib/hooks/useEffect.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const useEffect = (fun) => {
+  const unRegisterRef = vue.ref();
+  vue.onMounted(() => {
+    unRegisterRef.value = fun();
+  });
+  vue.onUnmounted(() => {
+    typeof unRegisterRef.value === "function" && unRegisterRef.value();
+    unRegisterRef.value = void 0;
+  });
+};
+exports.useEffect = useEffect;

package/lib/hooks/useForm.d.ts

@@ -0,0 +1,8 @@
+import { FormInstanceBase } from '@carefrees/form-utils';
+import { Ref } from 'vue';
+/**表单实例 Context */
+export declare function useFormProvide<T = any>(form: FormInstanceBase<T>): void;
+/**子项中获取表单实例*/
+export declare function useFormInject<T = any>(): FormInstanceBase<T>;
+/**初始化表单实例*/
+export declare function useForm<T = any>(form?: FormInstanceBase<T>): Ref<FormInstanceBase<T>, FormInstanceBase<T>>;

package/lib/hooks/useForm.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const formUtils = require("@carefrees/form-utils");
+const vue = require("vue");
+const formProvideSymbol = Symbol("carefrees-form");
+function useFormProvide(form) {
+  vue.provide(formProvideSymbol, form);
+}
+function useFormInject() {
+  const form = vue.inject(formProvideSymbol, new formUtils.FormInstanceBase());
+  return form;
+}
+function useForm(form) {
+  const refForm = vue.ref();
+  if (!refForm.value) {
+    if (form) {
+      refForm.value = form;
+    } else {
+      refForm.value = new formUtils.FormInstanceBase();
+    }
+  }
+  return refForm;
+}
+exports.useForm = useForm;
+exports.useFormInject = useFormInject;
+exports.useFormProvide = useFormProvide;

package/lib/hooks/useFormItem.d.ts

@@ -0,0 +1,7 @@
+import { FormItemInstanceBase } from '@carefrees/form-utils';
+/**表单项实例 Context */
+export declare function useFormItemProvide(formItem: FormItemInstanceBase): void;
+/**子项中获取表单项实例*/
+export declare function useFormItemInject(): FormItemInstanceBase;
+/**s初始化 表单项实例*/
+export declare function useFormItem(formItem?: FormItemInstanceBase): FormItemInstanceBase;

package/lib/hooks/useFormItem.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const formUtils = require("@carefrees/form-utils");
+const vue = require("vue");
+const formItemProvideSymbol = Symbol("carefrees-form-item");
+function useFormItemProvide(formItem) {
+  vue.provide(formItemProvideSymbol, formItem);
+}
+function useFormItemInject() {
+  const formItem = vue.inject(formItemProvideSymbol, new formUtils.FormItemInstanceBase());
+  return formItem;
+}
+function useFormItem(formItem) {
+  const refForm = vue.ref();
+  if (!refForm.value) {
+    if (formItem) {
+      refForm.value = formItem;
+    } else {
+      refForm.value = new formUtils.FormItemInstanceBase();
+    }
+  }
+  return refForm.value;
+}
+exports.useFormItem = useFormItem;
+exports.useFormItemInject = useFormItemInject;
+exports.useFormItemProvide = useFormItemProvide;

package/lib/hooks/useFormItemParentName.d.ts

@@ -0,0 +1,18 @@
+import { ComputedRef } from 'vue';
+import { PartialComputedRefs } from '../interface';
+export interface FormItemParentNamOptions {
+    /**字段*/
+    name: string;
+    /**排序*/
+    sort?: string;
+    /**是否拼接父级字段*/
+    isJoinParentField?: boolean;
+}
+export type FormItemParentNameProviderProps = PartialComputedRefs<Omit<FormItemParentNamOptions, 'isJoinParentField'>>;
+export declare const useFormItemParentNameProvide: (props: FormItemParentNameProviderProps) => void;
+/**表单项获取父级字段*/
+export declare const useFormItemParentNameInject: (options: FormItemParentNamOptions) => {
+    newName: ComputedRef<string>;
+    newSort: ComputedRef<string>;
+    parentItem: ComputedRef<PartialComputedRefs<Omit<FormItemParentNamOptions, "isJoinParentField">>>;
+};

package/lib/hooks/useFormItemParentName.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const parentNameProvideSymbol = Symbol("carefrees-parent-name");
+const useFormItemParentNameProvide = (props) => {
+  const { name, sort } = props;
+  vue.provide(
+    parentNameProvideSymbol,
+    vue.computed(() => ({ name, sort }))
+  );
+};
+const useFormItemParentNameInject = (options) => {
+  const { isJoinParentField = true, sort, name } = options;
+  const parentItem = vue.inject(
+    parentNameProvideSymbol,
+    vue.computed(() => ({ name: vue.ref(""), sort: vue.ref("") }))
+  );
+  const newName = vue.computed(() => {
+    const _name = vue.toValue(parentItem.value.name);
+    if (_name && isJoinParentField) {
+      if (/^\./.test(`${name}`)) {
+        return [_name, name].filter(Boolean).join("");
+      } else if (name) {
+        return [_name, ".", name].filter(Boolean).join("");
+      }
+      return [_name, name].filter(Boolean).join("");
+    }
+    return [name].filter(Boolean).join("");
+  });
+  const newSort = vue.computed(() => {
+    const _sort = vue.toValue(parentItem.value.sort);
+    return [isJoinParentField ? _sort : "", sort].filter(Boolean).join("-");
+  });
+  return { newName, newSort, parentItem };
+};
+exports.useFormItemParentNameInject = useFormItemParentNameInject;
+exports.useFormItemParentNameProvide = useFormItemParentNameProvide;

package/lib/hooks/useFormList.d.ts

@@ -0,0 +1,7 @@
+import { FormListInstanceBase } from '@carefrees/form-utils';
+/**表单List实例 Context */
+export declare function useFormListProvide(formList: FormListInstanceBase): void;
+/**子项中获取表单List实例*/
+export declare function useFormListInject(): FormListInstanceBase;
+/**初始化 表单List实例*/
+export declare function useFormList(formList?: FormListInstanceBase): FormListInstanceBase;

package/lib/hooks/useFormList.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const formUtils = require("@carefrees/form-utils");
+const vue = require("vue");
+const formListProvideSymbol = Symbol("carefrees-form-list");
+function useFormListProvide(formList) {
+  vue.provide(formListProvideSymbol, formList);
+}
+function useFormListInject() {
+  const formList = vue.inject(formListProvideSymbol, new formUtils.FormListInstanceBase());
+  return formList;
+}
+function useFormList(formList) {
+  const refForm = vue.ref();
+  if (!refForm.value) {
+    if (formList) {
+      refForm.value = formList;
+    } else {
+      refForm.value = new formUtils.FormListInstanceBase();
+    }
+  }
+  return refForm.value;
+}
+exports.useFormList = useFormList;
+exports.useFormListInject = useFormListInject;
+exports.useFormListProvide = useFormListProvide;

package/lib/hooks/useHtmlFor.d.ts

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

package/lib/hooks/useHtmlFor.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+let localId = 0;
+const useHtmlFor = (suffix) => {
+  const count = vue.ref(localId++);
+  return vue.computed(() => {
+    return `carefree-vue-form-item_${count.value.toString(32)}_${suffix.value}`;
+  });
+};
+exports.useHtmlFor = useHtmlFor;

package/lib/hooks/useMultipleForm.d.ts

@@ -0,0 +1,7 @@
+import { MultipleInstanceBase } from '@carefrees/form-utils';
+/**多表单收集 Context */
+export declare function useMultipleFormProvide(multipleForm?: MultipleInstanceBase): void;
+/**子项中获取 多表单收集 实例*/
+export declare function useMultipleFormInject(): MultipleInstanceBase;
+/**初始化 多表单收集 实例*/
+export declare function useMultipleForm(multipleForm?: MultipleInstanceBase): MultipleInstanceBase;

package/lib/hooks/useMultipleForm.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const formUtils = require("@carefrees/form-utils");
+const vue = require("vue");
+const multipleFormProvideSymbol = Symbol("carefrees-multiple-form");
+function useMultipleFormProvide(multipleForm) {
+  const newMultipleForm = useMultipleForm(multipleForm);
+  vue.provide(multipleFormProvideSymbol, newMultipleForm);
+}
+function useMultipleFormInject() {
+  const multipleForm = vue.inject(multipleFormProvideSymbol, new formUtils.MultipleInstanceBase());
+  return multipleForm;
+}
+function useMultipleForm(multipleForm) {
+  const refForm = vue.ref();
+  if (!refForm.value) {
+    if (multipleForm) {
+      refForm.value = multipleForm;
+    } else {
+      refForm.value = new formUtils.MultipleInstanceBase();
+    }
+  }
+  return refForm.value;
+}
+exports.useMultipleForm = useMultipleForm;
+exports.useMultipleFormInject = useMultipleFormInject;
+exports.useMultipleFormProvide = useMultipleFormProvide;

package/lib/index.d.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue';
+export * from './hooks';
+export * from './component';
+export * from './utils';
+export * from './interface';
+export * from './interface/layout';
+export * from './interface/layout.formItem';
+declare const _default: {
+    install: (app: App) => void;
+};
+export default _default;

package/lib/index.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const component = require("./component.js");
+const useAttrs = require("./hooks/useAttrs.js");
+const useForm = require("./hooks/useForm.js");
+const useFormItem = require("./hooks/useFormItem.js");
+const useFormList = require("./hooks/useFormList.js");
+const useHtmlFor = require("./hooks/useHtmlFor.js");
+const useMultipleForm = require("./hooks/useMultipleForm.js");
+const useFormItemParentName = require("./hooks/useFormItemParentName.js");
+const useEffect = require("./hooks/useEffect.js");
+const register_FormHideItem = require("./hooks/register/register.FormHideItem.js");
+const register_FormItem = require("./hooks/register/register.FormItem.js");
+const register_FormList = require("./hooks/register/register.FormList.js");
+const register_form = require("./hooks/register/register.form.js");
+const attr_FormItem = require("./hooks/attr/attr.FormItem.js");
+const withInstall = require("./utils/withInstall.js");
+const index$1 = require("./form/index.js");
+const index$2 = require("./formItem/index.js");
+const index$3 = require("./layout/index.js");
+const index = {
+  install: (app) => {
+    for (const c in component) {
+      app.use(component[c]);
+    }
+  }
+};
+exports.useAttrsInject = useAttrs.useAttrsInject;
+exports.useAttrsProvide = useAttrs.useAttrsProvide;
+exports.useForm = useForm.useForm;
+exports.useFormInject = useForm.useFormInject;
+exports.useFormProvide = useForm.useFormProvide;
+exports.useFormItem = useFormItem.useFormItem;
+exports.useFormItemInject = useFormItem.useFormItemInject;
+exports.useFormItemProvide = useFormItem.useFormItemProvide;
+exports.useFormList = useFormList.useFormList;
+exports.useFormListInject = useFormList.useFormListInject;
+exports.useFormListProvide = useFormList.useFormListProvide;
+exports.useHtmlFor = useHtmlFor.useHtmlFor;
+exports.useMultipleForm = useMultipleForm.useMultipleForm;
+exports.useMultipleFormInject = useMultipleForm.useMultipleFormInject;
+exports.useMultipleFormProvide = useMultipleForm.useMultipleFormProvide;
+exports.useFormItemParentNameInject = useFormItemParentName.useFormItemParentNameInject;
+exports.useFormItemParentNameProvide = useFormItemParentName.useFormItemParentNameProvide;
+exports.useEffect = useEffect.useEffect;
+exports.useRegisterFormHideItem = register_FormHideItem.useRegisterFormHideItem;
+exports.useRegisterFormItem = register_FormItem.useRegisterFormItem;
+exports.useRegisterFormList = register_FormList.useRegisterFormList;
+exports.useRegisterForm = register_form.useRegisterForm;
+exports.useFormItemAttr = attr_FormItem.useFormItemAttr;
+exports.withInstall = withInstall.withInstall;
+exports.Form = index$1.Form;
+exports.FormHideItem = index$2.FormHideItem;
+exports.FormItem = index$2.FormItem;
+exports.FormItemBase = index$2.FormItemBase;
+exports.FormLayoutRows = index$3.FormLayoutRows;
+exports.Layout = index$3.Layout;
+exports.LayoutFormItem = index$3.LayoutFormItem;
+exports.default = index;

package/lib/instance/ruleIntsnace.d.ts

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

package/lib/instance/ruleIntsnace.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const AsyncValidator = require("async-validator");
+const vue = require("vue");
+class RuleInstanceBase2 {
+  constructor() {
+    this.name = "";
+    this.rules = vue.ref([]);
+    this.messages = vue.ref([]);
+    this.isRequired = () => {
+      var _a, _b;
+      if ((_b = (_a = this.instance) == null ? void 0 : _a.getFieldHideRulesValue) == null ? void 0 : _b.call(_a, this.name)) {
+        return false;
+      }
+      const findItem = (vue.toValue(this.rules) || []).find((item) => item == null ? void 0 : item.required);
+      return !!findItem;
+    };
+    this.ctor = (name, rules) => {
+      this.name = name;
+      this.rules.value = rules || [];
+      return this;
+    };
+    this.isValidate = () => {
+      var _a, _b;
+      if ((_b = (_a = this.instance) == null ? void 0 : _a.getFieldHideRulesValue) == null ? void 0 : _b.call(_a, this.name)) {
+        return false;
+      }
+      const _rules = vue.toValue(this.rules);
+      return !!(Array.isArray(_rules) && _rules.length);
+    };
+    this.updatedMessages = (messages) => {
+      var _a;
+      this.messages.value = messages || [];
+      (_a = this.updated) == null ? void 0 : _a.call(this, {});
+    };
+    this.updatedRules = (rules) => {
+      var _a;
+      this.rules.value = rules;
+      (_a = this.updatedMessages) == null ? void 0 : _a.call(this, []);
+    };
+    this.validate = (isOnly = false) => {
+      return new Promise((resolve, reject) => {
+        var _a, _b, _c, _d;
+        const value = (_b = (_a = this.instance) == null ? void 0 : _a.getFieldValue) == null ? void 0 : _b.call(_a, this.name);
+        if ((_d = (_c = this.instance) == null ? void 0 : _c.getFieldHideRulesValue) == null ? void 0 : _d.call(_c, this.name)) {
+          this.updatedMessages([]);
+          resolve({ [this.name]: value });
+        }
+        new AsyncValidator({ [this.name]: vue.toValue(this.rules) || [] }).validate({ [this.name]: value }).then((values) => {
+          if (!isOnly) this.updatedMessages([]);
+          resolve(values);
+        }).catch(({ errors }) => {
+          if (Array.isArray(errors)) {
+            if (!isOnly) this.updatedMessages(errors);
+            reject(errors);
+          } else {
+            reject();
+          }
+        });
+      });
+    };
+    this.getValidateResult = () => {
+      const _messages = vue.toValue(this.messages);
+      const tip = Array.isArray(_messages) ? _messages.map((it) => it.message) : "";
+      const isInvalid = Array.isArray(tip) ? !!tip.length : !!tip;
+      return {
+        tip,
+        isInvalid
+      };
+    };
+  }
+}
+exports.RuleInstanceBase2 = RuleInstanceBase2;

package/lib/interface/index.d.ts

@@ -0,0 +1,36 @@
+import { ComputedRef, Ref, VNodeChild, StyleValue, UnwrapNestedRefs } from 'vue';
+import { FormItemAttrOptions } from '../hooks/attr/attr.FormItem';
+import { LayoutFormItemProps } from './layout.formItem';
+import { FormLayoutProps } from './layout';
+import { FormInstanceBase, ValidateErrorEntity } from '@carefrees/form-utils';
+export type ComputedRefBase<T> = ComputedRef<T> | Ref<T>;
+export type PartialComputedRefs<T> = {
+    [K in keyof T]: ComputedRefBase<T[K]>;
+};
+export interface FormItemProps extends FormItemAttrOptions, LayoutFormItemProps {
+    /**不进行样式渲染*/
+    noStyle?: boolean;
+    /**输入框组件*/
+    input?: VNodeChild;
+}
+export interface FormProps<T = any> extends FormLayoutProps {
+    form?: FormInstanceBase;
+    style?: StyleValue;
+    class?: string;
+    layoutClass?: string;
+    layoutStyle?: StyleValue;
+    /**表单数据*/
+    formData?: any;
+    /**值更新触发*/
+    onValuesChange?: (changedValues: Partial<T>, values: UnwrapNestedRefs<T>) => void;
+    /**提交保存 验证成功*/
+    onFinish?: (values: T) => void;
+    /**提交保存 验证失败*/
+    onFinishFailed?: (errorInfo: ValidateErrorEntity<T>) => void;
+    /**隐藏表单项初始值*/
+    hideData?: Record<string, boolean>;
+    /**表单名称*/
+    name?: string;
+    /**隐藏规则校验*/
+    hideRuleData?: Record<string, boolean>;
+}

package/lib/interface/layout.d.ts

@@ -0,0 +1,28 @@
+import { AttrsOptions } from '../hooks/useAttrs';
+import { VNodeChild, StyleValue } from 'vue';
+export interface FormLayoutProps extends Omit<AttrsOptions, 'colCount'> {
+    /**标题*/
+    title?: VNodeChild;
+    /**额外内容*/
+    extra?: VNodeChild;
+    /**是否占据整行*/
+    isAllColSpan?: boolean;
+    class?: string;
+    /**头部ClassName*/
+    headerClass?: string;
+    /**内容Class*/
+    bodyClass?: string;
+    style?: StyleValue;
+    /**头部样式*/
+    headerStyle?: StyleValue;
+    /**内容样式*/
+    bodyStyle?: StyleValue;
+    /**是否添加边框*/
+    bordered?: boolean;
+    /**列数据*/
+    colCount?: number;
+    /**
+     * @description gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。
+     */
+    gap?: string | number;
+}