fast-element-plus 1.0.0 → 1.0.1

package/es/components/form/src/form.mjs

@@ -0,0 +1,109 @@
+import { defineComponent, reactive, computed, ref, provide, createVNode, mergeProps } from "vue";
+import { formProps, useGlobalSize, ElForm } from "element-plus";
+import { FaLayoutGrid } from "../../layoutGrid/index.mjs";
+import { definePropType, useProps, useRender, useExpose, makeSlots } from "@fast-china/utils";
+import { isObject, isNumber } from "lodash-unified";
+import { formUtil } from "../utils/form.mjs";
+const faFormProps = {
+  ...formProps,
+  /** @description Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported. */
+  labelWidth: {
+    type: [String, Number],
+    default: "auto"
+  },
+  /** @description Suffix of the label. */
+  labelSuffix: {
+    type: String,
+    default: "："
+  },
+  /** @description When validation fails, scroll to the first error form entry. */
+  scrollToError: {
+    type: Boolean,
+    default: true
+  },
+  /** @description 详情From，会删除 FormItem 的 paddinfa-bottom */
+  detailForm: Boolean,
+  /** @description Grid布局*/
+  grid: {
+    type: Boolean,
+    default: true
+  },
+  /** @description Grid布局列配置 */
+  cols: {
+    type: definePropType([String, Number, Object]),
+    default: () => ({
+      xs: 1,
+      sm: 2,
+      md: 3,
+      lg: 4,
+      xl: 5
+    })
+  }
+};
+const Form = /* @__PURE__ */ defineComponent({
+  name: "FaForm",
+  props: faFormProps,
+  slots: makeSlots(),
+  setup(props, {
+    attrs,
+    slots,
+    expose
+  }) {
+    const _globalSize = useGlobalSize();
+    const state = reactive({
+      cols: computed(() => {
+        if (isObject(props.cols)) {
+          return props.cols;
+        } else {
+          const colsNumber = isNumber(props.cols) ? props.cols : Number(props.cols);
+          return {
+            xs: 1,
+            sm: colsNumber,
+            md: colsNumber,
+            lg: colsNumber,
+            xl: colsNumber
+          };
+        }
+      }),
+      gap: computed(() => _globalSize.value === "small" ? [15, 0] : [20, 0])
+    });
+    const formRef = ref();
+    provide("faFormCols", state.cols);
+    const elFormProps = useProps(props, formProps);
+    useRender(() => createVNode(ElForm, mergeProps(elFormProps.value, {
+      "ref": formRef,
+      "class": ["fa-form", `fa-form-${_globalSize.value}`, {
+        [`fa-form-detail fa-form-detail_${_globalSize.value}`]: props.detailForm
+      }]
+    }), {
+      default: () => props.grid ? createVNode(FaLayoutGrid, {
+        "collapsed": true,
+        "gap": state.gap,
+        "cols": state.cols
+      }, {
+        default: () => [slots.default && slots.default(state)]
+      }) : slots.default && slots.default(state)
+    }));
+    return useExpose(expose, {
+      /** @description 对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise。 */
+      validate: () => formUtil.validate(formRef),
+      /** @description 验证具体的某个字段。 */
+      validateField: computed(() => formRef.value?.validateField),
+      /** @description 重置该表单项，将其值重置为初始值，并移除校验结果 */
+      resetFields: computed(() => formRef.value?.resetFields),
+      /** @description 清理某个字段的表单验证信息。 */
+      clearValidate: computed(() => formRef.value?.clearValidate),
+      /** @description 滚动到指定的字段 */
+      scrollToField: computed(() => formRef.value?.scrollToField),
+      /** @description 获取所有字段的 context */
+      fields: computed(() => formRef.value?.fields),
+      /** @description 对整个表单的内容进行验证，带滚动。 接收一个回调函数，或返回 Promise。 */
+      validateScrollToField: () => formUtil.validateScrollToField(formRef)
+    });
+  }
+});
+export {
+  Form as default,
+  faFormProps
+};
+//# sourceMappingURL=form.mjs.map

