You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
14 KiB
1 line
14 KiB
{"ast":null,"code":"import { defineComponent, ref, computed, nextTick, watch, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createCommentVNode, withDirectives, createVNode, withCtx, Fragment, renderList, withModifiers, createElementVNode, toDisplayString, vShow, createTextVNode } from 'vue';\nimport '../../../hooks/index.mjs';\nimport '../../../utils/index.mjs';\nimport { ElScrollbar } from '../../scrollbar/index.mjs';\nimport { mentionDropdownProps, mentionDropdownEmits } from './mention-dropdown.mjs';\nimport _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';\nimport { useNamespace } from '../../../hooks/use-namespace/index.mjs';\nimport { useLocale } from '../../../hooks/use-locale/index.mjs';\nimport { scrollIntoView } from '../../../utils/dom/scroll.mjs';\nconst __default__ = defineComponent({\n name: \"ElMentionDropdown\"\n});\nconst _sfc_main = /* @__PURE__ */defineComponent({\n ...__default__,\n props: mentionDropdownProps,\n emits: mentionDropdownEmits,\n setup(__props, {\n expose,\n emit\n }) {\n const props = __props;\n const ns = useNamespace(\"mention\");\n const {\n t\n } = useLocale();\n const hoveringIndex = ref(-1);\n const scrollbarRef = ref();\n const optionRefs = ref();\n const dropdownRef = ref();\n const optionkls = (item, index) => [ns.be(\"dropdown\", \"item\"), ns.is(\"hovering\", hoveringIndex.value === index), ns.is(\"disabled\", item.disabled || props.disabled)];\n const handleSelect = item => {\n if (item.disabled || props.disabled) return;\n emit(\"select\", item);\n };\n const handleMouseEnter = index => {\n hoveringIndex.value = index;\n };\n const filteredAllDisabled = computed(() => props.disabled || props.options.every(item => item.disabled));\n const hoverOption = computed(() => props.options[hoveringIndex.value]);\n const selectHoverOption = () => {\n if (!hoverOption.value) return;\n emit(\"select\", hoverOption.value);\n };\n const navigateOptions = direction => {\n const {\n options\n } = props;\n if (options.length === 0 || filteredAllDisabled.value) return;\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 const scrollToOption = option => {\n var _a, _b, _c, _d;\n const {\n options\n } = props;\n const index = options.findIndex(item => item.value === option.value);\n const target = (_a = optionRefs.value) == null ? void 0 : _a[index];\n if (target) {\n const menu = (_c = (_b = dropdownRef.value) == null ? void 0 : _b.querySelector) == null ? void 0 : _c.call(_b, `.${ns.be(\"dropdown\", \"wrap\")}`);\n if (menu) {\n scrollIntoView(menu, target);\n }\n }\n (_d = scrollbarRef.value) == null ? void 0 : _d.handleScroll();\n };\n const resetHoveringIndex = () => {\n if (filteredAllDisabled.value || props.options.length === 0) {\n hoveringIndex.value = -1;\n } else {\n hoveringIndex.value = 0;\n }\n };\n watch(() => props.options, resetHoveringIndex, {\n immediate: true\n });\n expose({\n hoveringIndex,\n navigateOptions,\n selectHoverOption,\n hoverOption\n });\n return (_ctx, _cache) => {\n return openBlock(), createElementBlock(\"div\", {\n ref_key: \"dropdownRef\",\n ref: dropdownRef,\n class: normalizeClass(unref(ns).b(\"dropdown\"))\n }, [_ctx.$slots.header ? (openBlock(), createElementBlock(\"div\", {\n key: 0,\n class: normalizeClass(unref(ns).be(\"dropdown\", \"header\"))\n }, [renderSlot(_ctx.$slots, \"header\")], 2)) : createCommentVNode(\"v-if\", true), withDirectives(createVNode(unref(ElScrollbar), {\n id: _ctx.contentId,\n ref_key: \"scrollbarRef\",\n ref: scrollbarRef,\n tag: \"ul\",\n \"wrap-class\": unref(ns).be(\"dropdown\", \"wrap\"),\n \"view-class\": unref(ns).be(\"dropdown\", \"list\"),\n role: \"listbox\",\n \"aria-label\": _ctx.ariaLabel,\n \"aria-orientation\": \"vertical\"\n }, {\n default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (item, index) => {\n return openBlock(), createElementBlock(\"li\", {\n id: `${_ctx.contentId}-${index}`,\n ref_for: true,\n ref_key: \"optionRefs\",\n ref: optionRefs,\n key: item.value,\n class: normalizeClass(optionkls(item, index)),\n role: \"option\",\n \"aria-disabled\": item.disabled || _ctx.disabled || void 0,\n \"aria-selected\": hoveringIndex.value === index,\n onMouseenter: $event => handleMouseEnter(index),\n onClick: withModifiers($event => handleSelect(item), [\"stop\"])\n }, [renderSlot(_ctx.$slots, \"label\", {\n item,\n index\n }, () => {\n var _a;\n return [createElementVNode(\"span\", null, toDisplayString((_a = item.label) != null ? _a : item.value), 1)];\n })], 42, [\"id\", \"aria-disabled\", \"aria-selected\", \"onMouseenter\", \"onClick\"]);\n }), 128))]),\n _: 3\n }, 8, [\"id\", \"wrap-class\", \"view-class\", \"aria-label\"]), [[vShow, _ctx.options.length > 0 && !_ctx.loading]]), _ctx.loading ? (openBlock(), createElementBlock(\"div\", {\n key: 1,\n class: normalizeClass(unref(ns).be(\"dropdown\", \"loading\"))\n }, [renderSlot(_ctx.$slots, \"loading\", {}, () => [createTextVNode(toDisplayString(unref(t)(\"el.mention.loading\")), 1)])], 2)) : createCommentVNode(\"v-if\", true), _ctx.$slots.footer ? (openBlock(), createElementBlock(\"div\", {\n key: 2,\n class: normalizeClass(unref(ns).be(\"dropdown\", \"footer\"))\n }, [renderSlot(_ctx.$slots, \"footer\")], 2)) : createCommentVNode(\"v-if\", true)], 2);\n };\n }\n});\nvar ElMentionDropdown = /* @__PURE__ */_export_sfc(_sfc_main, [[\"__file\", \"mention-dropdown.vue\"]]);\nexport { ElMentionDropdown as default };","map":{"version":3,"names":["name","ns","useNamespace","t","useLocale","hoveringIndex","ref","scrollbarRef","optionRefs","dropdownRef","optionkls","item","index","be","is","value","disabled","props","handleSelect","emit","handleMouseEnter","filteredAllDisabled","computed","options","every","hoverOption","selectHoverOption","navigateOptions","direction","length","option","nextTick","scrollToOption","_a","_b","_c","_d","findIndex","target","menu","querySelector","call","scrollIntoView","handleScroll","resetHoveringIndex","watch","immediate","expose"],"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=\"item.value\"\n :class=\"optionkls(item, index)\"\n role=\"option\"\n :aria-disabled=\"item.disabled || disabled || undefined\"\n :aria-selected=\"hoveringIndex === index\"\n @mouseenter=\"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<script setup lang=\"ts\">\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, mentionDropdownProps } from './mention-dropdown'\n\nimport type { MentionOption } from './types'\n\ndefineOptions({\n name: 'ElMentionDropdown',\n})\n\nconst props = defineProps(mentionDropdownProps)\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"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]} |