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

package/filter-bar/index.esm.js

@@ -0,0 +1,549 @@
+var A = Object.defineProperty;
+var N = (s, e, t) => e in s ? A(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
+var n = (s, e, t) => (N(s, typeof e != "symbol" ? e + "" : e, t), t);
+import { ref as c, createVNode as o, createTextVNode as R, computed as f, defineComponent as $, watch as B } from "vue";
+import { cloneDeep as w } from "lodash-es";
+const M = {
+  /** 被绑定数据 */
+  data: { type: Array, default: [] },
+  fields: { type: Array, default: [] },
+  mode: { type: String, default: "editable" },
+  resetText: { type: String, default: "清空已选" },
+  showReset: { type: Boolean, default: !1 }
+};
+class O {
+  constructor(e = { value: [] }) {
+    n(this, "editorType", "check-box");
+    n(this, "value");
+    this.value = e.value;
+  }
+  clear() {
+    this.value = [];
+  }
+  setValue(e) {
+    this.value = e;
+  }
+  getValue() {
+    return this.value;
+  }
+  isEmpty() {
+    return this.value.length === 0;
+  }
+}
+class L {
+  constructor(e = { textValue: "", value: [], valueField: "" }) {
+    n(this, "editorType", "combo-lookup");
+    n(this, "textValue");
+    n(this, "value");
+    n(this, "valueField");
+    this.textValue = e.textValue, this.value = e.value, this.valueField = e.valueField;
+  }
+  clear() {
+    this.value = [], this.valueField = "", this.textValue = "";
+  }
+  getPropValue(e, t) {
+    if (t.length > 1) {
+      const l = t.shift();
+      return e[l] ? this.getPropValue(e[l], t) : null;
+    }
+    return e[t[0]];
+  }
+  getTextValue(e) {
+    const t = e.split("."), l = this.value.map((i) => this.getPropValue(i, w(t)));
+    return l && l.length ? l.join(",") : "";
+  }
+  getValue() {
+    const e = this.valueField.split("."), t = this.value.map((l) => this.getPropValue(l, w(e)));
+    return t && t.length ? t.join(",") : "";
+  }
+  setValue(e) {
+    throw new Error("Method not implemented.");
+  }
+  isEmpty() {
+    return !this.valueField;
+  }
+}
+class q {
+  constructor(e = { value: "" }) {
+    n(this, "editorType", "date-picker");
+    n(this, "value");
+    this.value = e.value;
+  }
+  setValue(e) {
+    this.value = e.formatted;
+  }
+  getValue() {
+    return this.value;
+  }
+  isEmpty() {
+    return !this.value;
+  }
+  clear() {
+    this.value = void 0;
+  }
+}
+class P {
+  constructor(e = { begin: "", end: "" }) {
+    n(this, "editorType", "date-range");
+    n(this, "begin", "");
+    n(this, "end", "");
+    this.begin = e.begin, this.end = e.end;
+  }
+  clear() {
+    this.begin = "", this.end = "";
+  }
+  getValue() {
+    return !this.begin || !this.end ? "" : `${this.begin}~${this.end}`;
+  }
+  setValue(e) {
+    e.dataRange ? (this.begin = e.dataRange.split(e.delimiter)[0], this.end = e.dataRange.split(e.delimiter)[1]) : this.clear();
+  }
+  isEmpty() {
+    return !this.begin || !this.end;
+  }
+}
+class G {
+  constructor(e = { value: "" }) {
+    n(this, "editorType", "datetime-picker");
+    n(this, "value");
+    this.value = e.value;
+  }
+  clear() {
+    this.value = void 0;
+  }
+  getValue() {
+    return this.value;
+  }
+  setValue(e) {
+    this.value = e.formatted;
+  }
+  isEmpty() {
+    return !this.value;
+  }
+}
+class W {
+  // 旧结构无，新结构为选中的value值，多选是以,分割的字符串
+  constructor(e = { value: "", dispalyText: "" }) {
+    n(this, "editorType", "combo-list");
+    n(this, "value");
+    // 旧结构{Type: '', Content: {value: string, name: string}} 新结构Array[{value: string, name: string}]
+    n(this, "displayText");
+    this.displayText = e.dispalyText, this.value = e.value;
+  }
+  clear() {
+    this.value = [], this.displayText = "";
+  }
+  getValue() {
+    return this.displayText;
+  }
+  setValue(e) {
+    this.displayText = e.dispalyText, this.value = e.value;
+  }
+  isEmpty() {
+    return !this.displayText;
+  }
+}
+class z {
+  constructor(e = { value: [], displayText: "", displayField: "", isInputText: !1 }) {
+    n(this, "editorType", "input-group");
+    // 通过弹窗返回的若干个值对象构成的数组
+    n(this, "value");
+    // 控件内显示的值
+    n(this, "displayText");
+    // 弹窗模式下，取列表中哪个字段的值映射到当前字段
+    n(this, "valueField");
+    // 是否是手动输入的值
+    n(this, "isInputText");
+    this.value = e.value, this.displayText = e.displayText, this.valueField = e.displayField, this.isInputText = e.isInputText;
+  }
+  clear() {
+    this.value = [], this.displayText = "", this.valueField = "";
+  }
+  getPropValue(e, t) {
+    if (t.length > 1) {
+      const l = t.shift();
+      return e[l] ? this.getPropValue(e[l], t) : "";
+    }
+    return e[t[0]];
+  }
+  getTextValue(e) {
+    const t = e.split("."), l = this.value.map((i) => this.getPropValue(i, w(t)));
+    return l && l.length ? l.join(",") : "";
+  }
+  getValue() {
+    const e = this.valueField.split(".") || [], t = this.value.map((l) => this.getPropValue(l, w(e)));
+    return t && t.length ? t.join(",") : "";
+  }
+  setValue(e) {
+    throw new Error("Method not implemented.");
+  }
+  isEmpty() {
+    return !this.displayText;
+  }
+}
+class H {
+  constructor(e = { textValue: "", value: [], valueField: "", isInputText: !1 }) {
+    n(this, "editorType", "lookup");
+    n(this, "textValue");
+    n(this, "value");
+    n(this, "valueField");
+    // 帮助的值是否为手动输入的任意值，对应帮助的任意输入属性nosearch
+    n(this, "isInputText");
+    this.value = e.value, this.valueField = e.valueField, this.textValue = e.textValue, this.isInputText = e.isInputText;
+  }
+  clear() {
+    this.value = [], this.valueField = "", this.textValue = "";
+  }
+  getPropValue(e, t) {
+    if (t.length > 1) {
+      const l = t.shift();
+      return e[l] ? this.getPropValue(e[l], t) : null;
+    }
+    return e[t[0]];
+  }
+  getTextValue(e) {
+    const t = e.split("."), l = this.value.map((i) => this.getPropValue(i, t));
+    return l && l.length ? l.join(",") : "";
+  }
+  getValue() {
+    const e = this.valueField.split("."), t = this.value.map((l) => this.getPropValue(l, e));
+    return t && t.length ? t.join(",") : "";
+  }
+  setValue(e) {
+    throw new Error("Method not implemented.");
+  }
+  isEmpty() {
+    return !this.value.length;
+  }
+}
+class J {
+  constructor(e = { value: "" }) {
+    n(this, "editorType", "month-picker");
+    n(this, "value");
+    this.value = e.value;
+  }
+  setValue(e) {
+    this.value = e.formatted;
+  }
+  getValue() {
+    return this.value;
+  }
+  clear() {
+    this.value = void 0;
+  }
+  isEmpty() {
+    return !this.value;
+  }
+}
+class K {
+  constructor(e = { begin: "", end: "" }) {
+    n(this, "editorType", "month-range");
+    n(this, "begin");
+    n(this, "end");
+    this.begin = e.begin, this.end = e.end;
+  }
+  clear() {
+    this.begin = "", this.end = "";
+  }
+  getValue() {
+    return !this.begin || !this.end ? "" : `${this.begin}~${this.end}`;
+  }
+  setValue(e) {
+    e.dataRange ? (this.begin = e.dataRange.split(e.delimiter)[0], this.end = e.dataRange.split(e.delimiter)[1]) : this.clear();
+  }
+  isEmpty() {
+    return !this.begin || !this.end;
+  }
+}
+class Q {
+  constructor(e = { begin: null, end: null }) {
+    n(this, "editorType", "number-range");
+    n(this, "begin");
+    n(this, "end");
+    this.begin = e.begin == null ? null : parseFloat(e.begin), this.end = e.end == null ? null : parseFloat(e.end);
+  }
+  clear() {
+    this.begin = null, this.end = null;
+  }
+  getValue() {
+    return {
+      begin: this.begin,
+      end: this.end
+    };
+  }
+  setValue(e) {
+    this.begin = e.begin == null ? null : parseFloat(e.begin), this.end = e.end == null ? null : parseFloat(e.end);
+  }
+  isEmpty() {
+    return this.begin == null && this.end == null;
+  }
+}
+class U {
+  constructor(e = { value: "" }) {
+    n(this, "editorType", "number-spinner");
+    n(this, "value");
+    this.value = e.value == null ? null : parseFloat(e.value);
+  }
+  clear() {
+    this.value = void 0;
+  }
+  getValue() {
+    return this.value;
+  }
+  setValue(e) {
+    this.value = isNaN(parseFloat(e)) ? null : e;
+  }
+  isEmpty() {
+    return this.value == null;
+  }
+}
+class X {
+  constructor(e = { value: null }) {
+    n(this, "editorType", "radio-group");
+    n(this, "value");
+    this.value = e.value;
+  }
+  clear() {
+    this.value = void 0;
+  }
+  getValue() {
+    return this.value;
+  }
+  setValue(e) {
+    this.value = e;
+  }
+  isEmpty() {
+    return !this.value;
+  }
+}
+class Y {
+  constructor(e = { value: "" }) {
+    n(this, "editorType", "text");
+    n(this, "value");
+    this.value = e.value;
+  }
+  clear() {
+    this.value = void 0;
+  }
+  getValue() {
+    return this.value;
+  }
+  setValue(e) {
+    this.value = e;
+  }
+  isEmpty() {
+    return !this.value;
+  }
+}
+function Z() {
+  function s(e, t) {
+    switch (e) {
+      case "check-box":
+        return new O(t);
+      case "combo-list":
+        return new W(t);
+      case "combo-lookup":
+        return new L(t);
+      case "input-group":
+        return new z(t);
+      case "date-picker":
+        return new q(t);
+      case "date-range":
+        return new P(t);
+      case "datetime-picker":
+        return new G(t);
+      case "datetime-range":
+        return new P(t);
+      case "lookup":
+        return new H(t);
+      case "month-picker":
+        return new J(t);
+      case "month-range":
+        return new K(t);
+      case "number-range":
+        return new Q(t);
+      case "number-spinner":
+        return new U(t);
+      case "radio-group":
+        return new X(t);
+      default:
+        return new Y(t);
+    }
+  }
+  return { createConditionValue: s };
+}
+function _(s, e) {
+  const t = c([]), l = c([]), i = c([]), y = c(""), v = c(!1), g = c(s.mode), p = /* @__PURE__ */ new Map(), V = Z();
+  function b(u) {
+    return !v.value && g.value === "display-only" && !!u.hasValue && !!u.displayText;
+  }
+  function x(u) {
+    l.value = u, l.value.reduce((a, h) => (a.set(h.labelCode, h), a), p);
+  }
+  function F(u) {
+    t.value = u.map((a, h) => {
+      var I;
+      if (typeof a.value == "string") {
+        const T = ((I = p.get(a.fieldCode)) == null ? void 0 : I.editor.type) || "text";
+        a.value = V.createConditionValue(T, { value: a.value });
+      }
+      return a.conditionId = h, a;
+    });
+  }
+  function r() {
+    const u = l.value.map((a) => ({
+      id: a.id,
+      fieldCode: a.code,
+      fieldName: a.name,
+      editor: a.editor
+    }));
+    return t.value.reduce((a, h, I) => {
+      const T = a.find((j) => j.fieldCode === h.fieldCode);
+      return T && (T.displayText = h.value.getValue(), T.hasValue = !0), a;
+    }, u), u;
+  }
+  function d(u, a) {
+    x(s.fields), F(s.data), i.value = r();
+  }
+  function m(u) {
+    i.value = i.value.filter((a) => a.id !== u.id), t.value = t.value.filter((a) => a.fieldCode !== u.fieldCode), l.value = l.value.filter((a) => a.id !== u.id), e.emit("Remove", u.fieldCode);
+  }
+  function C(u) {
+    u.displayText = "", u.hasValue = !1, t.value = t.value.filter((a) => a.fieldCode !== u.fieldCode), e.emit("Clear", u.fieldCode);
+  }
+  function k() {
+    i.value = [], t.value = [], l.value = [], e.emit("Reset");
+  }
+  function E() {
+    i.value.forEach((u) => {
+      u.displayText = "", u.hasValue = !1;
+    }), t.value = [], e.emit("Reset");
+  }
+  return d(s.fields, s.data), {
+    clearAll: k,
+    clearFilterItem: C,
+    currentFilterId: y,
+    filterFields: l,
+    filterItems: i,
+    loadFilterItems: d,
+    removeFilterItem: m,
+    reset: E,
+    shouldShowClearButtonInFilterItem: b
+  };
+}
+function D(s, e) {
+  function t() {
+  }
+  return () => o("div", {
+    class: "f-filter-list-ellipsis",
+    onClick: (l) => void 0
+  }, [R("...")]);
+}
+function ee(s, e, t) {
+  const {
+    clearFilterItem: l,
+    currentFilterId: i,
+    filterItems: y,
+    removeFilterItem: v,
+    shouldShowClearButtonInFilterItem: g
+  } = t, p = c(!1), V = function(r, d) {
+    return {
+      "f-filter-item": !0,
+      "f-filter-item-actived": r.hasValue,
+      "f-filter-item-last": d === y.value.length - 1,
+      "f-filter-item-edit": r.id === i.value
+    };
+  }, b = f(() => !p.value && s.mode === "editable");
+  function x(r, d) {
+    s.mode === "display-only" ? v(d) : l(d);
+  }
+  function F(r, d, m) {
+  }
+  return (r, d) => o("div", {
+    id: r.id,
+    class: V(r, d),
+    onClick: (m) => void 0
+  }, [o("div", {
+    class: "f-filter-item-inner"
+  }, [r.editor.required && o("span", {
+    class: "f-filter-item-required text-danger"
+  }, [R("*")]), o("span", {
+    class: "f-filter-item-text"
+  }, [r.fieldName]), r.hasValue && r.displayText && o("span", {
+    class: "f-filter-item-tip"
+  }, [R(":")]), r.hasValue && r.displayText && o("span", {
+    class: "f-filter-item-content"
+  }, [r.displayText]), b.value && o("span", {
+    class: "f-filter-item-arrow f-icon f-icon-arrow-chevron-down"
+  }, null)]), g(r) && o("span", {
+    class: "f-filter-item-clear",
+    onClick: (m) => x(m, r)
+  }, [o("span", {
+    class: "f-icon f-icon-close-circle"
+  }, null)])]);
+}
+function te(s, e, t) {
+  const l = c([]), i = c(!1), y = c(""), v = c(s.resetText), g = c(s.showReset), {
+    clearAll: p,
+    reset: V
+  } = t, b = f(() => i.value && l.value && l.value.length > 0), x = f(() => g.value);
+  function F(d) {
+  }
+  function r(d) {
+    s.mode === "display-only" ? p() : V();
+  }
+  return () => o("div", {
+    class: "f-filter-toolbars"
+  }, [b.value && o("button", {
+    class: "btn btn-link",
+    onClick: (d) => void 0
+  }, [y.value]), x.value && o("button", {
+    class: "btn btn-link",
+    onClick: (d) => r()
+  }, [v.value])]);
+}
+const S = /* @__PURE__ */ $({
+  name: "FFilterBar",
+  props: M,
+  emits: ["Clear", "Remove", "Reset"],
+  setup(s, e) {
+    const t = c(!1), l = c(!1), i = c(!1), y = c(!1), v = _(s, e), {
+      filterFields: g,
+      filterItems: p,
+      loadFilterItems: V
+    } = v, b = f(() => ({
+      display: g.value && g.value.length ? "" : "none"
+    }));
+    B([() => s.data, () => s.fields], ([a, h]) => {
+      V(h, a);
+    });
+    const x = f(() => l.value && t.value), F = f(() => ({
+      "f-filter-list": !0,
+      "f-filter-list-extend": x.value
+    })), r = f(() => p.value.length > 0), d = ee(s, e, v);
+    function m() {
+      return o("div", {
+        class: F.value
+      }, [p.value.map((a, h) => d(a, h))]);
+    }
+    const C = f(() => i.value && !l.value && y.value), k = D(), E = f(() => !l.value), u = te(s, e, v);
+    return () => o("div", {
+      class: "f-filter-wrapper",
+      style: b.value
+    }, [o("div", {
+      class: "f-filter-wrapper-inner f-utils-fill"
+    }, [o("div", {
+      class: "f-filter-main f-utils-fill"
+    }, [o("div", {
+      class: "f-filter-list-wrapper"
+    }, [r.value && m(), C.value && k(), E.value && u()])])])]);
+  }
+}), ae = {
+  install(s) {
+    s.component(S.name, S);
+  }
+};
+export {
+  ae as default,
+  M as filterBarProps
+};

package/filter-bar/index.umd.js

@@ -0,0 +1 @@
+(function(c,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue"),require("lodash-es")):typeof define=="function"&&define.amd?define(["exports","vue","lodash-es"],l):(c=typeof globalThis<"u"?globalThis:c||self,l(c["filter-bar"]={},c.Vue,c.lodashEs))})(this,function(c,l,p){"use strict";var Y=Object.defineProperty;var Z=(c,l,p)=>l in c?Y(c,l,{enumerable:!0,configurable:!0,writable:!0,value:p}):c[l]=p;var n=(c,l,p)=>(Z(c,typeof l!="symbol"?l+"":l,p),p);const E={data:{type:Array,default:[]},fields:{type:Array,default:[]},mode:{type:String,default:"editable"},resetText:{type:String,default:"清空已选"},showReset:{type:Boolean,default:!1}};class P{constructor(e={value:[]}){n(this,"editorType","check-box");n(this,"value");this.value=e.value}clear(){this.value=[]}setValue(e){this.value=e}getValue(){return this.value}isEmpty(){return this.value.length===0}}class S{constructor(e={textValue:"",value:[],valueField:""}){n(this,"editorType","combo-lookup");n(this,"textValue");n(this,"value");n(this,"valueField");this.textValue=e.textValue,this.value=e.value,this.valueField=e.valueField}clear(){this.value=[],this.valueField="",this.textValue=""}getPropValue(e,t){if(t.length>1){const s=t.shift();return e[s]?this.getPropValue(e[s],t):null}return e[t[0]]}getTextValue(e){const t=e.split("."),s=this.value.map(o=>this.getPropValue(o,p.cloneDeep(t)));return s&&s.length?s.join(","):""}getValue(){const e=this.valueField.split("."),t=this.value.map(s=>this.getPropValue(s,p.cloneDeep(e)));return t&&t.length?t.join(","):""}setValue(e){throw new Error("Method not implemented.")}isEmpty(){return!this.valueField}}class j{constructor(e={value:""}){n(this,"editorType","date-picker");n(this,"value");this.value=e.value}setValue(e){this.value=e.formatted}getValue(){return this.value}isEmpty(){return!this.value}clear(){this.value=void 0}}class I{constructor(e={begin:"",end:""}){n(this,"editorType","date-range");n(this,"begin","");n(this,"end","");this.begin=e.begin,this.end=e.end}clear(){this.begin="",this.end=""}getValue(){return!this.begin||!this.end?"":`${this.begin}~${this.end}`}setValue(e){e.dataRange?(this.begin=e.dataRange.split(e.delimiter)[0],this.end=e.dataRange.split(e.delimiter)[1]):this.clear()}isEmpty(){return!this.begin||!this.end}}class A{constructor(e={value:""}){n(this,"editorType","datetime-picker");n(this,"value");this.value=e.value}clear(){this.value=void 0}getValue(){return this.value}setValue(e){this.value=e.formatted}isEmpty(){return!this.value}}class M{constructor(e={value:"",dispalyText:""}){n(this,"editorType","combo-list");n(this,"value");n(this,"displayText");this.displayText=e.dispalyText,this.value=e.value}clear(){this.value=[],this.displayText=""}getValue(){return this.displayText}setValue(e){this.displayText=e.dispalyText,this.value=e.value}isEmpty(){return!this.displayText}}class B{constructor(e={value:[],displayText:"",displayField:"",isInputText:!1}){n(this,"editorType","input-group");n(this,"value");n(this,"displayText");n(this,"valueField");n(this,"isInputText");this.value=e.value,this.displayText=e.displayText,this.valueField=e.displayField,this.isInputText=e.isInputText}clear(){this.value=[],this.displayText="",this.valueField=""}getPropValue(e,t){if(t.length>1){const s=t.shift();return e[s]?this.getPropValue(e[s],t):""}return e[t[0]]}getTextValue(e){const t=e.split("."),s=this.value.map(o=>this.getPropValue(o,p.cloneDeep(t)));return s&&s.length?s.join(","):""}getValue(){const e=this.valueField.split(".")||[],t=this.value.map(s=>this.getPropValue(s,p.cloneDeep(e)));return t&&t.length?t.join(","):""}setValue(e){throw new Error("Method not implemented.")}isEmpty(){return!this.displayText}}class ${constructor(e={textValue:"",value:[],valueField:"",isInputText:!1}){n(this,"editorType","lookup");n(this,"textValue");n(this,"value");n(this,"valueField");n(this,"isInputText");this.value=e.value,this.valueField=e.valueField,this.textValue=e.textValue,this.isInputText=e.isInputText}clear(){this.value=[],this.valueField="",this.textValue=""}getPropValue(e,t){if(t.length>1){const s=t.shift();return e[s]?this.getPropValue(e[s],t):null}return e[t[0]]}getTextValue(e){const t=e.split("."),s=this.value.map(o=>this.getPropValue(o,t));return s&&s.length?s.join(","):""}getValue(){const e=this.valueField.split("."),t=this.value.map(s=>this.getPropValue(s,e));return t&&t.length?t.join(","):""}setValue(e){throw new Error("Method not implemented.")}isEmpty(){return!this.value.length}}class O{constructor(e={value:""}){n(this,"editorType","month-picker");n(this,"value");this.value=e.value}setValue(e){this.value=e.formatted}getValue(){return this.value}clear(){this.value=void 0}isEmpty(){return!this.value}}class L{constructor(e={begin:"",end:""}){n(this,"editorType","month-range");n(this,"begin");n(this,"end");this.begin=e.begin,this.end=e.end}clear(){this.begin="",this.end=""}getValue(){return!this.begin||!this.end?"":`${this.begin}~${this.end}`}setValue(e){e.dataRange?(this.begin=e.dataRange.split(e.delimiter)[0],this.end=e.dataRange.split(e.delimiter)[1]):this.clear()}isEmpty(){return!this.begin||!this.end}}class q{constructor(e={begin:null,end:null}){n(this,"editorType","number-range");n(this,"begin");n(this,"end");this.begin=e.begin==null?null:parseFloat(e.begin),this.end=e.end==null?null:parseFloat(e.end)}clear(){this.begin=null,this.end=null}getValue(){return{begin:this.begin,end:this.end}}setValue(e){this.begin=e.begin==null?null:parseFloat(e.begin),this.end=e.end==null?null:parseFloat(e.end)}isEmpty(){return this.begin==null&&this.end==null}}class G{constructor(e={value:""}){n(this,"editorType","number-spinner");n(this,"value");this.value=e.value==null?null:parseFloat(e.value)}clear(){this.value=void 0}getValue(){return this.value}setValue(e){this.value=isNaN(parseFloat(e))?null:e}isEmpty(){return this.value==null}}class _{constructor(e={value:null}){n(this,"editorType","radio-group");n(this,"value");this.value=e.value}clear(){this.value=void 0}getValue(){return this.value}setValue(e){this.value=e}isEmpty(){return!this.value}}class W{constructor(e={value:""}){n(this,"editorType","text");n(this,"value");this.value=e.value}clear(){this.value=void 0}getValue(){return this.value}setValue(e){this.value=e}isEmpty(){return!this.value}}function z(){function r(e,t){switch(e){case"check-box":return new P(t);case"combo-list":return new M(t);case"combo-lookup":return new S(t);case"input-group":return new B(t);case"date-picker":return new j(t);case"date-range":return new I(t);case"datetime-picker":return new A(t);case"datetime-range":return new I(t);case"lookup":return new $(t);case"month-picker":return new O(t);case"month-range":return new L(t);case"number-range":return new q(t);case"number-spinner":return new G(t);case"radio-group":return new _(t);default:return new W(t)}}return{createConditionValue:r}}function H(r,e){const t=l.ref([]),s=l.ref([]),o=l.ref([]),V=l.ref(""),f=l.ref(!1),g=l.ref(r.mode),v=new Map,y=z();function b(i){return!f.value&&g.value==="display-only"&&!!i.hasValue&&!!i.displayText}function x(i){s.value=i,s.value.reduce((a,h)=>(a.set(h.labelCode,h),a),v)}function T(i){t.value=i.map((a,h)=>{var N;if(typeof a.value=="string"){const F=((N=v.get(a.fieldCode))==null?void 0:N.editor.type)||"text";a.value=y.createConditionValue(F,{value:a.value})}return a.conditionId=h,a})}function u(){const i=s.value.map(a=>({id:a.id,fieldCode:a.code,fieldName:a.name,editor:a.editor}));return t.value.reduce((a,h,N)=>{const F=a.find(X=>X.fieldCode===h.fieldCode);return F&&(F.displayText=h.value.getValue(),F.hasValue=!0),a},i),i}function d(i,a){x(r.fields),T(r.data),o.value=u()}function m(i){o.value=o.value.filter(a=>a.id!==i.id),t.value=t.value.filter(a=>a.fieldCode!==i.fieldCode),s.value=s.value.filter(a=>a.id!==i.id),e.emit("Remove",i.fieldCode)}function w(i){i.displayText="",i.hasValue=!1,t.value=t.value.filter(a=>a.fieldCode!==i.fieldCode),e.emit("Clear",i.fieldCode)}function C(){o.value=[],t.value=[],s.value=[],e.emit("Reset")}function k(){o.value.forEach(i=>{i.displayText="",i.hasValue=!1}),t.value=[],e.emit("Reset")}return d(r.fields,r.data),{clearAll:C,clearFilterItem:w,currentFilterId:V,filterFields:s,filterItems:o,loadFilterItems:d,removeFilterItem:m,reset:k,shouldShowClearButtonInFilterItem:b}}function J(r,e){function t(){}return()=>l.createVNode("div",{class:"f-filter-list-ellipsis",onClick:s=>void 0},[l.createTextVNode("...")])}function K(r,e,t){const{clearFilterItem:s,currentFilterId:o,filterItems:V,removeFilterItem:f,shouldShowClearButtonInFilterItem:g}=t,v=l.ref(!1),y=function(u,d){return{"f-filter-item":!0,"f-filter-item-actived":u.hasValue,"f-filter-item-last":d===V.value.length-1,"f-filter-item-edit":u.id===o.value}},b=l.computed(()=>!v.value&&r.mode==="editable");function x(u,d){r.mode==="display-only"?f(d):s(d)}function T(u,d,m){}return(u,d)=>l.createVNode("div",{id:u.id,class:y(u,d),onClick:m=>void 0},[l.createVNode("div",{class:"f-filter-item-inner"},[u.editor.required&&l.createVNode("span",{class:"f-filter-item-required text-danger"},[l.createTextVNode("*")]),l.createVNode("span",{class:"f-filter-item-text"},[u.fieldName]),u.hasValue&&u.displayText&&l.createVNode("span",{class:"f-filter-item-tip"},[l.createTextVNode(":")]),u.hasValue&&u.displayText&&l.createVNode("span",{class:"f-filter-item-content"},[u.displayText]),b.value&&l.createVNode("span",{class:"f-filter-item-arrow f-icon f-icon-arrow-chevron-down"},null)]),g(u)&&l.createVNode("span",{class:"f-filter-item-clear",onClick:m=>x(m,u)},[l.createVNode("span",{class:"f-icon f-icon-close-circle"},null)])])}function Q(r,e,t){const s=l.ref([]),o=l.ref(!1),V=l.ref(""),f=l.ref(r.resetText),g=l.ref(r.showReset),{clearAll:v,reset:y}=t,b=l.computed(()=>o.value&&s.value&&s.value.length>0),x=l.computed(()=>g.value);function T(d){}function u(d){r.mode==="display-only"?v():y()}return()=>l.createVNode("div",{class:"f-filter-toolbars"},[b.value&&l.createVNode("button",{class:"btn btn-link",onClick:d=>void 0},[V.value]),x.value&&l.createVNode("button",{class:"btn btn-link",onClick:d=>u()},[f.value])])}const D="",R=l.defineComponent({name:"FFilterBar",props:E,emits:["Clear","Remove","Reset"],setup(r,e){const t=l.ref(!1),s=l.ref(!1),o=l.ref(!1),V=l.ref(!1),f=H(r,e),{filterFields:g,filterItems:v,loadFilterItems:y}=f,b=l.computed(()=>({display:g.value&&g.value.length?"":"none"}));l.watch([()=>r.data,()=>r.fields],([a,h])=>{y(h,a)});const x=l.computed(()=>s.value&&t.value),T=l.computed(()=>({"f-filter-list":!0,"f-filter-list-extend":x.value})),u=l.computed(()=>v.value.length>0),d=K(r,e,f);function m(){return l.createVNode("div",{class:T.value},[v.value.map((a,h)=>d(a,h))])}const w=l.computed(()=>o.value&&!s.value&&V.value),C=J(),k=l.computed(()=>!s.value),i=Q(r,e,f);return()=>l.createVNode("div",{class:"f-filter-wrapper",style:b.value},[l.createVNode("div",{class:"f-filter-wrapper-inner f-utils-fill"},[l.createVNode("div",{class:"f-filter-main f-utils-fill"},[l.createVNode("div",{class:"f-filter-list-wrapper"},[u.value&&m(),w.value&&C(),k.value&&i()])])])])}}),U={install(r){r.component(R.name,R)}};c.default=U,c.filterBarProps=E,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/filter-bar/package.json

@@ -0,0 +1,8 @@
+{
+    "name": "filter-bar",
+    "version": "1.0.2",
+    "main": "index.umd.js",
+    "module": "index.esm.js",
+    "style": "style.css",
+    "types": "../types/filter-bar/index.d.ts"
+}

package/filter-bar/style.css

@@ -0,0 +1 @@
+.f-filter-wrapper .f-filter-list .f-filter-item{padding:0 20px 0 12px!important}.f-filter-wrapper .f-filter-list .f-filter-item-clear{padding:0 2px!important}