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

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

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