element-plus
Version:
A Component Library for Vue 3
1 lines • 9.92 kB
Source Map (JSON)
{"version":3,"file":"mention-dropdown.vue2.mjs","sources":["../../../../../../packages/components/mention/src/mention-dropdown.vue"],"sourcesContent":["<template>\n <div ref=\"dropdownRef\" :class=\"ns.b('dropdown')\">\n <div v-if=\"$slots.header\" :class=\"ns.be('dropdown', 'header')\">\n <slot name=\"header\" />\n </div>\n <el-scrollbar\n v-show=\"options.length > 0 && !loading\"\n :id=\"contentId\"\n ref=\"scrollbarRef\"\n tag=\"ul\"\n :wrap-class=\"ns.be('dropdown', 'wrap')\"\n :view-class=\"ns.be('dropdown', 'list')\"\n role=\"listbox\"\n :aria-label=\"ariaLabel\"\n aria-orientation=\"vertical\"\n >\n <li\n v-for=\"(item, index) in options\"\n :id=\"`${contentId}-${index}`\"\n ref=\"optionRefs\"\n :key=\"index\"\n :class=\"optionkls(item, index)\"\n role=\"option\"\n :aria-disabled=\"item.disabled || disabled || undefined\"\n :aria-selected=\"hoveringIndex === index\"\n @mousemove=\"handleMouseEnter(index)\"\n @click.stop=\"handleSelect(item)\"\n >\n <slot name=\"label\" :item=\"item\" :index=\"index\">\n <span>{{ item.label ?? item.value }}</span>\n </slot>\n </li>\n </el-scrollbar>\n <div v-if=\"loading\" :class=\"ns.be('dropdown', 'loading')\">\n <slot name=\"loading\"> {{ t('el.mention.loading') }} </slot>\n </div>\n <div v-if=\"$slots.footer\" :class=\"ns.be('dropdown', 'footer')\">\n <slot name=\"footer\" />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, ref, watch } from 'vue'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { scrollIntoView } from '@element-plus/utils'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport { mentionDropdownEmits } from './mention-dropdown'\n\nimport type { MentionDropdownProps } from './mention-dropdown'\nimport type { MentionOption } from './types'\n\ndefineOptions({\n name: 'ElMentionDropdown',\n})\n\nconst props = withDefaults(defineProps<MentionDropdownProps>(), {\n options: () => [],\n})\nconst emit = defineEmits(mentionDropdownEmits)\n\nconst ns = useNamespace('mention')\nconst { t } = useLocale()\nconst hoveringIndex = ref(-1)\n\nconst scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()\nconst optionRefs = ref<HTMLElement[]>()\nconst dropdownRef = ref<HTMLElement>()\n\nconst optionkls = (item: MentionOption, index: number) => [\n ns.be('dropdown', 'item'),\n ns.is('hovering', hoveringIndex.value === index),\n ns.is('disabled', item.disabled || props.disabled),\n]\n\nconst handleSelect = (item: MentionOption) => {\n if (item.disabled || props.disabled) return\n emit('select', item)\n}\n\nconst handleMouseEnter = (index: number) => {\n hoveringIndex.value = index\n}\n\nconst filteredAllDisabled = computed(\n () => props.disabled || props.options.every((item) => item.disabled)\n)\n\nconst hoverOption = computed(() => props.options[hoveringIndex.value])\n\nconst selectHoverOption = () => {\n if (!hoverOption.value) return\n emit('select', hoverOption.value)\n}\n\nconst navigateOptions = (direction: 'next' | 'prev') => {\n const { options } = props\n if (options.length === 0 || filteredAllDisabled.value) return\n\n if (direction === 'next') {\n hoveringIndex.value++\n if (hoveringIndex.value === options.length) {\n hoveringIndex.value = 0\n }\n } else if (direction === 'prev') {\n hoveringIndex.value--\n if (hoveringIndex.value < 0) {\n hoveringIndex.value = options.length - 1\n }\n }\n const option = options[hoveringIndex.value]\n if (option.disabled) {\n navigateOptions(direction)\n return\n }\n nextTick(() => scrollToOption(option))\n}\n\nconst scrollToOption = (option: MentionOption) => {\n const { options } = props\n\n const index = options.findIndex((item) => item.value === option.value)\n const target = optionRefs.value?.[index]\n\n if (target) {\n const menu = dropdownRef.value?.querySelector?.(\n `.${ns.be('dropdown', 'wrap')}`\n )\n if (menu) {\n scrollIntoView(menu as HTMLElement, target)\n }\n }\n scrollbarRef.value?.handleScroll()\n}\n\nconst resetHoveringIndex = () => {\n if (filteredAllDisabled.value || props.options.length === 0) {\n hoveringIndex.value = -1\n } else {\n hoveringIndex.value = 0\n }\n}\n\nwatch(() => props.options, resetHoveringIndex, {\n immediate: true,\n})\n\ndefineExpose({\n hoveringIndex,\n navigateOptions,\n selectHoverOption,\n hoverOption,\n})\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_unref","$slots","_renderSlot","_createVNode","_openBlock","_Fragment","_renderList","_withModifiers","_createElementVNode"],"mappings":"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"}