hongluan-ui/es/components/layout/src/layout.mjs

Hongluan Component Library for Vue 3

import { defineComponent, ref, computed, onMounted, onBeforeUnmount, provide, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
import '../../../utils/index.mjs';
import '../../../hooks/index.mjs';
import '../../../tokens/index.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { isClient } from '@vueuse/core';
import { layoutKey } from '../../../tokens/layout.mjs';

const _sfc_main = defineComponent({
  name: "Layout",
  props: {
    direction: {
      type: String,
      default: ""
    },
    boxed: Boolean,
    fixedHeader: Boolean,
    fullHeader: Boolean,
    fixedAside: Boolean,
    fixedSubHeader: Boolean,
    fullSubHeader: Boolean,
    fixedFooter: Boolean,
    fullFooter: Boolean
  },
  setup(props, { slots }) {
    const { namespace } = useNamespace();
    const layoutRef = ref();
    const autoMenuCollapse = ref(false);
    const menuCollapse = ref(false);
    const isVertical = computed(() => {
      if (props.direction === "vertical") {
        return true;
      } else if (props.direction === "horizontal") {
        return false;
      }
      if (slots && slots.default) {
        const vNodes = slots.default();
        return vNodes.some((vNode) => {
          const tag = vNode.type.name;
          return tag === "Header" || tag === "Footer";
        });
      } else {
        return false;
      }
    });
    let menuCollapseWidth;
    let isResponsd = false;
    const setMenuCollapse = (result) => {
      if (isResponsd) {
        menuCollapse.value = result;
      }
    };
    const observer = isClient ? new ResizeObserver((entries) => {
      entries.forEach((entry) => {
        const target = entry.contentRect;
        if (target.width <= menuCollapseWidth) {
          autoMenuCollapse.value = true;
        } else {
          autoMenuCollapse.value = false;
        }
      });
    }) : null;
    const respondMenu = () => {
      const menuStyle = getComputedStyle(layoutRef.value);
      const asideWidth = Number.parseFloat(menuStyle.getPropertyValue("--layout-aside-respond-width"));
      if (!Number.isNaN(asideWidth) && asideWidth > 0) {
        menuCollapseWidth = asideWidth;
        const docStyle = getComputedStyle(document.documentElement);
        const respond = docStyle.getPropertyValue("--feature-respond");
        if (respond.trim() === "true") {
          observer == null ? void 0 : observer.observe(document.body);
          isResponsd = true;
        }
      }
    };
    onMounted(() => {
      if (!isClient)
        return;
      respondMenu();
    });
    onBeforeUnmount(() => {
      observer && observer.disconnect();
    });
    provide(layoutKey, {
      autoMenuCollapse,
      setMenuCollapse
    });
    return {
      namespace,
      layoutRef,
      isVertical,
      autoMenuCollapse,
      menuCollapse,
      respondMenu
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("section", {
    ref: "layoutRef",
    class: normalizeClass({
      [_ctx.namespace + "-layout"]: true,
      boxed: _ctx.boxed,
      "fixed-header": _ctx.fixedHeader,
      "full-header": _ctx.fullHeader,
      "fixed-aside": _ctx.fixedAside,
      "fixed-sub-header": _ctx.fixedSubHeader,
      "full-sub-header": _ctx.fullSubHeader,
      "fixed-footer": _ctx.fixedFooter,
      "full-footer": _ctx.fullFooter,
      "collapse-aside": _ctx.menuCollapse || _ctx.autoMenuCollapse
    })
  }, [
    renderSlot(_ctx.$slots, "default")
  ], 2);
}
var Layout = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

export { Layout as default };
//# sourceMappingURL=layout.mjs.map