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

package/dist/ElementPlusSearch.es.js

@@ -1,21 +1,22 @@
-import { get as F, set as P, keyBy as R, isNumber as D, isBoolean as q, isEmpty as k, chain as B, sum as O, isPlainObject as E } from "lodash-unified";
-import { defineComponent as S, ref as u, shallowRef as N, reactive as I, computed as C } from "vue";
-const Le = (r) => ({
+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(r, "value"),
+    value: F(i, "value"),
     callback: (e) => {
-      P(r, "value", e);
+      P(i, "value", e);
     }
   }
-}), V = S({
+}), H = y({
   name: "SearchTags"
-}), K = /* @__PURE__ */ S({
-  ...V,
+}), z = /* @__PURE__ */ y({
+  ...H,
   props: {
     tags: null
   },
-  setup(r) {
-    const e = r, t = u();
+  setup(i) {
+    const e = i, t = h();
     return { __sfc: !0, props: e, scrollContainer: t, scrollLeft: () => {
       t.value.scrollBy({ left: -200, behavior: "smooth" });
     }, scrollRight: () => {
@@ -26,34 +27,34 @@ const Le = (r) => ({
     } };
   }
 });
-function w(r, e, t, s, i, a, h, o) {
-  var l = typeof r == "function" ? r.options : r;
-  return e && (l.render = e, l.staticRenderFns = t, l._compiled = !0), a && (l._scopeId = "data-v-" + a), {
-    exports: r,
-    options: l
+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 H = function() {
+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(i) {
-    return t("el-tag", { key: i.field, staticClass: "search-tag", attrs: { size: "medium", closable: !i.required, type: i.required ? "primary" : "info" }, on: { close: () => i.clean() } }, [t("span", [e._v(" " + e._s(i.label) + " ")]), e._v("： "), t("span", { domProps: { innerHTML: e._s(i.valueText) } })]);
+  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);
-}, j = [], z = /* @__PURE__ */ w(
-  K,
-  H,
-  j,
+}, W = [], G = /* @__PURE__ */ x(
+  z,
+  M,
+  W,
   !1,
   null,
   null
 );
-const M = z.exports;
-var W = Object.defineProperty, G = (r, e, t) => e in r ? W(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, n = (r, e, t) => G(r, typeof e != "symbol" ? e + "" : e, t);
+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 U {
+class Q {
   constructor(e, t) {
-    n(this, "field"), n(this, "label"), n(this, "value"), n(this, "required"), n(this, "index"), n(this, "visible"), n(this, "span"), n(this, "initValue"), n(this, "tagFilter"), n(this, "render"), n(this, "transform");
-    var s, i;
-    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 = (i = e.span) != null ? i : A, 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;
@@ -61,14 +62,20 @@ class U {
   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;
+  }
 }
-var X = Object.defineProperty, J = (r, e, t) => e in r ? X(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, p = (r, e, t) => J(r, typeof e != "symbol" ? e + "" : e, t);
-class _ {
-  constructor(e, t, s, i) {
-    p(this, "field"), p(this, "span"), p(this, "index"), p(this, "visible"), this.field = e, this.span = t, this.index = s, 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 _(
+    return new g(
       e.field,
       e.span,
       t ?? e.index,
@@ -76,18 +83,17 @@ class _ {
     );
   }
   static formSearchConfig(e, t) {
-    var s, i;
-    return new _(
+    var s, r;
+    return new g(
       e.field,
       (s = e.span) != null ? s : A,
       t ?? e,
-      (i = e.visible) != null ? i : !0
+      (r = e.visible) != null ? r : !0
     );
   }
   static fromString(e) {
-    var t;
-    const [s, i, a, h] = e.split("_");
-    return new _(i, Number(a), Number(s), (t = !!h) != null ? t : !0);
+    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}`;
@@ -96,33 +102,33 @@ class _ {
     this.span = e.span, this.index = e.index, this.visible = e.visible;
   }
 }
-const L = (r) => `searches_layouts_${r}`;
-class Q {
+const T = (i) => `searches_layouts_${i}`;
+class ee {
   constructor(e, t) {
-    p(this, "id"), p(this, "state"), p(this, "itemLayouts"), p(this, "initialLayouts"), this.id = e.id, this.initialLayouts = t, this.state = e, this.itemLayouts = R(e.items.map(_.fromSearchItem), (s) => s.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(L(this.id));
+    const e = localStorage.getItem(T(this.id));
     e && e.split(",").forEach((t) => {
-      const s = _.fromString(t), i = this.itemLayouts[s.field];
-      i && i.merge(s);
+      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((s, i) => {
+    e.forEach((s, r) => {
       const a = this.itemLayouts[s];
-      a.index = i, a.visible = t.has(s);
+      a.index = r, a.visible = t.has(s);
     });
   }
   persistent() {
     localStorage.setItem(
-      L(this.id),
+      T(this.id),
       Object.values(this.itemLayouts).map((e) => e.toString()).join(",")
     ), this.state.updateTags();
   }
@@ -133,125 +139,126 @@ class Q {
     });
   }
 }
-var Y = Object.defineProperty, Z = (r, e, t) => e in r ? Y(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, f = (r, e, t) => Z(r, typeof e != "symbol" ? e + "" : e, t);
-const ee = [
+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(r) {
-      return r.contains("el-radio-group");
+    isApply(i) {
+      return i.contains("el-radio-group");
     },
-    getText(r) {
+    getText(i) {
       var e, t;
-      return (t = (e = r.querySelector(".is-active")) == null ? void 0 : e.querySelector("input")) == null ? void 0 : t.value;
+      return (t = (e = i.querySelector(".is-active")) == null ? void 0 : e.querySelector("input")) == null ? void 0 : t.value;
     }
   },
   {
-    isApply(r) {
-      return r.contains("el-checkbox-group");
+    isApply(i) {
+      return i.contains("el-checkbox-group");
     },
-    getText(r) {
+    getText(i) {
       var e;
-      const t = Array.from((e = r.querySelectorAll(".el-checkbox__input.is-checked")) != null ? e : []).map((s) => {
-        var i;
-        return (i = s.querySelector("input")) == null ? void 0 : i.value;
+      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(r) {
-      return r.contains("el-input");
+    isApply(i) {
+      return i.contains("el-input");
     },
-    getText(r, e) {
+    getText(i, e) {
       return e.value;
     }
   },
   {
-    isApply(r) {
-      return r.contains("el-input-number");
+    isApply(i) {
+      return i.contains("el-input-number");
     },
-    getText(r, e) {
+    getText(i, e) {
       return e.value;
     }
   },
   {
-    isApply(r) {
-      return r.contains("el-select");
+    isApply(i) {
+      return i.contains("el-select");
     },
-    getText(r, e) {
+    getText(i, e) {
       var t;
-      const s = r.querySelectorAll(".el-select__tags-text");
-      return s.length > 0 ? e.value.length > 1 ? `${s[0].textContent} 等${e.value.length}条` : s[0].textContent : (t = r.querySelector("input")) == null ? void 0 : t.value;
+      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(r) {
-      return r.contains("el-cascader");
+    isApply(i) {
+      return i.contains("el-cascader");
     },
-    getText(r) {
+    getText(i) {
       var e;
-      return (e = r.querySelector("input")) == null ? void 0 : e.value;
+      return (e = i.querySelector("input")) == null ? void 0 : e.value;
     }
   },
   {
-    isApply(r) {
-      return r.contains("el-switch");
+    isApply(i) {
+      return i.contains("el-switch");
     },
-    getText(r) {
-      return r.querySelector(".is-active").innerHTML;
+    getText(i) {
+      return i.querySelector(".is-active").innerHTML;
     }
   },
   {
-    isApply(r) {
-      return r.contains("el-slider");
+    isApply(i) {
+      return i.contains("el-slider");
     },
-    getText(r, e) {
+    getText(i, e) {
       return e.value;
     }
   },
   {
-    isApply(r) {
-      return r.contains("el-date-editor");
+    isApply(i) {
+      return i.contains("el-date-editor");
     },
-    getText(r, e) {
+    getText(i, e) {
       return e.value ? e.value.join(" ~ ") : e.value;
     }
   }
 ];
-class T {
+class O {
   constructor(e, t) {
-    f(this, "id"), f(this, "field"), f(this, "value"), f(this, "label"), f(this, "valueText"), f(this, "required"), f(this, "item"), f(this, "state");
+    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 D(e.value) || q(e.value) ? !0 : !k(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], s = ee.find((i) => i.isApply(t.classList));
+    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();
   }
 }
-var te = Object.defineProperty, se = (r, e, t) => e in r ? te(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, m = (r, e, t) => se(r, typeof e != "symbol" ? e + "" : e, t);
-class re {
+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"), this.id = e, this.items = t.map((i, a) => new U(i, a)), this.config = new Q(
+    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((i, a) => _.formSearchConfig(i, a))
+      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) : T.hasValue(e)).map((e) => new T(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 $.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)
@@ -264,52 +271,60 @@ class re {
   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 ie = {
+const le = {
   functional: !0,
   props: {
     search: {
       type: Object,
       required: !0
+    },
+    api: {
+      type: Object
     }
   },
-  render(r, e) {
-    const { props: t } = e;
-    return t.search.render(t.search);
+  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;
   }
-}, ae = () => {
-  const r = N(), e = u(), t = u([]), s = u(!1), i = u(), a = u([]), h = u(300), o = (c) => {
-    r.value = c, t.value = [
+}, 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: r.value.items.sort(
-          (v, x) => c.config.itemLayouts[v.field].index - c.config.itemLayouts[x.field].index
-        ).map((v) => ({
-          label: v.label,
-          id: v.field
+        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,
+          disabled: !f.isEnable(o)
         }))
       }
-    ], i.value = B(c.config.itemLayouts).pickBy((v) => v.visible).keys().value();
+    ], r.value = j(o.config.itemLayouts).pickBy((f) => f.visible).keys().value();
   };
   return {
     treeRef: e,
     visible: s,
     snapshot: t,
-    defaultCheckedKeys: i,
-    drawerWidth: h,
-    updateSnapshot: o,
-    show: (c) => {
-      o(c), s.value = !0;
+    defaultCheckedKeys: r,
+    drawerWidth: d,
+    updateSnapshot: c,
+    show: (o) => {
+      c(o), s.value = !0;
     },
     save: () => {
-      r.value.config.sync(
-        t.value[0].children.map((c) => c.id),
+      i.value.config.sync(
+        t.value[0].children.map((o) => o.id),
         new Set(e.value.getCheckedKeys())
-      ), r.value.config.persistent();
+      ), i.value.config.persistent();
     },
     reset: () => {
-      r.value.config.reset(), o(r.value);
+      i.value.config.reset(), c(i.value);
     },
     keepSelection: () => {
       a.value = e.value.getCheckedKeys();
@@ -317,66 +332,68 @@ const ie = {
     restoreSelection: () => {
       e.value.setCheckedKeys(a.value), a.value = [];
     },
-    allowDrop: (c, v, x) => x !== "inner"
+    allowDrop: (o, f, C) => C !== "inner",
+    allowDrag: (o) => !o.disabled
   };
-}, ne = /* @__PURE__ */ S({
+}, ce = /* @__PURE__ */ y({
   __name: "SearchSettingsDrawer",
-  setup(r, { expose: e }) {
+  setup(i, { expose: e }) {
     const {
       treeRef: t,
       visible: s,
-      snapshot: i,
+      snapshot: r,
       drawerWidth: a,
-      defaultCheckedKeys: h,
-      show: o,
-      allowDrop: l,
-      keepSelection: y,
-      restoreSelection: g,
-      save: d,
-      reset: b
-    } = ae();
+      defaultCheckedKeys: d,
+      show: c,
+      allowDrop: u,
+      allowDrag: S,
+      keepSelection: b,
+      restoreSelection: _,
+      save: l,
+      reset: w
+    } = oe();
     return e({
-      show: o
-    }), { __sfc: !0, treeRef: t, visible: s, snapshot: i, drawerWidth: a, defaultCheckedKeys: h, show: o, allowDrop: l, keepSelection: y, restoreSelection: g, save: d, reset: b };
+      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 le = function() {
+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(i) {
-    s.visible = i;
-  } } }, [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 }, 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)]);
-}, oe = [], ce = /* @__PURE__ */ w(
-  ne,
-  le,
-  oe,
+  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 ue = ce.exports, he = /* @__PURE__ */ S({
+const fe = de.exports, pe = /* @__PURE__ */ y({
   __name: "SettingButton",
   props: {
     state: null
   },
-  setup(r) {
-    const e = r, t = u();
+  setup(i) {
+    const e = i, t = h();
     return { __sfc: !0, props: e, searchSettingDialogRef: t, showSearchLayoutDialog: () => {
       t.value.show(e.state);
-    }, SearchSettingsDrawer: ue };
+    }, SearchSettingsDrawer: fe };
   }
 });
-var de = function() {
+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);
-}, fe = [], pe = /* @__PURE__ */ w(
-  he,
-  de,
-  fe,
+}, _e = [], me = /* @__PURE__ */ x(
+  pe,
+  ve,
+  _e,
   !1,
   null,
   "61aa7563"
 );
-const ve = pe.exports, _e = /* @__PURE__ */ S({
+const ge = me.exports, be = /* @__PURE__ */ y({
   __name: "SearchBar",
   props: {
     searches: null,
@@ -387,44 +404,50 @@ const ve = pe.exports, _e = /* @__PURE__ */ S({
     itemHeight: { default: 67 },
     resetAutoSearch: { type: Boolean, default: !0 }
   },
-  setup(r, { expose: e }) {
-    const t = r, s = I(new re(t.id, t.searches, t.onSearch)), i = u(!1), a = C(() => O(Array.from(Object.values(s.config.itemLayouts)).map((d) => d.span)) / 24 > t.maxRows), h = C(() => [...s.items].sort((d, b) => s.config.itemLayouts[d.field].index - s.config.itemLayouts[b.field].index).filter((d) => s.config.itemLayouts[d.field].visible)), o = C(() => ({
-      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"
-    })), l = (g) => s.config.itemLayouts[g.field], y = () => s.items;
+    })), S = (_) => r.config.itemLayouts[_.field], b = () => r.items;
     return e({
-      getSearchItems: y
-    }), { __sfc: !0, props: t, state: s, expanded: i, isShowSpanIcon: a, sortedItems: h, itemHeightStyle: o, getLayout: l, getSearchItems: y, SearchTagsRender: M, SearchItemRender: ie, SettingButton: ve };
+      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 };
   }
 });
-var ge = function() {
+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(i) {
-    return t("el-col", { directives: [{ name: "show", rawName: "v-show", value: s.getLayout(i).visible, expression: "getLayout(item).visible" }], key: i.field, attrs: { span: s.getLayout(i).span } }, [t("div", { staticClass: "search-item" }, [t("div", { staticClass: "search-item-title" }, [e._v(e._s(i.label))]), t("div", { staticClass: "search-item-content", attrs: { id: `${e.id}-${i.field}` } }, [t(s.SearchItemRender, { attrs: { search: i } })], 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(i) {
+  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);
-}, me = [], ye = /* @__PURE__ */ w(
-  _e,
-  ge,
-  me,
+}, Se = [], we = /* @__PURE__ */ x(
+  be,
+  ye,
+  Se,
   !1,
   null,
   null
 );
-const Te = ye.exports;
-var Se = Object.defineProperty, be = (r, e, t) => e in r ? Se(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, we = (r, e, t) => be(r, e + "", t);
+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) {
-    we(this, "record"), this.record = e;
+    $e(this, "record"), this.record = e;
   }
   static from(e) {
     const t = e.filter((s) => s.value === void 0 ? !1 : Array.isArray(s.value) ? s.value.length > 0 : !0).reduce(
-      (s, i) => {
-        const a = i.transform ? i.transform(i.value) : i.value;
+      (s, r) => {
+        const a = r.transform ? r.transform(r.value) : r.value;
         return {
           ...s,
-          ...E(a) ? a : { [i.field]: a }
+          ...N(a) ? a : { [r.field]: a }
         };
       },
       {}
@@ -432,15 +455,15 @@ class $ {
     return new $(t);
   }
   transform(e, t) {
-    const s = this.record[e], i = t(s);
-    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 {
-  Te as SearchBar,
+  Fe as SearchBar,
   $ as Searches,
-  Le as vModel
+  Ae as vModel
 };

package/dist/ElementPlusSearch.umd.js

@@ -1 +1 @@
-(function(c,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("lodash-unified"),require("vue")):typeof define=="function"&&define.amd?define(["exports","lodash-unified","vue"],l):(c=typeof globalThis<"u"?globalThis:c||self,l(c.ElementPlusSearch={},c.lodashUnified,c.vue))})(this,function(c,l,a){"use strict";const P=r=>({model:{value:l.get(r,"value"),callback:e=>{l.set(r,"value",e)}}}),F=a.defineComponent({name:"SearchTags"}),R=a.defineComponent({...F,props:{tags:null},setup(r){const e=r,t=a.ref();return{__sfc:!0,props:e,scrollContainer:t,scrollLeft:()=>{t.value.scrollBy({left:-200,behavior:"smooth"})},scrollRight:()=>{t.value.scrollBy({left:200,behavior:"smooth"})}}}});function w(r,e,t,s,i,n,_,h){var u=typeof r=="function"?r.options:r;return e&&(u.render=e,u.staticRenderFns=t,u._compiled=!0),n&&(u._scopeId="data-v-"+n),{exports:r,options:u}}var q=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(i){return t("el-tag",{key:i.field,staticClass:"search-tag",attrs:{size:"medium",closable:!i.required,type:i.required?"primary":"info"},on:{close:()=>i.clean()}},[t("span",[e._v(" "+e._s(i.label)+" ")]),e._v("： "),t("span",{domProps:{innerHTML:e._s(i.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)},D=[],k=w(R,q,D,!1,null,null);const B=k.exports;var O=Object.defineProperty,E=(r,e,t)=>e in r?O(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,o=(r,e,t)=>E(r,typeof e!="symbol"?e+"":e,t);const L=6;class N{constructor(e,t){o(this,"field"),o(this,"label"),o(this,"value"),o(this,"required"),o(this,"index"),o(this,"visible"),o(this,"span"),o(this,"initValue"),o(this,"tagFilter"),o(this,"render"),o(this,"transform");var s,i;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=(i=e.span)!=null?i:L,this.render=e.render,this.tagFilter=e.tagFilter,this.transform=e.transform}clean(){Array.isArray(this.value)?this.value=[]:this.value=void 0}reset(){this.value=this.initValue}}var I=Object.defineProperty,V=(r,e,t)=>e in r?I(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,f=(r,e,t)=>V(r,typeof e!="symbol"?e+"":e,t);class m{constructor(e,t,s,i){f(this,"field"),f(this,"span"),f(this,"index"),f(this,"visible"),this.field=e,this.span=t,this.index=s,this.visible=i}static fromSearchItem(e,t){return new m(e.field,e.span,t??e.index,e.visible)}static formSearchConfig(e,t){var s,i;return new m(e.field,(s=e.span)!=null?s:L,t??e,(i=e.visible)!=null?i:!0)}static fromString(e){var t;const[s,i,n,_]=e.split("_");return new m(i,Number(n),Number(s),(t=!!_)!=null?t:!0)}toString(){return`${this.index}_${this.field}_${this.span}_${this.visible}`}merge(e){this.span=e.span,this.index=e.index,this.visible=e.visible}}const T=r=>`searches_layouts_${r}`;class K{constructor(e,t){f(this,"id"),f(this,"state"),f(this,"itemLayouts"),f(this,"initialLayouts"),this.id=e.id,this.initialLayouts=t,this.state=e,this.itemLayouts=l.keyBy(e.items.map(m.fromSearchItem),s=>s.field),this.restoreCachedLayouts()}restoreCachedLayouts(){const e=localStorage.getItem(T(this.id));e&&e.split(",").forEach(t=>{const s=m.fromString(t),i=this.itemLayouts[s.field];i&&i.merge(s)})}sync(e,t){if(e.length!==Object.keys(this.itemLayouts).length)throw new Error("同步布局字段数量不一致");e.forEach((s,i)=>{const n=this.itemLayouts[s];n.index=i,n.visible=t.has(s)})}persistent(){localStorage.setItem(T(this.id),Object.values(this.itemLayouts).map(e=>e.toString()).join(",")),this.state.updateTags()}reset(){this.initialLayouts.forEach(e=>{const t=this.itemLayouts[e.field];t&&t.merge(e)})}}var j=Object.defineProperty,H=(r,e,t)=>e in r?j(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,p=(r,e,t)=>H(r,typeof e!="symbol"?e+"":e,t);const M=[{isApply(r){return r.contains("el-radio-group")},getText(r){var e,t;return(t=(e=r.querySelector(".is-active"))==null?void 0:e.querySelector("input"))==null?void 0:t.value}},{isApply(r){return r.contains("el-checkbox-group")},getText(r){var e;const t=Array.from((e=r.querySelectorAll(".el-checkbox__input.is-checked"))!=null?e:[]).map(s=>{var i;return(i=s.querySelector("input"))==null?void 0:i.value}).filter(s=>s);return t.length===1?t[0]:`${t[0]} 等${t.length}条`}},{isApply(r){return r.contains("el-input")},getText(r,e){return e.value}},{isApply(r){return r.contains("el-input-number")},getText(r,e){return e.value}},{isApply(r){return r.contains("el-select")},getText(r,e){var t;const s=r.querySelectorAll(".el-select__tags-text");return s.length>0?e.value.length>1?`${s[0].textContent} 等${e.value.length}条`:s[0].textContent:(t=r.querySelector("input"))==null?void 0:t.value}},{isApply(r){return r.contains("el-cascader")},getText(r){var e;return(e=r.querySelector("input"))==null?void 0:e.value}},{isApply(r){return r.contains("el-switch")},getText(r){return r.querySelector(".is-active").innerHTML}},{isApply(r){return r.contains("el-slider")},getText(r,e){return e.value}},{isApply(r){return r.contains("el-date-editor")},getText(r,e){return e.value?e.value.join(" ~ "):e.value}}];class A{constructor(e,t){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 l.isNumber(e.value)||l.isBoolean(e.value)?!0:!l.isEmpty(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],s=M.find(i=>i.isApply(t.classList));s&&(this.valueText=s.getText(t,this))}async clean(){this.item.clean(),await this.state.doSearch()}}var z=Object.defineProperty,W=(r,e,t)=>e in r?z(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,y=(r,e,t)=>W(r,typeof e!="symbol"?e+"":e,t);class G{constructor(e,t,s){this.id=e,y(this,"items"),y(this,"config"),y(this,"searching"),y(this,"tags"),y(this,"searchCallback"),y(this,"sourceSearchable"),this.id=e,this.items=t.map((i,n)=>new N(i,n)),this.config=new K(this,t.map((i,n)=>m.formSearchConfig(i,n))),this.sourceSearchable=t,this.searching=!1,this.searchCallback=s,this.tags=[]}updateTags(){this.tags=this.items.filter(e=>e.tagFilter?e.tagFilter(e.value):A.hasValue(e)).map(e=>new A(this,e)).sort((e,t)=>this.config.itemLayouts[e.field].index-this.config.itemLayouts[t.field].index)}getSearchObject(e){return x.from(this.items).toCondition(e)}async doSearch(){if(!this.searching)try{this.searching=!0,await this.searchCallback(this.getSearchObject()),this.updateTags()}finally{this.searching=!1}}async reset(e){this.items.forEach(t=>t.reset()),e&&await this.doSearch()}}const X={functional:!0,props:{search:{type:Object,required:!0}},render(r,e){const{props:t}=e;return t.search.render(t.search)}},J=()=>{const r=a.shallowRef(),e=a.ref(),t=a.ref([]),s=a.ref(!1),i=a.ref(),n=a.ref([]),_=a.ref(300),h=d=>{r.value=d,t.value=[{label:"全部",id:"all",children:r.value.items.sort((g,$)=>d.config.itemLayouts[g.field].index-d.config.itemLayouts[$.field].index).map(g=>({label:g.label,id:g.field}))}],i.value=l.chain(d.config.itemLayouts).pickBy(g=>g.visible).keys().value()};return{treeRef:e,visible:s,snapshot:t,defaultCheckedKeys:i,drawerWidth:_,updateSnapshot:h,show:d=>{h(d),s.value=!0},save:()=>{r.value.config.sync(t.value[0].children.map(d=>d.id),new Set(e.value.getCheckedKeys())),r.value.config.persistent()},reset:()=>{r.value.config.reset(),h(r.value)},keepSelection:()=>{n.value=e.value.getCheckedKeys()},restoreSelection:()=>{e.value.setCheckedKeys(n.value),n.value=[]},allowDrop:(d,g,$)=>$!=="inner"}},Q=a.defineComponent({__name:"SearchSettingsDrawer",setup(r,{expose:e}){const{treeRef:t,visible:s,snapshot:i,drawerWidth:n,defaultCheckedKeys:_,show:h,allowDrop:u,keepSelection:b,restoreSelection:S,save:v,reset:C}=J();return e({show:h}),{__sfc:!0,treeRef:t,visible:s,snapshot:i,drawerWidth:n,defaultCheckedKeys:_,show:h,allowDrop:u,keepSelection:b,restoreSelection:S,save:v,reset:C}}});var Y=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(i){s.visible=i}}},[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},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)])},Z=[],U=w(Q,Y,Z,!1,null,null);const ee=U.exports,te=a.defineComponent({__name:"SettingButton",props:{state:null},setup(r){const e=r,t=a.ref();return{__sfc:!0,props:e,searchSettingDialogRef:t,showSearchLayoutDialog:()=>{t.value.show(e.state)},SearchSettingsDrawer:ee}}});var se=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)},re=[],ie=w(te,se,re,!1,null,"61aa7563");const ne=ie.exports,ae=a.defineComponent({__name:"SearchBar",props:{searches:null,id:null,onSearch:{type:Function},defaultSpan:{default:6},maxRows:{default:2},itemHeight:{default:67},resetAutoSearch:{type:Boolean,default:!0}},setup(r,{expose:e}){const t=r,s=a.reactive(new G(t.id,t.searches,t.onSearch)),i=a.ref(!1),n=a.computed(()=>l.sum(Array.from(Object.values(s.config.itemLayouts)).map(v=>v.span))/24>t.maxRows),_=a.computed(()=>[...s.items].sort((v,C)=>s.config.itemLayouts[v.field].index-s.config.itemLayouts[C.field].index).filter(v=>s.config.itemLayouts[v.field].visible)),h=a.computed(()=>({height:`${t.itemHeight*t.maxRows}px`,overflow:"hidden"})),u=S=>s.config.itemLayouts[S.field],b=()=>s.items;return e({getSearchItems:b}),{__sfc:!0,props:t,state:s,expanded:i,isShowSpanIcon:n,sortedItems:_,itemHeightStyle:h,getLayout:u,getSearchItems:b,SearchTagsRender:B,SearchItemRender:X,SettingButton:ne}}});var le=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(i){return t("el-col",{directives:[{name:"show",rawName:"v-show",value:s.getLayout(i).visible,expression:"getLayout(item).visible"}],key:i.field,attrs:{span:s.getLayout(i).span}},[t("div",{staticClass:"search-item"},[t("div",{staticClass:"search-item-title"},[e._v(e._s(i.label))]),t("div",{staticClass:"search-item-content",attrs:{id:`${e.id}-${i.field}`}},[t(s.SearchItemRender,{attrs:{search:i}})],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(i){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)},oe=[],ce=w(ae,le,oe,!1,null,null);const ue=ce.exports;var he=Object.defineProperty,de=(r,e,t)=>e in r?he(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,fe=(r,e,t)=>de(r,e+"",t);class x{constructor(e){fe(this,"record"),this.record=e}static from(e){const t=e.filter(s=>s.value===void 0?!1:Array.isArray(s.value)?s.value.length>0:!0).reduce((s,i)=>{const n=i.transform?i.transform(i.value):i.value;return{...s,...l.isPlainObject(n)?n:{[i.field]:n}}},{});return new x(t)}transform(e,t){const s=this.record[e],i=t(s);return delete this.record[e],this.record={...this.record,...i},this}toCondition(e){return{...this.record,...e}}}c.SearchBar=ue,c.Searches=x,c.vModel=P,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
+(function(d,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("lodash-unified"),require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","lodash-unified","vue","@vueuse/core"],l):(d=typeof globalThis<"u"?globalThis:d||self,l(d.ElementPlusSearch={},d.lodashUnified,d.vue,d.core))})(this,function(d,l,n,A){"use strict";const F=i=>({model:{value:l.get(i,"value"),callback:e=>{l.set(i,"value",e)}}}),P=n.defineComponent({name:"SearchTags"}),R=n.defineComponent({...P,props:{tags:null},setup(i){const e=i,t=n.ref();return{__sfc:!0,props:e,scrollContainer:t,scrollLeft:()=>{t.value.scrollBy({left:-200,behavior:"smooth"})},scrollRight:()=>{t.value.scrollBy({left:200,behavior:"smooth"})}}}});function w(i,e,t,s,r,a,p,h){var f=typeof i=="function"?i.options:i;return e&&(f.render=e,f.staticRenderFns=t,f._compiled=!0),a&&(f._scopeId="data-v-"+a),{exports:i,options:f}}var q=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)},j=[],k=w(R,q,j,!1,null,null);const E=k.exports;var B=Object.defineProperty,N=(i,e,t)=>e in i?B(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,o=(i,e,t)=>N(i,typeof e!="symbol"?e+"":e,t);const T=6;class V{constructor(e,t){o(this,"field"),o(this,"label"),o(this,"value"),o(this,"required"),o(this,"index"),o(this,"visible"),o(this,"disabled"),o(this,"span"),o(this,"initValue"),o(this,"enable"),o(this,"tagFilter"),o(this,"render"),o(this,"transform");var s,r,a,p;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:T,this.render=e.render,this.tagFilter=e.tagFilter,this.transform=e.transform,this.enable=(a=e.enable)!=null?a:!0,this.disabled=(p=e.disabled)!=null?p:!1}clean(){Array.isArray(this.value)?this.value=[]:this.value=void 0}reset(){this.value=this.initValue}isEnable(e){return l.isFunction(this.enable)?this.enable(e.getSearchObject()):this.enable}isDisabled(e){return l.isFunction(this.disabled)?this.disabled(e.getSearchObject()):this.disabled}}var I=Object.defineProperty,K=(i,e,t)=>e in i?I(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,_=(i,e,t)=>K(i,typeof e!="symbol"?e+"":e,t);class g{constructor(e,t,s,r){_(this,"field"),_(this,"span"),_(this,"index"),_(this,"visible"),this.field=e,this.span=t,this.index=s,this.visible=r}static fromSearchItem(e,t){return new g(e.field,e.span,t??e.index,e.visible)}static formSearchConfig(e,t){var s,r;return new g(e.field,(s=e.span)!=null?s:T,t??e,(r=e.visible)!=null?r:!0)}static fromString(e){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}`}merge(e){this.span=e.span,this.index=e.index,this.visible=e.visible}}const D=i=>`searches_layouts_${i}`;class H{constructor(e,t){_(this,"id"),_(this,"state"),_(this,"itemLayouts"),_(this,"initialLayouts"),this.id=e.id,this.initialLayouts=t,this.state=e,this.itemLayouts=l.keyBy(e.items.map(g.fromSearchItem),s=>s.field),this.restoreCachedLayouts()}restoreCachedLayouts(){const e=localStorage.getItem(D(this.id));e&&e.split(",").forEach(t=>{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((s,r)=>{const a=this.itemLayouts[s];a.index=r,a.visible=t.has(s)})}persistent(){localStorage.setItem(D(this.id),Object.values(this.itemLayouts).map(e=>e.toString()).join(",")),this.state.updateTags()}reset(){this.initialLayouts.forEach(e=>{const t=this.itemLayouts[e.field];t&&t.merge(e)})}}var M=Object.defineProperty,z=(i,e,t)=>e in i?M(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);const W=[{isApply(i){return i.contains("el-radio-group")},getText(i){var e,t;return(t=(e=i.querySelector(".is-active"))==null?void 0:e.querySelector("input"))==null?void 0:t.value}},{isApply(i){return i.contains("el-checkbox-group")},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(i){return i.contains("el-input")},getText(i,e){return e.value}},{isApply(i){return i.contains("el-input-number")},getText(i,e){return e.value}},{isApply(i){return i.contains("el-select")},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(i){return i.contains("el-cascader")},getText(i){var e;return(e=i.querySelector("input"))==null?void 0:e.value}},{isApply(i){return i.contains("el-switch")},getText(i){return i.querySelector(".is-active").innerHTML}},{isApply(i){return i.contains("el-slider")},getText(i,e){return e.value}},{isApply(i){return i.contains("el-date-editor")},getText(i,e){return e.value?e.value.join(" ~ "):e.value}}];class O{constructor(e,t){v(this,"id"),v(this,"field"),v(this,"value"),v(this,"label"),v(this,"valueText"),v(this,"required"),v(this,"item"),v(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 l.isNumber(e.value)||l.isBoolean(e.value)?!0:!l.isEmpty(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],s=W.find(r=>r.isApply(t.classList));s&&(this.valueText=s.getText(t,this))}async clean(){this.item.clean(),await this.state.doSearch()}}var G=Object.defineProperty,X=(i,e,t)=>e in i?G(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,b=(i,e,t)=>X(i,typeof e!="symbol"?e+"":e,t);class J{constructor(e,t,s){this.id=e,b(this,"items"),b(this,"config"),b(this,"searching"),b(this,"tags"),b(this,"searchCallback"),b(this,"sourceSearchable"),b(this,"_lastSearchObject",{time:0,data:null}),this.id=e,this.items=t.map((r,a)=>new V(r,a)),this.config=new H(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):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){const t=Date.now();return this._lastSearchObject.data&&t-this._lastSearchObject.time<50?this._lastSearchObject.data:(this._lastSearchObject={time:t,data:x.from(this.items).toCondition(e)},this._lastSearchObject.data)}async doSearch(){if(!this.searching)try{this.searching=!0,await this.searchCallback(this.getSearchObject()),this.updateTags()}finally{this.searching=!1}}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 Q={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}},Y=()=>{const i=n.shallowRef(),e=n.ref(),t=n.ref([]),s=n.ref(!1),r=n.ref(),a=n.ref([]),p=n.ref(300),h=u=>{i.value=u,t.value=[{label:"全部",id:"all",children:i.value.items.sort((m,L)=>u.config.itemLayouts[m.field].index-u.config.itemLayouts[L.field].index).map(m=>({label:m.label,id:m.field,disabled:!m.isEnable(u)}))}],r.value=l.chain(u.config.itemLayouts).pickBy(m=>m.visible).keys().value()};return{treeRef:e,visible:s,snapshot:t,defaultCheckedKeys:r,drawerWidth:p,updateSnapshot:h,show:u=>{h(u),s.value=!0},save:()=>{i.value.config.sync(t.value[0].children.map(u=>u.id),new Set(e.value.getCheckedKeys())),i.value.config.persistent()},reset:()=>{i.value.config.reset(),h(i.value)},keepSelection:()=>{a.value=e.value.getCheckedKeys()},restoreSelection:()=>{e.value.setCheckedKeys(a.value),a.value=[]},allowDrop:(u,m,L)=>L!=="inner",allowDrag:u=>!u.disabled}},Z=n.defineComponent({__name:"SearchSettingsDrawer",setup(i,{expose:e}){const{treeRef:t,visible:s,snapshot:r,drawerWidth:a,defaultCheckedKeys:p,show:h,allowDrop:f,allowDrag:C,keepSelection:S,restoreSelection:y,save:c,reset:$}=Y();return e({show:h}),{__sfc:!0,treeRef:t,visible:s,snapshot:r,drawerWidth:a,defaultCheckedKeys:p,show:h,allowDrop:f,allowDrag:C,keepSelection:S,restoreSelection:y,save:c,reset:$}}});var U=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)])},ee=[],te=w(Z,U,ee,!1,null,null);const se=te.exports,ie=n.defineComponent({__name:"SettingButton",props:{state:null},setup(i){const e=i,t=n.ref();return{__sfc:!0,props:e,searchSettingDialogRef:t,showSearchLayoutDialog:()=>{t.value.show(e.state)},SearchSettingsDrawer:se}}});var re=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)},ae=[],ne=w(ie,re,ae,!1,null,"61aa7563");const le=ne.exports,oe=n.defineComponent({__name:"SearchBar",props:{searches:null,id:null,onSearch:{type:Function},defaultSpan:{default:6},maxRows:{default:2},itemHeight:{default:67},resetAutoSearch:{type:Boolean,default:!0}},emits:["change"],setup(i,{expose:e,emit:t}){const s=i,r=n.reactive(new J(s.id,s.searches,s.onSearch)),a=n.ref(!1),p=n.computed(()=>l.sum(Array.from(Object.values(r.config.itemLayouts)).filter(c=>c.visible).map(c=>c.span))/24>s.maxRows),h=n.ref([]);A.watchDebounced(()=>r.items,()=>{const y=[...r.items];h.value=y.sort((c,$)=>r.config.itemLayouts[c.field].index-r.config.itemLayouts[$.field].index).filter(c=>r.config.itemLayouts[c.field].visible).filter(c=>c.isEnable(r)),t("change",r.getSearchObject(),r)},{debounce:100,immediate:!0,deep:!0});const f=n.computed(()=>({height:`${s.itemHeight*s.maxRows}px`,overflow:"hidden"})),C=y=>r.config.itemLayouts[y.field],S=()=>r.items;return e({getSearchItems:S}),{__sfc:!0,props:s,state:r,expanded:a,isShowSpanIcon:p,sortedItems:h,emits:t,itemHeightStyle:f,getLayout:C,getSearchItems:S,SearchTagsRender:E,SearchItemRender:Q,SettingButton:le}}});var ce=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)},ue=[],de=w(oe,ce,ue,!1,null,null);const he=de.exports;var fe=Object.defineProperty,pe=(i,e,t)=>e in i?fe(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,_e=(i,e,t)=>pe(i,e+"",t);class x{constructor(e){_e(this,"record"),this.record=e}static from(e){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{...s,...l.isPlainObject(a)?a:{[r.field]:a}}},{});return new x(t)}transform(e,t){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}}}d.SearchBar=he,d.Searches=x,d.vModel=F,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";.tags-scroll-container{display:flex}.tags-scroll-container .pointer{cursor:pointer}.tags-scroll-container .search-tags{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px}.tags-scroll-container .search-tags::-webkit-scrollbar{display:none}.tags-scroll-container .scroll-left-bar{cursor:pointer;margin-right:10px}.tags-scroll-container .scroll-right-bar{cursor:pointer;margin-left:10px}.setting-container{display:flex;flex-direction:column;height:100%}.setting-container .tree{flex:1;overflow-y:auto}.setting-container .footer{margin-top:auto;margin-left:auto;padding:10px 15px;display:flex;gap:10px}.setting-container .footer .el-button{width:90px}.search-bar-container{font-size:smaller;width:100%;display:flex;flex-direction:column}.search-bar-container .search{width:100%}.search-bar-container .collapsed{max-height:134px;overflow:hidden}.search-bar-container .el-input-number,.search-bar-container .el-select,.search-bar-container .el-date-editor,.search-bar-container .el-cascader{width:100%}.search-bar-container .search-bottom{display:flex}.search-bar-container .search-bottom .tags-scroll-container{flex:1;min-width:0;margin-right:10px}.search-bar-container .search-bottom .actions{display:flex;margin-left:auto}.search-bar-container .search-bottom .actions .el-button{width:90px}.search-bar-container .search-bottom .actions .icon-button{padding:0 8px;width:34px;font-size:larger}.search-bar-container .search-item{margin-bottom:12px}.search-bar-container .search-item-content{margin-top:4px}.search-bar-container .preview{overflow-x:scroll;overflow-y:hidden}.search-bar-container .scroll-tags{display:flex;align-items:center}.search-bar-container .scroll-tags .left{margin-right:10px}.search-bar-container .scroll-tags .right{margin-left:10px}
+@charset "UTF-8";.tags-scroll-container{display:flex}.tags-scroll-container .pointer{cursor:pointer}.tags-scroll-container .search-tags{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px}.tags-scroll-container .search-tags::-webkit-scrollbar{display:none}.tags-scroll-container .scroll-left-bar{cursor:pointer;margin-right:10px}.tags-scroll-container .scroll-right-bar{cursor:pointer;margin-left:10px}.setting-container{display:flex;flex-direction:column;height:100%}.setting-container .tree{flex:1;overflow-y:auto}.setting-container div[aria-disabled=true]{display:none}.setting-container .footer{margin-top:auto;margin-left:auto;padding:10px 15px;display:flex;gap:10px}.setting-container .footer .el-button{width:90px}.search-bar-container{font-size:14px;width:100%;display:flex;flex-direction:column}.search-bar-container .search,.search-bar-container .el-input-number,.search-bar-container .el-select,.search-bar-container .el-date-editor,.search-bar-container .el-cascader{width:100%}.search-bar-container .search-bottom{display:flex}.search-bar-container .search-bottom .tags-scroll-container{flex:1;min-width:0;margin-right:10px}.search-bar-container .search-bottom .actions{display:flex;margin-left:auto}.search-bar-container .search-bottom .actions .el-button{width:90px}.search-bar-container .search-bottom .actions .icon-button{padding:0 8px;width:34px;font-size:larger}.search-bar-container .search-item{margin-bottom:12px}.search-bar-container .search-item-content{margin-top:4px}.search-bar-container .preview{overflow-x:scroll;overflow-y:hidden}.search-bar-container .scroll-tags{display:flex;align-items:center}.search-bar-container .scroll-tags .left{margin-right:10px}.search-bar-container .scroll-tags .right{margin-left:10px}

package/dist/types/SearchBar.vue.d.ts

@@ -1,3 +1,4 @@
+import { SearchBarState } from './SearchBarState';
 import { Searchable } from './types/Searchable';
 type __VLS_Props = {
     searches: Searchable[];
@@ -21,15 +22,21 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         required?: boolean | undefined;
         index: number;
         visible: boolean;
+        disabled: boolean | import("./index.js").PredicateCallback;
         span: number;
         initValue?: any;
+        enable: boolean | import("./index.js").PredicateCallback;
         tagFilter?: ((value: any) => boolean) | undefined;
         render: import("./model/SearchItem").SearchItemRender;
-        transform?: import("./types/Searchable").TransformCallback<any> | undefined;
+        transform?: import("./index.js").TransformCallback<any> | undefined;
         clean: () => void;
         reset: () => void;
+        isEnable: (state: SearchBarState) => boolean;
+        isDisabled: (state: SearchBarState) => boolean;
     }[];
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+}, string, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
     defaultSpan: number;
     maxRows: number;
     itemHeight: number;

package/dist/types/SearchBarState.d.ts

@@ -10,9 +10,11 @@ export declare class SearchBarState {
     tags: SearchTag[];
     searchCallback: <T>(params: T) => Promise<void>;
     sourceSearchable: Searchable[];
+    private _lastSearchObject;
     constructor(id: string, searches: Searchable[], onSearch: (params: any) => Promise<void>);
     updateTags(): void;
     getSearchObject<T>(ext?: any): T;
     doSearch(): Promise<void>;
     reset(search?: boolean): Promise<void>;
+    setSearchValue(field: string, value: any): void;
 }

package/dist/types/SearchItemRender.d.ts

@@ -1,5 +1,6 @@
 import type { SearchItem } from './model/SearchItem';
 import { PropType } from 'vue';
+import { SearchBarState } from './SearchBarState';
 declare const _default: {
     functional: boolean;
     props: {
@@ -7,11 +8,15 @@ declare const _default: {
             type: PropType<SearchItem>;
             required: boolean;
         };
+        api: {
+            type: PropType<SearchBarState>;
+        };
     };
     render(h: any, context: {
         props: {
             search: SearchItem;
+            api: SearchBarState;
         };
-    }): import("vue").VNode | undefined;
+    }): import("vue").VNode;
 };
 export default _default;

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 import { TransformCallback } from './types/Searchable';
 import { SearchValueLike } from './types/SearchValueLike';
 export * from "./helper/vModel";
+export * from "./types/Searchable";
 export { default as SearchBar } from './SearchBar.vue';
 export type SearchBarInstance = {
     getSearchItems(): SearchValueLike[];

package/dist/types/model/SearchItem.d.ts

@@ -1,6 +1,7 @@
 import type { VNode } from 'vue';
 import { SearchValueLike } from '../types/SearchValueLike';
-import { Searchable, TransformCallback } from '../types/Searchable';
+import { PredicateCallback, Searchable, TransformCallback } from '../types/Searchable';
+import { SearchBarState } from '../SearchBarState';
 export declare const DEFAULT_SEARCH_SPAN = 6;
 export type SearchItemRender = (value: SearchValueLike) => VNode | undefined;
 export declare class SearchItem {
@@ -10,12 +11,16 @@ export declare class SearchItem {
     required?: boolean;
     index: number;
     visible: boolean;
+    disabled: boolean | PredicateCallback;
     span: number;
     initValue?: any;
+    enable: boolean | PredicateCallback;
     tagFilter?: (value: any) => boolean;
     render: SearchItemRender;
     transform?: TransformCallback<any>;
     constructor(searchable: Searchable, index: number);
     clean(): void;
     reset(): void;
+    isEnable(state: SearchBarState): boolean;
+    isDisabled(state: SearchBarState): boolean;
 }

package/dist/types/setting/use-setting.d.ts

@@ -16,4 +16,5 @@ export declare const useSetting: () => {
     keepSelection: () => void;
     restoreSelection: () => void;
     allowDrop: (_: any, __: any, type: string) => boolean;
+    allowDrag: (node: any) => boolean;
 };

package/dist/types/types/Searchable.d.ts

@@ -1,6 +1,8 @@
 import type { VNode } from 'vue';
 import { SearchItem } from '../model/SearchItem';
+import { SearchBarState } from '../SearchBarState';
 export type TransformCallback<T> = (value: T) => Record<string, any>;
+export type PredicateCallback = (value: SearchBarState) => boolean;
 export interface Searchable {
     /**
      * 属性名
@@ -22,8 +24,13 @@ export interface Searchable {
      * 搜索的tag标签是否可以关闭
      */
     required?: boolean;
+    disabled?: boolean | PredicateCallback;
     index?: number;
     visible?: boolean;
+    /**
+     * 搜索项是否启用
+     */
+    enable: boolean | PredicateCallback;
     span?: number;
     /**
      * 渲染器

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scvzerng/element-plus-search-vue2",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "private": false,
   "scripts": {