vexip-ui/es/components/menu/menu-rest.mjs.map

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

{"version":3,"file":"menu-rest.mjs","sources":["../../../components/menu/menu-rest.tsx"],"sourcesContent":["import { Icon } from '@/components/icon'\nimport { MenuItem } from '@/components/menu-item'\nimport { Popper } from '@/components/popper'\n\nimport { computed, defineComponent, inject, nextTick, provide, reactive, ref, watch } from 'vue'\n\nimport { useHoverDelay, useIcons, useNameHelper } from '@vexip-ui/config'\nimport { useClickOutside, usePopper, useSetTimeout } from '@vexip-ui/hooks'\nimport { callIfFunc } from '@vexip-ui/utils'\nimport { MENU_ITEM_STATE, MENU_STATE } from './symbol'\n\nimport type { PropType } from 'vue'\nimport type { PopperExposed } from '@/components/popper'\nimport type { MenuOptions } from './symbol'\n\nexport default defineComponent({\n  name: 'MenuRest',\n  props: {\n    menus: {\n      type: Array as PropType<MenuOptions[]>,\n      default: () => [],\n    },\n  },\n  setup(props) {\n    const menuState = inject(MENU_STATE, null)\n\n    const nh = useNameHelper('menu')\n    const icons = useIcons()\n    const hoverDelay = useHoverDelay()\n\n    const groupExpanded = ref(false)\n    const sonSelected = ref(false)\n    const popperShow = ref(false)\n\n    const transfer = computed(() => menuState?.transfer ?? false)\n    const dropTrigger = computed(() => menuState?.trigger || 'hover')\n\n    const wrapper = useClickOutside(handleClickOutside)\n    const popper = ref<PopperExposed>()\n    const { reference, transferTo, updatePopper } = usePopper({\n      placement: ref('bottom'),\n      transfer,\n      wrapper,\n      popper: computed(() => popper.value?.wrapper),\n    })\n\n    const itemState = reactive({\n      el: wrapper,\n      label: '',\n      indent: 1,\n      groupExpanded,\n      showGroup: groupExpanded,\n      isUsePopper: true,\n      parentState: null,\n      transfer,\n      cachedExpanded: false,\n      updateSonSelected,\n      toggleGroupExpanded,\n      handleMouseEnter,\n      handleMouseLeave,\n    })\n\n    provide(MENU_ITEM_STATE, itemState)\n\n    watch(groupExpanded, value => {\n      if (value) {\n        popperShow.value = true\n        updatePopper()\n      }\n    })\n\n    function updateSonSelected(selected: boolean) {\n      sonSelected.value = selected\n    }\n\n    function toggleGroupExpanded(expanded: boolean) {\n      groupExpanded.value = expanded\n    }\n\n    const { timer } = useSetTimeout()\n\n    let mouseInList = false\n    let reproduce = false\n\n    function handleMouseEnter() {\n      clearTimeout(timer.hover)\n\n      if (mouseInList || dropTrigger.value !== 'hover') return\n\n      if (!groupExpanded.value && popperShow.value) {\n        reproduce = true\n        return\n      }\n\n      timer.hover = setTimeout(() => {\n        groupExpanded.value = true\n      }, hoverDelay.value)\n    }\n\n    function handleMouseLeave() {\n      clearTimeout(timer.hover)\n\n      if (mouseInList || !popperShow.value || dropTrigger.value !== 'hover') return\n\n      timer.hover = setTimeout(() => {\n        groupExpanded.value = false\n      }, hoverDelay.value)\n    }\n\n    function handleClick() {\n      if (dropTrigger.value === 'click') {\n        groupExpanded.value = true\n      }\n    }\n\n    function handleClickOutside() {\n      if (dropTrigger.value === 'click') {\n        nextTick(() => {\n          groupExpanded.value = false\n        })\n      }\n    }\n\n    function handlePopperHide() {\n      popperShow.value = false\n      groupExpanded.value = false\n\n      if (reproduce) {\n        reproduce = false\n        groupExpanded.value = true\n      }\n    }\n\n    function renderMenuItems() {\n      if (!props.menus?.length) {\n        return null\n      }\n\n      return props.menus.map(item => (\n        <MenuItem\n          key={item.label}\n          label={item.label}\n          icon={item.icon}\n          icon-props={item.iconProps}\n          disabled={item.disabled}\n          children={item.children}\n          route={item.route}\n          meta={item.meta}\n        >\n          {item.name ? callIfFunc(item.name) : item.label}\n        </MenuItem>\n      ))\n    }\n\n    return () => {\n      return (\n        <div\n          ref={wrapper}\n          class={nh.be('rest')}\n          onMouseenter={handleMouseEnter}\n          onMouseleave={handleMouseLeave}\n        >\n          <div\n            ref={reference}\n            class={[nh.be('rest-handler'), sonSelected.value && nh.bem('rest-handler', 'selected')]}\n            onClick={handleClick}\n          >\n            <Icon {...icons.value.ellipsis}></Icon>\n          </div>\n          <Popper\n            ref={popper}\n            class={[nh.be('popper'), nh.bs('vars'), nh.bem('popper', 'drop')]}\n            visible={popperShow.value && groupExpanded.value}\n            alive={!transferTo.value || popperShow.value}\n            to={transferTo.value}\n            transition={nh.ns('drop')}\n            onAfterLeave={handlePopperHide}\n            onMouseenter={() => ((mouseInList = true), handleMouseEnter())}\n            onMouseleave={() => ((mouseInList = false), handleMouseLeave())}\n          >\n            <ul class={[nh.be('list'), nh.bem('list', 'theme')]}>{renderMenuItems()}</ul>\n          </Popper>\n        </div>\n      )\n    }\n  },\n})\n"],"names":["defineComponent","name","props","menus","type","Array","default","setup","menuState","inject","MENU_STATE","nh","useNameHelper","icons","useIcons","hoverDelay","useHoverDelay","groupExpanded","ref","sonSelected","popperShow","transfer","computed","dropTrigger","trigger","wrapper","useClickOutside","handleClickOutside","popper","reference","transferTo","updatePopper","usePopper","placement","value","itemState","reactive","el","label","indent","showGroup","isUsePopper","parentState","cachedExpanded","updateSonSelected","toggleGroupExpanded","handleMouseEnter","handleMouseLeave","provide","MENU_ITEM_STATE","watch","selected","expanded","timer","useSetTimeout","mouseInList","reproduce","clearTimeout","hover","setTimeout","handleClick","nextTick","handlePopperHide","renderMenuItems","length","map","item","_createVNode","MenuItem","icon","iconProps","disabled","children","route","meta","callIfFunc","be","bem","Icon","ellipsis","Popper","bs","ns","onMouseenter","onMouseleave"],"mappings":"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"}