vexip-ui/es/components/layout/helper.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import "../grid/index.mjs";
import { inject as x, reactive as h, ref as i, computed as b, watch as k, onMounted as y, onBeforeUnmount as S, onUpdated as P } from "vue";
import { isClient as g, parseColorToRgba as d, mixColor as m, adjustAlpha as C, toFixed as E, noop as L } from "@vexip-ui/utils";
import { LAYOUT_STATE as M } from "./symbol.mjs";
import { currentBreakPoint as v } from "../grid/helper.mjs";
const s = g ? document.documentElement : void 0, c = s && getComputedStyle(s);
function O(o) {
  if (!s || !c) return;
  const a = {
    light: [],
    opacity: [],
    dark: []
  }, l = d(
    c.getPropertyValue("--vxp-color-black") || { r: 0, g: 0, b: 0, a: 1 }
  ), u = d(
    c.getPropertyValue("--vxp-color-white") || { r: 255, g: 255, b: 255, a: 1 }
  ), r = s.style;
  for (let e = 1; e < 10; ++e) {
    const t = m(u, o, e * 0.1).toString(), n = C(o, E(1 - e * 0.1, 1)).toString();
    r.setProperty(`--vxp-color-primary-light-${e}`, t), r.setProperty(`--vxp-color-primary-opacity-${e}`, n), a.light.push(t), a.opacity.push(n);
  }
  for (let e = 1; e < 3; ++e) {
    const t = m(l, o, e * 0.1).toString();
    r.setProperty(`--vxp-color-primary-dark-${e}`, t), a.dark.push(t);
  }
  return r.setProperty("--vxp-color-primary-base", `${o}`), a;
}
function V() {
  return x(
    M,
    h({
      isLayout: !1,
      locked: !1,
      affixed: !1,
      scrollY: 0,
      affixMatched: !1,
      expandMatched: !1,
      useExpand: !1,
      expanded: !1,
      reduced: !1,
      navConfig: !1,
      classes: Object.freeze({}),
      changeInLock: L
    })
  );
}
const $ = Object.freeze(["xs", "sm", "md", "lg", "xl", "xxl"]);
function z(o) {
  const a = i(!1), l = i(0), u = g && getComputedStyle(document.documentElement), r = b(() => {
    if (l.value, typeof o.value != "function" && $.includes(o.value)) {
      const p = o.value === "xs" ? "sm" : o.value;
      if (p === v.value) return !0;
      const f = u && u.getPropertyValue(`--vxp-break-point-${p}`).trim();
      return f && `only screen and ${f}`;
    }
    return o.value;
  });
  let e = !1, t;
  const n = () => {
    if (typeof r.value == "boolean") {
      a.value = r.value;
      return;
    }
    if (!r.value || r.value === "min") {
      a.value = !1;
      return;
    }
    if (r.value === "max") {
      a.value = !0;
      return;
    }
    if (typeof r.value == "function") {
      a.value = r.value(v.value);
      return;
    }
    e && (t = matchMedia(r.value), t == null || t.addEventListener("change", n)), a.value = t.matches;
  };
  return k(r, () => {
    n();
  }), y(() => {
    ++l.value, e = !0, n();
  }), S(() => {
    e = !1, t == null || t.removeEventListener("change", n), t = void 0;
  }), a;
}
function B() {
  const o = i(0);
  return y(() => {
    o.value++;
  }), P(() => {
    o.value++;
  }), o;
}
export {
  O as computeSeriesColors,
  V as useLayoutState,
  z as useMediaQuery,
  B as useUpdateCounter
};
//# sourceMappingURL=helper.mjs.map