@scvzerng/element-plus-search-vue2 0.0.1

package/dist/ElementPlusSearch.es.js

@@ -0,0 +1,577 @@
+import { keyBy as K, isNumber as I, isBoolean as M, isEmpty as z, chain as P, sum as U, isPlainObject as G } from "lodash-unified";
+import { defineComponent as L, ref as y, resolveComponent as g, createElementBlock as C, openBlock as m, createVNode as a, createElementVNode as _, withCtx as c, unref as u, Fragment as D, renderList as B, createBlock as S, createTextVNode as k, toDisplayString as N, reactive as j, shallowRef as W, isRef as X, computed as $, normalizeStyle as J, normalizeClass as Q, withDirectives as Y, vShow as Z, createCommentVNode as E } from "vue";
+import { ArrowLeft as ee, ArrowRight as te, ArrowDown as se, ArrowUp as re } from "@element-plus/icons-vue";
+import { Setting as ie } from "@scvzerng/icons";
+const ne = { class: "tags-scroll-container" }, le = ["innerHTML"], oe = /* @__PURE__ */ L({
+  name: "SearchTags",
+  __name: "SearchTagsRender",
+  props: {
+    tags: {}
+  },
+  setup(s) {
+    const e = y(), t = () => {
+      e.value.scrollBy({ left: -200, behavior: "smooth" });
+    }, r = () => {
+      e.value.scrollBy({
+        left: 200,
+        behavior: "smooth"
+      });
+    };
+    return (i, n) => {
+      const v = g("el-icon"), h = g("el-tag");
+      return m(), C("div", ne, [
+        a(h, {
+          type: "info",
+          class: "scroll-left-bar",
+          onClick: t
+        }, {
+          default: c(() => [
+            a(v, null, {
+              default: c(() => [
+                a(u(ee))
+              ]),
+              _: 1
+            }),
+            n[0] || (n[0] = _("i", { class: "el-icon-arrow-left" }, null, -1))
+          ]),
+          _: 1
+        }),
+        _("div", {
+          ref_key: "scrollContainer",
+          ref: e,
+          class: "search-tags"
+        }, [
+          (m(!0), C(D, null, B(s.tags, (p) => (m(), S(h, {
+            class: "search-tag",
+            onClose: () => p.clean(),
+            closable: !p.required,
+            type: p.required ? "primary" : "info",
+            key: p.field
+          }, {
+            default: c(() => [
+              _("span", null, N(p.label), 1),
+              n[1] || (n[1] = k("： ", -1)),
+              _("span", {
+                innerHTML: p.valueText
+              }, null, 8, le)
+            ]),
+            _: 2
+          }, 1032, ["onClose", "closable", "type"]))), 128))
+        ], 512),
+        a(h, {
+          type: "info",
+          class: "scroll-right-bar",
+          onClick: r
+        }, {
+          default: c(() => [
+            a(v, null, {
+              default: c(() => [
+                a(u(te))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+}), H = 6;
+class ae {
+  field;
+  label;
+  value;
+  required;
+  index;
+  visible;
+  span;
+  initValue;
+  tagFilter;
+  render;
+  transform;
+  constructor(e, t) {
+    this.field = e.field, this.label = e.label, this.value = e.initValue, this.required = e.required, this.initValue = e.initValue, this.index = t, this.visible = e.visible ?? !0, this.span = e.span ?? H, this.render = e.render, this.tagFilter = e.tagFilter, this.transform = e.transform;
+  }
+  clean() {
+    Array.isArray(this.value) ? this.value = [] : this.value = void 0;
+  }
+  reset() {
+    this.value = this.initValue;
+  }
+}
+class w {
+  field;
+  span;
+  index;
+  visible;
+  constructor(e, t, r, i) {
+    this.field = e, this.span = t, this.index = r, this.visible = i;
+  }
+  static fromSearchItem(e, t) {
+    return new w(
+      e.field,
+      e.span,
+      t ?? e.index,
+      e.visible
+    );
+  }
+  static formSearchConfig(e, t) {
+    return new w(
+      e.field,
+      e.span ?? H,
+      t ?? e,
+      e.visible ?? !0
+    );
+  }
+  static fromString(e) {
+    const [t, r, i, n] = e.split("_");
+    return new w(r, Number(i), Number(t), !!n);
+  }
+  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 V = (s) => `searches_layouts_${s}`;
+class ce {
+  id;
+  state;
+  itemLayouts;
+  initialLayouts;
+  constructor(e, t) {
+    this.id = e.id, this.initialLayouts = t, this.state = e, this.itemLayouts = K(e.items.map(w.fromSearchItem), (r) => r.field), this.restoreCachedLayouts();
+  }
+  /**
+   * 恢复自缓存中的布局信息
+   * @private
+   */
+  restoreCachedLayouts() {
+    const e = localStorage.getItem(V(this.id));
+    e && e.split(",").forEach((t) => {
+      const r = w.fromString(t), i = this.itemLayouts[r.field];
+      i && i.merge(r);
+    });
+  }
+  sync(e, t) {
+    if (e.length !== Object.keys(this.itemLayouts).length)
+      throw new Error("同步布局字段数量不一致");
+    e.forEach((r, i) => {
+      const n = this.itemLayouts[r];
+      n.index = i, n.visible = t.has(r);
+    });
+  }
+  persistent() {
+    localStorage.setItem(
+      V(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);
+    });
+  }
+}
+const ue = [
+  {
+    isApply(s) {
+      return s.contains("el-radio-group");
+    },
+    getText(s) {
+      return s.querySelector(".is-active")?.querySelector("input")?.value;
+    }
+  },
+  {
+    isApply(s) {
+      return s.contains("el-checkbox-group");
+    },
+    getText(s) {
+      const e = Array.from(s.querySelectorAll(".el-checkbox__input.is-checked") ?? []).map((t) => t.querySelector("input")?.value).filter((t) => t);
+      return e.length === 1 ? e[0] : `${e[0]} 等${e.length}条`;
+    }
+  },
+  {
+    isApply(s) {
+      return s.contains("el-input");
+    },
+    getText(s, e) {
+      return e.value;
+    }
+  },
+  {
+    isApply(s) {
+      return s.contains("el-input-number");
+    },
+    getText(s, e) {
+      return e.value;
+    }
+  },
+  {
+    isApply(s) {
+      return s.contains("el-select");
+    },
+    getText(s, e) {
+      const t = s.querySelectorAll(".el-select__tags-text");
+      return t.length > 0 ? e.value.length > 1 ? `${t[0].textContent} 等${e.value.length}条` : t[0].textContent : s.querySelector(".el-select__placeholder")?.innerHTML;
+    }
+  },
+  {
+    isApply(s) {
+      return s.contains("el-cascader");
+    },
+    getText(s) {
+      return s.querySelector("input")?.value;
+    }
+  },
+  {
+    isApply(s) {
+      return s.contains("el-switch");
+    },
+    getText(s) {
+      return s.querySelector(".is-active").innerHTML;
+    }
+  },
+  {
+    isApply(s) {
+      return s.contains("el-slider");
+    },
+    getText(s, e) {
+      return e.value;
+    }
+  },
+  {
+    isApply(s) {
+      return s.contains("el-date-editor");
+    },
+    getText(s, e) {
+      return e.value ? e.value.join(" ~ ") : e.value;
+    }
+  }
+];
+class R {
+  id;
+  field;
+  value;
+  label;
+  valueText;
+  required;
+  item;
+  state;
+  constructor(e, t) {
+    this.id = `#${e.id}-${t.field}`, this.state = e, this.field = t.field, this.value = t.value, this.label = t.label, this.item = t, this.required = t.required ?? !1, this.updateValueText();
+  }
+  static hasValue(e) {
+    return I(e.value) || M(e.value) ? !0 : !z(e.value);
+  }
+  updateValueText() {
+    const e = document.querySelector(this.id);
+    if (e.children.length !== 1)
+      throw new Error("holder children length is not 1");
+    const t = e.children[0], r = ue.find((i) => i.isApply(t.classList));
+    r && (this.valueText = r.getText(t, this));
+  }
+  async clean() {
+    this.item.clean(), await this.state.doSearch();
+  }
+}
+class de {
+  constructor(e, t, r) {
+    this.id = e, this.id = e, this.items = t.map((i, n) => new ae(i, n)), this.config = j(
+      new ce(
+        this,
+        t.map((i, n) => w.formSearchConfig(i, n))
+      )
+    ), this.sourceSearchable = t, this.searching = !1, this.searchCallback = r, this.tags = [];
+  }
+  items;
+  config;
+  searching;
+  tags;
+  searchCallback;
+  sourceSearchable;
+  updateTags() {
+    this.tags = this.items.filter((e) => e.tagFilter ? e.tagFilter(e.value) : R.hasValue(e)).map((e) => new R(this, e)).sort(
+      (e, t) => this.config.itemLayouts[e.field].index - this.config.itemLayouts[t.field].index
+    );
+  }
+  getSearchObject(e) {
+    return q.from(this.items).toCondition(e);
+  }
+  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 he = ({ search: s }) => s.render(s), fe = () => {
+  const s = W(), e = y(), t = y([]), r = y(!1), i = y(), n = y([]), v = y(300), h = (o) => {
+    s.value = o, t.value = [
+      {
+        label: "全部",
+        id: "all",
+        children: s.value.items.sort(
+          (f, d) => o.config.itemLayouts[f.field].index - o.config.itemLayouts[d.field].index
+        ).map((f) => ({
+          label: f.label,
+          id: f.field
+        }))
+      }
+    ], i.value = P(o.config.itemLayouts).pickBy((f) => f.visible).keys().value();
+  };
+  return {
+    treeRef: e,
+    visible: r,
+    snapshot: t,
+    defaultCheckedKeys: i,
+    drawerWidth: v,
+    updateSnapshot: h,
+    show: (o) => {
+      h(o), r.value = !0;
+    },
+    save: () => {
+      s.value.config.sync(
+        t.value[0].children.map((o) => o.id),
+        new Set(e.value.getCheckedKeys())
+      ), s.value.config.persistent();
+    },
+    reset: () => {
+      s.value.config.reset(), h(s.value);
+    },
+    keepSelection: () => {
+      n.value = e.value.getCheckedKeys();
+    },
+    restoreSelection: () => {
+      e.value.setCheckedKeys(n.value), n.value = [];
+    },
+    allowDrop: (o, f, d) => d !== "inner"
+  };
+}, pe = /* @__PURE__ */ L({
+  __name: "SearchSettingsDrawer",
+  setup(s, { expose: e }) {
+    const {
+      treeRef: t,
+      visible: r,
+      snapshot: i,
+      drawerWidth: n,
+      defaultCheckedKeys: v,
+      show: h,
+      allowDrop: p,
+      keepSelection: T,
+      restoreSelection: b,
+      save: l,
+      reset: x
+    } = fe();
+    return e({
+      show: h
+    }), (A, o) => {
+      const f = g("el-tree"), d = g("el-button"), O = g("el-drawer");
+      return m(), S(O, {
+        class: "search-setting",
+        size: u(n),
+        title: "搜索项配置",
+        modelValue: u(r),
+        "onUpdate:modelValue": o[0] || (o[0] = (F) => X(r) ? r.value = F : null)
+      }, {
+        footer: c(() => [
+          a(d, { onClick: u(x) }, {
+            default: c(() => [...o[1] || (o[1] = [
+              k("重置", -1)
+            ])]),
+            _: 1
+          }, 8, ["onClick"]),
+          a(d, {
+            type: "primary",
+            onClick: u(l)
+          }, {
+            default: c(() => [...o[2] || (o[2] = [
+              k("保存", -1)
+            ])]),
+            _: 1
+          }, 8, ["onClick"])
+        ]),
+        default: c(() => [
+          a(f, {
+            class: "tree",
+            "default-expand-all": "",
+            "default-checked-keys": u(v),
+            "node-key": "id",
+            ref_key: "treeRef",
+            ref: t,
+            draggable: "",
+            "show-checkbox": "",
+            data: u(i),
+            onNodeDragStart: u(T),
+            onNodeDragEnd: u(b),
+            "allow-drop": u(p)
+          }, null, 8, ["default-checked-keys", "data", "onNodeDragStart", "onNodeDragEnd", "allow-drop"])
+        ]),
+        _: 1
+      }, 8, ["size", "modelValue"]);
+    };
+  }
+}), me = /* @__PURE__ */ L({
+  __name: "SettingButton",
+  props: {
+    state: {}
+  },
+  setup(s) {
+    const e = s, t = y(), r = () => {
+      t.value.show(e.state);
+    };
+    return (i, n) => {
+      const v = g("el-icon"), h = g("el-button");
+      return m(), S(h, {
+        class: "icon-button",
+        onClick: r
+      }, {
+        default: c(() => [
+          a(v, null, {
+            default: c(() => [
+              a(u(ie))
+            ]),
+            _: 1
+          }),
+          a(pe, {
+            ref_key: "searchSettingDialogRef",
+            ref: t
+          }, null, 512)
+        ]),
+        _: 1
+      });
+    };
+  }
+}), ge = { class: "search-bar-container" }, ve = { class: "search-item" }, ye = { class: "search-item-title" }, _e = ["id"], Se = { class: "search-bottom" }, be = { class: "actions" }, Le = /* @__PURE__ */ L({
+  __name: "SearchBar",
+  props: {
+    searches: {},
+    id: {},
+    onSearch: {},
+    defaultSpan: { default: 6 },
+    maxRows: { default: 2 },
+    itemHeight: { default: 67 },
+    resetAutoSearch: { type: Boolean, default: !0 }
+  },
+  setup(s, { expose: e }) {
+    const t = s, r = j(new de(t.id, t.searches, t.onSearch)), i = y(!1), n = $(() => U(Array.from(Object.values(r.config.itemLayouts)).map((l) => l.span)) / 24 > t.maxRows), v = $(() => [...r.items].sort((l, x) => r.config.itemLayouts[l.field].index - r.config.itemLayouts[x.field].index).filter((l) => r.config.itemLayouts[l.field].visible)), h = $(() => ({
+      height: `${t.itemHeight * t.maxRows}px`,
+      overflow: "hidden"
+    })), p = (b) => r.config.itemLayouts[b.field];
+    return e({
+      getSearchItems: () => r.items
+    }), (b, l) => {
+      const x = g("el-col"), A = g("el-row"), o = g("el-icon"), f = g("el-button");
+      return m(), C("div", ge, [
+        a(A, {
+          class: Q("search"),
+          style: J(n.value && !i.value ? h.value : {}),
+          gutter: 16
+        }, {
+          default: c(() => [
+            (m(!0), C(D, null, B(v.value, (d) => Y((m(), S(x, {
+              span: p(d).span,
+              key: d.field
+            }, {
+              default: c(() => [
+                _("div", ve, [
+                  _("div", ye, N(d.label), 1),
+                  _("div", {
+                    id: `${s.id}-${d.field}`,
+                    class: "search-item-content"
+                  }, [
+                    a(u(he), { search: d }, null, 8, ["search"])
+                  ], 8, _e)
+                ])
+              ]),
+              _: 2
+            }, 1032, ["span"])), [
+              [Z, p(d).visible]
+            ])), 128))
+          ]),
+          _: 1
+        }, 8, ["style"]),
+        _("div", Se, [
+          r.tags.length > 0 ? (m(), S(oe, {
+            key: 0,
+            tags: r.tags
+          }, null, 8, ["tags"])) : E("", !0),
+          _("div", be, [
+            n.value ? (m(), S(f, {
+              key: 0,
+              class: "icon-button",
+              onClick: l[0] || (l[0] = (d) => i.value = !i.value)
+            }, {
+              default: c(() => [
+                a(o, null, {
+                  default: c(() => [
+                    i.value ? (m(), S(u(re), { key: 1 })) : (m(), S(u(se), { key: 0 }))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })) : E("", !0),
+            a(me, { state: r }, null, 8, ["state"]),
+            a(f, {
+              onClick: l[1] || (l[1] = () => r.reset(s.resetAutoSearch))
+            }, {
+              default: c(() => [...l[3] || (l[3] = [
+                k("重 置", -1)
+              ])]),
+              _: 1
+            }),
+            a(f, {
+              type: "primary",
+              loading: r.searching,
+              disabled: r.searching,
+              onClick: l[2] || (l[2] = () => r.doSearch())
+            }, {
+              default: c(() => [...l[4] || (l[4] = [
+                k("搜 索", -1)
+              ])]),
+              _: 1
+            }, 8, ["loading", "disabled"])
+          ])
+        ])
+      ]);
+    };
+  }
+});
+class q {
+  record;
+  constructor(e) {
+    this.record = e;
+  }
+  static from(e) {
+    const t = e.filter((r) => r.value === void 0 ? !1 : Array.isArray(r.value) ? r.value.length > 0 : !0).reduce(
+      (r, i) => {
+        const n = i.transform ? i.transform(i.value) : i.value;
+        return {
+          ...r,
+          ...G(n) ? n : { [i.field]: n }
+        };
+      },
+      {}
+    );
+    return new q(t);
+  }
+  transform(e, t) {
+    const r = this.record[e], i = t(r);
+    return delete this.record[e], this.record = { ...this.record, ...i }, this;
+  }
+  toCondition(e) {
+    return { ...this.record, ...e };
+  }
+}
+export {
+  Le as SearchBar,
+  q as Searches
+};

package/dist/ElementPlusSearch.umd.js

@@ -0,0 +1 @@
+(function(f,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("lodash-unified"),require("vue"),require("@element-plus/icons-vue"),require("@scvzerng/icons")):typeof define=="function"&&define.amd?define(["exports","lodash-unified","vue","@element-plus/icons-vue","@scvzerng/icons"],p):(f=typeof globalThis<"u"?globalThis:f||self,p(f.ElementPlusSearch={},f.lodashUnified,f.vue,f.iconsVue,f.icons))})(this,(function(f,p,e,S,N){"use strict";const T={class:"tags-scroll-container"},L=["innerHTML"],B=e.defineComponent({name:"SearchTags",__name:"SearchTagsRender",props:{tags:{}},setup(n){const t=e.ref(),r=()=>{t.value.scrollBy({left:-200,behavior:"smooth"})},o=()=>{t.value.scrollBy({left:200,behavior:"smooth"})};return(s,i)=>{const m=e.resolveComponent("el-icon"),d=e.resolveComponent("el-tag");return e.openBlock(),e.createElementBlock("div",T,[e.createVNode(d,{type:"info",class:"scroll-left-bar",onClick:r},{default:e.withCtx(()=>[e.createVNode(m,null,{default:e.withCtx(()=>[e.createVNode(e.unref(S.ArrowLeft))]),_:1}),i[0]||(i[0]=e.createElementVNode("i",{class:"el-icon-arrow-left"},null,-1))]),_:1}),e.createElementVNode("div",{ref_key:"scrollContainer",ref:t,class:"search-tags"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.tags,u=>(e.openBlock(),e.createBlock(d,{class:"search-tag",onClose:()=>u.clean(),closable:!u.required,type:u.required?"primary":"info",key:u.field},{default:e.withCtx(()=>[e.createElementVNode("span",null,e.toDisplayString(u.label),1),i[1]||(i[1]=e.createTextVNode("： ",-1)),e.createElementVNode("span",{innerHTML:u.valueText},null,8,L)]),_:2},1032,["onClose","closable","type"]))),128))],512),e.createVNode(d,{type:"info",class:"scroll-right-bar",onClick:o},{default:e.withCtx(()=>[e.createVNode(m,null,{default:e.withCtx(()=>[e.createVNode(e.unref(S.ArrowRight))]),_:1})]),_:1})])}}}),k=6;class E{field;label;value;required;index;visible;span;initValue;tagFilter;render;transform;constructor(t,r){this.field=t.field,this.label=t.label,this.value=t.initValue,this.required=t.required,this.initValue=t.initValue,this.index=r,this.visible=t.visible??!0,this.span=t.span??k,this.render=t.render,this.tagFilter=t.tagFilter,this.transform=t.transform}clean(){Array.isArray(this.value)?this.value=[]:this.value=void 0}reset(){this.value=this.initValue}}class g{field;span;index;visible;constructor(t,r,o,s){this.field=t,this.span=r,this.index=o,this.visible=s}static fromSearchItem(t,r){return new g(t.field,t.span,r??t.index,t.visible)}static formSearchConfig(t,r){return new g(t.field,t.span??k,r??t,t.visible??!0)}static fromString(t){const[r,o,s,i]=t.split("_");return new g(o,Number(s),Number(r),!!i)}toString(){return`${this.index}_${this.field}_${this.span}_${this.visible}`}merge(t){this.span=t.span,this.index=t.index,this.visible=t.visible}}const b=n=>`searches_layouts_${n}`;class A{id;state;itemLayouts;initialLayouts;constructor(t,r){this.id=t.id,this.initialLayouts=r,this.state=t,this.itemLayouts=p.keyBy(t.items.map(g.fromSearchItem),o=>o.field),this.restoreCachedLayouts()}restoreCachedLayouts(){const t=localStorage.getItem(b(this.id));t&&t.split(",").forEach(r=>{const o=g.fromString(r),s=this.itemLayouts[o.field];s&&s.merge(o)})}sync(t,r){if(t.length!==Object.keys(this.itemLayouts).length)throw new Error("同步布局字段数量不一致");t.forEach((o,s)=>{const i=this.itemLayouts[o];i.index=s,i.visible=r.has(o)})}persistent(){localStorage.setItem(b(this.id),Object.values(this.itemLayouts).map(t=>t.toString()).join(",")),this.state.updateTags()}reset(){this.initialLayouts.forEach(t=>{const r=this.itemLayouts[t.field];r&&r.merge(t)})}}const q=[{isApply(n){return n.contains("el-radio-group")},getText(n){return n.querySelector(".is-active")?.querySelector("input")?.value}},{isApply(n){return n.contains("el-checkbox-group")},getText(n){const t=Array.from(n.querySelectorAll(".el-checkbox__input.is-checked")??[]).map(r=>r.querySelector("input")?.value).filter(r=>r);return t.length===1?t[0]:`${t[0]} 等${t.length}条`}},{isApply(n){return n.contains("el-input")},getText(n,t){return t.value}},{isApply(n){return n.contains("el-input-number")},getText(n,t){return t.value}},{isApply(n){return n.contains("el-select")},getText(n,t){const r=n.querySelectorAll(".el-select__tags-text");return r.length>0?t.value.length>1?`${r[0].textContent} 等${t.value.length}条`:r[0].textContent:n.querySelector(".el-select__placeholder")?.innerHTML}},{isApply(n){return n.contains("el-cascader")},getText(n){return n.querySelector("input")?.value}},{isApply(n){return n.contains("el-switch")},getText(n){return n.querySelector(".is-active").innerHTML}},{isApply(n){return n.contains("el-slider")},getText(n,t){return t.value}},{isApply(n){return n.contains("el-date-editor")},getText(n,t){return t.value?t.value.join(" ~ "):t.value}}];class V{id;field;value;label;valueText;required;item;state;constructor(t,r){this.id=`#${t.id}-${r.field}`,this.state=t,this.field=r.field,this.value=r.value,this.label=r.label,this.item=r,this.required=r.required??!1,this.updateValueText()}static hasValue(t){return p.isNumber(t.value)||p.isBoolean(t.value)?!0:!p.isEmpty(t.value)}updateValueText(){const t=document.querySelector(this.id);if(t.children.length!==1)throw new Error("holder children length is not 1");const r=t.children[0],o=q.find(s=>s.isApply(r.classList));o&&(this.valueText=o.getText(r,this))}async clean(){this.item.clean(),await this.state.doSearch()}}class ${constructor(t,r,o){this.id=t,this.id=t,this.items=r.map((s,i)=>new E(s,i)),this.config=e.reactive(new A(this,r.map((s,i)=>g.formSearchConfig(s,i)))),this.sourceSearchable=r,this.searching=!1,this.searchCallback=o,this.tags=[]}items;config;searching;tags;searchCallback;sourceSearchable;updateTags(){this.tags=this.items.filter(t=>t.tagFilter?t.tagFilter(t.value):V.hasValue(t)).map(t=>new V(this,t)).sort((t,r)=>this.config.itemLayouts[t.field].index-this.config.itemLayouts[r.field].index)}getSearchObject(t){return x.from(this.items).toCondition(t)}async doSearch(){if(!this.searching)try{this.searching=!0,await this.searchCallback(this.getSearchObject()),this.updateTags()}finally{this.searching=!1}}async reset(t){this.items.forEach(r=>r.reset()),t&&await this.doSearch()}}const D=({search:n})=>n.render(n),R=()=>{const n=e.shallowRef(),t=e.ref(),r=e.ref([]),o=e.ref(!1),s=e.ref(),i=e.ref([]),m=e.ref(300),d=a=>{n.value=a,r.value=[{label:"全部",id:"all",children:n.value.items.sort((h,c)=>a.config.itemLayouts[h.field].index-a.config.itemLayouts[c.field].index).map(h=>({label:h.label,id:h.field}))}],s.value=p.chain(a.config.itemLayouts).pickBy(h=>h.visible).keys().value()};return{treeRef:t,visible:o,snapshot:r,defaultCheckedKeys:s,drawerWidth:m,updateSnapshot:d,show:a=>{d(a),o.value=!0},save:()=>{n.value.config.sync(r.value[0].children.map(a=>a.id),new Set(t.value.getCheckedKeys())),n.value.config.persistent()},reset:()=>{n.value.config.reset(),d(n.value)},keepSelection:()=>{i.value=t.value.getCheckedKeys()},restoreSelection:()=>{t.value.setCheckedKeys(i.value),i.value=[]},allowDrop:(a,h,c)=>c!=="inner"}},j=e.defineComponent({__name:"SearchSettingsDrawer",setup(n,{expose:t}){const{treeRef:r,visible:o,snapshot:s,drawerWidth:i,defaultCheckedKeys:m,show:d,allowDrop:u,keepSelection:C,restoreSelection:y,save:l,reset:_}=R();return t({show:d}),(w,a)=>{const h=e.resolveComponent("el-tree"),c=e.resolveComponent("el-button"),G=e.resolveComponent("el-drawer");return e.openBlock(),e.createBlock(G,{class:"search-setting",size:e.unref(i),title:"搜索项配置",modelValue:e.unref(o),"onUpdate:modelValue":a[0]||(a[0]=W=>e.isRef(o)?o.value=W:null)},{footer:e.withCtx(()=>[e.createVNode(c,{onClick:e.unref(_)},{default:e.withCtx(()=>[...a[1]||(a[1]=[e.createTextVNode("重置",-1)])]),_:1},8,["onClick"]),e.createVNode(c,{type:"primary",onClick:e.unref(l)},{default:e.withCtx(()=>[...a[2]||(a[2]=[e.createTextVNode("保存",-1)])]),_:1},8,["onClick"])]),default:e.withCtx(()=>[e.createVNode(h,{class:"tree","default-expand-all":"","default-checked-keys":e.unref(m),"node-key":"id",ref_key:"treeRef",ref:r,draggable:"","show-checkbox":"",data:e.unref(s),onNodeDragStart:e.unref(C),onNodeDragEnd:e.unref(y),"allow-drop":e.unref(u)},null,8,["default-checked-keys","data","onNodeDragStart","onNodeDragEnd","allow-drop"])]),_:1},8,["size","modelValue"])}}}),O=e.defineComponent({__name:"SettingButton",props:{state:{}},setup(n){const t=n,r=e.ref(),o=()=>{r.value.show(t.state)};return(s,i)=>{const m=e.resolveComponent("el-icon"),d=e.resolveComponent("el-button");return e.openBlock(),e.createBlock(d,{class:"icon-button",onClick:o},{default:e.withCtx(()=>[e.createVNode(m,null,{default:e.withCtx(()=>[e.createVNode(e.unref(N.Setting))]),_:1}),e.createVNode(j,{ref_key:"searchSettingDialogRef",ref:r},null,512)]),_:1})}}}),F={class:"search-bar-container"},H={class:"search-item"},K={class:"search-item-title"},z=["id"],M={class:"search-bottom"},I={class:"actions"},P=e.defineComponent({__name:"SearchBar",props:{searches:{},id:{},onSearch:{},defaultSpan:{default:6},maxRows:{default:2},itemHeight:{default:67},resetAutoSearch:{type:Boolean,default:!0}},setup(n,{expose:t}){const r=n,o=e.reactive(new $(r.id,r.searches,r.onSearch)),s=e.ref(!1),i=e.computed(()=>p.sum(Array.from(Object.values(o.config.itemLayouts)).map(l=>l.span))/24>r.maxRows),m=e.computed(()=>[...o.items].sort((l,_)=>o.config.itemLayouts[l.field].index-o.config.itemLayouts[_.field].index).filter(l=>o.config.itemLayouts[l.field].visible)),d=e.computed(()=>({height:`${r.itemHeight*r.maxRows}px`,overflow:"hidden"})),u=y=>o.config.itemLayouts[y.field];return t({getSearchItems:()=>o.items}),(y,l)=>{const _=e.resolveComponent("el-col"),w=e.resolveComponent("el-row"),a=e.resolveComponent("el-icon"),h=e.resolveComponent("el-button");return e.openBlock(),e.createElementBlock("div",F,[e.createVNode(w,{class:e.normalizeClass("search"),style:e.normalizeStyle(i.value&&!s.value?d.value:{}),gutter:16},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value,c=>e.withDirectives((e.openBlock(),e.createBlock(_,{span:u(c).span,key:c.field},{default:e.withCtx(()=>[e.createElementVNode("div",H,[e.createElementVNode("div",K,e.toDisplayString(c.label),1),e.createElementVNode("div",{id:`${n.id}-${c.field}`,class:"search-item-content"},[e.createVNode(e.unref(D),{search:c},null,8,["search"])],8,z)])]),_:2},1032,["span"])),[[e.vShow,u(c).visible]])),128))]),_:1},8,["style"]),e.createElementVNode("div",M,[o.tags.length>0?(e.openBlock(),e.createBlock(B,{key:0,tags:o.tags},null,8,["tags"])):e.createCommentVNode("",!0),e.createElementVNode("div",I,[i.value?(e.openBlock(),e.createBlock(h,{key:0,class:"icon-button",onClick:l[0]||(l[0]=c=>s.value=!s.value)},{default:e.withCtx(()=>[e.createVNode(a,null,{default:e.withCtx(()=>[s.value?(e.openBlock(),e.createBlock(e.unref(S.ArrowUp),{key:1})):(e.openBlock(),e.createBlock(e.unref(S.ArrowDown),{key:0}))]),_:1})]),_:1})):e.createCommentVNode("",!0),e.createVNode(O,{state:o},null,8,["state"]),e.createVNode(h,{onClick:l[1]||(l[1]=()=>o.reset(n.resetAutoSearch))},{default:e.withCtx(()=>[...l[3]||(l[3]=[e.createTextVNode("重 置",-1)])]),_:1}),e.createVNode(h,{type:"primary",loading:o.searching,disabled:o.searching,onClick:l[2]||(l[2]=()=>o.doSearch())},{default:e.withCtx(()=>[...l[4]||(l[4]=[e.createTextVNode("搜 索",-1)])]),_:1},8,["loading","disabled"])])])])}}});class x{record;constructor(t){this.record=t}static from(t){const r=t.filter(o=>o.value===void 0?!1:Array.isArray(o.value)?o.value.length>0:!0).reduce((o,s)=>{const i=s.transform?s.transform(s.value):s.value;return{...o,...p.isPlainObject(i)?i:{[s.field]:i}}},{});return new x(r)}transform(t,r){const o=this.record[t],s=r(o);return delete this.record[t],this.record={...this.record,...s},this}toCondition(t){return{...this.record,...t}}}f.SearchBar=P,f.Searches=x,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));

package/dist/element-plus-search.css

@@ -0,0 +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}.search-setting .el-drawer__footer{border-top:var(--el-border);padding:10px}.search-setting .el-drawer__footer .el-button{width:90px}.search-setting .el-drawer__header{margin-bottom:unset;border-bottom:var(--el-border);padding:10px}.search-bar-container{font-size:smaller}.search-bar-container .search{width:100%}.search-bar-container .collapsed{max-height:134px;overflow:hidden}.search-bar-container,.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{display:flex;flex-direction:column}.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 .el-button{width:90px}.search-bar-container .search-bottom .actions{display:flex}.search-bar-container .search-bottom .actions .icon-button{padding:0 8px;width:34px;font-size:larger}.search-bar-container .search-bottom .actions{margin-left:auto}.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}