@farris/ui-vue 1.0.0 → 1.0.1

package/combo-list/index.esm.js

@@ -1,4 +1,4 @@
-import { ref as a, computed as B, watch as W, defineComponent as G, createVNode as p, withDirectives as Q, vModelCheckbox as Me, Fragment as re, withModifiers as Fe, vModelText as Oe, Teleport as de, createApp as Ve, onUnmounted as fe, nextTick as K, vShow as ve, onMounted as ne, mergeProps as Le, inject as De } from "vue";
+import { ref as a, computed as I, watch as W, defineComponent as G, createVNode as p, withDirectives as Q, vModelCheckbox as Me, Fragment as re, withModifiers as Fe, vModelText as Oe, Teleport as de, createApp as Ve, onUnmounted as fe, nextTick as K, vShow as ve, onMounted as ne, mergeProps as Le, inject as De } from "vue";
 const pe = {};
 function oe(e) {
   const { properties: t } = e;
@@ -308,40 +308,40 @@ const ae = {
   disableField: { type: String, default: "disabled" }
 };
 function Ye(e, t, o, l, n) {
-  const i = a(e.idField), u = a(e.disableField), c = a(e.draggable), h = a(e.itemClass), s = a(e.multiSelect), f = a(e.multiSelectMode);
+  const i = a(e.idField), u = a(e.disableField), c = a(e.draggable), h = a(e.itemClass), s = a(e.multiSelect), r = a(e.multiSelectMode);
   a(!0);
-  const { isDragging: r } = o, { activeIndex: d, focusedItemId: b, hoverIndex: m } = l, { clearSelection: v, selectedItems: P, toggleSelectItem: F } = n;
-  function x(C, j) {
+  const { isDragging: d } = o, { activeIndex: f, focusedItemId: C, hoverIndex: m } = l, { clearSelection: y, selectedItems: O, toggleSelectItem: P } = n;
+  function x(w, j) {
     const V = {
       "f-list-view-group-item": !0,
       "f-list-view-draggable-item": c.value,
-      "f-un-click": !!C.unClick,
-      "f-un-select": !!C[u.value],
-      "f-listview-active": C.__fv_index__ === d.value,
-      "f-listview-hover": !r.value && j === m.value,
-      moving: !!C.moving
+      "f-un-click": !!w.unClick,
+      "f-un-select": !!w[u.value],
+      "f-listview-active": w.__fv_index__ === f.value,
+      "f-listview-hover": !d.value && j === m.value,
+      moving: !!w.moving
     };
     return h.value.split(" ").reduce((z, D) => (z[D] = !0, z), V), V;
   }
-  function y(C, j) {
-    return C[i.value] || "";
+  function v(w, j) {
+    return w[i.value] || "";
   }
-  const S = B(() => !s.value);
-  function I(C, j) {
-    C.unClick || C[u.value] || (S.value && (b.value = C[i.value]), F(C, j));
+  const b = I(() => !s.value);
+  function B(w, j) {
+    w.unClick || w[u.value] || (b.value && (C.value = w[i.value]), P(w, j));
   }
-  const k = B(() => s.value && f.value === "OnCheckClearByClick"), E = B(() => !s.value || s.value && (f.value === "OnCheckAndClick" || f.value === "OnClick"));
-  function L(C, j, V) {
+  const k = I(() => s.value && r.value === "OnCheckClearByClick"), E = I(() => !s.value || s.value && (r.value === "OnCheckAndClick" || r.value === "OnClick"));
+  function L(w, j, V) {
     if (j.unClick || j[u.value]) {
-      C.preventDefault(), C.stopPropagation();
+      w.preventDefault(), w.stopPropagation();
       return;
     }
-    b.value = j[i.value], d.value = V, k.value && v(), E.value && F(j, V), t.emit("clickItem", { data: P.value, index: V });
+    C.value = j[i.value], f.value = V, k.value && y(), E.value && P(j, V), t.emit("clickItem", { data: O.value, index: V });
   }
   return {
-    getKey: y,
+    getKey: v,
     listViewItemClass: x,
-    onCheckItem: I,
+    onCheckItem: B,
     onClickItem: L
   };
 }
@@ -349,27 +349,27 @@ function Ze(e, t, o) {
   const l = a(e.idField), n = a(e.multiSelect);
   a(e.multiSelectMode);
   const { getSelectionItems: i } = o, u = a(i(e.selectionValues));
-  W(() => e.selectionValues, (d) => {
-    u.value = a(i(d)).value;
+  W(() => e.selectionValues, (f) => {
+    u.value = a(i(f)).value;
   });
-  const c = B(() => !n.value);
-  function h(d) {
-    return d[l.value] || "";
+  const c = I(() => !n.value);
+  function h(f) {
+    return f[l.value] || "";
   }
-  function s(d) {
-    return u.value.findIndex((m) => h(m) === h(d));
+  function s(f) {
+    return u.value.findIndex((m) => h(m) === h(f));
   }
-  function f() {
-    u.value.forEach((d) => {
-      d.checked = !1;
+  function r() {
+    u.value.forEach((f) => {
+      f.checked = !1;
     }), u.value = [];
   }
-  function r(d, b) {
-    c.value && f();
-    const m = s(d);
-    m > -1 ? (u.value.splice(m, 1), d.checked = !1) : (u.value.push(d), d.checked = !0), t.emit("selectionChange", u.value);
+  function d(f, C) {
+    c.value && r();
+    const m = s(f);
+    m > -1 ? (u.value.splice(m, 1), f.checked = !1) : (u.value.push(f), f.checked = !0), t.emit("selectionChange", u.value);
   }
-  return { clearSelection: f, findIndexInSelectedItems: s, selectedItems: u, toggleSelectItem: r };
+  return { clearSelection: r, findIndexInSelectedItems: s, selectedItems: u, toggleSelectItem: d };
 }
 function et(e, t) {
   function o(i) {
@@ -381,18 +381,18 @@ function et(e, t) {
   }
   function l(i, u) {
     const c = document.createTreeWalker(i, NodeFilter.SHOW_TEXT);
-    return o(c).map((r) => ({ textNode: r, text: (r.textContent || "").toLocaleLowerCase() })).map(({ textNode: r, text: d }) => {
-      const b = [];
+    return o(c).map((d) => ({ textNode: d, text: (d.textContent || "").toLocaleLowerCase() })).map(({ textNode: d, text: f }) => {
+      const C = [];
       let m = 0;
-      for (; m < d.length; ) {
-        const v = d.indexOf(u, m);
-        if (v === -1)
+      for (; m < f.length; ) {
+        const y = f.indexOf(u, m);
+        if (y === -1)
           break;
-        b.push(v), m = v + u.length;
+        C.push(y), m = y + u.length;
       }
-      return b.map((v) => {
-        const P = new Range();
-        return P.setStart(r, v), P.setEnd(r, v + u.length), P;
+      return C.map((y) => {
+        const O = new Range();
+        return O.setStart(d, y), O.setEnd(d, y + u.length), O;
       });
     }).flat();
   }
@@ -443,85 +443,85 @@ const tt = {
   }
 });
 function se(e, t, o, l, n, i, u, c) {
-  const h = a(e.size), s = a(e.textField), f = a(e.multiSelect), r = a(e.disableField), {
-    onMouseenterItem: d,
-    onMouseoverItem: b,
+  const h = a(e.size), s = a(e.textField), r = a(e.multiSelect), d = a(e.disableField), {
+    onMouseenterItem: f,
+    onMouseoverItem: C,
     onMouseoutItem: m
   } = n, {
-    getKey: v,
-    listViewItemClass: P,
-    onCheckItem: F,
+    getKey: y,
+    listViewItemClass: O,
+    onCheckItem: P,
     onClickItem: x
-  } = i, y = B(() => ({
+  } = i, v = I(() => ({
     margin: h.value === "small" ? "0.25rem 0" : "10px 0"
   }));
-  function S(I, k, E) {
-    return I.checked = u.findIndexInSelectedItems(I) > -1, p("li", {
-      class: P(I, k),
-      id: v(I, k),
-      key: v(I, k),
-      onClick: (L) => x(L, I, k),
-      onMouseenter: (L) => d(L, I, k),
-      onMouseover: (L) => b(L, I, k),
-      onMouseout: (L) => m(L, I, k)
-    }, [f.value && p("div", {
+  function b(B, k, E) {
+    return B.checked = u.findIndexInSelectedItems(B) > -1, p("li", {
+      class: O(B, k),
+      id: y(B, k),
+      key: y(B, k),
+      onClick: (L) => x(L, B, k),
+      onMouseenter: (L) => f(L, B, k),
+      onMouseover: (L) => C(L, B, k),
+      onMouseout: (L) => m(L, B, k)
+    }, [r.value && p("div", {
       class: "f-list-select",
       onClick: (L) => L.stopPropagation()
     }, [p(le, {
-      id: "list-" + v(I, k),
-      disabled: I[r.value] || I.unClick,
-      checked: I.checked,
-      onChange: (L) => F(I, k)
+      id: "list-" + y(B, k),
+      disabled: B[d.value] || B.unClick,
+      checked: B.checked,
+      onChange: (L) => P(B, k)
     }, null)]), p("div", {
       class: "f-list-content"
     }, [p("div", {
-      style: y.value
-    }, [I[s.value]])])]);
+      style: v.value
+    }, [B[s.value]])])]);
   }
   return {
-    renderItem: S
+    renderItem: b
   };
 }
 function nt(e, t, o, l, n, i, u, c) {
   const h = a(e.multiSelect), s = a(e.disableField), {
-    onMouseenterItem: f,
-    onMouseoverItem: r,
-    onMouseoutItem: d
+    onMouseenterItem: r,
+    onMouseoverItem: d,
+    onMouseoutItem: f
   } = n, {
-    getKey: b,
+    getKey: C,
     listViewItemClass: m,
-    onCheckItem: v,
-    onClickItem: P
+    onCheckItem: y,
+    onClickItem: O
   } = i;
-  function F(y, S, I) {
+  function P(v, b, B) {
     return t.slots.content ? p(re, null, [t.slots.content && t.slots.content({
-      item: y,
-      index: S,
-      selectedItem: I
+      item: v,
+      index: b,
+      selectedItem: B
     })]) : p("div", {
       style: "margin: 10px 0;"
-    }, [y.name]);
+    }, [v.name]);
   }
-  function x(y, S, I) {
+  function x(v, b, B) {
     return p("li", {
-      class: m(y, S),
-      id: b(y, S),
-      key: b(y, S),
-      onClick: (k) => P(k, y, S),
-      onMouseenter: (k) => f(k, y, S),
-      onMouseover: (k) => r(k, y, S),
-      onMouseout: (k) => d(k, y, S)
+      class: m(v, b),
+      id: C(v, b),
+      key: C(v, b),
+      onClick: (k) => O(k, v, b),
+      onMouseenter: (k) => r(k, v, b),
+      onMouseover: (k) => d(k, v, b),
+      onMouseout: (k) => f(k, v, b)
     }, [h.value && p("div", {
       class: "f-list-select",
       onClick: (k) => k.stopPropagation()
     }, [p(le, {
-      id: "list-" + b(y, S),
-      disabled: y[s.value] || y.unClick,
-      checked: y.checked,
-      onChange: (k) => v(y, S)
+      id: "list-" + C(v, b),
+      disabled: v[s.value] || v.unClick,
+      checked: v.checked,
+      onChange: (k) => y(v, b)
     }, null)]), p("div", {
       class: "f-list-content"
-    }, [F(y, S, I)])]);
+    }, [P(v, b, B)])]);
   }
   return {
     renderItem: x
@@ -529,22 +529,22 @@ function nt(e, t, o, l, n, i, u, c) {
 }
 function ot(e, t, o, l, n, i, u, c) {
   const h = a(e.multiSelect), s = a(e.disableField), {
-    onMouseenterItem: f,
-    onMouseoverItem: r,
-    onMouseoutItem: d
+    onMouseenterItem: r,
+    onMouseoverItem: d,
+    onMouseoutItem: f
   } = n, {
-    getKey: b,
+    getKey: C,
     listViewItemClass: m,
-    onCheckItem: v,
-    onClickItem: P
+    onCheckItem: y,
+    onClickItem: O
   } = i, {
-    dragstart: F,
+    dragstart: P,
     dragenter: x,
-    dragover: y,
-    dragend: S
+    dragover: v,
+    dragend: b
   } = l, {
-    removeItem: I
-  } = c, k = B(() => ({
+    removeItem: B
+  } = c, k = I(() => ({
     margin: h.value ? "10px 0" : "10px 0px 10px 14px"
   }));
   function E(V) {
@@ -555,34 +555,34 @@ function ot(e, t, o, l, n, i, u, c) {
   function L() {
     return t.slots.itemContent ? t.slots.itemContent : E;
   }
-  const C = L();
+  const w = L();
   function j(V, R, z) {
     return p("li", {
       class: m(V, R),
-      id: b(V, R),
-      key: b(V, R),
-      onClick: (D) => P(D, V, R),
-      onMouseenter: (D) => f(D, V, R),
-      onMouseover: (D) => r(D, V, R),
-      onMouseout: (D) => d(D, V, R),
+      id: C(V, R),
+      key: C(V, R),
+      onClick: (D) => O(D, V, R),
+      onMouseenter: (D) => r(D, V, R),
+      onMouseover: (D) => d(D, V, R),
+      onMouseout: (D) => f(D, V, R),
       draggable: "true",
-      onDragstart: (D) => F(D, V, R),
+      onDragstart: (D) => P(D, V, R),
       onDragenter: (D) => x(D, R),
-      onDragend: (D) => S(D, V),
-      onDragover: (D) => y(D, R)
+      onDragend: (D) => b(D, V),
+      onDragover: (D) => v(D, R)
     }, [h.value && p("div", {
       class: "f-list-select",
       onClick: (D) => D.stopPropagation()
     }, [p(le, {
-      id: "list-" + b(V, R),
+      id: "list-" + C(V, R),
       disabled: V[s.value] || V.unClick,
       checked: V.checked,
-      onChange: (D) => v(V, R)
+      onChange: (D) => y(V, R)
     }, null)]), p("div", {
       class: "f-list-content"
-    }, [C(V)]), p("div", {
+    }, [w(V)]), p("div", {
       class: "f-list-remove",
-      onClick: (D) => I(R)
+      onClick: (D) => B(R)
     }, [p("div", {
       class: "f-list-remove-icon"
     }, [p("i", {
@@ -608,26 +608,26 @@ function at(e, t, o) {
   };
 }
 function ce(e, t, o) {
-  const l = a(e.headerClass), n = a(e.placeholder), i = a(""), u = B(() => !i.value), c = B(() => !!i.value);
-  function h(d) {
+  const l = a(e.headerClass), n = a(e.placeholder), i = a(""), u = I(() => !i.value), c = I(() => !!i.value);
+  function h(f) {
     i.value = "";
   }
-  W(i, (d) => {
-    o.search(d);
+  W(i, (f) => {
+    o.search(f);
   });
-  const s = B(() => {
-    const d = {
+  const s = I(() => {
+    const f = {
       "form-group": !0,
       "farris-form-group": !0
     };
-    return l.value && l.value.split(" ").reduce((m, v) => (m[v] = !0, m), d), d;
+    return l.value && l.value.split(" ").reduce((m, y) => (m[y] = !0, m), f), f;
   });
-  function f(d) {
+  function r(f) {
   }
-  function r() {
+  function d() {
     return p("div", {
       class: "f-list-view-header",
-      onClick: Fe(f, ["prevent", "stop"])
+      onClick: Fe(r, ["prevent", "stop"])
     }, [p("div", {
       class: s.value
     }, [p("div", {
@@ -638,7 +638,7 @@ function ce(e, t, o) {
       class: "input-group f-state-editable"
     }, [Q(p("input", {
       class: "form-control f-utils-fill text-left",
-      "onUpdate:modelValue": (d) => i.value = d,
+      "onUpdate:modelValue": (f) => i.value = f,
       name: "input-group-value",
       type: "text",
       placeholder: n.value,
@@ -647,7 +647,7 @@ function ce(e, t, o) {
       class: "input-group-append"
     }, [c.value && p("span", {
       class: "input-group-text input-group-clear",
-      onClick: (d) => h()
+      onClick: (f) => h()
     }, [p("i", {
       class: "f-icon f-icon-close-circle"
     }, null)]), u.value && p("span", {
@@ -657,13 +657,13 @@ function ce(e, t, o) {
     }, null)])])])])])])]);
   }
   return {
-    renderHeader: r
+    renderHeader: d
   };
 }
 function lt(e, t) {
   const o = a(e.idField), l = a(e.data), n = a(e.data), i = a(e.keepOrder);
   function u() {
-    const s = l.value.map((f, r) => typeof f != "object" ? { __fv_index__: r, name: f } : (f.__fv_index__ = r, f));
+    const s = l.value.map((r, d) => typeof r != "object" ? { __fv_index__: d, name: r } : (r.__fv_index__ = d, r));
     return n.value = s, s;
   }
   const c = a(u());
@@ -671,18 +671,18 @@ function lt(e, t) {
     () => e.data,
     (s) => {
       if (i.value) {
-        const f = s.reduce((m, v) => (m.set(v.id, !0), m), /* @__PURE__ */ new Map()), r = l.value.reduce((m, v) => (m.set(v.id, !0), m), /* @__PURE__ */ new Map()), d = c.value.filter((m) => f.has(m.id)), b = s.filter((m) => !r.has(m.id));
-        l.value = [...d, ...b];
+        const r = s.reduce((m, y) => (m.set(y.id, !0), m), /* @__PURE__ */ new Map()), d = l.value.reduce((m, y) => (m.set(y.id, !0), m), /* @__PURE__ */ new Map()), f = c.value.filter((m) => r.has(m.id)), C = s.filter((m) => !d.has(m.id));
+        l.value = [...f, ...C];
       } else
         l.value = s;
       c.value = u();
     }
   );
   function h(s) {
-    return s.map((r) => {
-      const d = n.value.findIndex((b) => b[o.value] === r);
-      return d > -1 ? n.value[d] : null;
-    }).filter((r) => r != null);
+    return s.map((d) => {
+      const f = n.value.findIndex((C) => C[o.value] === d);
+      return f > -1 ? n.value[f] : null;
+    }).filter((d) => d != null);
   }
   return {
     dataView: c,
@@ -690,31 +690,31 @@ function lt(e, t) {
   };
 }
 function ut(e, t, o, l) {
-  const n = a(e.idField), { dataView: i } = o, u = a(-1), c = a(!1), { activeIndex: h, focusedItemId: s, hoverIndex: f, resumeHover: r, suspendHover: d } = l;
-  function b(F, x, y) {
-    F.stopPropagation(), d(), x && setTimeout(() => {
-      u.value = y, c.value = !0, x.moving = !0;
+  const n = a(e.idField), { dataView: i } = o, u = a(-1), c = a(!1), { activeIndex: h, focusedItemId: s, hoverIndex: r, resumeHover: d, suspendHover: f } = l;
+  function C(P, x, v) {
+    P.stopPropagation(), f(), x && setTimeout(() => {
+      u.value = v, c.value = !0, x.moving = !0;
     });
   }
-  function m(F, x) {
-    if (F.preventDefault(), u.value !== x) {
-      const y = i.value[u.value], S = i.value;
-      S.splice(u.value, 1), S.splice(x, 0, y), u.value = x;
+  function m(P, x) {
+    if (P.preventDefault(), u.value !== x) {
+      const v = i.value[u.value], b = i.value;
+      b.splice(u.value, 1), b.splice(x, 0, v), u.value = x;
     }
   }
-  function v(F, x) {
-    F.preventDefault(), F.dataTransfer && (F.dataTransfer.dropEffect = "move");
+  function y(P, x) {
+    P.preventDefault(), P.dataTransfer && (P.dataTransfer.dropEffect = "move");
   }
-  function P(F, x) {
-    x && (x.moving = !1), i.value.forEach((y, S) => {
-      y.__fv_index__ = S;
-    }), c.value = !1, r(), f.value = x.__fv_index__, h.value = x.__fv_index__, s.value = x[n.value], t.emit("change", i.value);
+  function O(P, x) {
+    x && (x.moving = !1), i.value.forEach((v, b) => {
+      v.__fv_index__ = b;
+    }), c.value = !1, d(), r.value = x.__fv_index__, h.value = x.__fv_index__, s.value = x[n.value], t.emit("change", i.value);
   }
   return {
-    dragstart: b,
+    dragstart: C,
     dragenter: m,
-    dragover: v,
-    dragend: P,
+    dragover: y,
+    dragend: O,
     isDragging: c
   };
 }
@@ -730,13 +730,13 @@ function it(e, t, o) {
 }
 function st() {
   const e = a(-1), t = a(""), o = a(-1), l = a(!1);
-  function n(s, f, r) {
-    o.value = r;
+  function n(s, r, d) {
+    o.value = d;
   }
-  function i(s, f, r) {
-    l.value || (o.value = r);
+  function i(s, r, d) {
+    l.value || (o.value = d);
   }
-  function u(s, f, r) {
+  function u(s, r, d) {
     o.value = -1;
   }
   function c() {
@@ -763,50 +763,50 @@ const ct = /* @__PURE__ */ G({
   setup(e, t) {
     const o = a(), l = a(e.view), n = a(e.header), i = a(e.multiSelect), u = a(e.view === "CardView"), c = a(!0), h = a({}), s = a("暂无数据");
     a(!0), a(!1), a("id");
-    const f = lt(e), {
-      dataView: r
-    } = f, d = B(() => {
+    const r = lt(e), {
+      dataView: d
+    } = r, f = I(() => {
       const M = {
         "f-list-view": !0,
         "f-list-view-multiple": i.value
       };
       return e.size !== "default" && (M[`${e.size}-item`] = !0), M;
-    }), b = B(() => ({
+    }), C = I(() => ({
       "f-list-view-group": !0,
       "d-flex": u.value,
       "flex-wrap": u.value
-    })), m = B(() => !!r.value && r.value.length > 0), v = st(), P = Ze(e, t, f), F = ut(e, t, f, v), x = it(e, t, f), y = Ye(e, t, F, v, P), S = et(e, o), I = B(() => r.value.length === 0), k = B(() => I.value && !t.slots.empty), E = B(() => !!t.slots.footer || c.value);
+    })), m = I(() => !!d.value && d.value.length > 0), y = st(), O = Ze(e, t, r), P = ut(e, t, r, y), x = it(e, t, r), v = Ye(e, t, P, y, O), b = et(e, o), B = I(() => d.value.length === 0), k = I(() => B.value && !t.slots.empty), E = I(() => !!t.slots.footer || c.value);
     function L() {
       return l.value === "SingleView" ? se : l.value === "DraggableView" ? ot : l.value === "ContentView" && t.slots.content ? nt : se;
     }
-    const C = L(), {
+    const w = L(), {
       renderItem: j
-    } = C(e, t, f, F, v, y, P, x);
+    } = w(e, t, r, P, y, v, O, x);
     function V() {
       return n.value === "SearchBar" ? ce : n.value === "ContentHeader" ? at : ce;
     }
     const R = V(), {
       renderHeader: z
-    } = R(e, t, S);
+    } = R(e, t, b);
     function D(M) {
-      S.search(M);
+      b.search(M);
     }
     t.expose({
       search: D
     });
-    function O(M) {
+    function F(M) {
       i.value && (M.preventDefault(), M.stopPropagation());
     }
     return () => p("div", {
-      class: d.value,
-      onClick: O
+      class: f.value,
+      onClick: F
     }, [z(), p("div", {
       ref: o,
       class: "f-list-view-content"
     }, [p("ul", {
-      class: b.value,
+      class: C.value,
       style: "list-style: none;"
-    }, [m.value && r.value.map((M, A) => j(M, A, h)), k.value && p("div", {
+    }, [m.value && d.value.map((M, A) => j(M, A, h)), k.value && p("div", {
       class: "f-list-view-emptydata"
     }, [p("p", {
       class: "f-empty-title"
@@ -823,7 +823,7 @@ const ct = /* @__PURE__ */ G({
     W(e.dataSource, () => {
       o.value = e.dataSource;
     });
-    const u = B(() => e.enableSearch ? "SearchBar" : "ContentHeader");
+    const u = I(() => e.enableSearch ? "SearchBar" : "ContentHeader");
     function c(h) {
       l.value = h.map((s) => Object.assign({}, s)), i.value = h.map((s) => s[e.idField]), t.emit("selectionChange", l.value);
     }
@@ -1145,21 +1145,21 @@ const Ct = {
     function n(c) {
       t.emit("click"), c.preventDefault(), c.stopPropagation();
     }
-    const i = B(() => {
+    const i = I(() => {
       const c = l.value;
       if (c) {
         const h = c.getBoundingClientRect(), {
           left: s,
-          top: f,
-          height: r
+          top: r,
+          height: d
         } = h;
         return {
           left: s,
-          top: f + r
+          top: r + d
         };
       }
       return o.value;
-    }), u = B(() => ({
+    }), u = I(() => ({
       position: "relative",
       left: `${i.value.left}px`,
       top: `${i.value.top}px`
@@ -1216,53 +1216,53 @@ class Bt {
   }
 }
 function It(e, t, o, l) {
-  const n = a(e.buttonBehavior), i = a(e.popupOnInput), u = B(() => ({
+  const n = a(e.buttonBehavior), i = a(e.popupOnInput), u = I(() => ({
     "input-group-append": !0,
     "append-force-show": e.showButtonWhenDisabled && (e.readonly || e.disable)
-  })), c = B(() => e.showButtonWhenDisabled || (!e.editable || !e.readonly) && !e.disable);
-  async function h(d) {
+  })), c = I(() => e.showButtonWhenDisabled || (!e.editable || !e.readonly) && !e.disable);
+  async function h(f) {
     if (c.value) {
-      const b = !!t.slots.default;
+      const C = !!t.slots.default;
       n.value === "Overlay" && Bt.show({
         host: o.value,
         render: () => {
           if (t.slots.default)
             return t.slots.default();
         }
-      }), b && n.value === "Popup" && l.togglePopup(), b && i.value && l.hidePopup(), t.emit("clickButton", { origin: d, value: e.modelValue });
+      }), C && n.value === "Popup" && l.togglePopup(), C && i.value && l.hidePopup(), t.emit("clickButton", { origin: f, value: e.modelValue });
     }
-    d.stopPropagation();
+    f.stopPropagation();
   }
-  function s(d) {
-    t.emit("mouseEnterIcon", d);
+  function s(f) {
+    t.emit("mouseEnterIcon", f);
   }
-  function f(d) {
-    t.emit("mouseLeaveIcon", d);
+  function r(f) {
+    t.emit("mouseLeaveIcon", f);
   }
-  function r() {
+  function d() {
     t.emit("mouseOverButton");
   }
   return {
     buttonClass: u,
     onClickButton: h,
     onMouseEnterButton: s,
-    onMouseLeaveButton: f,
-    onMouseOverButton: r
+    onMouseLeaveButton: r,
+    onMouseOverButton: d
   };
 }
 function kt(e, t, o, l, n, i) {
-  const u = a(!1), c = B(() => e.enableClear && !e.readonly && !e.disable), { changeTextBoxValue: h } = i;
-  function s(b) {
-    u.value = b;
+  const u = a(!1), c = I(() => e.enableClear && !e.readonly && !e.disable), { changeTextBoxValue: h } = i;
+  function s(C) {
+    u.value = C;
   }
   W(n, () => {
     l.value ? s(!!n.value) : s(!1);
   });
-  function f(b) {
-    const m = !e.readonly && !e.disable && e.editable, v = !e.editable;
-    b.stopPropagation(), (m || v) && (h("", !1), s(!u.value), t.emit("clear"));
+  function r(C) {
+    const m = !e.readonly && !e.disable && e.editable, y = !e.editable;
+    C.stopPropagation(), (m || y) && (h("", !1), s(!u.value), t.emit("clear"));
   }
-  function r(b) {
+  function d(C) {
     if (c.value) {
       if (!o.value) {
         s(!1);
@@ -1271,92 +1271,92 @@ function kt(e, t, o, l, n, i) {
       (!e.editable || !e.readonly) && !e.disable && s(!0);
     }
   }
-  function d(b) {
+  function f(C) {
     c.value && s(!1);
   }
   return {
     enableClearButton: c,
     showClearButton: u,
-    onClearValue: f,
-    onMouseEnterTextBox: r,
-    onMouseLeaveTextBox: d
+    onClearValue: r,
+    onMouseEnterTextBox: d,
+    onMouseLeaveTextBox: f
   };
 }
 function xt(e, t, o, l, n) {
-  const i = a(e.popupOnInput), u = a(e.popupOnFocus), { shouldPopupContent: c } = n, h = B(() => e.enableTitle ? o.value : ""), s = B(() => (e.disable || e.readonly) && !e.forcePlaceholder ? "" : e.placeholder), f = B(() => e.readonly || !e.editable);
-  let r = !1;
-  const d = B(() => !e.disable && r), b = B(() => ({
+  const i = a(e.popupOnInput), u = a(e.popupOnFocus), { shouldPopupContent: c } = n, h = I(() => e.enableTitle ? o.value : ""), s = I(() => (e.disable || e.readonly) && !e.forcePlaceholder ? "" : e.placeholder), r = I(() => e.readonly || !e.editable);
+  let d = !1;
+  const f = I(() => !e.disable && d), C = I(() => ({
     "text-left": e.textAlign === "left",
     "text-center": e.textAlign === "center",
     "text-right": e.textAlign === "right",
     "form-control": !0,
     "f-utils-fill": !0
-  })), m = B(() => ({
+  })), m = I(() => ({
     "input-group": !0,
     "f-state-disable": e.disable,
     "f-state-editable": e.editable && !e.disable && !e.readonly,
     "f-state-readonly": e.readonly && !e.disable,
-    "f-state-focus": d.value
+    "f-state-focus": f.value
   }));
-  function v(C, j = !0) {
-    o.value !== C && (o.value = C, j && t.emit("change", C), t.emit("update:modelValue", C));
+  function y(w, j = !0) {
+    o.value !== w && (o.value = w, j && t.emit("change", w), t.emit("update:modelValue", w));
   }
-  function P(C) {
-    c.value = !1, v(C, !0);
+  function O(w) {
+    c.value = !1, y(w, !0);
   }
   W(
     () => e.modelValue,
-    (C) => {
-      o.value = C, t.emit("change", C);
+    (w) => {
+      o.value = w, t.emit("change", w);
     }
   );
-  function F(C) {
-    r = !1, t.emit("blur", C), C.stopPropagation();
+  function P(w) {
+    d = !1, t.emit("blur", w), w.stopPropagation();
   }
-  function x(C) {
-    t.emit("click", C);
+  function x(w) {
+    t.emit("click", w);
   }
-  function y(C) {
+  function v(w) {
     if (e.disable) {
-      r = !0;
+      d = !0;
       return;
     }
-    r = !0, f.value || (t.emit("focus", C), u.value && !c.value && n.popup());
+    d = !0, r.value || (t.emit("focus", w), u.value && !c.value && n.popup());
   }
-  function S(C) {
-    t.emit("input", C.target.value);
-    const j = C.target.value;
-    l.value = j, o.value !== j && v(j, !1), i.value && !c.value && n.popup();
+  function b(w) {
+    t.emit("input", w.target.value);
+    const j = w.target.value;
+    l.value = j, o.value !== j && y(j, !1), i.value && !c.value && n.popup();
   }
-  function I(C) {
-    C.target.tagName !== "INPUT" && C.preventDefault(), C.stopPropagation();
+  function B(w) {
+    w.target.tagName !== "INPUT" && w.preventDefault(), w.stopPropagation();
   }
-  function k(C) {
-    t.emit("keydown", C);
+  function k(w) {
+    t.emit("keydown", w);
   }
-  function E(C) {
-    C.key === "Enter" && (i.value || u.value) && n.hidePopup(), t.emit("keyup", C);
+  function E(w) {
+    w.key === "Enter" && (i.value || u.value) && n.hidePopup(), t.emit("keyup", w);
   }
-  function L(C) {
-    const j = C.target.value;
-    C.stopPropagation(), v(j);
+  function L(w) {
+    const j = w.target.value;
+    w.stopPropagation(), y(j);
   }
   return {
-    hasFocusedTextBox: d,
-    isTextBoxReadonly: f,
-    textBoxClass: b,
+    hasFocusedTextBox: f,
+    isTextBoxReadonly: r,
+    textBoxClass: C,
     textBoxPlaceholder: s,
     textBoxTitle: h,
     inputGroupClass: m,
-    changeTextBoxValue: v,
-    commitValue: P,
-    onBlurTextBox: F,
+    changeTextBoxValue: y,
+    commitValue: O,
+    onBlurTextBox: P,
     onClickTextBox: x,
-    onFocusTextBox: y,
-    onInput: S,
+    onFocusTextBox: v,
+    onInput: b,
     onKeyDownTextBox: k,
     onKeyUpTextBox: E,
-    onMouseDownTextBox: I,
+    onMouseDownTextBox: B,
     onTextBoxValueChange: L
   };
 }
@@ -1386,10 +1386,10 @@ function Mt(e, t, o) {
     onBlurTextBox: c,
     onClickTextBox: h,
     onFocusTextBox: s,
-    onInput: f,
-    onKeyDownTextBox: r,
-    onKeyUpTextBox: d,
-    onMouseDownTextBox: b,
+    onInput: r,
+    onKeyDownTextBox: d,
+    onKeyUpTextBox: f,
+    onMouseDownTextBox: C,
     onTextBoxValueChange: m
   } = o;
   return () => p("input", {
@@ -1409,10 +1409,10 @@ function Mt(e, t, o) {
     onChange: m,
     onClick: h,
     onFocus: s,
-    onInput: f,
-    onKeydown: r,
-    onKeyup: d,
-    onMousedown: b
+    onInput: r,
+    onKeydown: d,
+    onKeyup: f,
+    onMousedown: C
   }, null);
 }
 const Ft = {
@@ -1435,22 +1435,22 @@ const Ft = {
 };
 function Ot(e, t, o, l) {
   const n = a(-1), i = a(!1);
-  function u(f, r, d) {
-    f.stopPropagation(), r && setTimeout(() => {
-      n.value = d, i.value = !0, r.moving = !0;
+  function u(r, d, f) {
+    r.stopPropagation(), d && setTimeout(() => {
+      n.value = f, i.value = !0, d.moving = !0;
     });
   }
-  function c(f, r) {
-    if (f.preventDefault(), n.value !== r) {
-      const d = l.value[n.value], b = l.value;
-      b.splice(n.value, 1), b.splice(r, 0, d), n.value = r;
+  function c(r, d) {
+    if (r.preventDefault(), n.value !== d) {
+      const f = l.value[n.value], C = l.value;
+      C.splice(n.value, 1), C.splice(d, 0, f), n.value = d;
     }
   }
-  function h(f, r) {
-    f.preventDefault(), f.dataTransfer && (f.dataTransfer.dropEffect = "move");
+  function h(r, d) {
+    r.preventDefault(), r.dataTransfer && (r.dataTransfer.dropEffect = "move");
   }
-  function s(f, r) {
-    r && (r.moving = !1), o.value = l.value.filter((d) => d.type === "Tag").map((d) => d.payload), i.value = !1, t.emit("change", o.value);
+  function s(r, d) {
+    d && (d.moving = !1), o.value = l.value.filter((f) => f.type === "Tag").map((f) => f.payload), i.value = !1, t.emit("change", o.value);
   }
   return {
     dragstart: u,
@@ -1465,39 +1465,39 @@ const Vt = /* @__PURE__ */ G({
   props: Ft,
   emits: ["remove", "selectionChange", "change"],
   setup(e, t) {
-    const o = a(e.selectable), l = a(e.customClass), n = a(e.data), i = a(e.tagType), u = a(e.tagStyle), c = a(e.showColor), h = a(e.activeTag), s = a(e.customStyle), f = a(e.showClose), r = a(e.showAddButton), d = a(e.showInput), b = a(e.addButtonText), m = a(e.enableAddButton);
+    const o = a(e.selectable), l = a(e.customClass), n = a(e.data), i = a(e.tagType), u = a(e.tagStyle), c = a(e.showColor), h = a(e.activeTag), s = a(e.customStyle), r = a(e.showClose), d = a(e.showAddButton), f = a(e.showInput), C = a(e.addButtonText), m = a(e.enableAddButton);
     a(e.placeholder), a(""), a();
-    const v = a(), P = a(e.wrapText), F = a();
+    const y = a(), O = a(e.wrapText), P = a();
     function x() {
-      const g = n.value.map((w) => ({
+      const g = n.value.map((S) => ({
         type: "Tag",
-        payload: w
+        payload: S
       }));
-      return r.value && g.push({
+      return d.value && g.push({
         type: "AddButton"
       }), g;
     }
-    const y = a(x());
-    function S(g) {
-      n.value = g, y.value = x();
+    const v = a(x());
+    function b(g) {
+      n.value = g, v.value = x();
     }
-    const I = B(() => y.value.findIndex((g) => g.type === "Input")), k = Ot(e, t, n, y), {
+    const B = I(() => v.value.findIndex((g) => g.type === "Input")), k = Ot(e, t, n, v), {
       dragstart: E,
       dragenter: L,
-      dragover: C,
+      dragover: w,
       dragend: j
     } = k;
-    W(() => e.data, (g) => S(g));
-    const V = B(() => {
+    W(() => e.data, (g) => b(g));
+    const V = I(() => {
       const g = {
         "farris-tags": !0,
         "farris-tags-checkable": o.value,
-        "farris-tags-nowrap": !P.value
+        "farris-tags-nowrap": !O.value
       };
-      return l.value.split(" ").reduce((w, T) => (w[T] = !0, w), g), g;
+      return l.value.split(" ").reduce((S, T) => (S[T] = !0, S), g), g;
     });
     function R(g) {
-      const w = {
+      const S = {
         "farris-tag-item": !0,
         "farris-tag-item-checked": o.value && g.checked,
         "farris-tag-item-checkable": o.value,
@@ -1506,44 +1506,44 @@ const Vt = /* @__PURE__ */ G({
       };
       if (i.value) {
         const T = `farris-tag-item-${i.value}`;
-        w[T] = !0;
+        S[T] = !0;
       }
-      return w;
+      return S;
     }
-    const z = B(() => {
+    const z = I(() => {
       const g = {};
-      return s.value && s.value.split(";").reduce((w, T) => {
+      return s.value && s.value.split(";").reduce((S, T) => {
         const H = T.split(":");
-        return w[H[0]] = H[1], w;
+        return S[H[0]] = H[1], S;
       }, g), g;
     });
-    function D(g, w) {
-      o.value && w.selectable && (w.checked = !w.checked, h.value = w.checked ? w.name : "", w.checked && n.value.filter((T) => T.name !== w.name).forEach((T) => {
-        T.checked = !w.checked;
-      }), t.emit("change", n.value), t.emit("selectionChange", w));
+    function D(g, S) {
+      o.value && S.selectable && (S.checked = !S.checked, h.value = S.checked ? S.name : "", S.checked && n.value.filter((T) => T.name !== S.name).forEach((T) => {
+        T.checked = !S.checked;
+      }), t.emit("change", n.value), t.emit("selectionChange", S));
     }
-    function O(g, w) {
+    function F(g, S) {
       let T;
       switch (g.key) {
         case "Backspace":
-          n.value = n.value.filter((H) => H.name !== w.name), t.emit("change", n.value);
+          n.value = n.value.filter((H) => H.name !== S.name), t.emit("change", n.value);
           break;
         case "ArrowLeft":
-          T = Math.max(v.value.scrollLeft + 20, 0), v.value.scrollLeft = T;
+          T = Math.max(y.value.scrollLeft + 20, 0), y.value.scrollLeft = T;
           break;
         case "ArrowRight":
-          T = Math.max(v.value.scrollLeft - 20, 0), v.value.scrollLeft = T;
+          T = Math.max(y.value.scrollLeft - 20, 0), y.value.scrollLeft = T;
       }
     }
-    function M(g, w) {
-      const T = n.value.findIndex((H) => H.name === w.name);
+    function M(g, S) {
+      const T = n.value.findIndex((H) => H.name === S.name);
       if (T > -1) {
         const [H] = n.value.splice(T, 1);
-        y.value = x(), t.emit("change", n.value), t.emit("remove", n.value, H, T);
+        v.value = x(), t.emit("change", n.value), t.emit("remove", n.value, H, T);
       }
       g.stopPropagation();
     }
-    const A = B(() => ({
+    const A = I(() => ({
       "farris-tag-item": !0,
       "farris-tag-add-button": !0,
       "farris-tag-add-button-disabled": !m.value
@@ -1558,51 +1558,51 @@ const Vt = /* @__PURE__ */ G({
         class: "f-icon f-icon-amplification"
       }, null), p("span", {
         class: "farris-tag-add-text"
-      }, [b.value])]);
+      }, [C.value])]);
     }
     function N(g) {
       if (g && !g.innerText) {
-        const w = I.value;
-        if (w > 0) {
-          const [T] = n.value.splice(w - 1, 1);
-          y.value.splice(w - 1, 1), t.emit("remove", n.value, T, w - 1);
+        const S = B.value;
+        if (S > 0) {
+          const [T] = n.value.splice(S - 1, 1);
+          v.value.splice(S - 1, 1), t.emit("remove", n.value, T, S - 1);
         }
       }
     }
-    function U(g, w, T) {
+    function U(g, S, T) {
       g > -1 && (n.value.splice(g, 0, {
-        name: w,
+        name: S,
         value: T,
         selectable: o.value
-      }), y.value = x(), t.emit("change", n.value));
+      }), v.value = x(), t.emit("change", n.value));
     }
     function J(g) {
       if (g && g.innerText) {
-        const w = g.innerText, T = I.value;
-        U(T, w, w), g.innerText = "";
+        const S = g.innerText, T = B.value;
+        U(T, S, S), g.innerText = "";
       }
     }
     function Y(g) {
-      const w = g.target;
-      w && (w.innerText ? J(w) : t.emit("change", n.value));
+      const S = g.target;
+      S && (S.innerText ? J(S) : t.emit("change", n.value));
     }
     function be(g) {
       g.key === "Enter" && J(g.target), g.key === "Backspace" && (N(g.target), K(() => {
-        F.value && F.value.focus();
+        P.value && P.value.focus();
       }));
     }
     function Ce() {
       return p("li", {
         class: "farris-tag-input-box"
       }, [p("div", {
-        ref: F,
+        ref: P,
         class: "form-control",
         contenteditable: "true",
         onKeyup: be,
         onBlur: Y
       }, null)]);
     }
-    function we(g, w) {
+    function we(g, S) {
       return p("li", {
         class: R(g),
         style: z.value,
@@ -1610,16 +1610,16 @@ const Vt = /* @__PURE__ */ G({
         id: g.name,
         key: g.name,
         onClick: (T) => D(T, g),
-        onKeydown: (T) => O(T, g),
+        onKeydown: (T) => F(T, g),
         draggable: "true",
-        onDragstart: (T) => E(T, g, w),
-        onDragenter: (T) => L(T, w),
+        onDragstart: (T) => E(T, g, S),
+        onDragenter: (T) => L(T, S),
         onDragend: (T) => j(T, g),
-        onDragover: (T) => C(T, w)
+        onDragover: (T) => w(T, S)
       }, [p("div", {
         title: g.name,
         class: "tag-box"
-      }, [g.name]), f.value && p("span", {
+      }, [g.name]), r.value && p("span", {
         class: "tag-delete"
       }, [p("i", {
         class: "f-icon f-icon-close",
@@ -1627,10 +1627,10 @@ const Vt = /* @__PURE__ */ G({
       }, null)])]);
     }
     function Se() {
-      return y.value.map((g, w) => {
+      return v.value.map((g, S) => {
         switch (g.type) {
           case "Tag":
-            return we(g.payload, w);
+            return we(g.payload, S);
           case "AddButton":
             return _();
           case "Input":
@@ -1638,18 +1638,18 @@ const Vt = /* @__PURE__ */ G({
         }
       });
     }
-    const Te = B(() => ({
+    const Te = I(() => ({
       "farris-tags-item-container": !0,
       "farris-tag-item-capsule": u.value === "capsule"
     }));
     function Be(g) {
-      const w = Math.max(v.value.scrollLeft - g.deltaX, 0);
-      v.value.scrollLeft = w;
+      const S = Math.max(y.value.scrollLeft - g.deltaX, 0);
+      y.value.scrollLeft = S;
     }
     function Ie(g) {
-      const w = v.value, T = n.value.length - 1;
-      if (w) {
-        const H = Array.from(w.children).filter((X) => X.className.indexOf("farris-tag-item") > -1).findIndex((X) => {
+      const S = y.value, T = n.value.length - 1;
+      if (S) {
+        const H = Array.from(S.children).filter((X) => X.className.indexOf("farris-tag-item") > -1).findIndex((X) => {
           const q = X.getBoundingClientRect(), Z = window.getComputedStyle(X), ue = parseInt(Z["margin-left"], 10) + q.width + parseInt(Z["margin-right"], 10);
           return q.left + ue > g;
         });
@@ -1659,21 +1659,21 @@ const Vt = /* @__PURE__ */ G({
       return T;
     }
     function ke(g) {
-      if (d.value) {
-        const T = Ie(g.clientX) + 1, X = y.value.filter((q) => q.type !== "Input");
+      if (f.value) {
+        const T = Ie(g.clientX) + 1, X = v.value.filter((q) => q.type !== "Input");
         X.splice(T, 0, {
           type: "Input"
-        }), y.value = X, K(() => {
-          F.value && F.value.focus();
+        }), v.value = X, K(() => {
+          P.value && P.value.focus();
         });
       }
     }
     function xe(g) {
       var T;
       g.preventDefault(), g.stopPropagation();
-      const w = (T = g.dataTransfer) == null ? void 0 : T.getData("Text");
-      if (w) {
-        const H = w.split(":"), X = H[0], q = H[1];
+      const S = (T = g.dataTransfer) == null ? void 0 : T.getData("Text");
+      if (S) {
+        const H = S.split(":"), X = H[0], q = H[1];
         [...n.value].findIndex((ee) => (console.log(`${ee.value} === ${q} is ${ee.value === q}`), ee.value === q)) > -1 || U(n.value.length, X, q);
       }
     }
@@ -1686,7 +1686,7 @@ const Vt = /* @__PURE__ */ G({
       onDrop: xe,
       onDragover: Pe
     }, [p("ul", {
-      ref: v,
+      ref: y,
       class: Te.value,
       onWheel: (g) => Be(g)
     }, [Se()])]);
@@ -1695,7 +1695,7 @@ const Vt = /* @__PURE__ */ G({
 function Lt(e, t, o) {
   const l = a(e.separator), {
     changeTextBoxValue: n
-  } = o, i = B(() => t.value ? t.value.split(l.value).map((c) => ({
+  } = o, i = I(() => t.value ? t.value.split(l.value).map((c) => ({
     name: c,
     selectable: !0
   })) : []);
@@ -1760,106 +1760,106 @@ const jt = {
   minWidth: { type: Number, default: -1 }
 };
 function Rt(e) {
-  const t = e.host ? e.host : "body", o = B(() => t === "body" ? 0 : t ? t.getBoundingClientRect().top : 0), l = B(() => t === "body" ? 0 : t ? t.getBoundingClientRect().left : 0), n = B(() => t === "body" ? document.body.getBoundingClientRect().width : t ? t.getBoundingClientRect().width - (e.rightBoundary ? e.rightBoundary.getBoundingClientRect().width : 0) : document.body.getBoundingClientRect().width);
+  const t = e.host ? e.host : "body", o = I(() => t === "body" ? 0 : t ? t.getBoundingClientRect().top : 0), l = I(() => t === "body" ? 0 : t ? t.getBoundingClientRect().left : 0), n = I(() => t === "body" ? document.body.getBoundingClientRect().width : t ? t.getBoundingClientRect().width - (e.rightBoundary ? e.rightBoundary.getBoundingClientRect().width : 0) : document.body.getBoundingClientRect().width);
   return { host: t, hostLeft: l, hostTop: o, hostWidth: n };
 }
 function At(e, t, o, l) {
   var D;
-  const n = a(0), i = a(((D = e.offsetX) == null ? void 0 : D.value) || 0), u = a(-1), c = a(-1), h = a(-1), s = a(e.placement), f = a(0), r = a(0), d = a(0), b = a(document.documentElement.scrollLeft), m = a(document.documentElement.scrollTop), { hostLeft: v, hostTop: P, hostWidth: F } = l;
-  W(e.offsetX, (O) => {
-    n.value = O - i.value;
+  const n = a(0), i = a(((D = e.offsetX) == null ? void 0 : D.value) || 0), u = a(-1), c = a(-1), h = a(-1), s = a(e.placement), r = a(0), d = a(0), f = a(0), C = a(document.documentElement.scrollLeft), m = a(document.documentElement.scrollTop), { hostLeft: y, hostTop: O, hostWidth: P } = l;
+  W(e.offsetX, (F) => {
+    n.value = F - i.value;
   });
-  const x = B(() => {
-    const O = {
-      left: `${r.value}px`,
-      top: `${d.value}px`,
+  const x = I(() => {
+    const F = {
+      left: `${d.value}px`,
+      top: `${f.value}px`,
       transform: `translateX(${n.value}px)`
     };
-    return e.zIndex !== -1 && (O["z-index"] = e.zIndex), u.value !== -1 && (O.width = `${u.value}px`), O;
-  }), y = B(() => ({
-    left: `${f.value}px`
+    return e.zIndex !== -1 && (F["z-index"] = e.zIndex), u.value !== -1 && (F.width = `${u.value}px`), F;
+  }), v = I(() => ({
+    left: `${r.value}px`
   }));
-  function S(O) {
-    if (O && e.keepWidthWithReference) {
-      const M = O.getBoundingClientRect();
+  function b(F) {
+    if (F && e.keepWidthWithReference) {
+      const M = F.getBoundingClientRect();
       u.value = Math.max(e.minWidth, M.width);
     }
   }
-  function I(O, M) {
-    const A = F.value - O.width - 4;
+  function B(F, M) {
+    const A = P.value - F.width - 4;
     return A > 0 ? A : M;
   }
-  function k(O, M, A) {
-    const $ = f.value, _ = M.left - v.value + M.width / 2 + b.value, N = M.top - P.value - (O.height + A.height) + m.value;
+  function k(F, M, A) {
+    const $ = r.value, _ = M.left - y.value + M.width / 2 + C.value, N = M.top - O.value - (F.height + A.height) + m.value;
     return { popoverLeft: _, popoverTop: N, arrowLeft: $ };
   }
-  function E(O, M, A) {
-    return M.top - P.value + (M.height + A.height) + m.value;
+  function E(F, M, A) {
+    return M.top - O.value + (M.height + A.height) + m.value;
   }
-  function L(O, M) {
-    const A = I(M, O), $ = O <= A ? f.value : O - A;
-    return { popoverLeft: Math.min(O, A), arrowLeft: $ };
+  function L(F, M) {
+    const A = B(M, F), $ = F <= A ? r.value : F - A;
+    return { popoverLeft: Math.min(F, A), arrowLeft: $ };
   }
-  function C(O, M, A) {
-    const $ = M.left - v.value + M.width / 2 - (A.width / 2 - (O.left - v.value)) + b.value, { arrowLeft: _, popoverLeft: N } = L($, O), U = E(O, M, A);
+  function w(F, M, A) {
+    const $ = M.left - y.value + M.width / 2 - (A.width / 2 - (F.left - y.value)) + C.value, { arrowLeft: _, popoverLeft: N } = L($, F), U = E(F, M, A);
     return { popoverLeft: N, popoverTop: U, arrowLeft: _ };
   }
-  function j(O, M, A) {
-    const $ = M.left - v.value + b.value, { arrowLeft: _, popoverLeft: N } = L($, O), U = E(O, M, A);
+  function j(F, M, A) {
+    const $ = M.left - y.value + C.value, { arrowLeft: _, popoverLeft: N } = L($, F), U = E(F, M, A);
     return { popoverLeft: N, popoverTop: U, arrowLeft: _ };
   }
   const V = /* @__PURE__ */ new Map([
     ["top", k],
-    ["bottom", C],
+    ["bottom", w],
     ["bottom-left", j]
   ]);
-  function R(O) {
+  function R(F) {
     var N;
-    const M = O.getBoundingClientRect();
+    const M = F.getBoundingClientRect();
     c.value = M.top, h.value = M.left;
     const A = t.value.getBoundingClientRect(), $ = (N = o.value) == null ? void 0 : N.getBoundingClientRect(), _ = V.get(s.value);
     if (_) {
       const { arrowLeft: U, popoverLeft: J, popoverTop: Y } = _($, M, A);
-      f.value = U, r.value = J, d.value = Y;
+      r.value = U, d.value = J, f.value = Y;
     }
-    e.keepWidthWithReference && S(O);
+    e.keepWidthWithReference && b(F);
   }
-  function z(O) {
-    if (O) {
-      const M = O.getBoundingClientRect();
-      (M.left !== h.value || M.top !== c.value) && R(O);
+  function z(F) {
+    if (F) {
+      const M = F.getBoundingClientRect();
+      (M.left !== h.value || M.top !== c.value) && R(F);
     }
   }
   return {
-    arrowStyle: y,
+    arrowStyle: v,
     popoverStyle: x,
     position: s,
     popoverWidth: u,
-    fitToReference: S,
+    fitToReference: b,
     followToReferencePosition: z,
     locateToReference: R
   };
 }
 function Et(e, t, o, l, n, i, u) {
-  const c = a(e.visible), h = B(() => c.value), { fitToReference: s, locateToReference: f } = u;
-  let r;
-  function d() {
-    c.value = !1, document.body.removeEventListener("click", r), t.emit("hidden");
+  const c = a(e.visible), h = I(() => c.value), { fitToReference: s, locateToReference: r } = u;
+  let d;
+  function f() {
+    c.value = !1, document.body.removeEventListener("click", d), t.emit("hidden");
   }
-  r = (m) => {
+  d = (m) => {
     if (!n.value.contains(m.target)) {
-      const v = n.value.closest(".popover");
-      v && v.removeEventListener("click", r), d();
+      const y = n.value.closest(".popover");
+      y && y.removeEventListener("click", d), f();
     }
   };
-  async function b(m) {
+  async function C(m) {
     if (l.value && o.value && m) {
-      c.value = !0, n.value = m, await K(), f(m), i.value && s(m), document.body.addEventListener("click", r);
-      const v = m.closest(".popover");
-      v && v.addEventListener("click", r), t.emit("shown");
+      c.value = !0, n.value = m, await K(), r(m), i.value && s(m), document.body.addEventListener("click", d);
+      const y = m.closest(".popover");
+      y && y.addEventListener("click", d), t.emit("shown");
     }
   }
-  return t.expose({ hide: d, show: b, shown: h }), { showPopover: c, hidePopverOnClickBodyHandler: r };
+  return t.expose({ hide: f, show: C, shown: h }), { showPopover: c, hidePopverOnClickBodyHandler: d };
 }
 function Ht(e, t, o, l, n) {
   const { popoverWidth: i, fitToReference: u, followToReferencePosition: c } = n;
@@ -1877,53 +1877,53 @@ const Wt = /* @__PURE__ */ G({
   props: jt,
   emits: ["shown", "hidden"],
   setup(e, t) {
-    const o = a(), l = a(), n = a(e.reference), i = a(e.keepWidthWithReference), u = B(() => !!e.title), c = Rt(e), {
+    const o = a(), l = a(), n = a(e.reference), i = a(e.keepWidthWithReference), u = I(() => !!e.title), c = Rt(e), {
       host: h
     } = c, s = At(e, o, l, c), {
-      position: f,
-      arrowStyle: r,
-      popoverStyle: d,
-      fitToReference: b,
+      position: r,
+      arrowStyle: d,
+      popoverStyle: f,
+      fitToReference: C,
       locateToReference: m
     } = s, {
-      showPopover: v,
-      hidePopverOnClickBodyHandler: P
+      showPopover: y,
+      hidePopverOnClickBodyHandler: O
     } = Et(e, t, o, l, n, i, s), {
-      onResize: F
-    } = Ht(e, t, n, i, s), x = B(() => {
-      const S = `popover in popover-${f.value}`, I = `bs-popover-${f.value}`, k = {
+      onResize: P
+    } = Ht(e, t, n, i, s), x = I(() => {
+      const b = `popover in popover-${r.value}`, B = `bs-popover-${r.value}`, k = {
         "popover-fitcontent": e.fitContent
       };
-      return k[S] = !0, k[I] = !0, (e.class || "").split(" ").reduce((L, C) => (L[C] = !0, L), k), k;
-    }), y = B(() => ({
+      return k[b] = !0, k[B] = !0, (e.class || "").split(" ").reduce((L, w) => (L[w] = !0, L), k), k;
+    }), v = I(() => ({
       "popover-content": !0,
       "popover-body": !0
     }));
     return ne(() => {
-      e.reference && m(n.value), i.value && b(n.value), window.addEventListener("resize", F);
+      e.reference && m(n.value), i.value && C(n.value), window.addEventListener("resize", P);
     }), fe(() => {
-      document.body.removeEventListener("click", P), window.removeEventListener("resize", F);
+      document.body.removeEventListener("click", O), window.removeEventListener("resize", P);
     }), () => p(de, {
       to: h
     }, {
       default: () => {
-        var S;
+        var b;
         return [Q(p("div", {
           ref: l,
           class: x.value,
-          style: d.value,
-          onClick: (I) => {
-            I.stopPropagation();
+          style: f.value,
+          onClick: (B) => {
+            B.stopPropagation();
           }
         }, [p("div", {
           ref: o,
           class: "popover-arrow arrow",
-          style: r.value
+          style: d.value
         }, null), u.value && p("h3", {
           class: "popover-title popover-header"
         }, [e.title]), p("div", {
-          class: y.value
-        }, [t.slots.default && ((S = t.slots) == null ? void 0 : S.default())])]), [[ve, v.value]])];
+          class: v.value
+        }, [t.slots.default && ((b = t.slots) == null ? void 0 : b.default())])]), [[ve, y.value]])];
       }
     });
   }
@@ -1959,30 +1959,30 @@ const ye = /* @__PURE__ */ G({
     const o = a(), l = a(e.customClass), n = a(e.modelValue), i = Pt(e, t, o), {
       shouldPopupContent: u,
       hidePopup: c
-    } = i, h = It(e, t, o, i), s = a(""), f = xt(e, t, n, s, i), {
-      hasFocusedTextBox: r,
-      commitValue: d,
-      inputGroupClass: b
-    } = f, m = kt(e, t, n, r, s, f), {
-      onMouseEnterTextBox: v,
-      onMouseLeaveTextBox: P
-    } = m, F = B(() => {
+    } = i, h = It(e, t, o, i), s = a(""), r = xt(e, t, n, s, i), {
+      hasFocusedTextBox: d,
+      commitValue: f,
+      inputGroupClass: C
+    } = r, m = kt(e, t, n, d, s, r), {
+      onMouseEnterTextBox: y,
+      onMouseLeaveTextBox: O
+    } = m, P = I(() => {
       const E = {
         "f-button-edit": !0,
         "f-cmp-inputgroup": !0,
         "f-button-edit-nowrap": !e.wrapText
       };
-      return l.value && l.value.split(" ").reduce((L, C) => (L[C] = !0, L), E), E;
+      return l.value && l.value.split(" ").reduce((L, w) => (L[w] = !0, L), E), E;
     });
     function x() {
-      return e.multiSelect && e.inputType === "tag" ? Lt(e, n, f) : Mt(e, n, f);
+      return e.multiSelect && e.inputType === "tag" ? Lt(e, n, r) : Mt(e, n, r);
     }
-    let y = x();
+    let v = x();
     W([() => e.multiSelect, () => e.inputType], () => {
-      y = x();
+      v = x();
     });
-    const S = Dt(e, h, m), I = _t(e, t, i), k = {
-      commitValue: d,
+    const b = Dt(e, h, m), B = _t(e, t, i), k = {
+      commitValue: f,
       elementRef: o,
       hidePopup: c
     };
@@ -1990,32 +1990,32 @@ const ye = /* @__PURE__ */ G({
       o.value.componentInstance = k;
     }), t.expose(k), () => p(re, null, [p("div", Le(t.attrs, {
       ref: o,
-      class: F.value,
+      class: P.value,
       id: e.id
     }), [p("div", {
-      class: b.value,
-      onMouseenter: v,
-      onMouseleave: P
-    }, [y(), S()])]), u.value && I()]);
+      class: C.value,
+      onMouseenter: y,
+      onMouseleave: O
+    }, [v(), b()])]), u.value && B()]);
   }
 });
 function $t(e) {
   const t = a(""), o = a(e.modelValue), l = a(e.data || []), n = a(e.editable);
   function i(s) {
-    const f = s.split(e.separator).map((d) => [d, !0]), r = new Map(f);
-    return l.value.filter((d) => r.has(d[e.valueField]));
+    const r = s.split(e.separator).map((f) => [f, !0]), d = new Map(r);
+    return l.value.filter((f) => d.has(f[e.valueField]));
   }
   function u(s) {
-    const f = i(s).map((r) => r[e.textField]).join(e.separator);
-    t.value = n.value ? f || s : f;
+    const r = i(s).map((d) => d[e.textField]).join(e.separator);
+    t.value = n.value ? r || s : r;
   }
   function c(s) {
-    const f = s.split(e.separator).map((d) => [d, !0]), r = new Map(f);
-    return l.value.filter((d) => r.has(d[e.textField]));
+    const r = s.split(e.separator).map((f) => [f, !0]), d = new Map(r);
+    return l.value.filter((f) => d.has(f[e.textField]));
   }
   function h() {
-    const { url: s, method: f = "GET", headers: r = {}, body: d = null } = e.remote;
-    fetch(s, { method: f, headers: r, body: d }).then((m) => {
+    const { url: s, method: r = "GET", headers: d = {}, body: f = null } = e.remote;
+    fetch(s, { method: r, headers: d, body: f }).then((m) => {
       if (m.status === 200)
         return m.json();
       throw new Error(m.statusText);
@@ -2029,8 +2029,8 @@ function $t(e) {
     l.value = e.data;
   }), W([l], ([s]) => {
     if (e.modelValue) {
-      const f = s.find((r) => r[e.valueField] === e.modelValue);
-      f && (t.value = f[e.textField]);
+      const r = s.find((d) => d[e.valueField] === e.modelValue);
+      r && (t.value = r[e.textField]);
     }
   }), W(() => e.modelValue, (s) => {
     o.value = s, u(s);
@@ -2041,69 +2041,71 @@ const te = /* @__PURE__ */ G({
   props: ae,
   emits: ["clear", "update:modelValue", "change"],
   setup(e, t) {
-    const o = a(), {
-      dataSource: l,
-      displayText: n,
-      editable: i,
-      modelValue: u,
-      getItemsByDisplayText: c
-    } = $t(e), h = B(() => e.multiSelect);
-    function s() {
-      !h.value && o.value && o.value.hidePopup();
+    const o = a(), l = a(e.disabled), n = a(e.enableClear), i = a(e.enableSearch), u = a(e.readonly), {
+      dataSource: c,
+      displayText: h,
+      editable: s,
+      modelValue: r,
+      getItemsByDisplayText: d
+    } = $t(e), f = I(() => e.multiSelect);
+    function C() {
+      !f.value && o.value && o.value.hidePopup();
     }
-    function f(v) {
-      n.value = v.map((P) => P[e.textField]).join(e.separator), u.value = v.map((P) => P[e.valueField]).join(e.separator), t.emit("update:modelValue", u.value), t.emit("change", v), s();
+    function m(v) {
+      h.value = v.map((b) => b[e.textField]).join(e.separator), r.value = v.map((b) => b[e.valueField]).join(e.separator), t.emit("update:modelValue", r.value), t.emit("change", v), C();
     }
-    function r(v) {
-      u.value = "", t.emit("update:modelValue", ""), t.emit("clear");
+    function y(v) {
+      r.value = "", t.emit("update:modelValue", ""), t.emit("clear");
     }
-    function d(v) {
-      u.value = v, t.emit("update:modelValue", u.value);
-      const P = {};
-      P[e.idField] = v, P[e.textField] = v, t.emit("change", [P]);
+    function O(v) {
+      r.value = v, t.emit("update:modelValue", r.value);
+      const b = {};
+      b[e.idField] = v, b[e.textField] = v, t.emit("change", [b]);
     }
-    function b(v) {
-      if (i.value) {
-        d(v);
+    function P(v) {
+      if (s.value) {
+        O(v);
         return;
       }
-      const P = c(v);
-      f(P);
+      const b = d(v);
+      m(b);
     }
-    function m() {
-      return n.value;
+    function x() {
+      return h.value;
     }
     return t.expose({
-      getDisplayText: m
+      getDisplayText: x
+    }), W([() => e.disabled, () => e.editable, () => e.enableClear, () => e.enableSearch, () => e.readonly], ([v, b, B, k, E]) => {
+      l.value = v, s.value = b, n.value = B, i.value = k, u.value = E;
     }), () => p(ye, {
       ref: o,
       id: e.id,
-      disable: e.disabled,
-      readonly: e.readonly,
+      disable: l.value,
+      readonly: u.value,
       forcePlaceholder: e.forcePlaceholder,
-      editable: i.value,
+      editable: s.value,
       buttonContent: e.dropDownIcon,
       placeholder: e.placeholder,
-      enableClear: e.enableClear,
+      enableClear: n.value,
       maxLength: e.maxLength,
       tabIndex: e.tabIndex,
       enableTitle: e.enableTitle,
       multiSelect: e.multiSelect,
       inputType: e.multiSelect ? "tag" : "text",
-      modelValue: n.value,
-      "onUpdate:modelValue": (v) => n.value = v,
-      onClear: r,
-      onChange: b
+      modelValue: h.value,
+      "onUpdate:modelValue": (v) => h.value = v,
+      onClear: y,
+      onChange: P
     }, {
       default: () => [p(rt, {
         idField: e.idField,
         valueField: e.valueField,
         textField: e.textField,
-        dataSource: l.value,
-        selectedValues: u.value,
+        dataSource: c.value,
+        selectedValues: r.value,
         multiSelect: e.multiSelect,
-        enableSearch: e.enableSearch,
-        onSelectionChange: f
+        enableSearch: i.value,
+        onSelectionChange: m
       }, null)]
     });
   }
@@ -2123,35 +2125,35 @@ function Nt(e, t, o) {
   function h() {
     return !!l;
   }
-  function s(y) {
-    if (!y)
+  function s(v) {
+    if (!v)
       return null;
-    if (y.schema.type === "Component")
-      return y;
-    const S = s(y.parent);
-    return S || null;
+    if (v.schema.type === "Component")
+      return v;
+    const b = s(v.parent);
+    return b || null;
   }
-  function f(y, S, I) {
+  function r(v, b, B) {
     return !!o && o.canAccepts();
   }
-  function r() {
+  function d() {
     return t.schema.label || t.schema.title || t.schema.name;
   }
-  function d() {
+  function f() {
   }
-  function b(y, S) {
-    S && (o == null || o.onAcceptMovedChildElement(S));
+  function C(v, b) {
+    b && (o == null || o.onAcceptMovedChildElement(b));
   }
-  function m(y, S) {
-    const I = String(y.getAttribute("data-controltype"));
-    return je(I);
+  function m(v, b) {
+    const B = String(v.getAttribute("data-controltype"));
+    return je(B);
   }
-  function v(y) {
-    return y.contents ? y.contents.length : -1;
+  function y(v) {
+    return v.contents ? v.contents.length : -1;
   }
-  function P(y) {
+  function O(v) {
   }
-  const F = {
+  const P = {
     canMove: i(),
     canSelectParent: u(),
     canDelete: c(),
@@ -2161,17 +2163,17 @@ function Nt(e, t, o) {
     parent: (x = t.parent) == null ? void 0 : x.componentInstance.value,
     schema: t.schema,
     styles: n,
-    canAccepts: f,
+    canAccepts: r,
     getBelongedComponentInstance: s,
-    getDraggingDisplayText: r,
-    getDragScopeElement: d,
-    onAcceptMovedChildElement: b,
+    getDraggingDisplayText: d,
+    getDragScopeElement: f,
+    onAcceptMovedChildElement: C,
     onAcceptNewChildElement: m,
-    onAddNewChildElement: v,
-    onChildElementMovedOut: P,
+    onAddNewChildElement: y,
+    onChildElementMovedOut: O,
     triggerBelongedComponentToMoveWhenMoved: !!o && o.triggerBelongedComponentToMoveWhenMoved
   };
-  return a(F);
+  return a(P);
 }
 const zt = /* @__PURE__ */ G({
   name: "FComboListDesign",