package/es/components/form/src/form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.mjs","sources":["../../../../../packages/components/form/src/form.tsx"],"sourcesContent":["import { computed, defineComponent, provide, reactive, ref } from \"vue\";\nimport { ElForm, formProps, useGlobalSize } from \"element-plus\";\nimport { FaLayoutGrid } from \"@fast-element-plus/components/layoutGrid\";\nimport { definePropType, makeSlots, useExpose, useProps, useRender } from \"@fast-china/utils\";\nimport { isNumber, isObject } from \"lodash-unified\";\nimport { formUtil } from \"../utils/form\";\nimport type { FaLayoutGridBreakPoint } from \"@fast-element-plus/components/layoutGrid\";\nimport type { FormInstance, FormItemContext, FormValidationResult } from \"element-plus\";\n\nexport const faFormProps = {\n\t...formProps,\n\t/** @description Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported. */\n\tlabelWidth: {\n\t\ttype: [String, Number],\n\t\tdefault: \"auto\",\n\t},\n\t/** @description Suffix of the label. */\n\tlabelSuffix: {\n\t\ttype: String,\n\t\tdefault: \"：\",\n\t},\n\t/** @description When validation fails, scroll to the first error form entry. */\n\tscrollToError: {\n\t\ttype: Boolean,\n\t\tdefault: true,\n\t},\n\t/** @description 详情From，会删除 FormItem 的 paddinfa-bottom */\n\tdetailForm: Boolean,\n\t/** @description Grid布局*/\n\tgrid: {\n\t\ttype: Boolean,\n\t\tdefault: true,\n\t},\n\t/** @description Grid布局列配置 */\n\tcols: {\n\t\ttype: definePropType<string | number | Record<FaLayoutGridBreakPoint, number>>([String, Number, Object]),\n\t\tdefault: (): Record<FaLayoutGridBreakPoint, number> => ({ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }),\n\t},\n};\n\ntype FaFormSlots = {\n\t/** @description 默认内容插槽 */\n\tdefault: unknown;\n};\n\nexport default defineComponent({\n\tname: \"FaForm\",\n\tprops: faFormProps,\n\tslots: makeSlots<FaFormSlots>(),\n\tsetup(props, { attrs, slots, expose }) {\n\t\tconst _globalSize = useGlobalSize();\n\n\t\tconst state = reactive({\n\t\t\tcols: computed(() => {\n\t\t\t\tif (isObject(props.cols)) {\n\t\t\t\t\treturn props.cols;\n\t\t\t\t} else {\n\t\t\t\t\tconst colsNumber = isNumber(props.cols) ? props.cols : Number(props.cols);\n\t\t\t\t\treturn { xs: 1, sm: colsNumber, md: colsNumber, lg: colsNumber, xl: colsNumber };\n\t\t\t\t}\n\t\t\t}),\n\t\t\tgap: computed(() => (_globalSize.value === \"small\" ? [15, 0] : [20, 0])),\n\t\t});\n\n\t\tconst formRef = ref<FormInstance>();\n\n\t\t// 注入 cols\n\t\tprovide(\"faFormCols\", state.cols);\n\n\t\tconst elFormProps = useProps(props, formProps);\n\n\t\tuseRender(() => (\n\t\t\t<ElForm\n\t\t\t\t{...elFormProps.value}\n\t\t\t\tref={formRef}\n\t\t\t\tclass={[\"fa-form\", `fa-form-${_globalSize.value}`, { [`fa-form-detail fa-form-detail_${_globalSize.value}`]: props.detailForm }]}\n\t\t\t>\n\t\t\t\t{{\n\t\t\t\t\tdefault: () =>\n\t\t\t\t\t\tprops.grid ? (\n\t\t\t\t\t\t\t<FaLayoutGrid collapsed gap={state.gap} cols={state.cols}>\n\t\t\t\t\t\t\t\t{slots.default && slots.default(state)}\n\t\t\t\t\t\t\t</FaLayoutGrid>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tslots.default && slots.default(state)\n\t\t\t\t\t\t),\n\t\t\t\t}}\n\t\t\t</ElForm>\n\t\t));\n\n\t\treturn useExpose(expose, {\n\t\t\t/** @description 对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise。 */\n\t\t\tvalidate: (): FormValidationResult => formUtil.validate(formRef),\n\t\t\t/** @description 验证具体的某个字段。 */\n\t\t\tvalidateField: computed(() => formRef.value?.validateField),\n\t\t\t/** @description 重置该表单项，将其值重置为初始值，并移除校验结果 */\n\t\t\tresetFields: computed(() => formRef.value?.resetFields),\n\t\t\t/** @description 清理某个字段的表单验证信息。 */\n\t\t\tclearValidate: computed(() => formRef.value?.clearValidate),\n\t\t\t/** @description 滚动到指定的字段 */\n\t\t\tscrollToField: computed(() => formRef.value?.scrollToField),\n\t\t\t/** @description 获取所有字段的 context */\n\t\t\tfields: computed(() => formRef.value?.fields as FormItemContext[]),\n\t\t\t/** @description 对整个表单的内容进行验证，带滚动。 接收一个回调函数，或返回 Promise。 */\n\t\t\tvalidateScrollToField: (): FormValidationResult => formUtil.validateScrollToField(formRef),\n\t\t});\n\t},\n});\n"],"names":["faFormProps","formProps","labelWidth","type","String","Number","default","labelSuffix","scrollToError","Boolean","detailForm","grid","cols","definePropType","Object","xs","sm","md","lg","xl","name","props","slots","makeSlots","setup","attrs","expose","_globalSize","useGlobalSize","state","reactive","computed","isObject","colsNumber","isNumber","gap","value","formRef","ref","provide","elFormProps","useProps","useRender","_createVNode","ElForm","_mergeProps","FaLayoutGrid","useExpose","validate","formUtil","validateField","resetFields","clearValidate","scrollToField","fields","validateScrollToField"],"mappings":"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"}

