iking-template-inset/dist/ikingtemplateinset.es.js

金合前端组件

import { defineComponent as P, ref as v, openBlock as y, createElementBlock as k, normalizeStyle as E, createElementVNode as _, Fragment as L, renderList as H, toDisplayString as S, normalizeClass as M } from "vue";
const O = { class: "left" }, C = ["onClick"], I = ["innerHTML"], V = /* @__PURE__ */ P({
  __name: "iking-template-inset",
  props: {
    template: {
      type: String,
      default: ""
    },
    list: {
      type: Array,
      default: () => []
    },
    paramProps: {
      type: Object,
      default: () => ({
        key: "key",
        name: "name"
      })
    },
    height: {
      type: String,
      default: 300
    },
    tagStyle: {
      type: String,
      default: "color: var(--ik-pagin-text-color, #464646);background:var(--ik-border-color, #029EF7);border-radius:5px;padding:8px 0;margin:0 4px;user-select: none;"
    },
    validError: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["change"],
  setup(a, { expose: d, emit: u }) {
    const r = a, l = v(""), m = v(""), i = v(0), b = /\$\{(.*?)\}/g, f = /<span.*?>【.+?\((.*?)\)】<\/span>/g, $ = r.tagStyle;
    ((n) => {
      const e = n ? n.replace(
        b,
        (t, c, g) => {
          const o = r.list.find(
            (s) => s[r.paramProps.key] == c
          );
          return o ? `<span contenteditable="false" style="${$}">\u3010${o[r.paramProps.name]}(${c})\u3011</span>` : t;
        }
      ) : "";
      l.value = e;
    })(r.template);
    const x = (n) => {
      if (i.value === -1)
        return;
      const e = `<span contenteditable="false" style="${$}">\u3010${n[r.paramProps.name]}(${n[r.paramProps.key]})\u3011</span>`;
      l.value = m.value.slice(0, i.value) + e + m.value.slice(i.value), u("change", l.value.replace(f, "$${$1}"));
    }, T = (n) => n.split(/(<span.*?>.*?<\/span>)/).filter((e) => e !== ""), h = async (n) => {
      setTimeout(() => {
        var c, g;
        m.value = n.target.innerHTML, u("change", m.value.replace(f, "$${$1}"));
        const e = window.getSelection();
        if (n.target.tagName === "SPAN") {
          i.value = -1;
          return;
        }
        const t = e == null ? void 0 : e.baseNode;
        if (t != null && t.data) {
          if (t != null && t.previousSibling) {
            const o = t.previousSibling.outerHTML, s = `${o}${(c = e == null ? void 0 : e.baseNode) == null ? void 0 : c.nodeValue}`, p = n.target.innerHTML.indexOf(s);
            if (p !== -1) {
              i.value = p + (e == null ? void 0 : e.baseOffset) + o.length;
              return;
            }
          } else if (t != null && t.nextSibling) {
            const o = t.nextSibling.outerHTML, s = `${(g = e == null ? void 0 : e.baseNode) == null ? void 0 : g.nodeValue}${o}`, p = n.target.innerHTML.indexOf(s);
            if (p !== -1) {
              i.value = (e == null ? void 0 : e.baseOffset) + p;
              return;
            }
          }
        } else {
          i.value = 0;
          const o = T(n.target.innerHTML);
          let s = 0;
          for (; s < e.baseOffset; )
            i.value += o[s].length, s++;
          return n.keyCode === 8, void 0;
        }
        i.value = e == null ? void 0 : e.baseOffset;
      }, 100);
    };
    return d({
      clearValue: () => {
        l.value = "";
      },
      template: l.value,
      value: l.value.replace(f, "$${$1}")
    }), (n, e) => (y(), k("div", {
      class: "ik-template-inset container",
      style: E({ height: `${a.height}px` })
    }, [
      _("div", O, [
        (y(!0), k(L, null, H(a.list, (t) => (y(), k("span", {
          onClick: (c) => x(t),
          key: t[a.paramProps.key]
        }, S(t[a.paramProps.name]) + "(" + S(t[a.paramProps.key]) + ")", 9, C))), 128))
      ]),
      _("div", {
        class: M(["right", { "is-error": a.validError }]),
        id: "iking-edit-msg-template",
        innerHTML: l.value,
        contenteditable: "",
        onKeydown: h,
        onClick: h
      }, null, 42, I)
    ], 4));
  }
});
const w = (a, d) => {
  const u = a.__vccOpts || a;
  for (const [r, l] of d)
    u[r] = l;
  return u;
}, B = /* @__PURE__ */ w(V, [["__scopeId", "data-v-d26591eb"]]), F = (a) => {
  a.component("IkingTemplateInset", B);
};
export {
  B as default,
  F as install
};