@scvzerng/element-plus-search-vue2 0.0.10 → 0.0.12

package/dist/ElementPlusSearch.es.js

@@ -1,60 +1,71 @@
-import { get as R, set as j, isFunction as $, keyBy as E, isNumber as k, isBoolean as q, isEmpty as P, chain as N, sum as B, isPlainObject as V } from "lodash-unified";
-import { defineComponent as w, ref as d, shallowRef as I, reactive as H, computed as T } from "vue";
-import { useDebounceFn as K, watchDebounced as M } from "@vueuse/core";
-const Pe = (r) => ({
+import { get as j, set as B, sum as P, isFunction as T, keyBy as k, isNumber as q, isBoolean as N, isEmpty as R, chain as V, isPlainObject as I } from "lodash-unified";
+import { defineComponent as w, ref as d, shallowRef as H, reactive as K, computed as $ } from "vue";
+import { useMutationObserver as F, useDebounceFn as W, watchDebounced as M } from "@vueuse/core";
+const Re = (r) => ({
   model: {
-    value: R(r, "value"),
+    value: j(r, "value"),
     callback: (e) => {
-      j(r, "value", e);
+      B(r, "value", e);
     }
   }
-}), W = w({
+}), U = w({
   name: "SearchTags"
 }), z = /* @__PURE__ */ w({
-  ...W,
+  ...U,
   props: {
     tags: null
   },
   setup(r) {
-    const e = r, t = d();
-    return { __sfc: !0, props: e, scrollContainer: t, scrollLeft: () => {
+    const e = r, t = d(), s = () => {
       t.value.scrollBy({ left: -200, behavior: "smooth" });
-    }, scrollRight: () => {
+    }, i = () => {
       t.value.scrollBy({
         left: 200,
         behavior: "smooth"
       });
-    } };
+    }, a = d(!1), l = () => {
+      const c = Array.from(t.value.children);
+      return P(
+        c.map((g) => g.getBoundingClientRect().width)
+      );
+    }, u = () => t.value.getBoundingClientRect().width;
+    return F(
+      t,
+      () => {
+        a.value = l() > u();
+      },
+      { subtree: !0, childList: !0, attributes: !0 }
+    ), { __sfc: !0, props: e, scrollContainer: t, scrollLeft: s, scrollRight: i, showScrollBar: a, getTagsWidth: l, getContainerWidth: u };
   }
 });
-function C(r, e, t, s, i, a, u, o) {
+function C(r, e, t, s, i, a, l, u) {
   var c = typeof r == "function" ? r.options : r;
   return e && (c.render = e, c.staticRenderFns = t, c._compiled = !0), a && (c._scopeId = "data-v-" + a), {
     exports: r,
     options: c
   };
 }
-var U = function() {
+var Y = 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);
-}, Y = [], G = /* @__PURE__ */ C(
+  return t("div", { staticClass: "tags-scroll-container" }, [t("el-tag", { directives: [{ name: "show", rawName: "v-show", value: s.showScrollBar, expression: "showScrollBar" }], staticClass: "scroll-left-bar", attrs: { "disable-transitions": "", 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: { "disable-transitions": "", 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", { directives: [{ name: "show", rawName: "v-show", value: s.showScrollBar, expression: "showScrollBar" }], staticClass: "scroll-right-bar", attrs: { "disable-transitions": "", size: "medium", type: "info" }, on: { click: s.scrollRight } }, [t("i", { staticClass: "el-icon-arrow-right" })])], 1);
+}, G = [], X = /* @__PURE__ */ C(
   z,
-  U,
   Y,
+  G,
   !1,
   null,
   null
 );
-const X = G.exports;
-var J = Object.defineProperty, Q = (r, e, t) => e in r ? J(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, l = (r, e, t) => Q(r, typeof e != "symbol" ? e + "" : e, t);
-const F = 6;
-class Z {
+const J = X.exports;
+var Q = Object.defineProperty, Z = (r, e, t) => e in r ? Q(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, h = (r, e, t) => Z(r, typeof e != "symbol" ? e + "" : e, t);
+const E = 6;
+class ee {
   constructor(e, t) {
-    l(this, "field"), l(this, "label"), l(this, "value"), l(this, "required"), l(this, "index"), l(this, "visible"), l(this, "disabled"), l(this, "span"), l(this, "initValue"), l(this, "enable"), l(this, "tagFilter"), l(this, "render"), l(this, "transform"), l(this, "onChange");
-    var s, i, a, u;
-    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 : F, this.render = e.render, this.tagFilter = e.tagFilter, this.transform = e.transform, this.enable = (a = e.enable) != null ? a : !0, this.disabled = (u = e.disabled) != null ? u : !1, e.onChange && (this.onChange = K((o, c) => e.onChange(o, c), 50));
+    h(this, "field"), h(this, "label"), h(this, "value"), h(this, "required"), h(this, "index"), h(this, "visible"), h(this, "disabled"), h(this, "span"), h(this, "initValue"), h(this, "enable"), h(this, "tagFilter"), h(this, "render"), h(this, "transform"), h(this, "onChange");
+    var s, i, a, l;
+    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 : E, this.render = e.render, this.tagFilter = e.tagFilter, this.transform = e.transform, this.enable = (a = e.enable) != null ? a : !0, this.disabled = (l = e.disabled) != null ? l : !1, e.onChange && (this.onChange = W((u, c) => e.onChange(u, c), 50));
   }
   clean() {
     Array.isArray(this.value) ? this.value = [] : this.value = void 0;
@@ -63,19 +74,19 @@ class Z {
     this.value = this.initValue;
   }
   isEnable(e) {
-    return $(this.enable) ? this.enable(e.getSearchObject()) : this.enable;
+    return T(this.enable) ? this.enable(e.getSearchObject()) : this.enable;
   }
   isDisabled(e) {
-    return $(this.disabled) ? this.disabled(e.getSearchObject()) : this.disabled;
+    return T(this.disabled) ? this.disabled(e.getSearchObject()) : this.disabled;
   }
 }
-var ee = Object.defineProperty, te = (r, e, t) => e in r ? ee(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, p = (r, e, t) => te(r, typeof e != "symbol" ? e + "" : e, t);
-class g {
+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, p = (r, e, t) => se(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;
   }
   static fromSearchItem(e, t) {
-    return new g(
+    return new _(
       e.field,
       e.span,
       t ?? e.index,
@@ -84,16 +95,16 @@ class g {
   }
   static formSearchConfig(e, t) {
     var s, i;
-    return new g(
+    return new _(
       e.field,
-      (s = e.span) != null ? s : F,
+      (s = e.span) != null ? s : E,
       t ?? e,
       (i = e.visible) != null ? i : !0
     );
   }
   static fromString(e) {
     const [t, s, i, a] = e.split("_");
-    return new g(s, Number(i), Number(t), a === "true");
+    return new _(s, Number(i), Number(t), a === "true");
   }
   toString() {
     return `${this.index}_${this.field}_${this.span}_${this.visible}`;
@@ -103,9 +114,9 @@ class g {
   }
 }
 const A = (r) => `searches_layouts_${r}`;
-class se {
+class re {
   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 = E(e.items.map(g.fromSearchItem), (s) => s.field), this.restoreCachedLayouts();
+    p(this, "id"), p(this, "state"), p(this, "itemLayouts"), p(this, "initialLayouts"), this.id = e.id, this.initialLayouts = t, this.state = e, this.itemLayouts = k(e.items.map(_.fromSearchItem), (s) => s.field), this.restoreCachedLayouts();
   }
   /**
    * 恢复自缓存中的布局信息
@@ -114,7 +125,7 @@ class se {
   restoreCachedLayouts() {
     const e = localStorage.getItem(A(this.id));
     e && e.split(",").forEach((t) => {
-      const s = g.fromString(t), i = this.itemLayouts[s.field];
+      const s = _.fromString(t), i = this.itemLayouts[s.field];
       i && i.merge(s);
     });
   }
@@ -139,8 +150,8 @@ class se {
     });
   }
 }
-var re = Object.defineProperty, ie = (r, e, t) => e in r ? re(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, f = (r, e, t) => ie(r, typeof e != "symbol" ? e + "" : e, t);
-const ae = [
+var ie = Object.defineProperty, ae = (r, e, t) => e in r ? ie(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, f = (r, e, t) => ae(r, typeof e != "symbol" ? e + "" : e, t);
+const ne = [
   {
     isApply(r) {
       return r.contains("el-radio-group");
@@ -230,27 +241,33 @@ class D {
     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 k(e.value) || q(e.value) ? !0 : !P(e.value);
+    return q(e.value) || N(e.value) ? !0 : !R(e.value);
   }
   updateValueText() {
     const e = document.querySelector(this.id);
+    if (!e)
+      return;
     if (e.children.length !== 1)
       throw new Error("holder children length is not 1");
-    const t = e.children[0], s = ae.find((i) => i.isApply(t.classList));
+    const t = e.children[0], s = ne.find((i) => i.isApply(t.classList));
     s && (this.valueText = s.getText(t, this));
   }
   async clean() {
     this.item.clean(), await this.state.doSearch();
   }
 }
-var ne = Object.defineProperty, le = (r, e, t) => e in r ? ne(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, _ = (r, e, t) => le(r, typeof e != "symbol" ? e + "" : e, t);
-class oe {
+var le = Object.defineProperty, oe = (r, e, t) => e in r ? le(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, v = (r, e, t) => oe(r, typeof e != "symbol" ? e + "" : e, t);
+class ce {
   constructor(e, t, s) {
-    this.id = e, _(this, "items"), _(this, "config"), _(this, "searching"), _(this, "tags"), _(this, "searchCallback"), _(this, "sourceSearchable"), _(this, "_lastSearchObject", { time: 0, data: null }), this.id = e, this.items = t.map((i, a) => new Z(i, a)), this.config = new se(
+    this.id = e, v(this, "items"), v(this, "config"), v(this, "searching"), v(this, "tags"), v(this, "searchCallback"), v(this, "sourceSearchable"), v(this, "_lastSearchObject", { time: 0, data: null }), this.id = e, this.items = t.map((i, a) => new ee(i, a)), this.config = new re(
       this,
-      t.map((i, a) => g.formSearchConfig(i, a))
+      t.map((i, a) => _.formSearchConfig(i, a))
     ), this.sourceSearchable = t, this.searching = !1, this.searchCallback = s, this.tags = [];
   }
+  updateSearchTag(e) {
+    var t;
+    (t = this.tags.find((s) => s.field === e)) == null || t.updateValueText();
+  }
   updateTags() {
     this.tags = this.items.filter((e) => e.tagFilter ? e.tagFilter(e.value) : D.hasValue(e)).map((e) => new D(this, e)).sort(
       (e, t) => this.config.itemLayouts[e.field].index - this.config.itemLayouts[t.field].index
@@ -276,7 +293,7 @@ class oe {
     i && s && s(i.value) && (i.value = t);
   }
 }
-const ce = {
+const ue = {
   functional: !0,
   props: {
     search: {
@@ -288,49 +305,52 @@ const ce = {
     }
   },
   render(r, e) {
-    const { props: t } = e, s = t.search.render(t.search);
-    if (s.componentOptions.propsData || (s.componentOptions.propsData = {}), s.componentOptions.listeners || (s.componentOptions.listeners = {}), s.componentOptions.listeners.input) {
-      const i = s.componentOptions.listeners.input;
-      s.componentOptions.listeners.input = (a) => {
-        t.search.onChange && t.search.onChange(a, t.api), i(a);
+    var t;
+    const { props: s } = e, i = s.search.render(s.search);
+    if (i.componentOptions.propsData || (i.componentOptions.propsData = {}), i.componentOptions.listeners || (i.componentOptions.listeners = {}), i.componentOptions.listeners || (i.componentOptions.listeners = {}), (t = i.data) != null && t.attrs || (i.data.attrs = {}), i.data.attrs.labelChange = () => {
+      s.api.updateSearchTag(s.search.field);
+    }, i.componentOptions.listeners.input) {
+      const a = i.componentOptions.listeners.input;
+      i.componentOptions.listeners.input = (l) => {
+        s.search.onChange && s.search.onChange(l, s.api), a(l);
       };
     }
-    return s.componentOptions.propsData.disabled = t.search.isDisabled(t.api), s;
+    return i.componentOptions.propsData.disabled = s.search.isDisabled(s.api), i;
   }
-}, ue = () => {
-  const r = I(), e = d(), t = d([]), s = d(!1), i = d(), a = d([]), u = d(300), o = (n) => {
+}, he = () => {
+  const r = H(), e = d(), t = d([]), s = d(!1), i = d(), a = d([]), l = d(300), u = (n) => {
     r.value = n, t.value = [
       {
         label: "全部",
         id: "all",
         children: r.value.items.sort(
-          (h, L) => n.config.itemLayouts[h.field].index - n.config.itemLayouts[L.field].index
-        ).map((h) => ({
-          label: h.label,
-          id: h.field,
-          disabled: !h.isEnable(n)
+          (o, y) => n.config.itemLayouts[o.field].index - n.config.itemLayouts[y.field].index
+        ).map((o) => ({
+          label: o.label,
+          id: o.field,
+          disabled: !o.isEnable(n)
         }))
       }
-    ], i.value = N(n.config.itemLayouts).pickBy((h) => h.visible).keys().value();
+    ], i.value = V(n.config.itemLayouts).pickBy((o) => o.visible).keys().value();
   };
   return {
     treeRef: e,
     visible: s,
     snapshot: t,
     defaultCheckedKeys: i,
-    drawerWidth: u,
-    updateSnapshot: o,
+    drawerWidth: l,
+    updateSnapshot: u,
     show: (n) => {
-      o(n), s.value = !0;
+      u(n), s.value = !0;
     },
     save: () => {
       r.value.config.sync(
         t.value[0].children.map((n) => n.id),
         new Set(e.value.getCheckedKeys())
-      ), r.value.config.persistent();
+      ), r.value.config.persistent(), s.value = !1;
     },
     reset: () => {
-      r.value.config.reset(), o(r.value);
+      r.value.config.reset(), u(r.value);
     },
     keepSelection: () => {
       a.value = e.value.getCheckedKeys();
@@ -338,10 +358,10 @@ const ce = {
     restoreSelection: () => {
       e.value.setCheckedKeys(a.value), a.value = [];
     },
-    allowDrop: (n, h, L) => L !== "inner",
+    allowDrop: (n, o, y) => y !== "inner",
     allowDrag: (n) => !n.disabled
   };
-}, he = /* @__PURE__ */ w({
+}, de = /* @__PURE__ */ w({
   __name: "SearchSettingsDrawer",
   setup(r, { expose: e }) {
     const {
@@ -349,34 +369,34 @@ const ce = {
       visible: s,
       snapshot: i,
       drawerWidth: a,
-      defaultCheckedKeys: u,
-      show: o,
+      defaultCheckedKeys: l,
+      show: u,
       allowDrop: c,
-      allowDrag: x,
-      keepSelection: m,
-      restoreSelection: b,
-      save: y,
+      allowDrag: g,
+      keepSelection: x,
+      restoreSelection: m,
+      save: b,
       reset: S
-    } = ue();
+    } = he();
     return e({
-      show: o
-    }), { __sfc: !0, treeRef: t, visible: s, snapshot: i, drawerWidth: a, defaultCheckedKeys: u, show: o, allowDrop: c, allowDrag: x, keepSelection: m, restoreSelection: b, save: y, reset: S };
+      show: u
+    }), { __sfc: !0, treeRef: t, visible: s, snapshot: i, drawerWidth: a, defaultCheckedKeys: l, show: u, allowDrop: c, allowDrag: g, keepSelection: x, restoreSelection: m, save: b, reset: S };
   }
 });
-var de = function() {
+var fe = 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, "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)]);
-}, fe = [], pe = /* @__PURE__ */ C(
-  he,
+}, pe = [], ve = /* @__PURE__ */ C(
   de,
   fe,
+  pe,
   !1,
   null,
   null
 );
-const ve = pe.exports, _e = /* @__PURE__ */ w({
+const _e = ve.exports, ge = /* @__PURE__ */ w({
   __name: "SettingButton",
   props: {
     state: null
@@ -385,21 +405,21 @@ const ve = pe.exports, _e = /* @__PURE__ */ w({
     const e = r, t = d();
     return { __sfc: !0, props: e, searchSettingDialogRef: t, showSearchLayoutDialog: () => {
       t.value.show(e.state);
-    }, SearchSettingsDrawer: ve };
+    }, SearchSettingsDrawer: _e };
   }
 });
-var ge = function() {
+var me = 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);
-}, me = [], be = /* @__PURE__ */ C(
-  _e,
+}, be = [], Se = /* @__PURE__ */ C(
   ge,
   me,
+  be,
   !1,
   null,
   "61aa7563"
 );
-const ye = be.exports, Se = /* @__PURE__ */ w({
+const ye = Se.exports, we = /* @__PURE__ */ w({
   __name: "SearchBar",
   props: {
     searches: null,
@@ -412,50 +432,56 @@ const ye = be.exports, Se = /* @__PURE__ */ w({
   },
   emits: ["change"],
   setup(r, { expose: e, emit: t }) {
-    const s = r, i = H(new oe(s.id, s.searches, s.onSearch)), a = d(!1), u = T(() => B(Array.from(Object.values(i.config.itemLayouts)).filter((n) => n.visible).map((n) => n.span)) / 24 > s.maxRows), o = d([]);
+    const s = r, i = K(new ce(s.id, s.searches, s.onSearch)), a = d(!1), l = d();
+    F(
+      l,
+      () => {
+        i.updateTags();
+      },
+      { childList: !0 }
+    );
+    const u = $(() => P(Array.from(Object.values(i.config.itemLayouts)).filter((o) => o.visible).map((o) => o.span)) / 24 > s.maxRows), c = d([]);
     M(() => [i.items, i.config.itemLayouts], () => {
-      const v = [...i.items];
-      o.value = v.sort((n, h) => i.config.itemLayouts[n.field].index - i.config.itemLayouts[h.field].index).filter((n) => n.isEnable(i)), t("change", i.getSearchObject(), i);
+      const n = [...i.items];
+      c.value = n.sort((o, y) => i.config.itemLayouts[o.field].index - i.config.itemLayouts[y.field].index).filter((o) => o.isEnable(i)), t("change", i.getSearchObject(), i);
     }, { debounce: 100, immediate: !0, deep: !0 });
-    const c = T(() => ({
+    const g = $(() => ({
       height: `${s.itemHeight * s.maxRows}px`,
       overflow: "hidden"
-    })), x = (v) => i.config.itemLayouts[v.field], m = () => i.items, b = () => i.getSearchObject(), y = (v) => {
-      i.searching = v;
-    }, S = () => {
-      i.updateTags();
-    };
+    })), x = (n) => i.config.itemLayouts[n.field], m = () => i.items, b = () => i.getSearchObject(), S = (n) => {
+      i.searching = n;
+    }, L = () => i.updateTags();
     return e({
       getSearchItems: m,
       getSearchObject: b,
-      updateSearching: y,
-      updateTags: S
-    }), { __sfc: !0, props: s, state: i, expanded: a, isShowSpanIcon: u, sortedItems: o, emits: t, itemHeightStyle: c, getLayout: x, getSearchItems: m, getSearchObject: b, updateSearching: y, updateTags: S, SearchTagsRender: X, SearchItemRender: ce, SettingButton: ye };
+      updateSearching: S,
+      updateTags: L
+    }), { __sfc: !0, props: s, state: i, expanded: a, itemContainerRef: l, isShowSpanIcon: u, sortedItems: c, emits: t, itemHeightStyle: g, getLayout: x, getSearchItems: m, getSearchObject: b, updateSearching: S, updateTags: L, SearchTagsRender: J, SearchItemRender: ue, SettingButton: ye };
   }
 });
-var we = function() {
+var xe = function() {
   var e = this, t = e._self._c, s = e._self._setupProxy;
-  return t("div", { staticClass: "search-bar-container" }, [t("el-row", { class: "search", staticStyle: { "flex-wrap": "wrap" }, style: s.isShowSpanIcon && !s.expanded ? s.itemHeightStyle : {}, attrs: { type: "flex", gutter: 16 } }, e._l(s.sortedItems, function(i) {
+  return t("div", { staticClass: "search-bar-container" }, [t("el-row", { ref: "itemContainerRef", class: "search", staticStyle: { "flex-wrap": "wrap" }, style: s.isShowSpanIcon && !s.expanded ? s.itemHeightStyle : {}, attrs: { type: "flex", 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, 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(i) {
+  }), 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" }, [t("el-button", { directives: [{ name: "show", rawName: "v-show", value: s.isShowSpanIcon, expression: "isShowSpanIcon" }], 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", { attrs: { type: "primary", loading: s.state.searching, disabled: s.state.searching }, on: { click: () => s.state.doSearch() } }, [e._v("查 询")]), t("el-button", { on: { click: () => s.state.reset(e.resetAutoSearch) } }, [e._v("重 置")])], 1)], 1)], 1);
-}, xe = [], Ce = /* @__PURE__ */ C(
-  Se,
+  } } }, [t("i", { class: [s.expanded ? "el-icon-arrow-up" : "el-icon-arrow-down"] })]), t(s.SettingButton, { attrs: { state: s.state } }), t("el-button", { attrs: { type: "primary", loading: s.state.searching, disabled: s.state.searching }, on: { click: () => s.state.doSearch() } }, [e._v("查 询")]), t("el-button", { on: { click: () => s.state.reset(e.resetAutoSearch) } }, [e._v("重 置")])], 1)], 1)], 1);
+}, Ce = [], Le = /* @__PURE__ */ C(
   we,
   xe,
+  Ce,
   !1,
   null,
   null
 );
-const Fe = Ce.exports;
-var Le = Object.defineProperty, Oe = (r, e, t) => e in r ? Le(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, $e = (r, e, t) => Oe(r, e + "", t);
-const Re = (r) => P(r), je = () => !0, Ee = (r, e) => {
+const Fe = Le.exports;
+var Oe = Object.defineProperty, Te = (r, e, t) => e in r ? Oe(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, $e = (r, e, t) => Te(r, e + "", t);
+const Ee = (r) => R(r), je = () => !0, Be = (r, e) => {
   const t = r.getSearchObject();
   let s = !0;
   for (const [i, a] of Object.entries(e)) {
-    const u = t[i];
-    s = a(u), s || (s = !1);
+    const l = t[i];
+    s = a(l), s || (s = !1);
   }
   return () => s;
 }, ke = (r, e, t) => ({
@@ -494,7 +520,7 @@ class O {
         const a = i.transform ? i.transform(i.value) : i.value;
         return {
           ...s,
-          ...V(a) ? a : { [i.field]: a }
+          ...I(a) ? a : { [i.field]: a }
         };
       },
       {}
@@ -511,10 +537,10 @@ class O {
 }
 export {
   je as APPLY_ALWAYS,
-  Re as APPLY_WHEN_NOT_VALUE,
-  Ee as APPLY_WITH_MULTIPLE_VALUE,
+  Ee as APPLY_WHEN_NOT_VALUE,
+  Be as APPLY_WITH_MULTIPLE_VALUE,
   Fe as SearchBar,
   O as Searches,
   ke as useSearchProxy,
-  Pe as vModel
+  Re as vModel
 };

package/dist/ElementPlusSearch.umd.js

@@ -1 +1 @@
-(function(c,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("lodash-unified"),require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","lodash-unified","vue","@vueuse/core"],o):(c=typeof globalThis<"u"?globalThis:c||self,o(c.ElementPlusSearch={},c.lodashUnified,c.vue,c.core))})(this,function(c,o,l,P){"use strict";const E=r=>({model:{value:o.get(r,"value"),callback:e=>{o.set(r,"value",e)}}}),F=l.defineComponent({name:"SearchTags"}),j=l.defineComponent({...F,props:{tags:null},setup(r){const e=r,t=l.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 x(r,e,t,s,i,a,f,h){var d=typeof r=="function"?r.options:r;return e&&(d.render=e,d.staticRenderFns=t,d._compiled=!0),a&&(d._scopeId="data-v-"+a),{exports:r,options:d}}var R=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)},q=[],k=x(j,R,q,!1,null,null);const N=k.exports;var B=Object.defineProperty,V=(r,e,t)=>e in r?B(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,u=(r,e,t)=>V(r,typeof e!="symbol"?e+"":e,t);const A=6;class I{constructor(e,t){u(this,"field"),u(this,"label"),u(this,"value"),u(this,"required"),u(this,"index"),u(this,"visible"),u(this,"disabled"),u(this,"span"),u(this,"initValue"),u(this,"enable"),u(this,"tagFilter"),u(this,"render"),u(this,"transform"),u(this,"onChange");var s,i,a,f;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,this.enable=(a=e.enable)!=null?a:!0,this.disabled=(f=e.disabled)!=null?f:!1,e.onChange&&(this.onChange=P.useDebounceFn((h,d)=>e.onChange(h,d),50))}clean(){Array.isArray(this.value)?this.value=[]:this.value=void 0}reset(){this.value=this.initValue}isEnable(e){return o.isFunction(this.enable)?this.enable(e.getSearchObject()):this.enable}isDisabled(e){return o.isFunction(this.disabled)?this.disabled(e.getSearchObject()):this.disabled}}var H=Object.defineProperty,M=(r,e,t)=>e in r?H(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,_=(r,e,t)=>M(r,typeof e!="symbol"?e+"":e,t);class g{constructor(e,t,s,i){_(this,"field"),_(this,"span"),_(this,"index"),_(this,"visible"),this.field=e,this.span=t,this.index=s,this.visible=i}static fromSearchItem(e,t){return new g(e.field,e.span,t??e.index,e.visible)}static formSearchConfig(e,t){var s,i;return new g(e.field,(s=e.span)!=null?s:A,t??e,(i=e.visible)!=null?i:!0)}static fromString(e){const[t,s,i,a]=e.split("_");return new g(s,Number(i),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 $=r=>`searches_layouts_${r}`;class W{constructor(e,t){_(this,"id"),_(this,"state"),_(this,"itemLayouts"),_(this,"initialLayouts"),this.id=e.id,this.initialLayouts=t,this.state=e,this.itemLayouts=o.keyBy(e.items.map(g.fromSearchItem),s=>s.field),this.restoreCachedLayouts()}restoreCachedLayouts(){const e=localStorage.getItem($(this.id));e&&e.split(",").forEach(t=>{const s=g.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 a=this.itemLayouts[s];a.index=i,a.visible=t.has(s)})}persistent(){localStorage.setItem($(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 K=Object.defineProperty,Y=(r,e,t)=>e in r?K(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,v=(r,e,t)=>Y(r,typeof e!="symbol"?e+"":e,t);const z=[{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 D{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 o.isNumber(e.value)||o.isBoolean(e.value)?!0:!o.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=z.find(i=>i.isApply(t.classList));s&&(this.valueText=s.getText(t,this))}async clean(){this.item.clean(),await this.state.doSearch()}}var G=Object.defineProperty,X=(r,e,t)=>e in r?G(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,m=(r,e,t)=>X(r,typeof e!="symbol"?e+"":e,t);class J{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((i,a)=>new I(i,a)),this.config=new W(this,t.map((i,a)=>g.formSearchConfig(i,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):D.hasValue(e)).map(e=>new D(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:L.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,s=i=>!0){const i=this.items.find(a=>a.field===e);i&&s&&s(i.value)&&(i.value=t)}}const Q={functional:!0,props:{search:{type:Object,required:!0},api:{type:Object}},render(r,e){const{props:t}=e,s=t.search.render(t.search);if(s.componentOptions.propsData||(s.componentOptions.propsData={}),s.componentOptions.listeners||(s.componentOptions.listeners={}),s.componentOptions.listeners.input){const i=s.componentOptions.listeners.input;s.componentOptions.listeners.input=a=>{t.search.onChange&&t.search.onChange(a,t.api),i(a)}}return s.componentOptions.propsData.disabled=t.search.isDisabled(t.api),s}},Z=()=>{const r=l.shallowRef(),e=l.ref(),t=l.ref([]),s=l.ref(!1),i=l.ref(),a=l.ref([]),f=l.ref(300),h=n=>{r.value=n,t.value=[{label:"全部",id:"all",children:r.value.items.sort((p,O)=>n.config.itemLayouts[p.field].index-n.config.itemLayouts[O.field].index).map(p=>({label:p.label,id:p.field,disabled:!p.isEnable(n)}))}],i.value=o.chain(n.config.itemLayouts).pickBy(p=>p.visible).keys().value()};return{treeRef:e,visible:s,snapshot:t,defaultCheckedKeys:i,drawerWidth:f,updateSnapshot:h,show:n=>{h(n),s.value=!0},save:()=>{r.value.config.sync(t.value[0].children.map(n=>n.id),new Set(e.value.getCheckedKeys())),r.value.config.persistent()},reset:()=>{r.value.config.reset(),h(r.value)},keepSelection:()=>{a.value=e.value.getCheckedKeys()},restoreSelection:()=>{e.value.setCheckedKeys(a.value),a.value=[]},allowDrop:(n,p,O)=>O!=="inner",allowDrag:n=>!n.disabled}},U=l.defineComponent({__name:"SearchSettingsDrawer",setup(r,{expose:e}){const{treeRef:t,visible:s,snapshot:i,drawerWidth:a,defaultCheckedKeys:f,show:h,allowDrop:d,allowDrag:T,keepSelection:y,restoreSelection:S,save:w,reset:C}=Z();return e({show:h}),{__sfc:!0,treeRef:t,visible:s,snapshot:i,drawerWidth:a,defaultCheckedKeys:f,show:h,allowDrop:d,allowDrag:T,keepSelection:y,restoreSelection:S,save:w,reset:C}}});var ee=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,"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)])},te=[],se=x(U,ee,te,!1,null,null);const re=se.exports,ie=l.defineComponent({__name:"SettingButton",props:{state:null},setup(r){const e=r,t=l.ref();return{__sfc:!0,props:e,searchSettingDialogRef:t,showSearchLayoutDialog:()=>{t.value.show(e.state)},SearchSettingsDrawer:re}}});var ae=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)},ne=[],le=x(ie,ae,ne,!1,null,"61aa7563");const oe=le.exports,ce=l.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(r,{expose:e,emit:t}){const s=r,i=l.reactive(new J(s.id,s.searches,s.onSearch)),a=l.ref(!1),f=l.computed(()=>o.sum(Array.from(Object.values(i.config.itemLayouts)).filter(n=>n.visible).map(n=>n.span))/24>s.maxRows),h=l.ref([]);P.watchDebounced(()=>[i.items,i.config.itemLayouts],()=>{const b=[...i.items];h.value=b.sort((n,p)=>i.config.itemLayouts[n.field].index-i.config.itemLayouts[p.field].index).filter(n=>n.isEnable(i)),t("change",i.getSearchObject(),i)},{debounce:100,immediate:!0,deep:!0});const d=l.computed(()=>({height:`${s.itemHeight*s.maxRows}px`,overflow:"hidden"})),T=b=>i.config.itemLayouts[b.field],y=()=>i.items,S=()=>i.getSearchObject(),w=b=>{i.searching=b},C=()=>{i.updateTags()};return e({getSearchItems:y,getSearchObject:S,updateSearching:w,updateTags:C}),{__sfc:!0,props:s,state:i,expanded:a,isShowSpanIcon:f,sortedItems:h,emits:t,itemHeightStyle:d,getLayout:T,getSearchItems:y,getSearchObject:S,updateSearching:w,updateTags:C,SearchTagsRender:N,SearchItemRender:Q,SettingButton:oe}}});var ue=function(){var e=this,t=e._self._c,s=e._self._setupProxy;return t("div",{staticClass:"search-bar-container"},[t("el-row",{class:"search",staticStyle:{"flex-wrap":"wrap"},style:s.isShowSpanIcon&&!s.expanded?s.itemHeightStyle:{},attrs:{type:"flex",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,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(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",{attrs:{type:"primary",loading:s.state.searching,disabled:s.state.searching},on:{click:()=>s.state.doSearch()}},[e._v("查 询")]),t("el-button",{on:{click:()=>s.state.reset(e.resetAutoSearch)}},[e._v("重 置")])],1)],1)],1)},he=[],de=x(ce,ue,he,!1,null,null);const fe=de.exports;var pe=Object.defineProperty,_e=(r,e,t)=>e in r?pe(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,ve=(r,e,t)=>_e(r,e+"",t);const ge=r=>o.isEmpty(r),me=()=>!0,be=(r,e)=>{const t=r.getSearchObject();let s=!0;for(const[i,a]of Object.entries(e)){const f=t[i];s=a(f),s||(s=!1)}return()=>s},ye=(r,e,t)=>({refreshCallback:async s=>{const i=e.value.getSearchObject();try{return e.value.updateSearching(!0),await r(i,s)}finally{e.value.updateSearching(!1),e.value.updateTags()}},searchCallback:async()=>{var s;for(const i of t)await((s=i.value)==null?void 0:s.refresh())}});class L{constructor(e){ve(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;return{...s,...o.isPlainObject(a)?a:{[i.field]:a}}},{});return new L(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.APPLY_ALWAYS=me,c.APPLY_WHEN_NOT_VALUE=ge,c.APPLY_WITH_MULTIPLE_VALUE=be,c.SearchBar=fe,c.Searches=L,c.useSearchProxy=ye,c.vModel=E,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
+(function(h,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("lodash-unified"),require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","lodash-unified","vue","@vueuse/core"],c):(h=typeof globalThis<"u"?globalThis:h||self,c(h.ElementPlusSearch={},h.lodashUnified,h.vue,h.core))})(this,function(h,c,n,x){"use strict";const E=r=>({model:{value:c.get(r,"value"),callback:e=>{c.set(r,"value",e)}}}),F=n.defineComponent({name:"SearchTags"}),R=n.defineComponent({...F,props:{tags:null},setup(r){const e=r,t=n.ref(),s=()=>{t.value.scrollBy({left:-200,behavior:"smooth"})},i=()=>{t.value.scrollBy({left:200,behavior:"smooth"})},a=n.ref(!1),o=()=>{const d=Array.from(t.value.children);return c.sum(d.map(b=>b.getBoundingClientRect().width))},p=()=>t.value.getBoundingClientRect().width;return x.useMutationObserver(t,()=>{a.value=o()>p()},{subtree:!0,childList:!0,attributes:!0}),{__sfc:!0,props:e,scrollContainer:t,scrollLeft:s,scrollRight:i,showScrollBar:a,getTagsWidth:o,getContainerWidth:p}}});function L(r,e,t,s,i,a,o,p){var d=typeof r=="function"?r.options:r;return e&&(d.render=e,d.staticRenderFns=t,d._compiled=!0),a&&(d._scopeId="data-v-"+a),{exports:r,options:d}}var j=function(){var e=this,t=e._self._c,s=e._self._setupProxy;return t("div",{staticClass:"tags-scroll-container"},[t("el-tag",{directives:[{name:"show",rawName:"v-show",value:s.showScrollBar,expression:"showScrollBar"}],staticClass:"scroll-left-bar",attrs:{"disable-transitions":"",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:{"disable-transitions":"",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",{directives:[{name:"show",rawName:"v-show",value:s.showScrollBar,expression:"showScrollBar"}],staticClass:"scroll-right-bar",attrs:{"disable-transitions":"",size:"medium",type:"info"},on:{click:s.scrollRight}},[t("i",{staticClass:"el-icon-arrow-right"})])],1)},B=[],q=L(R,j,B,!1,null,null);const N=q.exports;var k=Object.defineProperty,V=(r,e,t)=>e in r?k(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);const P=6;class I{constructor(e,t){f(this,"field"),f(this,"label"),f(this,"value"),f(this,"required"),f(this,"index"),f(this,"visible"),f(this,"disabled"),f(this,"span"),f(this,"initValue"),f(this,"enable"),f(this,"tagFilter"),f(this,"render"),f(this,"transform"),f(this,"onChange");var s,i,a,o;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:P,this.render=e.render,this.tagFilter=e.tagFilter,this.transform=e.transform,this.enable=(a=e.enable)!=null?a:!0,this.disabled=(o=e.disabled)!=null?o:!1,e.onChange&&(this.onChange=x.useDebounceFn((p,d)=>e.onChange(p,d),50))}clean(){Array.isArray(this.value)?this.value=[]:this.value=void 0}reset(){this.value=this.initValue}isEnable(e){return c.isFunction(this.enable)?this.enable(e.getSearchObject()):this.enable}isDisabled(e){return c.isFunction(this.disabled)?this.disabled(e.getSearchObject()):this.disabled}}var H=Object.defineProperty,M=(r,e,t)=>e in r?H(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,v=(r,e,t)=>M(r,typeof e!="symbol"?e+"":e,t);class g{constructor(e,t,s,i){v(this,"field"),v(this,"span"),v(this,"index"),v(this,"visible"),this.field=e,this.span=t,this.index=s,this.visible=i}static fromSearchItem(e,t){return new g(e.field,e.span,t??e.index,e.visible)}static formSearchConfig(e,t){var s,i;return new g(e.field,(s=e.span)!=null?s:P,t??e,(i=e.visible)!=null?i:!0)}static fromString(e){const[t,s,i,a]=e.split("_");return new g(s,Number(i),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 $=r=>`searches_layouts_${r}`;class W{constructor(e,t){v(this,"id"),v(this,"state"),v(this,"itemLayouts"),v(this,"initialLayouts"),this.id=e.id,this.initialLayouts=t,this.state=e,this.itemLayouts=c.keyBy(e.items.map(g.fromSearchItem),s=>s.field),this.restoreCachedLayouts()}restoreCachedLayouts(){const e=localStorage.getItem($(this.id));e&&e.split(",").forEach(t=>{const s=g.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 a=this.itemLayouts[s];a.index=i,a.visible=t.has(s)})}persistent(){localStorage.setItem($(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 K=Object.defineProperty,Y=(r,e,t)=>e in r?K(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,_=(r,e,t)=>Y(r,typeof e!="symbol"?e+"":e,t);const z=[{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 D{constructor(e,t){_(this,"id"),_(this,"field"),_(this,"value"),_(this,"label"),_(this,"valueText"),_(this,"required"),_(this,"item"),_(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 c.isNumber(e.value)||c.isBoolean(e.value)?!0:!c.isEmpty(e.value)}updateValueText(){const e=document.querySelector(this.id);if(!e)return;if(e.children.length!==1)throw new Error("holder children length is not 1");const t=e.children[0],s=z.find(i=>i.isApply(t.classList));s&&(this.valueText=s.getText(t,this))}async clean(){this.item.clean(),await this.state.doSearch()}}var G=Object.defineProperty,X=(r,e,t)=>e in r?G(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,m=(r,e,t)=>X(r,typeof e!="symbol"?e+"":e,t);class J{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((i,a)=>new I(i,a)),this.config=new W(this,t.map((i,a)=>g.formSearchConfig(i,a))),this.sourceSearchable=t,this.searching=!1,this.searchCallback=s,this.tags=[]}updateSearchTag(e){var t;(t=this.tags.find(s=>s.field===e))==null||t.updateValueText()}updateTags(){this.tags=this.items.filter(e=>e.tagFilter?e.tagFilter(e.value):D.hasValue(e)).map(e=>new D(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:T.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,s=i=>!0){const i=this.items.find(a=>a.field===e);i&&s&&s(i.value)&&(i.value=t)}}const Q={functional:!0,props:{search:{type:Object,required:!0},api:{type:Object}},render(r,e){var t;const{props:s}=e,i=s.search.render(s.search);if(i.componentOptions.propsData||(i.componentOptions.propsData={}),i.componentOptions.listeners||(i.componentOptions.listeners={}),i.componentOptions.listeners||(i.componentOptions.listeners={}),(t=i.data)!=null&&t.attrs||(i.data.attrs={}),i.data.attrs.labelChange=()=>{s.api.updateSearchTag(s.search.field)},i.componentOptions.listeners.input){const a=i.componentOptions.listeners.input;i.componentOptions.listeners.input=o=>{s.search.onChange&&s.search.onChange(o,s.api),a(o)}}return i.componentOptions.propsData.disabled=s.search.isDisabled(s.api),i}},Z=()=>{const r=n.shallowRef(),e=n.ref(),t=n.ref([]),s=n.ref(!1),i=n.ref(),a=n.ref([]),o=n.ref(300),p=l=>{r.value=l,t.value=[{label:"全部",id:"all",children:r.value.items.sort((u,C)=>l.config.itemLayouts[u.field].index-l.config.itemLayouts[C.field].index).map(u=>({label:u.label,id:u.field,disabled:!u.isEnable(l)}))}],i.value=c.chain(l.config.itemLayouts).pickBy(u=>u.visible).keys().value()};return{treeRef:e,visible:s,snapshot:t,defaultCheckedKeys:i,drawerWidth:o,updateSnapshot:p,show:l=>{p(l),s.value=!0},save:()=>{r.value.config.sync(t.value[0].children.map(l=>l.id),new Set(e.value.getCheckedKeys())),r.value.config.persistent(),s.value=!1},reset:()=>{r.value.config.reset(),p(r.value)},keepSelection:()=>{a.value=e.value.getCheckedKeys()},restoreSelection:()=>{e.value.setCheckedKeys(a.value),a.value=[]},allowDrop:(l,u,C)=>C!=="inner",allowDrag:l=>!l.disabled}},U=n.defineComponent({__name:"SearchSettingsDrawer",setup(r,{expose:e}){const{treeRef:t,visible:s,snapshot:i,drawerWidth:a,defaultCheckedKeys:o,show:p,allowDrop:d,allowDrag:b,keepSelection:O,restoreSelection:S,save:y,reset:w}=Z();return e({show:p}),{__sfc:!0,treeRef:t,visible:s,snapshot:i,drawerWidth:a,defaultCheckedKeys:o,show:p,allowDrop:d,allowDrag:b,keepSelection:O,restoreSelection:S,save:y,reset:w}}});var ee=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,"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)])},te=[],se=L(U,ee,te,!1,null,null);const re=se.exports,ie=n.defineComponent({__name:"SettingButton",props:{state:null},setup(r){const e=r,t=n.ref();return{__sfc:!0,props:e,searchSettingDialogRef:t,showSearchLayoutDialog:()=>{t.value.show(e.state)},SearchSettingsDrawer:re}}});var ae=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)},ne=[],le=L(ie,ae,ne,!1,null,"61aa7563");const oe=le.exports,ce=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(r,{expose:e,emit:t}){const s=r,i=n.reactive(new J(s.id,s.searches,s.onSearch)),a=n.ref(!1),o=n.ref();x.useMutationObserver(o,()=>{i.updateTags()},{childList:!0});const p=n.computed(()=>c.sum(Array.from(Object.values(i.config.itemLayouts)).filter(u=>u.visible).map(u=>u.span))/24>s.maxRows),d=n.ref([]);x.watchDebounced(()=>[i.items,i.config.itemLayouts],()=>{const l=[...i.items];d.value=l.sort((u,C)=>i.config.itemLayouts[u.field].index-i.config.itemLayouts[C.field].index).filter(u=>u.isEnable(i)),t("change",i.getSearchObject(),i)},{debounce:100,immediate:!0,deep:!0});const b=n.computed(()=>({height:`${s.itemHeight*s.maxRows}px`,overflow:"hidden"})),O=l=>i.config.itemLayouts[l.field],S=()=>i.items,y=()=>i.getSearchObject(),w=l=>{i.searching=l},A=()=>i.updateTags();return e({getSearchItems:S,getSearchObject:y,updateSearching:w,updateTags:A}),{__sfc:!0,props:s,state:i,expanded:a,itemContainerRef:o,isShowSpanIcon:p,sortedItems:d,emits:t,itemHeightStyle:b,getLayout:O,getSearchItems:S,getSearchObject:y,updateSearching:w,updateTags:A,SearchTagsRender:N,SearchItemRender:Q,SettingButton:oe}}});var ue=function(){var e=this,t=e._self._c,s=e._self._setupProxy;return t("div",{staticClass:"search-bar-container"},[t("el-row",{ref:"itemContainerRef",class:"search",staticStyle:{"flex-wrap":"wrap"},style:s.isShowSpanIcon&&!s.expanded?s.itemHeightStyle:{},attrs:{type:"flex",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,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"},[t("el-button",{directives:[{name:"show",rawName:"v-show",value:s.isShowSpanIcon,expression:"isShowSpanIcon"}],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"]})]),t(s.SettingButton,{attrs:{state:s.state}}),t("el-button",{attrs:{type:"primary",loading:s.state.searching,disabled:s.state.searching},on:{click:()=>s.state.doSearch()}},[e._v("查 询")]),t("el-button",{on:{click:()=>s.state.reset(e.resetAutoSearch)}},[e._v("重 置")])],1)],1)],1)},he=[],de=L(ce,ue,he,!1,null,null);const fe=de.exports;var pe=Object.defineProperty,ve=(r,e,t)=>e in r?pe(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,_e=(r,e,t)=>ve(r,e+"",t);const ge=r=>c.isEmpty(r),me=()=>!0,be=(r,e)=>{const t=r.getSearchObject();let s=!0;for(const[i,a]of Object.entries(e)){const o=t[i];s=a(o),s||(s=!1)}return()=>s},Se=(r,e,t)=>({refreshCallback:async s=>{const i=e.value.getSearchObject();try{return e.value.updateSearching(!0),await r(i,s)}finally{e.value.updateSearching(!1),e.value.updateTags()}},searchCallback:async()=>{var s;for(const i of t)await((s=i.value)==null?void 0:s.refresh())}});class T{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,i)=>{const a=i.transform?i.transform(i.value):i.value;return{...s,...c.isPlainObject(a)?a:{[i.field]:a}}},{});return new T(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}}}h.APPLY_ALWAYS=me,h.APPLY_WHEN_NOT_VALUE=ge,h.APPLY_WITH_MULTIPLE_VALUE=be,h.SearchBar=fe,h.Searches=T,h.useSearchProxy=Se,h.vModel=E,Object.defineProperty(h,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 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}
+@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;margin-top:2px}.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/SearchBarState.d.ts

@@ -13,6 +13,7 @@ export declare class SearchBarState {
     sourceSearchable: Searchable[];
     private _lastSearchObject;
     constructor(id: string, searches: Searchable[], onSearch: (params: any) => Promise<void>);
+    updateSearchTag(field: string): void;
     updateTags(): void;
     getSearchObject<T>(ext?: any): T;
     doSearch(): Promise<void>;

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

@@ -16,7 +16,7 @@ export declare class SearchTag {
     private state;
     constructor(state: SearchBarState, item: SearchItem);
     static hasValue(item: SearchItem): boolean;
-    private updateValueText;
+    updateValueText(): void;
     clean(): Promise<void>;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scvzerng/element-plus-search-vue2",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "module",
   "private": false,
   "scripts": {
@@ -19,7 +19,6 @@
     "./style": {
       "default": "./dist/style.css"
     }
-
   },
   "files": [
     "dist"
@@ -31,7 +30,6 @@
     "vue": "2.7.16"
   },
   "devDependencies": {
-    "unplugin-vue-macros": "2.14.5",
     "@prettier/plugin-oxc": "0.0.4",
     "@types/md5": "2.3.5",
     "@types/node": "22.16.5",
@@ -49,8 +47,12 @@
     "prettier": "3.6.2",
     "sass-embedded": "1.90.0",
     "typescript": "5.9.2",
+    "unplugin-vue-macros": "2.14.5",
     "vite": "5.4.19",
-    "vue-tsc": "2.1.10"
+    "vue-tsc": "2.1.10",
+    "el-select-v2": "^2.0.4",
+    "dayjs": "^1.11.18",
+    "pinyin-pro": "^3.15.1"
   },
   "publishConfig": {
     "access": "public"