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