package/es/components/form/src/formItem.d.ts

@@ -0,0 +1,190 @@
+export declare const faFormItemProps: {
+    /** @description Label tips 提示 */
+    tips: StringConstructor;
+    /** @description Grid 布局 */
+    grid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** @description 偏移量 */
+    offset: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    /** @description 栅格跨度 */
+    span: {
+        type: (NumberConstructor | StringConstructor)[];
+    };
+    /** @description 独占一行。如果设置 span 则无效 */
+    row: BooleanConstructor;
+    label: StringConstructor;
+    labelWidth: import('element-plus/es/utils/index.mjs').EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
+    labelPosition: import('element-plus/es/utils/index.mjs').EpPropFinalized<StringConstructor, "" | "left" | "right" | "top", unknown, "", boolean>;
+    prop: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index.mjs').EpPropMergeType<(new (...args: any[]) => string | string[]) | (() => import('element-plus').FormItemProp) | ((new (...args: any[]) => string | string[]) | (() => import('element-plus').FormItemProp))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    required: import('element-plus/es/utils/index.mjs').EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    rules: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index.mjs').EpPropMergeType<(new (...args: any[]) => import('element-plus').FormItemRule | import('element-plus').FormItemRule[]) | (() => import('element-plus/es/utils/typescript.mjs').Arrayable<import('element-plus').FormItemRule>) | ((new (...args: any[]) => import('element-plus').FormItemRule | import('element-plus').FormItemRule[]) | (() => import('element-plus/es/utils/typescript.mjs').Arrayable<import('element-plus').FormItemRule>))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    error: StringConstructor;
+    validateStatus: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index.mjs').EpPropMergeType<StringConstructor, "" | "error" | "success" | "validating", unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    for: StringConstructor;
+    inlineMessage: import('element-plus/es/utils/index.mjs').EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    showMessage: import('element-plus/es/utils/index.mjs').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    size: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index.mjs').EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+};
+type FaFormItemSlots = {
+    /** @description 默认内容插槽 */
+    default: never;
+    /** @description 标签位置显示的内容 */
+    label: {
+        label: string;
+    };
+    /** @description 验证错误信息的显示内容 */
+    error: {
+        error: string;
+    };
+};
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** @description Label tips 提示 */
+    tips: StringConstructor;
+    /** @description Grid 布局 */
+    grid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** @description 偏移量 */
+    offset: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    /** @description 栅格跨度 */
+    span: {
+        type: (NumberConstructor | StringConstructor)[];
+    };
+    /** @description 独占一行。如果设置 span 则无效 */
+    row: BooleanConstructor;
+    label: StringConstructor;
+    labelWidth: import('element-plus/es/utils/index.mjs').EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
+    labelPosition: import('element-plus/es/utils/index.mjs').EpPropFinalized<StringConstructor, "" | "left" | "right" | "top", unknown, "", boolean>;
+    prop: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index.mjs').EpPropMergeType<(new (...args: any[]) => string | string[]) | (() => import('element-plus').FormItemProp) | ((new (...args: any[]) => string | string[]) | (() => import('element-plus').FormItemProp))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    required: import('element-plus/es/utils/index.mjs').EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    rules: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index.mjs').EpPropMergeType<(new (...args: any[]) => import('element-plus').FormItemRule | import('element-plus').FormItemRule[]) | (() => import('element-plus/es/utils/typescript.mjs').Arrayable<import('element-plus').FormItemRule>) | ((new (...args: any[]) => import('element-plus').FormItemRule | import('element-plus').FormItemRule[]) | (() => import('element-plus/es/utils/typescript.mjs').Arrayable<import('element-plus').FormItemRule>))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    error: StringConstructor;
+    validateStatus: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index.mjs').EpPropMergeType<StringConstructor, "" | "error" | "success" | "validating", unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    for: StringConstructor;
+    inlineMessage: import('element-plus/es/utils/index.mjs').EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    showMessage: import('element-plus/es/utils/index.mjs').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    size: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index.mjs').EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+}>, {
+    /** @description 表单项大小 */
+    size: import('vue').ComputedRef<"" | "small" | "default" | "large">;
+    /** @description 校验消息 */
+    validateMessage: import('vue').ComputedRef<string>;
+    /** @description 校验状态 */
+    validateState: import('vue').ComputedRef<"" | "error" | "success" | "validating">;
+    /** @description 验证表单项 */
+    validate: import('vue').ComputedRef<(trigger: string, callback?: import('element-plus').FormValidateCallback) => import('element-plus').FormValidationResult>;
+    /** @description 移除该表单项的校验结果 */
+    clearValidate: import('vue').ComputedRef<() => void>;
+    /** @description 对该表单项进行重置，将其值重置为初始值并移除校验结果 */
+    resetField: import('vue').ComputedRef<() => void>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** @description Label tips 提示 */
+    tips: StringConstructor;
+    /** @description Grid 布局 */
+    grid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** @description 偏移量 */
+    offset: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    /** @description 栅格跨度 */
+    span: {
+        type: (NumberConstructor | StringConstructor)[];
+    };
+    /** @description 独占一行。如果设置 span 则无效 */
+    row: BooleanConstructor;
+    label: StringConstructor;
+    labelWidth: import('element-plus/es/utils/index.mjs').EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
+    labelPosition: import('element-plus/es/utils/index.mjs').EpPropFinalized<StringConstructor, "" | "left" | "right" | "top", unknown, "", boolean>;
+    prop: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index.mjs').EpPropMergeType<(new (...args: any[]) => string | string[]) | (() => import('element-plus').FormItemProp) | ((new (...args: any[]) => string | string[]) | (() => import('element-plus').FormItemProp))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    required: import('element-plus/es/utils/index.mjs').EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    rules: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index.mjs').EpPropMergeType<(new (...args: any[]) => import('element-plus').FormItemRule | import('element-plus').FormItemRule[]) | (() => import('element-plus/es/utils/typescript.mjs').Arrayable<import('element-plus').FormItemRule>) | ((new (...args: any[]) => import('element-plus').FormItemRule | import('element-plus').FormItemRule[]) | (() => import('element-plus/es/utils/typescript.mjs').Arrayable<import('element-plus').FormItemRule>))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    error: StringConstructor;
+    validateStatus: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index.mjs').EpPropMergeType<StringConstructor, "" | "error" | "success" | "validating", unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    for: StringConstructor;
+    inlineMessage: import('element-plus/es/utils/index.mjs').EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    showMessage: import('element-plus/es/utils/index.mjs').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    size: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index.mjs').EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+}>> & Readonly<{}>, {
+    required: import('element-plus/es/utils/index.mjs').EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    offset: string | number;
+    labelPosition: import('element-plus/es/utils/index.mjs').EpPropMergeType<StringConstructor, "" | "top" | "left" | "right", unknown>;
+    labelWidth: import('element-plus/es/utils/index.mjs').EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
+    inlineMessage: import('element-plus/es/utils/index.mjs').EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    showMessage: import('element-plus/es/utils/index.mjs').EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    grid: boolean;
+    row: boolean;
+}, import('vue').SlotsType<Partial<import('@fast-china/utils').MakeSlots<FaFormItemSlots>>>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/components/form/src/formItem.mjs

