AI-TALK-web/node_modules/element-plus/es/components/mention/src/mention-dropdown.mjs

import { defineComponent, ref, computed, watch, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createCommentVNode, withDirectives, createVNode, withCtx, Fragment, renderList, withModifiers, createElementVNode, toDisplayString, vShow, createTextVNode, nextTick } from 'vue';
import { ElScrollbar } from '../../scrollbar/index.mjs';
import { mentionDropdownProps, mentionDropdownEmits } from './mention-dropdown2.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useLocale } from '../../../hooks/use-locale/index.mjs';
import { scrollIntoView } from '../../../utils/dom/scroll.mjs';

const _hoisted_1 = ["id", "aria-disabled", "aria-selected", "onMousemove", "onClick"];
const _sfc_main = defineComponent({
  ...{
    name: "ElMentionDropdown"
  },
  __name: "mention-dropdown",
  props: mentionDropdownProps,
  emits: mentionDropdownEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const ns = useNamespace("mention");
    const { t } = useLocale();
    const hoveringIndex = ref(-1);
    const scrollbarRef = ref();
    const optionRefs = ref();
    const dropdownRef = ref();
    const optionkls = (item, index) => [
      ns.be("dropdown", "item"),
      ns.is("hovering", hoveringIndex.value === index),
      ns.is("disabled", item.disabled || props.disabled)
    ];
    const handleSelect = (item) => {
      if (item.disabled || props.disabled)
        return;
      emit("select", item);
    };
    const handleMouseEnter = (index) => {
      hoveringIndex.value = index;
    };
    const filteredAllDisabled = computed(
      () => props.disabled || props.options.every((item) => item.disabled)
    );
    const hoverOption = computed(() => props.options[hoveringIndex.value]);
    const selectHoverOption = () => {
      if (!hoverOption.value)
        return;
      emit("select", hoverOption.value);
    };
    const navigateOptions = (direction) => {
      const { options } = props;
      if (options.length === 0 || filteredAllDisabled.value)
        return;
      if (direction === "next") {
        hoveringIndex.value++;
        if (hoveringIndex.value === options.length) {
          hoveringIndex.value = 0;
        }
      } else if (direction === "prev") {
        hoveringIndex.value--;
        if (hoveringIndex.value < 0) {
          hoveringIndex.value = options.length - 1;
        }
      }
      const option = options[hoveringIndex.value];
      if (option.disabled) {
        navigateOptions(direction);
        return;
      }
      nextTick(() => scrollToOption(option));
    };
    const scrollToOption = (option) => {
      var _a, _b, _c, _d;
      const { options } = props;
      const index = options.findIndex((item) => item.value === option.value);
      const target = (_a = optionRefs.value) == null ? void 0 : _a[index];
      if (target) {
        const menu = (_c = (_b = dropdownRef.value) == null ? void 0 : _b.querySelector) == null ? void 0 : _c.call(
          _b,
          `.${ns.be("dropdown", "wrap")}`
        );
        if (menu) {
          scrollIntoView(menu, target);
        }
      }
      (_d = scrollbarRef.value) == null ? void 0 : _d.handleScroll();
    };
    const resetHoveringIndex = () => {
      if (filteredAllDisabled.value || props.options.length === 0) {
        hoveringIndex.value = -1;
      } else {
        hoveringIndex.value = 0;
      }
    };
    watch(() => props.options, resetHoveringIndex, {
      immediate: true
    });
    __expose({
      hoveringIndex,
      navigateOptions,
      selectHoverOption,
      hoverOption
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          ref_key: "dropdownRef",
          ref: dropdownRef,
          class: normalizeClass(unref(ns).b("dropdown"))
        },
        [
          _ctx.$slots.header ? (openBlock(), createElementBlock(
            "div",
            {
              key: 0,
              class: normalizeClass(unref(ns).be("dropdown", "header"))
            },
            [
              renderSlot(_ctx.$slots, "header")
            ],
            2
          )) : createCommentVNode("v-if", true),
          withDirectives(createVNode(unref(ElScrollbar), {
            id: _ctx.contentId,
            ref_key: "scrollbarRef",
            ref: scrollbarRef,
            tag: "ul",
            "wrap-class": unref(ns).be("dropdown", "wrap"),
            "view-class": unref(ns).be("dropdown", "list"),
            role: "listbox",
            "aria-label": _ctx.ariaLabel,
            "aria-orientation": "vertical"
          }, {
            default: withCtx(() => [
              (openBlock(true), createElementBlock(
                Fragment,
                null,
                renderList(_ctx.options, (item, index) => {
                  return openBlock(), createElementBlock("li", {
                    id: `${_ctx.contentId}-${index}`,
                    ref_for: true,
                    ref_key: "optionRefs",
                    ref: optionRefs,
                    key: index,
                    class: normalizeClass(optionkls(item, index)),
                    role: "option",
                    "aria-disabled": item.disabled || _ctx.disabled || void 0,
                    "aria-selected": hoveringIndex.value === index,
                    onMousemove: ($event) => handleMouseEnter(index),
                    onClick: withModifiers(($event) => handleSelect(item), ["stop"])
                  }, [
                    renderSlot(_ctx.$slots, "label", {
                      item,
                      index
                    }, () => {
                      var _a;
                      return [
                        createElementVNode(
                          "span",
                          null,
                          toDisplayString((_a = item.label) != null ? _a : item.value),
                          1
                        )
                      ];
                    })
                  ], 42, _hoisted_1);
                }),
                128
              ))
            ]),
            _: 3
          }, 8, ["id", "wrap-class", "view-class", "aria-label"]), [
            [vShow, _ctx.options.length > 0 && !_ctx.loading]
          ]),
          _ctx.loading ? (openBlock(), createElementBlock(
            "div",
            {
              key: 1,
              class: normalizeClass(unref(ns).be("dropdown", "loading"))
            },
            [
              renderSlot(_ctx.$slots, "loading", {}, () => [
                createTextVNode(
                  toDisplayString(unref(t)("el.mention.loading")),
                  1
                )
              ])
            ],
            2
          )) : createCommentVNode("v-if", true),
          _ctx.$slots.footer ? (openBlock(), createElementBlock(
            "div",
            {
              key: 2,
              class: normalizeClass(unref(ns).be("dropdown", "footer"))
            },
            [
              renderSlot(_ctx.$slots, "footer")
            ],
            2
          )) : createCommentVNode("v-if", true)
        ],
        2
      );
    };
  }
});
var ElMentionDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/mention/src/mention-dropdown.vue"]]);

export { ElMentionDropdown as default };
//# sourceMappingURL=mention-dropdown.mjs.map