vue-admin-core/es/components/msg-editor/src/Popper.mjs

A Component Library for Vue 3

import { defineComponent, ref, watch, nextTick, onMounted, onUnmounted, createVNode, mergeProps } from 'vue';
import { getPrefixCls } from '../../../utils/const.mjs';
import emitter from './mitt.mjs';
import { useScroll, useElementHover } from '@vueuse/core';

const prefixCls = getPrefixCls("msg-editor");
var Popper = defineComponent({
  name: "MsgEditorPopper",
  props: {
    visible: {
      type: Boolean
    },
    position: {
      type: Object
    },
    options: {
      type: Array,
      default: () => []
    },
    editor: {
      type: Object
    },
    value: {
      type: String
    }
  },
  setup(props, {
    attrs,
    expose
  }) {
    const floating = ref();
    const arrowElement = ref();
    const hoverItem = ref();
    const selectValue = ref();
    const popperList = ref(null);
    const {
      y
    } = useScroll(popperList);
    const isHovered = useElementHover(popperList);
    watch(() => [props.position, props.visible], () => {
      if (!floating.value)
        return;
      if (props.visible && props.position) {
        Object.assign(floating.value.style, {
          left: `${props.position.value.left - (props.position.value.isRight ? 10 : 20)}px`,
          top: `${props.position.value.top}px`,
          display: "block"
        });
        hoverItem.value = props.options[0];
      } else {
        Object.assign(floating.value.style, {
          display: "none"
        });
      }
    }, {
      deep: true,
      immediate: true
    });
    watch(() => props.value, (value) => {
      selectValue.value = value;
    });
    const select = () => {
      if (!props.editor || !hoverItem.value)
        return;
      props.editor.restoreSelection();
      props.editor.deleteBackward("character");
      const variableNode = {
        type: "variable",
        value: hoverItem.value.value,
        label: hoverItem.value.label,
        children: [{
          text: ""
        }]
      };
      props.editor.insertNode(variableNode);
      props.editor.move(1);
    };
    const handleClick = (e, item) => {
      hoverItem.value = item;
      nextTick(() => {
        select();
      });
    };
    onMounted(() => {
      emitter.on("ArrowDown", () => {
        if (hoverItem.value) {
          let index = props.options.findIndex((item) => item.value === hoverItem.value.value);
          if (index === props.options.length - 1) {
            index = -1;
          }
          hoverItem.value = props.options[index + 1];
        }
      });
      emitter.on("ArrowUp", () => {
        if (hoverItem.value) {
          let index = props.options.findIndex((item) => item.value === hoverItem.value.value);
          if (index === 0) {
            index = props.options.length;
          }
          hoverItem.value = props.options[index - 1];
        }
      });
      emitter.on("Enter", () => {
        select();
      });
    });
    onUnmounted(() => {
      emitter.all.clear();
    });
    expose({
      setValue: (value) => {
        if (value) {
          hoverItem.value = value;
        }
      },
      target: floating
    });
    watch(() => hoverItem.value, async () => {
      var _a;
      if (isHovered.value)
        return;
      await nextTick();
      const el = (_a = popperList.value) == null ? void 0 : _a.querySelector(".is-hovering");
      y.value = el == null ? void 0 : el.offsetTop;
    });
    watch(() => selectValue.value, async (value) => {
      var _a;
      if (isHovered.value || !value)
        return;
      await nextTick();
      const el = (_a = popperList.value) == null ? void 0 : _a.querySelector(".is-selected");
      y.value = el == null ? void 0 : el.offsetTop;
    });
    return () => {
      return createVNode("div", mergeProps(attrs, {
        "ref": floating
      }), [createVNode("div", {
        "ref": popperList,
        "class": `${prefixCls}__popper__list`
      }, [props.options.map((item) => {
        var _a;
        return createVNode("div", {
          "class": [`${prefixCls}__popper__item`, {
            "is-hovering": ((_a = hoverItem.value) == null ? void 0 : _a.value) === item.value
          }, {
            "is-selected": selectValue.value === item.value
          }],
          "onMouseenter": () => hoverItem.value = item,
          "onClick": (e) => handleClick(e, item)
        }, [item.label]);
      })]), createVNode("div", {
        "class": `${prefixCls}__arrow`,
        "ref": arrowElement
      }, null)]);
    };
  }
});

export { Popper as default };
//# sourceMappingURL=Popper.mjs.map