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