x-next 1.0.0 → 1.1.0

package/dist/es/components/network/Network.vue2.js

@@ -0,0 +1,178 @@
+import { useLocale as _ } from "../../locale/index.js";
+import { defineComponent as E, ref as S, computed as n, watch as U, onMounted as q, onUnmounted as K } from "vue";
+import { getClassNameMixin as D } from "../../_utils/config.js";
+import { Network as I } from "./utils.js";
+const y = {
+  online: !0,
+  quality: "unknown",
+  source: "manual",
+  reason: "initial",
+  lastCheckedAt: 0
+}, O = {
+  unknown: "network.checking",
+  good: "network.good",
+  medium: "network.fair",
+  poor: "network.poor",
+  offline: "network.offline"
+}, $ = ["unknown", "good", "medium", "poor", "offline"], R = E({
+  name: "Network",
+  props: {
+    size: {
+      type: String,
+      default: "medium"
+    },
+    /**
+     * @zh 兼容旧版强/弱信号颜色配置
+     */
+    signalStrengthColor: {
+      type: Array,
+      default: () => ["var(--x-network-color-good)", "var(--x-network-color-poor)"]
+    },
+    /**
+     * @zh 按状态配置颜色
+     */
+    statusColors: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * @zh 受控网络质量状态。传入后组件只负责展示，不会启动浏览器探测。
+     */
+    status: {
+      type: String,
+      validator: (e) => $.includes(e)
+    },
+    /**
+     * @zh 主动探测 URL，需要支持 CORS。
+     */
+    ping: {
+      type: String
+    },
+    /**
+     * @zh 主动探测间隔，单位毫秒。
+     */
+    interval: {
+      type: Number
+    },
+    /**
+     * @zh 主动探测超时时间，单位毫秒。
+     */
+    timeout: {
+      type: Number,
+      default: 5e3
+    },
+    /**
+     * @zh 是否显示主动探测指标，包含延迟和下载估算。需要配置 ping 才能获得完整指标。
+     */
+    showMetrics: Boolean,
+    /**
+     * @zh 是否把状态文案同步到 title。
+     */
+    showTooltip: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 自定义无障碍文案。
+     */
+    ariaLabel: String,
+    /**
+     * @zh aria-live 播报策略。
+     */
+    ariaLive: {
+      type: String,
+      default: "polite"
+    }
+  },
+  emits: {
+    change: (e) => !0,
+    online: (e) => !0,
+    offline: (e) => !0,
+    probe: (e) => !0
+  },
+  setup(e, { emit: u, expose: C }) {
+    const a = D("network"), r = S(), l = S(y), s = n(() => e.size === "small" || e.size === "mini" ? 3 : e.size === "medium" ? 4 : 5), c = (t) => ({
+      ...y,
+      online: t !== "offline",
+      quality: t,
+      source: "manual",
+      lastCheckedAt: Date.now()
+    }), i = n(() => e.status ? c(e.status) : l.value), { t: d } = _(), v = n(() => d(O[i.value.quality])), x = n(
+      () => e.ariaLabel || d("network.ariaLabel", { status: v.value })
+    ), b = (t, o = "--") => t === void 0 ? o : t <= 0 ? "0K/s" : t >= 1024 * 1024 ? `${(t / 1024 / 1024).toFixed(1)}M/s` : `${Math.max(1, Math.round(t / 1024))}K/s`, M = n(() => b(i.value.downloadSpeed)), f = n(() => e.showMetrics), A = (t) => {
+      const [o, k] = e.signalStrengthColor, m = {
+        unknown: "var(--x-network-color-unknown)",
+        good: o || "var(--x-network-color-good)",
+        medium: e.statusColors.medium || "var(--x-network-color-medium)",
+        poor: k || "var(--x-network-color-poor)",
+        offline: "var(--x-network-color-offline)"
+      };
+      return e.statusColors[t] || m[t];
+    }, L = (t) => t === "good" ? s.value : t === "medium" ? Math.max(2, Math.ceil(s.value * 0.6)) : t === "poor" ? Math.max(1, Math.ceil(s.value * 0.4)) : 0, T = n(() => {
+      const t = L(i.value.quality), o = A(i.value.quality);
+      return Array.from({ length: s.value }, (k, m) => {
+        const h = m < t;
+        return {
+          active: h,
+          color: h ? o : "var(--x-network-color-inactive)"
+        };
+      });
+    }), N = (t) => {
+      if (e.status) return;
+      const o = l.value.quality;
+      l.value = t, u("change", t), t.source === "probe" && u("probe", t), o !== "offline" && t.quality === "offline" && u("offline", t), o === "offline" && t.quality !== "offline" && u("online", t);
+    }, w = () => {
+      var t;
+      if ((t = r.value) == null || t.destroy(), r.value = void 0, e.status) {
+        l.value = c(e.status);
+        return;
+      }
+      r.value = new I(N, {
+        ping: e.ping,
+        interval: e.interval,
+        timeout: e.timeout
+      }), l.value = r.value.getSnapshot();
+    }, g = async () => {
+      var t;
+      if (e.status) {
+        const o = c(e.status);
+        return u("change", o), o;
+      }
+      return (t = r.value) == null ? void 0 : t.refresh();
+    };
+    U(
+      () => [e.status, e.ping, e.interval, e.timeout],
+      () => {
+        w();
+      }
+    ), q(() => {
+      w();
+    }), K(() => {
+      var t;
+      (t = r.value) == null || t.destroy(), r.value = void 0;
+    }), C({ refresh: g });
+    const z = n(() => [
+      a.block,
+      e.size && a.modifier(e.size),
+      a.modifier(`status-${i.value.quality}`),
+      {
+        [a.is("with-text")]: f.value,
+        [a.is("with-metrics")]: f.value
+      }
+    ]);
+    return {
+      className: a,
+      cls: z,
+      lineItems: T,
+      mergedStatus: i,
+      statusText: v,
+      mergedAriaLabel: x,
+      formattedDownloadSpeed: M,
+      mergedShowMetrics: f,
+      refresh: g
+    };
+  }
+});
+export {
+  R as default
+};

