x-next 1.10.0 → 1.11.0

package/dist/es/components/config-provider/ConfigProvider.js

@@ -1,9 +1,9 @@
-import { defineComponent as y, ref as p, provide as c, toRefs as s, computed as C, watchPostEffect as v, onBeforeUnmount as h, createVNode as m, Fragment as P, mergeProps as k } from "vue";
-import { getClassNameMixin as S } from "../../_utils/config.js";
-import { applyThemeColor as j, getThemeColorProperties as N } from "../../_utils/palette.js";
-import { localeInjectionKey as T } from "../../locale/index.js";
-import { configProviderInjectionKey as b } from "./context.js";
-const R = /* @__PURE__ */ y({
+import { defineComponent as z, inject as y, computed as i, provide as g, shallowRef as P, normalizeStyle as v, onBeforeUpdate as b, createVNode as C, Fragment as h, mergeProps as x } from "vue";
+import { getClassNameMixin as N } from "../../_utils/config.js";
+import { getThemeColorStyles as O } from "../../_utils/palette.js";
+import { localeInjectionKey as k } from "../../locale/index.js";
+import { configProviderInjectionKey as S } from "./context.js";
+const K = /* @__PURE__ */ z({
   name: "ConfigProvider",
   inheritAttrs: !1,
   props: {
@@ -48,50 +48,67 @@ const R = /* @__PURE__ */ y({
       default: "div"
     }
   },
-  setup(e, {
-    slots: t,
-    attrs: u
+  setup(l, {
+    slots: n,
+    attrs: d
   }) {
-    const g = S("config-provider"), a = p(null);
-    c(b, {
-      ...s(e),
-      slots: t
-    }), e.locale && c(T, C(() => e.locale));
-    let l = [];
-    const f = () => {
-      const r = a.value;
-      if (r)
-        for (const o of l)
-          r.style.removeProperty(o);
-      l = [];
-    };
-    return v(() => {
-      const r = e.themeColor, o = e.dark, n = a.value;
-      f(), !(!n || !r) && (j(r, {
-        target: n,
-        dark: o
-      }), l = N("primary"));
-    }), h(f), () => {
-      var i;
+    const j = N("config-provider"), t = y(S, void 0), f = y(k, void 0), s = i(() => l.locale ?? (f == null ? void 0 : f.value));
+    g(k, s);
+    const m = P(v(d.style));
+    b(() => {
+      m.value = v(d.style);
+    });
+    const c = i(() => {
+      var r;
+      const e = (r = t == null ? void 0 : t.popupTheme) == null ? void 0 : r.value;
+      if (l.tag === null) return e ?? {
+        dark: !1,
+        style: {}
+      };
+      const o = l.dark || (e == null ? void 0 : e.dark) || !1, a = l.themeColor ?? (e == null ? void 0 : e.seed), u = Object.fromEntries(Object.entries(m.value ?? {}).filter(([p]) => p.startsWith("--")));
+      return {
+        dark: o,
+        seed: a,
+        style: {
+          ...e == null ? void 0 : e.style,
+          // An unchanged nested boundary inherits explicit parent overrides too.
+          ...a && (l.themeColor !== void 0 || o !== (e == null ? void 0 : e.dark)) ? O(a, o) : {},
+          ...u
+        }
+      };
+    });
+    return g(S, {
+      size: i(() => {
+        var e;
+        return l.size ?? ((e = t == null ? void 0 : t.size) == null ? void 0 : e.value);
+      }),
+      locale: s,
+      slots: new Proxy(n, {
+        get(e, o, a) {
+          return Reflect.get(e, o, a) ?? (t == null ? void 0 : t.slots[o]);
+        }
+      }),
+      popupTheme: c
+    }), () => {
+      var u;
       const {
-        class: r,
-        style: o,
-        ...n
-      } = u;
-      return e.tag === null ? m(P, null, [(i = t.default) == null ? void 0 : i.call(t)]) : m(e.tag, k(n, {
-        ref: a,
-        class: [g.block, r],
+        class: e,
         style: o,
-        "data-theme": e.dark ? "dark" : void 0
+        ...a
+      } = d;
+      return l.tag === null ? C(h, null, [(u = n.default) == null ? void 0 : u.call(n)]) : C(l.tag, x(a, {
+        class: [j.block, e],
+        style: [o, c.value.style],
+        "data-theme": c.value.dark ? "dark" : void 0
       }), {
         default: () => {
-          var d;
-          return [(d = t.default) == null ? void 0 : d.call(t)];
+          var r;
+          return [(r = n.default) == null ? void 0 : r.call(n)];
         }
       });
     };
   }
 });
 export {
-  R as default
+  K as default
 };

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

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