fangguo-component 1.0.0 → 1.1.0

package/dist/HSelectSJ-BieRp2gG.js

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

package/dist/HSelectSJ.css

@@ -0,0 +1 @@
+.select-more[data-v-dd0d6f50]{width:100%;position:relative}.select-more .disabled-wrap[data-v-dd0d6f50]{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:rgba(0,0,0,.3);z-index:99}.select-more .select-more-wrapper[data-v-dd0d6f50]{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-dd0d6f50]{border-color:#4485f5}.select-more .select-more-wrapper .select-more-normal-placeholder[data-v-dd0d6f50]{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-dd0d6f50]:focus-visible{outline:none}.select-more .select-more-wrapper .select-more-normal-placeholder div[data-v-dd0d6f50]{line-height:30px}.select-more .select-more-wrapper .select-more-normal-value[data-v-dd0d6f50]{display:flex}.select-more .select-more-wrapper .select-more-arrow[data-v-dd0d6f50]{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-dd0d6f50]{transform:rotate(-180deg)}.select-more .select-more-wrapper:hover .select-more-clear[data-v-dd0d6f50]{display:block}.select-more .select-more-wrapper .select-more-clear[data-v-dd0d6f50]{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-dd0d6f50]{margin:-12px}.content-list .item[data-v-dd0d6f50]{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;cursor:pointer}.content-list .item.active[data-v-dd0d6f50]{color:#4485f5}.content-list .item[data-v-dd0d6f50]:hover{background-color:#f5f7fa}[data-v-dd0d6f50] .vue-recycle-scroller__slot{position:sticky;top:0;z-index:10}