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

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

import { defineComponent as w, ref as d, toRef as Q, computed as C, shallowReadonly as U, reactive as V, watch as p, createVNode as n, renderSlot as m, mergeProps as $ } from "vue";
import "../icon/index.mjs";
import "../menu/index.mjs";
import "../native-scroll/index.mjs";
import { useProps as j, useNameHelper as q, useIcons as z, emitEvent as f } from "@vexip-ui/config";
import { layoutAsideProps as D } from "./props.mjs";
import { useLayoutState as F, useMediaQuery as G, useUpdateCounter as J } from "./helper.mjs";
import K from "../native-scroll/native-scroll.mjs";
import O from "../menu/menu.mjs";
import S from "../icon/icon.mjs";
const se = /* @__PURE__ */ w({
  name: "LayoutAside",
  props: D,
  emits: ["update:reduced", "update:expanded"],
  setup(N, {
    slots: s,
    emit: H,
    expose: P
  }) {
    const a = j("layoutAside", N, {
      tag: "aside",
      expanded: !1,
      reduced: !1,
      menus: {
        default: () => [],
        static: !0
      },
      menuProps: null,
      logo: "",
      signName: "",
      fixed: "lg",
      signType: "aside"
    }), t = q("layout"), g = z(), u = F(), l = d(a.reduced), i = d(a.expanded), v = d("100%"), L = G(Q(a, "fixed")), M = J(), b = d(), h = d(), x = d(), R = C(() => [t.be("aside"), {
      [t.bs("vars")]: !u.isLayout,
      [t.bem("aside", "inherit")]: u.isLayout || a.inherit,
      [t.bem("aside", "fixed")]: L.value,
      [t.bem("aside", "expanded")]: i.value,
      [t.bem("aside", "reduced")]: l.value,
      [t.bem("aside", "no-sign")]: a.signType !== "aside"
    }, u.classes.aside]), k = C(() => !!(a.logo || a.signName || s.top)), E = C(() => {
      var e, o;
      return !!((e = a.menus) != null && e.length || (o = a.menuProps) != null && o.router);
    }), r = U(V({
      expanded: i,
      reduced: l,
      toggleExpanded: c,
      toggleReduced: y
    }));
    P({
      menu: x,
      toggleExpanded: c,
      toggleReduced: y,
      expandMenuByLabel: I
    }), p(() => a.reduced, (e) => {
      l.value = e;
    }), p(() => a.expanded, (e) => {
      i.value = e;
    }), p(L, (e) => {
      u.useExpand = !e, e && c(!1);
    }, {
      immediate: !0
    }), p(M, () => T);
    function T() {
      let e = 0, o = 0;
      b.value && (e = b.value.offsetHeight), h.value && (o = h.value.offsetHeight), e || o ? v.value = `calc(100% - ${e + o}px)` : v.value = "100%";
    }
    function c(e = !i.value) {
      i.value = e, H("update:expanded", e), f(a.onExpandedChange, e);
    }
    function y(e = !l.value) {
      l.value = e, H("update:reduced", e), f(a.onReducedChange, e);
    }
    function A(e) {
      f(a.onSignClick, e);
    }
    function B(e, o) {
      f(a.onMenuSelect, e, o);
    }
    function I(e) {
      var o;
      (o = x.value) == null || o.expandItemByLabel(e);
    }
    return () => {
      const e = a.tag || "aside";
      return n(e, {
        class: R.value
      }, {
        default: () => [k.value && n("div", {
          ref: b,
          class: [t.be("aside-top"), u.classes.asideTop]
        }, [s.top ? m(s, "top", r) : n("div", {
          class: t.be("sign"),
          onClick: A
        }, [a.logo && n("div", {
          class: t.be("logo")
        }, [n("img", {
          src: a.logo,
          alt: "Logo"
        }, null)]), a.signName && n("span", {
          class: t.be("sign-name")
        }, [a.signName])])]), n(K, {
          class: [t.be("aside-main"), u.classes.main],
          "use-y-bar": !0,
          "observe-deep": !0,
          height: v.value
        }, {
          default: () => [s.default ? m(s, "default", r) : E.value ? n(O, $({
            ref: x
          }, a.menuProps || {}, {
            transfer: !0,
            options: a.menus,
            reduced: l.value,
            onSelect: B
          }), null) : null]
        }), n("div", {
          ref: h,
          class: [t.be("aside-bottom"), u.classes.asideBottom]
        }, [s.bottom ? m(s, "bottom", r) : n("div", {
          class: t.be("reduce-handler"),
          onClick: () => y()
        }, [l.value ? n(S, g.value.indent, null) : n(S, g.value.outdent, null)])]), n("div", {
          class: [t.be("expand-handler"), u.classes.expandHandler],
          onClick: () => c()
        }, [s.expand ? m(s, "expand", r) : n(S, g.value.angleRight, null)])]
      });
    };
  }
});
export {
  se as default
};
//# sourceMappingURL=layout-aside.mjs.map