package/dist/es/components/network/index.js

@@ -0,0 +1,8 @@
+import o from "./Network.vue.js";
+import { generateComponent as t } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as e } from "../../_utils/config.js";
+const p = t(e("Network"), o);
+export {
+  p as Network,
+  p as default
+};

package/dist/es/components/network/utils.js

@@ -0,0 +1,153 @@
+var T = Object.defineProperty;
+var C = (n, e, t) => e in n ? T(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var o = (n, e, t) => C(n, typeof e != "symbol" ? e + "" : e, t);
+const v = {
+  online: !0,
+  quality: "unknown",
+  source: "manual",
+  reason: "initial",
+  lastCheckedAt: 0
+}, u = () => Date.now(), d = () => typeof performance < "u" && typeof performance.now == "function" ? performance.now() : Date.now(), m = () => {
+  if (!(typeof navigator > "u"))
+    return navigator.connection;
+}, l = () => typeof navigator < "u" && navigator.onLine === !1, k = (n) => {
+  const { downlink: e = 0, rtt: t = Number.POSITIVE_INFINITY, effectiveType: i } = n;
+  return i === "slow-2g" || i === "2g" ? "poor" : i === "3g" ? "medium" : e > 2 && t <= 100 ? "good" : e > 1 && t <= 300 ? "medium" : "poor";
+}, E = (n) => n < 500 ? "good" : n < 1500 ? "medium" : "poor", w = (n, e) => ({
+  online: !1,
+  quality: "offline",
+  source: n,
+  reason: e,
+  lastCheckedAt: u()
+}), c = (n) => {
+  if (typeof navigator > "u")
+    return {
+      online: !0,
+      quality: "unknown",
+      source: "navigator",
+      reason: "unsupported",
+      lastCheckedAt: u()
+    };
+  if (l())
+    return w("navigator", "browser-offline");
+  const e = m();
+  return e ? {
+    online: !0,
+    quality: k(e),
+    downlink: e.downlink,
+    rtt: e.rtt,
+    effectiveType: e.effectiveType,
+    source: "connection",
+    reason: n,
+    lastCheckedAt: u()
+  } : {
+    online: !0,
+    quality: "good",
+    source: "navigator",
+    reason: n,
+    lastCheckedAt: u()
+  };
+};
+class L {
+  constructor(e, t = {}) {
+    o(this, "callback");
+    o(this, "options");
+    o(this, "timer");
+    o(this, "initialTimer");
+    o(this, "connection");
+    o(this, "controller");
+    o(this, "destroyed", !1);
+    o(this, "pendingRefresh");
+    o(this, "sequence", 0);
+    o(this, "handleWindowChange", () => {
+      this.refresh(l() ? "browser-offline" : void 0);
+    });
+    o(this, "handleConnectionChange", () => {
+      this.refresh("connection-change");
+    });
+    this.callback = e, this.options = t, this.boot();
+  }
+  checkNetworkQuality() {
+    return c().quality;
+  }
+  getSnapshot() {
+    return typeof window > "u" || typeof navigator > "u" ? v : c();
+  }
+  async refresh(e) {
+    if (this.pendingRefresh) return this.pendingRefresh;
+    const t = ++this.sequence;
+    return this.pendingRefresh = this.resolveStatus(e).then((i) => (!this.destroyed && t === this.sequence && this.emitCallback(i), i)).finally(() => {
+      this.pendingRefresh = void 0;
+    }), this.pendingRefresh;
+  }
+  async resolveStatus(e) {
+    return typeof window > "u" || typeof navigator > "u" ? v : l() ? w("navigator", "browser-offline") : this.options.ping ? this.pingNetworkQuality(this.options.ping, this.options.timeout) : c(e);
+  }
+  async pingNetworkQuality(e, t = 5e3) {
+    var p;
+    const i = d();
+    (p = this.controller) == null || p.abort();
+    const r = typeof AbortController < "u" ? new AbortController() : void 0;
+    this.controller = r;
+    const f = r ? setTimeout(() => r.abort(), Math.max(t, 1)) : void 0;
+    try {
+      const s = await fetch(e, {
+        cache: "no-cache",
+        method: "GET",
+        mode: "cors",
+        signal: r == null ? void 0 : r.signal
+      }), a = Math.round(d() - i), b = await s.arrayBuffer(), g = Math.round(d() - i), y = b.byteLength || Number(s.headers.get("content-length") || 0), h = y > 0 && g > 0 ? y / g * 1e3 : void 0;
+      return s.ok ? {
+        ...c(),
+        quality: E(a),
+        latency: a,
+        downloadSpeed: h,
+        speedSource: h ? "probe" : void 0,
+        source: "probe"
+      } : {
+        ...c("http-error"),
+        quality: "poor",
+        latency: a,
+        downloadSpeed: h,
+        speedSource: h ? "probe" : void 0,
+        source: "probe",
+        reason: "http-error"
+      };
+    } catch (s) {
+      const a = typeof DOMException < "u" && s instanceof DOMException && s.name === "AbortError";
+      return {
+        ...c(a ? "probe-timeout" : "probe-error"),
+        quality: "poor",
+        latency: Math.round(d() - i),
+        source: "probe",
+        reason: a ? "probe-timeout" : "probe-error"
+      };
+    } finally {
+      f && clearTimeout(f), this.controller === r && (this.controller = void 0);
+    }
+  }
+  boot() {
+    if (typeof window > "u" || typeof navigator > "u")
+      return;
+    window.addEventListener("online", this.handleWindowChange), window.addEventListener("offline", this.handleWindowChange);
+    const e = m();
+    e && (this.connection = e, e.addEventListener ? e.addEventListener("change", this.handleConnectionChange) : e.onchange = this.handleConnectionChange), this.initialTimer = setTimeout(() => {
+      this.refresh();
+    }, 0), this.scheduleNextRefresh();
+  }
+  scheduleNextRefresh() {
+    !this.options.interval || this.options.interval <= 0 || this.destroyed || (this.timer = setTimeout(async () => {
+      await this.refresh(), this.scheduleNextRefresh();
+    }, this.options.interval));
+  }
+  emitCallback(e) {
+    this.callback(e);
+  }
+  destroy() {
+    var e;
+    this.destroyed = !0, this.sequence += 1, (e = this.controller) == null || e.abort(), this.controller = void 0, this.initialTimer && (clearTimeout(this.initialTimer), this.initialTimer = void 0), this.timer && (clearTimeout(this.timer), this.timer = void 0), typeof window < "u" && (window.removeEventListener("online", this.handleWindowChange), window.removeEventListener("offline", this.handleWindowChange)), this.connection && (this.connection.removeEventListener ? this.connection.removeEventListener("change", this.handleConnectionChange) : this.connection.onchange === this.handleConnectionChange && (this.connection.onchange = null), this.connection = void 0);
+  }
+}
+export {
+  L as Network
+};

package/dist/es/components/notification/Notification.js

@@ -0,0 +1,84 @@
+import { defineComponent as k, computed as d, onMounted as h, onUpdated as F, onUnmounted as N, createVNode as n, isVNode as b } from "vue";
+import { getComponentPrefix as x, getClassNameMixin as T } from "../../_utils/config.js";
+import M from "../../icons/default/close-circle-fill.js";
+import P from "../../icons/default/check-circle-fill.js";
+import U from "../../icons/default/close.js";
+import E from "../../icons/default/exclamation-circle-fill.js";
+import K from "../../icons/default/info-circle-fill.js";
+import V from "../../icons/default/minus-circle-fill.js";
+import { notificationProps as A } from "./props.js";
+import { isFunction as D } from "../../_utils/is.js";
+import { useLocale as L } from "../../locale/index.js";
+const W = /* @__PURE__ */ k({
+  name: x("Notification"),
+  inheritAttrs: !1,
+  props: A,
+  emits: ["close", "destroy", "click"],
+  setup(e, {
+    emit: r,
+    attrs: c
+  }) {
+    const o = T("notification"), C = o.block, {
+      t: s
+    } = L(), y = d(() => [C, o.modifier(e.type), e.showClose && o.modifier("closable"), e.popupClass, c.class]);
+    let l = 0;
+    const a = () => {
+      l && (window.clearTimeout(l), l = 0);
+    }, m = () => {
+      a(), e.duration > 0 && (l = window.setTimeout(() => {
+        r("close");
+      }, e.duration));
+    }, w = d(() => e.type === "info" ? K : e.type === "warning" ? E : e.type === "strong" ? V : e.type === "success" ? P : e.type === "error" ? M : ""), f = () => {
+      r("close");
+    }, g = (t) => {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), f());
+    }, i = (t) => b(t) ? t : D(t) ? t() : t, v = () => {
+      if (!e.showIcon) return null;
+      const t = i(e.icon);
+      if (t)
+        return n("div", {
+          class: [o.element("icon"), o.element("icon-custom")]
+        }, [t]);
+      const u = w.value;
+      return n("div", {
+        class: [o.element("icon")]
+      }, [u && n(u, null, null)]);
+    }, I = () => i(e.closeIcon) || n(U, null, null);
+    return h(() => {
+      m();
+    }), F(() => {
+      e.resetOnUpdate && m();
+    }), N(() => {
+      a();
+    }), () => n("div", {
+      class: y.value,
+      style: c.style,
+      role: "alert",
+      onClick: () => r("click")
+    }, [n("div", {
+      class: [o.element("main")]
+    }, [v(), n("div", {
+      class: [o.element("content-wrap")]
+    }, [e.title !== void 0 && n("div", {
+      class: [o.element("title")]
+    }, [i(e.title)]), n("div", {
+      class: [o.element("message")]
+    }, [i(e.message)]), e.footer && n("div", {
+      class: [o.element("footer")]
+    }, [i(e.footer)])])]), e.showClose && n("span", {
+      class: [o.element("close-icon")],
+      role: "button",
+      tabindex: 0,
+      "aria-label": s("common.closeTarget", {
+        target: s("common.notification")
+      }),
+      onClick: (t) => {
+        t.stopPropagation(), f();
+      },
+      onKeydown: g
+    }, [I()])]);
+  }
+});
+export {
+  W as default
+};

