@done-coding/admin-core 0.17.1-alpha.0 → 0.18.1-alpha.0

package/es/hooks/use-breakpoint.mjs

@@ -1,36 +1,48 @@
-import { ref as r, readonly as s } from "vue";
-import { useActivated as a } from "./activated.mjs";
-const i = [], m = ["xl", "lg", "md", "sm"], c = () => {
-  if (i.length || typeof window > "u" || typeof window.matchMedia != "function")
+import { ref, readonly } from "vue";
+import { useActivated } from "./activated.mjs";
+const QUERIES = [];
+const DESCENDING = ["xl", "lg", "md", "sm"];
+const initQueries = () => {
+  if (QUERIES.length) return;
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function")
     return;
-  const e = {
+  const map = {
     xl: "(min-width: 1920px)",
     lg: "(min-width: 1200px)",
     md: "(min-width: 992px)",
     sm: "(min-width: 768px)",
     xs: "(max-width: 767px)"
   };
-  for (const t of m)
-    i.push({ key: t, mql: window.matchMedia(e[t]) });
-}, l = () => {
-  const e = r("lg"), t = () => {
-    for (const { key: o, mql: n } of i)
-      if (n.matches) {
-        e.value = o;
+  for (const key of DESCENDING) {
+    QUERIES.push({ key, mql: window.matchMedia(map[key]) });
+  }
+};
+const useBreakpoint = () => {
+  const activeBreakpoint = ref("lg");
+  const evaluate = () => {
+    for (const { key, mql } of QUERIES) {
+      if (mql.matches) {
+        activeBreakpoint.value = key;
         return;
       }
-    e.value = "xs";
+    }
+    activeBreakpoint.value = "xs";
   };
-  return a((o) => {
-    if (o.isActivated) {
-      c(), t();
-      for (const { mql: n } of i)
-        n.addEventListener("change", t);
-    } else
-      for (const { mql: n } of i)
-        n.removeEventListener("change", t);
-  }), { activeBreakpoint: s(e) };
+  useActivated((info) => {
+    if (info.isActivated) {
+      initQueries();
+      evaluate();
+      for (const { mql } of QUERIES) {
+        mql.addEventListener("change", evaluate);
+      }
+    } else {
+      for (const { mql } of QUERIES) {
+        mql.removeEventListener("change", evaluate);
+      }
+    }
+  });
+  return { activeBreakpoint: readonly(activeBreakpoint) };
 };
 export {
-  l as useBreakpoint
+  useBreakpoint
 };

package/es/hooks/use-channel-viewport-height.mjs

@@ -1,33 +1,43 @@
-import { inject as p, computed as h, watch as u } from "vue";
-import { SCOPE_VIEWPORT_MAX_HEIGHT as s } from "../inject/key.mjs";
-const v = 100, w = (t, o = {}) => {
-  const i = o.fallback ?? 0, n = t.parentChannel, r = p(s, void 0), a = () => {
-    if (!r) return;
-    if (!n) return r.viewportMaxHeight.value;
-    let e = r, l = 0;
-    for (; e; ) {
-      if (e.scope === n) return e.viewportMaxHeight.value;
-      if (e = e.parent, ++l > v) {
+import { inject, computed, watch } from "vue";
+import { SCOPE_VIEWPORT_MAX_HEIGHT } from "../inject/key.mjs";
+const SCOPE_CHAIN_MAX_DEPTH = 100;
+const useChannelViewportHeight = (maybeProps, options = {}) => {
+  const fallback = options.fallback ?? 0;
+  const parentChannel = maybeProps.parentChannel;
+  const nearestScope = inject(SCOPE_VIEWPORT_MAX_HEIGHT, void 0);
+  const resolveScopeHeight = () => {
+    if (!nearestScope) return void 0;
+    if (!parentChannel) return nearestScope.viewportMaxHeight.value;
+    let cur = nearestScope;
+    let depth = 0;
+    while (cur) {
+      if (cur.scope === parentChannel) return cur.viewportMaxHeight.value;
+      cur = cur.parent;
+      if (++depth > SCOPE_CHAIN_MAX_DEPTH) {
         console.error(
           "[useChannelViewportHeight] scope 链超深(疑似环链),已降级 fallback。"
         );
-        return;
+        return void 0;
       }
     }
-  }, c = h(() => {
-    if (t.viewportHeight !== void 0)
-      return t.viewportHeight;
-    const e = a();
-    return e !== void 0 ? e : i;
+    return void 0;
+  };
+  const viewportHeightFinal = computed(() => {
+    if (maybeProps.viewportHeight !== void 0)
+      return maybeProps.viewportHeight;
+    const scoped = resolveScopeHeight();
+    if (scoped !== void 0) return scoped;
+    return fallback;
   });
-  return u(
+  watch(
     // eslint-disable-next-line vue/no-setup-props-destructure
-    () => t.parentChannel,
+    () => maybeProps.parentChannel,
     () => console.error(
       "[useChannelViewportHeight] parentChannel 不支持响应式变更,当前值已忽略。"
     )
-  ), { viewportHeightFinal: c, nearestScope: r };
+  );
+  return { viewportHeightFinal, nearestScope };
 };
 export {
-  w as useChannelViewportHeight
+  useChannelViewportHeight
 };

package/es/hooks/use-custom-breakpoint.mjs

@@ -1,42 +1,59 @@
-import { shallowRef as c, ref as u, watch as f, onScopeDispose as a, readonly as m } from "vue";
-import { useActivated as d } from "./activated.mjs";
-const v = [
+import { shallowRef, ref, watch, onScopeDispose, readonly } from "vue";
+import { useActivated } from "./activated.mjs";
+const DESCENDING_THRESHOLDS = [
   { key: "xl", min: 1920 },
   { key: "lg", min: 1200 },
   { key: "md", min: 992 },
   { key: "sm", min: 768 }
-], p = (e) => {
-  for (const { key: t, min: i } of v)
-    if (e >= i) return t;
+];
+const resolveBreakpointByWidth = (width) => {
+  for (const { key, min } of DESCENDING_THRESHOLDS) {
+    if (width >= min) return key;
+  }
   return "xs";
-}, k = (e) => {
-  if (!e || typeof HTMLElement > "u") return null;
-  if (e instanceof HTMLElement) return e;
-  const t = e.$el;
-  return t instanceof HTMLElement ? t : null;
-}, E = () => {
-  const e = c(), t = u("lg"), { isActivated: i } = d();
-  let o;
-  const r = (n) => {
-    t.value = p(
-      n.getBoundingClientRect().width
+};
+const resolveRootEl = (target) => {
+  if (!target) return null;
+  if (typeof HTMLElement === "undefined") return null;
+  if (target instanceof HTMLElement) return target;
+  const el = target.$el;
+  if (el instanceof HTMLElement) return el;
+  return null;
+};
+const useCustomBreakpoint = () => {
+  const elRef = shallowRef();
+  const activeBreakpoint = ref("lg");
+  const { isActivated } = useActivated();
+  let ro;
+  const evaluate = (el) => {
+    activeBreakpoint.value = resolveBreakpointByWidth(
+      el.getBoundingClientRect().width
     );
-  }, s = () => {
-    o == null || o.disconnect(), o = void 0;
-  }, l = () => {
-    const n = k(e.value);
-    !n || typeof ResizeObserver > "u" || (r(n), o = new ResizeObserver(() => r(n)), o.observe(n));
   };
-  return f(
-    [i, e],
-    ([n]) => {
-      s(), n && l();
+  const detach = () => {
+    ro == null ? void 0 : ro.disconnect();
+    ro = void 0;
+  };
+  const attach = () => {
+    const el = resolveRootEl(elRef.value);
+    if (!el || typeof ResizeObserver === "undefined") return;
+    evaluate(el);
+    ro = new ResizeObserver(() => evaluate(el));
+    ro.observe(el);
+  };
+  watch(
+    [isActivated, elRef],
+    ([active]) => {
+      detach();
+      if (active) attach();
     },
-    { immediate: !0, flush: "post" }
-  ), a(s), { elRef: e, activeBreakpoint: m(t) };
+    { immediate: true, flush: "post" }
+  );
+  onScopeDispose(detach);
+  return { elRef, activeBreakpoint: readonly(activeBreakpoint) };
 };
 export {
-  p as resolveBreakpointByWidth,
-  k as resolveRootEl,
-  E as useCustomBreakpoint
+  resolveBreakpointByWidth,
+  resolveRootEl,
+  useCustomBreakpoint
 };

package/es/hooks/use-observe-size.mjs

@@ -1,26 +1,43 @@
-import { watch as m, onScopeDispose as b } from "vue";
-import h from "lodash/debounce";
-import { useActivated as O } from "./activated.mjs";
-const y = (u) => {
-  const { getTarget: n, onResize: v, enabled: t, debounce: f = 100 } = u, o = f > 0 ? h(v, f, { leading: !0, trailing: !0 }) : void 0, p = o ?? v;
-  let e, r, c = !1;
-  const i = () => {
-    e == null || e.disconnect(), e = void 0, r = void 0, o == null || o.cancel();
-  }, d = () => {
-    const s = n() ?? void 0;
-    if (!(c && (t == null ? void 0 : t()) !== !1 && typeof ResizeObserver < "u" && !!s)) {
-      i();
+import { watch, onScopeDispose } from "vue";
+import _debounce from "lodash/debounce";
+import { useActivated } from "./activated.mjs";
+const useObserveSize = (options) => {
+  const { getTarget, onResize, enabled, debounce = 100 } = options;
+  const debounced = debounce > 0 ? _debounce(onResize, debounce, { leading: true, trailing: true }) : void 0;
+  const dispatch = debounced ?? onResize;
+  let ro;
+  let observedEl;
+  let active = false;
+  const stop = () => {
+    ro == null ? void 0 : ro.disconnect();
+    ro = void 0;
+    observedEl = void 0;
+    debounced == null ? void 0 : debounced.cancel();
+  };
+  const start = () => {
+    const el = getTarget() ?? void 0;
+    const shouldObserve = active && (enabled == null ? void 0 : enabled()) !== false && typeof ResizeObserver !== "undefined" && !!el;
+    if (!shouldObserve) {
+      stop();
       return;
     }
-    e && r === s || (i(), e = new ResizeObserver((a) => {
-      const l = a[0];
-      l && p(l);
-    }), e.observe(s), r = s);
+    if (ro && observedEl === el) return;
+    stop();
+    ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) dispatch(entry);
+    });
+    ro.observe(el);
+    observedEl = el;
   };
-  m([n, () => t == null ? void 0 : t()], () => d(), { flush: "post" }), O((s) => {
-    c = s.isActivated, c ? d() : i();
-  }), b(i);
+  watch([getTarget, () => enabled == null ? void 0 : enabled()], () => start(), { flush: "post" });
+  useActivated((info) => {
+    active = info.isActivated;
+    if (active) start();
+    else stop();
+  });
+  onScopeDispose(stop);
 };
 export {
-  y as useObserveSize
+  useObserveSize
 };