element-plus/es/components/dropdown/src/dropdown-item.mjs.map

A Component Library for Vue 3

{"version":3,"file":"dropdown-item.mjs","names":[],"sources":["../../../../../../packages/components/dropdown/src/dropdown-item.vue"],"sourcesContent":["<template>\n  <el-roving-focus-item :focusable=\"!disabled\">\n    <el-dropdown-item-impl\n      v-bind=\"propsAndAttrs\"\n      @pointerleave=\"handlePointerLeave\"\n      @pointermove=\"handlePointerMove\"\n      @clickimpl=\"handleClick\"\n    >\n      <template v-if=\"$slots.icon\" #icon>\n        <slot name=\"icon\" />\n      </template>\n\n      <slot />\n    </el-dropdown-item-impl>\n  </el-roving-focus-item>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, getCurrentInstance, inject } from 'vue'\nimport { ElRovingFocusItem } from '@element-plus/components/roving-focus-group'\nimport { composeEventHandlers, whenMouse } from '@element-plus/utils'\nimport ElDropdownItemImpl from './dropdown-item-impl.vue'\nimport { useDropdown } from './useDropdown'\nimport { dropdownItemProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nexport default defineComponent({\n  name: 'ElDropdownItem',\n  components: {\n    ElRovingFocusItem,\n    ElDropdownItemImpl,\n  },\n  inheritAttrs: false,\n  props: dropdownItemProps,\n  emits: ['pointermove', 'pointerleave', 'click'],\n  setup(props, { emit, attrs }) {\n    const { elDropdown } = useDropdown()\n    const _instance = getCurrentInstance()\n    const { onItemEnter, onItemLeave } = inject(\n      DROPDOWN_INJECTION_KEY,\n      undefined\n    )!\n\n    const handlePointerMove = composeEventHandlers(\n      (e: PointerEvent) => {\n        emit('pointermove', e)\n        return e.defaultPrevented\n      },\n      whenMouse((e) => {\n        if (props.disabled) {\n          onItemLeave(e)\n          return\n        }\n\n        const target = e.currentTarget as HTMLElement\n        /**\n         * This handles the following scenario:\n         *   when the item contains a form element such as input element\n         *   when the mouse is moving over the element itself which is contained by\n         *   the item, the default focusing logic should be prevented so that\n         *   it won't cause weird action.\n         */\n        if (\n          target === document.activeElement ||\n          target.contains(document.activeElement)\n        ) {\n          return\n        }\n\n        onItemEnter(e)\n        if (!e.defaultPrevented) {\n          target?.focus({\n            preventScroll: true,\n          })\n        }\n      })\n    )\n\n    const handlePointerLeave = composeEventHandlers((e: PointerEvent) => {\n      emit('pointerleave', e)\n      return e.defaultPrevented\n    }, whenMouse(onItemLeave))\n\n    const handleClick = composeEventHandlers(\n      (e: PointerEvent) => {\n        if (props.disabled) {\n          return\n        }\n        emit('click', e)\n        return e.type !== 'keydown' && e.defaultPrevented\n      },\n      (e) => {\n        if (props.disabled) {\n          e.stopImmediatePropagation()\n          return\n        }\n        if (elDropdown?.hideOnClick?.value) {\n          elDropdown.handleClick?.()\n        }\n        elDropdown.commandHandler?.(props.command, _instance, e)\n      }\n    )\n\n    // direct usage of v-bind={ ...$props, ...$attrs } causes type errors\n    const propsAndAttrs = computed(() => ({ ...props, ...attrs }))\n\n    return {\n      handleClick,\n      handlePointerMove,\n      handlePointerLeave,\n      propsAndAttrs,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;;;;qBACE,YAauB,iCAAA,EAbA,WAAS,CAAG,KAAA,UAAA,EAAA;yBAYT,CAXxB,YAWwB,kCAXxB,WAWwB,KAVd,eAAa;GACpB,gBAAc,KAAA;GACd,eAAa,KAAA;GACb,aAAW,KAAA;GAAA,CAAA,EAAA,YAAA;0BAMJ,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;MAJQ,KAAA,OAAO,OAAA;SAAO;GAAA,IAAA,cACR,CAApB,WAAoB,KAAA,QAAA,OAAA,CAAA,CAAA"}