x-next 1.1.0 → 1.2.0

package/dist/es/components/dialog/Dialog.js

@@ -1,196 +1,218 @@
-import { defineComponent as ne, computed as a, ref as b, reactive as le, onBeforeUnmount as oe, watch as L, createVNode as l, Teleport as ae, withDirectives as se, mergeProps as ie, Transition as P, vShow as ce, nextTick as re } from "vue";
-import { useLocale as de } from "../../locale/index.js";
-import { getComponentPrefix as ue, getClassNameMixin as V } from "../../_utils/config.js";
-import { addUnit as R } from "../../_utils/helpers.js";
-import { isFunction as fe, isPromise as me } from "../../_utils/is.js";
-import ve from "../../_hooks/use-popup-manager.js";
-import { useOverflow as be } from "../../_hooks/use-overflow.js";
-import { KEYBOARD_KEY as j } from "../../_utils/keyboard.js";
-import { getElement as ge, on as ye, off as he } from "../../_utils/dom.js";
-import { dialogProps as xe } from "./props.js";
-const Ce = ["width", "minWidth", "height", "minHeight"];
-let we = 0;
-const ke = ["a[href]", "button:not([disabled])", "textarea:not([disabled])", "input:not([disabled])", "select:not([disabled])", '[tabindex]:not([tabindex="-1"])'].join(","), I = (t) => Array.from(t.querySelectorAll(ke)).filter((c) => !c.hasAttribute("disabled") && c.getAttribute("aria-hidden") !== "true"), Ve = /* @__PURE__ */ ne({
-  name: ue("Dialog"),
+import { defineComponent as ie, computed as c, ref as v, reactive as se, onBeforeUnmount as ce, watch as V, createVNode as a, Teleport as re, withDirectives as de, mergeProps as ue, Transition as R, vShow as fe, nextTick as me } from "vue";
+import { useLocale as be } from "../../locale/index.js";
+import { getComponentPrefix as ve, getClassNameMixin as j } from "../../_utils/config.js";
+import { addUnit as F } from "../../_utils/helpers.js";
+import { isFunction as ye, isPromise as ge } from "../../_utils/is.js";
+import he from "../../_hooks/use-popup-manager.js";
+import { useOverflow as Ce } from "../../_hooks/use-overflow.js";
+import { KEYBOARD_KEY as I } from "../../_utils/keyboard.js";
+import { getElement as xe, on as we, off as Ee } from "../../_utils/dom.js";
+import { dialogProps as ke } from "./props.js";
+const De = ["width", "minWidth", "height", "minHeight"];
+let Se = 0;
+const Be = ["a[href]", "button:not([disabled])", "textarea:not([disabled])", 'input:not([disabled]):not([type="hidden"])', "select:not([disabled])", '[tabindex]:not([tabindex="-1"])'].join(","), M = (t) => Array.from(t.querySelectorAll(Be)).filter((i) => {
+  if (i.matches(':disabled, input[type="hidden"]') || i.closest('[hidden], [inert], [aria-hidden="true"]'))
+    return !1;
+  for (let s = i; s; s = s.parentElement) {
+    const o = window.getComputedStyle(s);
+    if (o.display === "none" || o.visibility === "hidden" || o.visibility === "collapse")
+      return !1;
+  }
+  return !0;
+}), Fe = /* @__PURE__ */ ie({
+  name: ve("Dialog"),
   inheritAttrs: !1,
-  props: xe,
+  props: ke,
   slots: Object,
   emits: ["closed", "close", "open", "opened", "update:modelValue"],
   setup(t, {
-    attrs: c,
-    emit: u,
-    slots: i
+    attrs: i,
+    emit: s,
+    slots: o
   }) {
-    const s = V("dialog"), {
-      t: M
-    } = de(), N = s.block, f = V("message-box"), g = `x-dialog-title-${++we}`, _ = a(() => [N, t.messageBox && "is-message-box", t.messageBox && f.block, t.popupClass && t.popupClass, c.class]), z = a(() => {
+    const r = j("dialog"), {
+      t: N
+    } = be(), z = r.block, f = j("message-box"), y = `x-dialog-title-${++Se}`, G = c(() => [z, t.messageBox && "is-message-box", t.messageBox && f.block, t.popupClass && t.popupClass, i.class]), H = c(() => {
       const {
         class: e,
         style: n,
-        id: o,
-        ...d
-      } = c;
-      return d;
-    }), y = a(() => {
+        id: l,
+        "aria-label": u,
+        "aria-labelledby": B,
+        "aria-describedby": T,
+        ...ae
+      } = i;
+      return ae;
+    }), g = c(() => {
       if (!(typeof document > "u"))
-        return ge(t.renderTo) || document.body;
-    }), E = b(), h = b(), F = a(() => t.disabled || !y.value), G = a(() => [{
-      zIndex: q.value
-    }, c.style]), H = a(() => {
+        return xe(t.renderTo) || document.body;
+    }), h = v(), C = v(), p = c(() => t.disabled || !g.value), U = c(() => [{
+      zIndex: $.value
+    }, i.style]), Y = c(() => {
       const e = {};
-      return t.fullscreen || (!t.center && t.top && (e.top = R(t.top)), Ce.forEach((n) => {
-        t[n] && (e[n] = R(t[n]));
+      return t.fullscreen || (!t.center && t.top && (e.top = F(t.top)), De.forEach((n) => {
+        t[n] && (e[n] = F(t[n]));
       })), e;
-    }), x = b(!1), r = a(() => t.modelValue), D = a(() => r.value || x.value), U = a(() => !t.destroyOnClosed || D.value), Y = a(() => D.value), {
-      zIndex: q,
-      isLastDialog: W
-    } = ve("dialog", {
-      visible: r
+    }), x = v(!1), d = c(() => t.modelValue), K = c(() => d.value || x.value), q = c(() => !t.destroyOnClosed || K.value), W = c(() => K.value), {
+      zIndex: $,
+      isLastDialog: w,
+      close: J
+    } = he("dialog", {
+      visible: d
     }), {
-      setOverflowHidden: $,
-      resetOverflow: B
-    } = be(y, E), S = (e, n) => {
-      u("update:modelValue", !1), u("close", e, n);
-    }, C = b(null), J = () => {
-      typeof document > "u" || re(() => {
-        const e = h.value;
-        if (!e || !r.value) return;
-        (I(e)[0] || e).focus({
+      setOverflowHidden: Q,
+      resetOverflow: A
+    } = Ce(g, h), O = (e, n) => {
+      s("update:modelValue", !1), s("close", e, n);
+    }, E = v(null);
+    let k = !1;
+    const L = () => {
+      var l, u;
+      const e = E.value;
+      if (E.value = null, !(e != null && e.isConnected) || typeof document > "u" || d.value && !w()) return;
+      const n = document.activeElement;
+      n != null && n.isConnected && n !== document.body && n !== document.documentElement && n !== e && !((l = h.value) != null && l.contains(n)) || (u = e.focus) == null || u.call(e, {
+        preventScroll: !0
+      });
+    }, X = () => {
+      typeof document > "u" || me(() => {
+        const e = C.value;
+        if (!e || !d.value || k || !w()) return;
+        (M(e)[0] || e).focus({
           preventScroll: !0
         });
       });
-    }, Q = () => {
-      var e, n;
-      x.value = !1, B(), u("closed"), (n = (e = C.value) == null ? void 0 : e.focus) == null || n.call(e, {
-        preventScroll: !0
-      }), C.value = null;
-    }, X = () => {
-      u("opened"), J();
-    }, m = le({
+    }, Z = () => {
+      k || (x.value = !1, A(), L(), s("closed"));
+    }, ee = () => {
+      s("opened"), X();
+    }, m = se({
       ok: !1,
       cancel: !1
-    }), v = (e, n) => {
-      let o = !0;
-      if (m[e] = !0, fe(t.onBeforeCancel))
+    }), b = (e, n) => {
+      let l = !0;
+      if (m[e] = !0, ye(t.onBeforeCancel))
         try {
-          o = t.onBeforeCancel(e) ?? !1;
+          l = t.onBeforeCancel(e) ?? !1;
         } catch {
-          o = !1;
+          l = !1;
         }
-      if (me(o)) {
-        o.then((d) => {
-          d && S(e, n);
+      if (ge(l)) {
+        l.then((u) => {
+          u && O(e, n);
         }).catch(() => !1).finally(() => {
           m[e] = !1;
         });
         return;
       }
-      m[e] = !1, o && S(e, n);
-    }, Z = () => {
-      t.maskToClose && t.mask && v("cancel");
-    }, p = (e) => {
-      v("cancel", e);
-    }, ee = (e) => {
-      v("ok", e);
+      m[e] = !1, l && O(e, n);
+    }, te = () => {
+      t.maskToClose && t.mask && b("cancel");
+    }, ne = (e) => {
+      b("cancel", e);
+    }, le = (e) => {
+      b("ok", e);
     };
-    let w = !1;
-    const T = (e) => {
-      t.escToClose && e.key === j.ESC && W() && v("cancel", e);
-    }, A = () => {
-      typeof document > "u" || t.escToClose && !w && (w = !0, ye(document.documentElement, "keydown", T));
-    }, k = () => {
-      typeof document > "u" || (w = !1, he(document.documentElement, "keydown", T));
-    }, te = (e) => {
-      if (e.key !== j.TAB) return;
-      const n = h.value;
+    let D = !1;
+    const P = (e) => {
+      t.escToClose && e.key === I.ESC && w() && b("cancel", e);
+    }, _ = () => {
+      typeof document > "u" || t.escToClose && !D && (D = !0, we(document.documentElement, "keydown", P));
+    }, S = () => {
+      typeof document > "u" || (D = !1, Ee(document.documentElement, "keydown", P));
+    }, oe = (e) => {
+      if (e.key !== I.TAB) return;
+      const n = C.value;
       if (!n) return;
-      const o = I(n);
-      if (!o.length) {
+      const l = M(n);
+      if (!l.length) {
         e.preventDefault(), n.focus({
           preventScroll: !0
         });
         return;
       }
-      const d = o[0], K = o[o.length - 1], O = document.activeElement;
-      e.shiftKey && O === d ? (e.preventDefault(), K.focus({
+      const u = l[0], B = l[l.length - 1], T = document.activeElement;
+      e.shiftKey && T === u ? (e.preventDefault(), B.focus({
         preventScroll: !0
-      })) : !e.shiftKey && O === K && (e.preventDefault(), d.focus({
+      })) : !e.shiftKey && T === B && (e.preventDefault(), u.focus({
         preventScroll: !0
       }));
     };
-    return oe(() => {
-      B(), k();
-    }), L(() => r.value, (e) => {
-      e ? (C.value = typeof document > "u" ? null : document.activeElement, u("open"), $(), x.value = !0, A()) : k();
+    return ce(() => {
+      k = !0, L(), J(), A(), S();
+    }), V(() => d.value, (e) => {
+      e ? (E.value = typeof document > "u" ? null : document.activeElement, s("open"), Q(), x.value = !0, _()) : S();
     }, {
       immediate: !0
-    }), L(() => t.escToClose, (e) => {
-      r.value && (e ? A() : k());
-    }), () => l(ae, {
-      to: y.value,
-      disabled: F.value
+    }), V(() => t.escToClose, (e) => {
+      d.value && (e ? _() : S());
+    }), () => a(re, {
+      to: g.value,
+      disabled: p.value
     }, {
-      default: () => [U.value && se(l("div", ie({
-        ref: E,
-        class: _.value,
-        style: G.value,
-        id: c.id
-      }, z.value), [l(P, {
+      default: () => [q.value && de(a("div", ue({
+        ref: h,
+        class: G.value,
+        style: U.value,
+        id: i.id
+      }, H.value), [a(R, {
         name: "x-fade-in-standard",
         appear: !0
       }, {
-        default: () => [t.mask && r.value && l("div", {
-          class: s.element("mask")
+        default: () => [t.mask && d.value && a("div", {
+          class: r.element("mask")
         }, null)]
-      }), l("div", {
-        class: [s.element("wrapper"), {
+      }), a("div", {
+        class: [r.element("wrapper"), {
           "is-center": t.center
         }],
-        onClick: (e) => e.target === e.currentTarget && Z()
-      }, [l(P, {
+        onClick: (e) => e.target === e.currentTarget && te()
+      }, [a(R, {
         name: "x-zoom-in",
         appear: !0,
-        onAfterEnter: X,
-        onAfterLeave: Q
+        onAfterEnter: ee,
+        onAfterLeave: Z
       }, {
-        default: () => [r.value && l("div", {
-          ref: h,
-          class: [s.element("container"), {
+        default: () => [d.value && a("div", {
+          ref: C,
+          class: [r.element("container"), {
             "is-fullscreen": t.fullscreen
           }],
-          style: H.value,
+          style: Y.value,
           role: "dialog",
           "aria-modal": t.mask ? "true" : void 0,
-          "aria-labelledby": t.title || i.title ? g : void 0,
+          "aria-label": t.title || o.title ? void 0 : i["aria-label"],
+          "aria-labelledby": t.title || o.title ? y : i["aria-labelledby"],
+          "aria-describedby": i["aria-describedby"],
           tabindex: -1,
-          onKeydown: te
-        }, [l("div", {
-          class: [t.messageBox ? f.element("header") : s.element("header"), t.showHeaderBottomLine && "is-bottom-line"],
-          id: i.title ? g : void 0
-        }, [i.title ? i.title() : l("div", {
-          id: t.title ? g : void 0,
-          class: [s.element("header-title")]
-        }, [t.title])]), l("div", {
-          class: [t.messageBox ? f.element("body") : s.element("body")]
-        }, [i.default && i.default()]), !t.hideFooter && i.footer && l("div", {
-          class: [t.messageBox ? f.element("footer") : s.element("footer")]
-        }, [i.footer({
-          cancel: p,
-          ok: ee,
+          onKeydown: oe
+        }, [a("div", {
+          class: [t.messageBox ? f.element("header") : r.element("header"), t.showHeaderBottomLine && "is-bottom-line"],
+          id: o.title ? y : void 0
+        }, [o.title ? o.title() : a("div", {
+          id: t.title ? y : void 0,
+          class: [r.element("header-title")]
+        }, [t.title])]), a("div", {
+          class: [t.messageBox ? f.element("body") : r.element("body")]
+        }, [o.default && o.default()]), !t.hideFooter && o.footer && a("div", {
+          class: [t.messageBox ? f.element("footer") : r.element("footer")]
+        }, [o.footer({
+          cancel: ne,
+          ok: le,
           loadingObj: m,
           "loading-obj": m
-        })]), t.showClose && l("button", {
+        })]), t.showClose && a("button", {
           type: "button",
-          class: [s.element("close-icon"), t.messageBox && f.element("close-icon")],
-          "aria-label": M("common.closeTarget", {
+          class: [r.element("close-icon"), t.messageBox && f.element("close-icon")],
+          "aria-label": N("common.closeTarget", {
             target: "对话框"
           }),
-          onClick: (e) => v("cancel", e)
+          onClick: (e) => b("cancel", e)
         }, null)])]
-      })])]), [[ce, Y.value]])]
+      })])]), [[fe, W.value]])]
     });
   }
 });
 export {
-  Ve as default
+  Fe as default
 };

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