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

package/combo-list/index.esm.js

@@ -1,538 +1,2189 @@
-import { ref as S, watch as R, defineComponent as N, computed as w, createVNode as f, Teleport as K, inject as q, withModifiers as _, withDirectives as G, vModelCheckbox as J, toRefs as Q, reactive as D, provide as U, resolveComponent as W, Fragment as X, mergeProps as Y } from "vue";
-var x = /* @__PURE__ */ ((e) => (e.Text = "text", e.Tag = "tag", e))(x || {}), O = /* @__PURE__ */ ((e) => (e.top = "top", e.bottom = "bottom", e.auto = "auto", e))(O || {});
-const Z = {
+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";
+const pe = {};
+function oe(e) {
+  const { properties: t } = e;
+  return Object.keys(t).reduce((l, n) => (l[n] = t[n].type === "object" && t[n].properties ? oe(t[n]) : t[n].default, l), {});
+}
+function je(e) {
+  const t = pe[e];
+  return t ? oe(t) : null;
+}
+function Re(e, t) {
+  const o = oe(t);
+  return Object.keys(e).reduce((l, n) => (l[n] = e[n], l), o), o;
+}
+function Ae(e, t) {
+  return Object.keys(e).filter((l) => e[l] != null).reduce((l, n) => {
+    if (t.has(n)) {
+      const i = t.get(n);
+      if (typeof i == "string")
+        l[i] = e[n];
+      else {
+        const u = i(n, e[n]);
+        Object.assign(l, u);
+      }
+    } else
+      l[n] = e[n];
+    return l;
+  }, {});
+}
+function Ee(e, t, o = /* @__PURE__ */ new Map()) {
+  const l = Re(e, t);
+  return Ae(l, o);
+}
+function ge(e, t, o = /* @__PURE__ */ new Map()) {
+  return pe[t.title] = t, (l) => {
+    const n = Ee(l, t, o), i = Object.keys(e).reduce((u, c) => (u[c] = e[c].default, u), {});
+    return Object.assign(i, n);
+  };
+}
+function me(e, t) {
+  return { customClass: t.class };
+}
+const He = /* @__PURE__ */ new Map([
+  ["appearance", me]
+]), We = "https://json-schema.org/draft/2020-12/schema", _e = "https://farris-design.gitee.io/combo-list.schema.json", $e = "combo-list", Ne = "A Farris Input Component", ze = "object", Xe = {
+  id: {
+    description: "The unique identifier for a combo list",
+    type: "string"
+  },
+  type: {
+    description: "The type string of number combo list component",
+    type: "string",
+    default: "combo-list"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string"
+      },
+      style: {
+        type: "string"
+      }
+    },
+    default: {}
+  },
+  binding: {
+    description: "",
+    type: "object",
+    default: {}
+  },
+  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
+  },
+  required: {
+    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: ""
+  }
+}, qe = [
+  "id",
+  "type"
+], Ge = {
+  $schema: We,
+  $id: _e,
+  title: $e,
+  description: Ne,
+  type: ze,
+  properties: Xe,
+  required: qe
+};
+var Ue = /* @__PURE__ */ ((e) => (e.Text = "text", e.Tag = "tag", e))(Ue || {}), Ke = /* @__PURE__ */ ((e) => (e.top = "top", e.bottom = "bottom", e.auto = "auto", e))(Ke || {});
+const ae = {
   /**
    * 组件标识
    */
   id: { type: String },
   /**
-   * 可选，是否可编辑
-   * 默认`false`
+   * 下拉数据源
    */
-  editable: { default: !1, type: Boolean },
+  data: { type: Array, default: [] },
   /**
-   * 可选，是否禁用
-   * 默认为`false`
+   * 可选，展示文本
+   * 默认为空字符串
    */
-  disabled: { default: !1, type: Boolean },
+  displayText: { type: String, default: "" },
   /**
-   * 可选，是否只读
+   * 可选，是否禁用
    * 默认为`false`
    */
-  readonly: { default: !1, type: Boolean },
-  /**
-   * 最大输入长度
-   */
-  maxLength: { type: Number },
+  disabled: { default: !1, type: Boolean },
   /**
-   * 占位符
+   * 可选，下拉图标
+   * 默认为'<span class="f-icon f-icon-arrow-60-down"></span>'
    */
-  placeholder: { type: String },
+  dropDownIcon: { type: String, default: '<span class="f-icon f-icon-arrow-60-down"></span>' },
   /**
-   * 可选，强制显示占位符
+   * 可选，是否可编辑
    * 默认`false`
    */
-  forcePlaceholder: { default: !1, type: Boolean },
+  editable: { default: !1, type: Boolean },
   /**
    * 可选，是否启用清空
    * 默认启用
    */
   enableClear: { default: !0, type: Boolean },
+  /**
+   * 可选，启用搜索
+   * 默认为`false`
+   */
+  enableSearch: { type: Boolean, default: !1 },
   /**
    * 可选，鼠标悬停时是否显示控件值
    * 默认显示
    */
   enableTitle: { default: !0, type: Boolean },
   /**
-   * 可选，下拉列表值展示方式
-   * 支持text | tag，即文本或标签，默认为`ViewType.Text`，即文本方式`text`
-   */
-  viewType: { default: x.Text, type: String },
-  /**
-   * 可选，字段映射
+   * 可选，强制显示占位符
+   * 默认`false`
    */
-  mapFields: { type: Object },
+  forcePlaceholder: { default: !1, type: Boolean },
   /**
-   * 下拉数据源
+   * 可选，清空值时隐藏面板
+   * 默认`true`
    */
-  data: { type: Array },
+  hidePanelOnClear: { default: !0, type: Boolean },
   /**
    * 可选，数据源id字段
    * 默认为`id`
    */
   idField: { default: "id", type: String },
   /**
-   * 可选，数据源值字段
-   * 默认为`id`
-   */
-  valueField: { default: "id", type: String },
-  /**
-   * 可选，数据源显示字段
-   * 默认为`label`
-   */
-  textField: { default: "label", type: String },
-  /**
-   * 可选，是否支持多选
-   * 默认`false`
-   */
-  multiSelect: { default: !1, type: Boolean },
-  /**
-   * 远端数据源信息
+   * 可选，字段映射
    */
-  remote: { default: null, type: Object },
+  mapFields: { type: Object },
   /**
    * 可选，最大高度
    * 默认`350`
    */
   maxHeight: { default: 350, type: Number },
   /**
-   * 可选，是否支持远端过滤
-   * 默认`false`
-   */
-  remoteSearch: { default: !1, type: Boolean },
-  /**
-   * 可选，清空值时隐藏面板
-   * 默认`true`
-   */
-  hidePanelOnClear: { default: !0, type: Boolean },
-  /**
-   * 可选，分隔符
-   * 默认`,`
+   * 最大输入长度
    */
-  separator: { default: ",", type: String },
+  maxLength: { type: Number },
   /**
-   * 可选，展示文本
-   * 默认为空字符串
+   * 可选，是否支持多选
+   * 默认`false`
    */
-  displayText: { type: String, default: "" },
+  multiSelect: { default: !1, type: Boolean },
   /**
    * 绑定值
    */
-  modelValue: { type: [String, Number] },
+  modelValue: { type: String, default: "" },
   /**
-   * 可选，下拉图标
-   * 默认为'<span class="f-icon f-icon-arrow-60-down"></span>'
+   * 占位符
    */
-  dropDownIcon: { type: String, default: '<span class="f-icon f-icon-arrow-60-down"></span>' },
+  placeholder: { type: String },
   /**
-   * tabIndex
+   * 可选，下拉面板展示位置
+   * 默认为`auto`
    */
-  tabIndex: { type: Number, default: -1 },
+  placement: {
+    type: String,
+    default: "auto"
+    /* auto */
+  },
   /**
-   * 可选，启用搜索
+   * 可选，是否只读
    * 默认为`false`
    */
-  enableSearch: { type: Boolean, default: !1 },
+  readonly: { default: !1, type: Boolean },
   /**
-   * 可选，下拉面板展示位置
-   * 默认为`auto`
+   * 远端数据源信息
    */
-  placement: { type: String, default: O.auto }
-}, E = {
+  remote: { default: null, type: Object },
   /**
-   * 必须，值
+   * 可选，是否支持远端过滤
+   * 默认`false`
    */
-  value: { required: !0, type: [String, Number] },
+  remoteSearch: { default: !1, type: Boolean },
   /**
-   * 必须，名称
+   * 可选，分隔符
+   * 默认`,`
    */
-  name: { required: !0, type: [String, Number] },
+  separator: { default: ",", type: String },
   /**
-   * 可选，是否禁用
-   * 默认`false`
+   * tabIndex
    */
-  disabled: { default: !1, type: Boolean },
+  tabIndex: { type: Number, default: -1 },
   /**
-   * 是否已经勾选
+   * 可选，数据源显示字段
+   * 默认为`name`
    */
-  checked: { default: !1, type: Boolean }
-}, L = {
+  textField: { default: "name", type: String },
   /**
-   * 下拉面板是否可见
+   * 可选，数据源值字段
+   * 默认为`id`
    */
-  isPanelVisible: { type: Boolean, default: !1 },
+  valueField: { default: "id", type: String },
   /**
-   * 可选，下拉列表展示位置
-   * 默认为`bottom`
+   * 可选，下拉列表值展示方式
+   * 支持text | tag，即文本或标签，默认为`ViewType.Text`，即文本方式`text`
    */
-  position: { type: String, default: O.bottom }
-}, ee = {
-  options: {
-    type: Array
+  viewType: { default: "text", type: String }
+}, ie = ge(ae, Ge, He), Je = {
+  dataSource: { type: Array, default: [] },
+  enableSearch: { type: Boolean, default: !1 },
+  idField: { type: String, default: "id" },
+  multiSelect: { default: !1, type: Boolean },
+  selectedValues: { type: String, default: "" },
+  separator: { type: String, default: "," },
+  textField: { type: String, default: "name" },
+  width: { type: Number, default: 300 },
+  valueField: { type: String, default: "id" }
+}, Qe = {
+  data: { type: Array, default: [] },
+  draggable: { type: Boolean, default: !1 },
+  multiSelect: { Type: Boolean, default: !1 },
+  multiSelectMode: { Type: String, default: "OnCheck" },
+  idField: { Type: String, default: "id" },
+  valueField: { Type: String, default: "id" },
+  textField: { Type: String, default: "name" },
+  view: { Type: String, default: "ContentView" },
+  size: { Type: String, default: "default" },
+  placeholder: { type: String, default: "" },
+  header: { Type: String, default: "ContentHeader" },
+  headerClass: { Type: String, default: "" },
+  itemClass: { Type: String, default: "" },
+  selectionValues: { type: Array, default: [] },
+  keepOrder: { type: Boolean, default: !1 },
+  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);
+  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 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
+    };
+    return h.value.split(" ").reduce((z, D) => (z[D] = !0, z), V), V;
   }
