song-ui-u/lib/components/menu/src/sub-menu.cjs

vue3 + js的PC前端组件库

'use strict';

var vue = require('vue');
var index$1 = require('../../../hook/use-namespace/index.cjs');
var icons = require('song-ui-pro-icon');
require('../../../hook/use-zindex/index.cjs');
require('../../button/index.cjs');
require('../../buttonGroup/index.cjs');
var index = require('../../icon/index.cjs');
require('../../input/index.cjs');
require('../../textarea/index.cjs');
require('../../row/index.cjs');
require('../../col/index.cjs');
require('../../container/index.cjs');
require('../../checkbox/index.cjs');
require('../../switch/index.cjs');
require('../../form/index.cjs');
require('../../message/index.cjs');
require('../../mask/src/mask.cjs');
require('../../modal/index.cjs');
require('../../messageBox/index.cjs');
require('../../drawer/index.cjs');
require('../../badge/index.cjs');
require('../../space/index.cjs');
require('../../image/index.cjs');
require('../../radio/index.cjs');
require('../../divider/index.cjs');
require('../../chat/index.cjs');
require('../../progress/index.cjs');
require('../../upload/index.cjs');
require('../../vTree/index.cjs');
require('../../table/index.cjs');
require('../../tabs/index.cjs');
require('../index.cjs');
require('../../steps/index.cjs');
require('../../header/index.cjs');
require('../../breadcrumble/index.cjs');
require('../../datePicker/index.cjs');
require('../../tooltip/index.cjs');
require('../../popover/index.cjs');
require('../../timePicker/index.cjs');
require('../../select/index.cjs');
require('../../collapse/index.cjs');
require('../../card/index.cjs');
require('../../timeline/index.cjs');
require('../../tag/index.cjs');
require('../../result/index.cjs');
require('../../sender/index.cjs');
var useMenu = require('./hooks/use-menu.cjs');

var subMenu = /* @__PURE__ */ vue.defineComponent({
  name: "x-sub-menu",
  props: {
    title: {
      type: String,
      default: ""
    },
    index: {
      type: String,
      default: ""
    },
    align: {
      type: String,
      default: "left",
      // 默认左对齐
      validator: (value) => ["left", "right"].includes(value)
    }
  },
  setup(props, {
    slots,
    emit
  }) {
    const ns = index$1.useNamespace("sub-menu");
    const isOpen = vue.ref(false);
    const {
      isActive,
      menuCtx
    } = useMenu.useMenu();
    const timer = vue.ref(null);
    const DELAY = 200;
    const mode = menuCtx.props?.mode;
    const clearTimer = () => {
      if (timer.value) {
        clearTimeout(timer.value);
        timer.value = null;
      }
    };
    const setOpenState = (state) => {
      if (mode === "horizontal") {
        clearTimer();
        timer.value = setTimeout(() => {
          isOpen.value = state;
        }, DELAY);
      } else {
        isOpen.value = state;
      }
    };
    const change = (e) => {
      e.stopPropagation();
      setOpenState(!isOpen.value);
      menuCtx.change(props.index);
    };
    const handleMouseEnter = (e) => {
      if (mode !== "horizontal") return;
      e.stopPropagation();
      setOpenState(true);
      menuCtx.enter(props.index);
    };
    const handleMouseLeave = (e) => {
      if (mode !== "horizontal") return;
      e.stopPropagation();
      setOpenState(false);
      menuCtx.leave(props.index);
    };
    const isNested = vue.inject("isSubMenu", false);
    vue.provide("isSubMenu", true);
    return () => vue.createVNode("li", {
      "class": ns.b()
    }, [vue.createVNode("div", {
      "class": [ns.e("title"), ns.is("active", isActive(props.index))],
      "onClick": change,
      "onMouseenter": handleMouseEnter,
      "onMouseleave": handleMouseLeave
    }, [props.title && vue.createVNode("span", null, [props.title]), slots.title && !props.title && vue.createVNode("span", null, [slots.title()]), vue.createVNode(index.XIcon, {
      "class": [ns.e("icon"), isOpen.value ? ns.m("icon", "open") : ""]
    }, {
      default: () => [vue.createVNode(icons.ChevronRight, null, null)]
    })]), vue.createVNode(vue.Transition, {
      "name": ns.b()
    }, {
      default: () => [isOpen.value && vue.createVNode("ul", {
        "onMouseenter": handleMouseEnter,
        "onMouseleave": handleMouseLeave,
        "style": {
          backgroundColor: props.backgroundColor
        },
        "class": [ns.e("menu"), ns.is("nested", isNested), ns.m("mode", mode)]
      }, [slots.default?.()])]
    })]);
  }
});

module.exports = subMenu;
//# sourceMappingURL=sub-menu.cjs.map