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

package/order/index.esm.js

@@ -0,0 +1,2270 @@
+import { ref as a, computed as T, watch as W, defineComponent as z, createVNode as f, withDirectives as Q, vModelCheckbox as Fe, Fragment as te, withModifiers as Oe, vModelText as Pe, Teleport as se, createApp as Ve, onUnmounted as ce, nextTick as K, vShow as re, onMounted as de, mergeProps as Me } from "vue";
+const Le = {
+  dataSource: { type: Array, default: [] },
+  items: { type: Array, default: [] }
+}, Re = {
+  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 je(e, t, o, l, n) {
+  const i = a(e.idField), u = a(e.disableField), s = a(e.draggable), m = a(e.itemClass), c = a(e.multiSelect), v = a(e.multiSelectMode);
+  a(!0);
+  const { isDragging: r } = o, { activeIndex: d, focusedItemId: y, hoverIndex: h } = l, { clearSelection: p, selectedItems: C, toggleSelectItem: B } = n;
+  function k(b, j) {
+    const M = {
+      "f-list-view-group-item": !0,
+      "f-list-view-draggable-item": s.value,
+      "f-un-click": !!b.unClick,
+      "f-un-select": !!b[u.value],
+      "f-listview-active": b.__fv_index__ === d.value,
+      "f-listview-hover": !r.value && j === h.value,
+      moving: !!b.moving
+    };
+    return m.value.split(" ").reduce((X, R) => (X[R] = !0, X), M), M;
+  }
+  function S(b, j) {
+    return b[i.value] || "";
+  }
+  const x = T(() => !c.value);
+  function O(b, j) {
+    b.unClick || b[u.value] || (x.value && (y.value = b[i.value]), B(b, j));
+  }
+  const F = T(() => c.value && v.value === "OnCheckClearByClick"), E = T(() => !c.value || c.value && (v.value === "OnCheckAndClick" || v.value === "OnClick"));
+  function L(b, j, M) {
+    if (j.unClick || j[u.value]) {
+      b.preventDefault(), b.stopPropagation();
+      return;
+    }
+    y.value = j[i.value], d.value = M, F.value && p(), E.value && B(j, M), t.emit("clickItem", { data: C.value, index: M });
+  }
+  return {
+    getKey: S,
+    listViewItemClass: k,
+    onCheckItem: O,
+    onClickItem: L
+  };
+}
+function De(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 s = T(() => !n.value);
+  function m(d) {
+    return d[l.value] || "";
+  }
+  function c(d) {
+    return u.value.findIndex((h) => m(h) === m(d));
+  }
+  function v() {
+    u.value.forEach((d) => {
+      d.checked = !1;
+    }), u.value = [];
+  }
+  function r(d, y) {
+    s.value && v();
+    const h = c(d);
+    h > -1 ? (u.value.splice(h, 1), d.checked = !1) : (u.value.push(d), d.checked = !0), t.emit("selectionChange", u.value);
+  }
+  return { clearSelection: v, findIndexInSelectedItems: c, selectedItems: u, toggleSelectItem: r };
+}
+function Ae(e, t) {
+  function o(i) {
+    const u = [];
+    let s = i.nextNode();
+    for (; s; )
+      u.push(s), s = i.nextNode();
+    return u;
+  }
+  function l(i, u) {
+    const s = document.createTreeWalker(i, NodeFilter.SHOW_TEXT);
+    return o(s).map((r) => ({ textNode: r, text: (r.textContent || "").toLocaleLowerCase() })).map(({ textNode: r, text: d }) => {
+      const y = [];
+      let h = 0;
+      for (; h < d.length; ) {
+        const p = d.indexOf(u, h);
+        if (p === -1)
+          break;
+        y.push(p), h = p + u.length;
+      }
+      return y.map((p) => {
+        const C = new Range();
+        return C.setStart(r, p), C.setEnd(r, p + u.length), C;
+      });
+    }).flat();
+  }
+  function n(i) {
+    if (!CSS.highlights || (CSS.highlights.clear(), !i || !t))
+      return;
+    const u = l(t.value, i.toLocaleLowerCase()), s = new Highlight(...u);
+    CSS.highlights.set("search-result", s);
+  }
+  return { search: n };
+}
+const Ee = {
+  checked: { Type: Boolean, default: !1 },
+  id: { Type: String, default: "" },
+  disabled: { Type: Boolean, default: !1 },
+  /**
+   * 组件值，字符串或者数组
+   */
+  modelValue: { Type: Boolean, default: !1 }
+}, ne = /* @__PURE__ */ z({
+  name: "FListViewCheckBox",
+  props: Ee,
+  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;
+    }), () => f("div", {
+      class: "custom-control custom-checkbox  custom-control-inline listview-checkbox"
+    }, [Q(f("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), [[Fe, o.value]]), f("label", {
+      for: n.value,
+      class: "custom-control-label",
+      onClick: (u) => i(u)
+    }, null)]);
+  }
+});
+function ae(e, t, o, l, n, i, u, s) {
+  const m = a(e.size), c = a(e.textField), v = a(e.multiSelect), r = a(e.disableField), {
+    onMouseenterItem: d,
+    onMouseoverItem: y,
+    onMouseoutItem: h
+  } = n, {
+    getKey: p,
+    listViewItemClass: C,
+    onCheckItem: B,
+    onClickItem: k
+  } = i, S = T(() => ({
+    margin: m.value === "small" ? "0.25rem 0" : "10px 0"
+  }));
+  function x(O, F, E) {
+    return O.checked = u.findIndexInSelectedItems(O) > -1, f("li", {
+      class: C(O, F),
+      id: p(O, F),
+      key: p(O, F),
+      onClick: (L) => k(L, O, F),
+      onMouseenter: (L) => d(L, O, F),
+      onMouseover: (L) => y(L, O, F),
+      onMouseout: (L) => h(L, O, F)
+    }, [v.value && f("div", {
+      class: "f-list-select",
+      onClick: (L) => L.stopPropagation()
+    }, [f(ne, {
+      id: "list-" + p(O, F),
+      disabled: O[r.value] || O.unClick,
+      checked: O.checked,
+      onChange: (L) => B(O, F)
+    }, null)]), f("div", {
+      class: "f-list-content"
+    }, [f("div", {
+      style: S.value
+    }, [O[c.value]])])]);
+  }
+  return {
+    renderItem: x
+  };
+}
+function He(e, t, o, l, n, i, u, s) {
+  const m = a(e.multiSelect), c = a(e.disableField), {
+    onMouseenterItem: v,
+    onMouseoverItem: r,
+    onMouseoutItem: d
+  } = n, {
+    getKey: y,
+    listViewItemClass: h,
+    onCheckItem: p,
+    onClickItem: C
+  } = i;
+  function B(S, x, O) {
+    return t.slots.content ? f(te, null, [t.slots.content && t.slots.content({
+      item: S,
+      index: x,
+      selectedItem: O
+    })]) : f("div", {
+      style: "margin: 10px 0;"
+    }, [S.name]);
+  }
+  function k(S, x, O) {
+    return f("li", {
+      class: h(S, x),
+      id: y(S, x),
+      key: y(S, x),
+      onClick: (F) => C(F, S, x),
+      onMouseenter: (F) => v(F, S, x),
+      onMouseover: (F) => r(F, S, x),
+      onMouseout: (F) => d(F, S, x)
+    }, [m.value && f("div", {
+      class: "f-list-select",
+      onClick: (F) => F.stopPropagation()
+    }, [f(ne, {
+      id: "list-" + y(S, x),
+      disabled: S[c.value] || S.unClick,
+      checked: S.checked,
+      onChange: (F) => p(S, x)
+    }, null)]), f("div", {
+      class: "f-list-content"
+    }, [B(S, x, O)])]);
+  }
+  return {
+    renderItem: k
+  };
+}
+function We(e, t, o, l, n, i, u, s) {
+  const m = a(e.multiSelect), c = a(e.disableField), {
+    onMouseenterItem: v,
+    onMouseoverItem: r,
+    onMouseoutItem: d
+  } = n, {
+    getKey: y,
+    listViewItemClass: h,
+    onCheckItem: p,
+    onClickItem: C
+  } = i, {
+    dragstart: B,
+    dragenter: k,
+    dragover: S,
+    dragend: x
+  } = l, {
+    removeItem: O
+  } = s, F = T(() => ({
+    margin: m.value ? "10px 0" : "10px 0px 10px 14px"
+  }));
+  function E(M) {
+    return f("div", {
+      style: F.value
+    }, [M.name]);
+  }
+  function L() {
+    return t.slots.itemContent ? t.slots.itemContent : E;
+  }
+  const b = L();
+  function j(M, D, X) {
+    return f("li", {
+      class: h(M, D),
+      id: y(M, D),
+      key: y(M, D),
+      onClick: (R) => C(R, M, D),
+      onMouseenter: (R) => v(R, M, D),
+      onMouseover: (R) => r(R, M, D),
+      onMouseout: (R) => d(R, M, D),
+      draggable: "true",
+      onDragstart: (R) => B(R, M, D),
+      onDragenter: (R) => k(R, D),
+      onDragend: (R) => x(R, M),
+      onDragover: (R) => S(R, D)
+    }, [m.value && f("div", {
+      class: "f-list-select",
+      onClick: (R) => R.stopPropagation()
+    }, [f(ne, {
+      id: "list-" + y(M, D),
+      disabled: M[c.value] || M.unClick,
+      checked: M.checked,
+      onChange: (R) => p(M, D)
+    }, null)]), f("div", {
+      class: "f-list-content"
+    }, [b(M)]), f("div", {
+      class: "f-list-remove",
+      onClick: (R) => O(D)
+    }, [f("div", {
+      class: "f-list-remove-icon"
+    }, [f("i", {
+      class: "f-icon f-icon-remove_face"
+    }, null)])]), f("div", {
+      class: "f-list-handle"
+    }, [f("div", null, [f("i", {
+      class: "f-icon f-icon-drag-vertical"
+    }, null)])])]);
+  }
+  return {
+    renderItem: j
+  };
+}
+function _e(e, t, o) {
+  function l() {
+    return t.slots.header && f("div", {
+      class: "f-list-view-header"
+    }, [t.slots.header()]);
+  }
+  return {
+    renderHeader: l
+  };
+}
+function le(e, t, o) {
+  const l = a(e.headerClass), n = a(e.placeholder), i = a(""), u = T(() => !i.value), s = T(() => !!i.value);
+  function m(d) {
+    i.value = "";
+  }
+  W(i, (d) => {
+    o.search(d);
+  });
+  const c = T(() => {
+    const d = {
+      "form-group": !0,
+      "farris-form-group": !0
+    };
+    return l.value && l.value.split(" ").reduce((h, p) => (h[p] = !0, h), d), d;
+  });
+  function v(d) {
+  }
+  function r() {
+    return f("div", {
+      class: "f-list-view-header",
+      onClick: Oe(v, ["prevent", "stop"])
+    }, [f("div", {
+      class: c.value
+    }, [f("div", {
+      class: "farris-input-wrap"
+    }, [f("div", {
+      class: "f-cmp-inputgroup"
+    }, [f("div", {
+      class: "input-group f-state-editable"
+    }, [Q(f("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), [[Pe, i.value]]), f("div", {
+      class: "input-group-append"
+    }, [s.value && f("span", {
+      class: "input-group-text input-group-clear",
+      onClick: (d) => m()
+    }, [f("i", {
+      class: "f-icon f-icon-close-circle"
+    }, null)]), u.value && f("span", {
+      class: "input-group-text"
+    }, [f("span", {
+      class: "f-icon f-icon-search"
+    }, null)])])])])])])]);
+  }
+  return {
+    renderHeader: r
+  };
+}
+function $e(e, t) {
+  const o = a(e.idField), l = a(e.data), n = a(e.data), i = a(e.keepOrder);
+  function u() {
+    const c = l.value.map((v, r) => typeof v != "object" ? { __fv_index__: r, name: v } : (v.__fv_index__ = r, v));
+    return n.value = c, c;
+  }
+  const s = a(u());
+  W(
+    () => e.data,
+    (c) => {
+      if (i.value) {
+        const v = c.reduce((h, p) => (h.set(p.id, !0), h), /* @__PURE__ */ new Map()), r = l.value.reduce((h, p) => (h.set(p.id, !0), h), /* @__PURE__ */ new Map()), d = s.value.filter((h) => v.has(h.id)), y = c.filter((h) => !r.has(h.id));
+        l.value = [...d, ...y];
+      } else
+        l.value = c;
+      s.value = u();
+    }
+  );
+  function m(c) {
+    return c.map((r) => {
+      const d = n.value.findIndex((y) => y[o.value] === r);
+      return d > -1 ? n.value[d] : null;
+    }).filter((r) => r != null);
+  }
+  return {
+    dataView: s,
+    getSelectionItems: m
+  };
+}
+function Ne(e, t, o, l) {
+  const n = a(e.idField), { dataView: i } = o, u = a(-1), s = a(!1), { activeIndex: m, focusedItemId: c, hoverIndex: v, resumeHover: r, suspendHover: d } = l;
+  function y(B, k, S) {
+    B.stopPropagation(), d(), k && setTimeout(() => {
+      u.value = S, s.value = !0, k.moving = !0;
+    });
+  }
+  function h(B, k) {
+    if (B.preventDefault(), u.value !== k) {
+      const S = i.value[u.value], x = i.value;
+      x.splice(u.value, 1), x.splice(k, 0, S), u.value = k;
+    }
+  }
+  function p(B, k) {
+    B.preventDefault(), B.dataTransfer && (B.dataTransfer.dropEffect = "move");
+  }
+  function C(B, k) {
+    k && (k.moving = !1), i.value.forEach((S, x) => {
+      S.__fv_index__ = x;
+    }), s.value = !1, r(), v.value = k.__fv_index__, m.value = k.__fv_index__, c.value = k[n.value], t.emit("change", i.value);
+  }
+  return {
+    dragstart: y,
+    dragenter: h,
+    dragover: p,
+    dragend: C,
+    isDragging: s
+  };
+}
+function ze(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 Xe() {
+  const e = a(-1), t = a(""), o = a(-1), l = a(!1);
+  function n(c, v, r) {
+    o.value = r;
+  }
+  function i(c, v, r) {
+    l.value || (o.value = r);
+  }
+  function u(c, v, r) {
+    o.value = -1;
+  }
+  function s() {
+    l.value = !0;
+  }
+  function m() {
+    l.value = !1;
+  }
+  return {
+    activeIndex: e,
+    focusedItemId: t,
+    hoverIndex: o,
+    onMouseenterItem: n,
+    onMouseoverItem: i,
+    onMouseoutItem: u,
+    resumeHover: m,
+    suspendHover: s
+  };
+}
+const fe = /* @__PURE__ */ z({
+  name: "FListView",
+  props: Re,
+  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"), s = a(!0), m = a({}), c = a("暂无数据");
+    a(!0), a(!1), a("id");
+    const v = $e(e), {
+      dataView: r
+    } = v, d = T(() => {
+      const P = {
+        "f-list-view": !0,
+        "f-list-view-multiple": i.value
+      };
+      return e.size !== "default" && (P[`${e.size}-item`] = !0), P;
+    }), y = T(() => ({
+      "f-list-view-group": !0,
+      "d-flex": u.value,
+      "flex-wrap": u.value
+    })), h = T(() => !!r.value && r.value.length > 0), p = Xe(), C = De(e, t, v), B = Ne(e, t, v, p), k = ze(e, t, v), S = je(e, t, B, p, C), x = Ae(e, o), O = T(() => r.value.length === 0), F = T(() => O.value && !t.slots.empty), E = T(() => !!t.slots.footer || s.value);
+    function L() {
+      return l.value === "SingleView" ? ae : l.value === "DraggableView" ? We : l.value === "ContentView" && t.slots.content ? He : ae;
+    }
+    const b = L(), {
+      renderItem: j
+    } = b(e, t, v, B, p, S, C, k);
+    function M() {
+      return n.value === "SearchBar" ? le : n.value === "ContentHeader" ? _e : le;
+    }
+    const D = M(), {
+      renderHeader: X
+    } = D(e, t, x);
+    function R(P) {
+      x.search(P);
+    }
+    t.expose({
+      search: R
+    });
+    function V(P) {
+      i.value && (P.preventDefault(), P.stopPropagation());
+    }
+    return () => f("div", {
+      class: d.value,
+      onClick: V
+    }, [X(), f("div", {
+      ref: o,
+      class: "f-list-view-content"
+    }, [f("ul", {
+      class: y.value,
+      style: "list-style: none;"
+    }, [h.value && r.value.map((P, A) => j(P, A, m)), F.value && f("div", {
+      class: "f-list-view-emptydata"
+    }, [f("p", {
+      class: "f-empty-title"
+    }, [c.value])]), t.slots.empty && t.slots.empty()])]), E.value && f("div", {
+      class: "f-list-view-footer"
+    }, [t.slots.footer && t.slots.footer()])]);
+  }
+}), qe = {
+  /**
+   * 组件标识
+   */
+  id: String,
+  /**
+   * 设置按钮类型
+   */
+  type: { type: String, default: "primary" },
+  /**
+   * 是否禁用
+   */
+  disabled: { type: Boolean, default: !1 },
+  /**
+   * 按钮尺寸
+   */
+  size: { type: String, default: "small" },
+  /**
+   * 按钮图标
+   */
+  icon: { type: String }
+};
+function Ge(e, t) {
+  function o(l) {
+    l.stopPropagation(), e.disabled || t.emit("click", l);
+  }
+  return {
+    onClickButton: o
+  };
+}
+const Ue = /* @__PURE__ */ z({
+  name: "FButton",
+  props: qe,
+  emits: ["click"],
+  setup(e, t) {
+    const {
+      onClickButton: o
+    } = Ge(e, t), l = a(e.size), n = a(e.type), i = a(e.disabled);
+    a(e.icon);
+    const u = T(() => {
+      const s = {
+        btn: !0,
+        "btn-lg": l.value === "large",
+        "btn-sm": l.value !== "large"
+      };
+      return n.value && (s[`btn-${n.value}`] = !0), s;
+    });
+    return T(() => ({})), () => f("button", {
+      class: u.value,
+      disabled: i.value,
+      onClick: (s) => o(s)
+    }, [t.slots.default && t.slots.default()]);
+  }
+}), Ke = {};
+function ve(e) {
+  const { properties: t } = e;
+  return Object.keys(t).reduce((l, n) => (l[n] = t[n].type === "object" && t[n].properties ? ve(t[n]) : t[n].default, l), {});
+}
+function Je(e, t) {
+  const o = ve(t);
+  return Object.keys(e).reduce((l, n) => (l[n] = e[n], l), o), o;
+}
+function Qe(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 Ye(e, t, o = /* @__PURE__ */ new Map()) {
+  const l = Je(e, t);
+  return Qe(l, o);
+}
+function pe(e, t, o = /* @__PURE__ */ new Map()) {
+  return Ke[t.title] = t, (l) => {
+    const n = Ye(l, t, o), i = Object.keys(e).reduce((u, s) => (u[s] = e[s].default, u), {});
+    return Object.assign(i, n);
+  };
+}
+function ge(e, t) {
+  return { customClass: t.class };
+}
+const Ze = /* @__PURE__ */ new Map([
+  ["appearance", ge]
+]), et = "https://json-schema.org/draft/2020-12/schema", tt = "https://farris-design.gitee.io/combo-list.schema.json", nt = "combo-list", ot = "A Farris Input Component", at = "object", lt = {
+  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: ""
+  }
+}, ut = [
+  "id",
+  "type"
+], it = {
+  $schema: et,
+  $id: tt,
+  title: nt,
+  description: ot,
+  type: at,
+  properties: lt,
+  required: ut
+}, me = {
+  /**
+   * 组件标识
+   */
+  id: { type: String },
+  /**
+   * 下拉数据源
+   */
+  data: { type: Array, default: [] },
+  /**
+   * 可选，展示文本
+   * 默认为空字符串
+   */
+  displayText: { type: String, default: "" },
+  /**
+   * 可选，是否禁用
+   * 默认为`false`
+   */
+  disabled: { default: !1, type: Boolean },
+  /**
+   * 可选，下拉图标
+   * 默认为'<span class="f-icon f-icon-arrow-60-down"></span>'
+   */
+  dropDownIcon: { type: String, default: '<span class="f-icon f-icon-arrow-60-down"></span>' },
+  /**
+   * 可选，是否可编辑
+   * 默认`false`
+   */
+  editable: { default: !1, type: Boolean },
+  /**
+   * 可选，是否启用清空
+   * 默认启用
+   */
+  enableClear: { default: !0, type: Boolean },
+  /**
+   * 可选，启用搜索
+   * 默认为`false`
+   */
+  enableSearch: { type: Boolean, default: !1 },
+  /**
+   * 可选，鼠标悬停时是否显示控件值
+   * 默认显示
+   */
+  enableTitle: { default: !0, type: Boolean },
+  /**
+   * 可选，强制显示占位符
+   * 默认`false`
+   */
+  forcePlaceholder: { default: !1, type: Boolean },
+  /**
+   * 可选，清空值时隐藏面板
+   * 默认`true`
+   */
+  hidePanelOnClear: { default: !0, type: Boolean },
+  /**
+   * 可选，数据源id字段
+   * 默认为`id`
+   */
+  idField: { default: "id", type: String },
+  /**
+   * 可选，字段映射
+   */
+  mapFields: { type: Object },
+  /**
+   * 可选，最大高度
+   * 默认`350`
+   */
+  maxHeight: { default: 350, type: Number },
+  /**
+   * 最大输入长度
+   */
+  maxLength: { type: Number },
+  /**
+   * 可选，是否支持多选
+   * 默认`false`
+   */
+  multiSelect: { default: !1, type: Boolean },
+  /**
+   * 绑定值
+   */
+  modelValue: { type: String, default: "" },
+  /**
+   * 占位符
+   */
+  placeholder: { type: String },
+  /**
+   * 可选，下拉面板展示位置
+   * 默认为`auto`
+   */
+  placement: {
+    type: String,
+    default: "auto"
+    /* auto */
+  },
+  /**
+   * 可选，是否只读
+   * 默认为`false`
+   */
+  readonly: { default: !1, type: Boolean },
+  /**
+   * 远端数据源信息
+   */
+  remote: { default: null, type: Object },
+  /**
+   * 可选，是否支持远端过滤
+   * 默认`false`
+   */
+  remoteSearch: { default: !1, type: Boolean },
+  /**
+   * 可选，分隔符
+   * 默认`,`
+   */
+  separator: { default: ",", type: String },
+  /**
+   * tabIndex
+   */
+  tabIndex: { type: Number, default: -1 },
+  /**
+   * 可选，数据源显示字段
+   * 默认为`name`
+   */
+  textField: { default: "name", type: String },
+  /**
+   * 可选，数据源值字段
+   * 默认为`id`
+   */
+  valueField: { default: "id", type: String },
+  /**
+   * 可选，下拉列表值展示方式
+   * 支持text | tag，即文本或标签，默认为`ViewType.Text`，即文本方式`text`
+   */
+  viewType: { default: "text", type: String }
+};
+pe(me, it, Ze);
+const st = {
+  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" }
+}, ct = /* @__PURE__ */ z({
+  name: "FComboListContainer",
+  props: st,
+  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 = T(() => e.enableSearch ? "SearchBar" : "ContentHeader");
+    function s(m) {
+      l.value = m.map((c) => Object.assign({}, c)), i.value = m.map((c) => c[e.idField]), t.emit("selectionChange", l.value);
+    }
+    return () => f("div", {
+      class: "f-combo-list-container"
+    }, [f(fe, {
+      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: s
+    }, null)]);
+  }
+}), rt = /* @__PURE__ */ new Map([
+  ["appearance", ge]
+]), dt = "https://json-schema.org/draft/2020-12/schema", ft = "https://farris-design.gitee.io/button-edit.schema.json", vt = "button-edit", pt = "A Farris Input Component", gt = "object", mt = {
+  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: ""
+  }
+}, ht = [
+  "id",
+  "type"
+], yt = {
+  $schema: dt,
+  $id: ft,
+  title: vt,
+  description: pt,
+  type: gt,
+  properties: mt,
+  required: ht
+}, 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: "," }
+};
+pe(he, yt, rt);
+const bt = {
+  popupContentPosition: { type: Object, default: { left: 0, top: 0 } },
+  host: { type: Object }
+}, Ct = /* @__PURE__ */ z({
+  name: "FOverlay",
+  props: bt,
+  emits: ["click"],
+  setup(e, t) {
+    const o = a(e.popupContentPosition), l = a(e.host);
+    function n(s) {
+      t.emit("click"), s.preventDefault(), s.stopPropagation();
+    }
+    const i = T(() => {
+      const s = l.value;
+      if (s) {
+        const m = s.getBoundingClientRect(), {
+          left: c,
+          top: v,
+          height: r
+        } = m;
+        return {
+          left: c,
+          top: v + r
+        };
+      }
+      return o.value;
+    }), u = T(() => ({
+      position: "relative",
+      left: `${i.value.left}px`,
+      top: `${i.value.top}px`
+    }));
+    return () => f(se, {
+      to: "body"
+    }, {
+      default: () => {
+        var s, m;
+        return [f("div", {
+          class: "overlay-container",
+          style: "pointer-events: auto;",
+          onClick: (c) => n(c)
+        }, [f("div", {
+          style: u.value
+        }, [(m = (s = t.slots).default) == null ? void 0 : m.call(s)])])];
+      }
+    });
+  }
+});
+function wt(e) {
+  if (e.content && e.content.render)
+    return e.content.render;
+  if (e.render && typeof e.render == "function")
+    return e.render;
+}
+function St(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() {
+      ce(() => {
+        document.body.removeChild(t);
+      });
+      const i = wt(e);
+      return () => f(Ct, {
+        "popup-content-position": e.popupPosition,
+        host: e.host,
+        onClick: n
+      }, {
+        default: () => [i && i()]
+      });
+    }
+  }), document.body.appendChild(t), o.mount(t), o;
+}
+class Tt {
+  static show(t) {
+    return St(t);
+  }
+}
+function Bt(e, t, o, l) {
+  const n = a(e.buttonBehavior), i = a(e.popupOnInput), u = T(() => ({
+    "input-group-append": !0,
+    "append-force-show": e.showButtonWhenDisabled && (e.readonly || e.disable)
+  })), s = T(() => e.showButtonWhenDisabled || (!e.editable || !e.readonly) && !e.disable);
+  async function m(d) {
+    if (s.value) {
+      const y = !!t.slots.default;
+      n.value === "Overlay" && Tt.show({
+        host: o.value,
+        render: () => {
+          if (t.slots.default)
+            return t.slots.default();
+        }
+      }), y && n.value === "Popup" && l.togglePopup(), y && i.value && l.hidePopup(), t.emit("clickButton", { origin: d, value: e.modelValue });
+    }
+    d.stopPropagation();
+  }
+  function c(d) {
+    t.emit("mouseEnterIcon", d);
+  }
+  function v(d) {
+    t.emit("mouseLeaveIcon", d);
+  }
+  function r() {
+    t.emit("mouseOverButton");
+  }
+  return {
+    buttonClass: u,
+    onClickButton: m,
+    onMouseEnterButton: c,
+    onMouseLeaveButton: v,
+    onMouseOverButton: r
+  };
+}
+function It(e, t, o, l, n, i) {
+  const u = a(!1), s = T(() => e.enableClear && !e.readonly && !e.disable), { changeTextBoxValue: m } = i;
+  function c(y) {
+    u.value = y;
+  }
+  W(n, () => {
+    l.value ? c(!!n.value) : c(!1);
+  });
+  function v(y) {
+    const h = !e.readonly && !e.disable && e.editable, p = !e.editable;
+    y.stopPropagation(), (h || p) && (m("", !1), c(!u.value), t.emit("clear"));
+  }
+  function r(y) {
+    if (s.value) {
+      if (!o.value) {
+        c(!1);
+        return;
+      }
+      (!e.editable || !e.readonly) && !e.disable && c(!0);
+    }
+  }
+  function d(y) {
+    s.value && c(!1);
+  }
+  return {
+    enableClearButton: s,
+    showClearButton: u,
+    onClearValue: v,
+    onMouseEnterTextBox: r,
+    onMouseLeaveTextBox: d
+  };
+}
+function kt(e, t, o, l, n) {
+  const i = a(e.popupOnInput), u = a(e.popupOnFocus), { shouldPopupContent: s } = n, m = T(() => e.enableTitle ? o.value : ""), c = T(() => (e.disable || e.readonly) && !e.forcePlaceholder ? "" : e.placeholder), v = T(() => e.readonly || !e.editable);
+  let r = !1;
+  const d = T(() => !e.disable && r), y = T(() => ({
+    "text-left": e.textAlign === "left",
+    "text-center": e.textAlign === "center",
+    "text-right": e.textAlign === "right",
+    "form-control": !0,
+    "f-utils-fill": !0
+  })), h = T(() => ({
+    "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 p(b, j = !0) {
+    o.value !== b && (o.value = b, j && t.emit("change", b), t.emit("update:modelValue", b));
+  }
+  function C(b) {
+    s.value = !1, p(b, !0);
+  }
+  W(
+    () => e.modelValue,
+    (b) => {
+      o.value = b, t.emit("change", b);
+    }
+  );
+  function B(b) {
+    r = !1, t.emit("blur", b), b.stopPropagation();
+  }
+  function k(b) {
+    t.emit("click", b);
+  }
+  function S(b) {
+    if (e.disable) {
+      r = !0;
+      return;
+    }
+    r = !0, v.value || (t.emit("focus", b), u.value && !s.value && n.popup());
+  }
+  function x(b) {
+    t.emit("input", b.target.value);
+    const j = b.target.value;
+    l.value = j, o.value !== j && p(j, !1), i.value && !s.value && n.popup();
+  }
+  function O(b) {
+    b.target.tagName !== "INPUT" && b.preventDefault(), b.stopPropagation();
+  }
+  function F(b) {
+    t.emit("keydown", b);
+  }
+  function E(b) {
+    b.key === "Enter" && (i.value || u.value) && n.hidePopup(), t.emit("keyup", b);
+  }
+  function L(b) {
+    const j = b.target.value;
+    b.stopPropagation(), p(j);
+  }
+  return {
+    hasFocusedTextBox: d,
+    isTextBoxReadonly: v,
+    textBoxClass: y,
+    textBoxPlaceholder: c,
+    textBoxTitle: m,
+    inputGroupClass: h,
+    changeTextBoxValue: p,
+    commitValue: C,
+    onBlurTextBox: B,
+    onClickTextBox: k,
+    onFocusTextBox: S,
+    onInput: x,
+    onKeyDownTextBox: F,
+    onKeyUpTextBox: E,
+    onMouseDownTextBox: O,
+    onTextBoxValueChange: L
+  };
+}
+function xt(e, t, o) {
+  const l = a(), n = a(!1);
+  function i() {
+    const c = l.value;
+    c && c.show(o.value);
+  }
+  async function u() {
+    !!t.slots.default && (n.value = !n.value, await K(), i());
+  }
+  async function s() {
+    !!t.slots.default && (n.value = !0, await K(), i());
+  }
+  function m() {
+    n.value = !1;
+  }
+  return { hidePopup: m, popup: s, shouldPopupContent: n, togglePopup: u, popoverRef: l };
+}
+function Ft(e, t, o) {
+  const {
+    isTextBoxReadonly: l,
+    textBoxClass: n,
+    textBoxPlaceholder: i,
+    textBoxTitle: u,
+    onBlurTextBox: s,
+    onClickTextBox: m,
+    onFocusTextBox: c,
+    onInput: v,
+    onKeyDownTextBox: r,
+    onKeyUpTextBox: d,
+    onMouseDownTextBox: y,
+    onTextBoxValueChange: h
+  } = o;
+  return () => f("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: s,
+    onChange: h,
+    onClick: m,
+    onFocus: c,
+    onInput: v,
+    onKeydown: r,
+    onKeyup: d,
+    onMousedown: y
+  }, null);
+}
+const Ot = {
+  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 Pt(e, t, o, l) {
+  const n = a(-1), i = a(!1);
+  function u(v, r, d) {
+    v.stopPropagation(), r && setTimeout(() => {
+      n.value = d, i.value = !0, r.moving = !0;
+    });
+  }
+  function s(v, r) {
+    if (v.preventDefault(), n.value !== r) {
+      const d = l.value[n.value], y = l.value;
+      y.splice(n.value, 1), y.splice(r, 0, d), n.value = r;
+    }
+  }
+  function m(v, r) {
+    v.preventDefault(), v.dataTransfer && (v.dataTransfer.dropEffect = "move");
+  }
+  function c(v, 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: s,
+    dragover: m,
+    dragend: c,
+    isDragging: i
+  };
+}
+const Vt = /* @__PURE__ */ z({
+  name: "FTags",
+  props: Ot,
+  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), s = a(e.showColor), m = a(e.activeTag), c = a(e.customStyle), v = a(e.showClose), r = a(e.showAddButton), d = a(e.showInput), y = a(e.addButtonText), h = a(e.enableAddButton);
+    a(e.placeholder), a(""), a();
+    const p = a(), C = a(e.wrapText), B = a();
+    function k() {
+      const g = n.value.map((w) => ({
+        type: "Tag",
+        payload: w
+      }));
+      return r.value && g.push({
+        type: "AddButton"
+      }), g;
+    }
+    const S = a(k());
+    function x(g) {
+      n.value = g, S.value = k();
+    }
+    const O = T(() => S.value.findIndex((g) => g.type === "Input")), F = Pt(e, t, n, S), {
+      dragstart: E,
+      dragenter: L,
+      dragover: b,
+      dragend: j
+    } = F;
+    W(() => e.data, (g) => x(g));
+    const M = T(() => {
+      const g = {
+        "farris-tags": !0,
+        "farris-tags-checkable": o.value,
+        "farris-tags-nowrap": !C.value
+      };
+      return l.value.split(" ").reduce((w, I) => (w[I] = !0, w), g), g;
+    });
+    function D(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": s.value,
+        "farris-tag-item-actived": m.value === g.name
+      };
+      if (i.value) {
+        const I = `farris-tag-item-${i.value}`;
+        w[I] = !0;
+      }
+      return w;
+    }
+    const X = T(() => {
+      const g = {};
+      return c.value && c.value.split(";").reduce((w, I) => {
+        const H = I.split(":");
+        return w[H[0]] = H[1], w;
+      }, g), g;
+    });
+    function R(g, w) {
+      o.value && w.selectable && (w.checked = !w.checked, m.value = w.checked ? w.name : "", w.checked && n.value.filter((I) => I.name !== w.name).forEach((I) => {
+        I.checked = !w.checked;
+      }), t.emit("change", n.value), t.emit("selectionChange", w));
+    }
+    function V(g, w) {
+      let I;
+      switch (g.key) {
+        case "Backspace":
+          n.value = n.value.filter((H) => H.name !== w.name), t.emit("change", n.value);
+          break;
+        case "ArrowLeft":
+          I = Math.max(p.value.scrollLeft + 20, 0), p.value.scrollLeft = I;
+          break;
+        case "ArrowRight":
+          I = Math.max(p.value.scrollLeft - 20, 0), p.value.scrollLeft = I;
+      }
+    }
+    function P(g, w) {
+      const I = n.value.findIndex((H) => H.name === w.name);
+      if (I > -1) {
+        const [H] = n.value.splice(I, 1);
+        S.value = k(), t.emit("change", n.value), t.emit("remove", n.value, H, I);
+      }
+      g.stopPropagation();
+    }
+    const A = T(() => ({
+      "farris-tag-item": !0,
+      "farris-tag-add-button": !0,
+      "farris-tag-add-button-disabled": !h.value
+    }));
+    function $(g) {
+    }
+    function _() {
+      return f("li", {
+        class: A.value,
+        onClick: (g) => void 0
+      }, [f("span", {
+        class: "f-icon f-icon-amplification"
+      }, null), f("span", {
+        class: "farris-tag-add-text"
+      }, [y.value])]);
+    }
+    function N(g) {
+      if (g && !g.innerText) {
+        const w = O.value;
+        if (w > 0) {
+          const [I] = n.value.splice(w - 1, 1);
+          S.value.splice(w - 1, 1), t.emit("remove", n.value, I, w - 1);
+        }
+      }
+    }
+    function U(g, w, I) {
+      g > -1 && (n.value.splice(g, 0, {
+        name: w,
+        value: I,
+        selectable: o.value
+      }), S.value = k(), t.emit("change", n.value));
+    }
+    function J(g) {
+      if (g && g.innerText) {
+        const w = g.innerText, I = O.value;
+        U(I, w, w), g.innerText = "";
+      }
+    }
+    function Y(g) {
+      const w = g.target;
+      w && (w.innerText ? J(w) : t.emit("change", n.value));
+    }
+    function ye(g) {
+      g.key === "Enter" && J(g.target), g.key === "Backspace" && (N(g.target), K(() => {
+        B.value && B.value.focus();
+      }));
+    }
+    function be() {
+      return f("li", {
+        class: "farris-tag-input-box"
+      }, [f("div", {
+        ref: B,
+        class: "form-control",
+        contenteditable: "true",
+        onKeyup: ye,
+        onBlur: Y
+      }, null)]);
+    }
+    function Ce(g, w) {
+      return f("li", {
+        class: D(g),
+        style: X.value,
+        tabindex: 0,
+        id: g.name,
+        key: g.name,
+        onClick: (I) => R(I, g),
+        onKeydown: (I) => V(I, g),
+        draggable: "true",
+        onDragstart: (I) => E(I, g, w),
+        onDragenter: (I) => L(I, w),
+        onDragend: (I) => j(I, g),
+        onDragover: (I) => b(I, w)
+      }, [f("div", {
+        title: g.name,
+        class: "tag-box"
+      }, [g.name]), v.value && f("span", {
+        class: "tag-delete"
+      }, [f("i", {
+        class: "f-icon f-icon-close",
+        onClick: (I) => P(I, g)
+      }, null)])]);
+    }
+    function we() {
+      return S.value.map((g, w) => {
+        switch (g.type) {
+          case "Tag":
+            return Ce(g.payload, w);
+          case "AddButton":
+            return _();
+          case "Input":
+            return be();
+        }
+      });
+    }
+    const Se = T(() => ({
+      "farris-tags-item-container": !0,
+      "farris-tag-item-capsule": u.value === "capsule"
+    }));
+    function Te(g) {
+      const w = Math.max(p.value.scrollLeft - g.deltaX, 0);
+      p.value.scrollLeft = w;
+    }
+    function Be(g) {
+      const w = p.value, I = n.value.length - 1;
+      if (w) {
+        const H = Array.from(w.children).filter((q) => q.className.indexOf("farris-tag-item") > -1).findIndex((q) => {
+          const G = q.getBoundingClientRect(), Z = window.getComputedStyle(q), oe = parseInt(Z["margin-left"], 10) + G.width + parseInt(Z["margin-right"], 10);
+          return G.left + oe > g;
+        });
+        if (H > -1)
+          return H;
+      }
+      return I;
+    }
+    function Ie(g) {
+      if (d.value) {
+        const I = Be(g.clientX) + 1, q = S.value.filter((G) => G.type !== "Input");
+        q.splice(I, 0, {
+          type: "Input"
+        }), S.value = q, K(() => {
+          B.value && B.value.focus();
+        });
+      }
+    }
+    function ke(g) {
+      var I;
+      g.preventDefault(), g.stopPropagation();
+      const w = (I = g.dataTransfer) == null ? void 0 : I.getData("Text");
+      if (w) {
+        const H = w.split(":"), q = H[0], G = H[1];
+        [...n.value].findIndex((ee) => (console.log(`${ee.value} === ${G} is ${ee.value === G}`), ee.value === G)) > -1 || U(n.value.length, q, G);
+      }
+    }
+    function xe(g) {
+      g.preventDefault();
+    }
+    return () => f("div", {
+      class: M.value,
+      onClick: Ie,
+      onDrop: ke,
+      onDragover: xe
+    }, [f("ul", {
+      ref: p,
+      class: Se.value,
+      onWheel: (g) => Te(g)
+    }, [we()])]);
+  }
+});
+function Mt(e, t, o) {
+  const l = a(e.separator), {
+    changeTextBoxValue: n
+  } = o, i = T(() => t.value ? t.value.split(l.value).map((s) => ({
+    name: s,
+    selectable: !0
+  })) : []);
+  function u(s) {
+    n(s.map((m) => m.name).join(l.value), !0);
+  }
+  return () => f(Vt, {
+    class: "form-control",
+    data: i.value,
+    showClose: !0,
+    showInput: !0,
+    onChange: u
+  }, null);
+}
+function Lt(e, t, o) {
+  const {
+    buttonClass: l,
+    onClickButton: n,
+    onMouseEnterButton: i,
+    onMouseLeaveButton: u
+  } = t, {
+    enableClearButton: s,
+    showClearButton: m,
+    onClearValue: c
+  } = o;
+  return () => f("div", {
+    class: l.value
+  }, [s.value && Q(f("span", {
+    class: "input-group-text input-group-clear",
+    onClick: c
+  }, [f("i", {
+    class: "f-icon modal_close"
+  }, null)]), [[re, m.value]]), e.buttonContent && f("span", {
+    class: "input-group-text input-group-append-button",
+    innerHTML: e.buttonContent,
+    onClick: n,
+    onMouseenter: i,
+    onMouseleave: u
+  }, null)]);
+}
+const Rt = {
+  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 jt(e) {
+  const t = e.host ? e.host : "body", o = T(() => t === "body" ? 0 : t ? t.getBoundingClientRect().top : 0), l = T(() => t === "body" ? 0 : t ? t.getBoundingClientRect().left : 0), n = T(() => 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 Dt(e, t, o, l) {
+  var R;
+  const n = a(0), i = a(((R = e.offsetX) == null ? void 0 : R.value) || 0), u = a(-1), s = a(-1), m = a(-1), c = a(e.placement), v = a(0), r = a(0), d = a(0), y = a(document.documentElement.scrollLeft), h = a(document.documentElement.scrollTop), { hostLeft: p, hostTop: C, hostWidth: B } = l;
+  W(e.offsetX, (V) => {
+    n.value = V - i.value;
+  });
+  const k = T(() => {
+    const V = {
+      left: `${r.value}px`,
+      top: `${d.value}px`,
+      transform: `translateX(${n.value}px)`
+    };
+    return e.zIndex !== -1 && (V["z-index"] = e.zIndex), u.value !== -1 && (V.width = `${u.value}px`), V;
+  }), S = T(() => ({
+    left: `${v.value}px`
+  }));
+  function x(V) {
+    if (V && e.keepWidthWithReference) {
+      const P = V.getBoundingClientRect();
+      u.value = Math.max(e.minWidth, P.width);
+    }
+  }
+  function O(V, P) {
+    const A = B.value - V.width - 4;
+    return A > 0 ? A : P;
+  }
+  function F(V, P, A) {
+    const $ = v.value, _ = P.left - p.value + P.width / 2 + y.value, N = P.top - C.value - (V.height + A.height) + h.value;
+    return { popoverLeft: _, popoverTop: N, arrowLeft: $ };
+  }
+  function E(V, P, A) {
+    return P.top - C.value + (P.height + A.height) + h.value;
+  }
+  function L(V, P) {
+    const A = O(P, V), $ = V <= A ? v.value : V - A;
+    return { popoverLeft: Math.min(V, A), arrowLeft: $ };
+  }
+  function b(V, P, A) {
+    const $ = P.left - p.value + P.width / 2 - (A.width / 2 - (V.left - p.value)) + y.value, { arrowLeft: _, popoverLeft: N } = L($, V), U = E(V, P, A);
+    return { popoverLeft: N, popoverTop: U, arrowLeft: _ };
+  }
+  function j(V, P, A) {
+    const $ = P.left - p.value + y.value, { arrowLeft: _, popoverLeft: N } = L($, V), U = E(V, P, A);
+    return { popoverLeft: N, popoverTop: U, arrowLeft: _ };
+  }
+  const M = /* @__PURE__ */ new Map([
+    ["top", F],
+    ["bottom", b],
+    ["bottom-left", j]
+  ]);
+  function D(V) {
+    var N;
+    const P = V.getBoundingClientRect();
+    s.value = P.top, m.value = P.left;
+    const A = t.value.getBoundingClientRect(), $ = (N = o.value) == null ? void 0 : N.getBoundingClientRect(), _ = M.get(c.value);
+    if (_) {
+      const { arrowLeft: U, popoverLeft: J, popoverTop: Y } = _($, P, A);
+      v.value = U, r.value = J, d.value = Y;
+    }
+    e.keepWidthWithReference && x(V);
+  }
+  function X(V) {
+    if (V) {
+      const P = V.getBoundingClientRect();
+      (P.left !== m.value || P.top !== s.value) && D(V);
+    }
+  }
+  return {
+    arrowStyle: S,
+    popoverStyle: k,
+    position: c,
+    popoverWidth: u,
+    fitToReference: x,
+    followToReferencePosition: X,
+    locateToReference: D
+  };
+}
+function At(e, t, o, l, n, i, u) {
+  const s = a(e.visible), m = T(() => s.value), { fitToReference: c, locateToReference: v } = u;
+  let r;
+  function d() {
+    s.value = !1, document.body.removeEventListener("click", r), t.emit("hidden");
+  }
+  r = (h) => {
+    if (!n.value.contains(h.target)) {
+      const p = n.value.closest(".popover");
+      p && p.removeEventListener("click", r), d();
+    }
+  };
+  async function y(h) {
+    if (l.value && o.value && h) {
+      s.value = !0, n.value = h, await K(), v(h), i.value && c(h), document.body.addEventListener("click", r);
+      const p = h.closest(".popover");
+      p && p.addEventListener("click", r), t.emit("shown");
+    }
+  }
+  return t.expose({ hide: d, show: y, shown: m }), { showPopover: s, hidePopverOnClickBodyHandler: r };
+}
+function Et(e, t, o, l, n) {
+  const { popoverWidth: i, fitToReference: u, followToReferencePosition: s } = n;
+  function m() {
+    if (o.value) {
+      s(o.value);
+      const c = o.value.getBoundingClientRect();
+      l.value && c.width !== i.value && u(o.value);
+    }
+  }
+  return { onResize: m };
+}
+const Ht = /* @__PURE__ */ z({
+  name: "FPopover",
+  props: Rt,
+  emits: ["shown", "hidden"],
+  setup(e, t) {
+    const o = a(), l = a(), n = a(e.reference), i = a(e.keepWidthWithReference), u = T(() => !!e.title), s = jt(e), {
+      host: m
+    } = s, c = Dt(e, o, l, s), {
+      position: v,
+      arrowStyle: r,
+      popoverStyle: d,
+      fitToReference: y,
+      locateToReference: h
+    } = c, {
+      showPopover: p,
+      hidePopverOnClickBodyHandler: C
+    } = At(e, t, o, l, n, i, c), {
+      onResize: B
+    } = Et(e, t, n, i, c), k = T(() => {
+      const x = `popover in popover-${v.value}`, O = `bs-popover-${v.value}`, F = {
+        "popover-fitcontent": e.fitContent
+      };
+      return F[x] = !0, F[O] = !0, (e.class || "").split(" ").reduce((L, b) => (L[b] = !0, L), F), F;
+    }), S = T(() => ({
+      "popover-content": !0,
+      "popover-body": !0
+    }));
+    return de(() => {
+      e.reference && h(n.value), i.value && y(n.value), window.addEventListener("resize", B);
+    }), ce(() => {
+      document.body.removeEventListener("click", C), window.removeEventListener("resize", B);
+    }), () => f(se, {
+      to: m
+    }, {
+      default: () => {
+        var x;
+        return [Q(f("div", {
+          ref: l,
+          class: k.value,
+          style: d.value,
+          onClick: (O) => {
+            O.stopPropagation();
+          }
+        }, [f("div", {
+          ref: o,
+          class: "popover-arrow arrow",
+          style: r.value
+        }, null), u.value && f("h3", {
+          class: "popover-title popover-header"
+        }, [e.title]), f("div", {
+          class: S.value
+        }, [t.slots.default && ((x = t.slots) == null ? void 0 : x.default())])]), [[re, p.value]])];
+      }
+    });
+  }
+});
+function Wt(e, t, o) {
+  const l = a(e.popupMinWidth), {
+    hidePopup: n,
+    popoverRef: i
+  } = o;
+  return () => f(Ht, {
+    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, s;
+      return [(s = (u = t.slots).default) == null ? void 0 : s.call(u)];
+    }
+  });
+}
+const _t = /* @__PURE__ */ z({
+  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 = xt(e, t, o), {
+      shouldPopupContent: u,
+      hidePopup: s
+    } = i, m = Bt(e, t, o, i), c = a(""), v = kt(e, t, n, c, i), {
+      hasFocusedTextBox: r,
+      commitValue: d,
+      inputGroupClass: y
+    } = v, h = It(e, t, n, r, c, v), {
+      onMouseEnterTextBox: p,
+      onMouseLeaveTextBox: C
+    } = h, B = T(() => {
+      const E = {
+        "f-button-edit": !0,
+        "f-cmp-inputgroup": !0,
+        "f-button-edit-nowrap": !e.wrapText
+      };
+      return l.value && l.value.split(" ").reduce((L, b) => (L[b] = !0, L), E), E;
+    });
+    function k() {
+      return e.multiSelect && e.inputType === "tag" ? Mt(e, n, v) : Ft(e, n, v);
+    }
+    let S = k();
+    W([() => e.multiSelect, () => e.inputType], () => {
+      S = k();
+    });
+    const x = Lt(e, m, h), O = Wt(e, t, i), F = {
+      commitValue: d,
+      elementRef: o,
+      hidePopup: s
+    };
+    return de(() => {
+      o.value.componentInstance = F;
+    }), t.expose(F), () => f(te, null, [f("div", Me(t.attrs, {
+      ref: o,
+      class: B.value,
+      id: e.id
+    }), [f("div", {
+      class: y.value,
+      onMouseenter: p,
+      onMouseleave: C
+    }, [S(), x()])]), u.value && O()]);
+  }
+});
+function $t(e) {
+  const t = a(""), o = a(e.modelValue), l = a(e.data || []), n = a(e.editable);
+  function i(c) {
+    const v = c.split(e.separator).map((d) => [d, !0]), r = new Map(v);
+    return l.value.filter((d) => r.has(d[e.valueField]));
+  }
+  function u(c) {
+    const v = i(c).map((r) => r[e.textField]).join(e.separator);
+    t.value = n.value ? v || c : v;
+  }
+  function s(c) {
+    const v = c.split(e.separator).map((d) => [d, !0]), r = new Map(v);
+    return l.value.filter((d) => r.has(d[e.textField]));
+  }
+  function m() {
+    const { url: c, method: v = "GET", headers: r = {}, body: d = null } = e.remote;
+    fetch(c, { method: v, headers: r, body: d }).then((h) => {
+      if (h.status === 200)
+        return h.json();
+      throw new Error(h.statusText);
+    }).then((h) => {
+      l.value = h;
+    }).catch((h) => {
+      console.error(h);
+    });
+  }
+  return e.remote && m(), W(() => e.data, () => {
+    l.value = e.data;
+  }), W([l], ([c]) => {
+    if (e.modelValue) {
+      const v = c.find((r) => r[e.valueField] === e.modelValue);
+      v && (t.value = v[e.textField]);
+    }
+  }), W(() => e.modelValue, (c) => {
+    o.value = c, u(c);
+  }), u(e.modelValue), { dataSource: l, displayText: t, editable: n, modelValue: o, getItemsByDisplayText: s, getItemsByValue: i };
+}
+const ue = /* @__PURE__ */ z({
+  name: "FComboList",
+  props: me,
+  emits: ["clear", "update:modelValue", "change"],
+  setup(e, t) {
+    const o = a(), {
+      dataSource: l,
+      displayText: n,
+      editable: i,
+      modelValue: u,
+      getItemsByDisplayText: s
+    } = $t(e), m = T(() => e.multiSelect);
+    function c() {
+      !m.value && o.value && o.value.hidePopup();
+    }
+    function v(p) {
+      n.value = p.map((C) => C[e.textField]).join(e.separator), u.value = p.map((C) => C[e.valueField]).join(e.separator), t.emit("update:modelValue", u.value), t.emit("change", p), c();
+    }
+    function r(p) {
+      u.value = "", t.emit("update:modelValue", ""), t.emit("clear");
+    }
+    function d(p) {
+      u.value = p, t.emit("update:modelValue", u.value);
+      const C = {};
+      C[e.idField] = p, C[e.textField] = p, t.emit("change", [C]);
+    }
+    function y(p) {
+      if (i.value) {
+        d(p);
+        return;
+      }
+      const C = s(p);
+      v(C);
+    }
+    function h() {
+      return n.value;
+    }
+    return t.expose({
+      getDisplayText: h
+    }), () => f(_t, {
+      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": (p) => n.value = p,
+      onClear: r,
+      onChange: y
+    }, {
+      default: () => [f(ct, {
+        idField: e.idField,
+        valueField: e.valueField,
+        textField: e.textField,
+        dataSource: l.value,
+        selectedValues: u.value,
+        multiSelect: e.multiSelect,
+        enableSearch: e.enableSearch,
+        onSelectionChange: v
+      }, null)]
+    });
+  }
+});
+const ie = /* @__PURE__ */ z({
+  name: "FOrder",
+  props: Le,
+  emits: ["change"],
+  setup(e, t) {
+    const o = a(e.items), l = a("排序列"), n = a("排序方式"), i = a("添加排序列"), u = [{
+      id: "asc",
+      name: "升序"
+    }, {
+      id: "desc",
+      name: "降序"
+    }], s = a(/* @__PURE__ */ new Map());
+    function m() {
+      const C = o.value.map((B) => [B.id, !0]);
+      s.value = new Map(C);
+    }
+    m();
+    const c = T(() => e.dataSource.map((C) => (C.disabled = s.value.has(C.id), C))), v = T(() => ({
+      "f-order": !0
+    }));
+    function r(C) {
+      o.value = o.value.filter((B) => B.id !== C.id), m(), t.emit("change", o.value);
+    }
+    function d() {
+      o.value = [...o.value, {
+        id: Date.now().toString(),
+        name: "",
+        order: "asc"
+      }], m(), t.emit("change", o.value);
+    }
+    function y(C) {
+      m(), t.emit("change", o.value);
+    }
+    function h(C) {
+      if (C && C.length) {
+        const B = /* @__PURE__ */ new Map();
+        C.reduce((k, S) => (k.set(S.id, S), k), B), o.value = C.map((k) => B.get(k.id)), t.emit("change", o.value);
+      }
+    }
+    function p() {
+      return f(fe, {
+        style: "flex:1",
+        data: o.value,
+        draggable: !0,
+        view: "DraggableView",
+        "keep-order": !0,
+        itemClass: "f-order-item",
+        onRemoveItem: r,
+        onChange: h
+      }, {
+        header: () => f("div", {
+          class: "f-order-header"
+        }, [f("span", {
+          class: "f-order-header-order-field"
+        }, [l.value]), f("span", {
+          class: "f-order-header-order-type"
+        }, [n.value])]),
+        itemContent: (C) => f("div", {
+          class: "f-order-item-content"
+        }, [f(ue, {
+          class: "f-order-item-content-order-field",
+          data: c.value,
+          valueField: "id",
+          textField: "name",
+          idField: "id",
+          modelValue: C.id,
+          "onUpdate:modelValue": (B) => C.id = B,
+          onChange: y,
+          onClear: y
+        }, null), f(ue, {
+          class: "f-order-item-content-order-type",
+          data: u,
+          valueField: "id",
+          textField: "name",
+          idField: "id",
+          modelValue: C.order,
+          "onUpdate:modelValue": (B) => C.order = B,
+          onChange: y
+        }, null)]),
+        footer: () => f("div", {
+          class: "f-order-footer"
+        }, [f(Ue, {
+          type: "link",
+          class: "f-order-add-button",
+          onClick: d
+        }, {
+          default: () => f(te, null, [f("span", {
+            class: "f-order-add-icon"
+          }, [f("i", {
+            class: "f-icon f-icon-add"
+          }, null)]), i.value])
+        })])
+      });
+    }
+    return () => f("div", {
+      class: v.value
+    }, [p()]);
+  }
+}), zt = {
+  install(e) {
+    e.component(ie.name, ie);
+  }
+};
+export {
+  ie as Order,
+  zt as default,
+  Le as orderProps
+};