@@ -0,0 +1,117 @@
+import { defineComponent, ref, inject, Fragment, createVNode, mergeProps, computed } from "vue";
+import { formItemProps, ElFormItem } from "element-plus";
+import { FaFormItemTip } from "../../formItemTip/index.mjs";
+import { FaLayoutGridItem } from "../../layoutGrid/index.mjs";
+import { useProps, useRender, useExpose, makeSlots } from "@fast-china/utils";
+import { isNumber } from "lodash-unified";
+const faFormItemProps = {
+  ...formItemProps,
+  /** @description Label tips 提示 */
+  tips: String,
+  /** @description Grid 布局 */
+  grid: {
+    type: Boolean,
+    default: true
+  },
+  /** @description 偏移量 */
+  offset: {
+    type: [String, Number],
+    default: 0
+  },
+  /** @description 栅格跨度 */
+  span: {
+    type: [String, Number]
+  },
+  /** @description 独占一行。如果设置 span 则无效 */
+  row: Boolean
+};
+const FormItem = /* @__PURE__ */ defineComponent({
+  name: "FaFormItem",
+  props: faFormItemProps,
+  slots: makeSlots(),
+  setup(props, {
+    attrs,
+    slots,
+    expose
+  }) {
+    const formItemRef = ref();
+    const cols = inject("cols", ref(4));
+    const getResponsive = () => {
+      if (!props.grid) return {};
+      if (props.span) {
+        return {
+          span: isNumber(props.span) ? props.span : Number(props.span),
+          offset: isNumber(props.offset) ? props.offset : Number(props.offset)
+        };
+      } else {
+        const result = {
+          span: 1,
+          offset: isNumber(props.offset) ? props.offset : Number(props.offset)
+        };
+        if (props.row) {
+          result.span = cols.value;
+        }
+        return result;
+      }
+    };
+    const elFormItemProps = useProps(props, formItemProps);
+    const ParcelComponent = props.grid ? FaLayoutGridItem : Fragment;
+    useRender(() => createVNode(ParcelComponent, getResponsive(), {
+      default: () => [createVNode(ElFormItem, mergeProps({
+        "ref": formItemRef
+      }, elFormItemProps.value), {
+        default: () => slots.default(),
+        ...slots.label && !props.tips && {
+          label: ({
+            label
+          }) => slots.label({
+            label
+          })
+        },
+        ...slots.label && props.tips && {
+          label: ({
+            label
+          }) => createVNode(FaFormItemTip, null, {
+            label: () => slots.label({
+              label
+            })
+          })
+        },
+        ...!slots.label && props.tips && {
+          label: ({
+            label
+          }) => createVNode(FaFormItemTip, {
+            "label": label ?? props.label,
+            "tips": props.tips
+          }, null)
+        },
+        ...slots.error && {
+          error: ({
+            error
+          }) => slots.error({
+            error
+          })
+        }
+      })]
+    }));
+    return useExpose(expose, {
+      /** @description 表单项大小 */
+      size: computed(() => formItemRef.value?.size),
+      /** @description 校验消息 */
+      validateMessage: computed(() => formItemRef.value?.validateMessage),
+      /** @description 校验状态 */
+      validateState: computed(() => formItemRef.value?.validateState),
+      /** @description 验证表单项 */
+      validate: computed(() => formItemRef.value?.validate),
+      /** @description 移除该表单项的校验结果 */
+      clearValidate: computed(() => formItemRef.value?.clearValidate),
+      /** @description 对该表单项进行重置，将其值重置为初始值并移除校验结果 */
+      resetField: computed(() => formItemRef.value?.resetField)
+    });
+  }
+});
+export {
+  FormItem as default,
+  faFormItemProps
+};
+//# sourceMappingURL=formItem.mjs.map

