vft 0.0.249 → 0.0.252

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

@@ -1,24 +1,26 @@
-import { defineComponent as J, useSlots as he, inject as P, ref as g, computed as a, watch as j, reactive as be, toRefs as ye, provide as Se, onMounted as _e, onBeforeUnmount as Ie, createElementBlock as Ve, openBlock as C, unref as f, normalizeClass as h, createBlock as D, createCommentVNode as E, createElementVNode as L, withCtx as F, resolveDynamicComponent as qe, normalizeStyle as T, renderSlot as k, createTextVNode as we, toDisplayString as G, createVNode as Ce, TransitionGroup as Fe, nextTick as ke } from "vue";
-import { refDebounced as Me } from "@vueuse/core";
-import { addUnit as K, isBoolean as Re, isString as We, getProp as M, isFunction as xe } from "@vft/utils";
+import { defineComponent as Y, useSlots as ye, inject as A, ref as g, computed as a, watch as D, reactive as Se, toRefs as Ie, provide as _e, onMounted as Ve, onBeforeUnmount as qe, createElementBlock as we, openBlock as E, unref as f, normalizeClass as h, createVNode as L, createElementVNode as T, withCtx as k, createBlock as Ce, createCommentVNode as G, resolveDynamicComponent as Fe, normalizeStyle as K, renderSlot as M, createTextVNode as ke, toDisplayString as U, TransitionGroup as Me, nextTick as Re } from "vue";
+import { refDebounced as We } from "@vueuse/core";
+import { addUnit as O, isBoolean as xe, getProp as R, isFunction as ze } from "@vft/utils";
+import { castArray as H } from "../../utils/helper.js";
 import "../../utils/ns-cover.js";
-import { castArray as U, clone as O } from "lodash-es";
-import { useId as ze } from "../../hooks/use-id/index.js";
+import { isArray as J, clone as Q } from "lodash-es";
+import { useId as $e } from "../../hooks/use-id/index.js";
 import { useNamespace as Be } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import $e from "async-validator";
