@carefrees/form-utils-vue 0.0.8

package/esm/hooks/register/register.FormList.mjs

@@ -0,0 +1,43 @@
+import { watch, toValue } from "vue";
+import { useRegisterFormItem } from "./register.FormItem.mjs";
+import { useFormList } from "../useFormList.mjs";
+import { useEffect } from "../useEffect.mjs";
+const useRegisterFormList = (options) => {
+  const { ruleInstance, formItemInstance, form, newName, parentItem } = useRegisterFormItem(options);
+  const formListInstance = useFormList();
+  watch(
+    [newName.value],
+    () => {
+      formListInstance.ctor(newName.value);
+    },
+    { immediate: true }
+  );
+  watch(
+    [form, formItemInstance, ruleInstance.value],
+    () => {
+      formListInstance.instance = form;
+      formListInstance.formItemInstance = formItemInstance;
+      formListInstance.rule = ruleInstance.value;
+    },
+    { immediate: true }
+  );
+  watch(
+    [options.sort, parentItem.value],
+    () => {
+      formListInstance.sort = toValue(parentItem.value.sort);
+      formListInstance.parentDataField = toValue(parentItem.value.name);
+    },
+    { immediate: true }
+  );
+  useEffect(() => {
+    return form.registerFormList(newName.value, formListInstance);
+  });
+  return {
+    ruleInstance,
+    formItemInstance,
+    formListInstance
+  };
+};
+export {
+  useRegisterFormList
+};

package/esm/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/esm/hooks/register/register.form.mjs

@@ -0,0 +1,12 @@
+import { useMultipleFormInject } from "../useMultipleForm.mjs";
+import { useEffect } from "../useEffect.mjs";
+const useRegisterForm = (form, name) => {
+  const multipleForm = useMultipleFormInject();
+  useEffect(() => {
+    if (name) return multipleForm.ctor(name, form);
+  });
+  return multipleForm;
+};
+export {
+  useRegisterForm
+};

package/esm/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/esm/hooks/useAttrs.mjs

@@ -0,0 +1,45 @@
+import { inject, computed, toRefs, ref, provide, reactive } from "vue";
+const attrsProvideSymbol = Symbol("carefrees-attrs");
+function useAttrsProvide(options) {
+  const {
+    colCount = ref(4),
+    errorLayout = ref("left-bottom"),
+    labelMode = ref("top"),
+    showColon = ref(true),
+    formItemClass,
+    formItemStyle,
+    formItemLabelClass,
+    formItemLabelStyle
+  } = options;
+  const data = computed(() => {
+    return {
+      colCount,
+      errorLayout,
+      labelMode,
+      showColon,
+      formItemClass,
+      formItemStyle,
+      formItemLabelClass,
+      formItemLabelStyle
+    };
+  });
+  provide(attrsProvideSymbol, reactive(data));
+}
+function useAttrsInject() {
+  const attrs = inject(
+    attrsProvideSymbol,
+    computed(
+      () => toRefs({
+        colCount: 4,
+        errorLayout: "left-bottom",
+        labelMode: "top",
+        showColon: true
+      })
+    )
+  );
+  return attrs;
+}
+export {
+  useAttrsInject,
+  useAttrsProvide
+};

package/esm/hooks/useEffect.d.ts

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

package/esm/hooks/useEffect.mjs

@@ -0,0 +1,14 @@
+import { ref, onMounted, onUnmounted } from "vue";
+const useEffect = (fun) => {
+  const unRegisterRef = ref();
+  onMounted(() => {
+    unRegisterRef.value = fun();
+  });
+  onUnmounted(() => {
+    typeof unRegisterRef.value === "function" && unRegisterRef.value();
+    unRegisterRef.value = void 0;
+  });
+};
+export {
+  useEffect
+};

package/esm/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/esm/hooks/useForm.mjs

