x-next 1.12.0 → 1.14.0

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

@@ -1,25 +1,27 @@
-import { useLocale as E } from "../../locale/index.js";
-import { defineComponent as U, ref as m, computed as n, watch as K, onMounted as D, onUnmounted as I } from "vue";
-import { getClassNameMixin as O } from "../../_utils/config.js";
-import { Network as $ } from "./utils.js";
-const C = {
+import { useLocale as I } from "../../locale/index.js";
+import { defineComponent as D, shallowRef as R, ref as p, computed as n, watch as $, onMounted as j, onUnmounted as B } from "vue";
+import { getClassNameMixin as F } from "../../_utils/config.js";
+import { Network as Q } from "./utils.js";
+const M = {
   online: !0,
   quality: "unknown",
   source: "manual",
   reason: "initial",
   lastCheckedAt: 0
-}, B = {
+}, W = {
   unknown: "network.checking",
   good: "network.good",
   medium: "network.fair",
   poor: "network.poor",
   offline: "network.offline"
-}, F = ["unknown", "good", "medium", "poor", "offline"], Y = U({
+}, T = ["unknown", "good", "medium", "poor", "offline"], A = ["mini", "small", "medium", "large"], J = D({
   name: "Network",
+  slots: Object,
   props: {
     size: {
       type: String,
-      default: "medium"
+      default: "medium",
+      validator: (o) => A.includes(o)
     },
     /**
      * @zh 兼容旧版强/弱信号颜色配置
@@ -40,7 +42,7 @@ const C = {
      */
     status: {
       type: String,
-      validator: (t) => F.includes(t)
+      validator: (o) => T.includes(o)
     },
     /**
      * @zh 主动探测 URL，需要支持 CORS。
@@ -85,94 +87,100 @@ const C = {
     }
   },
   emits: {
-    change: (t) => !0,
-    online: (t) => !0,
-    offline: (t) => !0,
-    probe: (t) => !0
+    change: (o) => !0,
+    online: (o) => !0,
+    offline: (o) => !0,
+    probe: (o) => !0
   },
-  setup(t, { emit: l, expose: x }) {
-    const a = O("network"), r = m(), i = m(C), s = n(() => t.size === "small" || t.size === "mini" ? 3 : t.size === "medium" ? 4 : 5), f = (e) => ({
-      ...C,
+  setup(o, { emit: c, expose: L }) {
+    const l = F("network"), r = R(), i = p(M);
+    let d = !1;
+    const a = n(
+      () => o.status == null ? void 0 : T.includes(o.status) ? o.status : "unknown"
+    ), f = n(() => A.includes(o.size) ? o.size : "medium"), v = n(() => f.value === "small" || f.value === "mini" ? 3 : f.value === "medium" ? 4 : 5), m = (e) => ({
+      ...M,
       online: e !== "offline",
       quality: e,
       source: "manual",
       lastCheckedAt: Date.now()
-    }), u = n(() => t.status ? f(t.status) : i.value), { t: w } = E(), g = n(() => w(B[u.value.quality])), M = n(
-      () => t.ariaLabel || w("network.ariaLabel", { status: g.value })
-    ), A = (e, o = "--") => e === void 0 ? o : e <= 0 ? "0K/s" : e >= 1024 * 1024 ? `${(e / 1024 / 1024).toFixed(1)}M/s` : `${Math.max(1, Math.round(e / 1024))}K/s`, T = n(() => A(u.value.downloadSpeed)), d = n(() => t.showMetrics), L = (e) => {
-      const [o, h] = t.signalStrengthColor, v = {
+    }), u = n(() => a.value !== void 0 ? m(a.value) : i.value), { t: S } = I(), k = n(() => S(W[u.value.quality])), N = n(
+      () => o.ariaLabel || S("network.ariaLabel", { status: k.value })
+    ), _ = (e, t = "--") => e === void 0 ? t : e <= 0 ? "0K/s" : e >= 1024 * 1024 ? `${(e / 1024 / 1024).toFixed(1)}M/s` : `${Math.max(1, Math.round(e / 1024))}K/s`, q = n(() => _(u.value.downloadSpeed)), w = n(() => o.showMetrics), E = (e) => {
+      const [t, C] = o.signalStrengthColor, g = {
         unknown: "var(--x-network-color-unknown)",
-        good: o || "var(--x-network-color-good)",
-        medium: t.statusColors.medium || "var(--x-network-color-medium)",
-        poor: h || "var(--x-network-color-poor)",
+        good: t || "var(--x-network-color-good)",
+        medium: o.statusColors.medium || "var(--x-network-color-medium)",
+        poor: C || "var(--x-network-color-poor)",
         offline: "var(--x-network-color-offline)"
       };
-      return t.statusColors[e] || v[e];
-    }, N = (e) => e === "good" ? s.value : e === "medium" ? Math.max(2, Math.ceil(s.value * 0.6)) : e === "poor" ? Math.max(1, Math.ceil(s.value * 0.4)) : 0, q = n(() => {
-      const e = N(u.value.quality), o = L(u.value.quality);
-      return Array.from({ length: s.value }, (h, v) => {
-        const y = v < e;
+      return o.statusColors[e] || g[e];
+    }, z = (e) => e === "good" ? v.value : e === "medium" ? Math.max(2, Math.ceil(v.value * 0.6)) : e === "poor" ? Math.max(1, Math.ceil(v.value * 0.4)) : 0, K = n(() => {
+      const e = z(u.value.quality), t = E(u.value.quality);
+      return Array.from({ length: v.value }, (C, g) => {
+        const x = g < e;
         return {
-          active: y,
-          color: y ? o : "var(--x-network-color-inactive)"
+          active: x,
+          color: x || e === 0 ? t : "var(--x-network-color-inactive)"
         };
       });
-    }), z = (e, o) => e.online === o.online && e.quality === o.quality && e.source === o.source && e.reason === o.reason && e.latency === o.latency && e.downloadSpeed === o.downloadSpeed && e.effectiveType === o.effectiveType, c = m(void 0), _ = (e) => {
-      if (t.status) return;
-      const o = c.value ?? i.value;
-      i.value = e, (!c.value || !z(c.value, e)) && (c.value = e, l("change", e)), e.source === "probe" && l("probe", e), o.quality !== "offline" && e.quality === "offline" && l("offline", e), o.quality === "offline" && e.quality !== "offline" && l("online", e);
-    }, k = () => {
-      var e;
-      if ((e = r.value) == null || e.destroy(), r.value = void 0, t.status) {
-        i.value = f(t.status);
-        return;
+    }), O = (e, t) => e.online === t.online && e.quality === t.quality && e.source === t.source && e.reason === t.reason && e.latency === t.latency && e.downloadSpeed === t.downloadSpeed && e.speedSource === t.speedSource && e.downlink === t.downlink && e.rtt === t.rtt && e.effectiveType === t.effectiveType, s = p(void 0), U = (e) => {
+      if (!d || a.value !== void 0) return;
+      const t = s.value ?? i.value;
+      i.value = e, (!s.value || !O(s.value, e)) && (s.value = e, c("change", e)), e.source === "probe" && c("probe", e), t.quality !== "offline" && e.quality === "offline" && c("offline", e), t.quality === "offline" && e.quality !== "offline" && c("online", e);
+    }, h = (e = !1) => {
+      var t;
+      if ((t = r.value) == null || t.destroy(), r.value = void 0, e && (s.value = void 0), !!d) {
+        if (a.value !== void 0) {
+          i.value = m(a.value);
+          return;
+        }
+        r.value = new Q(U, {
+          ping: o.ping,
+          interval: o.interval,
+          timeout: o.timeout
+        }), s.value || (i.value = r.value.getSnapshot());
       }
-      r.value = new $(_, {
-        ping: t.ping,
-        interval: t.interval,
-        timeout: t.timeout
-      }), i.value = r.value.getSnapshot();
-    }, S = async () => {
+    }, y = async () => {
       var e;
-      if (t.status) {
-        const o = f(t.status);
-        return l("change", o), o;
+      if (a.value !== void 0) {
+        const t = m(a.value);
+        return d && c("change", t), t;
       }
       return await ((e = r.value) == null ? void 0 : e.refresh()) ?? i.value;
     };
-    K(
-      () => [t.status, t.ping, t.interval, t.timeout],
-      () => {
-        k();
+    $(
+      () => [o.status, o.ping, o.interval, o.timeout],
+      (e, t) => {
+        h(e[0] !== t[0]);
       }
-    ), D(() => {
-      k();
-    }), I(() => {
+    ), j(() => {
+      d = !0, h();
+    }), B(() => {
       var e;
-      (e = r.value) == null || e.destroy(), r.value = void 0;
-    }), x({ refresh: S });
+      d = !1, (e = r.value) == null || e.destroy(), r.value = void 0;
+    }), L({ refresh: y });
     const b = n(() => [
-      a.block,
-      t.size && a.modifier(t.size),
-      a.modifier(`status-${u.value.quality}`),
+      l.block,
+      l.modifier(f.value),
+      l.modifier(`status-${u.value.quality}`),
       {
-        [a.is("with-text")]: d.value,
-        [a.is("with-metrics")]: d.value
+        [l.is("with-text")]: w.value,
+        [l.is("with-metrics")]: w.value
       }
     ]);
     return {
-      className: a,
+      className: l,
       cls: b,
-      lineItems: q,
+      lineItems: K,
       mergedStatus: u,
-      statusText: g,
-      mergedAriaLabel: M,
-      formattedDownloadSpeed: T,
-      mergedShowMetrics: d,
-      refresh: S
+      statusText: k,
+      mergedAriaLabel: N,
+      formattedDownloadSpeed: q,
+      mergedShowMetrics: w,
+      refresh: y
     };
   }
 });
 export {
-  Y as default
+  J as default
 };

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

@@ -1,162 +1,203 @@
-var b = Object.defineProperty;
-var T = (t, e, n) => e in t ? b(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var o = (t, e, n) => T(t, typeof e != "symbol" ? e + "" : e, n);
-const y = {
+var M = Object.defineProperty;
+var N = (t, e, n) => e in t ? M(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var o = (t, e, n) => N(t, typeof e != "symbol" ? e + "" : e, n);
+const k = {
   online: !0,
   quality: "unknown",
   source: "manual",
   reason: "initial",
   lastCheckedAt: 0
-}, f = () => Date.now(), d = () => typeof performance < "u" && typeof performance.now == "function" ? performance.now() : Date.now(), m = () => {
+}, g = () => Date.now(), l = () => typeof performance < "u" && typeof performance.now == "function" ? performance.now() : Date.now(), L = () => {
   if (!(typeof navigator > "u"))
     return navigator.connection;
-}, l = () => typeof navigator < "u" && navigator.onLine === !1, k = (t) => {
+}, c = () => typeof navigator < "u" && navigator.onLine === !1, w = (t) => typeof t == "number" && Number.isFinite(t) && t >= 0 ? t : void 0, E = (t) => typeof t == "number" && Number.isFinite(t) && t > 0 ? Math.min(2147483647, Math.max(1, t)) : void 0, p = /* @__PURE__ */ new WeakMap(), R = (t, e) => {
+  if (t.addEventListener && t.removeEventListener)
+    return t.addEventListener("change", e), () => t.removeEventListener("change", e);
+  let n = p.get(t);
+  if (!n || t.onchange !== n.dispatch) {
+    const i = t.onchange, s = /* @__PURE__ */ new Set();
+    n = {
+      previous: i,
+      listeners: s,
+      dispatch(f) {
+        try {
+          i == null || i.call(t, f);
+        } finally {
+          for (const u of [...s]) u();
+        }
+      }
+    }, p.set(t, n), t.onchange = n.dispatch;
+  }
+  const r = n;
+  return r.listeners.add(e), () => {
+    r.listeners.delete(e), !r.listeners.size && (t.onchange === r.dispatch && (t.onchange = r.previous ?? null), p.get(t) === r && p.delete(t));
+  };
+}, P = (t) => {
   const { effectiveType: e } = t;
   if (e === "slow-2g" || e === "2g") return "poor";
   if (e === "3g") return "medium";
   if (e === "4g") return "good";
-  const { downlink: n, rtt: i } = t, r = typeof n == "number" && Number.isFinite(n), h = typeof i == "number" && Number.isFinite(i);
-  if (!(!r || !h))
-    return n > 2 && i <= 100 ? "good" : n > 1 && i <= 300 ? "medium" : "poor";
-}, q = (t) => t < 500 ? "good" : t < 1500 ? "medium" : "poor", w = (t, e) => ({
+  const n = w(t.downlink), r = w(t.rtt);
+  if (!(n === void 0 || r === void 0))
+    return n > 2 && r <= 100 ? "good" : n > 1 && r <= 300 ? "medium" : "poor";
+}, D = (t) => t < 500 ? "good" : t < 1500 ? "medium" : "poor", y = (t, e) => ({
   online: !1,
   quality: "offline",
   source: t,
   reason: e,
-  lastCheckedAt: f()
-}), c = (t) => {
+  lastCheckedAt: g()
+}), d = (t) => {
   if (typeof navigator > "u")
     return {
       online: !0,
       quality: "unknown",
       source: "navigator",
       reason: "unsupported",
-      lastCheckedAt: f()
+      lastCheckedAt: g()
     };
-  if (l())
-    return w("navigator", "browser-offline");
-  const e = m();
+  if (c())
+    return y("navigator", "browser-offline");
+  const e = L();
   return e ? {
     online: !0,
-    quality: k(e) ?? "unknown",
-    downlink: e.downlink,
-    rtt: e.rtt,
+    quality: P(e) ?? "unknown",
+    downlink: w(e.downlink),
+    rtt: w(e.rtt),
     effectiveType: e.effectiveType,
     source: "connection",
     reason: t,
-    lastCheckedAt: f()
+    lastCheckedAt: g()
   } : {
     online: !0,
     quality: "good",
     source: "navigator",
     reason: t,
-    lastCheckedAt: f()
+    lastCheckedAt: g()
   };
 };
-class L {
+class F {
   constructor(e, n = {}) {
     o(this, "callback");
     o(this, "options");
     o(this, "timer");
     o(this, "initialTimer");
-    o(this, "connection");
-    /** 不支持 addEventListener 时保存 connection.onchange 的原处理器，销毁时归还 */
-    o(this, "previousConnectionOnChange");
+    o(this, "unsubscribeConnection");
     o(this, "controller");
+    o(this, "cancelProbe");
     o(this, "destroyed", !1);
     o(this, "pendingRefresh");
     o(this, "sequence", 0);
     o(this, "handleWindowChange", () => {
-      this.refresh(l() ? "browser-offline" : void 0);
+      this.refreshAfterBrowserChange(c() ? "browser-offline" : void 0);
     });
     o(this, "handleConnectionChange", () => {
-      this.refresh("connection-change");
+      this.refreshAfterBrowserChange("connection-change");
     });
     this.callback = e, this.options = n, this.boot();
   }
   checkNetworkQuality() {
-    return c().quality;
+    return d().quality;
   }
   getSnapshot() {
-    return typeof window > "u" || typeof navigator > "u" ? y : c();
+    return typeof window > "u" || typeof navigator > "u" ? k : d();
   }
   async refresh(e) {
+    if (this.destroyed) return this.getSnapshot();
     if (this.pendingRefresh) return this.pendingRefresh;
-    const n = ++this.sequence;
-    return this.pendingRefresh = this.resolveStatus(e).then((i) => (!this.destroyed && n === this.sequence && this.emitCallback(i), i)).finally(() => {
-      this.pendingRefresh = void 0;
-    }), this.pendingRefresh;
+    const n = ++this.sequence, r = this.resolveStatus(e).then((i) => (!this.destroyed && n === this.sequence && this.emitCallback(i), i)).finally(() => {
+      this.pendingRefresh === r && (this.pendingRefresh = void 0);
+    });
+    return this.pendingRefresh = r, r;
+  }
+  refreshAfterBrowserChange(e) {
+    var n;
+    this.destroyed || (this.sequence += 1, (n = this.cancelProbe) == null || n.call(this), this.pendingRefresh = void 0, this.refresh(e));
   }
   async resolveStatus(e) {
-    return typeof window > "u" || typeof navigator > "u" ? y : l() ? w("navigator", "browser-offline") : this.options.ping ? this.pingNetworkQuality(this.options.ping, this.options.timeout) : c(e);
+    return typeof window > "u" || typeof navigator > "u" ? k : c() ? y("navigator", "browser-offline") : this.options.ping ? this.pingNetworkQuality(this.options.ping, this.options.timeout) : d(e);
   }
   async pingNetworkQuality(e, n = 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 h = r ? setTimeout(() => r.abort(), Math.max(n, 1)) : void 0;
+    const r = l(), i = typeof AbortController < "u" ? new AbortController() : void 0;
+    this.controller = i;
+    let s = !1, f = !1, u, b;
+    const A = new Promise((m, a) => {
+      u = () => {
+        f = !0, a(new Error("Network probe cancelled")), i == null || i.abort();
+      }, b = setTimeout(() => {
+        s = !0, a(new Error("Network probe timeout")), i == null || i.abort();
+      }, E(n) ?? 5e3);
+    });
+    this.cancelProbe = u;
     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), C = await s.arrayBuffer(), g = Math.round(d() - i), v = C.byteLength || Number(s.headers.get("content-length") || 0), u = v > 0 && g > 0 ? v / g * 1e3 : void 0;
-      return s.ok ? {
-        ...c(),
-        quality: q(a),
+      const { response: m, headerLatency: a, buffer: v, duration: T } = await Promise.race([
+        (async () => {
+          const C = await fetch(e, {
+            cache: "no-cache",
+            method: "GET",
+            mode: "cors",
+            signal: i == null ? void 0 : i.signal
+          }), q = Math.round(l() - r), S = await C.arrayBuffer();
+          return { response: C, headerLatency: q, buffer: S, duration: l() - r };
+        })(),
+        A
+      ]);
+      if (c()) return y("navigator", "browser-offline");
+      const h = v.byteLength > 0 && T > 0 ? v.byteLength / T * 1e3 : void 0;
+      return m.ok ? {
+        ...d(),
+        quality: D(a),
         latency: a,
-        downloadSpeed: u,
-        speedSource: u ? "probe" : void 0,
+        downloadSpeed: h,
+        speedSource: h ? "probe" : void 0,
         source: "probe"
       } : {
-        ...c("http-error"),
+        ...d("http-error"),
         quality: "poor",
         latency: a,
-        downloadSpeed: u,
-        speedSource: u ? "probe" : void 0,
+        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"),
+    } catch {
+      return c() ? y("navigator", "browser-offline") : f ? this.getSnapshot() : {
+        ...d(s ? "probe-timeout" : "probe-error"),
         quality: "poor",
-        latency: Math.round(d() - i),
+        latency: Math.round(l() - r),
         source: "probe",
-        reason: a ? "probe-timeout" : "probe-error"
+        reason: s ? "probe-timeout" : "probe-error"
       };
     } finally {
-      h && clearTimeout(h), this.controller === r && (this.controller = void 0);
+      clearTimeout(b), this.cancelProbe === u && (this.cancelProbe = void 0), this.controller === i && (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) : (this.previousConnectionOnChange = e.onchange, e.onchange = (n) => {
-      typeof this.previousConnectionOnChange == "function" && this.previousConnectionOnChange.call(e, n), this.handleConnectionChange();
-    })), this.initialTimer = setTimeout(() => {
+    const e = L();
+    e && (this.unsubscribeConnection = R(e, 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));
+    const e = E(this.options.interval);
+    e === void 0 || this.destroyed || (this.timer = setTimeout(async () => {
+      try {
+        await this.refresh();
+      } finally {
+        this.scheduleNextRefresh();
+      }
+    }, e));
   }
   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.previousConnectionOnChange ?? null, this.connection = void 0, this.previousConnectionOnChange = void 0);
+    var e, n, r;
+    this.destroyed || (this.destroyed = !0, this.sequence += 1, (e = this.cancelProbe) == null || e.call(this), this.cancelProbe = void 0, (n = this.controller) == null || n.abort(), this.controller = void 0, this.initialTimer !== void 0 && (clearTimeout(this.initialTimer), this.initialTimer = void 0), this.timer !== void 0 && (clearTimeout(this.timer), this.timer = void 0), typeof window < "u" && (window.removeEventListener("online", this.handleWindowChange), window.removeEventListener("offline", this.handleWindowChange)), (r = this.unsubscribeConnection) == null || r.call(this), this.unsubscribeConnection = void 0);
   }
 }
 export {
-  L as Network
+  F as Network
 };