vue-admin-core/lib/components/msg-editor/src/Popper.js

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var _const = require('../../../utils/const.js');
var mitt = require('./mitt.js');
var core = require('@vueuse/core');

const prefixCls = _const.getPrefixCls("msg-editor");
var Popper = vue.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 = vue.ref();
    const arrowElement = vue.ref();
    const hoverItem = vue.ref();
    const selectValue = vue.ref();
    const popperList = vue.ref(null);
    const {
      y
    } = core.useScroll(popperList);
    const isHovered = core.useElementHover(popperList);
    vue.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
    });
    vue.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;
      vue.nextTick(() => {
        select();
      });
    };
    vue.onMounted(() => {
      mitt.default.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];
        }
      });
      mitt.default.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];
        }
      });
      mitt.default.on("Enter", () => {
        select();
      });
    });
    vue.onUnmounted(() => {
      mitt.default.all.clear();
    });
    expose({
      setValue: (value) => {
        if (value) {
          hoverItem.value = value;
        }
      },
      target: floating
    });
    vue.watch(() => hoverItem.value, async () => {
      var _a;
      if (isHovered.value)
        return;
      await vue.nextTick();
      const el = (_a = popperList.value) == null ? void 0 : _a.querySelector(".is-hovering");
      y.value = el == null ? void 0 : el.offsetTop;
    });
    vue.watch(() => selectValue.value, async (value) => {
      var _a;
      if (isHovered.value || !value)
        return;
      await vue.nextTick();
      const el = (_a = popperList.value) == null ? void 0 : _a.querySelector(".is-selected");
      y.value = el == null ? void 0 : el.offsetTop;
    });
    return () => {
      return vue.createVNode("div", vue.mergeProps(attrs, {
        "ref": floating
      }), [vue.createVNode("div", {
        "ref": popperList,
        "class": `${prefixCls}__popper__list`
      }, [props.options.map((item) => {
        var _a;
        return vue.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]);
      })]), vue.createVNode("div", {
        "class": `${prefixCls}__arrow`,
        "ref": arrowElement
      }, null)]);
    };
  }
});

exports.default = Popper;
//# sourceMappingURL=Popper.js.map