package/es/components/form/src/formItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"formItem.mjs","sources":["../../../../../packages/components/form/src/formItem.tsx"],"sourcesContent":["import { Fragment, computed, defineComponent, inject, ref } from \"vue\";\nimport { ElFormItem, formItemProps } from \"element-plus\";\nimport { FaFormItemTip } from \"@fast-element-plus/components/formItemTip\";\nimport { FaLayoutGridItem } from \"@fast-element-plus/components/layoutGrid\";\nimport { makeSlots, useExpose, useProps, useRender } from \"@fast-china/utils\";\nimport { isNumber } from \"lodash-unified\";\nimport type { FormItemInstance } from \"element-plus\";\nimport type { Ref, VNode } from \"vue\";\n\nexport const faFormItemProps = {\n\t...formItemProps,\n\t/** @description Label tips 提示 */\n\ttips: String,\n\t/** @description Grid 布局 */\n\tgrid: {\n\t\ttype: Boolean,\n\t\tdefault: true,\n\t},\n\t/** @description 偏移量 */\n\toffset: {\n\t\ttype: [String, Number],\n\t\tdefault: 0,\n\t},\n\t/** @description 栅格跨度 */\n\tspan: {\n\t\ttype: [String, Number],\n\t},\n\t/** @description 独占一行。如果设置 span 则无效 */\n\trow: Boolean,\n};\n\ntype FaFormItemSlots = {\n\t/** @description 默认内容插槽 */\n\tdefault: never;\n\t/** @description 标签位置显示的内容 */\n\tlabel: { label: string };\n\t/** @description 验证错误信息的显示内容 */\n\terror: { error: string };\n};\n\nexport default defineComponent({\n\tname: \"FaFormItem\",\n\tprops: faFormItemProps,\n\tslots: makeSlots<FaFormItemSlots>(),\n\tsetup(props, { attrs, slots, expose }) {\n\t\tconst formItemRef = ref<FormItemInstance>();\n\n\t\tconst cols = inject<Ref<number>>(\"cols\", ref(4));\n\n\t\t// 获取响应式设置\n\t\tconst getResponsive = (): {\n\t\t\tspan?: number;\n\t\t\toffset?: number;\n\t\t} => {\n\t\t\tif (!props.grid) return {};\n\t\t\tif (props.span) {\n\t\t\t\treturn {\n\t\t\t\t\tspan: isNumber(props.span) ? props.span : Number(props.span),\n\t\t\t\t\toffset: isNumber(props.offset) ? props.offset : Number(props.offset),\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tconst result = {\n\t\t\t\t\tspan: 1,\n\t\t\t\t\toffset: isNumber(props.offset) ? props.offset : Number(props.offset),\n\t\t\t\t};\n\t\t\t\tif (props.row) {\n\t\t\t\t\tresult.span = cols.value;\n\t\t\t\t}\n\t\t\t\treturn result;\n\t\t\t}\n\t\t};\n\n\t\tconst elFormItemProps = useProps(props, formItemProps);\n\n\t\tconst ParcelComponent = props.grid ? FaLayoutGridItem : Fragment;\n\n\t\tuseRender(() => (\n\t\t\t<ParcelComponent {...getResponsive()}>\n\t\t\t\t<ElFormItem ref={formItemRef} {...elFormItemProps.value}>\n\t\t\t\t\t{{\n\t\t\t\t\t\tdefault: () => slots.default(),\n\t\t\t\t\t\t...(slots.label && !props.tips && { label: ({ label }: { label: string }): VNode[] => slots.label({ label }) }),\n\t\t\t\t\t\t...(slots.label &&\n\t\t\t\t\t\t\tprops.tips && {\n\t\t\t\t\t\t\t\tlabel: ({ label }: { label: string }): VNode[] => (\n\t\t\t\t\t\t\t\t\t<FaFormItemTip>\n\t\t\t\t\t\t\t\t\t\t{{\n\t\t\t\t\t\t\t\t\t\t\tlabel: () => slots.label({ label }),\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t</FaFormItemTip>\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t...(!slots.label &&\n\t\t\t\t\t\t\tprops.tips && {\n\t\t\t\t\t\t\t\tlabel: ({ label }: { label: string }): VNode[] => <FaFormItemTip label={label ?? props.label} tips={props.tips} />,\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t...(slots.error && { error: ({ error }: { error: string }): VNode[] => slots.error({ error }) }),\n\t\t\t\t\t}}\n\t\t\t\t</ElFormItem>\n\t\t\t</ParcelComponent>\n\t\t));\n\n\t\treturn useExpose(expose, {\n\t\t\t/** @description 表单项大小 */\n\t\t\tsize: computed(() => formItemRef.value?.size),\n\t\t\t/** @description 校验消息 */\n\t\t\tvalidateMessage: computed(() => formItemRef.value?.validateMessage),\n\t\t\t/** @description 校验状态 */\n\t\t\tvalidateState: computed(() => formItemRef.value?.validateState),\n\t\t\t/** @description 验证表单项 */\n\t\t\tvalidate: computed(() => formItemRef.value?.validate),\n\t\t\t/** @description 移除该表单项的校验结果 */\n\t\t\tclearValidate: computed(() => formItemRef.value?.clearValidate),\n\t\t\t/** @description 对该表单项进行重置，将其值重置为初始值并移除校验结果 */\n\t\t\tresetField: computed(() => formItemRef.value?.resetField),\n\t\t});\n\t},\n});\n"],"names":["faFormItemProps","formItemProps","tips","String","grid","type","Boolean","default","offset","Number","span","row","name","props","slots","makeSlots","setup","attrs","expose","formItemRef","ref","cols","inject","getResponsive","isNumber","result","value","elFormItemProps","useProps","ParcelComponent","FaLayoutGridItem","Fragment","useRender","_createVNode","ElFormItem","_mergeProps","label","FaFormItemTip","error","useExpose","size","computed","validateMessage","validateState","validate","clearValidate","resetField"],"mappings":"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"}