@@ -0,0 +1,26 @@
+import { FormInstanceBase } from "@carefrees/form-utils";
+import { ref, provide, inject } from "vue";
+const formProvideSymbol = Symbol("carefrees-form");
+function useFormProvide(form) {
+  provide(formProvideSymbol, form);
+}
+function useFormInject() {
+  const form = inject(formProvideSymbol, new FormInstanceBase());
+  return form;
+}
+function useForm(form) {
+  const refForm = ref();
+  if (!refForm.value) {
+    if (form) {
+      refForm.value = form;
+    } else {
+      refForm.value = new FormInstanceBase();
+    }
+  }
+  return refForm;
+}
+export {
+  useForm,
+  useFormInject,
+  useFormProvide
+};

package/esm/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/esm/hooks/useFormItem.mjs

@@ -0,0 +1,26 @@
+import { FormItemInstanceBase } from "@carefrees/form-utils";
+import { ref, provide, inject } from "vue";
+const formItemProvideSymbol = Symbol("carefrees-form-item");
+function useFormItemProvide(formItem) {
+  provide(formItemProvideSymbol, formItem);
+}
+function useFormItemInject() {
+  const formItem = inject(formItemProvideSymbol, new FormItemInstanceBase());
+  return formItem;
+}
+function useFormItem(formItem) {
+  const refForm = ref();
+  if (!refForm.value) {
+    if (formItem) {
+      refForm.value = formItem;
+    } else {
+      refForm.value = new FormItemInstanceBase();
+    }
+  }
+  return refForm.value;
+}
+export {
+  useFormItem,
+  useFormItemInject,
+  useFormItemProvide
+};

package/esm/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/esm/hooks/useFormItemParentName.mjs

