element-plus/es/components/mention/src/mention2.mjs.map

A Component Library for Vue 3

{"version":3,"file":"mention2.mjs","names":[],"sources":["../../../../../../packages/components/mention/src/mention.vue"],"sourcesContent":["<template>\n  <div ref=\"wrapperRef\" :class=\"ns.b()\">\n    <el-input\n      v-bind=\"mergeProps(passInputProps, $attrs)\"\n      ref=\"elInputRef\"\n      :model-value=\"modelValue\"\n      :disabled=\"disabled\"\n      :role=\"dropdownVisible ? 'combobox' : undefined\"\n      :aria-activedescendant=\"dropdownVisible ? hoveringId || '' : undefined\"\n      :aria-controls=\"dropdownVisible ? contentId : undefined\"\n      :aria-expanded=\"dropdownVisible || undefined\"\n      :aria-label=\"ariaLabel\"\n      :aria-autocomplete=\"dropdownVisible ? 'none' : undefined\"\n      :aria-haspopup=\"dropdownVisible ? 'listbox' : undefined\"\n      @input=\"handleInputChange\"\n      @keydown=\"handleInputKeyDown\"\n      @mousedown=\"handleInputMouseDown\"\n    >\n      <template v-for=\"(_, name) in $slots\" #[name]=\"slotProps\">\n        <slot :name=\"name\" v-bind=\"slotProps\" />\n      </template>\n    </el-input>\n    <el-tooltip\n      ref=\"tooltipRef\"\n      :visible=\"dropdownVisible\"\n      :popper-class=\"[ns.e('popper'), popperClass!]\"\n      :popper-style=\"popperStyle\"\n      :popper-options=\"popperOptions\"\n      :placement=\"computedPlacement\"\n      :fallback-placements=\"computedFallbackPlacements\"\n      effect=\"light\"\n      pure\n      :offset=\"offset\"\n      :show-arrow=\"showArrow\"\n    >\n      <template #default>\n        <div :style=\"cursorStyle\" />\n      </template>\n      <template #content>\n        <el-mention-dropdown\n          ref=\"dropdownRef\"\n          :options=\"filteredOptions\"\n          :disabled=\"disabled\"\n          :loading=\"loading\"\n          :content-id=\"contentId\"\n          :aria-label=\"ariaLabel\"\n          @select=\"handleSelect\"\n          @click.stop=\"elInputRef?.focus()\"\n        >\n          <template v-for=\"(_, name) in $slots\" #[name]=\"slotProps\">\n            <slot :name=\"name\" v-bind=\"slotProps\" />\n          </template>\n        </el-mention-dropdown>\n      </template>\n    </el-tooltip>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, mergeProps, nextTick, ref } from 'vue'\nimport { pick } from 'lodash-unified'\nimport { useFocusController, useId, useNamespace } from '@element-plus/hooks'\nimport ElInput, {\n  inputProps,\n  inputPropsDefaults,\n} from '@element-plus/components/input'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport {\n  EVENT_CODE,\n  INPUT_EVENT,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { useFormDisabled } from '@element-plus/components/form'\nimport { getEventCode, isFunction } from '@element-plus/utils'\nimport { mentionDefaultProps, mentionEmits } from './mention'\nimport { filterOption, getCursorPosition, getMentionCtx } from './helper'\nimport ElMentionDropdown from './mention-dropdown.vue'\n\nimport type { MentionProps } from './mention'\nimport type { Placement } from '@popperjs/core'\nimport type { CSSProperties } from 'vue'\nimport type { InputInstance } from '@element-plus/components/input'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { MentionCtx, MentionOption } from './types'\n\ndefineOptions({\n  name: 'ElMention',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MentionProps>(), {\n  ...inputPropsDefaults,\n  options: () => [],\n  prefix: '@',\n  split: ' ',\n  filterOption: () => filterOption,\n  placement: 'bottom',\n  offset: 0,\n  popperOptions: () => ({}),\n  props: () => mentionDefaultProps,\n})\nconst emit = defineEmits(mentionEmits)\n\nconst passInputProps = computed(() => pick(props, Object.keys(inputProps)))\n\nconst ns = useNamespace('mention')\nconst disabled = useFormDisabled()\nconst contentId = useId()\n\nconst elInputRef = ref<InputInstance>()\nconst tooltipRef = ref<TooltipInstance>()\nconst dropdownRef = ref<InstanceType<typeof ElMentionDropdown>>()\n\nconst visible = ref(false)\nconst cursorStyle = ref<CSSProperties>()\nconst mentionCtx = ref<MentionCtx>()\n\nconst computedPlacement = computed<Placement>(() =>\n  props.showArrow ? props.placement : `${props.placement}-start`\n)\n\nconst computedFallbackPlacements = computed<Placement[]>(() =>\n  props.showArrow ? ['bottom', 'top'] : ['bottom-start', 'top-start']\n)\n\nconst aliasProps = computed(() => ({\n  ...mentionDefaultProps,\n  ...props.props,\n}))\n\nconst mapOption = (option: MentionOption) => {\n  const base = {\n    label: option[aliasProps.value.label],\n    value: option[aliasProps.value.value],\n    disabled: option[aliasProps.value.disabled],\n  }\n  return { ...option, ...base }\n}\n\nconst options = computed(() => props.options.map(mapOption))\n\nconst filteredOptions = computed(() => {\n  const { filterOption } = props\n  if (!mentionCtx.value || !filterOption) return options.value\n  return options.value.filter((option) =>\n    filterOption(mentionCtx.value!.pattern, option)\n  )\n})\n\nconst dropdownVisible = computed(() => {\n  return visible.value && (!!filteredOptions.value.length || props.loading)\n})\n\nconst hoveringId = computed(() => {\n  return `${contentId.value}-${dropdownRef.value?.hoveringIndex}`\n})\n\nconst handleInputChange = (value: string) => {\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(INPUT_EVENT, value)\n  syncAfterCursorMove()\n}\n\nconst handleInputKeyDown = (event: KeyboardEvent | Event) => {\n  if (elInputRef.value?.isComposing) return\n  const code = getEventCode(event as KeyboardEvent)\n\n  switch (code) {\n    case EVENT_CODE.left:\n    case EVENT_CODE.right:\n      syncAfterCursorMove()\n      break\n    case EVENT_CODE.up:\n    case EVENT_CODE.down:\n      if (!visible.value) return\n      event.preventDefault()\n      dropdownRef.value?.navigateOptions(\n        code === EVENT_CODE.up ? 'prev' : 'next'\n      )\n      break\n    case EVENT_CODE.enter:\n    case EVENT_CODE.numpadEnter:\n      if (!visible.value) {\n        props.type !== 'textarea' && syncAfterCursorMove()\n        return\n      }\n      event.preventDefault()\n      if (dropdownRef.value?.hoverOption) {\n        dropdownRef.value?.selectHoverOption()\n      } else {\n        visible.value = false\n      }\n      break\n    case EVENT_CODE.esc:\n      if (!visible.value) return\n      event.preventDefault()\n      visible.value = false\n      break\n    case EVENT_CODE.backspace:\n      if (props.whole && mentionCtx.value) {\n        const { splitIndex, selectionEnd, pattern, prefixIndex, prefix } =\n          mentionCtx.value\n        const inputEl = getInputEl()\n        if (!inputEl) return\n        const inputValue = inputEl.value\n        const matchOption = options.value.find((item) => item.value === pattern)\n        const isWhole = isFunction(props.checkIsWhole)\n          ? props.checkIsWhole(pattern, prefix)\n          : matchOption\n        if (isWhole && splitIndex !== -1 && splitIndex + 1 === selectionEnd) {\n          event.preventDefault()\n          const newValue =\n            inputValue.slice(0, prefixIndex) + inputValue.slice(splitIndex + 1)\n          emit(UPDATE_MODEL_EVENT, newValue)\n          emit(INPUT_EVENT, newValue)\n          emit('whole-remove', pattern, prefix)\n\n          const newSelectionEnd = prefixIndex\n          nextTick(() => {\n            // input value is updated\n            inputEl.selectionStart = newSelectionEnd\n            inputEl.selectionEnd = newSelectionEnd\n            syncDropdownVisible()\n          })\n        }\n      }\n  }\n}\n\nconst { wrapperRef } = useFocusController(elInputRef, {\n  disabled,\n  afterFocus() {\n    syncAfterCursorMove()\n  },\n  beforeBlur(event) {\n    return tooltipRef.value?.isFocusInsideContent(event)\n  },\n  afterBlur() {\n    visible.value = false\n  },\n})\n\nconst handleInputMouseDown = () => {\n  syncAfterCursorMove()\n}\n\n// Ensure that the original option passed by users is returned\nconst getOriginalOption = (mentionOption: MentionOption) => {\n  return props.options.find((option: MentionOption) => {\n    return mentionOption.value === option[aliasProps.value.value]\n  })\n}\n\nconst handleSelect = (item: MentionOption) => {\n  if (!mentionCtx.value) return\n  const inputEl = getInputEl()\n  if (!inputEl) return\n  const inputValue = inputEl.value\n  const { split } = props\n\n  const newEndPart = inputValue.slice(mentionCtx.value.end)\n  const alreadySeparated = newEndPart.startsWith(split)\n  const newMiddlePart = `${item.value}${alreadySeparated ? '' : split}`\n\n  const newValue =\n    inputValue.slice(0, mentionCtx.value.start) + newMiddlePart + newEndPart\n\n  emit(UPDATE_MODEL_EVENT, newValue)\n  emit(INPUT_EVENT, newValue)\n  emit('select', getOriginalOption(item)!, mentionCtx.value.prefix)\n\n  const newSelectionEnd =\n    mentionCtx.value.start + newMiddlePart.length + (alreadySeparated ? 1 : 0)\n\n  nextTick(() => {\n    // input value is updated\n    inputEl.selectionStart = newSelectionEnd\n    inputEl.selectionEnd = newSelectionEnd\n    inputEl.focus()\n    syncDropdownVisible()\n  })\n}\n\nconst getInputEl = () =>\n  props.type === 'textarea'\n    ? elInputRef.value?.textarea\n    : elInputRef.value?.input\n\nconst syncAfterCursorMove = () => {\n  // can't use nextTick(), get cursor position will be wrong\n  setTimeout(() => {\n    syncCursor()\n    syncDropdownVisible()\n    nextTick(() => tooltipRef.value?.updatePopper())\n  }, 0)\n}\n\nconst syncCursor = () => {\n  const inputEl = getInputEl()\n  if (!inputEl) return\n\n  const caretPosition = getCursorPosition(inputEl)\n  const inputRect = inputEl.getBoundingClientRect()\n  const wrapperRect = wrapperRef.value!.getBoundingClientRect()\n\n  cursorStyle.value = {\n    position: 'absolute',\n    width: 0,\n    height: `${caretPosition.height}px`,\n    left: `${caretPosition.left + inputRect.left - wrapperRect.left}px`,\n    top: `${caretPosition.top + inputRect.top - wrapperRect.top}px`,\n  }\n}\n\nconst syncDropdownVisible = () => {\n  const inputEl = getInputEl()\n  if (document.activeElement !== inputEl) {\n    visible.value = false\n    return\n  }\n  const { prefix, split } = props\n  mentionCtx.value = getMentionCtx(inputEl, prefix, split)\n  if (mentionCtx.value && mentionCtx.value.splitIndex === -1) {\n    visible.value = true\n    emit('search', mentionCtx.value.pattern, mentionCtx.value.prefix)\n    return\n  }\n  visible.value = false\n}\n\ndefineExpose({\n  input: elInputRef,\n  tooltip: tooltipRef,\n  dropdownVisible,\n})\n</script>\n"],"mappings":""}