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

金合前端组件

import { defineComponent as w, ref as y, watch as D, onUnmounted as A, openBlock as k, createElementBlock as b, normalizeStyle as B, createElementVNode as $, Fragment as V, renderList as X, toDisplayString as H, normalizeClass as z } from "vue";
const F = { class: "left" }, G = ["onClick"], K = ["innerHTML"], j = /* @__PURE__ */ w({
  __name: "iking-template-inset",
  props: {
    template: {
      type: String,
      default: ""
    },
    list: {
      type: Array,
      default: () => []
    },
    paramProps: {
      type: Object,
      default: () => ({
        key: "key",
        name: "name"
      })
    },
    height: {
      type: [String, Number],
      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(o, { expose: S, emit: v }) {
    const m = (e) => {
      const t = {
        "&": "&",
        "<": "&lt;",
        ">": "&gt;",
        '"': "&quot;",
        "'": "&#39;"
      };
      return e.replace(/[&<>"']/g, (n) => t[n]);
    }, x = (e, t) => {
      let n = null;
      return (...i) => {
        n && clearTimeout(n), n = setTimeout(() => e(...i), t);
      };
    }, s = o, c = y(""), d = y(""), l = y(0), g = y(null), P = /\$\{(.*?)\}/g, N = /<span[^>]*>【[^】]*?\(([^)]*)\)】<\/span>/g, h = v, _ = (e) => {
      if (!e) {
        c.value = "";
        return;
      }
      const t = e.replace(P, (n, a) => {
        const i = s.list.find(
          (r) => String(r[s.paramProps.key]) === String(a)
        );
        if (i) {
          const r = m(String(i[s.paramProps.name])), p = m(a);
          return `<span contenteditable="false" style="${s.tagStyle}">\u3010${r}(${p})\u3011</span>`;
        }
        return n;
      });
      c.value = t;
    };
    _(s.template), D(
      () => s.template,
      (e) => {
        _(e);
      }
    );
    const T = (e) => e.replace(N, "$${$1}"), L = (e) => {
      if (l.value === -1)
        return;
      const t = m(String(e[s.paramProps.name])), n = m(String(e[s.paramProps.key])), a = `<span contenteditable="false" style="${s.tagStyle}">\u3010${t}(${n})\u3011</span>`;
      c.value = d.value.slice(0, l.value) + a + d.value.slice(l.value), h("change", T(c.value));
    }, M = (e) => e.split(/(<span[^>]*>.*?<\/span>)/).filter((t) => t !== ""), C = (e) => e && e.nodeType === Node.ELEMENT_NODE ? e.outerHTML : "", O = (e) => {
      const t = window.getSelection();
      if (!t || t.rangeCount === 0) {
        l.value = 0;
        return;
      }
      if (e.tagName === "SPAN") {
        l.value = -1;
        return;
      }
      const n = t.getRangeAt(0), a = n.startContainer, i = n.startOffset;
      if (a.nodeType !== Node.TEXT_NODE || !a.textContent) {
        l.value = 0;
        const r = M(e.innerHTML);
        let p = 0;
        for (let u = 0; u < i && u < r.length; u++)
          p += r[u].length;
        l.value = p;
        return;
      }
      if (a.previousSibling) {
        const r = C(a.previousSibling), p = a.textContent, u = r + p, f = e.innerHTML.indexOf(u);
        if (f !== -1) {
          l.value = f + i + r.length;
          return;
        }
      }
      if (a.nextSibling) {
        const r = C(a.nextSibling), u = a.textContent + r, f = e.innerHTML.indexOf(u);
        if (f !== -1) {
          l.value = i + f;
          return;
        }
      }
      l.value = i;
    }, I = x((e) => {
      h("change", e);
    }, 300), E = (e) => {
      const t = e.target;
      g.value && clearTimeout(g.value), g.value = setTimeout(() => {
        d.value = t.innerHTML, I(T(d.value)), O(t);
      }, 50);
    }, R = () => {
      c.value = "", d.value = "";
    };
    return A(() => {
      g.value && clearTimeout(g.value);
    }), S({
      clearValue: R,
      get template() {
        return c.value;
      },
      get value() {
        return T(c.value);
      }
    }), (e, t) => (k(), b("div", {
      class: "ik-template-inset container",
      style: B({ height: `${o.height}px` })
    }, [
      $("div", F, [
        (k(!0), b(V, null, X(o.list, (n) => (k(), b("span", {
          key: String(n[o.paramProps.key]),
          onClick: (a) => L(n)
        }, H(n[o.paramProps.name]) + "(" + H(n[o.paramProps.key]) + ") ", 9, G))), 128))
      ]),
      $("div", {
        ref: "editRef",
        class: z(["right", { "is-error": o.validError }]),
        id: "iking-edit-msg-template",
        innerHTML: c.value,
        contenteditable: "",
        onKeydown: E,
        onClick: E
      }, null, 42, K)
    ], 4));
  }
});
const q = (o, S) => {
  const v = o.__vccOpts || o;
  for (const [m, x] of S)
    v[m] = x;
  return v;
}, U = /* @__PURE__ */ q(j, [["__scopeId", "data-v-b45586d1"]]), J = (o) => {
  o.component("IkingTemplateInset", U);
};
export {
  U as default,
  J as install
};