@@ -0,0 +1,37 @@
+import { provide, computed, inject, ref, toValue } from "vue";
+const parentNameProvideSymbol = Symbol("carefrees-parent-name");
+const useFormItemParentNameProvide = (props) => {
+  const { name, sort } = props;
+  provide(
+    parentNameProvideSymbol,
+    computed(() => ({ name, sort }))
+  );
+};
+const useFormItemParentNameInject = (options) => {
+  const { isJoinParentField = true, sort, name } = options;
+  const parentItem = inject(
+    parentNameProvideSymbol,
+    computed(() => ({ name: ref(""), sort: ref("") }))
+  );
+  const newName = computed(() => {
+    const _name = 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 = computed(() => {
+    const _sort = toValue(parentItem.value.sort);
+    return [isJoinParentField ? _sort : "", sort].filter(Boolean).join("-");
+  });
+  return { newName, newSort, parentItem };
+};
+export {
+  useFormItemParentNameInject,
+  useFormItemParentNameProvide
+};

package/esm/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/esm/hooks/useFormList.mjs

@@ -0,0 +1,26 @@
+import { FormListInstanceBase } from "@carefrees/form-utils";
+import { provide, inject, ref } from "vue";
+const formListProvideSymbol = Symbol("carefrees-form-list");
+function useFormListProvide(formList) {
+  provide(formListProvideSymbol, formList);
+}
+function useFormListInject() {
+  const formList = inject(formListProvideSymbol, new FormListInstanceBase());
+  return formList;
+}
+function useFormList(formList) {
+  const refForm = ref();
+  if (!refForm.value) {
+    if (formList) {
+      refForm.value = formList;
+    } else {
+      refForm.value = new FormListInstanceBase();
+    }
+  }
+  return refForm.value;
+}
+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.mjs

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

package/esm/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/esm/hooks/useMultipleForm.mjs

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

package/esm/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/esm/index.mjs

@@ -0,0 +1,59 @@
+import * as component from "./component.mjs";
+import { useAttrsInject, useAttrsProvide } from "./hooks/useAttrs.mjs";
+import { useForm, useFormInject, useFormProvide } from "./hooks/useForm.mjs";
+import { useFormItem, useFormItemInject, useFormItemProvide } from "./hooks/useFormItem.mjs";
+import { useFormList, useFormListInject, useFormListProvide } from "./hooks/useFormList.mjs";
+import { useHtmlFor } from "./hooks/useHtmlFor.mjs";
+import { useMultipleForm, useMultipleFormInject, useMultipleFormProvide } from "./hooks/useMultipleForm.mjs";
+import { useFormItemParentNameInject, useFormItemParentNameProvide } from "./hooks/useFormItemParentName.mjs";
+import { useEffect } from "./hooks/useEffect.mjs";
+import { useRegisterFormHideItem } from "./hooks/register/register.FormHideItem.mjs";
+import { useRegisterFormItem } from "./hooks/register/register.FormItem.mjs";
+import { useRegisterFormList } from "./hooks/register/register.FormList.mjs";
+import { useRegisterForm } from "./hooks/register/register.form.mjs";
+import { useFormItemAttr } from "./hooks/attr/attr.FormItem.mjs";
+import { withInstall } from "./utils/withInstall.mjs";
+import { Form } from "./form/index.mjs";
+import { FormHideItem, FormItem, FormItemBase } from "./formItem/index.mjs";
+import { FormLayoutRows, Layout, LayoutFormItem } from "./layout/index.mjs";
+const index = {
+  install: (app) => {
+    for (const c in component) {
+      app.use(component[c]);
+    }
+  }
+};
+export {
+  Form,
+  FormHideItem,
+  FormItem,
+  FormItemBase,
+  FormLayoutRows,
+  Layout,
+  LayoutFormItem,
+  index as default,
+  useAttrsInject,
+  useAttrsProvide,
+  useEffect,
+  useForm,
+  useFormInject,
+  useFormItem,
+  useFormItemAttr,
+  useFormItemInject,
+  useFormItemParentNameInject,
+  useFormItemParentNameProvide,
+  useFormItemProvide,
+  useFormList,
+  useFormListInject,
+  useFormListProvide,
+  useFormProvide,
+  useHtmlFor,
+  useMultipleForm,
+  useMultipleFormInject,
+  useMultipleFormProvide,
+  useRegisterForm,
+  useRegisterFormHideItem,
+  useRegisterFormItem,
+  useRegisterFormList,
+  withInstall
+};

package/esm/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/esm/instance/ruleIntsnace.mjs

@@ -0,0 +1,73 @@
+import AsyncValidator from "async-validator";
+import { ref, toValue } from "vue";
+class RuleInstanceBase2 {
+  constructor() {
+    this.name = "";
+    this.rules = ref([]);
+    this.messages = 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 = (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 = 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]: 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 = toValue(this.messages);
+      const tip = Array.isArray(_messages) ? _messages.map((it) => it.message) : "";
+      const isInvalid = Array.isArray(tip) ? !!tip.length : !!tip;
+      return {
+        tip,
+        isInvalid
+      };
+    };
+  }
+}
+export {
+  RuleInstanceBase2
+};

package/esm/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/esm/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;
+}

package/esm/interface/layout.formItem.d.ts

@@ -0,0 +1,39 @@
+import { VNodeChild, StyleValue } from 'vue';
+import { ComputedRefBase } from '.';
+export interface LayoutFormItemProps {
+    /**规则校验失败错误提示位置*/
+    errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
+    /**必填样式*/
+    required?: boolean;
+    /**label显示模式*/
+    labelMode?: 'left' | 'top' | 'between' | 'hide';
+    /**只进行规则样式*/
+    onlyRuleStyle?: boolean;
+    label?: VNodeChild;
+    /**底部提示内容*/
+    helpText?: VNodeChild;
+    /**额外内容*/
+    extra?: VNodeChild;
+    /**是否显示label后的冒号*/
+    showColon?: boolean;
+    /**
+     * 表单项占据列数
+     * @default 1
+     */
+    colSpan?: number;
+    /**
+     * 表单项占据行数
+     * @default 1
+     */
+    rowSpan?: number;
+    htmlFor?: ComputedRefBase<string>;
+    /**规则验证结果*/
+    validateResult?: ComputedRefBase<{
+        tip: string | (string | undefined)[];
+        isInvalid: boolean;
+    }>;
+    style?: StyleValue;
+    class?: string;
+    labelStyle?: StyleValue;
+    labelClass?: string;
+}