-import { formContextKey as Ne, formItemContextKey as H } from "./constants.js";
-import Ae from "./form-label-wrap.js";
-import { useFormSize as Pe } from "./hooks/use-form-common-props.js";
-const je = ["role", "aria-labelledby"], De = J({
+import Pe from "async-validator";
+import { formContextKey as Ne, formItemContextKey as X } from "./constants.js";
+import je from "./form-label-wrap.js";
+import { useFormSize as Ae } from "./hooks/use-form-common-props.js";
+const De = ["role", "aria-labelledby"], Ee = Y({
   name: "vft-form-item"
-}), tt = /* @__PURE__ */ J({
-  ...De,
+}), ot = /* @__PURE__ */ Y({
+  ...Ee,
   props: {
     label: {},
     labelWidth: { default: "" },
+    labelPosition: {},
     prop: {},
     required: { type: Boolean, default: void 0 },
     rules: {},
@@ -30,197 +32,200 @@ const je = ["role", "aria-labelledby"], De = J({
     size: {}
   },
   emits: ["update:error"],
-  setup(Q, { expose: X, emit: Y }) {
-    const t = Q, s = Be("form-item"), Z = Y, R = he(), o = P(Ne, void 0), ee = P(H, void 0), b = Pe(void 0, { formItem: !1 }), y = ze().value, u = g([]), d = g(""), te = Me(
-      d,
-      100
-    ), c = g(""), W = g();
-    let x, v = !1;
-    const z = a(() => {
-      if (o?.labelPosition === "top")
+  setup(Z, { expose: ee, emit: te }) {
+    const t = Z, re = te, W = ye(), o = A(Ne, void 0), oe = A(X, void 0), y = Ae(void 0, { formItem: !1 }), s = Be("form-item"), S = $e().value, d = g([]), c = g(""), le = We(c, 100), n = g(""), x = g();
+    let z, v = !1;
+    const b = a(
+      () => t.labelPosition || o?.labelPosition
+    ), $ = a(() => {
+      if (b.value === "top")
         return {};
-      const e = K(t.labelWidth || o?.labelWidth || "");
+      const e = O(t.labelWidth || o?.labelWidth || "");
       return e ? { width: e } : {};
-    }), re = a(() => {
-      if (o?.labelPosition === "top" || o?.inline)
+    }), ae = a(() => {
+      if (b.value === "top" || o?.inline)
         return {};
-      if (!t.label && !t.labelWidth && ie)
+      if (!t.label && !t.labelWidth && ue)
         return {};
-      const e = K(
-        t.labelWidth || o?.labelWidth || ""
-      );
-      return !t.label && !R.label ? { marginLeft: e } : {};
-    }), oe = a(() => [
+      const e = O(t.labelWidth || o?.labelWidth || "");
+      return !t.label && !W.label ? { marginLeft: e } : {};
+    }), se = a(() => [
       s.b(),
-      s.m(b.value),
-      s.is("error", d.value === "error"),
-      s.is("validating", d.value === "validating"),
-      s.is("success", d.value === "success"),
-      s.is("required", de.value || t.required),
+      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", o?.hideRequiredAsterisk),
       o?.requireAsteriskPosition === "right" ? "asterisk-right" : "asterisk-left",
-      { [s.m("feedback")]: o?.statusIcon }
-    ]), le = a(
-      () => Re(t.inlineMessage) ? t.inlineMessage : o?.inlineMessage || !1
-    ), ae = a(() => [
+      {
+        [s.m("feedback")]: o?.statusIcon,
+        [s.m(`label-${b.value}`)]: b.value
+      }
+    ]), ie = a(
+      () => xe(t.inlineMessage) ? t.inlineMessage : o?.inlineMessage || !1
+    ), ne = a(() => [
       s.e("error"),
-      { [s.em("error", "inline")]: le.value }
-    ]), se = a(() => t.prop ? We(t.prop) ? t.prop : t.prop.join(".") : ""), S = a(() => !!(t.label || R.label)), _ = a(() => t.for || u.value.length === 1 ? u.value[0] : void 0), I = a(() => !_.value && S.value), ie = !!ee, B = a(() => {
+      { [s.em("error", "inline")]: ie.value }
+    ]), B = a(() => t.prop ? J(t.prop) ? t.prop.join(".") : t.prop : ""), I = a(() => !!(t.label || W.label)), _ = a(() => t.for ?? (d.value.length === 1 ? d.value[0] : void 0)), V = a(() => !_.value && I.value), ue = !!oe, q = a(() => {
       const e = o?.model;
       if (!(!e || !t.prop))
-        return M(e, t.prop).value;
-    }), V = a(() => {
+        return R(e, t.prop).value;
+    }), w = a(() => {
       const { required: e } = t, r = [];
       t.rules && r.push(
-        ...U(t.rules).map((l) => (l.trigger = l.trigger || "blur", l))
+        ...H(t.rules).map((l) => (l.trigger = l.trigger || "blur", l))
       );
       const i = o?.rules;
       if (i && t.prop) {
-        const l = M(
+        const l = R(
           i,
           t.prop
         ).value;
-        l && r.push(...U(l));
+        l && r.push(...H(l));
       }
       if (e !== void 0) {
-        const l = r.map((n, m) => [n, m]).filter(([n]) => Object.keys(n).includes("required"));
+        const l = r.map((u, p) => [u, p]).filter(([u]) => Object.keys(u).includes("required"));
         if (l.length > 0)
-          for (const [n, m] of l)
-            n.required !== e && (r[m] = { ...n, required: e });
+          for (const [u, p] of l)
+            u.required !== e && (r[p] = { ...u, required: e });
         else
           r.push({ required: e });
       }
       return r;
-    }), ne = a(() => V.value.length > 0), ue = (e) => V.value.filter((i) => !i.trigger || !e ? !0 : Array.isArray(i.trigger) ? i.trigger.includes(e) : i.trigger === e).map(({ trigger: i, ...l }) => l), de = a(
-      () => V.value.some((e) => e.required)
-    ), ce = a(
-      () => te.value === "error" && t.showMessage && (o?.showMessage ?? !0)
-    ), $ = a(
+    }), de = a(() => w.value.length > 0), ce = (e) => w.value.filter((i) => !i.trigger || !e ? !0 : J(i.trigger) ? i.trigger.includes(e) : i.trigger === e).map(({ trigger: i, ...l }) => l), fe = a(
+      () => w.value.some((e) => e.required)
+    ), me = a(
+      () => le.value === "error" && t.showMessage && (o?.showMessage ?? !0)
+    ), P = a(
       () => `${t.label || ""}${o?.labelSuffix || ""}`
-    ), p = (e) => {
-      d.value = e;
-    }, fe = (e) => {
+    ), m = (e) => {
+      c.value = e;
+    }, pe = (e) => {
       const { errors: r, fields: i } = e;
-      (!r || !i) && console.error(e), p("error"), c.value = r ? r?.[0]?.message ?? `${t.prop} is required` : "", o?.emit("validate", t.prop, !1, c.value);
-    }, pe = () => {
-      p("success"), o?.emit("validate", t.prop, !0, "");
-    }, me = async (e) => {
-      const r = se.value;
-      return new $e({
+      (!r || !i) && console.error(e), m("error"), n.value = r ? r?.[0]?.message ?? `${t.prop} is required` : "", o?.emit("validate", t.prop, !1, n.value);
+    }, ve = () => {
+      m("success"), o?.emit("validate", t.prop, !0, "");
+    }, be = async (e) => {
+      const r = B.value;
+      return new Pe({
         [r]: e
-      }).validate({ [r]: B.value }, { firstFields: !0 }).then(() => (pe(), !0)).catch((l) => (fe(l), Promise.reject(l)));
+      }).validate({ [r]: q.value }, { firstFields: !0 }).then(() => (ve(), !0)).catch((l) => (pe(l), Promise.reject(l)));
     }, N = async (e, r) => {
       if (v || !t.prop)
         return !1;
-      const i = xe(r);
-      if (!ne.value)
+      const i = ze(r);
+      if (!de.value)
         return r?.(!1), !1;
-      const l = ue(e);
-      return l.length === 0 ? (r?.(!0), !0) : (p("validating"), me(l).then(() => (r?.(!0), !0)).catch((n) => {
-        const { fields: m } = n;
-        return r?.(!1, m), i ? !1 : Promise.reject(m);
+      const l = ce(e);
+      return l.length === 0 ? (r?.(!0), !0) : (m("validating"), be(l).then(() => (r?.(!0), !0)).catch((u) => {
+        const { fields: p } = u;
+        return r?.(!1, p), i ? !1 : Promise.reject(p);
       }));
-    }, q = () => {
-      t.error && Z("update:error", ""), p(""), c.value = "", v = !1;
-    }, A = async () => {
+    }, C = () => {
+      t.error && re("update:error", ""), m(""), n.value = "", v = !1;
+    }, j = async () => {
       const e = o?.model;
       if (!e || !t.prop) return;
-      const r = M(e, t.prop);
-      v = !0, r.value = O(x), await ke(), q(), v = !1;
-    }, ve = (e) => {
-      u.value.includes(e) || u.value.push(e);
+      const r = R(e, t.prop);
+      v = !0, r.value = Q(z), await Re(), C(), v = !1;
     }, ge = (e) => {
-      u.value = u.value.filter((r) => r !== e);
+      d.value.includes(e) || d.value.push(e);
+    }, he = (e) => {
+      d.value = d.value.filter((r) => r !== e);
     };
-    j(
+    D(
       () => t.error,
       (e) => {
-        c.value = e || "", p(e ? "error" : "");
+        n.value = e || "", m(e ? "error" : "");
       },
       { immediate: !0 }
-    ), j(
+    ), D(
       () => t.validateStatus,
-      (e) => p(e || "")
+      (e) => m(e || "")
     );
-    const w = be({
-      ...ye(t),
-      $el: W,
-      size: b,
-      validateState: d,
-      labelId: y,
-      inputIds: u,
-      isGroup: I,
-      hasLabel: S,
-      addInputId: ve,
-      removeInputId: ge,
-      resetField: A,
-      clearValidate: q,
-      validate: N
+    const F = Se({
+      ...Ie(t),
+      $el: x,
+      size: y,
+      validateMessage: n,
+      validateState: c,
+      labelId: S,
+      inputIds: d,
+      isGroup: V,
+      hasLabel: I,
+      fieldValue: q,
+      addInputId: ge,
+      removeInputId: he,
+      resetField: j,
+      clearValidate: C,
+      validate: N,
+      propString: B
     });
-    return Se(H, w), _e(() => {
-      t.prop && (o?.addField(w), x = O(B.value));
-    }), Ie(() => {
-      o?.removeField(w);
-    }), X({
-      size: b,
-      validateMessage: c,
-      validateState: d,
+    return _e(X, F), Ve(() => {
+      t.prop && (o?.addField(F), z = Q(q.value));
+    }), qe(() => {
+      o?.removeField(F);
+    }), ee({
+      size: y,
+      validateMessage: n,
+      validateState: c,
       validate: N,
-      clearValidate: q,
-      resetField: A
-    }), (e, r) => (C(), Ve("div", {
+      clearValidate: C,
+      resetField: j
+    }), (e, r) => (E(), we("div", {
       ref_key: "formItemRef",
-      ref: W,
-      class: h(oe.value),
-      role: I.value ? "group" : void 0,
-      "aria-labelledby": I.value ? f(y) : void 0
+      ref: x,
+      class: h(se.value),
+      role: V.value ? "group" : void 0,
+      "aria-labelledby": V.value ? f(S) : void 0
     }, [
-      S.value ? (C(), D(f(Ae), {
-        key: 0,
-        "is-auto-width": z.value.width === "auto",
+      L(f(je), {
+        "is-auto-width": $.value.width === "auto",
         "update-all": f(o)?.labelWidth === "auto"
       }, {
-        default: F(() => [
-          (C(), D(qe(_.value ? "label" : "div"), {
-            id: f(y),
+        default: k(() => [
+          I.value ? (E(), Ce(Fe(_.value ? "label" : "div"), {
+            key: 0,
+            id: f(S),
             for: _.value,
             class: h(f(s).e("label")),
-            style: T(z.value)
+            style: K($.value)
           }, {
-            default: F(() => [
-              k(e.$slots, "label", { label: $.value }, () => [
-                we(G($.value), 1)
+            default: k(() => [
+              M(e.$slots, "label", { label: P.value }, () => [
+                ke(U(P.value), 1)
               ])
             ]),
             _: 3
-          }, 8, ["id", "for", "class", "style"]))
+          }, 8, ["id", "for", "class", "style"])) : G("", !0)
         ]),
         _: 3
-      }, 8, ["is-auto-width", "update-all"])) : E("", !0),
-      L("div", {
+      }, 8, ["is-auto-width", "update-all"]),
+      T("div", {
         class: h(f(s).e("content")),
-        style: T(re.value)
+        style: K(ae.value)
       }, [
-        k(e.$slots, "default"),
-        Ce(Fe, {
+        M(e.$slots, "default"),
+        L(Me, {
           name: `${f(s).namespace.value}-zoom-in-top`
         }, {
-          default: F(() => [
-            ce.value ? k(e.$slots, "error", {
+          default: k(() => [
+            me.value ? M(e.$slots, "error", {
               key: 0,
-              error: c.value
+              error: n.value
             }, () => [
-              L("div", {
-                class: h(ae.value)
-              }, G(c.value), 3)
-            ]) : E("", !0)
+              T("div", {
+                class: h(ne.value)
+              }, U(n.value), 3)
+            ]) : G("", !0)
           ]),
           _: 3
         }, 8, ["name"])
       ], 6)
-    ], 10, je));
+    ], 10, De));
   }
 });
 export {
-  tt as default
+  ot as default
 };

package/es/components/form/form-label-wrap.js

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