ep-craft 0.1.26 → 0.1.28

package/dist/components/form/src/form-label-wrap.js

@@ -0,0 +1,74 @@
+import { defineComponent as E, inject as c, ref as h, onMounted as N, onBeforeUnmount as A, onUpdated as P, watch as y, computed as M, createVNode as b, Fragment as F, nextTick as B } from "vue";
+import { useResizeObserver as O } from "@vueuse/core";
+import "@vue/shared";
+import "lodash-unified";
+import { throwError as C } from "../../../utils/error.js";
+import "@element-plus/icons-vue";
+import { useNamespace as K } from "../../../hooks/use-namespace/index.js";
+import "../../../hooks/use-size/index.js";
+import "@popperjs/core";
+import "../../../hooks/use-z-index/index.js";
+import "../../../hooks/use-delayed-toggle/index.js";
+import "../../../hooks/use-aria/index.js";
+import "../../../hooks/use-model-toggle/index.js";
+import "../../../hooks/use-empty-values/index.js";
+import { formContextKey as R, formItemContextKey as T } from "./constants.js";
+const W = "ElLabelWrap", X = /* @__PURE__ */ E({
+  name: W,
+  props: {
+    isAutoWidth: Boolean,
+    updateAll: Boolean
+  },
+  setup(l, {
+    slots: i
+  }) {
+    const t = c(R, void 0), a = c(T);
+    a || C(W, "usage: <el-form-item><label-wrap /></el-form-item>");
+    const L = K("form"), o = h(), n = h(0), g = () => {
+      var e;
+      if ((e = o.value) != null && e.firstElementChild) {
+        const r = window.getComputedStyle(o.value.firstElementChild).width;
+        return Math.ceil(Number.parseFloat(r));
+      } else
+        return 0;
+    }, d = (e = "update") => {
+      B(() => {
+        i.default && l.isAutoWidth && (e === "update" ? n.value = g() : e === "remove" && (t == null || t.deregisterLabelWidth(n.value)));
+      });
+    }, m = () => d("update");
+    return N(() => {
+      m();
+    }), A(() => {
+      d("remove");
+    }), P(() => m()), y(n, (e, r) => {
+      l.updateAll && (t == null || t.registerLabelWidth(e, r));
+    }), O(M(() => {
+      var e;
+      return ((e = o.value) == null ? void 0 : e.firstElementChild) ?? null;
+    }), m), () => {
+      var r, p;
+      if (!i) return null;
+      const {
+        isAutoWidth: e
+      } = l;
+      if (e) {
+        const u = t == null ? void 0 : t.autoLabelWidth, v = a == null ? void 0 : a.hasLabel, f = {};
+        if (v && u && u !== "auto") {
+          const s = Math.max(0, Number.parseInt(u, 10) - n.value), w = (a.labelPosition || t.labelPosition) === "left" ? "marginRight" : "marginLeft";
+          s && (f[w] = `${s}px`);
+        }
+        return b("div", {
+          ref: o,
+          class: [L.be("item", "label-wrap")],
+          style: f
+        }, [(r = i.default) == null ? void 0 : r.call(i)]);
+      } else
+        return b(F, {
+          ref: o
+        }, [(p = i.default) == null ? void 0 : p.call(i)]);
+    };
+  }
+});
+export {
+  X as default
+};

package/dist/components/form/src/form.d.ts