package/es/components/form/utils/form.d.ts

@@ -0,0 +1,81 @@
+import { FormInstance, FormItemRule, FormValidationResult } from 'element-plus';
+import { Ref } from 'vue';
+/**
+ * 表单工具类
+ */
+export declare const formUtil: {
+    /**
+     * ElForm 表单验证
+     * @param elFormRef ElForm 组件ref
+     */
+    validate(elFormRef: Ref<FormInstance, FormInstance>): FormValidationResult;
+    /**
+     * ElForm 表单验证，带滚动
+     * @param elFormRef ElForm 组件ref
+     */
+    validateScrollToField(elFormRef: Ref<FormInstance>): FormValidationResult;
+    /**
+     * 手机号
+     */
+    mobile(rule: any, value: string, callback: any): void;
+    /**
+     * 电话号码
+     */
+    phone(rule: any, value: string, callback: any): void;
+    /**
+     * 邮箱
+     */
+    email(rule: any, value: string, callback: any): void;
+    /**
+     * 身份证
+     */
+    idCard(rule: any, value: string, callback: any): void;
+    /**
+     * 车牌号
+     */
+    carNumber(rule: any, value: string, callback: any): void;
+    /**
+     * editor 必填
+     */
+    editorRequired(rule: any, value: string, callback: any): void;
+    /**
+     * 外部链接
+     */
+    external(rule: any, value: string, callback: any): void;
+    /**
+     * 有效的URL
+     */
+    url(rule: any, value: string, callback: any): void;
+    /**
+     * 邮政编码
+     */
+    postCode(rule: any, value: string, callback: any): void;
+    /**
+     * 账号（6-20位字母或数字，必须以字母开头，不能全为数字）
+     */
+    account(rule: any, value: string, callback: any): void;
+    /**
+     * 弱密码（只包含字母和数字，长度为6到18位）
+     */
+    password(rule: any, value: string, callback: any): void;
+    /**
+     * 强密码（8到20位，包含大小写字母、数字及特殊字符）
+     */
+    strongPassword(rule: any, value: string, callback: any): void;
+    /**
+     * 中文字符
+     */
+    chinese(rule: any, value: string, callback: any): void;
+    /**
+     * 英文字符
+     */
+    english(rule: any, value: string, callback: any): void;
+    /**
+     * 文本框必填
+     */
+    inputRequired(message: string, trigger?: string): FormItemRule;
+    /**
+     * 选择器必选
+     */
+    selectRequired(message: string, trigger?: string): FormItemRule;
+};