package/dist/es/components/notification/index.js

@@ -0,0 +1,8 @@
+import o from "./Notification.js";
+import { generateComponent as t } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as i } from "../../_utils/config.js";
+const f = t(i("Notification"), o);
+export {
+  f as Notification,
+  f as default
+};

package/dist/es/components/notification/notification-list.js

@@ -0,0 +1,72 @@
+import { defineComponent as i, h as a, TransitionGroup as l, createVNode as r } from "vue";
+import c from "./Notification.js";
+import f from "../../_hooks/use-popup-manager.js";
+import { getClassNameMixin as d } from "../../_utils/config.js";
+const g = /* @__PURE__ */ i({
+  name: "XNotificationList",
+  props: {
+    notifications: {
+      type: Array,
+      default: () => []
+    },
+    position: {
+      type: String,
+      default: "top-right"
+    },
+    offset: {
+      type: Number,
+      default: 20
+    },
+    renderToBody: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: {
+    close: (t) => !0,
+    afterClose: () => !0
+  },
+  setup(t, {
+    emit: s
+  }) {
+    const e = d("notification-list"), {
+      zIndex: n
+    } = f("message", {
+      runOnMounted: !0
+    });
+    return () => a(l, {
+      tag: "div",
+      name: `x-notification-slide-${t.position.includes("right") ? "right" : "left"}`,
+      class: [e.block, e.modifier(t.position), {
+        [e.modifier("local")]: !t.renderToBody
+      }],
+      style: {
+        zIndex: n.value,
+        [t.position.startsWith("bottom") ? "bottom" : "top"]: `${t.offset}px`
+      },
+      onAfterLeave: () => s("afterClose")
+    }, {
+      default: () => t.notifications.map((o) => r(c, {
+        key: o.id,
+        title: o.title,
+        message: o.message,
+        type: o.type,
+        duration: o.duration,
+        showClose: o.showClose,
+        showIcon: o.showIcon,
+        icon: o.icon,
+        footer: o.footer,
+        closeIcon: o.closeIcon,
+        popupClass: o.popupClass,
+        class: o.class,
+        style: o.style,
+        resetOnUpdate: o.resetOnUpdate,
+        onClick: o.onClick,
+        onClose: () => s("close", o.id)
+      }, null))
+    });
+  }
+});
+export {
+  g as default
+};

package/dist/es/components/notification/props.js

@@ -0,0 +1,65 @@
+import { definePropType as e } from "../../_utils/vue-eco.js";
+const o = ["success", "strong", "warning", "error", "info"], n = {
+  position: {
+    type: String,
+    default: "top-right"
+  },
+  offset: {
+    type: Number,
+    default: 0
+  },
+  title: {
+    type: e([String, Number, Object, Function]),
+    default: void 0
+  },
+  type: {
+    type: String,
+    default: "info"
+  },
+  message: {
+    type: e([String, Number, Object, Function]),
+    default: void 0
+  },
+  duration: {
+    type: Number,
+    default: 3e3
+  },
+  showClose: {
+    type: Boolean,
+    default: !0
+  },
+  showIcon: {
+    type: Boolean,
+    default: !0
+  },
+  icon: {
+    type: e([Object, Function])
+  },
+  footer: {
+    type: e([Object, Function])
+  },
+  closeIcon: {
+    type: e([Object, Function])
+  },
+  popupClass: {
+    type: String,
+    default: void 0
+  },
+  resetOnUpdate: {
+    type: Boolean,
+    default: !1
+  },
+  onClose: {
+    type: Function,
+    default: () => {
+    }
+  },
+  renderToBody: {
+    type: Boolean,
+    default: !1
+  }
+};
+export {
+  n as notificationProps,
+  o as types
+};