hongluan-ui/lib/components/layout/src/layout.js

Hongluan Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.js');
require('../../../hooks/index.js');
require('../../../tokens/index.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
var core = require('@vueuse/core');
var layout = require('../../../tokens/layout.js');

const _sfc_main = vue.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 } = index.useNamespace();
    const layoutRef = vue.ref();
    const autoMenuCollapse = vue.ref(false);
    const menuCollapse = vue.ref(false);
    const isVertical = vue.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 = core.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;
        }
      }
    };
    vue.onMounted(() => {
      if (!core.isClient)
        return;
      respondMenu();
    });
    vue.onBeforeUnmount(() => {
      observer && observer.disconnect();
    });
    vue.provide(layout.layoutKey, {
      autoMenuCollapse,
      setMenuCollapse
    });
    return {
      namespace,
      layoutRef,
      isVertical,
      autoMenuCollapse,
      menuCollapse,
      respondMenu
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return vue.openBlock(), vue.createElementBlock("section", {
    ref: "layoutRef",
    class: vue.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
    })
  }, [
    vue.renderSlot(_ctx.$slots, "default")
  ], 2);
}
var Layout = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = Layout;
//# sourceMappingURL=layout.js.map