vexip-ui/lib/components/menu/menu-rest.cjs.map

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

{"version":3,"file":"menu-rest.cjs","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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"}