x-next 1.4.0 → 1.6.0

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

@@ -1,20 +1,20 @@
-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 = {
+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 = {
   online: !0,
   quality: "unknown",
   source: "manual",
   reason: "initial",
   lastCheckedAt: 0
-}, O = {
+}, B = {
   unknown: "network.checking",
   good: "network.good",
   medium: "network.fair",
   poor: "network.poor",
   offline: "network.offline"
-}, $ = ["unknown", "good", "medium", "poor", "offline"], R = E({
+}, F = ["unknown", "good", "medium", "poor", "offline"], Y = U({
   name: "Network",
   props: {
     size: {
@@ -40,7 +40,7 @@ const y = {
      */
     status: {
       type: String,
-      validator: (e) => $.includes(e)
+      validator: (t) => F.includes(t)
     },
     /**
      * @zh 主动探测 URL，需要支持 CORS。
@@ -85,94 +85,94 @@ const y = {
     }
   },
   emits: {
-    change: (e) => !0,
-    online: (e) => !0,
-    offline: (e) => !0,
-    probe: (e) => !0
+    change: (t) => !0,
+    online: (t) => !0,
+    offline: (t) => !0,
+    probe: (t) => !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,
+  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,
+      online: e !== "offline",
+      quality: e,
       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 = {
+    }), 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 = {
         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)",
+        medium: t.statusColors.medium || "var(--x-network-color-medium)",
+        poor: h || "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 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 {
-          active: h,
-          color: h ? o : "var(--x-network-color-inactive)"
+          active: y,
+          color: y ? 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);
+    }), 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;
       }
-      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;
+      r.value = new $(_, {
+        ping: t.ping,
+        interval: t.interval,
+        timeout: t.timeout
+      }), i.value = r.value.getSnapshot();
+    }, S = async () => {
+      var e;
+      if (t.status) {
+        const o = f(t.status);
+        return l("change", o), o;
       }
-      return (t = r.value) == null ? void 0 : t.refresh();
+      return await ((e = r.value) == null ? void 0 : e.refresh()) ?? i.value;
     };
-    U(
-      () => [e.status, e.ping, e.interval, e.timeout],
+    K(
+      () => [t.status, t.ping, t.interval, t.timeout],
       () => {
-        w();
+        k();
       }
-    ), q(() => {
-      w();
-    }), K(() => {
-      var t;
-      (t = r.value) == null || t.destroy(), r.value = void 0;
-    }), C({ refresh: g });
-    const z = n(() => [
+    ), D(() => {
+      k();
+    }), I(() => {
+      var e;
+      (e = r.value) == null || e.destroy(), r.value = void 0;
+    }), x({ refresh: S });
+    const b = n(() => [
       a.block,
-      e.size && a.modifier(e.size),
-      a.modifier(`status-${i.value.quality}`),
+      t.size && a.modifier(t.size),
+      a.modifier(`status-${u.value.quality}`),
       {
-        [a.is("with-text")]: f.value,
-        [a.is("with-metrics")]: f.value
+        [a.is("with-text")]: d.value,
+        [a.is("with-metrics")]: d.value
       }
     ]);
     return {
       className: a,
-      cls: z,
-      lineItems: T,
-      mergedStatus: i,
-      statusText: v,
-      mergedAriaLabel: x,
-      formattedDownloadSpeed: M,
-      mergedShowMetrics: f,
-      refresh: g
+      cls: b,
+      lineItems: q,
+      mergedStatus: u,
+      statusText: g,
+      mergedAriaLabel: M,
+      formattedDownloadSpeed: T,
+      mergedShowMetrics: d,
+      refresh: S
     };
   }
 });
 export {
-  R as default
+  Y as default
 };

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

@@ -1,60 +1,67 @@
-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 = {
+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 = {
   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 = () => {
+}, f = () => 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) => ({
+}, l = () => typeof navigator < "u" && navigator.onLine === !1, k = (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) => ({
   online: !1,
   quality: "offline",
-  source: n,
+  source: t,
   reason: e,
-  lastCheckedAt: u()
-}), c = (n) => {
+  lastCheckedAt: f()
+}), c = (t) => {
   if (typeof navigator > "u")
     return {
       online: !0,
       quality: "unknown",
       source: "navigator",
       reason: "unsupported",
-      lastCheckedAt: u()
+      lastCheckedAt: f()
     };
   if (l())
     return w("navigator", "browser-offline");
   const e = m();
   return e ? {
     online: !0,
-    quality: k(e),
+    quality: k(e) ?? "unknown",
     downlink: e.downlink,
     rtt: e.rtt,
     effectiveType: e.effectiveType,
     source: "connection",
-    reason: n,
-    lastCheckedAt: u()
+    reason: t,
+    lastCheckedAt: f()
   } : {
     online: !0,
     quality: "good",
     source: "navigator",
-    reason: n,
-    lastCheckedAt: u()
+    reason: t,
+    lastCheckedAt: f()
   };
 };
 class L {
-  constructor(e, t = {}) {
+  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, "controller");
     o(this, "destroyed", !1);
     o(this, "pendingRefresh");
@@ -65,51 +72,51 @@ class L {
     o(this, "handleConnectionChange", () => {
       this.refresh("connection-change");
     });
-    this.callback = e, this.options = t, this.boot();
+    this.callback = e, this.options = n, this.boot();
   }
   checkNetworkQuality() {
     return c().quality;
   }
   getSnapshot() {
-    return typeof window > "u" || typeof navigator > "u" ? v : c();
+    return typeof window > "u" || typeof navigator > "u" ? y : 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(() => {
+    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;
   }
   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);
+    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);
   }
-  async pingNetworkQuality(e, t = 5e3) {
+  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 f = r ? setTimeout(() => r.abort(), Math.max(t, 1)) : void 0;
+    const h = r ? setTimeout(() => r.abort(), Math.max(n, 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;
+      }), 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: E(a),
+        quality: q(a),
         latency: a,
-        downloadSpeed: h,
-        speedSource: h ? "probe" : void 0,
+        downloadSpeed: u,
+        speedSource: u ? "probe" : void 0,
         source: "probe"
       } : {
         ...c("http-error"),
         quality: "poor",
         latency: a,
-        downloadSpeed: h,
-        speedSource: h ? "probe" : void 0,
+        downloadSpeed: u,
+        speedSource: u ? "probe" : void 0,
         source: "probe",
         reason: "http-error"
       };
@@ -123,7 +130,7 @@ class L {
         reason: a ? "probe-timeout" : "probe-error"
       };
     } finally {
-      f && clearTimeout(f), this.controller === r && (this.controller = void 0);
+      h && clearTimeout(h), this.controller === r && (this.controller = void 0);
     }
   }
   boot() {
@@ -131,7 +138,9 @@ class L {
       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(() => {
+    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(() => {
       this.refresh();
     }, 0), this.scheduleNextRefresh();
   }
@@ -145,7 +154,7 @@ class L {
   }
   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);
+    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);
   }
 }
 export {