@farris/ui-vue/components/tags/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { withInstall as Ae } from "../common/index.esm.js";
import { ref as d, defineComponent as me, computed as N, watch as W, nextTick as ce, createVNode as T, inject as Se, onMounted as Oe } from "vue";
import { isPlainObject as ve, cloneDeep as he } from "lodash-es";
function je(t, e, p) {
  return e;
}
const ye = {}, be = {};
function ue(t) {
  const { properties: e, title: p, ignore: c } = t, a = c && Array.isArray(c), m = Object.keys(e).reduce((h, w) => ((!a || !c.find((j) => j === w)) && (h[w] = e[w].type === "object" && e[w].properties ? ue(e[w]) : he(e[w].default)), h), {});
  if (p && (!a || !c.find((h) => h === "id"))) {
    const h = p.toLowerCase().replace(/-/g, "_");
    m.id = `${h}_${Math.random().toString().slice(2, 6)}`;
  }
  return m;
}
function Ce(t) {
  const { properties: e, title: p, required: c } = t;
  if (c && Array.isArray(c)) {
    const a = c.reduce((m, h) => (m[h] = e[h].type === "object" && e[h].properties ? ue(e[h]) : he(e[h].default), m), {});
    if (p && c.find((m) => m === "id")) {
      const m = p.toLowerCase().replace(/-/g, "_");
      a.id = `${m}_${Math.random().toString().slice(2, 6)}`;
    }
    return a;
  }
  return {
    type: p
  };
}
function Te(t, e = {}, p) {
  const c = ye[t];
  if (c) {
    let a = Ce(c);
    const m = be[t];
    return a = m ? m({ getSchemaByType: Te }, a, e, p) : a, a;
  }
  return null;
}
function Me(t, e) {
  const p = ue(e);
  return Object.keys(p).reduce((c, a) => (Object.prototype.hasOwnProperty.call(t, a) && (c[a] && ve(c[a]) && ve(t[a] || !t[a]) ? Object.assign(c[a], t[a] || {}) : c[a] = t[a]), c), p), p;
}
function ke(t, e) {
  return Object.keys(t).filter((c) => t[c] != null).reduce((c, a) => {
    if (e.has(a)) {
      const m = e.get(a);
      if (typeof m == "string")
        c[m] = t[a];
      else {
        const h = m(a, t[a], t);
        Object.assign(c, h);
      }
    } else
      c[a] = t[a];
    return c;
  }, {});
}
function Pe(t, e, p = /* @__PURE__ */ new Map()) {
  const c = Me(t, e);
  return ke(c, p);
}
function Ee(t = {}) {
  function e(i, v, u, g) {
    if (typeof u == "number")
      return g[i].length === u;
    if (typeof u == "object") {
      const k = Object.keys(u)[0], D = u[k];
      if (k === "not")
        return Number(g[i].length) !== Number(D);
      if (k === "moreThan")
        return Number(g[i].length) >= Number(D);
      if (k === "lessThan")
        return Number(g[i].length) <= Number(D);
    }
    return !1;
  }
  function p(i, v, u, g) {
    return g[i] && g[i].propertyValue && String(g[i].propertyValue.value) === String(u);
  }
  const c = /* @__PURE__ */ new Map([
    ["length", e],
    ["getProperty", p]
  ]);
  Object.keys(t).reduce((i, v) => (i.set(v, t[v]), i), c);
  function a(i, v) {
    const u = i;
    return typeof v == "number" ? [{ target: u, operator: "length", param: null, value: Number(v) }] : typeof v == "boolean" ? [{ target: u, operator: "getProperty", param: i, value: !!v }] : typeof v == "object" ? Object.keys(v).map((g) => {
      if (g === "length")
        return { target: u, operator: "length", param: null, value: v[g] };
      const k = g, D = v[g];
      return { target: u, operator: "getProperty", param: k, value: D };
    }) : [];
  }
  function m(i) {
    return Object.keys(i).reduce((u, g) => {
      const k = a(g, i[g]);
      return u.push(...k), u;
    }, []);
  }
  function h(i, v) {
    if (c.has(i.operator)) {
      const u = c.get(i.operator);
      return u && u(i.target, i.param, i.value, v) || !1;
    }
    return !1;
  }
  function w(i, v) {
    return m(i).reduce((k, D) => k && h(D, v), !0);
  }
  function j(i, v) {
    const u = Object.keys(i), g = u.includes("allOf"), k = u.includes("anyOf"), D = g || k, b = (D ? i[D ? g ? "allOf" : "anyOf" : "allOf"] : [i]).map((V) => w(V, v));
    return g ? !b.includes(!1) : b.includes(!0);
  }
  return { parseValueSchema: j };
}
const Re = {}, Le = {};
Ee();
function Ne(t, e, p = /* @__PURE__ */ new Map(), c = (h, w, j, i) => w, a = {}, m = (h) => h) {
  return ye[e.title] = e, be[e.title] = c, Re[e.title] = a, Le[e.title] = m, (h = {}, w = !0) => {
    if (!w)
      return ke(h, p);
    const j = Pe(h, e, p), i = Object.keys(t).reduce((v, u) => (v[u] = t[u].default, v), {});
    return Object.assign(i, j);
  };
}
function $e(t, e) {
  return { customClass: e.class, customStyle: e.style };
}
const Ie = /* @__PURE__ */ new Map([
  ["appearance", $e]
]), qe = "tags", Ve = "A Farris Component", Fe = "object", We = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, _e = {
  title: qe,
  description: Ve,
  type: Fe,
  categories: We
}, He = "https://json-schema.org/draft/2020-12/schema", Xe = "https://farris-design.gitee.io/tags.schema.json", ze = "tags", Ge = "A Farris Component", Je = "object", Qe = {
  id: {
    description: "The unique identifier for tags",
    type: "string"
  },
  type: {
    description: "The type string of tags",
    type: "string",
    default: "tags"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  binding: {
    description: "",
    type: "object",
    default: {}
  },
  disable: {
    type: "string",
    default: !1
  },
  editable: {
    description: "",
    type: "boolean",
    default: !0
  },
  placeholder: {
    description: "",
    type: "string",
    default: ""
  },
  readonly: {
    description: "",
    type: "boolean",
    default: !1
  },
  require: {
    description: "",
    type: "boolean",
    default: !1
  },
  tabindex: {
    description: "",
    type: "number",
    default: -1
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  }
}, Ue = [
  "id",
  "type"
], Ye = {
  $schema: He,
  $id: Xe,
  title: ze,
  description: Ge,
  type: Je,
  properties: Qe,
  required: Ue
}, ie = {
  activeTag: { type: String, default: "" },
  addButtonText: { type: String, default: "" },
  customClass: { type: String, default: "" },
  customStyle: { type: String, default: "" },
  data: { type: Array, default: [{ name: "示例1" }] },
  enableAddButton: { type: Boolean, default: !1 },
  selectable: { type: Boolean, default: !1 },
  showAddButton: { type: Boolean, default: !1 },
  showClose: { type: Boolean, default: !0 },
  showColor: { type: Boolean, default: !1 },
  tagType: { type: String, default: "" },
  tagStyle: { type: String, default: "" },
  wrapText: { type: Boolean, default: !1 },
  draggable: { type: Boolean, default: !1 },
  disable: { type: Boolean, default: !1 }
}, we = Ne(ie, Ye, Ie, je, _e);
function Be(t, e, p, c) {
  const a = d(-1), m = d(!1);
  function h(v, u, g) {
    v.stopPropagation(), u && setTimeout(() => {
      a.value = g, m.value = !0, u.moving = !0;
    });
  }
  function w(v, u) {
    if (v.preventDefault(), a.value !== u) {
      const g = c.value[a.value], k = c.value;
      k.splice(a.value, 1), k.splice(u, 0, g), a.value = u;
    }
  }
  function j(v, u) {
    v.preventDefault(), v.dataTransfer && (v.dataTransfer.dropEffect = "move");
  }
  function i(v, u) {
    u && (u.moving = !1), p.value = c.value.filter((g) => g.type === "Tag").map((g) => g.payload), m.value = !1, e.emit("change", p.value);
  }
  return {
    dragstart: h,
    dragenter: w,
    dragover: j,
    dragend: i,
    isDragging: m
  };
}
const J = /* @__PURE__ */ me({
  name: "FTags",
  props: ie,
  emits: ["remove", "selectionChange", "change"],
  setup(t, e) {
    const p = d(t.selectable), c = d(t.customClass), a = d(t.data), m = d(t.tagType), h = d(t.tagStyle), w = d(t.showColor), j = d(t.customStyle), i = d(t.activeTag), v = d(t.showClose), u = d(t.addButtonText), g = d(), k = d(t.wrapText), D = d();
    d(t.disable);
    const A = d(!1);
    function E() {
      const r = a.value.map((s) => ({
        type: "Tag",
        payload: s
      }));
      return t.showAddButton && r.push({
        type: "AddButton"
      }), r;
    }
    const b = d(E());
    function I(r) {
      a.value = r, b.value = E();
    }
    const V = N(() => b.value.findIndex((r) => r.type === "Input")), F = Be(t, e, a, b), {
      dragstart: q,
      dragenter: M,
      dragover: y,
      dragend: S
    } = F;
    W(() => t.data, (r) => I(r)), W(() => t.showAddButton, () => {
      b.value = E();
    }), W(() => t.disable, (r) => {
      b.value = E();
    }), W(() => t.activeTag, (r) => {
      i.value = r;
    }), W(A, (r) => {
      const s = [...b.value];
      r ? s.length > 0 && s[s.length - 1].type !== "Input" && (s.splice(s.length - 1, 1), s.splice(s.length, 0, {
        type: "Input"
      }), b.value = s, ce(() => {
        var f;
        D.value && ((f = D.value) == null || f.focus());
      })) : s.length > 0 && s[s.length - 1].type !== "AddButton" && (s.splice(s.length - 1, 1), s.splice(s.length, 0, {
        type: "AddButton"
      }), b.value = s);
    });
    const B = N(() => {
      const r = {
        "farris-tags": !0,
        "farris-tags-checkable": p.value,
        "farris-tags-nowrap": !k.value
      };
      return c.value.split(" ").reduce((s, f) => (s[f] = !0, s), r), r;
    });
    function O(r) {
      const s = {
        "farris-tag-item": !0,
        "farris-tag-item-checked": p.value && r.checked,
        "farris-tag-item-checkable": p.value,
        "farris-tag-item-has-color": w.value,
        "farris-tag-item-actived": i.value === r.name
      };
      if (m.value) {
        const f = `farris-tag-item-${m.value}`;
        s[f] = !0;
      }
      return s;
    }
    const R = N(() => {
      const r = {};
      return j.value && j.value.split(";").reduce((s, f) => {
        const P = f.split(":");
        return s[P[0]] = P[1], s;
      }, r), r;
    });
    function Q(r, s) {
      !t.disable && p.value && (!s.hasOwnProperty("selectable") || s.selectable) && (s.checked = !s.checked, i.value = s.checked ? s.name : "", s.checked && a.value.filter((f) => f.name !== s.name).forEach((f) => {
        f.checked = !s.checked;
      }), e.emit("change", a.value), e.emit("selectionChange", s));
    }
    function U(r, s) {
      let f;
      switch (r.key) {
        case "Backspace":
          a.value = a.value.filter((P) => P.name !== s.name), e.emit("change", a.value);
          break;
        case "ArrowLeft":
          f = Math.max(g.value.scrollLeft + 20, 0), g.value.scrollLeft = f;
          break;
        case "ArrowRight":
          f = Math.max(g.value.scrollLeft - 20, 0), g.value.scrollLeft = f;
      }
    }
    function Y(r, s) {
      const f = a.value.findIndex((P) => P.name === s.name);
      if (f > -1) {
        const [P] = a.value.splice(f, 1);
        b.value = E(), e.emit("change", a.value), e.emit("remove", {
          tags: a.value,
          remove: P
        });
      }
      r.stopPropagation();
    }
    const Z = N(() => ({
      "farris-tag-item": !0,
      "farris-tag-add-button": !0,
      "farris-tag-add-button-disabled": !t.enableAddButton
    }));
    function x(r) {
      r.stopPropagation(), A.value = !0;
    }
    function K() {
      return !t.disable && T("li", {
        class: Z.value,
        onClick: (r) => x(r)
      }, [T("span", {
        class: "f-icon f-icon-amplification"
      }, null), u.value && T("span", {
        class: "farris-tag-add-text"
      }, [u.value])]);
    }
    function _(r, s, f) {
      r > -1 && (a.value.splice(r, 0, {
        name: s,
        value: f,
        selectable: p.value
      }), b.value = E(), A.value = !1, e.emit("change", a.value));
    }
    function H(r) {
      if (r && r.value) {
        const s = r.value, f = V.value;
        _(f, s, s), r.innerText = "";
      } else
        A.value = !1;
    }
    function ee(r) {
      const s = r.target;
      s && s.value ? H(s) : A.value = !1;
    }
    function fe(r) {
      r.key === "Enter" && H(r.target);
    }
    function te() {
      return !t.disable && T("li", {
        class: "farris-tag-input-box"
      }, [T("input", {
        title: "farris-tag-input-box",
        ref: D,
        class: "form-control",
        onKeyup: fe,
        onBlur: ee
      }, null)]);
    }
    function ae(r, s) {
      return T("li", {
        class: O(r),
        style: R.value,
        tabindex: 0,
        id: r.name,
        key: r.name,
        onClick: (f) => Q(f, r),
        onKeydown: (f) => U(f, r),
        draggable: "true",
        onDragstart: (f) => q(f, r, s),
        onDragenter: (f) => M(f, s),
        onDragend: (f) => S(f, r),
        onDragover: (f) => y(f, s)
      }, [T("span", {
        title: r.name,
        class: "tag-box"
      }, [r.name]), !t.disable && v.value && T("span", {
        class: "tag-delete"
      }, [T("i", {
        class: "f-icon f-icon-close",
        onClick: (f) => Y(f, r)
      }, null)])]);
    }
    function X() {
      return b.value.map((r, s) => {
        switch (r.type) {
          case "Tag":
            return ae(r.payload, s);
          case "AddButton":
            return K();
          case "Input":
            return te();
        }
      });
    }
    const z = N(() => ({
      "farris-tags-item-container": !0,
      "farris-tag-item-capsule": h.value === "capsule"
    }));
    function ne(r) {
      const s = Math.max(g.value.scrollLeft - r.deltaX, 0);
      g.value.scrollLeft = s;
    }
    function re(r) {
      var f;
      r.preventDefault(), r.stopPropagation();
      const s = (f = r.dataTransfer) == null ? void 0 : f.getData("Text");
      if (s) {
        const P = s.split(":"), le = P[0], G = P[1];
        [...a.value].findIndex((n) => n.value === G) > -1 || _(a.value.length, le, G);
      }
    }
    function se(r) {
      r.preventDefault();
    }
    return () => T("div", {
      class: B.value,
      onDrop: re,
      onDragover: se
    }, [T("ul", {
      ref: g,
      class: z.value,
      onWheel: (r) => ne(r)
    }, [X()])]);
  }
});
function Ze(t, e, p) {
  var M;
  const c = "", a = "", m = d();
  function h() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function w() {
    return !1;
  }
  function j() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function i() {
    return (e == null ? void 0 : e.schema.componentType) === "frame";
  }
  function v(y) {
    if (!y || !y.value)
      return null;
    if (y.value.schema && y.value.schema.type === "component")
      return y.value;
    const S = d(y == null ? void 0 : y.value.parent), B = v(S);
    return B || null;
  }
  function u(y = e) {
    var R;
    const { componentInstance: S, designerItemElementRef: B } = y;
    if (!S || !S.value)
      return null;
    const { getCustomButtons: O } = S.value;
    return S.value.canMove || O && ((R = O()) != null && R.length) ? B : u(y.parent);
  }
  function g(y) {
    return !!p;
  }
  function k() {
    return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
  }
  function D() {
  }
  function A(y, S) {
    var B;
    !y || !S || (B = e == null ? void 0 : e.setupContext) == null || B.emit("dragEnd");
  }
  function E(y, S) {
    const { componentType: B } = y;
    let O = Te(B, y, S);
    const R = B.toLowerCase().replace(/-/g, "_");
    return O && !O.id && O.type === B && (O.id = `${R}_${Math.random().toString().slice(2, 6)}`), O;
  }
  function b(y) {
  }
  function I(...y) {
  }
  function V() {
    e != null && e.schema.contents && e.schema.contents.map((y) => {
      let S = y.id;
      y.type === "component-ref" && (S = y.component);
      const B = t.value.querySelectorAll(`#${S}-design-item`);
      B != null && B.length && Array.from(B).map((O) => {
        var R;
        (R = O == null ? void 0 : O.componentInstance) != null && R.value.onRemoveComponent && O.componentInstance.value.onRemoveComponent();
      });
    });
  }
  function F() {
  }
  function q(y) {
  }
  return m.value = {
    canMove: h(),
    canSelectParent: w(),
    canDelete: j(),
    canNested: !i(),
    contents: e == null ? void 0 : e.schema.contents,
    elementRef: t,
    parent: (M = e == null ? void 0 : e.parent) == null ? void 0 : M.componentInstance,
    schema: e == null ? void 0 : e.schema,
    styles: c,
    designerClass: a,
    canAccepts: g,
    getBelongedComponentInstance: v,
    getDraggableDesignItemElement: u,
    getDraggingDisplayText: k,
    getPropConfig: I,
    getDragScopeElement: D,
    onAcceptMovedChildElement: A,
    onChildElementMovedOut: b,
    addNewChildComponentSchema: E,
    triggerBelongedComponentToMoveWhenMoved: d(!1),
    triggerBelongedComponentToDeleteWhenDeleted: d(!1),
    onRemoveComponent: V,
    getCustomButtons: F,
    onPropertyChanged: q
  }, m;
}
const xe = /* @__PURE__ */ me({
  name: "FTagsDesign",
  props: ie,
  emits: ["remove", "selectionChange", "change"],
  setup(t, e) {
    const p = d(t.selectable), c = d(t.customClass), a = d(t.data), m = d(t.tagType), h = d(t.tagStyle), w = d(t.showColor), j = d(t.activeTag), i = d(t.customStyle), v = d(t.showClose), u = d(t.showAddButton), g = d(t.showInput), k = d(t.addButtonText), D = d(t.enableAddButton);
    d(t.placeholder), d(""), d();
    const A = d(), E = d(t.wrapText), b = d(), I = d(), V = Se("design-item-context"), F = Ze(I, V);
    Oe(() => {
      I.value.componentInstance = F;
    }), e.expose(F.value);
    function q() {
      const n = a.value.map((l) => ({
        type: "Tag",
        payload: l
      }));
      return u.value && n.push({
        type: "AddButton"
      }), n;
    }
    const M = d(q());
    function y(n) {
      a.value = n, M.value = q();
    }
    const S = N(() => M.value.findIndex((n) => n.type === "Input")), B = Be(t, e, a, M), {
      dragstart: O,
      dragenter: R,
      dragover: Q,
      dragend: U
    } = B;
    W(() => t.data, (n) => y(n));
    const Y = N(() => {
      const n = {
        "farris-tags": !0,
        "farris-tags-checkable": p.value,
        "farris-tags-nowrap": !E.value
      };
      return c.value.split(" ").reduce((l, o) => (l[o] = !0, l), n), n;
    });
    function Z(n) {
      const l = {
        "farris-tag-item": !0,
        "farris-tag-item-checked": p.value && n.checked,
        "farris-tag-item-checkable": p.value,
        "farris-tag-item-has-color": w.value,
        "farris-tag-item-actived": j.value === n.name
      };
      if (m.value) {
        const o = `farris-tag-item-${m.value}`;
        l[o] = !0;
      }
      return l;
    }
    const x = N(() => {
      const n = {};
      return i.value && i.value.split(";").reduce((l, o) => {
        const C = o.split(":");
        return l[C[0]] = C[1], l;
      }, n), n;
    });
    function K(n, l) {
      p.value && l.selectable && (l.checked = !l.checked, j.value = l.checked ? l.name : "", l.checked && a.value.filter((o) => o.name !== l.name).forEach((o) => {
        o.checked = !l.checked;
      }), e.emit("change", a.value), e.emit("selectionChange", l));
    }
    function _(n, l) {
      let o;
      switch (n.key) {
        case "Backspace":
          a.value = a.value.filter((C) => C.name !== l.name), e.emit("change", a.value);
          break;
        case "ArrowLeft":
          o = Math.max(A.value.scrollLeft + 20, 0), A.value.scrollLeft = o;
          break;
        case "ArrowRight":
          o = Math.max(A.value.scrollLeft - 20, 0), A.value.scrollLeft = o;
      }
    }
    function H(n, l) {
      const o = a.value.findIndex((C) => C.name === l.name);
      if (o > -1) {
        const [C] = a.value.splice(o, 1);
        M.value = q(), e.emit("change", a.value), e.emit("remove", a.value, C, o);
      }
      n.stopPropagation();
    }
    const ee = N(() => ({
      "farris-tag-item": !0,
      "farris-tag-add-button": !0,
      "farris-tag-add-button-disabled": !D.value
    }));
    function fe(n) {
    }
    function te() {
      return T("li", {
        class: ee.value,
        onClick: (n) => void 0
      }, [T("span", {
        class: "f-icon f-icon-amplification"
      }, null), T("span", {
        class: "farris-tag-add-text"
      }, [k.value])]);
    }
    function ae(n) {
      if (n && !n.innerText) {
        const l = S.value;
        if (l > 0) {
          const [o] = a.value.splice(l - 1, 1);
          M.value.splice(l - 1, 1), e.emit("remove", a.value, o, l - 1);
        }
      }
    }
    function X(n, l, o) {
      n > -1 && (a.value.splice(n, 0, {
        name: l,
        value: o,
        selectable: p.value
      }), M.value = q(), e.emit("change", a.value));
    }
    function z(n) {
      if (n && n.innerText) {
        const l = n.innerText, o = S.value;
        X(o, l, l), n.innerText = "";
      }
    }
    function ne(n) {
      const l = n.target;
      l && (l.innerText ? z(l) : e.emit("change", a.value));
    }
    function re(n) {
      n.key === "Enter" && z(n.target), n.key === "Backspace" && (ae(n.target), ce(() => {
        var l;
        b.value && ((l = b.value) == null || l.focus());
      }));
    }
    function se() {
      return T("li", {
        class: "farris-tag-input-box"
      }, [T("div", {
        ref: b,
        class: "form-control",
        contenteditable: "true",
        onKeyup: re,
        onBlur: ne
      }, null)]);
    }
    function r(n, l) {
      return T("li", {
        class: Z(n),
        style: x.value,
        tabindex: 0,
        id: n.name,
        key: n.name,
        onClick: (o) => K(o, n),
        onKeydown: (o) => _(o, n),
        draggable: "true",
        onDragstart: (o) => O(o, n, l),
        onDragenter: (o) => R(o, l),
        onDragend: (o) => U(o, n),
        onDragover: (o) => Q(o, l)
      }, [T("div", {
        title: n.name,
        class: "tag-box"
      }, [n.name]), v.value && T("span", {
        class: "tag-delete"
      }, [T("i", {
        class: "f-icon f-icon-close",
        onClick: (o) => H(o, n)
      }, null)])]);
    }
    function s() {
      return M.value.map((n, l) => {
        switch (n.type) {
          case "Tag":
            return r(n.payload, l);
          case "AddButton":
            return te();
          case "Input":
            return se();
        }
      });
    }
    const f = N(() => ({
      "farris-tags-item-container": !0,
      "farris-tag-item-capsule": h.value === "capsule"
    }));
    function P(n) {
      const l = Math.max(A.value.scrollLeft - n.deltaX, 0);
      A.value.scrollLeft = l;
    }
    function le(n) {
      const l = A.value, o = a.value.length - 1;
      if (l) {
        const C = Array.from(l.children).filter(($) => $.className.indexOf("farris-tag-item") > -1).findIndex(($) => {
          const L = $.getBoundingClientRect(), oe = window.getComputedStyle($), pe = parseInt(oe["margin-left"], 10) + L.width + parseInt(oe["margin-right"], 10);
          return L.left + pe > n;
        });
        if (C > -1)
          return C;
      }
      return o;
    }
    function G(n) {
      if (g.value) {
        const o = le(n.clientX) + 1, $ = M.value.filter((L) => L.type !== "Input");
        $.splice(o, 0, {
          type: "Input"
        }), M.value = $, ce(() => {
          var L;
          b.value && ((L = b.value) == null || L.focus());
        });
      }
    }
    function de(n) {
      var o;
      n.preventDefault(), n.stopPropagation();
      const l = (o = n.dataTransfer) == null ? void 0 : o.getData("Text");
      if (l) {
        const C = l.split(":"), $ = C[0], L = C[1];
        [...a.value].findIndex((De) => De.value === L) > -1 || X(a.value.length, $, L);
      }
    }
    function ge(n) {
      n.preventDefault();
    }
    return () => T("div", {
      ref: I,
      class: Y.value,
      onClick: G,
      onDrop: de,
      onDragover: ge
    }, [T("ul", {
      ref: A,
      class: f.value,
      onWheel: (n) => P(n)
    }, [s()])]);
  }
});
J.register = (t, e, p, c) => {
  t.tags = J, e.tags = we;
};
J.registerDesigner = (t, e, p) => {
  t.tags = xe, e.tags = we;
};
const at = Ae(J);
export {
  J as FTags,
  at as default,
  we as propsResolver,
  ie as tagsProps
};