@@ -0,0 +1,127 @@
+import type { ExtractPublicPropTypes } from 'vue';
+import type { ComponentSize } from '@element-plus/constants';
+import type { FormItemProp } from './form-item';
+import type { FormRules } from './types';
+export interface FormMetaProps {
+    /**
+     * @description Control the size of components in this form.
+     */
+    size?: ComponentSize;
+    /**
+     * @description Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component.
+     */
+    disabled?: boolean;
+}
+/**
+ * @deprecated Removed after 3.0.0, Use `FormMetaProps` instead.
+ */
+export declare const formMetaProps: {
+    readonly size: {
+        readonly type: import("vue").PropType<import("@element-plus/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly disabled: BooleanConstructor;
+};
+export interface FormProps extends FormMetaProps {
+    /**
+     * @description Data of form component.
+     */
+    model?: Record<string, any>;
+    /**
+     * @description Validation rules of form.
+     */
+    rules?: FormRules;
+    /**
+     * @description Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required.
+     */
+    labelPosition?: 'left' | 'right' | 'top';
+    /**
+     * @description Position of asterisk.
+     */
+    requireAsteriskPosition?: 'left' | 'right';
+    /**
+     * @description Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported.
+     */
+    labelWidth?: string | number;
+    /**
+     * @description Suffix of the label.
+     */
+    labelSuffix?: string;
+    /**
+     * @description Whether the form is inline.
+     */
+    inline?: boolean;
+    /**
+     * @description Whether to display the error message inline with the form item.
+     */
+    inlineMessage?: boolean;
+    /**
+     * @description Whether to display an icon indicating the validation result.
+     */
+    statusIcon?: boolean;
+    /**
+     * @description Whether to show the error message.
+     */
+    showMessage?: boolean;
+    /**
+     * @description Whether to trigger validation when the `rules` prop is changed.
+     */
+    validateOnRuleChange?: boolean;
+    /**
+     * @description Whether to hide required fields should have a red asterisk (star) beside their labels.
+     */
+    hideRequiredAsterisk?: boolean;
+    /**
+     * @description When validation fails, scroll to the first error form entry.
+     */
+    scrollToError?: boolean;
+    /**
+     * @description When validation fails, it scrolls to the first error item based on the scrollIntoView option.
+     */
+    scrollIntoViewOptions?: ScrollIntoViewOptions | boolean;
+}
+/**
+ * @deprecated Removed after 3.0.0, Use `FormProps` instead.
+ */
+export declare const formProps: {
+    readonly model: ObjectConstructor;
+    readonly rules: {
+        readonly type: import("vue").PropType<Partial<Record<string, Record<string, any> | import("@element-plus/utils").Arrayable<import("./types").FormItemRule>>>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly labelPosition: import("@element-plus/utils").EpPropFinalized<StringConstructor, "left" | "right" | "top", unknown, "right", boolean>;
+    readonly requireAsteriskPosition: import("@element-plus/utils").EpPropFinalized<StringConstructor, "left" | "right", unknown, "left", boolean>;
+    readonly labelWidth: import("@element-plus/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
+    readonly labelSuffix: import("@element-plus/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    readonly inline: BooleanConstructor;
+    readonly inlineMessage: BooleanConstructor;
+    readonly statusIcon: BooleanConstructor;
+    readonly showMessage: import("@element-plus/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    readonly validateOnRuleChange: import("@element-plus/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    readonly hideRequiredAsterisk: BooleanConstructor;
+    readonly scrollToError: BooleanConstructor;
+    readonly scrollIntoViewOptions: import("@element-plus/utils").EpPropFinalized<(new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions) | (((new (...args: any[]) => boolean | ScrollIntoViewOptions) | (() => boolean | ScrollIntoViewOptions)) | null)[], unknown, unknown, true, boolean>;
+    readonly size: {
+        readonly type: import("vue").PropType<import("@element-plus/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly disabled: BooleanConstructor;
+};
+/**
+ * @deprecated Removed after 3.0.0, Use `FormProps` instead.
+ */
+export type FormPropsPublic = ExtractPublicPropTypes<typeof formProps>;
+/**
+ * @deprecated Removed after 3.0.0, Use `FormMetaProps` instead.
+ */
+export type FormMetaPropsPublic = ExtractPublicPropTypes<typeof formMetaProps>;
+export declare const formEmits: {
+    validate: (prop: FormItemProp, isValid: boolean, message: string) => boolean;
+};
+export type FormEmits = typeof formEmits;

package/dist/components/form/src/form.js

@@ -0,0 +1,112 @@
+import { componentSizes as a } from "../../../constants/size.js";
+import { isBoolean as n } from "../../../utils/types.js";
+import "lodash-unified";
+import "@vueuse/core";
+import { isArray as s, isString as t } from "@vue/shared";
+import "@element-plus/icons-vue";
+import { buildProps as i, definePropType as o } from "../../../utils/vue/props/runtime.js";
+import "vue";
+const p = i({
+  /**
+   * @description Control the size of components in this form.
+   */
+  size: {
+    type: String,
+    values: a
+  },
+  /**
+   * @description Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component.
+   */
+  disabled: Boolean
+});
+i({
+  ...p,
+  /**
+   * @description Data of form component.
+   */
+  model: Object,
+  /**
+   * @description Validation rules of form.
+   */
+  rules: {
+    type: o(Object)
+  },
+  /**
+   * @description Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required.
+   */
+  labelPosition: {
+    type: String,
+    values: ["left", "right", "top"],
+    default: "right"
+  },
+  /**
+   * @description Position of asterisk.
+   */
+  requireAsteriskPosition: {
+    type: String,
+    values: ["left", "right"],
+    default: "left"
+  },
+  /**
+   * @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: ""
+  },
+  /**
+   * @description Suffix of the label.
+   */
+  labelSuffix: {
+    type: String,
+    default: ""
+  },
+  /**
+   * @description Whether the form is inline.
+   */
+  inline: Boolean,
+  /**
+   * @description Whether to display the error message inline with the form item.
+   */
+  inlineMessage: Boolean,
+  /**
+   * @description Whether to display an icon indicating the validation result.
+   */
+  statusIcon: Boolean,
+  /**
+   * @description Whether to show the error message.
+   */
+  showMessage: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description Whether to trigger validation when the `rules` prop is changed.
+   */
+  validateOnRuleChange: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description Whether to hide required fields should have a red asterisk (star) beside their labels.
+   */
+  hideRequiredAsterisk: Boolean,
+  /**
+   * @description When validation fails, scroll to the first error form entry.
+   */
+  scrollToError: Boolean,
+  /**
+   * @description When validation fails, it scrolls to the first error item based on the scrollIntoView option.
+   */
+  scrollIntoViewOptions: {
+    type: o([Object, Boolean]),
+    default: !0
+  }
+});
+const c = {
+  validate: (e, r, l) => (s(e) || t(e)) && n(r) && t(l)
+};
+export {
+  c as formEmits,
+  p as formMetaProps
+};

package/dist/components/form/src/types.d.ts

@@ -1,24 +1,53 @@
+import { useFormLabelWidth } from './utils';
 import type { ComponentSize } from '@element-plus/constants';
-export interface FormContext {
-    size?: ComponentSize;
-    disabled?: boolean;
-    [key: string]: any;
+import type { Arrayable, FieldPath } from '@element-plus/utils';
+import type { RuleItem, ValidateError, ValidateFieldsError } from 'async-validator';
+import type { MaybeRef, SetupContext, UnwrapRef } from 'vue';
+import type { FormItemProp, FormItemProps, FormItemValidateState } from './form-item';
+import type { FormEmits, FormProps } from './form';
+type FormLabelWidthContext = ReturnType<typeof useFormLabelWidth>;
+interface FormItemRule extends RuleItem {
+    trigger?: Arrayable<string>;
 }
-export interface FormItemContext {
-    size?: ComponentSize;
-    $el?: HTMLDivElement | undefined;
-    validateMessage?: string;
-    validateState?: string;
-    isGroup?: boolean;
-    labelId?: string;
-    inputIds?: string[];
-    hasLabel?: boolean;
-    fieldValue?: any;
-    propString?: string;
+type FormRuleValue<V> = V extends any[] ? Arrayable<FormItemRule> : V extends Record<string, any> ? Arrayable<FormItemRule> | {
+    [K in keyof V]?: FormRuleValue<V[K]>;
+} : Arrayable<FormItemRule>;
+type FormRules<T extends MaybeRef<Record<string, any> | string> = string> = UnwrapRef<T> extends Record<string, any> ? {
+    [P in FieldPath<UnwrapRef<T>>]?: P extends keyof UnwrapRef<T> ? FormRuleValue<UnwrapRef<T>[P]> : Arrayable<FormItemRule>;
+} : Partial<Record<string, Arrayable<FormItemRule> | Record<string, any>>>;
+type FormValidationResult = Promise<boolean>;
+type FormValidateCallback = (isValid: boolean, invalidFields?: ValidateFieldsError) => Promise<void> | void;
+interface FormValidateFailure {
+    errors: ValidateError[] | null;
+    fields: ValidateFieldsError;
+}
+type FormContext = FormProps & UnwrapRef<FormLabelWidthContext> & {
+    emit: SetupContext<FormEmits>['emit'];
+    getField: (prop: FormItemProp) => FormItemContext | undefined;
+    addField: (field: FormItemContext) => void;
+    removeField: (field: FormItemContext, oldPropString?: string) => void;
+    resetFields: (props?: Arrayable<FormItemProp>) => void;
+    setInitialValues: (initModel: Record<string, any>) => void;
+    clearValidate: (props?: Arrayable<FormItemProp>) => void;
+    validateField: (props?: Arrayable<FormItemProp>, callback?: FormValidateCallback) => FormValidationResult;
+};
+interface FormItemContext extends FormItemProps {
+    $el: HTMLDivElement | undefined;
+    size: ComponentSize;
+    validateMessage: string;
+    validateState: FormItemValidateState;
+    isGroup: boolean;
+    labelId: string;
+    inputIds: string[];
+    hasLabel: boolean;
+    fieldValue: any;
+    propString: string;
     addInputId: (id: string) => void;
     removeInputId: (id: string) => void;
-    validate?: (...args: any[]) => any;
-    resetField?: () => void;
-    clearValidate?: () => void;
-    [key: string]: any;
+    validate: (trigger: string, callback?: FormValidateCallback) => FormValidationResult;
+    resetField(): void;
+    clearValidate(): void;
+    setInitialValue: (value: any) => void;
+    getInitialValue: () => any;
 }
+export type { FormContext, FormItemContext, FormItemRule, FormLabelWidthContext, FormRules, FormValidateCallback, FormValidateFailure, FormValidationResult, };

package/dist/components/form/src/utils.d.ts

@@ -0,0 +1,9 @@
+import type { Arrayable } from '@element-plus/utils';
+import type { FormItemContext } from './types';
+import type { FormItemProp } from './form-item';
+export declare function useFormLabelWidth(): {
+    autoLabelWidth: import("vue").ComputedRef<string>;
+    registerLabelWidth: (val: number, oldVal: number) => void;
+    deregisterLabelWidth: (val: number) => void;
+};
+export declare const filterFields: (fields: FormItemContext[], props: Arrayable<FormItemProp>) => FormItemContext[];

package/dist/components/form/src/utils.js

@@ -0,0 +1,45 @@
+import { ref as c, computed as s } from "vue";
+import { isArray as l } from "@vue/shared";
+import { castArray as m } from "lodash-unified";
+import "@vueuse/core";
+import { debugWarn as d } from "../../../utils/error.js";
+import "@element-plus/icons-vue";
+const f = "ElForm";
+function L() {
+  const t = c([]), o = s(() => {
+    if (!t.value.length) return "0";
+    const e = Math.max(...t.value);
+    return e ? `${e}px` : "";
+  });
+  function n(e) {
+    const i = t.value.indexOf(e);
+    return i === -1 && o.value === "0" && d(f, `unexpected width ${e}`), i;
+  }
+  function r(e, i) {
+    if (e && i) {
+      const a = n(i);
+      t.value.splice(a, 1, e);
+    } else e && t.value.push(e);
+  }
+  function u(e) {
+    const i = n(e);
+    i > -1 && t.value.splice(i, 1);
+  }
+  return {
+    autoLabelWidth: o,
+    registerLabelWidth: r,
+    deregisterLabelWidth: u
+  };
+}
+const v = (t, o) => {
+  const n = m(o).map(
+    (r) => l(r) ? r.join(".") : r
+  );
+  return n.length > 0 ? t.filter(
+    (r) => r.propString && n.includes(r.propString)
+  ) : t;
+};
+export {
+  v as filterFields,
+  L as useFormLabelWidth
+};

package/dist/components/form-item/EpFormItem.vue.d.ts

@@ -0,0 +1,55 @@
+import type { FormItemProps } from '../form/src/form-item';
+declare var __VLS_9: {
+    label: string;
+}, __VLS_11: {}, __VLS_17: {
+    error: string;
+};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    error?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<FormItemProps, {
+    /**
+     * @description Form item size.
+     */
+    size: import("vue").ComputedRef<"" | "small" | "default" | "large">;
+    /**
+     * @description Validation message.
+     */
+    validateMessage: import("vue").Ref<string, string>;
+    /**
+     * @description Validation state.
+     */
+    validateState: import("vue").Ref<"" | "error" | "success" | "validating", "" | "error" | "success" | "validating">;
+    /**
+     * @description Validate form item.
+     */
+    validate: (trigger: string, callback?: import("../form").FormValidateCallback) => import("../form").FormValidationResult;
+    /**
+     * @description Remove validation status of the field.
+     */
+    clearValidate: () => void;
+    /**
+     * @description Reset current field and remove validation result.
+     */
+    resetField: () => void;
+    /**
+     * @description Set initial value for this field. When `resetField` is called, the field will reset to this value.
+     */
+    setInitialValue: (value: any) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormItemProps> & Readonly<{}>, {
+    required: boolean;
+    labelPosition: "left" | "right" | "top" | "";
+    inlineMessage: boolean;
+    showMessage: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};