hongluan-ui/es/components/mention/src/mention-dropdown.mjs.map

Hongluan Component Library for Vue 3

{"version":3,"file":"mention-dropdown.mjs","sources":["../../../../../../packages/components/mention/src/mention-dropdown.vue"],"sourcesContent":["<template>\n  <div ref=\"dropdownRef\" class=\"mention-dropdown\">\n    <div v-if=\"$slots.header\" class=\"mention-dropdown-header\">\n      <slot name=\"header\"></slot>\n    </div>\n    <hl-scrollbar\n      v-show=\"options.length > 0 && !loading\"\n      ref=\"scrollbarRef\"\n      tag=\"ul\"\n      wrap-class=\"mention-dropdown-wrap\"\n      view-class=\"mention-dropdown-list\"\n    >\n      <li\n        v-for=\"(item, index) in options\"\n        ref=\"optionRefs\"\n        :key=\"item.value\"\n        :class=\"optionkls(item, 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    </hl-scrollbar>\n    <div v-if=\"loading\" class=\"mention-dropdown-loading\">\n      <slot name=\"loading\"> {{ t('hl.mention.loading') }} </slot>\n    </div>\n    <div v-if=\"$slots.footer\" class=\"mention-dropdown-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from 'vue'\nimport { useLocale } from '@hongluan-ui/hooks'\nimport { scrollIntoView } from '@hongluan-ui/utils'\nimport HlScrollbar from '@hongluan-ui/components/scrollbar'\nimport { mentionDropdownEmits, mentionDropdownProps } from './mention-dropdown'\n\nimport type { MentionOption } from './types'\n\ndefineOptions({\n  name: 'MentionDropdown',\n})\n\nconst props = defineProps(mentionDropdownProps)\nconst emit = defineEmits(mentionDropdownEmits)\n\nconst { t } = useLocale()\nconst hoveringIndex = ref(-1)\n\nconst scrollbarRef = ref<InstanceType<typeof HlScrollbar>>()\nconst optionRefs = ref<HTMLElement[]>()\nconst dropdownRef = ref<HTMLElement>()\n\nconst optionkls = (item: MentionOption, index: number) => [\n  'mention-dropdown-item',\n  hoveringIndex.value === index ? 'hovering' : '',\n  item.disabled || props.disabled ? 'is-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?.('.mention-dropdown-wrap')\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  navigateOptions,\n  selectHoverOption,\n  hoverOption,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;oCA0Cc;AAAA,EACZ,MAAM;AACR;;;;;;;AAKA,UAAM,EAAE,MAAM;AACd,UAAM,gBAAgB,IAAI,EAAE;AAE5B,UAAM,eAAe;AACrB,UAAM,aAAa;AACnB,UAAM,cAAc;AAEpB,UAAM,YAAY,CAAC,MAAqB,UAAkB;AAAA,MACxD;AAAA,MACA,cAAc,UAAU,QAAQ,aAAa;AAAA,MAC7C,KAAK,YAAY,MAAM,WAAW,gBAAgB;AAAA;AAGpD,UAAM,eAAe,CAAC,SAAwB;AAC5C,UAAI,KAAK,YAAY,MAAM;AAAU;AACrC,WAAK,UAAU,IAAI;AAAA;AAGrB,UAAM,mBAAmB,CAAC,UAAkB;AAC1C,oBAAc,QAAQ;AAAA;AAGxB,UAAM,sBAAsB,SAC1B,MAAM,MAAM,YAAY,MAAM,QAAQ,MAAM,UAAQ,KAAK,QAAQ,CACnE;AAEA,UAAM,cAAc,SAAS,MAAM,MAAM,QAAQ,cAAc,MAAM;AAErE,UAAM,oBAAoB,MAAM;AAC9B,UAAI,CAAC,YAAY;AAAO;AACxB,WAAK,UAAU,YAAY,KAAK;AAAA;AAGlC,UAAM,kBAAkB,CAAC,cAA+B;AACtD,YAAM,EAAE,YAAY;AACpB,UAAI,QAAQ,WAAW,KAAK,oBAAoB;AAAO;AAEvD,UAAI,cAAc,QAAQ;AACxB,sBAAc;AACd,YAAI,cAAc,UAAU,QAAQ,QAAQ;AAC1C,wBAAc,QAAQ;AAAA;AACxB,iBACS,cAAc,QAAQ;AAC/B,sBAAc;AACd,YAAI,cAAc,QAAQ,GAAG;AAC3B,wBAAc,QAAQ,QAAQ,SAAS;AAAA;AACzC;AAEF,YAAM,SAAS,QAAQ,cAAc;AACrC,UAAI,OAAO,UAAU;AACnB,wBAAgB,SAAS;AACzB;AAAA;AAEF,eAAS,MAAM,eAAe,MAAM,CAAC;AAAA;AAGvC,UAAM,iBAAiB,CAAC,WAA0B;AAChD,YAAM,EAAE;AAER,YAAM;AACN,YAAM;AAEN,kBAAY;AACV;AACA,kBAAU;AACR;AAA0C;AAC5C;AAEF;AAAiC;AAGnC;AACE,UAAI;AACF,8BAAsB;AAAA;AAEtB;AAAsB;AACxB;AAGF;AAA+C;AAClC;AAGb;AAAa;AACX,MACA;AAAA,MACA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}