@pixelium/web-vue 0.0.2-fix → 0.0.3-beta

package/es/select/index.js

@@ -1,677 +1,627 @@
 import './css.js'
-import { defineComponent, useAttrs, getCurrentInstance, ref, inject, computed, shallowRef, watch, useSlots, onMounted, nextTick, createVNode, Fragment, withDirectives, vShow, h } from "vue";
-import { u as useResizeObserver } from "../share/hook/use-resize-observer.js";
-import { d as drawBorder } from "./draw.js";
-import { g as getGlobalThemeColor } from "../share/util/color.js";
-import { c as calcPixelSize, a as canvasPreprocess, g as getBorderRadius, b as calcBorderCornerCenter, f as floodFill } from "../share/util/plot.js";
-import { u as useDarkMode } from "../share/hook/use-dark-mode.js";
-import { u as useComposition } from "../share/hook/use-composition.js";
-import { T as TimesCircleSolid, S as SpinnerThirdSolid } from "../auto-complete/index.js";
-import { u as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
-import { _ as _sfc_main$1 } from "../input-group/index.js";
-import { I as INPUT_GROUP_UPDATE } from "../share/const/event-bus-key.js";
-import { u as useIndexOfChildren } from "../share/hook/use-index-of-children.js";
-import { I as INPUT_GROUP_PROVIDE } from "../share/const/provide-key.js";
-import { _ as _sfc_main$3 } from "../popover/index.js";
-import { _ as _sfc_main$5 } from "../empty/index.js";
-import { _ as _sfc_main$4 } from "../option-list/index.js";
-import { d as defaultFilter, a as findSameOption } from "../share/util/common.js";
-import { p, d, k, N, P as Pn, e as en, $ } from "../aside/index.js";
-import { G as GROUP_OPTION_TYPE, B as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
-import { u as useClickOutsideListener } from "../share/hook/use-click-outside-listener.js";
-import { _ as _sfc_main$2 } from "../tag/index.js";
-import { u as useControlledMode } from "../share/hook/use-controlled-mode.js";
-const ANIMATION_DURATION = 250;
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "Select"
-  },
-  __name: "index",
-  props: {
-    modelValue: null,
-    defaultValue: null,
-    options: {
-      default: () => []
-    },
-    placeholder: null,
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    clearable: {
-      type: Boolean,
-      default: false
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    inputValue: null,
-    defaultInputValue: null,
-    filterable: {
-      type: Boolean,
-      default: false
-    },
-    shouldShowPopover: {
-      type: Function
-    },
-    filter: {
-      type: Function
-    },
-    creatable: {
-      type: Boolean
-    },
-    collapseTags: {
-      type: Boolean,
-      default: false
-    },
-    maxDisplayTags: null,
-    collapseTagsPopover: {
-      type: Boolean,
-      default: true
-    },
-    tagTheme: {
-      default: "info"
-    },
-    tagVariant: {
-      default: "plain"
-    },
-    tagColor: null,
-    size: {
-      default: "medium"
-    },
-    shape: {
-      default: "default"
-    },
-    borderRadius: null,
-    status: {
-      default: "normal"
-    }
-  },
-  emits: ["input", "update:modelValue", "update:inputValue", "change", "inputChange", "clear", "blur", "focus", "select", "tagClose"],
-  setup(__props, {
-    expose: __expose,
-    emit: __emit
-  }) {
-    var _a;
-    const attrs = useAttrs();
-    const pixelSize = calcPixelSize();
-    const props = __props;
-    const emits = __emit;
-    const [isComposing, compositionStartHandler, compositionUpdateHandler] = useComposition({
-      afterComposition: (e) => {
-        nextTick(() => {
-          inputHandler(e);
-        });
-      }
-    });
-    const instance = getCurrentInstance();
-    const innerInputGroup = ref(((_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.type) === _sfc_main$1);
-    const [_, first, last] = innerInputGroup.value ? useIndexOfChildren(INPUT_GROUP_UPDATE) : [ref(0), ref(false), ref(false)];
-    const inputGroupProps = inject(INPUT_GROUP_PROVIDE);
-    const borderRadiusComputed = computed(() => {
-      return innerInputGroup.value && inputGroupProps ? inputGroupProps.borderRadius : props.borderRadius;
-    });
-    const sizeComputed = computed(() => {
-      return innerInputGroup.value && inputGroupProps ? inputGroupProps.size : props.size;
-    });
-    const shapeComputed = computed(() => {
-      return innerInputGroup.value && inputGroupProps ? inputGroupProps.shape : props.shape;
-    });
-    const disabledComputed = computed(() => {
-      return innerInputGroup.value && inputGroupProps ? inputGroupProps.disabled || props.disabled : props.disabled;
-    });
-    const modelValueIsFalse = (modelValue2) => {
-      return Pn(modelValue2) || en(modelValue2) || props.multiple && $(modelValue2) && modelValue2.length === 0;
-    };
-    const [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
-      defaultField: "defaultValue",
-      transform: (nextValue) => {
-        if (!props.multiple) {
-          return nextValue;
-        } else {
-          if (N(nextValue)) {
-            return;
-          } else if ($(nextValue)) {
-            return [...nextValue];
-          } else {
-            return [nextValue];
-          }
-        }
-      }
-    });
-    const [inputValue, updateInputValue] = useControlledMode("inputValue", props, emits, {
-      defaultField: "defaultInputValue",
-      transform: (nextValue) => {
-        return nextValue || "";
-      }
-    });
-    const currentLabelSelectedMultiple = computed(() => {
-      if (!props.multiple) {
-        return [];
-      }
-      if (!props.options.length) {
-        return [];
-      }
-      if (modelValueIsFalse(modelValue.value)) {
-        return [];
-      }
-      const labelMap = /* @__PURE__ */ new Map();
-      props.options.forEach((option) => {
-        if (p(option)) {
-          labelMap.set(option, option);
-        } else if ("type" in option && option.type === GROUP_OPTION_TYPE) {
-          return option.children.some((child) => {
-            if (p(child)) {
-              labelMap.set(child, child);
-            } else {
-              labelMap.set(child.value, child.label);
-            }
-          });
-        } else {
-          labelMap.set(option.value, option.label);
-        }
-      });
-      return modelValue.value.map((e) => labelMap.has(e) ? labelMap.get(e) : String(e));
-    });
-    const currentLabelSelected = computed(() => {
-      if (props.multiple) {
-        return "";
-      }
-      if (!props.options.length) {
-        return "";
-      }
-      if (modelValueIsFalse(modelValue.value)) {
-        return "";
-      }
-      let currentLabel = String(modelValue.value);
-      props.options.some((option) => {
-        if (p(option)) {
-          return modelValue.value === option;
-        } else if ("type" in option && option.type === GROUP_OPTION_TYPE) {
-          return option.children.some((child) => {
-            if (p(child)) {
-              return modelValue.value === child;
-            } else {
-              if (child.value === modelValue.value) {
-                currentLabel = child.label;
-                return true;
-              }
-              return false;
-            }
-          });
-        } else {
-          if (option.value === modelValue.value) {
-            currentLabel = option.label;
-            return true;
-          }
-          return false;
-        }
-      });
-      return currentLabel;
-    });
-    const wrapperRef = shallowRef(null);
-    const canvasRef = shallowRef(null);
-    const inputRef = shallowRef(null);
-    const popoverRef = shallowRef(null);
-    const closeRef = shallowRef(null);
-    watch(() => props.multiple, (val, old) => {
-      if (val && !old) {
-        updateModelValue([modelValue.value]);
-      } else {
-        updateModelValue(modelValue.value[0] || null);
-      }
-    });
-    const triggerPopover = async () => {
-      await nextTick();
-      if (props.shouldShowPopover) {
-        popoverVisible.value = !!props.shouldShowPopover(inputValue.value || "", optionsFiltered.value);
-        return;
-      }
-      popoverVisible.value = true;
-    };
-    const closePopover = async () => {
-      popoverVisible.value = false;
-    };
-    const inputHandler = async (e) => {
-      e.stopPropagation();
-      const target = e.target;
-      const newValue = target.value;
-      inputValue.value = newValue;
-      if (isComposing.value) {
-        return;
-      }
-      emits("input", newValue, e);
-      updateInputValue(newValue);
-      await emits("update:inputValue", newValue);
-      triggerPopover();
-    };
-    const clearHandler = async () => {
-      await new Promise((res) => {
-        setTimeout(() => {
-          res();
-        });
-      });
-      const nextModelValue = props.multiple ? [] : null;
-      await updateInputValue("");
-      await updateModelValue(nextModelValue);
-      emits("change", nextModelValue);
-      emits("clear", nextModelValue);
-      emits("inputChange", "");
-    };
-    const changeHandler = (e) => {
-      e.stopPropagation();
-      const target = e.target;
-      emits("inputChange", target.value, e);
-    };
-    const focusMode = ref(false);
-    const focusImpl = () => {
-      focusMode.value = true;
-      nextTick(() => {
-        if (inputRef.value && props.filterable) {
-          inputRef.value.focus();
-          if (props.multiple) {
-            return;
-          }
-          const nextInput = modelValueIsFalse(modelValue.value) ? inputValue.value || "" : currentLabelSelected.value;
-          updateInputValue(nextInput);
-        }
-      });
-      triggerPopover();
-      emits("focus");
-    };
-    const focusInputHandler = (e) => {
-      var _a2;
-      if (disabledComputed.value || props.readonly) {
-        return;
-      }
-      const target = e.target;
-      if (target instanceof HTMLElement || target instanceof SVGElement) {
-        if ((_a2 = closeRef.value) == null ? void 0 : _a2.$el.contains(target)) {
-          return;
-        }
-      }
-      focusImpl();
-    };
-    const blurSelect = async () => {
-      var _a2;
-      focusMode.value = false;
-      popoverVisible.value = false;
-      (_a2 = inputRef.value) == null ? void 0 : _a2.blur();
-      setTimeout(async () => {
-        await updateInputValue("");
-        emits("inputChange", "");
-      }, ANIMATION_DURATION);
-      emits("blur");
-    };
-    useClickOutsideListener([wrapperRef, () => {
-      var _a2, _b;
-      return (_b = (_a2 = popoverRef.value) == null ? void 0 : _a2.triggerContent) == null ? void 0 : _b.content;
-    }], blurSelect);
-    const hoverFlag = ref(false);
-    const mouseenterHandler = () => {
-      hoverFlag.value = true;
-    };
-    const mouseleaveHandler = () => {
-      hoverFlag.value = false;
-    };
-    const showClose = computed(() => {
-      return props.clearable && !disabledComputed.value && !props.readonly;
-    });
-    const getNextModelValue = (value) => {
-      if (!props.multiple) {
-        return value;
-      } else {
-        if ($(modelValue.value)) {
-          const nextValue = [...modelValue.value];
-          const idx = nextValue.findIndex((e) => e === value);
-          if (idx === -1) {
-            nextValue.push(value);
-          } else {
-            nextValue.splice(idx, 1);
-          }
-          return nextValue;
-        } else {
-          return [value];
-        }
-      }
-    };
-    const selectHandler = async (value, option, e) => {
-      await new Promise((res) => {
-        setTimeout(() => {
-          res();
-        });
-      });
-      const nextValue = getNextModelValue(value);
-      const nextInputValue = "";
-      await updateModelValue(nextValue);
-      if (!props.multiple) {
-        focusMode.value = false;
-        closePopover();
-        emits("select", nextValue, option, e);
-        setTimeout(async () => {
-          await updateInputValue(nextInputValue);
-        }, ANIMATION_DURATION);
-      }
-    };
-    const slots = useSlots();
-    const optionsFiltered = computed(() => {
-      const options = props.options || [];
-      if (!props.filterable) {
-        return options;
-      }
-      let ans = [];
-      if (props.filter) {
-        ans = props.filter(inputValue.value || "", options);
-      } else {
-        ans = defaultFilter(inputValue.value || "", options);
-      }
-      if (props.multiple) {
-        if (!modelValueIsFalse(modelValue.value)) {
-          modelValue.value.forEach((e) => {
-            const dataInAns4E = findSameOption(e, ans);
-            const dataInOptions4E = findSameOption(e, options);
-            if (!dataInAns4E.length) {
-              if (!dataInOptions4E.length) {
-                ans.push(e);
-              } else if (dataInOptions4E.length === 1) {
-                ans.push(dataInOptions4E[0]);
-              } else {
-                const group = dataInOptions4E[1];
-                const idx = ans.findIndex((e2) => d(e2) && "type" in e2 && e2.type === GROUP_OPTION_TYPE && e2.key === group.key);
-                if (idx) {
-                  ans[idx].children.push(dataInOptions4E[0]);
-                } else {
-                  ans.push({
-                    ...group,
-                    children: [dataInOptions4E[0]]
-                  });
-                }
-              }
-            }
-          });
-        }
-      }
-      if (props.creatable && inputValue.value) {
-        const flag = findSameOption(inputValue.value, ans, true).length;
-        if (!flag) {
-          ans.push(inputValue.value);
-        }
-      }
-      return ans;
-    });
-    __expose({
-      focus: focusImpl,
-      blur: blurSelect,
-      clear: () => clearHandler()
-    });
-    const popoverVisible = ref(false);
-    const popoverVisibleUpdateHandler = (value) => {
-      if (!value) {
-        popoverVisible.value = value;
-      }
-    };
-    const showPlaceholder = computed(() => {
-      return modelValueIsFalse(modelValue.value) && (!props.multiple && !currentLabelSelected.value || props.multiple);
-    });
-    const tagSize = computed(() => {
-      return sizeComputed.value === "small" ? "small" : "medium";
-    });
-    const tagCanClose = computed(() => {
-      return !disabledComputed.value && !props.readonly;
-    });
-    const tagCloseHandler = async (value, e) => {
-      const nextValue = [...modelValue.value];
-      const idx = nextValue.findIndex((e2) => e2 === value);
-      if (idx === -1) {
-        return;
-      }
-      nextValue.splice(idx, 1);
-      await updateModelValue(nextValue);
-      emits("tagClose", value, e);
-      emits("change", nextValue);
-    };
-    const shouldCollapseTags = computed(() => {
-      return !!props.collapseTags && k(props.maxDisplayTags) && props.maxDisplayTags >= 0;
-    });
-    const tagsShowed = computed(() => {
-      if (!props.multiple) {
-        return [];
-      }
-      if (!props.options.length) {
-        return [];
-      }
-      if (N(modelValue.value)) {
-        return [];
-      }
-      return shouldCollapseTags.value ? modelValue.value.slice(0, props.maxDisplayTags) : modelValue.value;
-    });
-    const tagsCollapsed = computed(() => {
-      if (!props.multiple) {
-        return [];
-      }
-      if (!props.options.length) {
-        return [];
-      }
-      if (N(modelValue.value)) {
-        return [];
-      }
-      return shouldCollapseTags.value ? modelValue.value.slice(props.maxDisplayTags) : [];
-    });
-    const darkMode = useDarkMode();
-    watch([first, last, borderRadiusComputed, shapeComputed, sizeComputed, disabledComputed, () => slots, darkMode, focusMode, hoverFlag], () => {
-      setTimeout(() => {
-        drawPixel();
-      });
-    });
-    const drawPixel = () => {
-      const preprocessData = canvasPreprocess(wrapperRef, canvasRef);
-      if (!preprocessData) {
-        return;
-      }
-      const {
-        ctx,
-        width,
-        height,
-        canvas
-      } = preprocessData;
-      const pixelSize2 = calcPixelSize();
-      const borderRadius = getBorderRadius(canvas, pixelSize2, borderRadiusComputed.value, shapeComputed.value, sizeComputed.value || "medium", innerInputGroup.value, first.value, last.value);
-      const borderColor = props.status !== "normal" ? getGlobalThemeColor(props.status === "error" ? "danger" : props.status, 6) : (hoverFlag.value || focusMode.value) && !disabledComputed.value && !props.readonly ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10);
-      const center = calcBorderCornerCenter(borderRadius, width, height, pixelSize2);
-      const rad = BORDER_CORNER_RAD_RANGE;
-      drawBorder(ctx, width, height, center, borderRadius, rad, borderColor, pixelSize2, innerInputGroup.value, first.value, last.value);
-      const backgroundColor = disabledComputed.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
-      floodFill(ctx, Math.round(width / 2), Math.round(height / 2), backgroundColor);
-    };
-    onMounted(() => {
-      nextTick(() => {
-        drawPixel();
-      });
-    });
-    useResizeObserver(wrapperRef, drawPixel);
-    useWatchGlobalCssVal(drawPixel);
-    const stopHandler = (e) => {
-      e.stopPropagation();
-    };
-    return () => {
-      const Inner = createVNode(Fragment, null, [slots.prefix && createVNode("div", {
-        "class": "px-select-prefix-wrapper"
-      }, [slots.prefix()]), createVNode("div", {
-        "class": "px-select-content"
-      }, [props.multiple && tagsShowed.value.map((e, index) => {
-        return createVNode(_sfc_main$2, {
-          "key": e,
-          "size": tagSize.value,
-          "variant": props.tagVariant,
-          "theme": props.tagTheme,
-          "closable": tagCanClose.value,
-          "disabled": disabledComputed.value,
-          "color": props.tagColor,
-          "onClose": (event) => tagCloseHandler(e, event)
-        }, {
-          default: () => slots.tag ? slots.tag({
-            value: e,
-            label: currentLabelSelectedMultiple.value[index],
-            index
-          }) : currentLabelSelectedMultiple.value[index]
-        });
-      }), props.multiple && !!tagsCollapsed.value.length && shouldCollapseTags.value && createVNode(Fragment, null, [!props.collapseTagsPopover ? createVNode(_sfc_main$2, {
-        "size": tagSize.value,
-        "variant": props.tagVariant,
-        "theme": props.tagTheme,
-        "disabled": disabledComputed.value,
-        "color": props.tagColor
-      }, {
-        default: () => slots.tag ? slots.tag({
-          value: null,
-          label: `+${tagsCollapsed.value.length}`,
-          index: -1
-        }) : `+${tagsCollapsed.value.length}`
-      }) : createVNode(_sfc_main$3, null, {
-        default: () => createVNode(_sfc_main$2, {
-          "size": tagSize.value,
-          "variant": props.tagVariant,
-          "theme": props.tagTheme,
-          "disabled": disabledComputed.value,
-          "color": props.tagColor
-        }, {
-          default: () => slots.tag ? slots.tag({
-            value: null,
-            label: `+${tagsCollapsed.value.length}`,
-            index: -1
-          }) : `+${tagsCollapsed.value.length}`
-        }),
-        content: () => createVNode("div", {
-          "class": "px-input-tag-content"
-        }, [tagsCollapsed.value.map((e, index) => {
-          return createVNode(_sfc_main$2, {
-            "key": e,
-            "size": tagSize.value,
-            "variant": props.tagVariant,
-            "theme": props.tagTheme,
-            "disabled": disabledComputed.value,
-            "color": props.tagColor,
-            "closable": tagCanClose.value,
-            "onClose": (event) => tagCloseHandler(e, event)
-          }, {
-            default: () => {
-              const currentIndex = index + Math.floor(props.maxDisplayTags);
-              return slots.tag ? slots.tag({
-                value: e,
-                label: currentLabelSelectedMultiple.value[currentIndex],
-                index: currentIndex
-              }) : currentLabelSelectedMultiple.value[currentIndex];
-            }
-          });
-        })])
-      })]), withDirectives(createVNode("input", {
-        "ref": inputRef,
-        "class": "px-select-inner",
-        "value": inputValue.value,
-        "disabled": disabledComputed.value || props.readonly,
-        "onInput": inputHandler,
-        "onChange": changeHandler,
-        "onFocus": stopHandler,
-        "onBlur": stopHandler,
-        "onCompositionstart": compositionStartHandler,
-        "onCompositionend": compositionUpdateHandler,
-        "placeholder": showPlaceholder.value ? props.placeholder : ""
-      }, null), [[vShow, props.filterable && focusMode.value]]), withDirectives(createVNode("div", {
-        "class": {
-          "px-select-placeholder": true
-        }
-      }, [props.placeholder]), [[vShow, showPlaceholder.value && (!props.filterable || !focusMode.value)]]), !props.multiple && withDirectives(createVNode("div", {
-        "class": {
-          "px-select-label": true,
-          "px-select-label__disabled": disabledComputed.value
-        }
-      }, [currentLabelSelected.value]), [[vShow, !showPlaceholder.value && (!props.filterable || !focusMode.value)]])]), showClose.value && createVNode("div", {
-        "class": "px-select-close-wrapper"
-      }, [hoverFlag.value && !modelValueIsFalse(modelValue.value) ? createVNode(TimesCircleSolid, {
-        "class": "px-select-icon",
-        "onClick": clearHandler,
-        "ref": (el) => {
-          closeRef.value = el;
-        }
-      }, null) : createVNode("div", {
-        "class": "px-select-icon-placeholder"
-      }, null)]), props.loading && createVNode("div", {
-        "class": "px-select-loading-wrapper"
-      }, [createVNode(SpinnerThirdSolid, {
-        "class": "px-select-icon px-animation__loading"
-      }, null)]), slots.suffix && createVNode("div", {
-        "class": "px-select-suffix-wrapper"
-      }, [slots.suffix()]), createVNode("canvas", {
-        "ref": canvasRef,
-        "class": "px-select-canvas"
-      }, null)]);
-      const scopeObj = {};
-      const scopeId = instance == null ? void 0 : instance.vnode.scopeId;
-      const parentScopeId = instance == null ? void 0 : instance.vnode.scopeId;
-      if (scopeId) {
-        scopeObj[scopeId] = "";
-      }
-      if (parentScopeId) {
-        scopeObj[parentScopeId] = "";
-      }
-      const Render = createVNode(_sfc_main$3, {
-        "placement": "bottom",
-        "offset": 0,
-        "width-equal": true,
-        "arrow": false,
-        "visible": popoverVisible.value,
-        "onUpdate:visible": popoverVisibleUpdateHandler,
-        "trigger": "click",
-        "contentStyle": {
-          padding: `${pixelSize}px`
-        },
-        "ref": popoverRef
-      }, {
-        default: () => h("div", {
-          ref: wrapperRef,
-          class: ["pixelium px-select", sizeComputed.value && `px-select__${sizeComputed.value}`, shapeComputed.value && `px-select__${shapeComputed.value}`, {
-            "px-select__inner": innerInputGroup.value
-          }, {
-            "px-select__disabled": disabledComputed.value
-          }],
-          onClick: focusInputHandler,
-          onMouseenter: mouseenterHandler,
-          onMouseleave: mouseleaveHandler,
-          ...scopeObj,
-          ...attrs
-        }, [Inner]),
-        content: () => optionsFiltered.value.length ? createVNode(_sfc_main$4, {
-          "options": optionsFiltered.value,
-          "onSelect": selectHandler,
-          "activeValues": props.multiple ? modelValue.value : [modelValue.value]
-        }, {
-          "group-label": ({
-            option
-          }) => slots["group-label"] ? slots["group-label"]({
-            option
-          }) : option.label,
-          option: ({
-            option
-          }) => slots.option ? slots.option({
-            option
-          }) : p(option) ? option : option.label
-        }) : createVNode("div", {
-          "class": "px-select-empty"
-        }, [createVNode(_sfc_main$5, null, null)])
-      });
-      return Render;
-    };
-  }
+import { A as d, B as y, D as S, V as spinner_third_solid_default, _ as E, g as A, h as $n, j as en, l as times_circle_solid_default } from "../vendor.js";
+import { i as GROUP_OPTION_TYPE, o as POPUP_CONTENT_DEFAULT_MAX_WIDTH, r as GET_ELEMENT_RENDERED, t as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
+import { r as findSameOption, t as defaultFilter } from "../share/util/common.js";
+import { i as canvasPreprocess, l as getBorderRadius, n as calcPixelSize, s as floodFill, t as calcBorderCornerCenter } from "../share/util/plot.js";
+import { n as getGlobalThemeColor } from "../share/util/color.js";
+import { t as useDarkMode } from "../share/hook/use-dark-mode.js";
+import { t as useResizeObserver } from "../share/hook/use-resize-observer.js";
+import { i as INPUT_GROUP_UPDATE } from "../share/const/event-bus-key.js";
+import { t as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
+import { n as useIndexOfChildren } from "../share/hook/use-index-of-children.js";
+import { i as FORM_ITEM_PROVIDE, s as INPUT_GROUP_PROVIDE } from "../share/const/provide-key.js";
+import { t as createProvideComputed } from "../share/util/reactivity.js";
+import { t as useTransitionEnd } from "../share/hook/use-transition-end.js";
+import { t as useComposition } from "../share/hook/use-composition.js";
+import { t as useControlledMode } from "../share/hook/use-controlled-mode.js";
+import { t as tag_default } from "../tag/index.js";
+import { t as useCancelableDelay } from "../share/hook/use-cancelable-delay.js";
+import { t as popover_default } from "../popover/index.js";
+import { t as empty_default } from "../empty/index.js";
+import { t as option_list_default } from "../option-list/index.js";
+import { t as drawBorder } from "./draw.js";
+import { Fragment, computed, createVNode, defineComponent, getCurrentInstance, h, inject, mergeProps, nextTick, onMounted, ref, shallowRef, useAttrs, useSlots, vShow, watch, withDirectives } from "vue";
+var ANIMATION_DURATION = 250;
+var select_default = /* @__PURE__ */ defineComponent({
+	name: "Select",
+	__name: "index",
+	props: {
+		modelValue: null,
+		defaultValue: null,
+		options: { default: () => [] },
+		placeholder: null,
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		inputValue: null,
+		defaultInputValue: null,
+		filterable: {
+			type: Boolean,
+			default: false
+		},
+		shouldShowPopover: { type: Function },
+		filter: { type: Function },
+		creatable: { type: Boolean },
+		collapseTags: {
+			type: Boolean,
+			default: false
+		},
+		maxDisplayTags: null,
+		collapseTagsPopover: {
+			type: Boolean,
+			default: true
+		},
+		virtualScroll: {
+			type: Boolean,
+			default: false
+		},
+		virtualListProps: null,
+		tagProps: null,
+		size: null,
+		shape: null,
+		borderRadius: null,
+		status: { default: "normal" },
+		tagTheme: { default: "info" },
+		tagVariant: { default: "plain" },
+		tagColor: null,
+		popoverProps: null,
+		optionsDestroyOnHide: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"input",
+		"update:modelValue",
+		"update:inputValue",
+		"change",
+		"inputChange",
+		"clear",
+		"blur",
+		"focus",
+		"select",
+		"tagClose"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		var _instance$parent;
+		const attrs = useAttrs();
+		const props = __props;
+		const emits = __emit;
+		const [isComposing, compositionStartHandler, compositionUpdateHandler] = useComposition({ afterComposition: (e) => {
+			nextTick(() => {
+				inputHandler(e);
+			});
+		} });
+		const instance = getCurrentInstance();
+		const innerInputGroup = ref((instance === null || instance === void 0 || (_instance$parent = instance.parent) === null || _instance$parent === void 0 ? void 0 : _instance$parent.type.name) === "InputGroup");
+		const [index, first, last] = innerInputGroup.value ? useIndexOfChildren(INPUT_GROUP_UPDATE, (instance$1) => {
+			var _instance$vnode$el;
+			return instance$1 === null || instance$1 === void 0 || (_instance$vnode$el = instance$1.vnode.el) === null || _instance$vnode$el === void 0 ? void 0 : _instance$vnode$el.nextElementSibling;
+		}) : [
+			ref(0),
+			ref(false),
+			ref(false)
+		];
+		const inputGroupProvide = inject(INPUT_GROUP_PROVIDE);
+		const formItemProvide = inject(FORM_ITEM_PROVIDE);
+		const borderRadiusComputed = createProvideComputed("borderRadius", [innerInputGroup.value && inputGroupProvide, props]);
+		const sizeComputed = createProvideComputed("size", () => [
+			innerInputGroup.value && inputGroupProvide,
+			props.size && props,
+			formItemProvide,
+			props
+		], "nullish", (val) => val || "medium");
+		const shapeComputed = createProvideComputed("shape", [innerInputGroup.value && inputGroupProvide, props], "nullish", (val) => val || "rect");
+		const disabledComputed = createProvideComputed("disabled", [
+			innerInputGroup.value && inputGroupProvide,
+			formItemProvide,
+			props
+		], "or");
+		const readonlyComputed = createProvideComputed("readonly", [
+			innerInputGroup.value && inputGroupProvide,
+			formItemProvide,
+			props
+		], "or");
+		const statusComputed = createProvideComputed("status", [formItemProvide, props]);
+		const nextIsTextButton = computed(() => {
+			if (index.value >= 0) {
+				var _inputGroupProvide$ch;
+				return innerInputGroup.value ? !!((inputGroupProvide === null || inputGroupProvide === void 0 || (_inputGroupProvide$ch = inputGroupProvide.childrenInfo.value.find((e) => e.index === index.value + 1)) === null || _inputGroupProvide$ch === void 0 ? void 0 : _inputGroupProvide$ch.variant) === "text") : false;
+			} else return false;
+		});
+		const modelValueIsFalse = (modelValue$1) => {
+			return $n(modelValue$1) || en(modelValue$1) || props.multiple && S(modelValue$1) && modelValue$1.length === 0;
+		};
+		const [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
+			defaultField: "defaultValue",
+			transform: (nextValue) => {
+				if (!props.multiple) return nextValue;
+				else if (E(nextValue)) return;
+				else if (S(nextValue)) return [...nextValue];
+				else return [nextValue];
+			}
+		});
+		const [inputValue, updateInputValue] = useControlledMode("inputValue", props, emits, {
+			defaultField: "defaultInputValue",
+			transform: (nextValue) => {
+				return nextValue || "";
+			}
+		});
+		const currentLabelSelectedMultiple = computed(() => {
+			if (!props.multiple) return [];
+			if (!props.options.length) return [];
+			if (modelValueIsFalse(modelValue.value)) return [];
+			const labelMap = /* @__PURE__ */ new Map();
+			props.options.forEach((option) => {
+				if (y(option)) labelMap.set(option, option);
+				else if ("type" in option && option.type === "group") return option.children.some((child) => {
+					if (y(child)) labelMap.set(child, child);
+					else labelMap.set(child.value, child.label);
+				});
+				else labelMap.set(option.value, option.label);
+			});
+			return modelValue.value.map((e) => labelMap.has(e) ? labelMap.get(e) : String(e));
+		});
+		const currentLabelSelected = computed(() => {
+			if (props.multiple) return "";
+			if (!props.options.length) return "";
+			if (modelValueIsFalse(modelValue.value)) return "";
+			let currentLabel = String(modelValue.value);
+			props.options.some((option) => {
+				if (y(option)) return modelValue.value === option;
+				else if ("type" in option && option.type === "group") return option.children.some((child) => {
+					if (y(child)) return modelValue.value === child;
+					else {
+						if (child.value === modelValue.value) {
+							currentLabel = child.label;
+							return true;
+						}
+						return false;
+					}
+				});
+				else {
+					if (option.value === modelValue.value) {
+						currentLabel = option.label;
+						return true;
+					}
+					return false;
+				}
+			});
+			return currentLabel;
+		});
+		const wrapperRef = shallowRef(null);
+		const contentRef = shallowRef(null);
+		const canvasRef = shallowRef(null);
+		const inputRef = shallowRef(null);
+		const popoverRef = shallowRef(null);
+		const closeRef = shallowRef(null);
+		watch(() => props.multiple, (val, old) => {
+			if (val && !old) updateModelValue([modelValue.value]);
+			else updateModelValue(modelValue.value[0] || null);
+		});
+		const triggerPopover = async () => {
+			await nextTick();
+			if (props.shouldShowPopover) {
+				popoverVisible.value = !!props.shouldShowPopover(inputValue.value || "", optionsFiltered.value);
+				return;
+			}
+			popoverVisible.value = true;
+		};
+		const closePopover = async () => {
+			popoverVisible.value = false;
+		};
+		const inputHandler = async (e) => {
+			e.stopPropagation();
+			const newValue = e.target.value;
+			inputValue.value = newValue;
+			if (isComposing.value) return;
+			emits("input", newValue, e);
+			updateInputValue(newValue);
+			await emits("update:inputValue", newValue);
+			triggerPopover();
+		};
+		const clearHandler = async () => {
+			await new Promise((res) => setTimeout(res));
+			const nextModelValue = props.multiple ? [] : null;
+			await updateInputValue("");
+			await updateModelValue(nextModelValue);
+			emits("change", nextModelValue);
+			emits("clear", nextModelValue);
+			emits("inputChange", "");
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const changeHandler = (e) => {
+			e.stopPropagation();
+			const target = e.target;
+			emits("inputChange", target.value, e);
+		};
+		const [wait, cancel] = useCancelableDelay();
+		const focusMode = ref(false);
+		const focusImpl = async (e) => {
+			if (disabledComputed.value || readonlyComputed.value) return;
+			cancel();
+			focusMode.value = true;
+			nextTick(() => {
+				if (inputRef.value && props.filterable) {
+					inputRef.value.focus();
+					if (props.multiple) return;
+					updateInputValue(modelValueIsFalse(modelValue.value) ? inputValue.value || "" : currentLabelSelected.value);
+				}
+			});
+			triggerPopover();
+			emits("focus", e);
+		};
+		const focusInputHandler = async (e) => {
+			var _contentRef$value;
+			if (disabledComputed.value || readonlyComputed.value) return;
+			const target = e.target;
+			if (target instanceof HTMLElement || target instanceof SVGElement) {
+				var _closeRef$value;
+				if ((_closeRef$value = closeRef.value) === null || _closeRef$value === void 0 ? void 0 : _closeRef$value.$el.contains(target)) return;
+			}
+			(_contentRef$value = contentRef.value) === null || _contentRef$value === void 0 || _contentRef$value.focus();
+		};
+		const blurSelectImpl = async () => {
+			var _inputRef$value, _contentRef$value2;
+			const next = await wait();
+			if (!next) return next;
+			focusMode.value = false;
+			closePopover();
+			(_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 || _inputRef$value.blur();
+			(_contentRef$value2 = contentRef.value) === null || _contentRef$value2 === void 0 || _contentRef$value2.blur();
+			setTimeout(async () => {
+				await updateInputValue("");
+				emits("inputChange", "");
+			}, ANIMATION_DURATION);
+			return next;
+		};
+		const blurSelect = async (e) => {
+			if (!await blurSelectImpl()) return;
+			emits("blur", e);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.blurHandler();
+		};
+		const focusoutHandler = (e) => {
+			var _popoverRef$value, _wrapperRef$value;
+			const relatedTarget = e.relatedTarget;
+			if (relatedTarget && ((_popoverRef$value = popoverRef.value) === null || _popoverRef$value === void 0 || (_popoverRef$value = _popoverRef$value.triggerContent) === null || _popoverRef$value === void 0 || (_popoverRef$value = _popoverRef$value.content) === null || _popoverRef$value === void 0 ? void 0 : _popoverRef$value.contains(relatedTarget))) return;
+			if (relatedTarget && ((_wrapperRef$value = wrapperRef.value) === null || _wrapperRef$value === void 0 ? void 0 : _wrapperRef$value.contains(relatedTarget))) return;
+			blurSelect(e);
+		};
+		const hoverFlag = ref(false);
+		const mouseenterHandler = () => {
+			hoverFlag.value = true;
+		};
+		const mouseleaveHandler = () => {
+			hoverFlag.value = false;
+		};
+		const showClose = computed(() => {
+			return props.clearable && !disabledComputed.value && !readonlyComputed.value;
+		});
+		const getNextModelValue = (value) => {
+			if (!props.multiple) return value;
+			else if (S(modelValue.value)) {
+				const nextValue = [...modelValue.value];
+				const idx = nextValue.findIndex((e) => e === value);
+				if (idx === -1) nextValue.push(value);
+				else nextValue.splice(idx, 1);
+				return nextValue;
+			} else return [value];
+		};
+		const selectHandler = async (value, option, e) => {
+			await new Promise((res) => setTimeout(res));
+			const nextValue = getNextModelValue(value);
+			const nextInputValue = "";
+			await updateModelValue(nextValue);
+			if (!props.multiple) {
+				focusMode.value = false;
+				closePopover();
+				emits("select", nextValue, option, e);
+				emits("change", nextValue);
+				formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+				setTimeout(async () => {
+					await updateInputValue(nextInputValue);
+				}, ANIMATION_DURATION);
+			}
+		};
+		const slots = useSlots();
+		const optionsFiltered = computed(() => {
+			const options = props.options || [];
+			if (!props.filterable) return options;
+			let ans = [];
+			if (props.filter) ans = props.filter(inputValue.value || "", options);
+			else ans = defaultFilter(inputValue.value || "", options);
+			if (props.multiple) {
+				if (!modelValueIsFalse(modelValue.value)) modelValue.value.forEach((e) => {
+					const dataInAns4E = findSameOption(e, ans);
+					const dataInOptions4E = findSameOption(e, options);
+					if (!dataInAns4E.length) if (!dataInOptions4E.length) ans.push(e);
+					else if (dataInOptions4E.length === 1) ans.push(dataInOptions4E[0]);
+					else {
+						const group = dataInOptions4E[1];
+						const idx = ans.findIndex((e$1) => d(e$1) && "type" in e$1 && e$1.type === "group" && e$1.key === group.key);
+						if (idx) ans[idx].children.push(dataInOptions4E[0]);
+						else ans.push({
+							...group,
+							children: [dataInOptions4E[0]]
+						});
+					}
+				});
+			}
+			if (props.creatable && inputValue.value) {
+				if (!findSameOption(inputValue.value, ans, true).length) ans.push(inputValue.value);
+			}
+			return ans;
+		});
+		__expose({
+			focus: () => {
+				var _contentRef$value3;
+				if (disabledComputed.value || readonlyComputed.value) return;
+				(_contentRef$value3 = contentRef.value) === null || _contentRef$value3 === void 0 || _contentRef$value3.focus();
+			},
+			blur: () => {
+				blurSelectImpl();
+			},
+			clear: () => clearHandler(),
+			[GET_ELEMENT_RENDERED]: () => wrapperRef.value
+		});
+		const popoverVisible = ref(false);
+		const popoverVisibleUpdateHandler = (value) => {
+			if (!value) popoverVisible.value = value;
+		};
+		const showPlaceholder = computed(() => {
+			return modelValueIsFalse(modelValue.value) && (!props.multiple && !currentLabelSelected.value || props.multiple);
+		});
+		const tagSize = computed(() => {
+			return sizeComputed.value === "small" ? "small" : "medium";
+		});
+		const tagCanClose = computed(() => {
+			return !disabledComputed.value && !readonlyComputed.value;
+		});
+		const tagCloseHandler = async (value, e) => {
+			const nextValue = [...modelValue.value];
+			const idx = nextValue.findIndex((e$1) => e$1 === value);
+			if (idx === -1) return;
+			nextValue.splice(idx, 1);
+			await updateModelValue(nextValue);
+			emits("tagClose", value, e);
+			emits("change", nextValue);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const shouldCollapseTags = computed(() => {
+			return !!props.collapseTags && A(props.maxDisplayTags) && props.maxDisplayTags >= 0;
+		});
+		const tagsShowed = computed(() => {
+			if (!props.multiple) return [];
+			if (!props.options.length) return [];
+			if (E(modelValue.value)) return [];
+			return shouldCollapseTags.value ? modelValue.value.slice(0, props.maxDisplayTags) : modelValue.value;
+		});
+		const tagsCollapsed = computed(() => {
+			if (!props.multiple) return [];
+			if (!props.options.length) return [];
+			if (E(modelValue.value)) return [];
+			return shouldCollapseTags.value ? modelValue.value.slice(props.maxDisplayTags) : [];
+		});
+		watch([
+			first,
+			last,
+			borderRadiusComputed,
+			shapeComputed,
+			sizeComputed,
+			readonlyComputed,
+			disabledComputed,
+			() => slots,
+			useDarkMode(),
+			focusMode,
+			hoverFlag,
+			statusComputed,
+			nextIsTextButton
+		], () => {
+			drawPixel();
+		});
+		const drawPixel = () => {
+			const preprocessData = canvasPreprocess(wrapperRef, canvasRef);
+			if (!preprocessData) return;
+			const { ctx, width, height, canvas } = preprocessData;
+			const pixelSize = calcPixelSize();
+			const borderRadius = getBorderRadius(canvas, pixelSize, borderRadiusComputed.value, shapeComputed.value, sizeComputed.value || "medium", innerInputGroup.value, first.value, last.value);
+			const borderColor = statusComputed.value !== "normal" ? getGlobalThemeColor(statusComputed.value === "error" ? "danger" : statusComputed.value, 6) : (hoverFlag.value || focusMode.value) && !disabledComputed.value && !readonlyComputed.value ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10);
+			const center = calcBorderCornerCenter(borderRadius, width, height, pixelSize);
+			const rad = BORDER_CORNER_RAD_RANGE;
+			if (borderColor) drawBorder(ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, innerInputGroup.value, first.value, last.value, nextIsTextButton.value);
+			const backgroundColor = disabledComputed.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
+			if (backgroundColor) floodFill(ctx, Math.round(width / 2), Math.round(height / 2), backgroundColor);
+		};
+		onMounted(() => {
+			nextTick(() => {
+				drawPixel();
+			});
+		});
+		useResizeObserver(wrapperRef, drawPixel);
+		useWatchGlobalCssVal(drawPixel);
+		useTransitionEnd(wrapperRef, drawPixel);
+		const popoverProps = computed(() => {
+			var _props$popoverProps;
+			return {
+				...props.popoverProps,
+				contentStyle: {
+					maxWidth: `400px`,
+					...(_props$popoverProps = props.popoverProps) === null || _props$popoverProps === void 0 ? void 0 : _props$popoverProps.contentStyle
+				}
+			};
+		});
+		return () => {
+			const Inner = createVNode(Fragment, null, [
+				slots.prefix && createVNode("div", { "class": "px-select-prefix-wrapper" }, [slots.prefix()]),
+				createVNode("div", {
+					"class": "px-select-content",
+					"ref": contentRef,
+					"tabindex": disabledComputed.value || readonlyComputed.value ? -1 : 0
+				}, [
+					props.multiple && tagsShowed.value.map((e, index$1) => {
+						return createVNode(tag_default, mergeProps({
+							"key": e,
+							"size": tagSize.value,
+							"variant": props.tagVariant,
+							"theme": props.tagTheme,
+							"closable": tagCanClose.value,
+							"disabled": disabledComputed.value,
+							"color": props.tagColor
+						}, props.tagProps, { "onClose": (event) => tagCloseHandler(e, event) }), { default: () => slots.tag ? slots.tag({
+							value: e,
+							label: currentLabelSelectedMultiple.value[index$1],
+							index: index$1,
+							disabled: disabledComputed.value,
+							readonly: readonlyComputed.value
+						}) : currentLabelSelectedMultiple.value[index$1] });
+					}),
+					props.multiple && !!tagsCollapsed.value.length && shouldCollapseTags.value && createVNode(Fragment, null, [!props.collapseTagsPopover ? createVNode(tag_default, mergeProps({
+						"size": tagSize.value,
+						"variant": props.tagVariant,
+						"theme": props.tagTheme,
+						"disabled": disabledComputed.value,
+						"color": props.tagColor
+					}, props.tagProps), { default: () => slots.tag ? slots.tag({
+						value: null,
+						label: `+${tagsCollapsed.value.length}`,
+						index: -1,
+						disabled: disabledComputed.value,
+						readonly: readonlyComputed.value
+					}) : `+${tagsCollapsed.value.length}` }) : createVNode(popover_default, popoverProps.value, {
+						default: () => createVNode(tag_default, mergeProps({
+							"size": tagSize.value,
+							"variant": props.tagVariant,
+							"theme": props.tagTheme,
+							"disabled": disabledComputed.value,
+							"color": props.tagColor
+						}, props.tagProps), { default: () => slots.tag ? slots.tag({
+							value: null,
+							label: `+${tagsCollapsed.value.length}`,
+							index: -1,
+							disabled: disabledComputed.value,
+							readonly: readonlyComputed.value
+						}) : `+${tagsCollapsed.value.length}` }),
+						content: () => createVNode("div", { "class": "px-input-tag-content" }, [tagsCollapsed.value.map((e, index$1) => {
+							return createVNode(tag_default, mergeProps({
+								"key": e,
+								"size": tagSize.value,
+								"variant": props.tagVariant,
+								"theme": props.tagTheme,
+								"disabled": disabledComputed.value,
+								"color": props.tagColor,
+								"closable": tagCanClose.value
+							}, props.tagProps, { "onClose": (event) => tagCloseHandler(e, event) }), { default: () => {
+								const currentIndex = index$1 + Math.floor(props.maxDisplayTags);
+								return slots.tag ? slots.tag({
+									value: e,
+									label: currentLabelSelectedMultiple.value[currentIndex],
+									index: currentIndex,
+									disabled: disabledComputed.value,
+									readonly: readonlyComputed.value
+								}) : currentLabelSelectedMultiple.value[currentIndex];
+							} });
+						})])
+					})]),
+					withDirectives(createVNode("input", {
+						"tabindex": -1,
+						"ref": inputRef,
+						"class": "px-select-inner",
+						"value": inputValue.value,
+						"disabled": disabledComputed.value || readonlyComputed.value,
+						"onInput": inputHandler,
+						"onChange": changeHandler,
+						"onCompositionstart": compositionStartHandler,
+						"onCompositionend": compositionUpdateHandler,
+						"placeholder": showPlaceholder.value ? props.placeholder : ""
+					}, null), [[vShow, props.filterable && focusMode.value]]),
+					withDirectives(createVNode("div", { "class": { "px-select-placeholder": true } }, [props.placeholder]), [[vShow, showPlaceholder.value && (!props.filterable || !focusMode.value)]]),
+					!props.multiple && withDirectives(createVNode("div", { "class": {
+						"px-select-label": true,
+						"px-select-label__disabled": disabledComputed.value
+					} }, [slots.label ? slots.label({
+						label: currentLabelSelected.value,
+						value: modelValue.value,
+						disabled: disabledComputed.value,
+						readonly: readonlyComputed.value
+					}) : currentLabelSelected.value]), [[vShow, !showPlaceholder.value && (!props.filterable || !focusMode.value)]])
+				]),
+				showClose.value && createVNode("div", { "class": "px-select-close-wrapper" }, [hoverFlag.value && !modelValueIsFalse(modelValue.value) ? createVNode(times_circle_solid_default, {
+					"class": "px-select-icon",
+					"onClick": clearHandler,
+					"ref": (el) => {
+						closeRef.value = el;
+					}
+				}, null) : createVNode("div", { "class": "px-select-icon-placeholder" }, null)]),
+				props.loading && createVNode("div", { "class": "px-select-loading-wrapper" }, [createVNode(spinner_third_solid_default, { "class": "px-select-icon px-animation__loading" }, null)]),
+				slots.suffix && createVNode("div", { "class": "px-select-suffix-wrapper" }, [slots.suffix()]),
+				createVNode("canvas", {
+					"ref": canvasRef,
+					"class": "px-select-canvas"
+				}, null)
+			]);
+			const scopeObj = {};
+			const scopeId = instance === null || instance === void 0 ? void 0 : instance.vnode.scopeId;
+			const parentScopeId = instance === null || instance === void 0 ? void 0 : instance.vnode.scopeId;
+			if (scopeId) scopeObj[scopeId] = "";
+			if (parentScopeId) scopeObj[parentScopeId] = "";
+			const pixelSize = calcPixelSize();
+			return createVNode(popover_default, {
+				"placement": "bottom",
+				"offset": 0,
+				"width-equal": true,
+				"arrow": false,
+				"visible": popoverVisible.value,
+				"onUpdate:visible": popoverVisibleUpdateHandler,
+				"trigger": "click",
+				"contentStyle": { padding: `${pixelSize}px` },
+				"ref": popoverRef,
+				"destroyOnHide": props.optionsDestroyOnHide
+			}, {
+				default: () => h("div", mergeProps({
+					ref: wrapperRef,
+					class: [
+						"pixelium px-select",
+						sizeComputed.value && `px-select__${sizeComputed.value}`,
+						shapeComputed.value && `px-select__${shapeComputed.value}`,
+						{ "px-select__inner": innerInputGroup.value },
+						{ "px-select__disabled": disabledComputed.value }
+					],
+					onFocusin: focusImpl,
+					onFocusout: focusoutHandler,
+					onClick: focusInputHandler,
+					onMouseenter: mouseenterHandler,
+					onMouseleave: mouseleaveHandler,
+					...scopeObj
+				}, attrs), [Inner]),
+				content: () => optionsFiltered.value.length ? createVNode(option_list_default, {
+					"options": optionsFiltered.value,
+					"onSelect": selectHandler,
+					"activeValues": props.multiple ? modelValue.value : [modelValue.value],
+					"virtualScroll": props.virtualScroll,
+					"virtualListProps": props.virtualListProps
+				}, {
+					"group-label": ({ option }) => slots["group-label"] ? slots["group-label"]({ option }) : option.label,
+					option: ({ option }) => slots.option ? slots.option({ option }) : y(option) ? option : option.label
+				}) : createVNode("div", { "class": "px-select-empty" }, [createVNode(empty_default, null, null)])
+			});
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { select_default as t };