-}, z = Symbol("fComboList"), A = Symbol("fComboListPanel");
-var j = /* @__PURE__ */ ((e) => (e.clear = "clear", e.update = "update:modelValue", e))(j || {}), H = /* @__PURE__ */ ((e) => (e.panelShow = "panelShow", e.panelHidden = "panelHidden", e))(H || {});
-function le(e, n) {
-  const l = S(""), u = S(e.modelValue), t = S(!1), a = S();
-  if (R([a], ([i]) => {
-    if (e.modelValue) {
-      const d = i.find((s) => s[e.valueField] === e.modelValue);
-      d && (l.value = d[e.textField]);
-    }
-  }), e.remote) {
-    const { url: i, method: d = "GET", headers: s = {}, body: y = null } = e.remote;
-    fetch(i, { method: d, headers: s, body: y }).then((v) => {
-      if (v.status === 200)
-        return v.json();
-      throw new Error(v.statusText);
-    }).then((v) => {
-      a.value = v;
-    }).catch((v) => {
-      console.error(v);
-    });
-  } else
-    a.value = e.data;
+  function y(C, j) {
+    return C[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 k = B(() => s.value && f.value === "OnCheckClearByClick"), E = B(() => !s.value || s.value && (f.value === "OnCheckAndClick" || f.value === "OnClick"));
+  function L(C, j, V) {
+    if (j.unClick || j[u.value]) {
+      C.preventDefault(), C.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 });
+  }
+  return {
+    getKey: y,
+    listViewItemClass: x,
+    onCheckItem: I,
+    onClickItem: L
+  };
+}
+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;
+  });
+  const c = B(() => !n.value);
+  function h(d) {
+    return d[l.value] || "";
+  }
+  function s(d) {
+    return u.value.findIndex((m) => h(m) === h(d));
+  }
+  function f() {
+    u.value.forEach((d) => {
+      d.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);
+  }
+  return { clearSelection: f, findIndexInSelectedItems: s, selectedItems: u, toggleSelectItem: r };
+}
+function et(e, t) {
   function o(i) {
-    u.value && (u.value = i.value), l.value = i.name, n.emit("update:modelValue", i.value);
+    const u = [];
+    let c = i.nextNode();
+    for (; c; )
+      u.push(c), c = i.nextNode();
+    return u;
+  }
+  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 = [];
+      let m = 0;
+      for (; m < d.length; ) {
+        const v = d.indexOf(u, m);
+        if (v === -1)
+          break;
+        b.push(v), m = v + u.length;
+      }
+      return b.map((v) => {
+        const P = new Range();
+        return P.setStart(r, v), P.setEnd(r, v + u.length), P;
+      });
+    }).flat();
+  }
+  function n(i) {
+    if (!CSS.highlights || (CSS.highlights.clear(), !i || !t))
+      return;
+    const u = l(t.value, i.toLocaleLowerCase()), c = new Highlight(...u);
+    CSS.highlights.set("search-result", c);
+  }
+  return { search: n };
+}
+const tt = {
+  checked: { Type: Boolean, default: !1 },
+  id: { Type: String, default: "" },
+  disabled: { Type: Boolean, default: !1 },
+  /**
+   * 组件值，字符串或者数组
+   */
+  modelValue: { Type: Boolean, default: !1 }
+}, le = /* @__PURE__ */ G({
+  name: "FListViewCheckBox",
+  props: tt,
+  emits: ["change", "update:modelValue"],
+  setup(e, t) {
+    const o = a(e.checked), l = a(e.disabled), n = a(e.id);
+    function i(u) {
+      u.stopPropagation(), u.preventDefault(), l.value || (o.value = !o.value, t.emit("change", {
+        originalEvent: u,
+        checked: o.value
+      }));
+    }
+    return W(() => e.checked, (u) => {
+      o.value = u;
+    }), () => p("div", {
+      class: "custom-control custom-checkbox  custom-control-inline listview-checkbox"
+    }, [Q(p("input", {
+      id: n.value,
+      title: n.value,
+      type: "checkbox",
+      class: "custom-control-input",
+      "onUpdate:modelValue": (u) => o.value = u,
+      onChange: (u) => console.log(u)
+    }, null), [[Me, o.value]]), p("label", {
+      for: n.value,
+      class: "custom-control-label",
+      onClick: (u) => i(u)
+    }, null)]);
+  }
+});
+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,
+    onMouseoutItem: m
+  } = n, {
+    getKey: v,
+    listViewItemClass: P,
+    onCheckItem: F,
+    onClickItem: x
+  } = i, y = B(() => ({
+    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", {
+      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)
+    }, null)]), p("div", {
+      class: "f-list-content"
+    }, [p("div", {
+      style: y.value
+    }, [I[s.value]])])]);
+  }
+  return {
+    renderItem: S
+  };
+}
+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
+  } = n, {
+    getKey: b,
+    listViewItemClass: m,
+    onCheckItem: v,
+    onClickItem: P
+  } = i;
+  function F(y, S, I) {
+    return t.slots.content ? p(re, null, [t.slots.content && t.slots.content({
+      item: y,
+      index: S,
+      selectedItem: I
+    })]) : p("div", {
+      style: "margin: 10px 0;"
+    }, [y.name]);
+  }
+  function x(y, S, I) {
+    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)
+    }, [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)
+    }, null)]), p("div", {
+      class: "f-list-content"
+    }, [F(y, S, I)])]);
+  }
+  return {
+    renderItem: x
+  };
+}
+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
+  } = n, {
+    getKey: b,
+    listViewItemClass: m,
+    onCheckItem: v,
+    onClickItem: P
+  } = i, {
+    dragstart: F,
+    dragenter: x,
+    dragover: y,
+    dragend: S
+  } = l, {
+    removeItem: I
+  } = c, k = B(() => ({
+    margin: h.value ? "10px 0" : "10px 0px 10px 14px"
+  }));
+  function E(V) {
+    return p("div", {
+      style: k.value
+    }, [V.name]);
+  }
+  function L() {
+    return t.slots.itemContent ? t.slots.itemContent : E;
+  }
+  const C = 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),
+      draggable: "true",
+      onDragstart: (D) => F(D, V, R),
+      onDragenter: (D) => x(D, R),
+      onDragend: (D) => S(D, V),
+      onDragover: (D) => y(D, R)
+    }, [h.value && p("div", {
+      class: "f-list-select",
+      onClick: (D) => D.stopPropagation()
+    }, [p(le, {
+      id: "list-" + b(V, R),
+      disabled: V[s.value] || V.unClick,
+      checked: V.checked,
+      onChange: (D) => v(V, R)
+    }, null)]), p("div", {
+      class: "f-list-content"
+    }, [C(V)]), p("div", {
+      class: "f-list-remove",
+      onClick: (D) => I(R)
+    }, [p("div", {
+      class: "f-list-remove-icon"
+    }, [p("i", {
+      class: "f-icon f-icon-remove_face"
+    }, null)])]), p("div", {
+      class: "f-list-handle"
+    }, [p("div", null, [p("i", {
+      class: "f-icon f-icon-drag-vertical"
+    }, null)])])]);
   }
   return {
-    displayText: l,
-    modelValue: u,
-    isPanelVisible: t,
-    dataSource: a,
-    onValueChange: o
+    renderItem: j
   };
 }
