vft 0.0.363 → 0.0.365

package/es/components/form/form-item.vue2.js

@@ -1,20 +1,21 @@
-import { defineComponent, useSlots, inject, ref, computed, watch, reactive, toRefs, provide, onMounted, onBeforeUnmount, createElementBlock, openBlock, unref, normalizeClass, createBlock, createCommentVNode, createElementVNode, withCtx, resolveDynamicComponent, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createVNode, TransitionGroup, nextTick } from "vue";
-import { isBoolean, getProp, isFunction } from "@vft/utils";
-import { refDebounced } from "@vueuse/core";
-import AsyncValidator from "async-validator";
-import { isArray, clone } from "lodash-es";
-import { formContextKey, formItemContextKey } from "./constants.js";
-import FormLabelWrap from "./form-label-wrap.js";
-import { useFormSize } from "./hooks/use-form-common-props.js";
-import { useNamespace } from "../../hooks/use-namespace/index.js";
-import { useId } from "../../hooks/use-id/index.js";
-import { addUnit, castArray } from "../../utils/helper.js";
-const _hoisted_1 = ["role", "aria-labelledby"];
-const __default__ = defineComponent({
+import { defineComponent as Y, useSlots as ye, inject as D, ref as b, computed as a, watch as E, reactive as Se, toRefs as ke, provide as qe, onMounted as Ie, onBeforeUnmount as Ve, createElementBlock as _e, openBlock as F, unref as f, normalizeClass as g, createBlock as T, createCommentVNode as R, createElementVNode as G, withCtx as B, resolveDynamicComponent as we, normalizeStyle as K, renderSlot as M, createTextVNode as Ce, toDisplayString as U, createVNode as Fe, TransitionGroup as Re, nextTick as Be } from "vue";
+import { refDebounced as Me } from "@vueuse/core";
+import { isBoolean as We, getProp as W, isFunction as ze } from "@vft/utils";
+import { addUnit as O, castArray as H } from "../../utils/helper.js";
+import { isArray as J, clone as Q } from "lodash-es";
+import { useId as $e } from "../../hooks/use-id/index.js";
+import { useNamespace as xe } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import Pe from "async-validator";
+import { formContextKey as Ae, formItemContextKey as X } from "./constants.js";
+import Ne from "./form-label-wrap.js";
+import { useFormSize as Le } from "./hooks/use-form-common-props.js";
+const je = ["role", "aria-labelledby"], De = Y({
   name: "vft-form-item"
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
+}), rt = /* @__PURE__ */ Y({
+  ...De,
   props: {
     label: {},
     labelWidth: { default: "" },
@@ -26,335 +27,210 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     for: {},
     validateStatus: {},
     inlineMessage: { type: [String, Boolean], default: "" },
-    showMessage: { type: Boolean, default: true },
+    showMessage: { type: Boolean, default: !0 },
     size: {},
     hideRequiredAsterisk: { type: Boolean },
-    hideLabel: { type: Boolean, default: false }
+    hideLabel: { type: Boolean, default: !1 }
   },
   emits: ["update:error"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const slots = useSlots();
-    const formContext = inject(formContextKey, void 0);
-    const parentFormItemContext = inject(formItemContextKey, void 0);
-    const _size = useFormSize(void 0, { formItem: false });
-    const ns = useNamespace("form-item");
-    const labelId = useId().value;
-    const inputIds = ref([]);
-    const validateState = ref("");
-    const validateStateDebounced = refDebounced(validateState, 100);
-    const validateMessage = ref("");
-    const formItemRef = ref();
-    let initialValue = void 0;
-    let isResettingField = false;
-    const labelPosition = computed(
-      () => props.labelPosition || formContext?.labelPosition
-    );
-    const labelStyle = computed(() => {
-      if (labelPosition.value === "top") {
+  setup(Z, { expose: ee, emit: te }) {
+    const t = Z, re = te, z = ye(), o = D(Ae, void 0), oe = D(X, void 0), y = Le(void 0, { formItem: !1 }), s = xe("form-item"), S = $e().value, d = b([]), c = b(""), le = Me(c, 100), n = b(""), $ = b();
+    let x, v = !1;
+    const h = a(
+      () => t.labelPosition || o?.labelPosition
+    ), P = a(() => {
+      if (h.value === "top")
         return {};
-      }
-      const labelWidth = addUnit(props.labelWidth || formContext?.labelWidth || "");
-      if (labelWidth) return { width: labelWidth };
-      return {};
-    });
-    const contentStyle = computed(() => {
-      if (labelPosition.value === "top" || formContext?.inline) {
+      const e = O(t.labelWidth || o?.labelWidth || "");
+      return e ? { width: e } : {};
+    }), ae = a(() => {
+      if (h.value === "top" || o?.inline)
         return {};
-      }
-      if (!props.label && !props.labelWidth && isNested) {
+      if (!t.label && !t.labelWidth && ue)
         return {};
-      }
-      const labelWidth = addUnit(props.labelWidth || formContext?.labelWidth || "");
-      if (!props.label && !slots.label) {
-        return { marginLeft: labelWidth };
-      }
-      return {};
-    });
-    const formItemClasses = computed(() => [
-      ns.b(),
-      ns.m(_size.value),
-      ns.is("error", validateState.value === "error"),
-      ns.is("validating", validateState.value === "validating"),
-      ns.is("success", validateState.value === "success"),
-      ns.is("required", isRequired.value || props.required),
-      ns.is(
+      const e = O(t.labelWidth || o?.labelWidth || "");
+      return !t.label && !z.label ? { marginLeft: e } : {};
+    }), se = a(() => [
+      s.b(),
+      s.m(y.value),
+      s.is("error", c.value === "error"),
+      s.is("validating", c.value === "validating"),
+      s.is("success", c.value === "success"),
+      s.is("required", fe.value || t.required),
+      s.is(
         "no-asterisk",
-        props?.hideRequiredAsterisk || formContext?.hideRequiredAsterisk
+        t?.hideRequiredAsterisk || o?.hideRequiredAsterisk
       ),
-      formContext?.requireAsteriskPosition === "right" ? "asterisk-right" : "asterisk-left",
+      o?.requireAsteriskPosition === "right" ? "asterisk-right" : "asterisk-left",
       {
-        [ns.m("feedback")]: formContext?.statusIcon,
-        [ns.m(`label-${labelPosition.value}`)]: labelPosition.value
-      }
-    ]);
-    const _inlineMessage = computed(
-      () => isBoolean(props.inlineMessage) ? props.inlineMessage : formContext?.inlineMessage || false
-    );
-    const validateClasses = computed(() => [
-      ns.e("error"),
-      { [ns.em("error", "inline")]: _inlineMessage.value }
-    ]);
-    const propString = computed(() => {
-      if (!props.prop) return "";
-      return isArray(props.prop) ? props.prop.join(".") : props.prop;
-    });
-    const hasLabel = computed(() => {
-      return !!(props.label || slots.label);
-    });
-    const labelFor = computed(() => {
-      return props.for ?? (inputIds.value.length === 1 ? inputIds.value[0] : void 0);
-    });
-    const isGroup = computed(() => {
-      return !labelFor.value && hasLabel.value;
-    });
-    const isNested = !!parentFormItemContext;
-    const fieldValue = computed(() => {
-      const model = formContext?.model;
-      if (!model || !props.prop) {
-        return;
-      }
-      return getProp(model, props.prop).value;
-    });
-    const normalizedRules = computed(() => {
-      const { required } = props;
-      const rules = [];
-      if (props.rules) {
-        rules.push(
-          ...castArray(props.rules).map((item) => {
-            item.trigger = item.trigger || "blur";
-            return item;
-          })
-        );
-      }
-      const formRules = formContext?.rules;
-      if (formRules && props.prop) {
-        const _rules = getProp(
-          formRules,
-          props.prop
+        [s.m("feedback")]: o?.statusIcon,
+        [s.m(`label-${h.value}`)]: h.value
+      }
+    ]), ie = a(
+      () => We(t.inlineMessage) ? t.inlineMessage : o?.inlineMessage || !1
+    ), ne = a(() => [
+      s.e("error"),
+      { [s.em("error", "inline")]: ie.value }
+    ]), A = a(() => t.prop ? J(t.prop) ? t.prop.join(".") : t.prop : ""), k = a(() => !!(t.label || z.label)), q = a(() => t.for ?? (d.value.length === 1 ? d.value[0] : void 0)), I = a(() => !q.value && k.value), ue = !!oe, V = a(() => {
+      const e = o?.model;
+      if (!(!e || !t.prop))
+        return W(e, t.prop).value;
+    }), _ = a(() => {
+      const { required: e } = t, r = [];
+      t.rules && r.push(
+        ...H(t.rules).map((l) => (l.trigger = l.trigger || "blur", l))
+      );
+      const i = o?.rules;
+      if (i && t.prop) {
+        const l = W(
+          i,
+          t.prop
         ).value;
-        if (_rules) {
-          rules.push(...castArray(_rules));
-        }
-      }
-      if (required !== void 0) {
-        const requiredRules = rules.map((rule, i) => [rule, i]).filter(([rule]) => Object.keys(rule).includes("required"));
-        if (requiredRules.length > 0) {
-          for (const [rule, i] of requiredRules) {
-            if (rule.required === required) continue;
-            rules[i] = { ...rule, required };
-          }
-        } else {
-          rules.push({ required });
-        }
-      }
-      return rules;
-    });
-    const validateEnabled = computed(() => normalizedRules.value.length > 0);
-    const getFilteredRule = (trigger) => {
-      const rules = normalizedRules.value;
-      return rules.filter((rule) => {
-        if (!rule.trigger || !trigger) return true;
-        if (isArray(rule.trigger)) {
-          return rule.trigger.includes(trigger);
-        } else {
-          return rule.trigger === trigger;
-        }
-      }).map(({ trigger: trigger2, ...rule }) => rule);
-    };
-    const isRequired = computed(
-      () => normalizedRules.value.some((rule) => rule.required)
-    );
-    const shouldShowError = computed(
-      () => validateStateDebounced.value === "error" && props.showMessage && (formContext?.showMessage ?? true)
-    );
-    const currentLabel = computed(
-      () => `${props.label || ""}${formContext?.labelSuffix || ""}`
-    );
-    const setValidationState = (state) => {
-      validateState.value = state;
-    };
-    const onValidationFailed = (error) => {
-      const { errors, fields } = error;
-      if (!errors || !fields) {
-        console.error(error);
-      }
-      setValidationState("error");
-      validateMessage.value = errors ? errors?.[0]?.message ?? `${props.prop} is required` : "";
-      formContext?.emit("validate", props.prop, false, validateMessage.value);
-    };
-    const onValidationSucceeded = () => {
-      setValidationState("success");
-      formContext?.emit("validate", props.prop, true, "");
-    };
-    const doValidate = async (rules) => {
-      const modelName = propString.value;
-      const validator = new AsyncValidator({
-        [modelName]: rules
-      });
-      return validator.validate({ [modelName]: fieldValue.value }, { firstFields: true }).then(() => {
-        onValidationSucceeded();
-        return true;
-      }).catch((err) => {
-        onValidationFailed(err);
-        return Promise.reject(err);
-      });
-    };
-    const validate = async (trigger, callback) => {
-      if (isResettingField || !props.prop) {
-        return false;
-      }
-      const hasCallback = isFunction(callback);
-      if (!validateEnabled.value) {
-        callback?.(false);
-        return false;
-      }
-      const rules = getFilteredRule(trigger);
-      if (rules.length === 0) {
-        callback?.(true);
-        return true;
-      }
-      setValidationState("validating");
-      return doValidate(rules).then(() => {
-        callback?.(true);
-        return true;
-      }).catch((err) => {
-        const { fields } = err;
-        callback?.(false, fields);
-        return hasCallback ? false : Promise.reject(fields);
-      });
-    };
-    const clearValidate = () => {
-      if (props.error) {
-        emit("update:error", "");
-      }
-      setValidationState("");
-      validateMessage.value = "";
-      isResettingField = false;
-    };
-    const resetField = async () => {
-      const model = formContext?.model;
-      if (!model || !props.prop) return;
-      const computedValue = getProp(model, props.prop);
-      isResettingField = true;
-      computedValue.value = clone(initialValue);
-      await nextTick();
-      clearValidate();
-      isResettingField = false;
-    };
-    const addInputId = (id) => {
-      if (!inputIds.value.includes(id)) {
-        inputIds.value.push(id);
-      }
-    };
-    const removeInputId = (id) => {
-      inputIds.value = inputIds.value.filter((listId) => listId !== id);
+        l && r.push(...H(l));
+      }
+      if (e !== void 0) {
+        const l = r.map((u, m) => [u, m]).filter(([u]) => Object.keys(u).includes("required"));
+        if (l.length > 0)
+          for (const [u, m] of l)
+            u.required !== e && (r[m] = { ...u, required: e });
+        else
+          r.push({ required: e });
+      }
+      return r;
+    }), de = a(() => _.value.length > 0), ce = (e) => _.value.filter((i) => !i.trigger || !e ? !0 : J(i.trigger) ? i.trigger.includes(e) : i.trigger === e).map(({ trigger: i, ...l }) => l), fe = a(
+      () => _.value.some((e) => e.required)
+    ), pe = a(
+      () => le.value === "error" && t.showMessage && (o?.showMessage ?? !0)
+    ), N = a(
+      () => `${t.label || ""}${o?.labelSuffix || ""}`
+    ), p = (e) => {
+      c.value = e;
+    }, me = (e) => {
+      const { errors: r, fields: i } = e;
+      (!r || !i) && console.error(e), p("error"), n.value = r ? r?.[0]?.message ?? `${t.prop} is required` : "", o?.emit("validate", t.prop, !1, n.value);
+    }, ve = () => {
+      p("success"), o?.emit("validate", t.prop, !0, "");
+    }, he = async (e) => {
+      const r = A.value;
+      return new Pe({
+        [r]: e
+      }).validate({ [r]: V.value }, { firstFields: !0 }).then(() => (ve(), !0)).catch((l) => (me(l), Promise.reject(l)));
+    }, L = async (e, r) => {
+      if (v || !t.prop)
+        return !1;
+      const i = ze(r);
+      if (!de.value)
+        return r?.(!1), !1;
+      const l = ce(e);
+      return l.length === 0 ? (r?.(!0), !0) : (p("validating"), he(l).then(() => (r?.(!0), !0)).catch((u) => {
+        const { fields: m } = u;
+        return r?.(!1, m), i ? !1 : Promise.reject(m);
+      }));
+    }, w = () => {
+      t.error && re("update:error", ""), p(""), n.value = "", v = !1;
+    }, j = async () => {
+      const e = o?.model;
+      if (!e || !t.prop) return;
+      const r = W(e, t.prop);
+      v = !0, r.value = Q(x), await Be(), w(), v = !1;
+    }, be = (e) => {
+      d.value.includes(e) || d.value.push(e);
+    }, ge = (e) => {
+      d.value = d.value.filter((r) => r !== e);
     };
-    watch(
-      () => props.error,
-      (val) => {
-        validateMessage.value = val || "";
-        setValidationState(val ? "error" : "");
+    E(
+      () => t.error,
+      (e) => {
+        n.value = e || "", p(e ? "error" : "");
       },
-      { immediate: true }
+      { immediate: !0 }
+    ), E(
+      () => t.validateStatus,
+      (e) => p(e || "")
     );
-    watch(
-      () => props.validateStatus,
-      (val) => setValidationState(val || "")
-    );
-    const context = reactive({
-      ...toRefs(props),
-      $el: formItemRef,
-      size: _size,
-      validateMessage,
-      validateState,
-      labelId,
-      inputIds,
-      isGroup,
-      hasLabel,
-      fieldValue,
-      addInputId,
-      removeInputId,
-      resetField,
-      clearValidate,
-      validate,
-      propString
-    });
-    provide(formItemContextKey, context);
-    onMounted(() => {
-      if (props.prop) {
-        formContext?.addField(context);
-        initialValue = clone(fieldValue.value);
-      }
+    const C = Se({
+      ...ke(t),
+      $el: $,
+      size: y,
+      validateMessage: n,
+      validateState: c,
+      labelId: S,
+      inputIds: d,
+      isGroup: I,
+      hasLabel: k,
+      fieldValue: V,
+      addInputId: be,
+      removeInputId: ge,
+      resetField: j,
+      clearValidate: w,
+      validate: L,
+      propString: A
     });
-    onBeforeUnmount(() => {
-      formContext?.removeField(context);
-    });
-    __expose({
-      size: _size,
-      validateMessage,
-      validateState,
-      validate,
-      clearValidate,
-      resetField
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "formItemRef",
-        ref: formItemRef,
-        class: normalizeClass(formItemClasses.value),
-        role: isGroup.value ? "group" : void 0,
-        "aria-labelledby": isGroup.value ? unref(labelId) : void 0
+    return qe(X, C), Ie(() => {
+      t.prop && (o?.addField(C), x = Q(V.value));
+    }), Ve(() => {
+      o?.removeField(C);
+    }), ee({
+      size: y,
+      validateMessage: n,
+      validateState: c,
+      validate: L,
+      clearValidate: w,
+      resetField: j
+    }), (e, r) => (F(), _e("div", {
+      ref_key: "formItemRef",
+      ref: $,
+      class: g(se.value),
+      role: I.value ? "group" : void 0,
+      "aria-labelledby": I.value ? f(S) : void 0
+    }, [
+      e.hideLabel ? R("", !0) : (F(), T(f(Ne), {
+        key: 0,
+        "is-auto-width": P.value.width === "auto",
+        "update-all": f(o)?.labelWidth === "auto"
+      }, {
+        default: B(() => [
+          k.value ? (F(), T(we(q.value ? "label" : "div"), {
+            key: 0,
+            id: f(S),
+            for: q.value,
+            class: g(f(s).e("label")),
+            style: K(P.value)
+          }, {
+            default: B(() => [
+              M(e.$slots, "label", { label: N.value }, () => [
+                Ce(U(N.value), 1)
+              ])
+            ]),
+            _: 3
+          }, 8, ["id", "for", "class", "style"])) : R("", !0)
+        ]),
+        _: 3
+      }, 8, ["is-auto-width", "update-all"])),
+      G("div", {
+        class: g(f(s).e("content")),
+        style: K(ae.value)
       }, [
-        !_ctx.hideLabel ? (openBlock(), createBlock(unref(FormLabelWrap), {
-          key: 0,
-          "is-auto-width": labelStyle.value.width === "auto",
-          "update-all": unref(formContext)?.labelWidth === "auto"
+        M(e.$slots, "default"),
+        Fe(Re, {
+          name: `${f(s).namespace.value}-zoom-in-top`
         }, {
-          default: withCtx(() => [
-            hasLabel.value ? (openBlock(), createBlock(resolveDynamicComponent(labelFor.value ? "label" : "div"), {
+          default: B(() => [
+            pe.value ? M(e.$slots, "error", {
               key: 0,
-              id: unref(labelId),
-              for: labelFor.value,
-              class: normalizeClass(unref(ns).e("label")),
-              style: normalizeStyle(labelStyle.value)
-            }, {
-              default: withCtx(() => [
-                renderSlot(_ctx.$slots, "label", { label: currentLabel.value }, () => [
-                  createTextVNode(toDisplayString(currentLabel.value), 1)
-                ])
-              ]),
-              _: 3
-            }, 8, ["id", "for", "class", "style"])) : createCommentVNode("", true)
+              error: n.value
+            }, () => [
+              G("div", {
+                class: g(ne.value)
+              }, U(n.value), 3)
+            ]) : R("", !0)
           ]),
           _: 3
-        }, 8, ["is-auto-width", "update-all"])) : createCommentVNode("", true),
-        createElementVNode("div", {
-          class: normalizeClass(unref(ns).e("content")),
-          style: normalizeStyle(contentStyle.value)
-        }, [
-          renderSlot(_ctx.$slots, "default"),
-          createVNode(TransitionGroup, {
-            name: `${unref(ns).namespace.value}-zoom-in-top`
-          }, {
-            default: withCtx(() => [
-              shouldShowError.value ? renderSlot(_ctx.$slots, "error", {
-                key: 0,
-                error: validateMessage.value
-              }, () => [
-                createElementVNode("div", {
-                  class: normalizeClass(validateClasses.value)
-                }, toDisplayString(validateMessage.value), 3)
-              ]) : createCommentVNode("", true)
-            ]),
-            _: 3
-          }, 8, ["name"])
-        ], 6)
-      ], 10, _hoisted_1);
-    };
+        }, 8, ["name"])
+      ], 6)
+    ], 10, je));
   }
 });
 export {
-  _sfc_main as default
+  rt as default
 };