@pixelium/web-vue 0.0.2 → 0.0.3-alpha

package/es/auto-complete/index.js

@@ -1,402 +1,340 @@
 import './css.js'
-import { defineComponent, createElementBlock, openBlock, normalizeStyle, createElementVNode, useAttrs, getCurrentInstance, ref, inject, computed, shallowRef, useSlots, watch, onMounted, nextTick, createVNode, Fragment, 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 { 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$2 } from "../popover/index.js";
-import { _ as _sfc_main$4 } from "../empty/index.js";
-import { _ as _sfc_main$3 } from "../option-list/index.js";
-import { d as defaultFilter } from "../share/util/common.js";
-import { p } from "../aside/index.js";
-import { B as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
-import { u as useControlledMode } from "../share/hook/use-controlled-mode.js";
-const SpinnerThirdSolid = /* @__PURE__ */ defineComponent({
-  props: {
-    size: {},
-    color: {}
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "svg",
-        {
-          class: "px-icon-hn",
-          style: normalizeStyle({ color: props.color, fontSize: props.size + "px" }),
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 24 24"
-        },
-        [..._cache[0] || (_cache[0] = [
-          createElementVNode(
-            "path",
-            { d: "M23 9v6h-1v2h-3v-2h1V9h-1V7h-1V6h-1V5h-2V4h-2V3h-1V1h3v1h2v1h2v1h1v1h1v2h1v2z" },
-            null,
-            -1
-            /* CACHED */
-          )
-        ])],
-        4
-        /* STYLE */
-      );
-    };
-  }
+import { B as y, V as spinner_third_solid_default, l as times_circle_solid_default } from "../vendor.js";
+import { r as GET_ELEMENT_RENDERED, t as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
+import { 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 popover_default } from "../popover/index.js";
+import { t as empty_default } from "../empty/index.js";
+import { t as drawBorder } from "./draw.js";
+import { t as option_list_default } from "../option-list/index.js";
+import { Fragment, computed, createVNode, defineComponent, getCurrentInstance, h, inject, nextTick, onMounted, ref, shallowRef, useAttrs, useSlots, watch } from "vue";
+var auto_complete_default = /* @__PURE__ */ defineComponent({
+	name: "AutoComplete",
+	__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
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		size: null,
+		shape: null,
+		showPopoverEmpty: {
+			type: Boolean,
+			default: false
+		},
+		shouldShowPopover: { type: Function },
+		filter: { type: Function },
+		append: {
+			type: Boolean,
+			default: false
+		},
+		virtualScroll: {
+			type: Boolean,
+			default: false
+		},
+		virtualListProps: null,
+		borderRadius: null,
+		status: { default: "normal" },
+		autofocus: { type: Boolean },
+		optionsDestroyOnHide: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"input",
+		"update:modelValue",
+		"change",
+		"clear",
+		"blur",
+		"focus",
+		"select"
+	],
+	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, void 0);
+		const formItemProvide = inject(FORM_ITEM_PROVIDE, void 0);
+		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", [
+			formItemProvide,
+			innerInputGroup.value && inputGroupProvide,
+			props
+		], "or");
+		const readonlyComputed = createProvideComputed("readonly", [
+			formItemProvide,
+			innerInputGroup.value && inputGroupProvide,
+			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 [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
+			defaultField: "defaultValue",
+			transform: (e) => {
+				return e || "";
+			}
+		});
+		const wrapperRef = shallowRef(null);
+		const canvasRef = shallowRef(null);
+		const inputRef = shallowRef(null);
+		const triggerPopover = async () => {
+			await nextTick();
+			if (props.shouldShowPopover) {
+				popoverVisible.value = !!props.shouldShowPopover(modelValue.value || "", optionsFiltered.value);
+				return;
+			}
+			if (modelValue.value && (!props.showPopoverEmpty && optionsFiltered.value.length || props.showPopoverEmpty)) popoverVisible.value = true;
+			else popoverVisible.value = false;
+		};
+		const inputHandler = async (e) => {
+			e.stopPropagation();
+			const newValue = e.target.value;
+			modelValue.value = newValue;
+			if (isComposing.value) return;
+			emits("input", newValue, e);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.inputHandler();
+			await updateModelValue(newValue);
+			triggerPopover();
+		};
+		const clearHandler = async () => {
+			await updateModelValue("");
+			emits("change", "");
+			emits("clear", "");
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const changeHandler = (e) => {
+			e.stopPropagation();
+			const target = e.target;
+			emits("change", target.value, e);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const focusMode = ref(false);
+		const blurHandler = (e) => {
+			e.stopPropagation();
+			emits("blur", e);
+			focusMode.value = false;
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.blurHandler();
+		};
+		const focusHandler = (e) => {
+			e.stopPropagation();
+			emits("focus", e);
+			focusMode.value = true;
+		};
+		const focusInputHandler = () => {
+			var _inputRef$value;
+			(_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 || _inputRef$value.focus();
+		};
+		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 selectHandler = async (value, option, e) => {
+			const nextValue = props.append ? modelValue.value + value : value;
+			await updateModelValue(nextValue);
+			popoverVisible.value = false;
+			emits("select", nextValue, option, e);
+			emits("change", nextValue, e);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const slots = useSlots();
+		const optionsFiltered = computed(() => {
+			if (props.filter) return props.filter(modelValue.value || "", props.options || []);
+			if (!modelValue.value || !modelValue.value.trim()) return [];
+			return defaultFilter(modelValue.value, props.options || []);
+		});
+		__expose({
+			focus: () => {
+				var _inputRef$value2;
+				(_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 || _inputRef$value2.focus();
+			},
+			blur: () => {
+				var _inputRef$value3;
+				(_inputRef$value3 = inputRef.value) === null || _inputRef$value3 === void 0 || _inputRef$value3.blur();
+			},
+			clear: () => clearHandler(),
+			select: () => {
+				var _inputRef$value4;
+				(_inputRef$value4 = inputRef.value) === null || _inputRef$value4 === void 0 || _inputRef$value4.select();
+			},
+			[GET_ELEMENT_RENDERED]: () => wrapperRef.value
+		});
+		const popoverVisible = ref(false);
+		const popoverVisibleUpdateHandler = (value) => {
+			if (!value) popoverVisible.value = value;
+		};
+		watch([
+			first,
+			last,
+			borderRadiusComputed,
+			shapeComputed,
+			sizeComputed,
+			disabledComputed,
+			() => slots,
+			useDarkMode(),
+			focusMode,
+			hoverFlag,
+			readonlyComputed,
+			statusComputed,
+			nextIsTextButton
+		], () => {
+			setTimeout(() => {
+				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 || "rect", 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);
+		return () => {
+			const Inner = createVNode(Fragment, null, [
+				slots.prefix && createVNode("div", { "class": "px-auto-complete-prefix-wrapper" }, [slots.prefix()]),
+				createVNode("input", {
+					"ref": inputRef,
+					"class": "px-auto-complete-inner",
+					"value": modelValue.value,
+					"placeholder": props.placeholder,
+					"disabled": disabledComputed.value || readonlyComputed.value,
+					"autofocus": props.autofocus,
+					"onInput": inputHandler,
+					"onChange": changeHandler,
+					"onCompositionstart": compositionStartHandler,
+					"onCompositionend": compositionUpdateHandler
+				}, null),
+				showClose.value && createVNode("div", { "class": "px-auto-complete-close-wrapper" }, [hoverFlag.value && modelValue.value ? createVNode(times_circle_solid_default, {
+					"class": "px-auto-complete-icon",
+					"onClick": clearHandler
+				}, null) : createVNode("div", { "class": "px-auto-complete-icon-placeholder" }, null)]),
+				props.loading && createVNode("div", { "class": "px-auto-complete-loading-wrapper" }, [createVNode(spinner_third_solid_default, { "class": "px-auto-complete-icon px-animation__loading" }, null)]),
+				slots.suffix && createVNode("div", { "class": "px-auto-complete-suffix-wrapper" }, [slots.suffix()]),
+				createVNode("canvas", {
+					"ref": canvasRef,
+					"class": "px-auto-complete-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` },
+				"destroyOnHide": props.optionsDestroyOnHide
+			}, {
+				default: () => h("div", {
+					ref: wrapperRef,
+					class: [
+						"pixelium px-auto-complete",
+						sizeComputed.value && `px-auto-complete__${sizeComputed.value}`,
+						shapeComputed.value && `px-auto-complete__${shapeComputed.value}`,
+						{ "px-auto-complete__inner": innerInputGroup.value },
+						{ "px-auto-complete__disabled": disabledComputed.value }
+					],
+					onClick: focusInputHandler,
+					onMouseenter: mouseenterHandler,
+					onMouseleave: mouseleaveHandler,
+					onFocusout: blurHandler,
+					onFocusin: focusHandler,
+					...scopeObj,
+					...attrs
+				}, [Inner]),
+				content: () => optionsFiltered.value.length ? createVNode(option_list_default, {
+					"options": optionsFiltered.value,
+					"onSelect": selectHandler,
+					"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-auto-complete-empty" }, [createVNode(empty_default, null, null)])
+			});
+		};
+	}
 });
-const TimesCircleSolid = /* @__PURE__ */ defineComponent({
-  props: {
-    size: {},
-    color: {}
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "svg",
-        {
-          class: "px-icon-hn",
-          style: normalizeStyle({ color: props.color, fontSize: props.size + "px" }),
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 24 24"
-        },
-        [..._cache[0] || (_cache[0] = [
-          createElementVNode(
-            "path",
-            { d: "M22 9V7h-1V5h-1V4h-1V3h-2V2h-2V1H9v1H7v1H5v1H4v1H3v2H2v2H1v6h1v2h1v2h1v1h1v1h2v1h2v1h6v-1h2v-1h2v-1h1v-1h1v-2h1v-2h1V9zm-8 7v-1h-1v-1h-2v1h-1v1H9v1H8v-1H7v-1h1v-1h1v-1h1v-2H9v-1H8V9H7V8h1V7h1v1h1v1h1v1h2V9h1V8h1V7h1v1h1v1h-1v1h-1v1h-1v2h1v1h1v1h1v1h-1v1h-1v-1z" },
-            null,
-            -1
-            /* CACHED */
-          )
-        ])],
-        4
-        /* STYLE */
-      );
-    };
-  }
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "AutoComplete"
-  },
-  __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
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    showPopoverEmpty: {
-      type: Boolean,
-      default: false
-    },
-    shouldShowPopover: {
-      type: Function
-    },
-    filter: {
-      type: Function
-    },
-    append: {
-      type: Boolean,
-      default: false
-    },
-    size: {
-      default: "medium"
-    },
-    shape: {
-      default: "default"
-    },
-    borderRadius: null,
-    status: {
-      default: "normal"
-    },
-    autofocus: {
-      type: Boolean
-    }
-  },
-  emits: ["input", "update:modelValue", "change", "clear", "blur", "focus", "select"],
-  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 [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
-      defaultField: "defaultValue",
-      transform: (e) => {
-        return e || "";
-      }
-    });
-    const wrapperRef = shallowRef(null);
-    const canvasRef = shallowRef(null);
-    const inputRef = shallowRef(null);
-    const triggerPopover = async () => {
-      await nextTick();
-      if (props.shouldShowPopover) {
-        popoverVisible.value = !!props.shouldShowPopover(modelValue.value || "", optionsFiltered.value);
-        return;
-      }
-      if (modelValue.value && (!props.showPopoverEmpty && optionsFiltered.value.length || props.showPopoverEmpty)) {
-        popoverVisible.value = true;
-      } else {
-        popoverVisible.value = false;
-      }
-    };
-    const closePopover = async () => {
-      popoverVisible.value = false;
-    };
-    const inputHandler = async (e) => {
-      e.stopPropagation();
-      const target = e.target;
-      const newValue = target.value;
-      modelValue.value = newValue;
-      if (isComposing.value) {
-        return;
-      }
-      emits("input", newValue, e);
-      await updateModelValue(newValue);
-      triggerPopover();
-    };
-    const clearHandler = async () => {
-      await updateModelValue("");
-      emits("change", "");
-      emits("clear", "");
-    };
-    const changeHandler = (e) => {
-      e.stopPropagation();
-      const target = e.target;
-      emits("change", target.value, e);
-    };
-    const focusMode = ref(false);
-    const blurHandler = () => {
-      focusMode.value = false;
-    };
-    const focusHandler = () => {
-      focusMode.value = true;
-    };
-    const focusInputHandler = () => {
-      var _a2;
-      (_a2 = inputRef.value) == null ? void 0 : _a2.focus();
-    };
-    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 selectHandler = async (value, option, e) => {
-      const nextValue = props.append ? modelValue.value + value : value;
-      await updateModelValue(nextValue);
-      closePopover();
-      emits("select", nextValue, option, e);
-    };
-    const slots = useSlots();
-    const optionsFiltered = computed(() => {
-      if (props.filter) {
-        return props.filter(modelValue.value || "", props.options || []);
-      }
-      if (!modelValue.value || !modelValue.value.trim()) {
-        return [];
-      }
-      return defaultFilter(modelValue.value, props.options || []);
-    });
-    __expose({
-      focus: () => {
-        var _a2;
-        (_a2 = inputRef.value) == null ? void 0 : _a2.focus();
-      },
-      blur: () => {
-        var _a2;
-        (_a2 = inputRef.value) == null ? void 0 : _a2.blur();
-      },
-      clear: () => clearHandler(),
-      select: () => {
-        var _a2;
-        (_a2 = inputRef.value) == null ? void 0 : _a2.select();
-      }
-    });
-    const popoverVisible = ref(false);
-    const popoverVisibleUpdateHandler = (value) => {
-      if (!value) {
-        popoverVisible.value = value;
-      }
-    };
-    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);
-    return () => {
-      const Inner = createVNode(Fragment, null, [slots.prefix && createVNode("div", {
-        "class": "px-auto-complete-prefix-wrapper"
-      }, [slots.prefix()]), createVNode("input", {
-        "ref": inputRef,
-        "class": "px-auto-complete-inner",
-        "value": modelValue.value,
-        "placeholder": props.placeholder,
-        "disabled": disabledComputed.value || props.readonly,
-        "autofocus": props.autofocus,
-        "onInput": inputHandler,
-        "onChange": changeHandler,
-        "onBlur": blurHandler,
-        "onFocus": focusHandler,
-        "onCompositionstart": compositionStartHandler,
-        "onCompositionend": compositionUpdateHandler
-      }, null), showClose.value && createVNode("div", {
-        "class": "px-auto-complete-close-wrapper"
-      }, [hoverFlag.value && modelValue.value ? createVNode(TimesCircleSolid, {
-        "class": "px-auto-complete-icon",
-        "onClick": clearHandler
-      }, null) : createVNode("div", {
-        "class": "px-auto-complete-icon-placeholder"
-      }, null)]), props.loading && createVNode("div", {
-        "class": "px-auto-complete-loading-wrapper"
-      }, [createVNode(SpinnerThirdSolid, {
-        "class": "px-auto-complete-icon px-animation__loading"
-      }, null)]), slots.suffix && createVNode("div", {
-        "class": "px-auto-complete-suffix-wrapper"
-      }, [slots.suffix()]), createVNode("canvas", {
-        "ref": canvasRef,
-        "class": "px-auto-complete-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$2, {
-        "placement": "bottom",
-        "offset": 0,
-        "width-equal": true,
-        "arrow": false,
-        "visible": popoverVisible.value,
-        "onUpdate:visible": popoverVisibleUpdateHandler,
-        "trigger": "click",
-        "contentStyle": {
-          padding: `${pixelSize}px`
-        }
-      }, {
-        default: () => h("div", {
-          ref: wrapperRef,
-          class: ["pixelium px-auto-complete", sizeComputed.value && `px-auto-complete__${sizeComputed.value}`, shapeComputed.value && `px-auto-complete__${shapeComputed.value}`, {
-            "px-auto-complete__inner": innerInputGroup.value
-          }, {
-            "px-auto-complete__disabled": disabledComputed.value
-          }],
-          onClick: focusInputHandler,
-          onMouseenter: mouseenterHandler,
-          onMouseleave: mouseleaveHandler,
-          ...scopeObj,
-          ...attrs
-        }, [Inner]),
-        content: () => optionsFiltered.value.length ? createVNode(_sfc_main$3, {
-          "options": optionsFiltered.value,
-          "onSelect": selectHandler
-        }, {
-          "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-auto-complete-empty"
-        }, [createVNode(_sfc_main$4, null, null)])
-      });
-      return Render;
-    };
-  }
-});
-export {
-  SpinnerThirdSolid as S,
-  TimesCircleSolid as T,
-  _sfc_main as _
-};
+export { auto_complete_default as t };