-function te(e) {
-  const { isPanelVisible: n, context: l, modelValue: u, props: t } = e, a = (p) => {
-    n.value !== !1 && (n.value = !1);
-  }, o = (p) => {
-    n.value !== !1 && (n.value = !1);
+function at(e, t, o) {
+  function l() {
+    return t.slots.header && p("div", {
+      class: "f-list-view-header"
+    }, [t.slots.header()]);
+  }
+  return {
+    renderHeader: l
   };
-  R([n], ([p]) => {
-    p ? (window.addEventListener("resize", a), window.addEventListener("scroll", o)) : (window.removeEventListener("resize", a), window.removeEventListener("scroll", 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) {
+    i.value = "";
+  }
+  W(i, (d) => {
+    o.search(d);
+  });
+  const s = B(() => {
+    const d = {
+      "form-group": !0,
+      "farris-form-group": !0
+    };
+    return l.value && l.value.split(" ").reduce((m, v) => (m[v] = !0, m), d), d;
   });
-  function i(p) {
-    u.value = "", t.hidePanelOnClear && (n.value = !1), l.emit(j.update, ""), l.emit(j.clear);
+  function f(d) {
   }
-  function d(p) {
-    n.value = !n.value;
+  function r() {
+    return p("div", {
+      class: "f-list-view-header",
+      onClick: Fe(f, ["prevent", "stop"])
+    }, [p("div", {
+      class: s.value
+    }, [p("div", {
+      class: "farris-input-wrap"
+    }, [p("div", {
+      class: "f-cmp-inputgroup"
+    }, [p("div", {
+      class: "input-group f-state-editable"
+    }, [Q(p("input", {
+      class: "form-control f-utils-fill text-left",
+      "onUpdate:modelValue": (d) => i.value = d,
+      name: "input-group-value",
+      type: "text",
+      placeholder: n.value,
+      autocomplete: "off"
+    }, null), [[Oe, i.value]]), p("div", {
+      class: "input-group-append"
+    }, [c.value && p("span", {
+      class: "input-group-text input-group-clear",
+      onClick: (d) => h()
+    }, [p("i", {
+      class: "f-icon f-icon-close-circle"
+    }, null)]), u.value && p("span", {
+      class: "input-group-text"
+    }, [p("span", {
+      class: "f-icon f-icon-search"
+    }, null)])])])])])])]);
   }
-  function s(p) {
-    n.value = !1;
+  return {
+    renderHeader: r
+  };
+}
+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));
+    return n.value = s, s;
   }
-  function y(p) {
-    t.editable === !1 && (n.value = !0);
+  const c = a(u());
+  W(
+    () => 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];
+      } 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 {
-    onClear: i,
-    onClick: y,
-    onButtonClick: d,
-    onPanelHidden: s
+    dataView: c,
+    getSelectionItems: h
   };
 }
-const ae = {
-  popupContentPosition: { type: Object, default: { left: 0, top: 0 } }
-}, ne = /* @__PURE__ */ N({
+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;
+    });
+  }
+  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 v(F, x) {
+    F.preventDefault(), F.dataTransfer && (F.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);
+  }
+  return {
+    dragstart: b,
+    dragenter: m,
+    dragover: v,
+    dragend: P,
+    isDragging: c
+  };
+}
+function it(e, t, o) {
+  const { dataView: l } = o;
+  function n(i) {
+    if (i > -1 && i < l.value.length) {
+      const u = l.value.splice(i, 1);
+      t.emit("removeItem", u[0]);
+    }
+  }
+  return { removeItem: n };
+}
+function st() {
+  const e = a(-1), t = a(""), o = a(-1), l = a(!1);
+  function n(s, f, r) {
+    o.value = r;
+  }
+  function i(s, f, r) {
+    l.value || (o.value = r);
+  }
+  function u(s, f, r) {
+    o.value = -1;
+  }
+  function c() {
+    l.value = !0;
+  }
+  function h() {
+    l.value = !1;
+  }
+  return {
+    activeIndex: e,
+    focusedItemId: t,
+    hoverIndex: o,
+    onMouseenterItem: n,
+    onMouseoverItem: i,
+    onMouseoutItem: u,
+    resumeHover: h,
+    suspendHover: c
+  };
+}
+const ct = /* @__PURE__ */ G({
+  name: "FListView",
+  props: Qe,
+  emits: ["checkValuesChange", "clickItem", "selectionChange", "removeItem", "change"],
+  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 M = {
+        "f-list-view": !0,
+        "f-list-view-multiple": i.value
+      };
+      return e.size !== "default" && (M[`${e.size}-item`] = !0), M;
+    }), b = B(() => ({
+      "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);
+    function L() {
+      return l.value === "SingleView" ? se : l.value === "DraggableView" ? ot : l.value === "ContentView" && t.slots.content ? nt : se;
+    }
+    const C = L(), {
+      renderItem: j
+    } = C(e, t, f, F, v, y, P, x);
+    function V() {
+      return n.value === "SearchBar" ? ce : n.value === "ContentHeader" ? at : ce;
+    }
+    const R = V(), {
+      renderHeader: z
+    } = R(e, t, S);
+    function D(M) {
+      S.search(M);
+    }
+    t.expose({
+      search: D
+    });
+    function O(M) {
+      i.value && (M.preventDefault(), M.stopPropagation());
+    }
+    return () => p("div", {
+      class: d.value,
+      onClick: O
+    }, [z(), p("div", {
+      ref: o,
+      class: "f-list-view-content"
+    }, [p("ul", {
+      class: b.value,
+      style: "list-style: none;"
+    }, [m.value && r.value.map((M, A) => j(M, A, h)), k.value && p("div", {
+      class: "f-list-view-emptydata"
+    }, [p("p", {
+      class: "f-empty-title"
+    }, [s.value])]), t.slots.empty && t.slots.empty()])]), E.value && p("div", {
+      class: "f-list-view-footer"
+    }, [t.slots.footer && t.slots.footer()])]);
+  }
+}), rt = /* @__PURE__ */ G({
+  name: "FComboListContainer",
+  props: Je,
+  emits: ["selectionChange"],
+  setup(e, t) {
+    const o = a(e.dataSource), l = a([]), n = a(e.separator), i = a(e.selectedValues.split(n.value));
+    W(e.dataSource, () => {
+      o.value = e.dataSource;
+    });
+    const u = B(() => 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);
+    }
+    return () => p("div", {
+      class: "f-combo-list-container"
+    }, [p(ct, {
+      size: "small",
+      itemClass: "f-combo-list-item",
+      header: u.value,
+      headerClass: "f-combo-list-search-box",
+      data: o.value,
+      idField: e.idField,
+      textField: e.textField,
+      multiSelect: e.multiSelect,
+      multiSelectMode: "OnCheckAndClick",
+      "selection-values": i.value,
+      onSelectionChange: c
+    }, null)]);
+  }
+}), dt = /* @__PURE__ */ new Map([
+  ["appearance", me]
+]), ft = "https://json-schema.org/draft/2020-12/schema", vt = "https://farris-design.gitee.io/button-edit.schema.json", pt = "button-edit", gt = "A Farris Input Component", mt = "object", ht = {
+  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: ""
+  }
+}, yt = [
+  "id",
+  "type"
+], bt = {
+  $schema: ft,
+  $id: vt,
+  title: pt,
+  description: gt,
+  type: mt,
+  properties: ht,
+  required: yt
+}, he = {
+  /**
+   * 组件标识
+   */
+  id: String,
+  /**
+   * 扩展按钮显示内容，这是一段现在扩展按钮中的html标签
+   */
+  buttonContent: { type: String, default: '<i class="f-icon f-icon-lookup"></i>' },
+  buttonBehavior: { type: String, default: "Popup" },
+  /**
+   * 启用输入框自动完成功能
+   */
+  autoComplete: { type: Boolean, default: !1 },
+  /**
+   * 组件自定义样式
+   */
+  customClass: { type: String, default: "" },
+  /**
+   * 禁用组件，既不允许在输入框中录入，也不允许点击扩展按钮。
+   */
+  disable: { type: Boolean, default: !1 },
+  /**
+   * 允许在输入框中录入文本。
+   */
+  editable: { type: Boolean, default: !0 },
+  /**
+   * 显示清空文本按钮
+   */
+  enableClear: { type: Boolean, default: !1 },
+  /**
+   * 组件值
+   */
+  modelValue: { type: String, default: "" },
+  /**
+   * 将组件设置为只读，既不允许在输入框中录入，也不允许点击扩展按钮，但是允许复制输入框中的内容。
+   */
+  readonly: { type: Boolean, default: !1 },
+  /**
+   * 文本对齐方式
+   */
+  textAlign: { type: String, default: "left" },
+  /**
+   * 禁用组件时，是否显示扩展按钮
+   */
+  showButtonWhenDisabled: { type: Boolean, default: !1 },
+  /**
+   * 显示输入框的标签
+   */
+  enableTitle: { type: Boolean, default: !1 },
+  /**
+   * 输入框类型
+   */
+  inputType: { type: String, default: "text" },
+  /**
+   * 显示输入框提示信息
+   */
+  forcePlaceholder: { type: Boolean, default: !1 },
+  /**
+   * 输入框提示文本
+   */
+  placeholder: { type: String, default: "" },
+  /**
+   * 输入框最小长度
+   */
+  minLength: Number,
+  /**
+   * 输入框最大长度
+   */
+  maxLength: Number,
+  /**
+   * 输入框Tab键索引
+   */
+  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: "," }
+};
+ge(he, bt, dt);
+const Ct = {
+  popupContentPosition: { type: Object, default: { left: 0, top: 0 } },
+  host: { type: Object }
+}, wt = /* @__PURE__ */ G({
   name: "FOverlay",
-  props: ae,
+  props: Ct,
   emits: ["click"],
-  setup(e, n) {
-    const l = S(e.popupContentPosition);
-    function u(a) {
-      n.emit("click"), a.preventDefault(), a.stopPropagation();
+  setup(e, t) {
+    const o = a(e.popupContentPosition), l = a(e.host);
+    function n(c) {
+      t.emit("click"), c.preventDefault(), c.stopPropagation();
     }
-    const t = w(() => ({
+    const i = B(() => {
+      const c = l.value;
+      if (c) {
+        const h = c.getBoundingClientRect(), {
+          left: s,
+          top: f,
+          height: r
+        } = h;
+        return {
+          left: s,
+          top: f + r
+        };
+      }
+      return o.value;
+    }), u = B(() => ({
       position: "relative",
-      left: `${l.value.left}px`,
-      top: `${l.value.top}px`
+      left: `${i.value.left}px`,
+      top: `${i.value.top}px`
     }));
-    return () => f(K, {
+    return () => p(de, {
       to: "body"
     }, {
       default: () => {
-        var a, o;
-        return [f("div", {
+        var c, h;
+        return [p("div", {
           class: "overlay-container",
           style: "pointer-events: auto;",
-          onClick: (i) => u(i)
-        }, [f("div", {
-          style: t.value
-        }, [(o = (a = n.slots).default) == null ? void 0 : o.call(a)])])];
+          onClick: (s) => n(s)
+        }, [p("div", {
+          style: u.value
+        }, [(h = (c = t.slots).default) == null ? void 0 : h.call(c)])])];
       }
     });
   }
 });
-function ue() {
-  const e = q(z, null);
+function St(e) {
+  if (e.content && e.content.render)
+    return e.content.render;
+  if (e.render && typeof e.render == "function")
+    return e.render;
+}
+function Tt(e) {
+  const t = document.createElement("div");
+  t.style.display = "contents";
+  let o;
+  const l = e.onClickCallback || (() => {
+  }), n = () => {
+    l(), o && o.unmount();
+  };
+  return o = Ve({
+    setup() {
+      fe(() => {
+        document.body.removeChild(t);
+      });
+      const i = St(e);
+      return () => p(wt, {
+        "popup-content-position": e.popupPosition,
+        host: e.host,
+        onClick: n
+      }, {
+        default: () => [i && i()]
+      });
+    }
+  }), document.body.appendChild(t), o.mount(t), o;
+}
+class Bt {
+  static show(t) {
+    return Tt(t);
+  }
+}
+function It(e, t, o, l) {
+  const n = a(e.buttonBehavior), i = a(e.popupOnInput), u = B(() => ({
+    "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) {
+    if (c.value) {
+      const b = !!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 });
+    }
+    d.stopPropagation();
+  }
+  function s(d) {
+    t.emit("mouseEnterIcon", d);
+  }
+  function f(d) {
+    t.emit("mouseLeaveIcon", d);
+  }
+  function r() {
+    t.emit("mouseOverButton");
+  }
   return {
-    idField: e == null ? void 0 : e.comboListProps.idField,
-    valueField: e == null ? void 0 : e.comboListProps.valueField,
-    textField: e == null ? void 0 : e.comboListProps.textField
+    buttonClass: u,
+    onClickButton: h,
+    onMouseEnterButton: s,
+    onMouseLeaveButton: f,
+    onMouseOverButton: r
   };
 }
-function oe(e, n) {
-  const l = q(z, null), u = q(A, null), t = S(l == null ? void 0 : l.dataSource), a = (l == null ? void 0 : l.comboListProps.valueField) || "id", o = (l == null ? void 0 : l.comboListProps.textField) || "label", i = (l == null ? void 0 : l.comboListProps.separator) || ",", d = w(() => {
-    var B;
-    return l != null && l.modelValue ? e.value !== void 0 && ((B = l == null ? void 0 : l.modelValue) == null ? void 0 : B.toString().split(i).includes(e.value.toString())) : !1;
-  }), s = w(() => (l == null ? void 0 : l.comboListProps.multiSelect) || !1), y = w(() => e.name || e.value), p = l == null ? void 0 : l.defaultOptionSlot, v = (B) => {
-    var c, r;
-    if (!e.disabled && e.value !== void 0)
-      if (s.value) {
-        const h = (l == null ? void 0 : l.modelValue) || null, m = (h == null ? void 0 : h.toString().split(i)) || [], b = m == null ? void 0 : m.indexOf(e.value.toString());
-        b !== -1 ? m.splice(b, 1) : m.push(e.value.toString());
-        const g = (c = t.value) == null ? void 0 : c.filter((F) => F[a] && m.includes(F[a].toString())), P = g == null ? void 0 : g.map((F) => F[a]).join(i), V = g == null ? void 0 : g.map((F) => F[o]).join(i);
-        l == null || l.onValueChange({
-          value: P,
-          name: V
-        });
-      } else
-        l == null || l.onValueChange({
-          value: e.value,
-          name: e.name
-        }), (r = u == null ? void 0 : u.onPanelItemClick) == null || r.call(u, B);
-  }, k = w(() => s.value ? d.value : (l == null ? void 0 : l.modelValue) === e.value), C = w(() => ({
-    active: k.value,
-    "list-group-item": !0,
-    "list-group-item-action": !0
-  })), T = w(() => ({
-    cursor: e.disabled ? "not-allowed" : "default"
+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;
+  }
+  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(b) {
+    if (c.value) {
+      if (!o.value) {
+        s(!1);
+        return;
+      }
+      (!e.editable || !e.readonly) && !e.disable && s(!0);
+    }
+  }
+  function d(b) {
+    c.value && s(!1);
+  }
+  return {
+    enableClearButton: c,
+    showClearButton: u,
+    onClearValue: f,
+    onMouseEnterTextBox: r,
+    onMouseLeaveTextBox: d
+  };
+}
+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(() => ({
+    "text-left": e.textAlign === "left",
+    "text-center": e.textAlign === "center",
+    "text-right": e.textAlign === "right",
+    "form-control": !0,
+    "f-utils-fill": !0
+  })), m = B(() => ({
+    "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
   }));
+  function v(C, j = !0) {
+    o.value !== C && (o.value = C, j && t.emit("change", C), t.emit("update:modelValue", C));
+  }
+  function P(C) {
+    c.value = !1, v(C, !0);
+  }
+  W(
+    () => e.modelValue,
+    (C) => {
+      o.value = C, t.emit("change", C);
+    }
+  );
+  function F(C) {
+    r = !1, t.emit("blur", C), C.stopPropagation();
+  }
+  function x(C) {
+    t.emit("click", C);
+  }
+  function y(C) {
+    if (e.disable) {
+      r = !0;
+      return;
+    }
+    r = !0, f.value || (t.emit("focus", C), 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 I(C) {
+    C.target.tagName !== "INPUT" && C.preventDefault(), C.stopPropagation();
+  }
+  function k(C) {
+    t.emit("keydown", C);
+  }
+  function E(C) {
+    C.key === "Enter" && (i.value || u.value) && n.hidePopup(), t.emit("keyup", C);
+  }
+  function L(C) {
+    const j = C.target.value;
+    C.stopPropagation(), v(j);
+  }
   return {
-    name: y,
-    optionClass: C,
-    isChecked: d,
-    rowStyle: T,
-    multiSelect: s,
-    onOptionClick: v,
-    defaultOptionSlot: p
+    hasFocusedTextBox: d,
+    isTextBoxReadonly: f,
+    textBoxClass: b,
+    textBoxPlaceholder: s,
+    textBoxTitle: h,
+    inputGroupClass: m,
+    changeTextBoxValue: v,
+    commitValue: P,
+    onBlurTextBox: F,
+    onClickTextBox: x,
+    onFocusTextBox: y,
+    onInput: S,
+    onKeyDownTextBox: k,
+    onKeyUpTextBox: E,
+    onMouseDownTextBox: I,
+    onTextBoxValueChange: L
   };
 }
-const ie = /* @__PURE__ */ N({
-  name: "FOption",
-  props: E,
-  emits: [],
-  setup(e, n) {
-    const {
-      name: l,
-      optionClass: u,
-      rowStyle: t,
-      multiSelect: a,
-      onOptionClick: o,
-      isChecked: i,
-      defaultOptionSlot: d
-    } = oe(e);
-    return () => f("li", {
-      style: t.value,
-      class: u.value,
-      onClick: _(o, ["prevent", "stop"])
-    }, [a.value && f("div", {
-      class: "custom-control custom-checkbox  custom-control-inline",
-      style: "margin:0;padding-right:0;float:none;vertical-align: top;"
-    }, [G(f("input", {
-      class: "custom-control-input",
-      type: "checkbox",
-      title: "custom-input",
-      disabled: e.disabled,
-      "onUpdate:modelValue": (s) => i.value = s
-    }, null), [[J, i.value]]), f("label", {
-      class: "custom-control-label"
-    }, null)]), f("span", {
-      class: "f-datalist-item-text"
-    }, [d ? d({
-      name: l.value
-    }) : l.value])]);
-  }
-}), re = /* @__PURE__ */ N({
-  name: "FOptions",
-  props: ee,
-  emits: [],
-  setup(e, n) {
-    const {
-      valueField: l = "id",
-      textField: u = "label"
-    } = ue();
-    return () => {
-      var t;
-      return f("ul", {
-        class: "list-group list-group-flush"
-      }, [(t = e == null ? void 0 : e.options) == null ? void 0 : t.map((a) => f(ie, {
-        value: a[l],
-        name: a[u],
-        disabled: a.disabled
-      }, null))]);
-    };
+function Pt(e, t, o) {
+  const l = a(), n = a(!1);
+  function i() {
+    const s = l.value;
+    s && s.show(o.value);
   }
-});
-function de(e) {
-  const { isPanelVisible: n, panelRef: l, context: u } = e, t = q(z, null), a = S((t == null ? void 0 : t.comboListProps.maxHeight) || 350), o = (t == null ? void 0 : t.comboListProps.valueField) || "id", i = (t == null ? void 0 : t.comboListProps.textField) || "label", d = (t == null ? void 0 : t.comboListProps.placement) || O.bottom, s = S(t == null ? void 0 : t.dataSource), y = S(t == null ? void 0 : t.dataSource), p = S(""), v = w(() => (t == null ? void 0 : t.comboListProps.enableSearch) || !1), k = w(() => ({
-    "z-index": 99999,
-    position: "absolute",
-    background: "#fff",
-    border: "solid 1px #ededed"
-  })), C = w(() => ({
-    "max-height": v.value ? a.value - 36 + "px" : a.value + "px",
-    overflow: "auto",
-    border: "none"
-  })), T = w(() => ({
-    comboPanel: !0,
-    "f-area-hide": !n.value,
-    "f-area-show": n.value
-  })), B = (c, r, h = O.bottom) => {
-    var F;
-    const m = ((F = c == null ? void 0 : c.getBoundingClientRect()) == null ? void 0 : F.height) || 350, b = r.bottom || 0, g = document.body.offsetHeight, P = (r == null ? void 0 : r.top) || 0, V = (r == null ? void 0 : r.height) || 0;
-    if (c.style.left = (r == null ? void 0 : r.left) + "px", c.style.width = (r == null ? void 0 : r.width) + "px", h === O.bottom || h === O.auto) {
-      c.style.top = P + V + "px";
-      const I = g - b, $ = m <= I ? m : I;
-      a.value = $;
-    } else if (h === O.top) {
-      const I = P, $ = m <= I ? m : I;
-      c.style.top = P - $ + "px", a.value = $;
+  async function u() {
+    !!t.slots.default && (n.value = !n.value, await K(), i());
+  }
+  async function c() {
+    !!t.slots.default && (n.value = !0, await K(), i());
+  }
+  function h() {
+    n.value = !1;
+  }
+  return { hidePopup: h, popup: c, shouldPopupContent: n, togglePopup: u, popoverRef: l };
+}
+function Mt(e, t, o) {
+  const {
+    isTextBoxReadonly: l,
+    textBoxClass: n,
+    textBoxPlaceholder: i,
+    textBoxTitle: u,
+    onBlurTextBox: c,
+    onClickTextBox: h,
+    onFocusTextBox: s,
+    onInput: f,
+    onKeyDownTextBox: r,
+    onKeyUpTextBox: d,
+    onMouseDownTextBox: b,
+    onTextBoxValueChange: m
+  } = o;
+  return () => p("input", {
+    name: "input-group-value",
+    autocomplete: e.autoComplete ? "on" : "off",
+    class: n.value,
+    disabled: e.disable,
+    maxlength: e.maxLength,
+    minlength: e.minLength,
+    placeholder: i.value,
+    readonly: l.value,
+    tabindex: e.tabIndex,
+    title: u.value,
+    type: e.inputType,
+    value: t.value,
+    onBlur: c,
+    onChange: m,
+    onClick: h,
+    onFocus: s,
+    onInput: f,
+    onKeydown: r,
+    onKeyup: d,
+    onMousedown: b
+  }, null);
+}
+const Ft = {
+  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 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 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 h(f, r) {
+    f.preventDefault(), f.dataTransfer && (f.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);
+  }
+  return {
+    dragstart: u,
+    dragenter: c,
+    dragover: h,
+    dragend: s,
+    isDragging: i
   };
-  return R([l, n], ([c, r]) => {
-    var h, m;
-    if (r && c) {
-      const b = t == null ? void 0 : t.comboListRef, g = (m = (h = b == null ? void 0 : b.$el) == null ? void 0 : h.parentNode) == null ? void 0 : m.querySelector(".input-group");
-      if (v.value) {
-        const V = c.querySelector("input");
-        V && V.focus();
+}
+const Vt = /* @__PURE__ */ G({
+  name: "FTags",
+  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);
+    a(e.placeholder), a(""), a();
+    const v = a(), P = a(e.wrapText), F = a();
+    function x() {
+      const g = n.value.map((w) => ({
+        type: "Tag",
+        payload: w
+      }));
+      return r.value && g.push({
+        type: "AddButton"
+      }), g;
+    }
+    const y = a(x());
+    function S(g) {
+      n.value = g, y.value = x();
+    }
+    const I = B(() => y.value.findIndex((g) => g.type === "Input")), k = Ot(e, t, n, y), {
+      dragstart: E,
+      dragenter: L,
+      dragover: C,
+      dragend: j
+    } = k;
+    W(() => e.data, (g) => S(g));
+    const V = B(() => {
+      const g = {
+        "farris-tags": !0,
+        "farris-tags-checkable": o.value,
+        "farris-tags-nowrap": !P.value
+      };
+      return l.value.split(" ").reduce((w, T) => (w[T] = !0, w), g), g;
+    });
+    function R(g) {
+      const w = {
+        "farris-tag-item": !0,
+        "farris-tag-item-checked": o.value && g.checked,
+        "farris-tag-item-checkable": o.value,
+        "farris-tag-item-has-color": c.value,
+        "farris-tag-item-actived": h.value === g.name
+      };
+      if (i.value) {
+        const T = `farris-tag-item-${i.value}`;
+        w[T] = !0;
       }
-      const P = g == null ? void 0 : g.getBoundingClientRect();
-      B(c, P, d), u.emit(H.panelShow);
-    }
-  }), R([p], ([c]) => {
-    ce(() => {
-      var r;
-      if (!c)
-        return s.value = y.value;
-      s.value = (r = y == null ? void 0 : y.value) == null ? void 0 : r.filter(
-        (h) => {
-          var m, b;
-          return ((m = h[o]) == null ? void 0 : m.startsWith(c)) || h[o].toString().startsWith(c) || ((b = h[i]) == null ? void 0 : b.startsWith(c));
+      return w;
+    }
+    const z = B(() => {
+      const g = {};
+      return s.value && s.value.split(";").reduce((w, T) => {
+        const H = T.split(":");
+        return w[H[0]] = H[1], w;
+      }, 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 O(g, w) {
+      let T;
+      switch (g.key) {
+        case "Backspace":
+          n.value = n.value.filter((H) => H.name !== w.name), t.emit("change", n.value);
+          break;
+        case "ArrowLeft":
+          T = Math.max(v.value.scrollLeft + 20, 0), v.value.scrollLeft = T;
+          break;
+        case "ArrowRight":
+          T = Math.max(v.value.scrollLeft - 20, 0), v.value.scrollLeft = T;
+      }
+    }
+    function M(g, w) {
+      const T = n.value.findIndex((H) => H.name === w.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);
+      }
+      g.stopPropagation();
+    }
+    const A = B(() => ({
+      "farris-tag-item": !0,
+      "farris-tag-add-button": !0,
+      "farris-tag-add-button-disabled": !m.value
+    }));
+    function $(g) {
+    }
+    function _() {
+      return p("li", {
+        class: A.value,
+        onClick: (g) => void 0
+      }, [p("span", {
+        class: "f-icon f-icon-amplification"
+      }, null), p("span", {
+        class: "farris-tag-add-text"
+      }, [b.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);
         }
-      );
-    }, 500)();
-  }), {
-    panelStyle: k,
-    panelClass: T,
-    cardStyle: C,
-    enableSearch: v,
-    keyword: p,
-    items: s
-  };
+      }
+    }
+    function U(g, w, T) {
+      g > -1 && (n.value.splice(g, 0, {
+        name: w,
+        value: T,
+        selectable: o.value
+      }), y.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 = "";
+      }
+    }
+    function Y(g) {
+      const w = g.target;
+      w && (w.innerText ? J(w) : 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();
+      }));
+    }
+    function Ce() {
+      return p("li", {
+        class: "farris-tag-input-box"
+      }, [p("div", {
+        ref: F,
+        class: "form-control",
+        contenteditable: "true",
+        onKeyup: be,
+        onBlur: Y
+      }, null)]);
+    }
+    function we(g, w) {
+      return p("li", {
+        class: R(g),
+        style: z.value,
+        tabindex: 0,
+        id: g.name,
+        key: g.name,
+        onClick: (T) => D(T, g),
+        onKeydown: (T) => O(T, g),
+        draggable: "true",
+        onDragstart: (T) => E(T, g, w),
+        onDragenter: (T) => L(T, w),
+        onDragend: (T) => j(T, g),
+        onDragover: (T) => C(T, w)
+      }, [p("div", {
+        title: g.name,
+        class: "tag-box"
+      }, [g.name]), f.value && p("span", {
+        class: "tag-delete"
+      }, [p("i", {
+        class: "f-icon f-icon-close",
+        onClick: (T) => M(T, g)
+      }, null)])]);
+    }
+    function Se() {
+      return y.value.map((g, w) => {
+        switch (g.type) {
+          case "Tag":
+            return we(g.payload, w);
+          case "AddButton":
+            return _();
+          case "Input":
+            return Ce();
+        }
+      });
+    }
+    const Te = B(() => ({
+      "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;
+    }
+    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 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;
+        });
+        if (H > -1)
+          return H;
+      }
+      return T;
+    }
+    function ke(g) {
+      if (d.value) {
+        const T = Ie(g.clientX) + 1, X = y.value.filter((q) => q.type !== "Input");
+        X.splice(T, 0, {
+          type: "Input"
+        }), y.value = X, K(() => {
+          F.value && F.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];
+        [...n.value].findIndex((ee) => (console.log(`${ee.value} === ${q} is ${ee.value === q}`), ee.value === q)) > -1 || U(n.value.length, X, q);
+      }
+    }
+    function Pe(g) {
+      g.preventDefault();
+    }
+    return () => p("div", {
+      class: V.value,
+      onClick: ke,
+      onDrop: xe,
+      onDragover: Pe
+    }, [p("ul", {
+      ref: v,
+      class: Te.value,
+      onWheel: (g) => Be(g)
+    }, [Se()])]);
+  }
+});
+function Lt(e, t, o) {
+  const l = a(e.separator), {
+    changeTextBoxValue: n
+  } = o, i = B(() => t.value ? t.value.split(l.value).map((c) => ({
+    name: c,
+    selectable: !0
+  })) : []);
+  function u(c) {
+    n(c.map((h) => h.name).join(l.value), !0);
+  }
+  return () => p(Vt, {
+    class: "form-control",
+    data: i.value,
+    showClose: !0,
+    showInput: !0,
+    onChange: u
+  }, null);
+}
+function Dt(e, t, o) {
+  const {
+    buttonClass: l,
+    onClickButton: n,
+    onMouseEnterButton: i,
+    onMouseLeaveButton: u
+  } = t, {
+    enableClearButton: c,
+    showClearButton: h,
+    onClearValue: s
+  } = o;
+  return () => p("div", {
+    class: l.value
+  }, [c.value && Q(p("span", {
+    class: "input-group-text input-group-clear",
+    onClick: s
+  }, [p("i", {
+    class: "f-icon modal_close"
+  }, null)]), [[ve, h.value]]), e.buttonContent && p("span", {
+    class: "input-group-text input-group-append-button",
+    innerHTML: e.buttonContent,
+    onClick: n,
+    onMouseenter: i,
+    onMouseleave: u
+  }, null)]);
+}
+const jt = {
+  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: a(0) },
+  zIndex: { type: Number, default: -1 },
+  keepWidthWithReference: { type: Boolean, default: !1 },
+  fitContent: { type: Boolean, default: !1 },
+  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);
+  return { host: t, hostLeft: l, hostTop: o, hostWidth: n };
 }
-function se(e) {
-  const { context: n } = e;
-  function l(o) {
-    n.emit(H.panelHidden);
+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 x = B(() => {
+    const O = {
+      left: `${r.value}px`,
+      top: `${d.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`
+  }));
+  function S(O) {
+    if (O && e.keepWidthWithReference) {
+      const M = O.getBoundingClientRect();
+      u.value = Math.max(e.minWidth, M.width);
+    }
+  }
+  function I(O, M) {
+    const A = F.value - O.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;
+    return { popoverLeft: _, popoverTop: N, arrowLeft: $ };
+  }
+  function E(O, M, A) {
+    return M.top - P.value + (M.height + A.height) + m.value;
   }
-  function u(o) {
-    n.emit(H.panelHidden);
+  function L(O, M) {
+    const A = I(M, O), $ = O <= A ? f.value : O - A;
+    return { popoverLeft: Math.min(O, A), arrowLeft: $ };
   }
-  function t(o) {
+  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);
+    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);
+    return { popoverLeft: N, popoverTop: U, arrowLeft: _ };
+  }
+  const V = /* @__PURE__ */ new Map([
+    ["top", k],
+    ["bottom", C],
+    ["bottom-left", j]
+  ]);
+  function R(O) {
+    var N;
+    const M = O.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;
+    }
+    e.keepWidthWithReference && S(O);
   }
-  function a(o) {
+  function z(O) {
+    if (O) {
+      const M = O.getBoundingClientRect();
+      (M.left !== h.value || M.top !== c.value) && R(O);
+    }
   }
   return {
-    onPanelContainerClick: l,
-    onPanelItemClick: u,
-    onSearchClick: t,
-    onPanelClick: a
+    arrowStyle: y,
+    popoverStyle: x,
+    position: s,
+    popoverWidth: u,
+    fitToReference: S,
+    followToReferencePosition: z,
+    locateToReference: R
   };
 }
-function ce(e, n = 300) {
-  let l;
-  return (...u) => {
-    clearTimeout(l), l = window.setTimeout(() => {
-      e(u);
-    }, n);
+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");
+  }
+  r = (m) => {
+    if (!n.value.contains(m.target)) {
+      const v = n.value.closest(".popover");
+      v && v.removeEventListener("click", r), d();
+    }
   };
+  async function b(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");
+    }
+  }
+  return t.expose({ hide: d, show: b, shown: h }), { showPopover: c, hidePopverOnClickBodyHandler: r };
 }
-const fe = /* @__PURE__ */ N({
-  name: "FPanel",
-  props: L,
-  emits: [H.panelHidden, H.panelShow],
-  setup(e, n) {
-    const l = S(), {
-      isPanelVisible: u
-    } = Q(e), {
-      panelStyle: t,
-      panelClass: a,
-      cardStyle: o,
-      enableSearch: i,
-      keyword: d,
-      items: s
-    } = de({
-      isPanelVisible: u,
-      props: e,
-      panelRef: l,
-      context: n
-    }), {
-      onPanelContainerClick: y,
-      onPanelItemClick: p,
-      onSearchClick: v,
-      onPanelClick: k
-    } = se({
-      panelRef: l,
-      isPanelVisible: u,
-      context: n
-    }), C = D({
-      onPanelItemClick: p
-    });
-    return U(A, C), () => u.value && f(ne, {
-      onClick: y
+function Ht(e, t, o, l, n) {
+  const { popoverWidth: i, fitToReference: u, followToReferencePosition: c } = n;
+  function h() {
+    if (o.value) {
+      c(o.value);
+      const s = o.value.getBoundingClientRect();
+      l.value && s.width !== i.value && u(o.value);
+    }
+  }
+  return { onResize: h };
+}
+const Wt = /* @__PURE__ */ G({
+  name: "FPopover",
+  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), {
+      host: h
+    } = c, s = At(e, o, l, c), {
+      position: f,
+      arrowStyle: r,
+      popoverStyle: d,
+      fitToReference: b,
+      locateToReference: m
+    } = s, {
+      showPopover: v,
+      hidePopverOnClickBodyHandler: P
+    } = 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 = {
+        "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(() => ({
+      "popover-content": !0,
+      "popover-body": !0
+    }));
+    return ne(() => {
+      e.reference && m(n.value), i.value && b(n.value), window.addEventListener("resize", F);
+    }), fe(() => {
+      document.body.removeEventListener("click", P), window.removeEventListener("resize", F);
+    }), () => p(de, {
+      to: h
     }, {
-      default: () => [f("div", {
-        class: a.value,
-        ref: l,
-        style: t.value,
-        onClick: _(k, ["prevent", "stop"])
-      }, [i.value && f(W("f-button-edit"), {
-        enableClear: !0,
-        style: "padding:5px 10px",
-        buttonContent: "<i class='f-icon f-icon-search'></i>",
-        modelValue: d.value,
-        "onUpdate:modelValue": (T) => d.value = T,
-        onClickButton: v
-      }, null), f("div", {
-        style: "position: relative;",
-        class: "f-datalist"
-      }, [f("div", {
-        class: "card",
-        style: o.value
-      }, [f(re, {
-        options: s.value
-      }, null)])])])]
+      default: () => {
+        var S;
+        return [Q(p("div", {
+          ref: l,
+          class: x.value,
+          style: d.value,
+          onClick: (I) => {
+            I.stopPropagation();
+          }
+        }, [p("div", {
+          ref: o,
+          class: "popover-arrow arrow",
+          style: r.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]])];
+      }
     });
   }
-}), M = /* @__PURE__ */ N({
+});
+function _t(e, t, o) {
+  const l = a(e.popupMinWidth), {
+    hidePopup: n,
+    popoverRef: i
+  } = o;
+  return () => p(Wt, {
+    ref: i,
+    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 u, c;
+      return [(c = (u = t.slots).default) == null ? void 0 : c.call(u)];
+    }
+  });
+}
+const ye = /* @__PURE__ */ G({
+  name: "FButtonEdit",
+  props: he,
+  emits: ["updateExtendInfo", "clear", "change", "click", "clickButton", "blur", "focus", "mouseEnterIcon", "mouseLeaveIcon", "keyup", "keydown", "inputClick", "input", "update:modelValue"],
+  setup(e, t) {
+    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(() => {
+      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;
+    });
+    function x() {
+      return e.multiSelect && e.inputType === "tag" ? Lt(e, n, f) : Mt(e, n, f);
+    }
+    let y = x();
+    W([() => e.multiSelect, () => e.inputType], () => {
+      y = x();
+    });
+    const S = Dt(e, h, m), I = _t(e, t, i), k = {
+      commitValue: d,
+      elementRef: o,
+      hidePopup: c
+    };
+    return ne(() => {
+      o.value.componentInstance = k;
+    }), t.expose(k), () => p(re, null, [p("div", Le(t.attrs, {
+      ref: o,
+      class: F.value,
+      id: e.id
+    }), [p("div", {
+      class: b.value,
+      onMouseenter: v,
+      onMouseleave: P
+    }, [y(), S()])]), u.value && I()]);
+  }
+});
+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]));
+  }
+  function u(s) {
+    const f = i(s).map((r) => r[e.textField]).join(e.separator);
+    t.value = n.value ? f || s : f;
+  }
+  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]));
+  }
+  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) => {
+      if (m.status === 200)
+        return m.json();
+      throw new Error(m.statusText);
+    }).then((m) => {
+      l.value = m;
+    }).catch((m) => {
+      console.error(m);
+    });
+  }
+  return e.remote && h(), W(() => e.data, () => {
+    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]);
+    }
+  }), W(() => e.modelValue, (s) => {
+    o.value = s, u(s);
+  }), u(e.modelValue), { dataSource: l, displayText: t, editable: n, modelValue: o, getItemsByDisplayText: c, getItemsByValue: i };
+}
+const te = /* @__PURE__ */ G({
   name: "FComboList",
-  props: Z,
-  emits: [j.clear, j.update],
-  setup(e, n) {
-    const l = S(), {
-      onValueChange: u,
-      displayText: t,
-      modelValue: a,
-      isPanelVisible: o,
-      dataSource: i
-    } = le(e, n), {
-      onClear: d,
-      onButtonClick: s,
-      onPanelHidden: y,
-      onClick: p
-    } = te({
-      props: e,
-      context: n,
-      isPanelVisible: o,
-      modelValue: a
-    }), v = D({
-      comboListRef: l,
-      isPanelVisible: o,
-      comboListProps: e,
-      onValueChange: u,
-      modelValue: a,
-      dataSource: i,
-      defaultOptionSlot: n.slots.default
+  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();
+    }
+    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 r(v) {
+      u.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 b(v) {
+      if (i.value) {
+        d(v);
+        return;
+      }
+      const P = c(v);
+      f(P);
+    }
+    function m() {
+      return n.value;
+    }
+    return t.expose({
+      getDisplayText: m
+    }), () => p(ye, {
+      ref: o,
+      id: e.id,
+      disable: e.disabled,
+      readonly: e.readonly,
+      forcePlaceholder: e.forcePlaceholder,
+      editable: i.value,
+      buttonContent: e.dropDownIcon,
+      placeholder: e.placeholder,
+      enableClear: e.enableClear,
+      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
+    }, {
+      default: () => [p(rt, {
+        idField: e.idField,
+        valueField: e.valueField,
+        textField: e.textField,
+        dataSource: l.value,
+        selectedValues: u.value,
+        multiSelect: e.multiSelect,
+        enableSearch: e.enableSearch,
+        onSelectionChange: f
+      }, null)]
     });
-    return U(z, v), () => f(X, null, [f(W("f-button-edit"), Y({
-      ref: l,
+  }
+});
+function Nt(e, t, o) {
+  var x;
+  const l = o == null ? void 0 : o.checkIsInFixedContextRules(), n = o && o.getStyles && o.getStyles() || "";
+  function i() {
+    return !(t.schema.componentType || l);
+  }
+  function u() {
+    return !1;
+  }
+  function c() {
+    return !(t.schema.componentType || l);
+  }
+  function h() {
+    return !!l;
+  }
+  function s(y) {
+    if (!y)
+      return null;
+    if (y.schema.type === "Component")
+      return y;
+    const S = s(y.parent);
+    return S || null;
+  }
+  function f(y, S, I) {
+    return !!o && o.canAccepts();
+  }
+  function r() {
+    return t.schema.label || t.schema.title || t.schema.name;
+  }
+  function d() {
+  }
+  function b(y, S) {
+    S && (o == null || o.onAcceptMovedChildElement(S));
+  }
+  function m(y, S) {
+    const I = String(y.getAttribute("data-controltype"));
+    return je(I);
+  }
+  function v(y) {
+    return y.contents ? y.contents.length : -1;
+  }
+  function P(y) {
+  }
+  const F = {
+    canMove: i(),
+    canSelectParent: u(),
+    canDelete: c(),
+    canNested: !h(),
+    contents: t.schema.contents,
+    elementRef: e,
+    parent: (x = t.parent) == null ? void 0 : x.componentInstance.value,
+    schema: t.schema,
+    styles: n,
+    canAccepts: f,
+    getBelongedComponentInstance: s,
+    getDraggingDisplayText: r,
+    getDragScopeElement: d,
+    onAcceptMovedChildElement: b,
+    onAcceptNewChildElement: m,
+    onAddNewChildElement: v,
+    onChildElementMovedOut: P,
+    triggerBelongedComponentToMoveWhenMoved: !!o && o.triggerBelongedComponentToMoveWhenMoved
+  };
+  return a(F);
+}
+const zt = /* @__PURE__ */ G({
+  name: "FComboListDesign",
+  props: ae,
+  emits: ["clear", "update:modelValue", "change"],
+  setup(e, t) {
+    const o = a(), l = De("design-item-context"), n = Nt(o, l);
+    return ne(() => {
+      o.value.componentInstance = n;
+    }), t.expose(n.value), () => p(ye, {
+      ref: o,
       id: e.id,
-      class: {
-        active: o
-      }
-    }, n.attrs, {
       disable: e.disabled,
       readonly: e.readonly,
       forcePlaceholder: e.forcePlaceholder,
@@ -543,35 +2194,26 @@ const fe = /* @__PURE__ */ N({
       maxLength: e.maxLength,
       tabIndex: e.tabIndex,
       enableTitle: e.enableTitle,
-      style: "display:block",
-      modelValue: t.value,
-      "onUpdate:modelValue": (k) => t.value = k,
-      onClear: d,
-      onClick: p,
-      onClickButton: s
-    }), null), o.value && f(fe, {
-      isPanelVisible: o.value,
-      onPanelHidden: y
-    }, null)]);
+      multiSelect: e.multiSelect,
+      inputType: e.multiSelect ? "tag" : "text"
+    }, null);
   }
-}), ve = {
+}), qt = {
   install(e) {
-    e.component(M.name, M);
+    e.component(te.name, te);
+  },
+  register(e, t) {
+    e["combo-list"] = te, t["combo-list"] = ie;
+  },
+  registerDesigner(e, t) {
+    e["combo-list"] = zt, t["combo-list"] = ie;
   }
 };
 export {
-  M as FComboList,
-  O as Placement,
-  x as ViewType,
-  Z as comboListProps,
-  ce as debounce,
-  ve as default,
-  E as optionProps,
-  ee as optionsProps,
-  L as panelProps,
-  le as useComboList,
-  te as useComboListEvent,
-  oe as useOption,
-  de as usePanel,
-  se as usePanelEvent
+  te as FComboList,
+  Ke as Placement,
+  Ue as ViewType,
+  ae as comboListProps,
+  qt as default,
+  ie as propsResolver
 };