fangguo-component 1.1.2 → 1.1.4

package/dist/HSelect-BFkWiCFi.js

@@ -0,0 +1,671 @@
+import './HSelect.css';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { ElPopover, ElIcon, ElTag } from "element-plus/es";
+import { defineComponent, useModel, ref, watch, computed, nextTick, onUnmounted, onMounted, openBlock, createBlock, withCtx, createVNode, unref, createElementBlock, createCommentVNode, toDisplayString, withModifiers, renderSlot, createElementVNode, normalizeClass, normalizeStyle, Fragment, renderList, createTextVNode, withDirectives, vModelText, mergeModels } from "vue";
+import { q as debounce } from "./common-B1nSpTGn.js";
+import { Check, ArrowDown, CircleClose } from "@element-plus/icons-vue";
+import { _ as _sfc_main$1 } from "./LazyPopover.vue_vue_type_script_setup_true_lang-B2vtU4f4.js";
+import { s as script$1, a as script } from "./vue-virtual-scroller.esm-ZgBoGAjX.js";
+import { isEqual } from "lodash-unified";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "select-more-normal-value"
+};
+const _hoisted_2 = { class: "max-w-[64px] overflow-hidden text-ellipsis" };
+const _hoisted_3 = { class: "max-h-[280px] overflow-y-auto" };
+const _hoisted_4 = {
+  key: 1,
+  class: "select-more-normal-placeholder cursor-default"
+};
+const _hoisted_5 = ["placeholder"];
+const _hoisted_6 = {
+  key: 2,
+  class: "select-more-normal-placeholder cursor-default"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "text-center leading-[30px] text-[#999] text-[12px]"
+};
+const _hoisted_8 = {
+  key: 0,
+  class: "text-[12px] text-center leading-[30px] text-[#999] h-[200px] flex items-center justify-center"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HSelect",
+  props: /* @__PURE__ */ mergeModels({
+    api: {},
+    placeholder: { default: "请选择" },
+    multiple: { type: Boolean, default: false },
+    optionsKey: {},
+    props: {},
+    width: { default: 200 },
+    popwidth: { default: 200 },
+    sparamsKey: { default: {} },
+    otherParams: { default: {} },
+    stylecss: { default: "" },
+    formate: {},
+    filterable: { type: Boolean, default: true },
+    useInput: { type: Boolean, default: false },
+    lazy: { type: Boolean, default: false },
+    unuseremote: { type: Boolean, default: false },
+    options: { default: () => [] },
+    defText: {},
+    changeOrgData: {}
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["change", "clear"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const modelValue = useModel(__props, "modelValue");
+    const emit = __emit;
+    const key = /* @__PURE__ */ Symbol("HSelect");
+    const defParamsKey = {
+      pageNo: "pageNo",
+      pageSize: "pageSize",
+      total: "total",
+      text: "text"
+    };
+    const prop = __props;
+    const paramsKey = ref(__spreadValues(__spreadValues({}, defParamsKey), prop.sparamsKey));
+    const isFocused = ref(false);
+    const filterText = ref("");
+    const input = ref();
+    const checkNode = ref([]);
+    const data = ref([]);
+    const pageParams = ref({
+      [paramsKey.value.pageNo]: 1,
+      [paramsKey.value.pageSize]: 20
+    });
+    const dataTotal = ref(0);
+    const DynamicScrollerRef = ref();
+    const filterHandle = debounce(() => {
+      if (!prop.filterable) {
+        return;
+      }
+      loadeMore(true, filterText.value);
+    });
+    watch(
+      () => prop.otherParams,
+      (n, o) => {
+        if (isEqual(n, o)) {
+          return;
+        }
+        loadeMore(true, filterText.value);
+      }
+    );
+    let curOptions = null;
+    const loadStatus = ref("loaded");
+    const loadeMore = (reload = false, filter = "") => __async(null, null, function* () {
+      if (prop.unuseremote) {
+        data.value = prop.options.filter(
+          (item) => {
+            var _a;
+            return (item[labelKey.value] || "").toLocaleLowerCase().includes(filterText.value.toLocaleLowerCase()) || ((_a = item.searchKey || "") == null ? void 0 : _a.toLocaleLowerCase().includes(filterText.value.toLocaleLowerCase()));
+          }
+        );
+        return;
+      }
+      if (reload) {
+        pageParams.value[paramsKey.value.pageNo] = 1;
+        loadStatus.value = "loaded";
+      }
+      if (filter) {
+        filterText.value = filter;
+      }
+      if (loadStatus.value !== "loaded") {
+        return;
+      }
+      loadStatus.value = "loading";
+      const arg = prop.filterable ? __spreadValues(__spreadProps(__spreadValues({}, pageParams.value), { [paramsKey.value.text]: filterText.value }), prop.otherParams) : __spreadValues(__spreadValues({}, pageParams.value), prop.otherParams);
+      curOptions = JSON.stringify(arg);
+      try {
+        let res = yield prop.api(arg);
+        if (curOptions !== JSON.stringify(arg)) {
+          return;
+        }
+        if (prop.changeOrgData) {
+          res = prop.changeOrgData(res);
+        }
+        data.value = reload ? res.data.list : data.value.concat(res.data.list);
+        dataTotal.value = res.data[paramsKey.value.total];
+        pageParams.value[paramsKey.value.pageNo]++;
+        if (!isFocused.value) {
+          initData();
+        }
+        if (dataTotal.value <= data.value.length) {
+          loadStatus.value = "isloadall";
+        } else {
+          loadStatus.value = "loaded";
+        }
+        if (filter) {
+          const item = data.value.find((item2) => item2[labelKey.value] === filterText.value);
+          if (!item) {
+            loadeMore(reload);
+          }
+          return item;
+        }
+      } catch (error) {
+        loadStatus.value = "isloadall";
+        data.value = [];
+      }
+    });
+    const scrollHandle = (scrollEvent) => {
+      if (prop.unuseremote) {
+        return;
+      }
+      try {
+        let main = null;
+        const children = scrollEvent.target.children;
+        for (let i = 0; i < children.length; i++) {
+          if (children[i].className === "vue-recycle-scroller__item-wrapper") {
+            main = children[i];
+          }
+        }
+        if (!main) {
+          return;
+        }
+        if (main.offsetHeight - scrollEvent.target.scrollTop < 300 && loadStatus.value === "loaded") {
+          loadeMore();
+        }
+      } catch (e) {
+      }
+    };
+    const valueText = computed(() => {
+      return !modelValue.value || prop.multiple ? "" : checkNode.value && !Array.isArray(checkNode.value) ? prop.formate ? prop.formate(checkNode.value) : checkNode.value[labelKey.value] : prop.defText || modelValue.value || prop.placeholder;
+    });
+    watch(isFocused, () => __async(null, null, function* () {
+      var _a, _b;
+      if (isFocused.value) {
+        if (prop.useInput && valueText.value !== prop.placeholder) {
+          filterText.value = valueText.value;
+        }
+        yield nextTick();
+        (_a = input.value) == null ? void 0 : _a.focus();
+        prop.lazy && loadeMore(true);
+      } else {
+        yield nextTick();
+        if (prop.useInput && filterText.value) {
+          if (!prop.multiple) {
+            if (modelValue.value === filterText.value) {
+              return;
+            }
+            modelValue.value = filterText.value;
+            const _checkNode = data.value.find((item) => item[valueKey.value] === filterText.value);
+            if (_checkNode) {
+              checkNode.value = _checkNode;
+            } else {
+              checkNode.value = null;
+            }
+            yield nextTick();
+            emit("change", modelValue.value, checkNode.value);
+          } else {
+            if (!modelValue.value.includes(filterText.value)) {
+              modelValue.value.push(filterText.value);
+              emit("change", modelValue.value, checkNode.value);
+            }
+          }
+        }
+        (_b = input.value) == null ? void 0 : _b.blur();
+        filterText.value = "";
+        !prop.lazy && loadeMore(true);
+      }
+    }));
+    watch(modelValue, (newdata, olddata) => {
+      try {
+        const _newdata = typeof newdata === "string" ? String(newdata) : JSON.stringify(newdata);
+        const _olddata = typeof olddata === "string" ? String(olddata) : JSON.stringify(olddata);
+        if (_newdata === _olddata) {
+          return;
+        }
+        initData();
+      } catch (err) {
+        console.log(err);
+      }
+    });
+    watch(
+      () => prop.options,
+      () => {
+        if (!prop.unuseremote) {
+          return;
+        }
+        data.value = prop.options;
+        initData();
+      }
+    );
+    const initData = () => {
+      if (prop.unuseremote) {
+        if (prop.multiple) {
+          if (modelValue.value && modelValue.value.length) {
+            const _checkNode = [];
+            try {
+              modelValue.value.forEach((element) => {
+                const item = data.value.find((item2) => item2[valueKey.value] === element);
+                if (item) {
+                  _checkNode.push(item);
+                } else {
+                  console.warn(`HSelect未找到初始化值${element}`);
+                }
+              });
+            } catch (error) {
+              console.log(error);
+            }
+            checkNode.value = _checkNode;
+            return;
+          }
+          checkNode.value = [];
+        } else {
+          filterText.value = "";
+          if (modelValue.value) {
+            try {
+              const item = data.value.find((item2) => item2[valueKey.value] === modelValue.value);
+              if (item) {
+                checkNode.value = item;
+              } else {
+                console.warn(`HSelect未找到初始化值${modelValue.value}`);
+              }
+            } catch (error) {
+              console.warn(error);
+            }
+            return;
+          }
+          checkNode.value = null;
+        }
+        return;
+      }
+      if (prop.multiple) {
+        if (modelValue.value && modelValue.value.length) {
+          const _checkNode = [];
+          try {
+            modelValue.value.forEach((element) => {
+              const item = data.value.find((item2) => item2[valueKey.value] === element);
+              if (item) {
+                _checkNode.push(item);
+              }
+            });
+          } catch (error) {
+            console.log(error);
+          }
+          checkNode.value = _checkNode;
+          return;
+        }
+        checkNode.value = [];
+        filterText.value = "";
+      } else {
+        filterText.value = "";
+        if (modelValue.value || modelValue.value === 0) {
+          const item = data.value.find((item2) => item2[valueKey.value] === modelValue.value);
+          checkNode.value = item || null;
+          return;
+        }
+        checkNode.value = null;
+      }
+    };
+    const labelList = computed(() => {
+      try {
+        if (typeof checkNode.value === "object") {
+          return checkNode.value.length ? checkNode.value.map((item) => prop.formate ? prop.formate(item) : item[labelKey.value]) : modelValue.value;
+        }
+        return checkNode.value ? prop.formate ? prop.formate(checkNode.value) : checkNode.value[labelKey.value] : modelValue.value || prop.placeholder;
+      } catch (error) {
+        return prop.multiple ? [] : "";
+      }
+    });
+    const isCheck = (item) => {
+      var _a;
+      try {
+        if (prop.multiple) {
+          return (_a = modelValue.value) == null ? void 0 : _a.includes(item[valueKey.value]);
+        }
+        return modelValue.value === item[valueKey.value];
+      } catch (error) {
+        return false;
+      }
+    };
+    const closeHandle = (index, val) => {
+      modelValue.value.splice(index, 1);
+      if (prop.useInput) {
+        try {
+          const iIndex = checkNode.value.findIndex((node) => node[valueKey.value] === val);
+          iIndex !== -1 && checkNode.value.splice(iIndex, 1);
+        } catch (error) {
+          console.log(error);
+        }
+      } else {
+        checkNode.value.splice(index, 1);
+      }
+      emit("change", modelValue.value, checkNode.value);
+    };
+    const valueKey = computed(() => {
+      if (prop.props && prop.props.value) {
+        return prop.props.value;
+      }
+      return "id";
+    });
+    const labelKey = computed(() => {
+      if (prop.props && prop.props.label) {
+        return prop.props.label;
+      }
+      return "label";
+    });
+    const clearCheaked = () => __async(null, null, function* () {
+      var _a, _b;
+      if (!prop.multiple) {
+        modelValue.value = "";
+        checkNode.value = null;
+        filterText.value = "";
+        loadeMore(true);
+        if (isFocused.value) {
+          (_a = input.value) == null ? void 0 : _a.focus();
+        }
+        yield nextTick();
+        emit("clear");
+        emit("change", modelValue.value);
+        return;
+      }
+      modelValue.value = [];
+      checkNode.value = [];
+      filterText.value = "";
+      loadeMore(true);
+      yield nextTick();
+      emit("clear");
+      emit("change", modelValue.value);
+      (_b = input.value) == null ? void 0 : _b.focus();
+    });
+    const clickHandle = (item) => __async(null, null, function* () {
+      var _a;
+      if (!prop.multiple) {
+        modelValue.value = item[valueKey.value];
+        checkNode.value = item;
+        yield nextTick();
+        isFocused.value = false;
+        emit("change", modelValue.value, checkNode.value);
+        return;
+      }
+      if (!modelValue.value) modelValue.value = [];
+      const index = modelValue.value.findIndex((e) => e === item[valueKey.value]);
+      if (index === -1) {
+        modelValue.value.push(item[valueKey.value]);
+        checkNode.value.push(item);
+        emit("change", modelValue.value, checkNode.value);
+      } else {
+        modelValue.value.splice(index, 1);
+        checkNode.value.splice(index, 1);
+        emit("change", modelValue.value, checkNode.value);
+      }
+      (_a = input.value) == null ? void 0 : _a.focus();
+    });
+    const checkAllNodes = () => {
+      var _a;
+      checkNode.value = data.value;
+      modelValue.value = checkNode.value.map((item) => item[valueKey.value]);
+      emit("change", modelValue.value, checkNode.value);
+      (_a = input.value) == null ? void 0 : _a.focus();
+    };
+    __expose({
+      modelValue,
+      checkAllNodes,
+      clearCheaked,
+      filterHandle,
+      loadeMore,
+      checkNode,
+      data,
+      filterText,
+      isFocused
+    });
+    onUnmounted(() => {
+      delete window.clickOutSideList[key];
+      const objectSymbols = Object.getOwnPropertySymbols(window.clickOutSideList);
+      if (!objectSymbols.length) {
+        delete window.clickOutSideList;
+        window.removeEventListener("click", window.clickOutSideHandle);
+      }
+    });
+    onMounted(() => {
+      !prop.lazy && loadeMore(true);
+      if (prop.unuseremote) {
+        data.value = prop.options;
+      }
+      initData();
+      if (!window.clickOutSideList) {
+        window.clickOutSideList = {
+          [key]: isFocused
+        };
+        window.clickOutSideHandle = function() {
+          const objectSymbols = Object.getOwnPropertySymbols(window.clickOutSideList);
+          objectSymbols.forEach((i) => {
+            window.clickOutSideList[i].value = false;
+          });
+        };
+        window.addEventListener("click", window.clickOutSideHandle);
+      } else {
+        window.clickOutSideList[key] = isFocused;
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_el_tag = ElTag;
+      const _component_el_icon = ElIcon;
+      const _component_el_popover = ElPopover;
+      return openBlock(), createBlock(_component_el_popover, {
+        visible: isFocused.value,
+        placement: "bottom-start",
+        width: `${__props.popwidth || __props.width}px`
+      }, {
+        reference: withCtx(() => {
+          var _a, _b;
+          return [
+            createElementVNode("div", {
+              class: normalizeClass(["select-more", __props.stylecss]),
+              style: normalizeStyle({ width: typeof __props.width === "number" ? __props.width + "px" : __props.width }),
+              onClick: _cache[5] || (_cache[5] = withModifiers(($event) => isFocused.value = !isFocused.value, ["stop"]))
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass(["select-more-wrapper", { "is-focused": isFocused.value }])
+              }, [
+                __props.multiple && ((_a = labelList.value) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                  createVNode(_component_el_tag, {
+                    class: "mr-[5px]",
+                    type: "info",
+                    closable: "",
+                    onClose: _cache[0] || (_cache[0] = ($event) => closeHandle(0, labelList.value[0]))
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", _hoisted_2, toDisplayString(labelList.value[0]), 1)
+                    ]),
+                    _: 1
+                  }),
+                  labelList.value.length > 1 ? (openBlock(), createBlock(_sfc_main$1, {
+                    key: 0,
+                    width: `${__props.popwidth}px`
+                  }, {
+                    reference: withCtx(() => [
+                      createVNode(_component_el_tag, { type: "info" }, {
+                        default: withCtx(() => [
+                          createTextVNode("+ " + toDisplayString(labelList.value.length - 1), 1)
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    default: withCtx(() => [
+                      createElementVNode("div", _hoisted_3, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(labelList.value, (tag, index) => {
+                          return openBlock(), createElementBlock(Fragment, {
+                            key: tag[valueKey.value]
+                          }, [
+                            index !== 0 ? (openBlock(), createBlock(_component_el_tag, {
+                              key: 0,
+                              class: "mr-[5px] mt-[5px]",
+                              closable: "",
+                              onClose: ($event) => closeHandle(index, tag)
+                            }, {
+                              default: withCtx(() => [
+                                createTextVNode(toDisplayString(tag), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["onClose"])) : createCommentVNode("", true)
+                          ], 64);
+                        }), 128))
+                      ])
+                    ]),
+                    _: 1
+                  }, 8, ["width"])) : createCommentVNode("", true)
+                ])) : createCommentVNode("", true),
+                __props.filterable ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                  isFocused.value ? withDirectives((openBlock(), createElementBlock("input", {
+                    key: 0,
+                    ref_key: "input",
+                    ref: input,
+                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => filterText.value = $event),
+                    class: "w-full h-[90%]",
+                    type: "text",
+                    placeholder: __props.placeholder,
+                    onKeydown: _cache[2] || (_cache[2] = withModifiers(() => {
+                    }, ["stop"])),
+                    onClick: _cache[3] || (_cache[3] = withModifiers(() => {
+                    }, ["stop"])),
+                    onInput: _cache[4] || (_cache[4] = //@ts-ignore
+                    (...args) => unref(filterHandle) && unref(filterHandle)(...args))
+                  }, null, 40, _hoisted_5)), [
+                    [vModelText, filterText.value]
+                  ]) : (openBlock(), createElementBlock("div", {
+                    key: 1,
+                    class: normalizeClass(["text-nowrap", { "text-[#999]": !valueText.value || valueText.value === __props.placeholder }])
+                  }, toDisplayString(valueText.value || __props.placeholder), 3))
+                ])) : createCommentVNode("", true),
+                !__props.filterable && !__props.multiple ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                  createElementVNode("div", {
+                    class: normalizeClass(["text-nowrap", { "text-[#999]": !valueText.value || valueText.value === __props.placeholder }])
+                  }, toDisplayString(valueText.value || __props.placeholder), 3)
+                ])) : createCommentVNode("", true),
+                createElementVNode("div", {
+                  class: normalizeClass(["select-more-arrow", { "is-focused": isFocused.value }])
+                }, [
+                  createVNode(_component_el_icon, null, {
+                    default: withCtx(() => [
+                      createVNode(unref(ArrowDown))
+                    ]),
+                    _: 1
+                  })
+                ], 2),
+                __props.multiple && ((_b = modelValue.value) == null ? void 0 : _b.length) || !__props.multiple && modelValue.value ? (openBlock(), createElementBlock("div", {
+                  key: 3,
+                  class: "select-more-clear",
+                  onClick: withModifiers(clearCheaked, ["stop"])
+                }, [
+                  createVNode(_component_el_icon, null, {
+                    default: withCtx(() => [
+                      createVNode(unref(CircleClose))
+                    ]),
+                    _: 1
+                  })
+                ])) : createCommentVNode("", true)
+              ], 2)
+            ], 6)
+          ];
+        }),
+        default: withCtx(() => [
+          createVNode(unref(script$1), {
+            ref_key: "DynamicScrollerRef",
+            ref: DynamicScrollerRef,
+            class: "content-list",
+            style: { height: "200px" },
+            keyField: __props.optionsKey || valueKey.value,
+            "min-item-size": 40,
+            items: data.value,
+            onScroll: scrollHandle
+          }, {
+            before: withCtx(() => [
+              renderSlot(_ctx.$slots, "header", {
+                options: data.value,
+                value: modelValue.value,
+                nodes: checkNode.value
+              }, void 0, true)
+            ]),
+            default: withCtx(({ item, index, active }) => [
+              createVNode(unref(script), {
+                item,
+                active,
+                "data-index": index,
+                onClick: withModifiers(($event) => clickHandle(item), ["stop"])
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "default", {
+                    item: __spreadProps(__spreadValues({}, item), { active: isCheck(item) })
+                  }, () => [
+                    createElementVNode("div", {
+                      class: normalizeClass(["item", { active: isCheck(item) }])
+                    }, [
+                      createElementVNode("div", null, toDisplayString(__props.formate ? __props.formate(item) : item[labelKey.value]), 1),
+                      isCheck(item) ? (openBlock(), createBlock(_component_el_icon, { key: 0 }, {
+                        default: withCtx(() => [
+                          createVNode(unref(Check))
+                        ]),
+                        _: 1
+                      })) : createCommentVNode("", true)
+                    ], 2)
+                  ], true)
+                ]),
+                _: 2
+              }, 1032, ["item", "active", "data-index", "onClick"])
+            ]),
+            after: withCtx(() => [
+              loadStatus.value !== "isloadall" && !prop.unuseremote ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(loadStatus.value === "loading" ? "加载中" : "等待加载"), 1)) : createCommentVNode("", true)
+            ]),
+            empty: withCtx(() => [
+              (loadStatus.value === "isloadall" || __props.unuseremote) && !data.value.length ? (openBlock(), createElementBlock("div", _hoisted_8, " 暂无可用数据 ")) : createCommentVNode("", true)
+            ]),
+            _: 3
+          }, 8, ["keyField", "items"]),
+          renderSlot(_ctx.$slots, "footer", {
+            options: data.value,
+            value: modelValue.value,
+            nodes: checkNode.value
+          }, void 0, true)
+        ]),
+        _: 3
+      }, 8, ["visible", "width"]);
+    };
+  }
+});
+const HSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-374d3fe2"]]);
+export {
+  HSelect as H
+};