@extclp/vexip-ui/es/components/layout/layout.mjs

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

import { isVNode as le, defineComponent as se, ref as i, toRef as A, reactive as Z, computed as m, shallowReadonly as ce, provide as fe, watch as f, renderSlot as g, createVNode as o, mergeProps as pe } from "vue";
import "../masker/index.mjs";
import "../native-scroll/index.mjs";
import "../resize-observer/index.mjs";
import { useProps as me, useNameHelper as ve, useZIndex as ge, emitEvent as s } from "@vexip-ui/config";
import { useMounted as he, createSlotRender as d } from "@vexip-ui/hooks";
import { isClient as xe, getYBorder as ye, runQueueFrame as be } from "@vexip-ui/utils";
import ke from "./layout-main.mjs";
import Ce from "./layout-header.mjs";
import Me from "./layout-footer.mjs";
import Se from "./layout-aside.mjs";
import { layoutProps as we } from "./props.mjs";
import { useMediaQuery as N } from "./helper.mjs";
import { LAYOUT_STATE as Ae } from "./symbol.mjs";
import Le from "../masker/masker.vue2.mjs";
import Ee from "../resize-observer/resize-observer.mjs";
import Te from "../native-scroll/native-scroll.mjs";
function q(h) {
  return typeof h == "function" || Object.prototype.toString.call(h) === "[object Object]" && !le(h);
}
const Qe = /* @__PURE__ */ se({
  name: "Layout",
  props: we,
  emits: ["update:expanded", "update:reduced", "update:sign-type", "update:color", "update:dark-mode"],
  setup(h, {
    slots: a,
    emit: x,
    expose: G
  }) {
    const n = me("layout", h, {
      locale: null,
      noAside: !1,
      footer: !1,
      tag: "section",
      menus: {
        default: () => [],
        static: !0
      },
      menuProps: null,
      logo: "",
      signName: "",
      config: () => ["nav", "theme", "color"],
      user: null,
      actions: () => [],
      expanded: !1,
      reduced: !1,
      avatarCircle: !1,
      signType: "aside",
      headerFixed: "lg",
      asideFixed: "lg",
      copyright: "",
      links: () => [],
      colors: () => ["#339af0", "#f03e3e", "#be4bdb", "#7950f2", "#1b9e44", "#f76707"],
      color: "",
      miniHeaderSign: "lg",
      verticalLinks: "md",
      darkMode: null,
      fixedMain: !1,
      fitWindow: !1,
      innerClasses: () => ({}),
      noHeader: !1,
      noMasker: !1
    }), r = ve("layout"), y = i(!1), u = i(n.expanded), l = i(n.reduced), c = i(n.signType), U = i(!1), C = i(n.color), {
      isMounted: H
    } = he("frame"), J = i(), b = i(), P = i(), z = i(), F = N(A(n, "headerFixed")), L = N(A(n, "asideFixed")), K = N(A(n, "miniHeaderSign")), p = Z({
      isLayout: !0,
      locked: m(() => y.value),
      affixed: !1,
      scrollY: 0,
      affixMatched: F,
      expandMatched: L,
      useExpand: !1,
      expanded: u,
      reduced: l,
      navConfig: m(() => !n.noAside),
      classes: A(n, "innerClasses"),
      changeInLock: oe
    }), I = m(() => [r.b(), r.bs("vars"), {
      [r.bm("inherit")]: n.inherit,
      [r.bm("no-aside")]: n.noAside,
      [r.bm("no-header")]: n.noHeader,
      [r.bm("header-main")]: c.value === "header",
      [r.bm("locked")]: !H.value || y.value,
      [r.bm("fit-window")]: n.fitWindow
    }]), W = m(() => xe && H.value ? document.documentElement : null), E = m(() => n.noAside || c.value === "header" || p.useExpand), _ = m(() => {
      var e, t;
      return ((e = z.value) == null ? void 0 : e.menu) || ((t = P.value) == null ? void 0 : t.menu);
    }), T = i(n.darkMode), B = i("100%"), O = m(() => ({
      [r.cv("view-height")]: n.fitWindow ? "100vh" : B.value
    })), Y = ge(), R = i(u.value ? Y() : 0), v = ce(Z({
      expanded: u,
      reduced: l,
      toggleExpanded: k,
      toggleReduced: M
    }));
    fe(Ae, p), G({
      scroll: b,
      menu: _,
      toggleExpanded: k,
      toggleReduced: M,
      expandMenuByLabel: re
    }), f(F, (e) => {
      p.affixed = !e && p.scrollY >= 50;
    }), f(() => n.expanded, (e) => {
      u.value = e;
    }), f(u, (e) => {
      p.useExpand && e && (R.value = Y());
    }), f(() => n.reduced, (e) => {
      l.value = e;
    }), f(c, (e) => {
      x("update:sign-type", e), s(n.onNavChange, e);
    }), f(() => n.color, (e) => {
      var t;
      C.value = e || ((t = n.colors) == null ? void 0 : t[0]) || X();
    }), f(C, (e) => {
      x("update:color", e), s(n.onColorChange, e);
    }), f(() => n.darkMode, (e) => {
      T.value = e;
    });
    function X() {
      return W.value ? getComputedStyle(W.value).getPropertyValue("--vxp-color-primary-base") : "#339af0";
    }
    function k(e = !l.value) {
      u.value = e, x("update:expanded", e), s(n.onExpandedChange, e);
    }
    function M(e = !l.value) {
      l.value = e, x("update:reduced", e), s(n.onReducedChange, e);
    }
    function ee(e) {
      s(n.onSignClick, e);
    }
    function $(e, t) {
      s(n.onMenuSelect, e, t);
    }
    function ne(e) {
      x("update:dark-mode", e), s(n.onToggleTheme, e);
    }
    function ae(e, t) {
      s(n.onUserAction, e, t);
    }
    function re(e) {
      var t;
      (t = _.value) == null || t.expandItemByLabel(e);
    }
    function j() {
      var e;
      (e = b.value) != null && e.$el && (B.value = `${b.value.$el.offsetHeight - ye(b.value.$el)}px`), s(n.onContentResize);
    }
    let S;
    function oe(e) {
      S == null || S(), S = be([() => y.value = !0, e, () => y.value = !1]);
    }
    function w(e) {
      e.stopPropagation(), e.preventDefault();
    }
    function V() {
      if (!n.logo && !n.signName && !a.sign)
        return null;
      if (a.sign)
        return g(a, "sign", v);
      const e = n.signName && !(E.value && !K.value);
      return o("div", {
        class: [r.be("sign"), !e && r.bem("sign", "logo-only")],
        onClick: ee
      }, [[n.logo && o("div", {
        class: r.be("logo")
      }, [o("img", {
        src: n.logo,
        alt: "Logo"
      }, null)]), e && o("span", {
        class: r.be("sign-name")
      }, [n.signName])]]);
    }
    function D() {
      return n.noHeader ? o("header", {
        role: "none",
        "aria-hidden": !0,
        style: "display: none"
      }, null) : a.header ? g(a, "header", v) : o(Ce, pe({
        ref: P,
        "sign-type": c.value,
        "onUpdate:sign-type": (e) => c.value = e,
        "user-dropped": U.value,
        "onUpdate:user-dropped": (e) => U.value = e,
        color: C.value,
        "onUpdate:color": (e) => C.value = e,
        "dark-mode": T.value,
        "onUpdate:dark-mode": (e) => T.value = e,
        inherit: !0,
        locale: n.locale,
        user: n.user,
        actions: n.actions,
        config: n.config,
        "avatar-circle": n.avatarCircle,
        menus: n.noAside ? n.menus : [],
        "menu-props": n.noAside ? n.menuProps : null,
        colors: n.colors,
        onUserAction: ae,
        onExpandedChange: k,
        onReducedChange: M,
        onMenuSelect: $,
        onToggleTheme: ne
      }, {
        onWheel: w,
        onMousemove: w
      }), {
        left: d(a, ["header-left", "headerLeft"], () => E.value ? V() : null),
        default: d(a, ["header-main", "headerMain"]),
        right: d(a, ["header-right", "headerRight"]),
        user: d(a, ["header-user", "headerUser"]),
        avatar: d(a, ["header-avatar", "headerAvatar"])
      });
    }
    function te() {
      return n.noAside ? o("div", {
        role: "none",
        "aria-hidden": !0,
        style: "display: none"
      }, null) : o("div", {
        class: [r.be("sidebar"), !L.value && r.bem("sidebar", "away"), n.innerClasses.sidebar],
        style: {
          zIndex: p.useExpand ? R.value + 1 : void 0
        },
        onWheel: w,
        onMousemove: w
      }, [a.aside ? g(a, "aside", v) : o(Se, {
        ref: z,
        expanded: u.value,
        "onUpdate:expanded": (e) => u.value = e,
        reduced: l.value,
        "onUpdate:reduced": (e) => l.value = e,
        inherit: !0,
        "sign-type": c.value,
        menus: n.menus,
        "menu-props": n.menuProps,
        fixed: n.asideFixed,
        onExpandedChange: k,
        onReducedChange: M,
        onMenuSelect: $
      }, {
        top: d(a, ["aside-top", "asideTop"], () => E.value ? null : V()),
        default: d(a, ["aside-main", "asideMain"]),
        bottom: d(a, ["aside-bottom", "asideBottom"]),
        expand: d(a, ["aside-expand", "asideExpand"])
      })]);
    }
    function ie() {
      return a.default ? g(a, "default", v) : o(ke, {
        fixed: n.fixedMain
      }, {
        default: d(a, ["main"])
      });
    }
    function de() {
      return a.footer ? g(a, "footer", v) : o(Me, {
        inherit: !0,
        copyright: n.copyright,
        links: n.links,
        "vertical-links": n.verticalLinks
      }, {
        links: d(a, ["footer-links", "footerLinks"]),
        copyright: d(a, ["footer-copyright", "footerCopyright"])
      });
    }
    function ue() {
      return n.noMasker || !p.useExpand ? null : a.masker ? g(a, "masker", v) : o(Le, {
        active: u.value,
        "onUpdate:active": (e) => u.value = e,
        class: r.be("masker"),
        inner: !0,
        closable: !0,
        "auto-remove": !0,
        transfer: !1,
        style: {
          zIndex: R.value
        },
        onToggle: k
      }, null);
    }
    function Q() {
      const e = n.tag || "section";
      return o(e, {
        class: [r.be("wrapper"), n.fixedMain && r.bem("wrapper", "fixed"), n.innerClasses.wrapper]
      }, {
        default: () => [c.value === "header" && D(), te(), o("section", {
          ref: J,
          class: [r.be("section"), {
            [r.bem("section", "away")]: L.value,
            [r.bem("section", "reduced")]: l.value,
            [r.bem("section", "locked")]: y.value,
            [r.bem("section", "fixed")]: n.fixedMain
          }, n.innerClasses.section]
        }, [c.value === "aside" && D(), ie(), n.footer && de()]), ue()]
      });
    }
    return () => {
      let e;
      if (n.fitWindow) {
        let t;
        return o("section", {
          class: I.value,
          style: O.value
        }, [o(Ee, {
          throttle: !0,
          onResize: j
        }, q(t = Q()) ? t : {
          default: () => [t]
        })]);
      }
      return o(Te, {
        ref: b,
        class: I.value,
        inherit: n.inherit,
        "use-y-bar": !0,
        "observe-deep": !0,
        "bar-class": [r.be("scrollbar"), n.innerClasses.scrollbar],
        style: O.value,
        onResize: j
      }, q(e = Q()) ? e : {
        default: () => [e]
      });
    };
  }
});
export {
  Qe as default
};
//# sourceMappingURL=layout.mjs.map