fangguo-component 1.0.0 → 1.1.0

package/dist/HSelect-Bqz2yTMf.js

@@ -0,0 +1,468 @@
+import './HSelect.css';var ve = Object.defineProperty, de = Object.defineProperties;
+var fe = Object.getOwnPropertyDescriptors;
+var te = Object.getOwnPropertySymbols;
+var pe = Object.prototype.hasOwnProperty, me = Object.prototype.propertyIsEnumerable;
+var ue = (o, d, v) => d in o ? ve(o, d, { enumerable: !0, configurable: !0, writable: !0, value: v }) : o[d] = v, N = (o, d) => {
+  for (var v in d || (d = {}))
+    pe.call(d, v) && ue(o, v, d[v]);
+  if (te)
+    for (var v of te(d))
+      me.call(d, v) && ue(o, v, d[v]);
+  return o;
+}, X = (o, d) => de(o, fe(d));
+var P = (o, d, v) => new Promise((t, p) => {
+  var B = (m) => {
+    try {
+      a(v.next(m));
+    } catch (c) {
+      p(c);
+    }
+  }, U = (m) => {
+    try {
+      a(v.throw(m));
+    } catch (c) {
+      p(c);
+    }
+  }, a = (m) => m.done ? t(m.value) : Promise.resolve(m.value).then(B, U);
+  a((v = v.apply(o, d)).next());
+});
+import { defineComponent as he, useModel as ye, ref as S, watch as J, computed as q, nextTick as V, onUnmounted as we, onMounted as ge, resolveComponent as Y, openBlock as y, createBlock as R, withCtx as f, createVNode as O, unref as z, createElementBlock as b, createCommentVNode as C, toDisplayString as I, withModifiers as E, renderSlot as Z, createElementVNode as H, normalizeClass as j, normalizeStyle as ke, Fragment as oe, renderList as xe, createTextVNode as ne, withDirectives as Se, vModelText as be, mergeModels as re } from "vue";
+import { q as Oe } from "./common-BIEgCXbl.js";
+import { Check as Ce, ArrowDown as Le, CircleClose as Ne } from "@element-plus/icons-vue";
+import { _ as He } from "./LazyPopover.vue_vue_type_script_setup_true_lang-DcOrcH0T.js";
+import { DynamicScroller as $e, DynamicScrollerItem as De } from "vue-virtual-scroller";
+import { i as ze } from "./isEqual-qYQTJBU6.js";
+import { _ as Ie } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Ke = {
+  key: 0,
+  class: "select-more-normal-value"
+}, Te = { class: "max-w-[64px] overflow-hidden text-ellipsis" }, Ve = { class: "max-h-[280px] overflow-y-auto" }, je = {
+  key: 1,
+  class: "select-more-normal-placeholder cursor-default"
+}, Be = ["placeholder"], Pe = {
+  key: 2,
+  class: "select-more-normal-placeholder cursor-default"
+}, Ee = {
+  key: 0,
+  class: "text-center leading-[30px] text-[#999] text-[12px]"
+}, Me = {
+  key: 0,
+  class: "text-[12px] text-center leading-[30px] text-[#999] h-[200px] flex items-center justify-center"
+}, Ae = /* @__PURE__ */ he({
+  __name: "HSelect",
+  props: /* @__PURE__ */ re({
+    api: {},
+    placeholder: { default: "请选择" },
+    multiple: { type: Boolean, default: !1 },
+    optionsKey: {},
+    props: {},
+    width: { default: 200 },
+    popwidth: { default: 200 },
+    sparamsKey: { default: {} },
+    otherParams: { default: {} },
+    stylecss: { default: "" },
+    formate: {},
+    filterable: { type: Boolean, default: !0 },
+    useInput: { type: Boolean, default: !1 },
+    lazy: { type: Boolean, default: !1 },
+    unuseremote: { type: Boolean, default: !1 },
+    options: { default: () => [] },
+    defText: {},
+    changeOrgData: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ re(["change", "clear"], ["update:modelValue"]),
+  setup(o, { expose: d, emit: v }) {
+    const t = ye(o, "modelValue"), p = v, B = /* @__PURE__ */ Symbol("HSelect"), U = {
+      pageNo: "pageNo",
+      pageSize: "pageSize",
+      total: "total",
+      text: "text"
+    }, a = o, m = S(N(N({}, U), a.sparamsKey)), c = S(!1), i = S(""), $ = S(), u = S([]), s = S([]), M = S({
+      [m.value.pageNo]: 1,
+      [m.value.pageSize]: 20
+    }), _ = S(0), ie = S(), G = Oe(() => {
+      a.filterable && x(!0, i.value);
+    });
+    J(
+      () => a.otherParams,
+      (l, e) => {
+        ze(l, e) || x(!0, i.value);
+      }
+    );
+    let ee = null;
+    const k = S("loaded"), x = (l = !1, e = "") => P(null, null, function* () {
+      if (a.unuseremote) {
+        s.value = a.options.filter(
+          (r) => {
+            var D;
+            return (r[T.value] || "").toLocaleLowerCase().includes(i.value.toLocaleLowerCase()) || ((D = r.searchKey || "") == null ? void 0 : D.toLocaleLowerCase().includes(i.value.toLocaleLowerCase()));
+          }
+        );
+        return;
+      }
+      if (l && (M.value[m.value.pageNo] = 1, k.value = "loaded"), e && (i.value = e), k.value !== "loaded")
+        return;
+      k.value = "loading";
+      const n = a.filterable ? N(X(N({}, M.value), { [m.value.text]: i.value }), a.otherParams) : N(N({}, M.value), a.otherParams);
+      ee = JSON.stringify(n);
+      try {
+        let r = yield a.api(n);
+        if (ee !== JSON.stringify(n))
+          return;
+        if (a.changeOrgData && (r = a.changeOrgData(r)), s.value = l ? r.data.list : s.value.concat(r.data.list), _.value = r.data[m.value.total], M.value[m.value.pageNo]++, c.value || A(), _.value <= s.value.length ? k.value = "isloadall" : k.value = "loaded", e) {
+          const D = s.value.find((w) => w[T.value] === i.value);
+          return D || x(l), D;
+        }
+      } catch (r) {
+        k.value = "isloadall", s.value = [];
+      }
+    }), se = (l) => {
+      if (!a.unuseremote)
+        try {
+          let e = null;
+          const n = l.target.children;
+          for (let r = 0; r < n.length; r++)
+            n[r].className === "vue-recycle-scroller__item-wrapper" && (e = n[r]);
+          if (!e)
+            return;
+          e.offsetHeight - l.target.scrollTop < 300 && k.value === "loaded" && x();
+        } catch (e) {
+        }
+    }, L = q(() => !t.value || a.multiple ? "" : u.value && !Array.isArray(u.value) ? a.formate ? a.formate(u.value) : u.value[T.value] : a.defText || t.value || a.placeholder);
+    J(c, () => P(null, null, function* () {
+      var l, e;
+      if (c.value)
+        a.useInput && L.value !== a.placeholder && (i.value = L.value), yield V(), (l = $.value) == null || l.focus(), a.lazy && x(!0);
+      else {
+        if (yield V(), a.useInput && i.value)
+          if (a.multiple)
+            t.value.includes(i.value) || (t.value.push(i.value), p("change", t.value, u.value));
+          else {
+            if (t.value === i.value)
+              return;
+            t.value = i.value;
+            const n = s.value.find((r) => r[h.value] === i.value);
+            n ? u.value = n : u.value = null, yield V(), p("change", t.value, u.value);
+          }
+        (e = $.value) == null || e.blur(), i.value = "", !a.lazy && x(!0);
+      }
+    })), J(t, (l, e) => {
+      try {
+        const n = typeof l == "string" ? String(l) : JSON.stringify(l), r = typeof e == "string" ? String(e) : JSON.stringify(e);
+        if (n === r)
+          return;
+        A();
+      } catch (n) {
+        console.log(n);
+      }
+    }), J(
+      () => a.options,
+      () => {
+        a.unuseremote && (s.value = a.options, A());
+      }
+    );
+    const A = () => {
+      if (a.unuseremote) {
+        if (a.multiple) {
+          if (t.value && t.value.length) {
+            const l = [];
+            try {
+              t.value.forEach((e) => {
+                const n = s.value.find((r) => r[h.value] === e);
+                n ? l.push(n) : console.warn(`HSelect未找到初始化值${e}`);
+              });
+            } catch (e) {
+              console.log(e);
+            }
+            u.value = l;
+            return;
+          }
+          u.value = [];
+        } else {
+          if (i.value = "", t.value) {
+            try {
+              const l = s.value.find((e) => e[h.value] === t.value);
+              l ? u.value = l : console.warn(`HSelect未找到初始化值${t.value}`);
+            } catch (l) {
+              console.warn(l);
+            }
+            return;
+          }
+          u.value = null;
+        }
+        return;
+      }
+      if (a.multiple) {
+        if (t.value && t.value.length) {
+          const l = [];
+          try {
+            t.value.forEach((e) => {
+              const n = s.value.find((r) => r[h.value] === e);
+              n && l.push(n);
+            });
+          } catch (e) {
+            console.log(e);
+          }
+          u.value = l;
+          return;
+        }
+        u.value = [], i.value = "";
+      } else {
+        if (i.value = "", t.value || t.value === 0) {
+          const l = s.value.find((e) => e[h.value] === t.value);
+          u.value = l || null;
+          return;
+        }
+        u.value = null;
+      }
+    }, K = q(() => {
+      try {
+        return typeof u.value == "object" ? u.value.length ? u.value.map((l) => a.formate ? a.formate(l) : l[T.value]) : t.value : u.value ? a.formate ? a.formate(u.value) : u.value[T.value] : t.value || a.placeholder;
+      } catch (l) {
+        return a.multiple ? [] : "";
+      }
+    }), Q = (l) => {
+      var e;
+      try {
+        return a.multiple ? (e = t.value) == null ? void 0 : e.includes(l[h.value]) : t.value === l[h.value];
+      } catch (n) {
+        return !1;
+      }
+    }, le = (l, e) => {
+      if (t.value.splice(l, 1), a.useInput)
+        try {
+          const n = u.value.findIndex((r) => r[h.value] === e);
+          n !== -1 && u.value.splice(n, 1);
+        } catch (n) {
+          console.log(n);
+        }
+      else
+        u.value.splice(l, 1);
+      p("change", t.value, u.value);
+    }, h = q(() => a.props && a.props.value ? a.props.value : "id"), T = q(() => a.props && a.props.label ? a.props.label : "label"), ae = () => P(null, null, function* () {
+      var l, e;
+      if (!a.multiple) {
+        t.value = "", u.value = null, i.value = "", x(!0), c.value && ((l = $.value) == null || l.focus()), yield V(), p("clear"), p("change", t.value);
+        return;
+      }
+      t.value = [], u.value = [], i.value = "", x(!0), yield V(), p("clear"), p("change", t.value), (e = $.value) == null || e.focus();
+    }), ce = (l) => P(null, null, function* () {
+      var n;
+      if (!a.multiple) {
+        t.value = l[h.value], u.value = l, yield V(), c.value = !1, p("change", t.value, u.value);
+        return;
+      }
+      t.value || (t.value = []);
+      const e = t.value.findIndex((r) => r === l[h.value]);
+      e === -1 ? (t.value.push(l[h.value]), u.value.push(l), p("change", t.value, u.value)) : (t.value.splice(e, 1), u.value.splice(e, 1), p("change", t.value, u.value)), (n = $.value) == null || n.focus();
+    });
+    return d({
+      modelValue: t,
+      checkAllNodes: () => {
+        var l;
+        u.value = s.value, t.value = u.value.map((e) => e[h.value]), p("change", t.value, u.value), (l = $.value) == null || l.focus();
+      },
+      clearCheaked: ae,
+      filterHandle: G,
+      loadeMore: x,
+      checkNode: u,
+      data: s,
+      filterText: i,
+      isFocused: c
+    }), we(() => {
+      delete window.clickOutSideList[B], Object.getOwnPropertySymbols(window.clickOutSideList).length || (delete window.clickOutSideList, window.removeEventListener("click", window.clickOutSideHandle));
+    }), ge(() => {
+      !a.lazy && x(!0), a.unuseremote && (s.value = a.options), A(), window.clickOutSideList ? window.clickOutSideList[B] = c : (window.clickOutSideList = {
+        [B]: c
+      }, window.clickOutSideHandle = function() {
+        Object.getOwnPropertySymbols(window.clickOutSideList).forEach((e) => {
+          window.clickOutSideList[e].value = !1;
+        });
+      }, window.addEventListener("click", window.clickOutSideHandle));
+    }), (l, e) => {
+      const n = Y("el-tag"), r = Y("el-icon"), D = Y("el-popover");
+      return y(), R(D, {
+        visible: c.value,
+        placement: "bottom-start",
+        width: `${o.popwidth || o.width}px`
+      }, {
+        reference: f(() => {
+          var w, F;
+          return [
+            H("div", {
+              class: j(["select-more", o.stylecss]),
+              style: ke({ width: typeof o.width == "number" ? o.width + "px" : o.width }),
+              onClick: e[5] || (e[5] = E((g) => c.value = !c.value, ["stop"]))
+            }, [
+              H("div", {
+                class: j(["select-more-wrapper", { "is-focused": c.value }])
+              }, [
+                o.multiple && ((w = K.value) != null && w.length) ? (y(), b("div", Ke, [
+                  O(n, {
+                    class: "mr-[5px]",
+                    type: "info",
+                    closable: "",
+                    onClose: e[0] || (e[0] = (g) => le(0, K.value[0]))
+                  }, {
+                    default: f(() => [
+                      H("div", Te, I(K.value[0]), 1)
+                    ]),
+                    _: 1
+                  }),
+                  K.value.length > 1 ? (y(), R(He, {
+                    key: 0,
+                    width: `${o.popwidth}px`
+                  }, {
+                    reference: f(() => [
+                      O(n, { type: "info" }, {
+                        default: f(() => [
+                          ne("+ " + I(K.value.length - 1), 1)
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    default: f(() => [
+                      H("div", Ve, [
+                        (y(!0), b(oe, null, xe(K.value, (g, W) => (y(), b(oe, {
+                          key: g[h.value]
+                        }, [
+                          W !== 0 ? (y(), R(n, {
+                            key: 0,
+                            class: "mr-[5px] mt-[5px]",
+                            closable: "",
+                            onClose: (Je) => le(W, g)
+                          }, {
+                            default: f(() => [
+                              ne(I(g), 1)
+                            ]),
+                            _: 2
+                          }, 1032, ["onClose"])) : C("", !0)
+                        ], 64))), 128))
+                      ])
+                    ]),
+                    _: 1
+                  }, 8, ["width"])) : C("", !0)
+                ])) : C("", !0),
+                o.filterable ? (y(), b("div", je, [
+                  c.value ? Se((y(), b("input", {
+                    key: 0,
+                    ref_key: "input",
+                    ref: $,
+                    "onUpdate:modelValue": e[1] || (e[1] = (g) => i.value = g),
+                    class: "w-full h-[90%]",
+                    type: "text",
+                    placeholder: o.placeholder,
+                    onKeydown: e[2] || (e[2] = E(() => {
+                    }, ["stop"])),
+                    onClick: e[3] || (e[3] = E(() => {
+                    }, ["stop"])),
+                    onInput: e[4] || (e[4] = //@ts-ignore
+                    (...g) => z(G) && z(G)(...g))
+                  }, null, 40, Be)), [
+                    [be, i.value]
+                  ]) : (y(), b("div", {
+                    key: 1,
+                    class: j(["text-nowrap", { "text-[#999]": !L.value || L.value === o.placeholder }])
+                  }, I(L.value || o.placeholder), 3))
+                ])) : C("", !0),
+                !o.filterable && !o.multiple ? (y(), b("div", Pe, [
+                  H("div", {
+                    class: j(["text-nowrap", { "text-[#999]": !L.value || L.value === o.placeholder }])
+                  }, I(L.value || o.placeholder), 3)
+                ])) : C("", !0),
+                H("div", {
+                  class: j(["select-more-arrow", { "is-focused": c.value }])
+                }, [
+                  O(r, null, {
+                    default: f(() => [
+                      O(z(Le))
+                    ]),
+                    _: 1
+                  })
+                ], 2),
+                o.multiple && ((F = t.value) != null && F.length) || !o.multiple && t.value ? (y(), b("div", {
+                  key: 3,
+                  class: "select-more-clear",
+                  onClick: E(ae, ["stop"])
+                }, [
+                  O(r, null, {
+                    default: f(() => [
+                      O(z(Ne))
+                    ]),
+                    _: 1
+                  })
+                ])) : C("", !0)
+              ], 2)
+            ], 6)
+          ];
+        }),
+        default: f(() => [
+          O(z($e), {
+            ref_key: "DynamicScrollerRef",
+            ref: ie,
+            class: "content-list",
+            style: { height: "200px" },
+            keyField: o.optionsKey || h.value,
+            "min-item-size": 40,
+            items: s.value,
+            onScroll: se
+          }, {
+            before: f(() => [
+              Z(l.$slots, "header", {
+                options: s.value,
+                value: t.value,
+                nodes: u.value
+              }, void 0, !0)
+            ]),
+            default: f(({ item: w, index: F, active: g }) => [
+              O(z(De), {
+                item: w,
+                active: g,
+                "data-index": F,
+                onClick: E((W) => ce(w), ["stop"])
+              }, {
+                default: f(() => [
+                  Z(l.$slots, "default", {
+                    item: X(N({}, w), { active: Q(w) })
+                  }, () => [
+                    H("div", {
+                      class: j(["item", { active: Q(w) }])
+                    }, [
+                      H("div", null, I(o.formate ? o.formate(w) : w[T.value]), 1),
+                      Q(w) ? (y(), R(r, { key: 0 }, {
+                        default: f(() => [
+                          O(z(Ce))
+                        ]),
+                        _: 1
+                      })) : C("", !0)
+                    ], 2)
+                  ], !0)
+                ]),
+                _: 2
+              }, 1032, ["item", "active", "data-index", "onClick"])
+            ]),
+            after: f(() => [
+              k.value !== "isloadall" && !a.unuseremote ? (y(), b("div", Ee, I(k.value === "loading" ? "加载中" : "等待加载"), 1)) : C("", !0)
+            ]),
+            empty: f(() => [
+              (k.value === "isloadall" || o.unuseremote) && !s.value.length ? (y(), b("div", Me, " 暂无可用数据 ")) : C("", !0)
+            ]),
+            _: 3
+          }, 8, ["keyField", "items"]),
+          Z(l.$slots, "footer", {
+            options: s.value,
+            value: t.value,
+            nodes: u.value
+          }, void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["visible", "width"]);
+    };
+  }
+}), Ze = /* @__PURE__ */ Ie(Ae, [["__scopeId", "data-v-374d3fe2"]]);
+export {
+  Ze as H
+};

package/dist/HSelect.css

@@ -0,0 +1 @@
+.select-more[data-v-374d3fe2]{width:100%}.select-more .select-more-wrapper[data-v-374d3fe2]{position:relative;display:flex;align-items:center;padding:0 4px;width:100%;min-height:30px;border:1px solid #dcdfe6;border-radius:4px}.select-more .select-more-wrapper.is-focused[data-v-374d3fe2]{border-color:#4485f5}.select-more .select-more-wrapper .select-more-normal-placeholder[data-v-374d3fe2]{overflow:hidden;margin-right:22px;margin-left:4px;line-height:30px;flex:1}.select-more .select-more-wrapper .select-more-normal-placeholder input[data-v-374d3fe2]:focus-visible{outline:none}.select-more .select-more-wrapper .select-more-normal-placeholder div[data-v-374d3fe2]{line-height:30px}.select-more .select-more-wrapper .select-more-normal-value[data-v-374d3fe2]{display:flex}.select-more .select-more-wrapper .select-more-arrow[data-v-374d3fe2]{position:absolute;top:8px;right:10px;z-index:1;color:#a8abb2;transition:all .3s;transform:rotateX(0)}.select-more .select-more-wrapper .select-more-arrow.is-focused[data-v-374d3fe2]{transform:rotate(-180deg)}.select-more .select-more-wrapper:hover .select-more-clear[data-v-374d3fe2]{display:block}.select-more .select-more-wrapper .select-more-clear[data-v-374d3fe2]{position:absolute;top:8px;right:10px;z-index:2;display:none;color:#a8abb2;background:#fff;transition:all .3s;cursor:pointer;transform:rotateX(0)}.content-list[data-v-374d3fe2]{margin:-12px}.content-list .item[data-v-374d3fe2]{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;cursor:pointer}.content-list .item.active[data-v-374d3fe2]{color:#4485f5}.content-list .item[data-v-374d3fe2]:hover{background-color:#f5f7fa}[data-v-374d3fe2] .vue-recycle-scroller__slot{position:sticky;top:0;z-index:10}

package/dist/HSelectAll.vue_vue_type_script_setup_true_lang-C8i6LF_k.js

@@ -0,0 +1,36 @@
+import { defineComponent as u, useSlots as p, ref as o, openBlock as h, createBlock as v, createSlots as _, withCtx as s, createElementVNode as c, renderSlot as a, toDisplayString as k, renderList as m, unref as S, normalizeProps as H, guardReactiveProps as x } from "vue";
+import { H as A } from "./HSelect-Bqz2yTMf.js";
+const C = { class: "px-[10px] py-[10px] bg-[#fff] border-b cursor-pointer" }, N = /* @__PURE__ */ u({
+  __name: "HSelectAll",
+  setup(b) {
+    const n = Object.keys(p()), r = o(), e = o(!1), d = () => {
+      e.value = !e.value, e.value ? r.value.checkAllNodes() : r.value.clearCheaked();
+    }, f = () => {
+      e.value = !1;
+    };
+    return (t, g) => (h(), v(A, {
+      ref_key: "HSelectRef",
+      ref: r,
+      onClear: f
+    }, _({
+      header: s(() => [
+        c("div", { onClick: d }, [
+          a(t.$slots, "header", { checkAll: e.value }, () => [
+            c("div", C, k(e.value ? "全部取消" : "全选当前"), 1)
+          ])
+        ])
+      ]),
+      _: 2
+    }, [
+      m(S(n).filter((l) => !["header"].includes(l)), (l, y) => ({
+        name: l,
+        fn: s((i) => [
+          a(t.$slots, l, H(x(i)))
+        ])
+      }))
+    ]), 1536));
+  }
+});
+export {
+  N as _
+};