layui/package/component/es/subMenu/index.js

import { w as withInstall } from "../badge/index2.js";
import { defineComponent, inject, computed, openBlock, createBlock, unref, withCtx, createElementVNode, normalizeClass, renderSlot, createElementBlock, createCommentVNode, createVNode, useSlots, ref, watchEffect, normalizeStyle, createSlots } from "vue";
import { _ as _sfc_main$3 } from "../transition/index2.js";
import { _ as _sfc_main$2 } from "../dropdown/index2.js";
import { _ as _sfc_main$2E } from "../checkbox/index2.js";
import { u as useLevel, p as provideLevel } from "../useLevel/index.js";
import { i as indentHandle } from "../utils/index.js";
import "../_chunks/@vueuse/index.js";
const _hoisted_1$1 = { class: "layui-nav-item" };
const _hoisted_2$1 = {
  href: "javascript:void(0)",
  style: { "justify-content": "space-between" }
};
const _hoisted_3$1 = {
  key: 0,
  class: "layui-sub-menu-icon"
};
const _hoisted_4$1 = { key: 1 };
const _hoisted_5$1 = {
  key: 0,
  class: "layui-nav-more"
};
const __default__$1 = {
  name: "SubMenuPopup"
};
const _sfc_main$1 = defineComponent({
  ...__default__$1,
  props: {
    id: null,
    title: null
  },
  setup(__props) {
    const { level } = useLevel();
    const isTree = inject("isTree");
    const theme = inject("menuTheme");
    const computedTheme = computed(() => {
      return theme.value === "light" ? "-light" : "";
    });
    const computedExpandIcon = computed(() => {
      if (isTree.value)
        return "layui-icon-right";
      return level.value === 2 ? "layui-icon-down" : "layui-icon-right";
    });
    const computedPlacement = computed(() => {
      return !isTree.value && level.value === 2 ? "bottom" : "right-start";
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(_sfc_main$2, {
        trigger: "hover",
        class: "layui-sub-menu-popup",
        placement: unref(computedPlacement),
        autoFitMinWidth: false,
        updateAtScroll: true,
        contentOffset: 3
      }, {
        content: withCtx(() => [
          createElementVNode("div", {
            class: normalizeClass([
              "layui-sub-menu-popup-content",
              `layui-sub-menu-popup-theme${unref(computedTheme)}`
            ])
          }, [
            renderSlot(_ctx.$slots, "default")
          ], 2)
        ]),
        default: withCtx(() => [
          createElementVNode("li", _hoisted_1$1, [
            createElementVNode("a", _hoisted_2$1, [
              createElementVNode("div", null, [
                _ctx.$slots.icon ? (openBlock(), createElementBlock("i", _hoisted_3$1, [
                  renderSlot(_ctx.$slots, "icon")
                ])) : createCommentVNode("", true),
                _ctx.$slots.title ? (openBlock(), createElementBlock("span", _hoisted_4$1, [
                  renderSlot(_ctx.$slots, "title")
                ])) : createCommentVNode("", true)
              ]),
              _ctx.$slots.expandIcon ? (openBlock(), createElementBlock("span", _hoisted_5$1, [
                renderSlot(_ctx.$slots, "expandIcon", {}, () => [
                  createVNode(unref(_sfc_main$2E), { type: unref(computedExpandIcon) }, null, 8, ["type"])
                ])
              ])) : createCommentVNode("", true)
            ])
          ])
        ]),
        _: 3
      }, 8, ["placement"]);
    };
  }
});
const _hoisted_1 = {
  key: 0,
  class: "layui-nav-item"
};
const _hoisted_2 = {
  key: 0,
  class: "layui-sub-menu-icon"
};
const _hoisted_3 = {
  key: 1,
  class: "layui-nav-more"
};
const _hoisted_4 = { key: 0 };
const _hoisted_5 = { class: "layui-nav-child" };
const __default__ = {
  name: "LaySubMenu"
};
const _sfc_main = defineComponent({
  ...__default__,
  props: {
    id: null,
    title: null
  },
  setup(__props) {
    const props = __props;
    const slots = useSlots();
    const { level } = useLevel();
    const isTree = inject("isTree");
    inject("selectedKey");
    const openKeys = inject("openKeys");
    const indent = inject("indent");
    const isCollapse = inject("isCollapse");
    const isCollapseTransition = inject("isCollapseTransition");
    const isOpen = computed(() => {
      return openKeys.value.includes(props.id);
    });
    const nextLevel = computed(() => level.value + 1);
    provideLevel(nextLevel);
    const needPopup = ref(false);
    watchEffect(() => {
      if (isTree.value) {
        const _isCollapse = isCollapse.value === true || isCollapse.value === "true";
        if (_isCollapse && level.value === 1) {
          setTimeout(() => {
            needPopup.value = isTree.value && _isCollapse;
          }, 200);
        } else {
          needPopup.value = isTree.value && _isCollapse;
        }
      } else if (slots.default && slots.default().length > 0) {
        needPopup.value = true;
      }
    });
    const openHandle = function() {
      if (!isCollapse.value) {
        let newOpenKeys = [...openKeys.value];
        if (openKeys.value.includes(props.id)) {
          newOpenKeys.splice(newOpenKeys.indexOf(props.id), 1);
        } else {
          newOpenKeys.push(props.id);
        }
        openKeys.value = newOpenKeys;
      }
    };
    return (_ctx, _cache) => {
      return !needPopup.value ? (openBlock(), createElementBlock("li", _hoisted_1, [
        createElementVNode("a", {
          href: "javascript:void(0)",
          onClick: _cache[0] || (_cache[0] = ($event) => openHandle()),
          style: normalizeStyle(unref(indentHandle)({ indent: unref(indent), level: unref(level), basePadding: 23, isTree: unref(isTree) }))
        }, [
          unref(slots).icon ? (openBlock(), createElementBlock("i", _hoisted_2, [
            renderSlot(_ctx.$slots, "icon")
          ])) : createCommentVNode("", true),
          createElementVNode("span", null, [
            unref(slots).title ? renderSlot(_ctx.$slots, "title", { key: 0 }) : createCommentVNode("", true)
          ]),
          unref(slots).expandIcon ? (openBlock(), createElementBlock("i", _hoisted_3, [
            renderSlot(_ctx.$slots, "expandIcon", { isExpand: unref(isOpen) })
          ])) : (openBlock(), createElementBlock("i", {
            key: 2,
            class: normalizeClass([
              unref(isOpen) ? "layui-nav-mored" : "",
              "layui-icon layui-icon-down",
              "layui-nav-more"
            ])
          }, null, 2))
        ], 4),
        unref(isTree) ? (openBlock(), createBlock(_sfc_main$3, {
          key: 0,
          enable: unref(isCollapseTransition)
        }, {
          default: withCtx(() => [
            unref(isOpen) ? (openBlock(), createElementBlock("div", _hoisted_4, [
              createElementVNode("dl", _hoisted_5, [
                renderSlot(_ctx.$slots, "default")
              ])
            ])) : createCommentVNode("", true)
          ]),
          _: 3
        }, 8, ["enable"])) : createCommentVNode("", true)
      ])) : (openBlock(), createBlock(_sfc_main$1, {
        key: 1,
        id: __props.id
      }, createSlots({
        expandIcon: withCtx(() => [
          renderSlot(_ctx.$slots, "expandIcon")
        ]),
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default")
        ]),
        _: 2
      }, [
        unref(slots).icon ? {
          name: "icon",
          fn: withCtx(() => [
            renderSlot(_ctx.$slots, "icon")
          ]),
          key: "0"
        } : void 0,
        unref(slots).title ? {
          name: "title",
          fn: withCtx(() => [
            renderSlot(_ctx.$slots, "title")
          ]),
          key: "1"
        } : void 0
      ]), 1032, ["id"]));
    };
  }
});
const component = withInstall(_sfc_main);
export { component as default };