@scvzerng/element-plus-search-vue2 0.0.1 → 0.0.3

package/dist/ElementPlusSearch.es.js

@@ -1,96 +1,60 @@
-import { keyBy as K, isNumber as I, isBoolean as M, isEmpty as z, chain as P, sum as U, isPlainObject as G } from "lodash-unified";
-import { defineComponent as L, ref as y, resolveComponent as g, createElementBlock as C, openBlock as m, createVNode as a, createElementVNode as _, withCtx as c, unref as u, Fragment as D, renderList as B, createBlock as S, createTextVNode as k, toDisplayString as N, reactive as j, shallowRef as W, isRef as X, computed as $, normalizeStyle as J, normalizeClass as Q, withDirectives as Y, vShow as Z, createCommentVNode as E } from "vue";
-import { ArrowLeft as ee, ArrowRight as te, ArrowDown as se, ArrowUp as re } from "@element-plus/icons-vue";
-import { Setting as ie } from "@scvzerng/icons";
-const ne = { class: "tags-scroll-container" }, le = ["innerHTML"], oe = /* @__PURE__ */ L({
-  name: "SearchTags",
-  __name: "SearchTagsRender",
+import { get as F, set as P, isFunction as L, keyBy as R, isNumber as q, isBoolean as k, isEmpty as E, chain as j, sum as B, isPlainObject as N } from "lodash-unified";
+import { defineComponent as y, ref as h, shallowRef as V, reactive as I, computed as D } from "vue";
+import { watchDebounced as K } from "@vueuse/core";
+const Ae = (i) => ({
+  model: {
+    value: F(i, "value"),
+    callback: (e) => {
+      P(i, "value", e);
+    }
+  }
+}), H = y({
+  name: "SearchTags"
+}), z = /* @__PURE__ */ y({
+  ...H,
   props: {
-    tags: {}
+    tags: null
   },
-  setup(s) {
-    const e = y(), t = () => {
-      e.value.scrollBy({ left: -200, behavior: "smooth" });
-    }, r = () => {
-      e.value.scrollBy({
+  setup(i) {
+    const e = i, t = h();
+    return { __sfc: !0, props: e, scrollContainer: t, scrollLeft: () => {
+      t.value.scrollBy({ left: -200, behavior: "smooth" });
+    }, scrollRight: () => {
+      t.value.scrollBy({
         left: 200,
         behavior: "smooth"
       });
-    };
-    return (i, n) => {
-      const v = g("el-icon"), h = g("el-tag");
-      return m(), C("div", ne, [
-        a(h, {
-          type: "info",
-          class: "scroll-left-bar",
-          onClick: t
-        }, {
-          default: c(() => [
-            a(v, null, {
-              default: c(() => [
-                a(u(ee))
-              ]),
-              _: 1
-            }),
-            n[0] || (n[0] = _("i", { class: "el-icon-arrow-left" }, null, -1))
-          ]),
-          _: 1
-        }),
-        _("div", {
-          ref_key: "scrollContainer",
-          ref: e,
-          class: "search-tags"
-        }, [
-          (m(!0), C(D, null, B(s.tags, (p) => (m(), S(h, {
-            class: "search-tag",
-            onClose: () => p.clean(),
-            closable: !p.required,
-            type: p.required ? "primary" : "info",
-            key: p.field
-          }, {
-            default: c(() => [
-              _("span", null, N(p.label), 1),
-              n[1] || (n[1] = k("： ", -1)),
-              _("span", {
-                innerHTML: p.valueText
-              }, null, 8, le)
-            ]),
-            _: 2
-          }, 1032, ["onClose", "closable", "type"]))), 128))
-        ], 512),
-        a(h, {
-          type: "info",
-          class: "scroll-right-bar",
-          onClick: r
-        }, {
-          default: c(() => [
-            a(v, null, {
-              default: c(() => [
-                a(u(te))
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        })
-      ]);
-    };
-  }
-}), H = 6;
-class ae {
-  field;
-  label;
-  value;
-  required;
-  index;
-  visible;
-  span;
-  initValue;
-  tagFilter;
-  render;
-  transform;
+    } };
+  }
+});
+function x(i, e, t, s, r, a, d, c) {
+  var u = typeof i == "function" ? i.options : i;
+  return e && (u.render = e, u.staticRenderFns = t, u._compiled = !0), a && (u._scopeId = "data-v-" + a), {
+    exports: i,
+    options: u
+  };
+}
+var M = function() {
+  var e = this, t = e._self._c, s = e._self._setupProxy;
+  return t("div", { staticClass: "tags-scroll-container" }, [t("el-tag", { staticClass: "scroll-left-bar", attrs: { size: "medium", type: "info" }, on: { click: s.scrollLeft } }, [t("i", { staticClass: "el-icon-arrow-left" })]), t("div", { ref: "scrollContainer", staticClass: "search-tags" }, e._l(e.tags, function(r) {
+    return t("el-tag", { key: r.field, staticClass: "search-tag", attrs: { size: "medium", closable: !r.required, type: r.required ? "primary" : "info" }, on: { close: () => r.clean() } }, [t("span", [e._v(" " + e._s(r.label) + " ")]), e._v("： "), t("span", { domProps: { innerHTML: e._s(r.valueText) } })]);
+  }), 1), t("el-tag", { staticClass: "scroll-right-bar", attrs: { size: "medium", type: "info" }, on: { click: s.scrollRight } }, [t("i", { staticClass: "el-icon-arrow-right" })])], 1);
+}, W = [], G = /* @__PURE__ */ x(
+  z,
+  M,
+  W,
+  !1,
+  null,
+  null
+);
+const U = G.exports;
+var X = Object.defineProperty, J = (i, e, t) => e in i ? X(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, n = (i, e, t) => J(i, typeof e != "symbol" ? e + "" : e, t);
+const A = 6;
+class Q {
   constructor(e, t) {
-    this.field = e.field, this.label = e.label, this.value = e.initValue, this.required = e.required, this.initValue = e.initValue, this.index = t, this.visible = e.visible ?? !0, this.span = e.span ?? H, this.render = e.render, this.tagFilter = e.tagFilter, this.transform = e.transform;
+    n(this, "field"), n(this, "label"), n(this, "value"), n(this, "required"), n(this, "index"), n(this, "visible"), n(this, "disabled"), n(this, "span"), n(this, "initValue"), n(this, "enable"), n(this, "tagFilter"), n(this, "render"), n(this, "transform");
+    var s, r, a, d;
+    this.field = e.field, this.label = e.label, this.value = e.initValue, this.required = e.required, this.initValue = e.initValue, this.index = t, this.visible = (s = e.visible) != null ? s : !0, this.span = (r = e.span) != null ? r : A, this.render = e.render, this.tagFilter = e.tagFilter, this.transform = e.transform, this.enable = (a = e.enable) != null ? a : !0, this.disabled = (d = e.disabled) != null ? d : !1;
   }
   clean() {
     Array.isArray(this.value) ? this.value = [] : this.value = void 0;
@@ -98,17 +62,20 @@ class ae {
   reset() {
     this.value = this.initValue;
   }
+  isEnable(e) {
+    return L(this.enable) ? this.enable(e.getSearchObject()) : this.enable;
+  }
+  isDisabled(e) {
+    return L(this.disabled) ? this.disabled(e.getSearchObject()) : this.disabled;
+  }
 }
-class w {
-  field;
-  span;
-  index;
-  visible;
-  constructor(e, t, r, i) {
-    this.field = e, this.span = t, this.index = r, this.visible = i;
+var Y = Object.defineProperty, Z = (i, e, t) => e in i ? Y(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, v = (i, e, t) => Z(i, typeof e != "symbol" ? e + "" : e, t);
+class g {
+  constructor(e, t, s, r) {
+    v(this, "field"), v(this, "span"), v(this, "index"), v(this, "visible"), this.field = e, this.span = t, this.index = s, this.visible = r;
   }
   static fromSearchItem(e, t) {
-    return new w(
+    return new g(
       e.field,
       e.span,
       t ?? e.index,
@@ -116,16 +83,17 @@ class w {
     );
   }
   static formSearchConfig(e, t) {
-    return new w(
+    var s, r;
+    return new g(
       e.field,
-      e.span ?? H,
+      (s = e.span) != null ? s : A,
       t ?? e,
-      e.visible ?? !0
+      (r = e.visible) != null ? r : !0
     );
   }
   static fromString(e) {
-    const [t, r, i, n] = e.split("_");
-    return new w(r, Number(i), Number(t), !!n);
+    const [t, s, r, a] = e.split("_");
+    return new g(s, Number(r), Number(t), a === "true");
   }
   toString() {
     return `${this.index}_${this.field}_${this.span}_${this.visible}`;
@@ -134,37 +102,33 @@ class w {
     this.span = e.span, this.index = e.index, this.visible = e.visible;
   }
 }
-const V = (s) => `searches_layouts_${s}`;
-class ce {
-  id;
-  state;
-  itemLayouts;
-  initialLayouts;
+const T = (i) => `searches_layouts_${i}`;
+class ee {
   constructor(e, t) {
-    this.id = e.id, this.initialLayouts = t, this.state = e, this.itemLayouts = K(e.items.map(w.fromSearchItem), (r) => r.field), this.restoreCachedLayouts();
+    v(this, "id"), v(this, "state"), v(this, "itemLayouts"), v(this, "initialLayouts"), this.id = e.id, this.initialLayouts = t, this.state = e, this.itemLayouts = R(e.items.map(g.fromSearchItem), (s) => s.field), this.restoreCachedLayouts();
   }
   /**
    * 恢复自缓存中的布局信息
    * @private
    */
   restoreCachedLayouts() {
-    const e = localStorage.getItem(V(this.id));
+    const e = localStorage.getItem(T(this.id));
     e && e.split(",").forEach((t) => {
-      const r = w.fromString(t), i = this.itemLayouts[r.field];
-      i && i.merge(r);
+      const s = g.fromString(t), r = this.itemLayouts[s.field];
+      r && r.merge(s);
     });
   }
   sync(e, t) {
     if (e.length !== Object.keys(this.itemLayouts).length)
       throw new Error("同步布局字段数量不一致");
-    e.forEach((r, i) => {
-      const n = this.itemLayouts[r];
-      n.index = i, n.visible = t.has(r);
+    e.forEach((s, r) => {
+      const a = this.itemLayouts[s];
+      a.index = r, a.visible = t.has(s);
     });
   }
   persistent() {
     localStorage.setItem(
-      V(this.id),
+      T(this.id),
       Object.values(this.itemLayouts).map((e) => e.toString()).join(",")
     ), this.state.updateTags();
   }
@@ -175,130 +139,126 @@ class ce {
     });
   }
 }
-const ue = [
+var te = Object.defineProperty, se = (i, e, t) => e in i ? te(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, p = (i, e, t) => se(i, typeof e != "symbol" ? e + "" : e, t);
+const ie = [
   {
-    isApply(s) {
-      return s.contains("el-radio-group");
+    isApply(i) {
+      return i.contains("el-radio-group");
     },
-    getText(s) {
-      return s.querySelector(".is-active")?.querySelector("input")?.value;
+    getText(i) {
+      var e, t;
+      return (t = (e = i.querySelector(".is-active")) == null ? void 0 : e.querySelector("input")) == null ? void 0 : t.value;
     }
   },
   {
-    isApply(s) {
-      return s.contains("el-checkbox-group");
+    isApply(i) {
+      return i.contains("el-checkbox-group");
     },
-    getText(s) {
-      const e = Array.from(s.querySelectorAll(".el-checkbox__input.is-checked") ?? []).map((t) => t.querySelector("input")?.value).filter((t) => t);
-      return e.length === 1 ? e[0] : `${e[0]} 等${e.length}条`;
+    getText(i) {
+      var e;
+      const t = Array.from((e = i.querySelectorAll(".el-checkbox__input.is-checked")) != null ? e : []).map((s) => {
+        var r;
+        return (r = s.querySelector("input")) == null ? void 0 : r.value;
+      }).filter((s) => s);
+      return t.length === 1 ? t[0] : `${t[0]} 等${t.length}条`;
     }
   },
   {
-    isApply(s) {
-      return s.contains("el-input");
+    isApply(i) {
+      return i.contains("el-input");
     },
-    getText(s, e) {
+    getText(i, e) {
       return e.value;
     }
   },
   {
-    isApply(s) {
-      return s.contains("el-input-number");
+    isApply(i) {
+      return i.contains("el-input-number");
     },
-    getText(s, e) {
+    getText(i, e) {
       return e.value;
     }
   },
   {
-    isApply(s) {
-      return s.contains("el-select");
+    isApply(i) {
+      return i.contains("el-select");
     },
-    getText(s, e) {
-      const t = s.querySelectorAll(".el-select__tags-text");
-      return t.length > 0 ? e.value.length > 1 ? `${t[0].textContent} 等${e.value.length}条` : t[0].textContent : s.querySelector(".el-select__placeholder")?.innerHTML;
+    getText(i, e) {
+      var t;
+      const s = i.querySelectorAll(".el-select__tags-text");
+      return s.length > 0 ? e.value.length > 1 ? `${s[0].textContent} 等${e.value.length}条` : s[0].textContent : (t = i.querySelector("input")) == null ? void 0 : t.value;
     }
   },
   {
-    isApply(s) {
-      return s.contains("el-cascader");
+    isApply(i) {
+      return i.contains("el-cascader");
     },
-    getText(s) {
-      return s.querySelector("input")?.value;
+    getText(i) {
+      var e;
+      return (e = i.querySelector("input")) == null ? void 0 : e.value;
     }
   },
   {
-    isApply(s) {
-      return s.contains("el-switch");
+    isApply(i) {
+      return i.contains("el-switch");
     },
-    getText(s) {
-      return s.querySelector(".is-active").innerHTML;
+    getText(i) {
+      return i.querySelector(".is-active").innerHTML;
     }
   },
   {
-    isApply(s) {
-      return s.contains("el-slider");
+    isApply(i) {
+      return i.contains("el-slider");
     },
-    getText(s, e) {
+    getText(i, e) {
       return e.value;
     }
   },
   {
-    isApply(s) {
-      return s.contains("el-date-editor");
+    isApply(i) {
+      return i.contains("el-date-editor");
     },
-    getText(s, e) {
+    getText(i, e) {
       return e.value ? e.value.join(" ~ ") : e.value;
     }
   }
 ];
-class R {
-  id;
-  field;
-  value;
-  label;
-  valueText;
-  required;
-  item;
-  state;
+class O {
   constructor(e, t) {
-    this.id = `#${e.id}-${t.field}`, this.state = e, this.field = t.field, this.value = t.value, this.label = t.label, this.item = t, this.required = t.required ?? !1, this.updateValueText();
+    p(this, "id"), p(this, "field"), p(this, "value"), p(this, "label"), p(this, "valueText"), p(this, "required"), p(this, "item"), p(this, "state");
+    var s;
+    this.id = `#${e.id}-${t.field}`, this.state = e, this.field = t.field, this.value = t.value, this.label = t.label, this.item = t, this.required = (s = t.required) != null ? s : !1, this.updateValueText();
   }
   static hasValue(e) {
-    return I(e.value) || M(e.value) ? !0 : !z(e.value);
+    return q(e.value) || k(e.value) ? !0 : !E(e.value);
   }
   updateValueText() {
     const e = document.querySelector(this.id);
     if (e.children.length !== 1)
       throw new Error("holder children length is not 1");
-    const t = e.children[0], r = ue.find((i) => i.isApply(t.classList));
-    r && (this.valueText = r.getText(t, this));
+    const t = e.children[0], s = ie.find((r) => r.isApply(t.classList));
+    s && (this.valueText = s.getText(t, this));
   }
   async clean() {
     this.item.clean(), await this.state.doSearch();
   }
 }
-class de {
-  constructor(e, t, r) {
-    this.id = e, this.id = e, this.items = t.map((i, n) => new ae(i, n)), this.config = j(
-      new ce(
-        this,
-        t.map((i, n) => w.formSearchConfig(i, n))
-      )
-    ), this.sourceSearchable = t, this.searching = !1, this.searchCallback = r, this.tags = [];
-  }
-  items;
-  config;
-  searching;
-  tags;
-  searchCallback;
-  sourceSearchable;
+var re = Object.defineProperty, ae = (i, e, t) => e in i ? re(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, m = (i, e, t) => ae(i, typeof e != "symbol" ? e + "" : e, t);
+class ne {
+  constructor(e, t, s) {
+    this.id = e, m(this, "items"), m(this, "config"), m(this, "searching"), m(this, "tags"), m(this, "searchCallback"), m(this, "sourceSearchable"), m(this, "_lastSearchObject", { time: 0, data: null }), this.id = e, this.items = t.map((r, a) => new Q(r, a)), this.config = new ee(
+      this,
+      t.map((r, a) => g.formSearchConfig(r, a))
+    ), this.sourceSearchable = t, this.searching = !1, this.searchCallback = s, this.tags = [];
+  }
   updateTags() {
-    this.tags = this.items.filter((e) => e.tagFilter ? e.tagFilter(e.value) : R.hasValue(e)).map((e) => new R(this, e)).sort(
+    this.tags = this.items.filter((e) => e.tagFilter ? e.tagFilter(e.value) : O.hasValue(e)).map((e) => new O(this, e)).sort(
       (e, t) => this.config.itemLayouts[e.field].index - this.config.itemLayouts[t.field].index
     );
   }
   getSearchObject(e) {
-    return q.from(this.items).toCondition(e);
+    const t = Date.now();
+    return this._lastSearchObject.data && t - this._lastSearchObject.time < 50 ? this._lastSearchObject.data : (this._lastSearchObject = { time: t, data: $.from(this.items).toCondition(e) }, this._lastSearchObject.data);
   }
   async doSearch() {
     if (!this.searching)
@@ -311,267 +271,199 @@ class de {
   async reset(e) {
     this.items.forEach((t) => t.reset()), e && await this.doSearch();
   }
+  setSearchValue(e, t) {
+    const s = this.items.find((r) => r.field === e);
+    s && (s.value = t);
+  }
 }
-const he = ({ search: s }) => s.render(s), fe = () => {
-  const s = W(), e = y(), t = y([]), r = y(!1), i = y(), n = y([]), v = y(300), h = (o) => {
-    s.value = o, t.value = [
+const le = {
+  functional: !0,
+  props: {
+    search: {
+      type: Object,
+      required: !0
+    },
+    api: {
+      type: Object
+    }
+  },
+  render(i, e) {
+    const { props: t } = e, s = t.search.render(t.search);
+    return s.componentOptions.propsData || (s.componentOptions.propsData = {}), s.componentOptions.propsData.disabled = t.search.isDisabled(t.api), s;
+  }
+}, oe = () => {
+  const i = V(), e = h(), t = h([]), s = h(!1), r = h(), a = h([]), d = h(300), c = (o) => {
+    i.value = o, t.value = [
       {
         label: "全部",
         id: "all",
-        children: s.value.items.sort(
-          (f, d) => o.config.itemLayouts[f.field].index - o.config.itemLayouts[d.field].index
+        children: i.value.items.sort(
+          (f, C) => o.config.itemLayouts[f.field].index - o.config.itemLayouts[C.field].index
         ).map((f) => ({
           label: f.label,
-          id: f.field
+          id: f.field,
+          disabled: !f.isEnable(o)
         }))
       }
-    ], i.value = P(o.config.itemLayouts).pickBy((f) => f.visible).keys().value();
+    ], r.value = j(o.config.itemLayouts).pickBy((f) => f.visible).keys().value();
   };
   return {
     treeRef: e,
-    visible: r,
+    visible: s,
     snapshot: t,
-    defaultCheckedKeys: i,
-    drawerWidth: v,
-    updateSnapshot: h,
+    defaultCheckedKeys: r,
+    drawerWidth: d,
+    updateSnapshot: c,
     show: (o) => {
-      h(o), r.value = !0;
+      c(o), s.value = !0;
     },
     save: () => {
-      s.value.config.sync(
+      i.value.config.sync(
         t.value[0].children.map((o) => o.id),
         new Set(e.value.getCheckedKeys())
-      ), s.value.config.persistent();
+      ), i.value.config.persistent();
     },
     reset: () => {
-      s.value.config.reset(), h(s.value);
+      i.value.config.reset(), c(i.value);
     },
     keepSelection: () => {
-      n.value = e.value.getCheckedKeys();
+      a.value = e.value.getCheckedKeys();
     },
     restoreSelection: () => {
-      e.value.setCheckedKeys(n.value), n.value = [];
+      e.value.setCheckedKeys(a.value), a.value = [];
     },
-    allowDrop: (o, f, d) => d !== "inner"
+    allowDrop: (o, f, C) => C !== "inner",
+    allowDrag: (o) => !o.disabled
   };
-}, pe = /* @__PURE__ */ L({
+}, ce = /* @__PURE__ */ y({
   __name: "SearchSettingsDrawer",
-  setup(s, { expose: e }) {
+  setup(i, { expose: e }) {
     const {
       treeRef: t,
-      visible: r,
-      snapshot: i,
-      drawerWidth: n,
-      defaultCheckedKeys: v,
-      show: h,
-      allowDrop: p,
-      keepSelection: T,
-      restoreSelection: b,
+      visible: s,
+      snapshot: r,
+      drawerWidth: a,
+      defaultCheckedKeys: d,
+      show: c,
+      allowDrop: u,
+      allowDrag: S,
+      keepSelection: b,
+      restoreSelection: _,
       save: l,
-      reset: x
-    } = fe();
+      reset: w
+    } = oe();
     return e({
-      show: h
-    }), (A, o) => {
-      const f = g("el-tree"), d = g("el-button"), O = g("el-drawer");
-      return m(), S(O, {
-        class: "search-setting",
-        size: u(n),
-        title: "搜索项配置",
-        modelValue: u(r),
-        "onUpdate:modelValue": o[0] || (o[0] = (F) => X(r) ? r.value = F : null)
-      }, {
-        footer: c(() => [
-          a(d, { onClick: u(x) }, {
-            default: c(() => [...o[1] || (o[1] = [
-              k("重置", -1)
-            ])]),
-            _: 1
-          }, 8, ["onClick"]),
-          a(d, {
-            type: "primary",
-            onClick: u(l)
-          }, {
-            default: c(() => [...o[2] || (o[2] = [
-              k("保存", -1)
-            ])]),
-            _: 1
-          }, 8, ["onClick"])
-        ]),
-        default: c(() => [
-          a(f, {
-            class: "tree",
-            "default-expand-all": "",
-            "default-checked-keys": u(v),
-            "node-key": "id",
-            ref_key: "treeRef",
-            ref: t,
-            draggable: "",
-            "show-checkbox": "",
-            data: u(i),
-            onNodeDragStart: u(T),
-            onNodeDragEnd: u(b),
-            "allow-drop": u(p)
-          }, null, 8, ["default-checked-keys", "data", "onNodeDragStart", "onNodeDragEnd", "allow-drop"])
-        ]),
-        _: 1
-      }, 8, ["size", "modelValue"]);
-    };
-  }
-}), me = /* @__PURE__ */ L({
+      show: c
+    }), { __sfc: !0, treeRef: t, visible: s, snapshot: r, drawerWidth: a, defaultCheckedKeys: d, show: c, allowDrop: u, allowDrag: S, keepSelection: b, restoreSelection: _, save: l, reset: w };
+  }
+});
+var ue = function() {
+  var e = this, t = e._self._c, s = e._self._setupProxy;
+  return t("el-drawer", { attrs: { size: s.drawerWidth, title: "搜索项配置", visible: s.visible }, on: { "update:visible": function(r) {
+    s.visible = r;
+  } } }, [t("div", { staticClass: "setting-container" }, [t("el-tree", { ref: "treeRef", staticClass: "tree", attrs: { "default-expand-all": "", "default-checked-keys": s.defaultCheckedKeys, "node-key": "id", draggable: "", "show-checkbox": "", data: s.snapshot, "allow-drop": s.allowDrop, "allow-drag": s.allowDrag }, on: { "node-drag-start": s.keepSelection, "node-drag-end": s.restoreSelection } }), t("div", { staticClass: "footer" }, [t("el-button", { on: { click: s.reset } }, [e._v("重置")]), t("el-button", { attrs: { type: "primary" }, on: { click: s.save } }, [e._v("保存")])], 1)], 1)]);
+}, he = [], de = /* @__PURE__ */ x(
+  ce,
+  ue,
+  he,
+  !1,
+  null,
+  null
+);
+const fe = de.exports, pe = /* @__PURE__ */ y({
   __name: "SettingButton",
   props: {
-    state: {}
+    state: null
   },
-  setup(s) {
-    const e = s, t = y(), r = () => {
+  setup(i) {
+    const e = i, t = h();
+    return { __sfc: !0, props: e, searchSettingDialogRef: t, showSearchLayoutDialog: () => {
       t.value.show(e.state);
-    };
-    return (i, n) => {
-      const v = g("el-icon"), h = g("el-button");
-      return m(), S(h, {
-        class: "icon-button",
-        onClick: r
-      }, {
-        default: c(() => [
-          a(v, null, {
-            default: c(() => [
-              a(u(ie))
-            ]),
-            _: 1
-          }),
-          a(pe, {
-            ref_key: "searchSettingDialogRef",
-            ref: t
-          }, null, 512)
-        ]),
-        _: 1
-      });
-    };
+    }, SearchSettingsDrawer: fe };
   }
-}), ge = { class: "search-bar-container" }, ve = { class: "search-item" }, ye = { class: "search-item-title" }, _e = ["id"], Se = { class: "search-bottom" }, be = { class: "actions" }, Le = /* @__PURE__ */ L({
+});
+var ve = function() {
+  var e = this, t = e._self._c, s = e._self._setupProxy;
+  return t("div", { staticStyle: { "margin-right": "10px" } }, [t("el-button", { staticClass: "icon-button", staticStyle: { height: "100%" }, on: { click: s.showSearchLayoutDialog } }, [t("i", { staticClass: "el-icon-s-tools" })]), t(s.SearchSettingsDrawer, { ref: "searchSettingDialogRef" })], 1);
+}, _e = [], me = /* @__PURE__ */ x(
+  pe,
+  ve,
+  _e,
+  !1,
+  null,
+  "61aa7563"
+);
+const ge = me.exports, be = /* @__PURE__ */ y({
   __name: "SearchBar",
   props: {
-    searches: {},
-    id: {},
-    onSearch: {},
+    searches: null,
+    id: null,
+    onSearch: { type: Function },
     defaultSpan: { default: 6 },
     maxRows: { default: 2 },
     itemHeight: { default: 67 },
     resetAutoSearch: { type: Boolean, default: !0 }
   },
-  setup(s, { expose: e }) {
-    const t = s, r = j(new de(t.id, t.searches, t.onSearch)), i = y(!1), n = $(() => U(Array.from(Object.values(r.config.itemLayouts)).map((l) => l.span)) / 24 > t.maxRows), v = $(() => [...r.items].sort((l, x) => r.config.itemLayouts[l.field].index - r.config.itemLayouts[x.field].index).filter((l) => r.config.itemLayouts[l.field].visible)), h = $(() => ({
-      height: `${t.itemHeight * t.maxRows}px`,
+  emits: ["change"],
+  setup(i, { expose: e, emit: t }) {
+    const s = i, r = I(new ne(s.id, s.searches, s.onSearch)), a = h(!1), d = D(() => B(Array.from(Object.values(r.config.itemLayouts)).filter((l) => l.visible).map((l) => l.span)) / 24 > s.maxRows), c = h([]);
+    K(() => r.items, () => {
+      const _ = [...r.items];
+      c.value = _.sort((l, w) => r.config.itemLayouts[l.field].index - r.config.itemLayouts[w.field].index).filter((l) => r.config.itemLayouts[l.field].visible).filter((l) => l.isEnable(r)), t("change", r.getSearchObject(), r);
+    }, { debounce: 100, immediate: !0, deep: !0 });
+    const u = D(() => ({
+      height: `${s.itemHeight * s.maxRows}px`,
       overflow: "hidden"
-    })), p = (b) => r.config.itemLayouts[b.field];
+    })), S = (_) => r.config.itemLayouts[_.field], b = () => r.items;
     return e({
-      getSearchItems: () => r.items
-    }), (b, l) => {
-      const x = g("el-col"), A = g("el-row"), o = g("el-icon"), f = g("el-button");
-      return m(), C("div", ge, [
-        a(A, {
-          class: Q("search"),
-          style: J(n.value && !i.value ? h.value : {}),
-          gutter: 16
-        }, {
-          default: c(() => [
-            (m(!0), C(D, null, B(v.value, (d) => Y((m(), S(x, {
-              span: p(d).span,
-              key: d.field
-            }, {
-              default: c(() => [
-                _("div", ve, [
-                  _("div", ye, N(d.label), 1),
-                  _("div", {
-                    id: `${s.id}-${d.field}`,
-                    class: "search-item-content"
-                  }, [
-                    a(u(he), { search: d }, null, 8, ["search"])
-                  ], 8, _e)
-                ])
-              ]),
-              _: 2
-            }, 1032, ["span"])), [
-              [Z, p(d).visible]
-            ])), 128))
-          ]),
-          _: 1
-        }, 8, ["style"]),
-        _("div", Se, [
-          r.tags.length > 0 ? (m(), S(oe, {
-            key: 0,
-            tags: r.tags
-          }, null, 8, ["tags"])) : E("", !0),
-          _("div", be, [
-            n.value ? (m(), S(f, {
-              key: 0,
-              class: "icon-button",
-              onClick: l[0] || (l[0] = (d) => i.value = !i.value)
-            }, {
-              default: c(() => [
-                a(o, null, {
-                  default: c(() => [
-                    i.value ? (m(), S(u(re), { key: 1 })) : (m(), S(u(se), { key: 0 }))
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            })) : E("", !0),
-            a(me, { state: r }, null, 8, ["state"]),
-            a(f, {
-              onClick: l[1] || (l[1] = () => r.reset(s.resetAutoSearch))
-            }, {
-              default: c(() => [...l[3] || (l[3] = [
-                k("重 置", -1)
-              ])]),
-              _: 1
-            }),
-            a(f, {
-              type: "primary",
-              loading: r.searching,
-              disabled: r.searching,
-              onClick: l[2] || (l[2] = () => r.doSearch())
-            }, {
-              default: c(() => [...l[4] || (l[4] = [
-                k("搜 索", -1)
-              ])]),
-              _: 1
-            }, 8, ["loading", "disabled"])
-          ])
-        ])
-      ]);
-    };
+      getSearchItems: b
+    }), { __sfc: !0, props: s, state: r, expanded: a, isShowSpanIcon: d, sortedItems: c, emits: t, itemHeightStyle: u, getLayout: S, getSearchItems: b, SearchTagsRender: U, SearchItemRender: le, SettingButton: ge };
   }
 });
-class q {
-  record;
+var ye = function() {
+  var e = this, t = e._self._c, s = e._self._setupProxy;
+  return t("div", { staticClass: "search-bar-container" }, [t("el-row", { class: "search", style: s.isShowSpanIcon && !s.expanded ? s.itemHeightStyle : {}, attrs: { gutter: 16 } }, e._l(s.sortedItems, function(r) {
+    return t("el-col", { directives: [{ name: "show", rawName: "v-show", value: s.getLayout(r).visible, expression: "getLayout(item).visible" }], key: r.field, attrs: { span: s.getLayout(r).span } }, [t("div", { staticClass: "search-item" }, [t("div", { staticClass: "search-item-title" }, [e._v(e._s(r.label))]), t("div", { staticClass: "search-item-content", attrs: { id: `${e.id}-${r.field}` } }, [t(s.SearchItemRender, { attrs: { search: r, api: s.state } })], 1)])]);
+  }), 1), t("div", { staticClass: "search-bottom" }, [s.state.tags.length > 0 ? t(s.SearchTagsRender, { attrs: { tags: s.state.tags } }) : e._e(), t("div", { staticClass: "actions" }, [s.isShowSpanIcon ? t("el-button", { staticClass: "icon-button", staticStyle: { "margin-right": "10px" }, on: { click: function(r) {
+    s.expanded = !s.expanded;
+  } } }, [t("i", { class: [s.expanded ? "el-icon-arrow-up" : "el-icon-arrow-down"] })]) : e._e(), t(s.SettingButton, { attrs: { state: s.state } }), t("el-button", { on: { click: () => s.state.reset(e.resetAutoSearch) } }, [e._v("重 置")]), t("el-button", { attrs: { type: "primary", loading: s.state.searching, disabled: s.state.searching }, on: { click: () => s.state.doSearch() } }, [e._v("搜 索")])], 1)], 1)], 1);
+}, Se = [], we = /* @__PURE__ */ x(
+  be,
+  ye,
+  Se,
+  !1,
+  null,
+  null
+);
+const Fe = we.exports;
+var xe = Object.defineProperty, Ce = (i, e, t) => e in i ? xe(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, $e = (i, e, t) => Ce(i, e + "", t);
+class $ {
   constructor(e) {
-    this.record = e;
+    $e(this, "record"), this.record = e;
   }
   static from(e) {
-    const t = e.filter((r) => r.value === void 0 ? !1 : Array.isArray(r.value) ? r.value.length > 0 : !0).reduce(
-      (r, i) => {
-        const n = i.transform ? i.transform(i.value) : i.value;
+    const t = e.filter((s) => s.value === void 0 ? !1 : Array.isArray(s.value) ? s.value.length > 0 : !0).reduce(
+      (s, r) => {
+        const a = r.transform ? r.transform(r.value) : r.value;
         return {
-          ...r,
-          ...G(n) ? n : { [i.field]: n }
+          ...s,
+          ...N(a) ? a : { [r.field]: a }
         };
       },
       {}
     );
-    return new q(t);
+    return new $(t);
   }
   transform(e, t) {
-    const r = this.record[e], i = t(r);
-    return delete this.record[e], this.record = { ...this.record, ...i }, this;
+    const s = this.record[e], r = t(s);
+    return delete this.record[e], this.record = { ...this.record, ...r }, this;
   }
   toCondition(e) {
     return { ...this.record, ...e };
   }
 }
 export {
-  Le as SearchBar,
-  q as Searches
+  Fe as SearchBar,
+  $ as Searches,
+  Ae as vModel
 };