@farris/ui-vue 1.0.0-beta.6 → 1.0.0

package/button-edit/index.esm.js

@@ -1,5 +1,239 @@
-import { computed as d, watch as P, ref as g, defineComponent as E, createVNode as f, Teleport as H, Fragment as _, mergeProps as q, withDirectives as z, vShow as J } from "vue";
-const Q = {
+import { defineComponent as J, ref as i, computed as x, createVNode as B, Teleport as oe, createApp as Be, onUnmounted as ae, watch as $, nextTick as z, withDirectives as le, vShow as ue, onMounted as ie, Fragment as Ce, mergeProps as Te } from "vue";
+const xe = {};
+function se(e) {
+  const { properties: t } = e;
+  return Object.keys(t).reduce((l, n) => (l[n] = t[n].type === "object" && t[n].properties ? se(t[n]) : t[n].default, l), {});
+}
+function we(e, t) {
+  const a = se(t);
+  return Object.keys(e).reduce((l, n) => (l[n] = e[n], l), a), a;
+}
+function ke(e, t) {
+  return Object.keys(e).filter((l) => e[l] != null).reduce((l, n) => {
+    if (t.has(n)) {
+      const c = t.get(n);
+      if (typeof c == "string")
+        l[c] = e[n];
+      else {
+        const d = c(n, e[n]);
+        Object.assign(l, d);
+      }
+    } else
+      l[n] = e[n];
+    return l;
+  }, {});
+}
+function Pe(e, t, a = /* @__PURE__ */ new Map()) {
+  const l = we(e, t);
+  return ke(l, a);
+}
+function Ie(e, t, a = /* @__PURE__ */ new Map()) {
+  return xe[t.title] = t, (l) => {
+    const n = Pe(l, t, a), c = Object.keys(e).reduce((d, u) => (d[u] = e[u].default, d), {});
+    return Object.assign(c, n);
+  };
+}
+function Oe(e, t) {
+  return { customClass: t.class };
+}
+const Re = /* @__PURE__ */ new Map([
+  ["appearance", Oe]
+]), Le = "https://json-schema.org/draft/2020-12/schema", Se = "https://farris-design.gitee.io/button-edit.schema.json", je = "button-edit", Me = "A Farris Input Component", De = "object", Ae = {
+  id: {
+    description: "The unique identifier for a Input Group",
+    type: "string"
+  },
+  type: {
+    description: "The type string of Input Group component",
+    type: "string",
+    default: "button-edit"
+  },
+  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
+  },
+  enableLinkLabel: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  label: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  lableWidth: {
+    description: "",
+    type: "number"
+  },
+  placeHolder: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  readonly: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  require: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  tabindex: {
+    description: "",
+    type: "number",
+    default: -1
+  },
+  textAlign: {
+    description: "",
+    type: "string",
+    enum: [
+      "left",
+      "middle",
+      "right"
+    ],
+    default: "left"
+  },
+  visible: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  onBlur: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  onClickLinkLabel: {
+    description: "",
+    type: "sting",
+    default: ""
+  },
+  autoComplete: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  buttonContent: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  enableClear: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  inputType: {
+    description: "",
+    type: "string",
+    enum: [
+      "text",
+      "tag"
+    ],
+    default: "text"
+  },
+  multiSelect: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  popup: {
+    description: "",
+    type: "object",
+    properties: {
+      footerButtons: {
+        type: "array",
+        default: []
+      },
+      height: {
+        type: "number",
+        default: 600
+      },
+      dataMapping: {
+        type: "object"
+      },
+      contents: {
+        type: "array",
+        default: []
+      },
+      showMaxButton: {
+        type: "boolean",
+        default: !0
+      },
+      showCloseButton: {
+        type: "boolean",
+        default: !0
+      },
+      showFooter: {
+        type: "boolean",
+        default: !0
+      },
+      title: {
+        type: "string",
+        default: ""
+      },
+      width: {
+        type: "number",
+        default: 800
+      }
+    }
+  },
+  separator: {
+    type: "string",
+    default: ","
+  },
+  showButtonWhenDisabled: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  wrapText: {
+    type: "boolean",
+    default: !1
+  },
+  onClear: {
+    description: "",
+    type: "string",
+    default: ""
+  }
+}, We = [
+  "id",
+  "type"
+], Ee = {
+  $schema: Le,
+  $id: Se,
+  title: je,
+  description: Me,
+  type: De,
+  properties: Ae,
+  required: We
+}, ce = {
   /**
    * 组件标识
    */
@@ -8,6 +242,7 @@ const Q = {
    * 扩展按钮显示内容，这是一段现在扩展按钮中的html标签
    */
   buttonContent: { type: String, default: '<i class="f-icon f-icon-lookup"></i>' },
+  buttonBehavior: { type: String, default: "Popup" },
   /**
    * 启用输入框自动完成功能
    */
@@ -71,284 +306,903 @@ const Q = {
   /**
    * 输入框Tab键索引
    */
-  tabIndex: Number
-};
-function X(e, n, o) {
-  const r = d(() => ({
+  tabIndex: Number,
+  popupHost: { type: Object },
+  popupRightBoundary: { type: Object },
+  popupOffsetX: { type: Object },
+  popupOnInput: { type: Boolean, default: !1 },
+  popupOnFocus: { type: Boolean, default: !1 },
+  popupMinWidth: { type: Number, default: 320 },
+  wrapText: { type: Boolean, default: !1 },
+  /**
+   * 可选，是否支持多选
+   * 默认`false`
+   */
+  multiSelect: { type: Boolean, default: !1 },
+  /**
+   * 可选，分隔符
+   * 默认`,`
+   */
+  separator: { type: String, default: "," }
+}, ne = Ie(ce, Ee, Re), Fe = {
+  popupContentPosition: { type: Object, default: { left: 0, top: 0 } },
+  host: { type: Object }
+}, Ve = /* @__PURE__ */ J({
+  name: "FOverlay",
+  props: Fe,
+  emits: ["click"],
+  setup(e, t) {
+    const a = i(e.popupContentPosition), l = i(e.host);
+    function n(u) {
+      t.emit("click"), u.preventDefault(), u.stopPropagation();
+    }
+    const c = x(() => {
+      const u = l.value;
+      if (u) {
+        const y = u.getBoundingClientRect(), {
+          left: f,
+          top: g,
+          height: v
+        } = y;
+        return {
+          left: f,
+          top: g + v
+        };
+      }
+      return a.value;
+    }), d = x(() => ({
+      position: "relative",
+      left: `${c.value.left}px`,
+      top: `${c.value.top}px`
+    }));
+    return () => B(oe, {
+      to: "body"
+    }, {
+      default: () => {
+        var u, y;
+        return [B("div", {
+          class: "overlay-container",
+          style: "pointer-events: auto;",
+          onClick: (f) => n(f)
+        }, [B("div", {
+          style: d.value
+        }, [(y = (u = t.slots).default) == null ? void 0 : y.call(u)])])];
+      }
+    });
+  }
+});
+function Ne(e) {
+  if (e.content && e.content.render)
+    return e.content.render;
+  if (e.render && typeof e.render == "function")
+    return e.render;
+}
+function Xe(e) {
+  const t = document.createElement("div");
+  t.style.display = "contents";
+  let a;
+  const l = e.onClickCallback || (() => {
+  }), n = () => {
+    l(), a && a.unmount();
+  };
+  return a = Be({
+    setup() {
+      ae(() => {
+        document.body.removeChild(t);
+      });
+      const c = Ne(e);
+      return () => B(Ve, {
+        "popup-content-position": e.popupPosition,
+        host: e.host,
+        onClick: n
+      }, {
+        default: () => [c && c()]
+      });
+    }
+  }), document.body.appendChild(t), a.mount(t), a;
+}
+class He {
+  static show(t) {
+    return Xe(t);
+  }
+}
+function ze(e, t, a, l) {
+  const n = i(e.buttonBehavior), c = i(e.popupOnInput), d = x(() => ({
     "input-group-append": !0,
     "append-force-show": e.showButtonWhenDisabled && (e.readonly || e.disable)
-  })), a = d(() => e.showButtonWhenDisabled || (!e.editable || !e.readonly) && !e.disable);
-  function l(i) {
-    a.value && (o.value = !0, n.emit("clickButton", { origin: i, value: e.modelValue })), i.stopPropagation();
+  })), u = x(() => e.showButtonWhenDisabled || (!e.editable || !e.readonly) && !e.disable);
+  async function y(m) {
+    if (u.value) {
+      const T = !!t.slots.default;
+      n.value === "Overlay" && He.show({
+        host: a.value,
+        render: () => {
+          if (t.slots.default)
+            return t.slots.default();
+        }
+      }), T && n.value === "Popup" && l.togglePopup(), T && c.value && l.hidePopup(), t.emit("clickButton", { origin: m, value: e.modelValue });
+    }
+    m.stopPropagation();
   }
-  function u(i) {
-    n.emit("mouseEnterIcon", i);
+  function f(m) {
+    t.emit("mouseEnterIcon", m);
   }
-  function s(i) {
-    n.emit("mouseLeaveIcon", i);
+  function g(m) {
+    t.emit("mouseLeaveIcon", m);
   }
-  function c() {
-    n.emit("mouseOverButton");
+  function v() {
+    t.emit("mouseOverButton");
+  }
+  return {
+    buttonClass: d,
+    onClickButton: y,
+    onMouseEnterButton: f,
+    onMouseLeaveButton: g,
+    onMouseOverButton: v
+  };
+}
+function $e(e, t, a, l, n, c) {
+  const d = i(!1), u = x(() => e.enableClear && !e.readonly && !e.disable), { changeTextBoxValue: y } = c;
+  function f(T) {
+    d.value = T;
+  }
+  $(n, () => {
+    l.value ? f(!!n.value) : f(!1);
+  });
+  function g(T) {
+    const w = !e.readonly && !e.disable && e.editable, b = !e.editable;
+    T.stopPropagation(), (w || b) && (y("", !1), f(!d.value), t.emit("clear"));
+  }
+  function v(T) {
+    if (u.value) {
+      if (!a.value) {
+        f(!1);
+        return;
+      }
+      (!e.editable || !e.readonly) && !e.disable && f(!0);
+    }
+  }
+  function m(T) {
+    u.value && f(!1);
   }
   return {
-    buttonClass: r,
-    onClickButton: l,
-    onMouseEnterButton: u,
-    onMouseLeaveButton: s,
-    onMouseOverButton: c
+    enableClearButton: u,
+    showClearButton: d,
+    onClearValue: g,
+    onMouseEnterTextBox: v,
+    onMouseLeaveTextBox: m
   };
 }
-function I(e, n, o, r) {
-  const a = d(() => e.enableTitle ? o.value : ""), l = d(() => (e.disable || e.readonly) && !e.forcePlaceholder ? "" : e.placeholder), u = d(() => e.readonly || !e.editable);
-  let s = !1;
-  const c = d(() => !e.disable && s), i = d(() => ({
+function Ge(e, t, a, l, n) {
+  const c = i(e.popupOnInput), d = i(e.popupOnFocus), { shouldPopupContent: u } = n, y = x(() => e.enableTitle ? a.value : ""), f = x(() => (e.disable || e.readonly) && !e.forcePlaceholder ? "" : e.placeholder), g = x(() => e.readonly || !e.editable);
+  let v = !1;
+  const m = x(() => !e.disable && v), T = x(() => ({
     "text-left": e.textAlign === "left",
     "text-center": e.textAlign === "center",
     "text-right": e.textAlign === "right",
     "form-control": !0,
     "f-utils-fill": !0
+  })), w = x(() => ({
+    "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": m.value
   }));
-  function B(t, x = !0) {
-    o.value !== t && (o.value = t, x && n.emit("change", t), n.emit("update:modelValue", t));
+  function b(p, D = !0) {
+    a.value !== p && (a.value = p, D && t.emit("change", p), t.emit("update:modelValue", p));
+  }
+  function W(p) {
+    u.value = !1, b(p, !0);
   }
-  P(
+  $(
     () => e.modelValue,
-    (t) => {
-      o.value = t, n.emit("change", t);
+    (p) => {
+      a.value = p, t.emit("change", p);
     }
   );
-  function m(t) {
-    s = !1, n.emit("blur", t), t.stopPropagation();
+  function O(p) {
+    v = !1, t.emit("blur", p), p.stopPropagation();
   }
-  function v(t) {
-    n.emit("click", t);
+  function R(p) {
+    t.emit("click", p);
   }
-  function y(t) {
+  function P(p) {
     if (e.disable) {
-      s = !0;
+      v = !0;
       return;
     }
-    s = !0, u.value || n.emit("focus", t);
+    v = !0, g.value || (t.emit("focus", p), d.value && !u.value && n.popup());
   }
-  function b(t) {
-    n.emit("input", t.target.value);
-    const x = t.target.value;
-    r.value = x, o.value !== x && B(x, !1);
+  function L(p) {
+    t.emit("input", p.target.value);
+    const D = p.target.value;
+    l.value = D, a.value !== D && b(D, !1), c.value && !u.value && n.popup();
   }
-  function T(t) {
-    t.target.tagName !== "INPUT" && t.preventDefault(), t.stopPropagation();
+  function j(p) {
+    p.target.tagName !== "INPUT" && p.preventDefault(), p.stopPropagation();
   }
-  function p(t) {
-    n.emit("keydown", t);
+  function S(p) {
+    t.emit("keydown", p);
   }
-  function k(t) {
-    n.emit("keyup", t);
+  function E(p) {
+    p.key === "Enter" && (c.value || d.value) && n.hidePopup(), t.emit("keyup", p);
   }
-  function w(t) {
-    const x = t.target.value;
-    B(x);
+  function M(p) {
+    const D = p.target.value;
+    p.stopPropagation(), b(D);
   }
   return {
-    hasFocusedTextBox: c,
-    isTextBoxReadonly: u,
-    textBoxClass: i,
-    textBoxPlaceholder: l,
-    textBoxTitle: a,
-    changeTextBoxValue: B,
-    onBlurTextBox: m,
-    onClickTextBox: v,
-    onFocusTextBox: y,
-    onInput: b,
-    onKeyDownTextBox: p,
-    onKeyUpTextBox: k,
+    hasFocusedTextBox: m,
+    isTextBoxReadonly: g,
+    textBoxClass: T,
+    textBoxPlaceholder: f,
+    textBoxTitle: y,
+    inputGroupClass: w,
+    changeTextBoxValue: b,
+    commitValue: W,
+    onBlurTextBox: O,
+    onClickTextBox: R,
+    onFocusTextBox: P,
+    onInput: L,
+    onKeyDownTextBox: S,
+    onKeyUpTextBox: E,
+    onMouseDownTextBox: j,
+    onTextBoxValueChange: M
+  };
+}
+function qe(e, t, a) {
+  const l = i(), n = i(!1);
+  function c() {
+    const f = l.value;
+    f && f.show(a.value);
+  }
+  async function d() {
+    !!t.slots.default && (n.value = !n.value, await z(), c());
+  }
+  async function u() {
+    !!t.slots.default && (n.value = !0, await z(), c());
+  }
+  function y() {
+    n.value = !1;
+  }
+  return { hidePopup: y, popup: u, shouldPopupContent: n, togglePopup: d, popoverRef: l };
+}
+function Ue(e, t, a) {
+  const {
+    isTextBoxReadonly: l,
+    textBoxClass: n,
+    textBoxPlaceholder: c,
+    textBoxTitle: d,
+    onBlurTextBox: u,
+    onClickTextBox: y,
+    onFocusTextBox: f,
+    onInput: g,
+    onKeyDownTextBox: v,
+    onKeyUpTextBox: m,
     onMouseDownTextBox: T,
     onTextBoxValueChange: w
+  } = a;
+  return () => B("input", {
+    name: "input-group-value",
+    autocomplete: e.autoComplete ? "on" : "off",
+    class: n.value,
+    disabled: e.disable,
+    maxlength: e.maxLength,
+    minlength: e.minLength,
+    placeholder: c.value,
+    readonly: l.value,
+    tabindex: e.tabIndex,
+    title: d.value,
+    type: e.inputType,
+    value: t.value,
+    onBlur: u,
+    onChange: w,
+    onClick: y,
+    onFocus: f,
+    onInput: g,
+    onKeydown: v,
+    onKeyup: m,
+    onMousedown: T
+  }, null);
+}
+const _e = {
+  activeTag: { Type: String, default: "" },
+  addButtonText: { Type: String, default: "" },
+  customClass: { Type: String, default: "" },
+  customStyle: { Type: String, default: "" },
+  data: { type: Array, default: [] },
+  enableAddButton: { Type: Boolean, default: !1 },
+  placeholder: { Type: String, default: "" },
+  selectable: { Type: Boolean, default: !1 },
+  showAddButton: { Type: Boolean, default: !1 },
+  showClose: { Type: Boolean, default: !1 },
+  showColor: { Type: Boolean, default: !1 },
+  showInput: { Type: Boolean, default: !1 },
+  tagType: { Type: String, default: "" },
+  tagStyle: { Type: String, default: "" },
+  wrapText: { Type: Boolean, default: !1 },
+  draggable: { Type: Boolean, default: !1 }
+};
+function Je(e, t, a, l) {
+  const n = i(-1), c = i(!1);
+  function d(g, v, m) {
+    g.stopPropagation(), v && setTimeout(() => {
+      n.value = m, c.value = !0, v.moving = !0;
+    });
+  }
+  function u(g, v) {
+    if (g.preventDefault(), n.value !== v) {
+      const m = l.value[n.value], T = l.value;
+      T.splice(n.value, 1), T.splice(v, 0, m), n.value = v;
+    }
+  }
+  function y(g, v) {
+    g.preventDefault(), g.dataTransfer && (g.dataTransfer.dropEffect = "move");
+  }
+  function f(g, v) {
+    v && (v.moving = !1), a.value = l.value.filter((m) => m.type === "Tag").map((m) => m.payload), c.value = !1, t.emit("change", a.value);
+  }
+  return {
+    dragstart: d,
+    dragenter: u,
+    dragover: y,
+    dragend: f,
+    isDragging: c
   };
 }
-function Y(e, n, o, r, a) {
-  const l = g(!1), u = d(() => e.enableClear && !e.readonly && !e.disable), { changeTextBoxValue: s } = I(e, n, o, a);
-  function c(v) {
-    l.value = v;
+const Qe = /* @__PURE__ */ J({
+  name: "FTags",
+  props: _e,
+  emits: ["remove", "selectionChange", "change"],
+  setup(e, t) {
+    const a = i(e.selectable), l = i(e.customClass), n = i(e.data), c = i(e.tagType), d = i(e.tagStyle), u = i(e.showColor), y = i(e.activeTag), f = i(e.customStyle), g = i(e.showClose), v = i(e.showAddButton), m = i(e.showInput), T = i(e.addButtonText), w = i(e.enableAddButton);
+    i(e.placeholder), i(""), i();
+    const b = i(), W = i(e.wrapText), O = i();
+    function R() {
+      const o = n.value.map((s) => ({
+        type: "Tag",
+        payload: s
+      }));
+      return v.value && o.push({
+        type: "AddButton"
+      }), o;
+    }
+    const P = i(R());
+    function L(o) {
+      n.value = o, P.value = R();
+    }
+    const j = x(() => P.value.findIndex((o) => o.type === "Input")), S = Je(e, t, n, P), {
+      dragstart: E,
+      dragenter: M,
+      dragover: p,
+      dragend: D
+    } = S;
+    $(() => e.data, (o) => L(o));
+    const Q = x(() => {
+      const o = {
+        "farris-tags": !0,
+        "farris-tags-checkable": a.value,
+        "farris-tags-nowrap": !W.value
+      };
+      return l.value.split(" ").reduce((s, r) => (s[r] = !0, s), o), o;
+    });
+    function G(o) {
+      const s = {
+        "farris-tag-item": !0,
+        "farris-tag-item-checked": a.value && o.checked,
+        "farris-tag-item-checkable": a.value,
+        "farris-tag-item-has-color": u.value,
+        "farris-tag-item-actived": y.value === o.name
+      };
+      if (c.value) {
+        const r = `farris-tag-item-${c.value}`;
+        s[r] = !0;
+      }
+      return s;
+    }
+    const Y = x(() => {
+      const o = {};
+      return f.value && f.value.split(";").reduce((s, r) => {
+        const I = r.split(":");
+        return s[I[0]] = I[1], s;
+      }, o), o;
+    });
+    function q(o, s) {
+      a.value && s.selectable && (s.checked = !s.checked, y.value = s.checked ? s.name : "", s.checked && n.value.filter((r) => r.name !== s.name).forEach((r) => {
+        r.checked = !s.checked;
+      }), t.emit("change", n.value), t.emit("selectionChange", s));
+    }
+    function h(o, s) {
+      let r;
+      switch (o.key) {
+        case "Backspace":
+          n.value = n.value.filter((I) => I.name !== s.name), t.emit("change", n.value);
+          break;
+        case "ArrowLeft":
+          r = Math.max(b.value.scrollLeft + 20, 0), b.value.scrollLeft = r;
+          break;
+        case "ArrowRight":
+          r = Math.max(b.value.scrollLeft - 20, 0), b.value.scrollLeft = r;
+      }
+    }
+    function C(o, s) {
+      const r = n.value.findIndex((I) => I.name === s.name);
+      if (r > -1) {
+        const [I] = n.value.splice(r, 1);
+        P.value = R(), t.emit("change", n.value), t.emit("remove", n.value, I, r);
+      }
+      o.stopPropagation();
+    }
+    const k = x(() => ({
+      "farris-tag-item": !0,
+      "farris-tag-add-button": !0,
+      "farris-tag-add-button-disabled": !w.value
+    }));
+    function F(o) {
+    }
+    function A() {
+      return B("li", {
+        class: k.value,
+        onClick: (o) => void 0
+      }, [B("span", {
+        class: "f-icon f-icon-amplification"
+      }, null), B("span", {
+        class: "farris-tag-add-text"
+      }, [T.value])]);
+    }
+    function V(o) {
+      if (o && !o.innerText) {
+        const s = j.value;
+        if (s > 0) {
+          const [r] = n.value.splice(s - 1, 1);
+          P.value.splice(s - 1, 1), t.emit("remove", n.value, r, s - 1);
+        }
+      }
+    }
+    function H(o, s, r) {
+      o > -1 && (n.value.splice(o, 0, {
+        name: s,
+        value: r,
+        selectable: a.value
+      }), P.value = R(), t.emit("change", n.value));
+    }
+    function U(o) {
+      if (o && o.innerText) {
+        const s = o.innerText, r = j.value;
+        H(r, s, s), o.innerText = "";
+      }
+    }
+    function Z(o) {
+      const s = o.target;
+      s && (s.innerText ? U(s) : t.emit("change", n.value));
+    }
+    function re(o) {
+      o.key === "Enter" && U(o.target), o.key === "Backspace" && (V(o.target), z(() => {
+        O.value && O.value.focus();
+      }));
+    }
+    function de() {
+      return B("li", {
+        class: "farris-tag-input-box"
+      }, [B("div", {
+        ref: O,
+        class: "form-control",
+        contenteditable: "true",
+        onKeyup: re,
+        onBlur: Z
+      }, null)]);
+    }
+    function fe(o, s) {
+      return B("li", {
+        class: G(o),
+        style: Y.value,
+        tabindex: 0,
+        id: o.name,
+        key: o.name,
+        onClick: (r) => q(r, o),
+        onKeydown: (r) => h(r, o),
+        draggable: "true",
+        onDragstart: (r) => E(r, o, s),
+        onDragenter: (r) => M(r, s),
+        onDragend: (r) => D(r, o),
+        onDragover: (r) => p(r, s)
+      }, [B("div", {
+        title: o.name,
+        class: "tag-box"
+      }, [o.name]), g.value && B("span", {
+        class: "tag-delete"
+      }, [B("i", {
+        class: "f-icon f-icon-close",
+        onClick: (r) => C(r, o)
+      }, null)])]);
+    }
+    function pe() {
+      return P.value.map((o, s) => {
+        switch (o.type) {
+          case "Tag":
+            return fe(o.payload, s);
+          case "AddButton":
+            return A();
+          case "Input":
+            return de();
+        }
+      });
+    }
+    const ve = x(() => ({
+      "farris-tags-item-container": !0,
+      "farris-tag-item-capsule": d.value === "capsule"
+    }));
+    function ge(o) {
+      const s = Math.max(b.value.scrollLeft - o.deltaX, 0);
+      b.value.scrollLeft = s;
+    }
+    function he(o) {
+      const s = b.value, r = n.value.length - 1;
+      if (s) {
+        const I = Array.from(s.children).filter((N) => N.className.indexOf("farris-tag-item") > -1).findIndex((N) => {
+          const X = N.getBoundingClientRect(), K = window.getComputedStyle(N), te = parseInt(K["margin-left"], 10) + X.width + parseInt(K["margin-right"], 10);
+          return X.left + te > o;
+        });
+        if (I > -1)
+          return I;
+      }
+      return r;
+    }
+    function ye(o) {
+      if (m.value) {
+        const r = he(o.clientX) + 1, N = P.value.filter((X) => X.type !== "Input");
+        N.splice(r, 0, {
+          type: "Input"
+        }), P.value = N, z(() => {
+          O.value && O.value.focus();
+        });
+      }
+    }
+    function me(o) {
+      var r;
+      o.preventDefault(), o.stopPropagation();
+      const s = (r = o.dataTransfer) == null ? void 0 : r.getData("Text");
+      if (s) {
+        const I = s.split(":"), N = I[0], X = I[1];
+        [...n.value].findIndex((ee) => (console.log(`${ee.value} === ${X} is ${ee.value === X}`), ee.value === X)) > -1 || H(n.value.length, N, X);
+      }
+    }
+    function be(o) {
+      o.preventDefault();
+    }
+    return () => B("div", {
+      class: Q.value,
+      onClick: ye,
+      onDrop: me,
+      onDragover: be
+    }, [B("ul", {
+      ref: b,
+      class: ve.value,
+      onWheel: (o) => ge(o)
+    }, [pe()])]);
   }
-  P(a, () => {
-    r.value ? c(!!a.value) : c(!1);
+});
+function Ye(e, t, a) {
+  const l = i(e.separator), {
+    changeTextBoxValue: n
+  } = a, c = x(() => t.value ? t.value.split(l.value).map((u) => ({
+    name: u,
+    selectable: !0
+  })) : []);
+  function d(u) {
+    n(u.map((y) => y.name).join(l.value), !0);
+  }
+  return () => B(Qe, {
+    class: "form-control",
+    data: c.value,
+    showClose: !0,
+    showInput: !0,
+    onChange: d
+  }, null);
+}
+function Ze(e, t, a) {
+  const {
+    buttonClass: l,
+    onClickButton: n,
+    onMouseEnterButton: c,
+    onMouseLeaveButton: d
+  } = t, {
+    enableClearButton: u,
+    showClearButton: y,
+    onClearValue: f
+  } = a;
+  return () => B("div", {
+    class: l.value
+  }, [u.value && le(B("span", {
+    class: "input-group-text input-group-clear",
+    onClick: f
+  }, [B("i", {
+    class: "f-icon modal_close"
+  }, null)]), [[ue, y.value]]), e.buttonContent && B("span", {
+    class: "input-group-text input-group-append-button",
+    innerHTML: e.buttonContent,
+    onClick: n,
+    onMouseenter: c,
+    onMouseleave: d
+  }, null)]);
+}
+const Ke = {
+  title: { type: String },
+  placement: { type: String, default: "bottom" },
+  reference: {
+    type: Object
+  },
+  host: {
+    type: Object
+  },
+  leftBoundary: {
+    type: Object
+  },
+  rightBoundary: {
+    type: Object
+  },
+  visible: { type: Boolean, default: !1 },
+  class: { type: String },
+  offsetX: { type: Object, default: i(0) },
+  zIndex: { type: Number, default: -1 },
+  keepWidthWithReference: { type: Boolean, default: !1 },
+  fitContent: { type: Boolean, default: !1 },
+  minWidth: { type: Number, default: -1 }
+};
+function et(e) {
+  const t = e.host ? e.host : "body", a = x(() => t === "body" ? 0 : t ? t.getBoundingClientRect().top : 0), l = x(() => t === "body" ? 0 : t ? t.getBoundingClientRect().left : 0), n = x(() => 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: a, hostWidth: n };
+}
+function tt(e, t, a, l) {
+  var q;
+  const n = i(0), c = i(((q = e.offsetX) == null ? void 0 : q.value) || 0), d = i(-1), u = i(-1), y = i(-1), f = i(e.placement), g = i(0), v = i(0), m = i(0), T = i(document.documentElement.scrollLeft), w = i(document.documentElement.scrollTop), { hostLeft: b, hostTop: W, hostWidth: O } = l;
+  $(e.offsetX, (h) => {
+    n.value = h - c.value;
   });
-  function i(v) {
-    const y = !e.readonly && !e.disable && e.editable, b = !e.editable;
-    v.stopPropagation(), (y || b) && (s("", !1), c(!l.value), n.emit("clear"));
+  const R = x(() => {
+    const h = {
+      left: `${v.value}px`,
+      top: `${m.value}px`,
+      transform: `translateX(${n.value}px)`
+    };
+    return e.zIndex !== -1 && (h["z-index"] = e.zIndex), d.value !== -1 && (h.width = `${d.value}px`), h;
+  }), P = x(() => ({
+    left: `${g.value}px`
+  }));
+  function L(h) {
+    if (h && e.keepWidthWithReference) {
+      const C = h.getBoundingClientRect();
+      d.value = Math.max(e.minWidth, C.width);
+    }
   }
-  function B(v) {
-    if (u.value) {
-      if (!o.value) {
-        c(!1);
-        return;
-      }
-      (!e.editable || !e.readonly) && !e.disable && c(!0);
+  function j(h, C) {
+    const k = O.value - h.width - 4;
+    return k > 0 ? k : C;
+  }
+  function S(h, C, k) {
+    const F = g.value, A = C.left - b.value + C.width / 2 + T.value, V = C.top - W.value - (h.height + k.height) + w.value;
+    return { popoverLeft: A, popoverTop: V, arrowLeft: F };
+  }
+  function E(h, C, k) {
+    return C.top - W.value + (C.height + k.height) + w.value;
+  }
+  function M(h, C) {
+    const k = j(C, h), F = h <= k ? g.value : h - k;
+    return { popoverLeft: Math.min(h, k), arrowLeft: F };
+  }
+  function p(h, C, k) {
+    const F = C.left - b.value + C.width / 2 - (k.width / 2 - (h.left - b.value)) + T.value, { arrowLeft: A, popoverLeft: V } = M(F, h), H = E(h, C, k);
+    return { popoverLeft: V, popoverTop: H, arrowLeft: A };
+  }
+  function D(h, C, k) {
+    const F = C.left - b.value + T.value, { arrowLeft: A, popoverLeft: V } = M(F, h), H = E(h, C, k);
+    return { popoverLeft: V, popoverTop: H, arrowLeft: A };
+  }
+  const Q = /* @__PURE__ */ new Map([
+    ["top", S],
+    ["bottom", p],
+    ["bottom-left", D]
+  ]);
+  function G(h) {
+    var V;
+    const C = h.getBoundingClientRect();
+    u.value = C.top, y.value = C.left;
+    const k = t.value.getBoundingClientRect(), F = (V = a.value) == null ? void 0 : V.getBoundingClientRect(), A = Q.get(f.value);
+    if (A) {
+      const { arrowLeft: H, popoverLeft: U, popoverTop: Z } = A(F, C, k);
+      g.value = H, v.value = U, m.value = Z;
     }
+    e.keepWidthWithReference && L(h);
   }
-  function m(v) {
-    u.value && c(!1);
+  function Y(h) {
+    if (h) {
+      const C = h.getBoundingClientRect();
+      (C.left !== y.value || C.top !== u.value) && G(h);
+    }
   }
   return {
-    enableClearButton: u,
-    showClearButton: l,
-    onClearValue: i,
-    onMouseEnterTextBox: B,
-    onMouseLeaveTextBox: m
+    arrowStyle: P,
+    popoverStyle: R,
+    position: f,
+    popoverWidth: d,
+    fitToReference: L,
+    followToReferencePosition: Y,
+    locateToReference: G
   };
 }
-const Z = {
-  popupContentPosition: { type: Object, default: { left: 0, top: 0 } }
-}, $ = /* @__PURE__ */ E({
-  name: "FOverlay",
-  props: Z,
-  emits: ["click"],
-  setup(e, n) {
-    const o = g(e.popupContentPosition);
-    function r(l) {
-      n.emit("click"), l.preventDefault(), l.stopPropagation();
+function nt(e, t, a, l, n, c, d) {
+  const u = i(e.visible), y = x(() => u.value), { fitToReference: f, locateToReference: g } = d;
+  let v;
+  function m() {
+    u.value = !1, document.body.removeEventListener("click", v), t.emit("hidden");
+  }
+  v = (w) => {
+    if (!n.value.contains(w.target)) {
+      const b = n.value.closest(".popover");
+      b && b.removeEventListener("click", v), m();
     }
-    const a = d(() => ({
-      position: "relative",
-      left: `${o.value.left}px`,
-      top: `${o.value.top}px`
+  };
+  async function T(w) {
+    if (l.value && a.value && w) {
+      u.value = !0, n.value = w, await z(), g(w), c.value && f(w), document.body.addEventListener("click", v);
+      const b = w.closest(".popover");
+      b && b.addEventListener("click", v), t.emit("shown");
+    }
+  }
+  return t.expose({ hide: m, show: T, shown: y }), { showPopover: u, hidePopverOnClickBodyHandler: v };
+}
+function ot(e, t, a, l, n) {
+  const { popoverWidth: c, fitToReference: d, followToReferencePosition: u } = n;
+  function y() {
+    if (a.value) {
+      u(a.value);
+      const f = a.value.getBoundingClientRect();
+      l.value && f.width !== c.value && d(a.value);
+    }
+  }
+  return { onResize: y };
+}
+const at = /* @__PURE__ */ J({
+  name: "FPopover",
+  props: Ke,
+  emits: ["shown", "hidden"],
+  setup(e, t) {
+    const a = i(), l = i(), n = i(e.reference), c = i(e.keepWidthWithReference), d = x(() => !!e.title), u = et(e), {
+      host: y
+    } = u, f = tt(e, a, l, u), {
+      position: g,
+      arrowStyle: v,
+      popoverStyle: m,
+      fitToReference: T,
+      locateToReference: w
+    } = f, {
+      showPopover: b,
+      hidePopverOnClickBodyHandler: W
+    } = nt(e, t, a, l, n, c, f), {
+      onResize: O
+    } = ot(e, t, n, c, f), R = x(() => {
+      const L = `popover in popover-${g.value}`, j = `bs-popover-${g.value}`, S = {
+        "popover-fitcontent": e.fitContent
+      };
+      return S[L] = !0, S[j] = !0, (e.class || "").split(" ").reduce((M, p) => (M[p] = !0, M), S), S;
+    }), P = x(() => ({
+      "popover-content": !0,
+      "popover-body": !0
     }));
-    return () => f(H, {
-      to: "body"
+    return ie(() => {
+      e.reference && w(n.value), c.value && T(n.value), window.addEventListener("resize", O);
+    }), ae(() => {
+      document.body.removeEventListener("click", W), window.removeEventListener("resize", O);
+    }), () => B(oe, {
+      to: y
     }, {
       default: () => {
-        var l, u;
-        return [f("div", {
-          class: "overlay-container",
-          style: "pointer-events: auto;",
-          onClick: (s) => r(s)
-        }, [f("div", {
-          style: a.value
-        }, [(u = (l = n.slots).default) == null ? void 0 : u.call(l)])])];
+        var L;
+        return [le(B("div", {
+          ref: l,
+          class: R.value,
+          style: m.value,
+          onClick: (j) => {
+            j.stopPropagation();
+          }
+        }, [B("div", {
+          ref: a,
+          class: "popover-arrow arrow",
+          style: v.value
+        }, null), d.value && B("h3", {
+          class: "popover-title popover-header"
+        }, [e.title]), B("div", {
+          class: P.value
+        }, [t.slots.default && ((L = t.slots) == null ? void 0 : L.default())])]), [[ue, b.value]])];
       }
     });
   }
-}), M = /* @__PURE__ */ E({
+});
+function lt(e, t, a) {
+  const l = i(e.popupMinWidth), {
+    hidePopup: n,
+    popoverRef: c
+  } = a;
+  return () => B(at, {
+    ref: c,
+    visible: !0,
+    placement: "bottom-left",
+    host: e.popupHost,
+    "keep-width-with-reference": !0,
+    fitContent: !0,
+    "right-boundary": e.popupRightBoundary,
+    minWidth: l.value,
+    offsetX: e.popupOffsetX,
+    onHidden: n
+  }, {
+    default: () => {
+      var d, u;
+      return [(u = (d = t.slots).default) == null ? void 0 : u.call(d)];
+    }
+  });
+}
+const _ = /* @__PURE__ */ J({
   name: "FButtonEdit",
-  props: Q,
+  props: ce,
   emits: ["updateExtendInfo", "clear", "change", "click", "clickButton", "blur", "focus", "mouseEnterIcon", "mouseLeaveIcon", "keyup", "keydown", "inputClick", "input", "update:modelValue"],
-  setup(e, n) {
-    const o = g(), r = g(e.modelValue), a = g(!1), {
-      buttonClass: l,
-      onClickButton: u,
-      onMouseEnterButton: s,
-      onMouseLeaveButton: c
-    } = X(e, n, a), i = g(""), {
-      hasFocusedTextBox: B,
-      isTextBoxReadonly: m,
-      textBoxClass: v,
-      textBoxPlaceholder: y,
-      textBoxTitle: b,
-      onBlurTextBox: T,
-      onClickTextBox: p,
-      onFocusTextBox: k,
-      onInput: w,
-      onKeyDownTextBox: t,
-      onKeyUpTextBox: x,
-      onMouseDownTextBox: L,
-      onTextBoxValueChange: S
-    } = I(e, n, r, i), {
-      enableClearButton: D,
-      showClearButton: O,
-      onClearValue: V,
-      onMouseEnterTextBox: F,
-      onMouseLeaveTextBox: K
-    } = Y(e, n, r, B, i), N = d(() => ({
-      "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": B
-    }));
-    function A() {
-      a.value = !1;
-    }
-    const R = d(() => a.value), j = () => {
-      if (o.value) {
-        const C = o.value.getBoundingClientRect(), {
-          left: h,
-          top: W,
-          height: G
-        } = C;
-        return {
-          left: h,
-          top: W + G
-        };
-      }
-      return {
-        left: 0,
-        top: 0
+  setup(e, t) {
+    const a = i(), l = i(e.customClass), n = i(e.modelValue), c = qe(e, t, a), {
+      shouldPopupContent: d,
+      hidePopup: u
+    } = c, y = ze(e, t, a, c), f = i(""), g = Ge(e, t, n, f, c), {
+      hasFocusedTextBox: v,
+      commitValue: m,
+      inputGroupClass: T
+    } = g, w = $e(e, t, n, v, f, g), {
+      onMouseEnterTextBox: b,
+      onMouseLeaveTextBox: W
+    } = w, O = x(() => {
+      const E = {
+        "f-button-edit": !0,
+        "f-cmp-inputgroup": !0,
+        "f-button-edit-nowrap": !e.wrapText
       };
+      return l.value && l.value.split(" ").reduce((M, p) => (M[p] = !0, M), E), E;
+    });
+    function R() {
+      return e.multiSelect && e.inputType === "tag" ? Ye(e, n, g) : Ue(e, n, g);
+    }
+    let P = R();
+    $([() => e.multiSelect, () => e.inputType], () => {
+      P = R();
+    });
+    const L = Ze(e, y, w), j = lt(e, t, c), S = {
+      commitValue: m,
+      elementRef: a,
+      hidePopup: u
     };
-    function U(C) {
-      a.value = !1;
-    }
-    return n.expose({
-      commitValue: U
-    }), () => f(_, null, [f("div", q(n.attrs, {
-      ref: o,
-      class: "f-cmp-inputgroup",
+    return ie(() => {
+      a.value.componentInstance = S;
+    }), t.expose(S), () => B(Ce, null, [B("div", Te(t.attrs, {
+      ref: a,
+      class: O.value,
       id: e.id
-    }), [f("div", {
-      class: [e.customClass, N.value],
-      onMouseenter: F,
-      onMouseleave: K
-    }, [f("input", {
-      name: "input-group-value",
-      autocomplete: "" + e.autoComplete,
-      class: v.value,
-      disabled: e.disable,
-      maxlength: e.maxLength,
-      minlength: e.minLength,
-      placeholder: y.value,
-      readonly: m.value,
-      tabindex: e.tabIndex,
-      title: b.value,
-      type: e.inputType,
-      value: r.value,
-      onBlur: T,
-      onChange: S,
-      onClick: p,
-      onFocus: k,
-      onInput: w,
-      onKeydown: t,
-      onKeyup: x,
-      onMousedown: L
-    }, null), f("div", {
-      class: l.value
-    }, [D.value && z(f("span", {
-      class: "input-group-text input-group-clear",
-      onClick: V
-    }, [f("i", {
-      class: "f-icon modal_close"
-    }, null)]), [[J, O.value]]), e.buttonContent && f("span", {
-      class: "input-group-text input-group-append-button",
-      onClick: u,
-      onMouseenter: s,
-      onMouseleave: c,
-      innerHTML: e.buttonContent
-    }, null)])])]), R.value && f($, {
-      "popup-content-position": j(),
-      onClick: A
-    }, {
-      default: () => {
-        var C, h;
-        return [(h = (C = n.slots).default) == null ? void 0 : h.call(C)];
-      }
-    })]);
+    }), [B("div", {
+      class: T.value,
+      onMouseenter: b,
+      onMouseleave: W
+    }, [P(), L()])]), d.value && j()]);
   }
-}), te = {
+}), it = {
   install(e) {
-    e.component(M.name, M);
+    e.component(_.name, _);
+  },
+  register(e, t) {
+    e["button-edit"] = _, t["button-eidt"] = ne;
+  },
+  registerDesigner(e, t) {
+    e["button-edit"] = _, t["button-eidt"] = ne;
   }
 };
 export {
-  M as ButtonEdit,
-  Q as buttonEditProps,
-  te as default
+  _ as ButtonEdit,
+  ce as buttonEditProps,
+  it as default,
+  ne as propsResolver
 };