x-next 1.1.0 → 1.2.0

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
 };

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

@@ -1,21 +1,21 @@
-import { defineComponent as te, toRefs as A, inject as W, computed as o, ref as F, reactive as g, nextTick as C, provide as ae, toRef as oe, onMounted as se, onBeforeUnmount as ie, watch as re } from "vue";
-import { Schema as ne } from "../../node_modules/.pnpm/b-validate@1.5.3/node_modules/b-validate/es/index.js";
-import { formInjectionKey as ue, formItemInjectionKey as E } from "./context.js";
-import { Col as de, Row as ce } from "../grid/index.js";
-import fe from "./form-item-label.vue.js";
-import me from "./form-item-message.vue.js";
-import { getValueByPath as h, setValueByPath as x } from "../../_utils/get-value-by-path.js";
-import { getFormElementId as ve, getFinalValidateStatus as be, getFinalValidateMessage as ge } from "./utils.js";
-import { getClassNameMixin as ye } from "../../_utils/config.js";
-import { useLocale as pe } from "../../locale/index.js";
-import { deepClone as w } from "../../_utils/helpers.js";
-const Ve = te({
+import { defineComponent as be, toRefs as H, inject as U, computed as i, ref as R, reactive as F, useId as me, nextTick as q, provide as ye, toRef as Se, onMounted as he, onBeforeUnmount as Fe, watch as pe } from "vue";
+import { Schema as we } from "../../node_modules/.pnpm/b-validate@1.5.3/node_modules/b-validate/es/index.js";
+import { formInjectionKey as Be, formItemInjectionKey as G } from "./context.js";
+import { Col as Pe, Row as je } from "../grid/index.js";
+import Ce from "./form-item-label.vue.js";
+import Le from "./form-item-message.vue.js";
+import { getValueByPath as A, setValueByPath as J } from "../../_utils/get-value-by-path.js";
+import { getFormElementId as Re, getFinalValidateStatus as qe, getFinalValidateMessage as Ae } from "./utils.js";
+import { getClassNameMixin as Ve } from "../../_utils/config.js";
+import { useLocale as Me } from "../../locale/index.js";
+import { deepClone as V } from "../../_utils/helpers.js";
+const He = be({
   name: "FormItem",
   components: {
-    XRow: ce,
-    XCol: de,
-    FormItemLabel: fe,
-    FormItemMessage: me
+    XRow: je,
+    XCol: Pe,
+    FormItemLabel: Ce,
+    FormItemMessage: Le
   },
   props: {
     /**
@@ -228,182 +228,219 @@ const Ve = te({
    * @en Extra content
    * @slot extra
    */
-  setup(t) {
-    const i = ye("form--item"), { field: s } = A(t), l = W(ue, {}), { autoLabelWidth: T, layout: _ } = A(l), { locale: N } = pe(), $ = o(() => {
-      const e = { ...t.labelColProps ?? l.labelColProps };
-      return t.labelColFlex ? e.flex = t.labelColFlex : l.autoLabelWidth && (e.flex = `${l.maxLabelWidth}px`), e;
-    }), B = o(() => {
+  setup(a, { slots: B }) {
+    const r = Ve("form--item"), { field: s } = H(a), l = U(Be, {}), { autoLabelWidth: Q, layout: Y } = H(l), { locale: Z } = Me(), x = i(() => {
+      const e = { ...a.labelColProps ?? l.labelColProps };
+      return a.labelColFlex ? e.flex = a.labelColFlex : l.autoLabelWidth && (e.flex = `${l.maxLabelWidth}px`), e;
+    }), M = i(() => {
       const e = {
-        ...t.wrapperColProps ?? l.wrapperColProps
+        ...a.wrapperColProps ?? l.wrapperColProps
       };
-      return s.value && (e.id = ve(l.id, s.value)), (t.labelColFlex || l.autoLabelWidth) && (e.flex = "auto"), e;
-    }), z = o(() => t.labelColStyle ?? l.labelColStyle), D = o(() => t.wrapperColStyle ?? l.wrapperColStyle), P = F(w(h(l.model, t.field))), j = g({}), R = g({}), L = o(() => be(j)), K = o(() => ge(R)), c = F(!1), X = o(() => h(l.model, t.field)), q = o(() => !!(t.disabled ?? (l == null ? void 0 : l.disabled))), f = o(() => t.validateStatus ?? L.value), v = o(() => f.value === "error"), I = o(() => {
+      return s.value && (e.id = Re(l.id, s.value)), (a.labelColFlex || l.autoLabelWidth) && (e.flex = "auto"), e;
+    }), ee = i(() => a.labelColStyle ?? l.labelColStyle), le = i(() => a.wrapperColStyle ?? l.wrapperColStyle), O = R(V(A(l.model, a.field))), W = F({}), $ = F({}), P = i(() => qe(W)), j = i(() => Ae($)), g = R(!1);
+    let b = 0, E = !1;
+    const ae = i(() => A(l.model, a.field)), k = i(() => !!(a.disabled ?? (l == null ? void 0 : l.disabled))), m = i(() => a.validateStatus ?? P.value), c = i(() => m.value === "error"), T = i(() => {
       var n;
       const e = [].concat(
-        t.rules ?? ((n = l == null ? void 0 : l.rules) == null ? void 0 : n[t.field]) ?? []
-      ), a = e.some((S) => S.required);
-      return t.required && !a ? [{ required: !0 }].concat(e) : e;
-    }), H = o(() => I.value.some((e) => e.required)), y = t.noStyle ? W(E, void 0) : void 0, u = (e, { status: a, message: n }) => {
-      j[e] = a, R[e] = n, t.noStyle && (y == null || y.updateValidateState(e, { status: a, message: n }));
-    }, U = o(
-      () => t.feedback && f.value ? f.value : void 0
-    ), m = () => {
-      if (c.value)
+        a.rules ?? ((n = l == null ? void 0 : l.rules) == null ? void 0 : n[a.field]) ?? []
+      ), t = e.some((d) => d.required);
+      return a.required && !t ? [{ required: !0 }].concat(e) : e;
+    }), _ = i(() => T.value.some((e) => e.required)), o = a.noStyle ? U(G, void 0) : void 0, C = `x-form-item-${me()}`, L = `${C}-message`, z = `${C}-extra`, y = F(/* @__PURE__ */ new Map()), te = (e, t, n) => {
+      var w;
+      const d = y.get(e);
+      (!d || d.id !== t || d.labelable !== n) && y.set(e, { id: t, labelable: n }), a.noStyle && ((w = o == null ? void 0 : o.registerControl) == null || w.call(o, e, t, n));
+    }, oe = (e) => {
+      var t;
+      y.delete(e), a.noStyle && ((t = o == null ? void 0 : o.unregisterControl) == null || t.call(o, e));
+    }, I = i(
+      () => {
+        var e;
+        return a.noStyle ? o == null ? void 0 : o.labelId : !a.hideLabel && (a.label || B.label) ? String(((e = a.labelAttrs) == null ? void 0 : e.id) ?? `${C}-label`) : void 0;
+      }
+    ), ie = i(
+      () => a.noStyle ? o == null ? void 0 : o.describedBy : [
+        c.value && j.value.length || a.help || B.help ? L : "",
+        a.extra || B.extra ? z : ""
+      ].filter(Boolean).join(" ") || void 0
+    ), se = i(() => {
+      const e = y.size === 1 ? [...y.values()][0] : void 0;
+      return {
+        id: I.value,
+        for: e != null && e.labelable ? e.id : void 0,
+        ...a.labelAttrs
+      };
+    }), v = (e, { status: t, message: n }) => {
+      W[e] = t, $[e] = n, a.noStyle && (o == null || o.updateValidateState(e, { status: t, message: n }));
+    }, ne = i(
+      () => a.feedback && m.value ? m.value : void 0
+    ), S = () => {
+      if (g.value)
         return Promise.resolve();
-      const e = I.value;
+      const e = T.value;
       if (!s.value || e.length === 0)
-        return L.value && p(), Promise.resolve();
-      const a = s.value, n = X.value;
-      u(a, {
-        status: "",
+        return P.value && h(), Promise.resolve();
+      const t = s.value, n = ae.value, d = ++b;
+      v(t, {
+        status: "validating",
         message: ""
       });
-      const S = new ne(
+      const w = new we(
         {
-          [a]: e.map(({ ...d }) => (!d.type && !d.validator && (d.type = "string"), d))
+          [t]: e.map(({ ...f }) => (!f.type && !f.validator && (f.type = "string"), f))
         },
         {
           ignoreEmptyString: !0,
-          validateMessages: N.value.validateMessages
+          validateMessages: Z.value.validateMessages
         }
       );
-      return new Promise((d) => {
-        S.validate({ [a]: n }, (r) => {
-          const M = !!(r != null && r[a]);
-          u(a, {
-            status: M ? "error" : "",
-            message: (r == null ? void 0 : r[a].message) ?? ""
+      return new Promise((f) => {
+        w.validate({ [t]: n }, (u) => {
+          const X = !!(u != null && u[t]);
+          !E && d === b && t === s.value && v(t, {
+            status: X ? "error" : "",
+            message: (u == null ? void 0 : u[t].message) ?? ""
           });
-          const le = M ? {
-            label: t.label,
-            field: s.value,
-            value: r[a].value,
-            type: r[a].type,
-            isRequiredError: !!r[a].requiredError,
-            message: r[a].message
+          const ge = X ? {
+            label: a.label,
+            field: t,
+            value: u[t].value,
+            type: u[t].type,
+            isRequiredError: !!u[t].requiredError,
+            message: u[t].message
           } : void 0;
-          d(le);
+          f(ge);
         });
       });
-    }, G = o(
-      () => [].concat(t.validateTrigger)
-    ), J = o(
-      () => G.value.reduce((e, a) => {
-        switch (a) {
+    }, re = i(
+      () => [].concat(a.validateTrigger)
+    ), ue = i(
+      () => re.value.reduce((e, t) => {
+        switch (t) {
           case "change":
             return e.onChange = () => {
-              m();
+              S();
             }, e;
           case "input":
             return e.onInput = () => {
-              C(() => {
-                m();
+              q(() => {
+                S();
               });
             }, e;
           case "focus":
             return e.onFocus = () => {
-              m();
+              S();
             }, e;
           case "blur":
             return e.onBlur = () => {
-              m();
+              S();
             }, e;
           default:
             return e;
         }
       }, {})
     );
-    ae(
-      E,
-      g({
-        eventHandlers: J,
-        size: l && oe(l, "size"),
-        disabled: q,
-        error: v,
-        feedback: U,
-        updateValidateState: u
+    ye(
+      G,
+      F({
+        eventHandlers: ue,
+        size: l && Se(l, "size"),
+        disabled: k,
+        error: c,
+        feedback: ne,
+        labelId: I,
+        describedBy: ie,
+        errorId: i(
+          () => a.noStyle ? o == null ? void 0 : o.errorId : c.value && j.value.length ? L : void 0
+        ),
+        required: _,
+        registerControl: te,
+        unregisterControl: oe,
+        updateValidateState: v
       })
     );
-    const p = () => {
-      s.value && u(s.value, {
+    const h = () => {
+      b++, s.value && v(s.value, {
         status: "",
         message: ""
       });
-    }, Q = (e) => {
-      u(e, {
+    }, de = (e) => {
+      v(e, {
         status: "",
         message: ""
       });
-    }, O = g({
+    }, N = F({
       field: s,
-      disabled: q,
-      error: v,
-      validate: m,
-      clearValidate: p,
+      disabled: k,
+      error: c,
+      validate: S,
+      clearValidate: h,
       resetField: () => {
-        p(), c.value = !0, l != null && l.model && s.value && x(l.model, s.value, w(P.value)), C(() => {
-          c.value = !1;
+        h(), g.value = !0, l != null && l.model && s.value && J(l.model, s.value, V(O.value)), q(() => {
+          g.value = !1;
         });
       },
       setField: (e) => {
-        s.value && (c.value = !0, "value" in e && (l != null && l.model) && s.value && x(l.model, s.value, e.value), ("status" in e || "message" in e) && u(s.value, {
+        s.value && (b++, g.value = !0, "value" in e && (l != null && l.model) && s.value && J(l.model, s.value, e.value), "status" in e || "message" in e ? v(s.value, {
           status: e.status ?? "",
           message: e.message ?? ""
-        }), C(() => {
-          c.value = !1;
+        }) : P.value === "validating" && h(), q(() => {
+          g.value = !1;
         }));
       }
-    }), b = F(!1), V = () => {
+    }), p = R(!1), D = () => {
       var e;
-      s.value && !b.value && ((e = l.addField) == null || e.call(l, O), b.value = !0);
-    }, k = () => {
+      s.value && !p.value && ((e = l.addField) == null || e.call(l, N), p.value = !0);
+    }, K = () => {
       var e;
-      b.value && ((e = l.removeField) == null || e.call(l, O), b.value = !1);
+      p.value && ((e = l.removeField) == null || e.call(l, N), p.value = !1);
     };
-    se(() => {
-      V();
-    }), ie(() => {
-      k();
-    }), re(s, (e, a) => {
-      e !== a && (a && Q(a), P.value = w(h(l.model, e)), e ? V() : k());
+    he(() => {
+      D();
+    }), Fe(() => {
+      E = !0, h(), K();
+    }), pe(s, (e, t) => {
+      e !== t && (b++, t && de(t), K(), O.value = V(A(l.model, e)), e && D());
     });
-    const Y = o(() => [
-      i.block,
-      i.modifier(`layout-${l.layout}`),
+    const ce = i(() => [
+      r.block,
+      r.modifier(`layout-${l.layout}`),
       {
-        [i.modifier("error")]: v.value,
-        [i.modifier(`status-${f.value}`)]: !!f.value
+        [r.modifier("error")]: c.value,
+        [r.modifier(`status-${m.value}`)]: !!m.value
       },
-      t.rowClass
-    ]), Z = o(() => [
-      i.element("label-col"),
+      a.rowClass
+    ]), ve = i(() => [
+      r.element("label-col"),
       {
-        [i.element("label-col-left")]: l.labelAlign === "left",
-        [i.element("label-col-flex")]: l.autoLabelWidth || t.labelColFlex
+        [r.element("label-col-left")]: l.labelAlign === "left",
+        [r.element("label-col-flex")]: l.autoLabelWidth || a.labelColFlex
       }
-    ]), ee = o(() => [
-      i.element("wrapper-col"),
+    ]), fe = i(() => [
+      r.element("wrapper-col"),
       {
-        [i.element("wrapper-col-flex")]: !B.value
+        [r.element("wrapper-col-flex")]: !M.value
       }
     ]);
     return {
-      className: i,
-      cls: Y,
-      isRequired: H,
-      isError: v,
-      finalMessage: K,
-      mergedLabelCol: $,
-      mergedWrapperCol: B,
-      labelColCls: Z,
-      autoLabelWidth: T,
-      layout: _,
-      mergedLabelStyle: z,
-      wrapperColCls: ee,
-      mergedWrapperStyle: D
+      className: r,
+      cls: ce,
+      isRequired: _,
+      isError: c,
+      finalMessage: j,
+      mergedLabelCol: x,
+      mergedWrapperCol: M,
+      labelColCls: ve,
+      autoLabelWidth: Q,
+      layout: Y,
+      mergedLabelStyle: ee,
+      wrapperColCls: fe,
+      mergedWrapperStyle: le,
+      mergedLabelAttrs: se,
+      messageId: L,
+      extraId: z
     };
   }
 });
 export {
-  Ve as default
+  He as default
 };

package/dist/es/components/form/form-item-message.vue.js

@@ -1,37 +1,44 @@
-import p from "./form-item-message.vue2.js";
-import { openBlock as r, createElementBlock as i, Fragment as c, renderList as d, createBlock as a, Transition as l, withCtx as t, createElementVNode as s, normalizeClass as n, toDisplayString as m, renderSlot as f, createTextVNode as k, createCommentVNode as u } from "vue";
-import h from "../../_virtual/_plugin-vue_export-helper.js";
-function N(e, $, b, g, y, B) {
-  return e.error.length > 0 ? (r(!0), i(c, { key: 0 }, d(e.error, (o) => (r(), a(l, {
-    key: o,
-    name: "form-blink",
-    appear: ""
-  }, {
-    default: t(() => [
-      s("div", {
-        role: "alert",
-        class: n([e.className.block])
-      }, m(o), 3)
-    ]),
-    _: 2
-  }, 1024))), 128)) : e.help || e.$slots.help ? (r(), a(l, {
+import m from "./form-item-message.vue2.js";
+import { openBlock as r, createElementBlock as a, Fragment as p, renderList as c, createBlock as l, Transition as s, withCtx as t, createElementVNode as n, normalizeClass as i, toDisplayString as d, renderSlot as f, createTextVNode as h, createCommentVNode as k } from "vue";
+import u from "../../_virtual/_plugin-vue_export-helper.js";
+const N = ["id"], $ = ["id"];
+function b(e, g, y, v, B, C) {
+  return e.error.length > 0 ? (r(), a("div", {
+    key: 0,
+    id: e.id
+  }, [
+    (r(!0), a(p, null, c(e.error, (o) => (r(), l(s, {
+      key: o,
+      name: "form-blink",
+      appear: ""
+    }, {
+      default: t(() => [
+        n("div", {
+          role: "alert",
+          class: i([e.className.block])
+        }, d(o), 3)
+      ]),
+      _: 2
+    }, 1024))), 128))
+  ], 8, N)) : e.help || e.$slots.help ? (r(), l(s, {
     key: 1,
     name: "form-blink",
     appear: ""
   }, {
     default: t(() => [
-      s("div", {
-        class: n([e.className.block, e.className.modifier("help")])
+      n("div", {
+        id: e.id,
+        class: i([e.className.block, e.className.modifier("help")])
       }, [
         f(e.$slots, "help", {}, () => [
-          k(m(e.help), 1)
+          h(d(e.help), 1)
         ])
-      ], 2)
+      ], 10, $)
     ]),
     _: 3
-  })) : u("", !0);
+  })) : k("", !0);
 }
-const E = /* @__PURE__ */ h(p, [["render", N]]);
+const F = /* @__PURE__ */ u(m, [["render", b]]);
 export {
-  E as default
+  F as default
 };

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

@@ -1,8 +1,10 @@
 import { defineComponent as e } from "vue";
 import { getClassNameMixin as r } from "../../_utils/config.js";
-const a = e({
+const m = e({
   name: "FormItemMessage",
+  inheritAttrs: !1,
   props: {
+    id: String,
     error: {
       type: Array,
       default: () => []
@@ -16,5 +18,5 @@ const a = e({
   }
 });
 export {
-  a as default
+  m as default
 };