x-next 1.1.0 → 1.3.0

package/dist/es/components/form/Form.vue2.js

@@ -1,11 +1,11 @@
-import { defineComponent as q, ref as K, toRefs as D, computed as b, reactive as p, provide as G } from "vue";
-import H from "../../node_modules/.pnpm/scroll-into-view-if-needed@3.1.0/node_modules/scroll-into-view-if-needed/dist/index.js";
-import { formInjectionKey as J } from "./context.js";
-import { isArray as Q, isFunction as E } from "../../_utils/is.js";
-import { useSize as U } from "../../_hooks/use-size.js";
-import { getFormElementId as X } from "./utils.js";
-import { getClassNameMixin as Y } from "../../_utils/config.js";
-const se = q({
+import { defineComponent as K, ref as U, toRefs as D, computed as m, watch as G, onBeforeUnmount as H, reactive as E, provide as J } from "vue";
+import Q from "../../node_modules/.pnpm/scroll-into-view-if-needed@3.1.0/node_modules/scroll-into-view-if-needed/dist/index.js";
+import { formInjectionKey as X } from "./context.js";
+import { isArray as Y, isFunction as S } from "../../_utils/is.js";
+import { useSize as Z } from "../../_hooks/use-size.js";
+import { getFormElementId as I } from "./utils.js";
+import { getClassNameMixin as ee } from "../../_utils/config.js";
+const de = K({
   name: "Form",
   props: {
     /**
@@ -125,129 +125,141 @@ const se = q({
     submitFailed: (l, n) => !0
   },
   setup(l, { emit: n }) {
-    const d = Y("form"), m = K(), {
-      id: S,
-      model: c,
-      layout: j,
-      disabled: g,
-      labelAlign: C,
-      labelColProps: O,
-      wrapperColProps: T,
-      labelColStyle: V,
-      wrapperColStyle: z,
-      size: W,
-      rules: x
-    } = D(l), { mergedSize: F } = U(W), L = b(() => l.layout === "horizontal" && l.autoLabelWidth), a = [], u = p({}), P = b(() => Math.max(...Object.values(u))), w = (e) => {
-      e && e.field && !a.includes(e) && a.push(e);
-    }, R = (e) => {
+    const f = ee("form"), v = U(), {
+      id: j,
+      model: u,
+      layout: g,
+      disabled: C,
+      labelAlign: O,
+      labelColProps: T,
+      wrapperColProps: V,
+      labelColStyle: z,
+      wrapperColStyle: W,
+      size: x,
+      rules: L
+    } = D(l), { mergedSize: F } = Z(x), P = m(() => l.layout === "horizontal" && l.autoLabelWidth), a = [];
+    let d = 0;
+    G(u, () => {
+      d++;
+    }, { deep: !0, flush: "sync" }), H(() => {
+      d++;
+    });
+    const h = E({}), w = m(() => Math.max(0, ...Object.values(h))), A = (e) => {
+      e && e.field && !a.includes(e) && (d++, a.push(e));
+    }, B = (e) => {
       if (e) {
         const t = a.indexOf(e);
-        t > -1 && a.splice(t, 1);
+        t > -1 && (d++, a.splice(t, 1));
       }
-    }, _ = (e) => {
-      a.forEach((t) => {
+    }, R = (e) => {
+      d++, a.forEach((t) => {
         e[t.field] && t.setField(e[t.field]);
       });
-    }, k = (e, t) => {
-      t && u[t] !== e && (u[t] = e);
-    }, A = (e) => {
-      e && delete u[e];
-    }, B = (e) => {
+    }, _ = (e, t) => {
+      t && h[t] !== e && (h[t] = e);
+    }, k = (e) => {
+      e && delete h[e];
+    }, M = (e) => {
+      d++;
       const t = e ? [].concat(e) : [];
-      a.forEach((o) => {
-        (t.length === 0 || t.includes(o.field)) && o.resetField();
+      a.forEach((r) => {
+        (t.length === 0 || t.includes(r.field)) && r.resetField();
       });
-    }, M = (e) => {
+    }, N = (e) => {
+      d++;
       const t = e ? [].concat(e) : [];
-      a.forEach((o) => {
-        (t.length === 0 || t.includes(o.field)) && o.clearValidate();
+      a.forEach((r) => {
+        (t.length === 0 || t.includes(r.field)) && r.clearValidate();
       });
-    }, v = (e, t) => {
-      const r = (m.value || document.body).querySelector(`#${X(l.id, e)}`);
-      r && H(r, {
+    }, y = (e, t) => {
+      var o;
+      const r = I(l.id, e), i = Array.from(((o = v.value) == null ? void 0 : o.querySelectorAll("[id]")) ?? []).find((s) => s.id === r);
+      i && Q(i, {
         // @ts-ignore
         behavior: "smooth",
         block: "nearest",
         scrollMode: "if-needed",
         ...t
       });
-    }, f = (e) => {
+    }, b = (e) => {
       const t = typeof l.scrollToFirstError == "object" ? l.scrollToFirstError : void 0;
-      v(e, t);
-    }, N = (e) => {
+      y(e, t);
+    }, q = (e) => {
       const t = [];
-      return a.forEach((o) => {
-        t.push(o.validate());
-      }), Promise.all(t).then((o) => {
-        const r = {};
-        let i = !1;
-        return o.forEach((s) => {
-          s && (i = !0, r[s.field] = s);
-        }), i && l.scrollToFirstError && f(Object.keys(r)[0]), E(e) && e(i ? r : void 0), i ? r : void 0;
-      });
-    }, y = (e, t) => {
-      const o = [];
-      for (const r of a)
-        (Q(e) && e.includes(r.field) || e === r.field) && o.push(r.validate());
-      return Promise.all(o).then((r) => {
+      return a.forEach((r) => {
+        t.push(r.validate());
+      }), Promise.all(t).then((r) => {
         const i = {};
+        let o = !1;
+        return r.forEach((s) => {
+          s && (o = !0, i[s.field] = s);
+        }), o && l.scrollToFirstError && b(Object.keys(i)[0]), S(e) && e(o ? i : void 0), o ? i : void 0;
+      });
+    }, p = (e, t) => {
+      const r = [];
+      for (const i of a)
+        (Y(e) && e.includes(i.field) || e === i.field) && r.push(i.validate());
+      return Promise.all(r).then((i) => {
+        const o = {};
         let s = !1;
-        return r.forEach((h) => {
-          h && (s = !0, i[h.field] = h);
-        }), s && l.scrollToFirstError && f(Object.keys(i)[0]), E(t) && t(s ? i : void 0), s ? i : void 0;
+        return i.forEach((c) => {
+          c && (s = !0, o[c.field] = c);
+        }), s && l.scrollToFirstError && b(Object.keys(o)[0]), S(t) && t(s ? o : void 0), s ? o : void 0;
       });
     }, $ = (e) => {
-      const t = [];
-      a.forEach((o) => {
-        t.push(o.validate());
-      }), Promise.all(t).then((o) => {
-        const r = {};
-        let i = !1;
-        o.forEach((s) => {
-          s && (i = !0, r[s.field] = s);
-        }), i ? (l.scrollToFirstError && f(Object.keys(r)[0]), n("submitFailed", { values: c.value, errors: r }, e)) : n("submitSuccess", c.value, e), n("submit", { values: c.value, errors: i ? r : void 0 }, e);
+      const t = ++d, r = [];
+      a.forEach((i) => {
+        r.push(i.validate());
+      }), Promise.all(r).then((i) => {
+        if (t !== d)
+          return;
+        const o = {};
+        let s = !1;
+        i.forEach((c) => {
+          c && (s = !0, o[c.field] = c);
+        }), s ? (l.scrollToFirstError && b(Object.keys(o)[0]), n("submitFailed", { values: u.value, errors: o }, e)) : n("submitSuccess", u.value, e), n("submit", { values: u.value, errors: s ? o : void 0 }, e);
       });
     };
-    return G(
-      J,
-      p({
-        id: S,
-        layout: j,
-        disabled: g,
-        labelAlign: C,
-        labelColProps: O,
-        wrapperColProps: T,
-        labelColStyle: V,
-        wrapperColStyle: z,
-        model: c,
+    return J(
+      X,
+      E({
+        id: j,
+        layout: g,
+        disabled: C,
+        labelAlign: O,
+        labelColProps: T,
+        wrapperColProps: V,
+        labelColStyle: z,
+        wrapperColStyle: W,
+        model: u,
         size: F,
-        rules: x,
+        rules: L,
         fields: a,
-        addField: w,
-        removeField: R,
-        validateField: y,
-        setLabelWidth: k,
-        removeLabelWidth: A,
-        maxLabelWidth: P,
-        autoLabelWidth: L
+        addField: A,
+        removeField: B,
+        validateField: p,
+        setLabelWidth: _,
+        removeLabelWidth: k,
+        maxLabelWidth: w,
+        autoLabelWidth: P
       })
     ), {
-      cls: b(() => [
-        d.block,
-        d.modifier(`layout-${l.layout}`),
-        d.modifier(`size-${F.value}`),
+      cls: m(() => [
+        f.block,
+        f.modifier(`layout-${l.layout}`),
+        f.modifier(`size-${F.value}`),
         {
-          [d.modifier("auto-label-width")]: l.autoLabelWidth
+          [f.modifier("auto-label-width")]: l.autoLabelWidth
         }
       ]),
-      formRef: m,
+      formRef: v,
       handleSubmit: $,
-      innerValidate: N,
-      innerValidateField: y,
-      innerResetFields: B,
-      innerClearValidate: M,
-      innerSetFields: _,
-      innerScrollToField: v
+      innerValidate: q,
+      innerValidateField: p,
+      innerResetFields: M,
+      innerClearValidate: N,
+      innerSetFields: R,
+      innerScrollToField: y
     };
   },
   methods: {
@@ -313,5 +325,5 @@ const se = q({
   }
 });
 export {
-  se as default
+  de as default
 };

package/dist/es/components/form/FormItem.vue.js

@@ -1,35 +1,37 @@
 import b from "./FormItem.vue2.js";
-import { resolveComponent as s, renderSlot as o, openBlock as a, createBlock as t, mergeProps as n, withCtx as l, createVNode as i, createTextVNode as d, toDisplayString as h, createCommentVNode as r, createElementVNode as f, normalizeClass as p, createSlots as k, createElementBlock as $ } from "vue";
-import w from "../../_virtual/_plugin-vue_export-helper.js";
-function g(e, N, v, F, L, S) {
-  const u = s("FormItemLabel"), m = s("XCol"), y = s("FormItemMessage"), C = s("XRow");
+import { resolveComponent as l, renderSlot as o, openBlock as a, createBlock as t, mergeProps as n, withCtx as s, createVNode as p, createTextVNode as d, toDisplayString as h, createCommentVNode as r, createElementVNode as f, normalizeClass as i, createSlots as g, createElementBlock as k } from "vue";
+import $ from "../../_virtual/_plugin-vue_export-helper.js";
+const w = ["id"];
+function N(e, L, v, F, I, S) {
+  const u = l("FormItemLabel"), m = l("XCol"), y = l("FormItemMessage"), C = l("XRow");
   return e.noStyle ? o(e.$slots, "default", { key: 0 }) : (a(), t(C, n({
     key: 1,
     class: [
       e.cls,
       {
-        [e.className.modifier("has-help")]: !!(e.$slots.help ?? e.help)
+        [e.className.modifier("has-help")]: !!(e.$slots.help ?? e.help),
+        [e.className.modifier("has-message")]: !!(e.isError && e.finalMessage.length)
       }
     ],
     wrap: !(e.labelColFlex || e.autoLabelWidth),
     div: e.layout !== "horizontal" || e.hideLabel
   }, e.rowProps), {
-    default: l(() => [
+    default: s(() => [
       e.hideLabel ? r("", !0) : (a(), t(m, n({
         key: 0,
         class: e.labelColCls,
         style: e.mergedLabelStyle
       }, e.mergedLabelCol), {
-        default: l(() => [
-          i(u, {
+        default: s(() => [
+          p(u, {
             required: e.hideAsterisk ? !1 : e.isRequired,
             "show-colon": e.showColon,
             "asterisk-position": e.asteriskPosition,
             component: e.labelComponent,
-            attrs: e.labelAttrs,
+            attrs: e.mergedLabelAttrs,
             tooltip: e.tooltip
           }, {
-            default: l(() => [
+            default: s(() => [
               e.$slots.label || e.label ? o(e.$slots, "label", { key: 0 }, () => [
                 d(h(e.label), 1)
               ]) : r("", !0)
@@ -39,16 +41,16 @@ function g(e, N, v, F, L, S) {
         ]),
         _: 3
       }, 16, ["class", "style"])),
-      i(m, n({
+      p(m, n({
         class: e.wrapperColCls,
         style: e.mergedWrapperStyle
       }, e.mergedWrapperCol), {
-        default: l(() => [
+        default: s(() => [
           f("div", {
-            class: p(e.className.element("content-wrapper"))
+            class: i(e.className.element("content-wrapper"))
           }, [
             f("div", {
-              class: p([
+              class: i([
                 e.className.element("content"),
                 {
                   [e.className.element("content-flex")]: e.contentFlex
@@ -61,25 +63,27 @@ function g(e, N, v, F, L, S) {
           ], 2),
           e.isError || e.$slots.help || e.help ? (a(), t(y, {
             key: 0,
+            id: e.messageId,
             error: e.finalMessage,
             help: e.help
-          }, k({ _: 2 }, [
+          }, g({ _: 2 }, [
             e.$slots.help ? {
               name: "help",
-              fn: l(() => [
+              fn: s(() => [
                 o(e.$slots, "help")
               ]),
               key: "0"
             } : void 0
-          ]), 1032, ["error", "help"])) : r("", !0),
-          e.$slots.extra || e.extra ? (a(), $("div", {
+          ]), 1032, ["id", "error", "help"])) : r("", !0),
+          e.$slots.extra || e.extra ? (a(), k("div", {
             key: 1,
-            class: p(e.className.modifier("extra"))
+            id: e.extraId,
+            class: i(e.className.modifier("extra"))
           }, [
             o(e.$slots, "extra", {}, () => [
               d(h(e.extra), 1)
             ])
-          ], 2)) : r("", !0)
+          ], 10, w)) : r("", !0)
         ]),
         _: 3
       }, 16, ["class", "style"])
@@ -87,7 +91,7 @@ function g(e, N, v, F, L, S) {
     _: 3
   }, 16, ["class", "wrap", "div"]));
 }
-const X = /* @__PURE__ */ w(b, [["render", g]]);
+const V = /* @__PURE__ */ $(b, [["render", N]]);
 export {
-  X as default
+  V as default
 };