@pixelium/web-vue 0.0.2 → 0.0.3-beta

package/es/input/index.js

@@ -1,432 +1,328 @@
 import './css.js'
-import { defineComponent, createElementBlock, openBlock, normalizeStyle, createElementVNode, getCurrentInstance, ref, inject, computed, shallowRef, useSlots, watch, onMounted, nextTick, normalizeClass, createCommentVNode, unref, renderSlot, withModifiers, createBlock, toDisplayString, createVNode } 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 { a as canvasPreprocess, c as calcPixelSize, 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 { N } from "../aside/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 { B as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
-import { u as useControlledMode } from "../share/hook/use-controlled-mode.js";
-const Eye = /* @__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: "M16 11h1v2h-1zM16 13v2h-1v1h-2v-1h1v-1h1v-1zM16 9v2h-1v-1h-1V9h-1V8h2v1zM11 16h2v1h-2zM11 15v1H9v-1H8v-2h1v1h1v1zM13 7v1h-1v3h-1v1H8v1H7v-2h1V9h1V8h2V7z" },
-            null,
-            -1
-            /* CACHED */
-          ),
-          createElementVNode(
-            "path",
-            { d: "M22 11V9h-1V8h-1V7h-1V6h-2V5H7v1H5v1H4v1H3v1H2v2H1v2h1v2h1v1h1v1h1v1h2v1h10v-1h2v-1h1v-1h1v-1h1v-2h1v-2zm-1 3h-1v1h-1v1h-1v1h-2v1H8v-1H7v-1H5v-1H4v-1H3v-4h1V9h1V8h1V7h2V6h8v1h2v1h1v1h1v1h1z" },
-            null,
-            -1
-            /* CACHED */
-          )
-        ])],
-        4
-        /* STYLE */
-      );
-    };
-  }
-});
-const EyeCross = /* @__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: "M15 13h1v2h-1v1h-2v-1h1v-1h1zM16 11h1v2h-1z" },
-            null,
-            -1
-            /* CACHED */
-          ),
-          createElementVNode(
-            "path",
-            { d: "M23 11v2h-1v2h-1v1h-1v1h-1v1h-2v1H9v-1h7v-1h2v-1h1v-1h1v-1h1v-4h-1V9h-1V8h2v1h1v2zM2 13H1v-2h1V9h1V8h1V7h1V6h2V5h8v1H8v1H6v1H5v1H4v1H3v4h1v1h1v1H3v-1H2z" },
-            null,
-            -1
-            /* CACHED */
-          ),
-          createElementVNode(
-            "path",
-            { d: "M13 7v1h-1v1h-1v1h-1v1H9v1H8v1H7v-2h1V9h1V8h2V7zM9 17H8v1H7v1H6v1H5v1H4v1H3v-1H2v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1V9h1V8h1V7h1V6h1V5h1V4h1V3h1V2h1v1h1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1H9zM11 16h2v1h-2z" },
-            null,
-            -1
-            /* CACHED */
-          )
-        ])],
-        4
-        /* STYLE */
-      );
-    };
-  }
-});
-const _hoisted_1 = {
-  key: 0,
-  class: "px-input-prefix-wrapper"
+import { V as spinner_third_solid_default, _ as E, l as times_circle_solid_default, o as eye_cross_default, s as eye_default } from "../vendor.js";
+import { t as BORDER_CORNER_RAD_RANGE } from "../share/const/index.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 drawBorder } from "./draw.js";
+import { t as useComposition } from "../share/hook/use-composition.js";
+import { t as useControlledMode } from "../share/hook/use-controlled-mode.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, inject, nextTick, normalizeClass, onMounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, unref, useSlots, watch, withModifiers } from "vue";
+var _hoisted_1 = {
+	key: 0,
+	class: "px-input-prefix-wrapper"
 };
-const _hoisted_2 = ["value", "placeholder", "disabled", "autofocus", "type"];
-const _hoisted_3 = {
-  key: 1,
-  class: "px-input-close-wrapper"
+var _hoisted_2 = [
+	"value",
+	"placeholder",
+	"disabled",
+	"autofocus",
+	"type"
+];
+var _hoisted_3 = {
+	key: 1,
+	class: "px-input-close-wrapper"
 };
-const _hoisted_4 = {
-  key: 1,
-  class: "px-input-icon-placeholder"
+var _hoisted_4 = {
+	key: 1,
+	class: "px-input-icon-placeholder"
 };
-const _hoisted_5 = {
-  key: 2,
-  class: "px-input-password-wrapper"
+var _hoisted_5 = {
+	key: 2,
+	class: "px-input-password-wrapper"
 };
-const _hoisted_6 = {
-  key: 3,
-  class: "px-input-count-wrapper"
+var _hoisted_6 = {
+	key: 3,
+	class: "px-input-count-wrapper"
 };
-const _hoisted_7 = {
-  key: 4,
-  class: "px-input-loading-wrapper"
+var _hoisted_7 = {
+	key: 4,
+	class: "px-input-loading-wrapper"
 };
-const _hoisted_8 = {
-  key: 5,
-  class: "px-input-suffix-wrapper"
+var _hoisted_8 = {
+	key: 5,
+	class: "px-input-suffix-wrapper"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "Input"
-  },
-  __name: "index",
-  props: {
-    modelValue: null,
-    defaultValue: null,
-    placeholder: null,
-    password: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    readonly: { type: Boolean, default: false },
-    clearable: { type: Boolean, default: false },
-    loading: { type: Boolean, default: false },
-    size: { default: "medium" },
-    shape: { default: "default" },
-    borderRadius: null,
-    maxLength: null,
-    showCount: { type: Boolean, default: false },
-    countGraphemes: { type: Function },
-    sliceGraphemes: { type: Function },
-    status: { default: "normal" },
-    autofocus: { type: Boolean },
-    nativeType: null
-  },
-  emits: ["input", "update:modelValue", "change", "clear", "blur", "focus"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    var _a;
-    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 [inputValue, updateInputValue] = useControlledMode("modelValue", props, emits, {
-      defaultField: "defaultValue",
-      transform: (nextValue) => {
-        return nextValue || "";
-      }
-    });
-    const wrapperRef = shallowRef(null);
-    const canvasRef = shallowRef(null);
-    const inputRef = shallowRef(null);
-    const currentLength = computed(() => {
-      return props.countGraphemes ? props.countGraphemes(inputValue.value) : inputValue.value.length;
-    });
-    const inputHandler = async (e) => {
-      const target = e.target;
-      let newValue = target.value;
-      inputValue.value = newValue;
-      if (isComposing.value) {
-        return;
-      }
-      emits("input", newValue, e);
-      if (props.maxLength) {
-        if (props.countGraphemes && props.sliceGraphemes) {
-          await nextTick();
-          newValue = props.sliceGraphemes(inputValue.value, props.maxLength);
-        } else {
-          newValue = inputValue.value.slice(0, props.maxLength);
-        }
-      }
-      updateInputValue(newValue);
-    };
-    const clearHandler = async () => {
-      await updateInputValue("");
-      emits("change", "");
-      emits("clear", "");
-    };
-    const changeHandler = (e) => {
-      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 showPassword = ref(false);
-    const toggleShowPassword = () => {
-      showPassword.value = !showPassword.value;
-    };
-    const typeComputed = computed(() => {
-      if (props.nativeType) {
-        return props.nativeType;
-      }
-      if (props.password) {
-        return showPassword.value ? "text" : "password";
-      }
-      return "text";
-    });
-    const slots = useSlots();
-    __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 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 pixelSize = calcPixelSize();
-      const borderRadius = getBorderRadius(
-        canvas,
-        pixelSize,
-        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, pixelSize);
-      const rad = BORDER_CORNER_RAD_RANGE;
-      drawBorder(
-        ctx,
-        width,
-        height,
-        center,
-        borderRadius,
-        rad,
-        borderColor,
-        pixelSize,
-        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 (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(["pixelium px-input", {
-            [`px-input__${sizeComputed.value}`]: !!sizeComputed.value,
-            [`px-input__${shapeComputed.value}`]: !!shapeComputed.value,
-            "px-input__inner": innerInputGroup.value,
-            "px-input__disabled": !!disabledComputed.value
-          }]),
-          ref_key: "wrapperRef",
-          ref: wrapperRef,
-          onClick: focusInputHandler,
-          onMouseenter: mouseenterHandler,
-          onMouseleave: mouseleaveHandler
-        },
-        [
-          unref(slots).prefix ? (openBlock(), createElementBlock("div", _hoisted_1, [
-            renderSlot(_ctx.$slots, "prefix")
-          ])) : createCommentVNode("v-if", true),
-          createElementVNode("input", {
-            class: "px-input-inner",
-            value: unref(inputValue),
-            ref_key: "inputRef",
-            ref: inputRef,
-            placeholder: props.placeholder,
-            disabled: disabledComputed.value || props.readonly,
-            autofocus: __props.autofocus,
-            type: typeComputed.value,
-            onInput: withModifiers(inputHandler, ["stop"]),
-            onChange: withModifiers(changeHandler, ["stop"]),
-            onBlur: blurHandler,
-            onFocus: focusHandler,
-            onCompositionstart: _cache[0] || (_cache[0] = //@ts-ignore
-            (...args) => unref(compositionStartHandler) && unref(compositionStartHandler)(...args)),
-            onCompositionend: _cache[1] || (_cache[1] = //@ts-ignore
-            (...args) => unref(compositionUpdateHandler) && unref(compositionUpdateHandler)(...args))
-          }, null, 40, _hoisted_2),
-          showClose.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
-            hoverFlag.value && !!unref(inputValue) ? (openBlock(), createBlock(unref(TimesCircleSolid), {
-              key: 0,
-              class: "px-input-icon",
-              onClick: clearHandler
-            })) : (openBlock(), createElementBlock("div", _hoisted_4))
-          ])) : createCommentVNode("v-if", true),
-          props.password ? (openBlock(), createElementBlock("div", _hoisted_5, [
-            !showPassword.value ? (openBlock(), createBlock(unref(Eye), {
-              key: 0,
-              class: "px-input-icon",
-              onClick: toggleShowPassword
-            })) : (openBlock(), createBlock(unref(EyeCross), {
-              key: 1,
-              class: "px-input-icon",
-              onClick: toggleShowPassword
-            }))
-          ])) : createCommentVNode("v-if", true),
-          props.showCount ? (openBlock(), createElementBlock("div", _hoisted_6, [
-            renderSlot(_ctx.$slots, "count", {
-              value: unref(inputValue),
-              count: currentLength.value,
-              maxLength: props.maxLength
-            }, () => [
-              createElementVNode(
-                "span",
-                null,
-                toDisplayString(currentLength.value) + toDisplayString(unref(N)(props.maxLength) ? "" : " / " + props.maxLength),
-                1
-                /* TEXT */
-              )
-            ])
-          ])) : createCommentVNode("v-if", true),
-          props.loading ? (openBlock(), createElementBlock("div", _hoisted_7, [
-            createVNode(unref(SpinnerThirdSolid), { class: "px-input-icon px-animation__loading" })
-          ])) : createCommentVNode("v-if", true),
-          unref(slots).suffix ? (openBlock(), createElementBlock("div", _hoisted_8, [
-            renderSlot(_ctx.$slots, "suffix")
-          ])) : createCommentVNode("v-if", true),
-          createElementVNode(
-            "canvas",
-            {
-              class: "px-input-canvas",
-              ref_key: "canvasRef",
-              ref: canvasRef
-            },
-            null,
-            512
-            /* NEED_PATCH */
-          )
-        ],
-        34
-        /* CLASS, NEED_HYDRATION */
-      );
-    };
-  }
+var input_default = /* @__PURE__ */ defineComponent({
+	name: "Input",
+	__name: "index",
+	props: {
+		modelValue: null,
+		defaultValue: null,
+		placeholder: null,
+		password: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		size: null,
+		shape: null,
+		borderRadius: null,
+		maxLength: null,
+		showCount: {
+			type: Boolean,
+			default: false
+		},
+		countGraphemes: { type: Function },
+		sliceGraphemes: { type: Function },
+		status: { default: "normal" },
+		autofocus: { type: Boolean },
+		nativeType: null
+	},
+	emits: [
+		"input",
+		"update:modelValue",
+		"change",
+		"clear",
+		"blur",
+		"focus"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		var _instance$parent;
+		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) : [
+			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 [inputValue, updateInputValue] = useControlledMode("modelValue", props, emits, {
+			defaultField: "defaultValue",
+			transform: (nextValue) => {
+				return nextValue || "";
+			}
+		});
+		const wrapperRef = shallowRef(null);
+		const canvasRef = shallowRef(null);
+		const inputRef = shallowRef(null);
+		const currentLength = computed(() => {
+			return props.countGraphemes ? props.countGraphemes(inputValue.value) : inputValue.value.length;
+		});
+		const inputHandler = async (e) => {
+			let newValue = e.target.value;
+			inputValue.value = newValue;
+			if (isComposing.value) return;
+			emits("input", newValue, e);
+			if (props.maxLength) if (props.countGraphemes && props.sliceGraphemes) {
+				await nextTick();
+				newValue = props.sliceGraphemes(inputValue.value, props.maxLength);
+			} else newValue = inputValue.value.slice(0, props.maxLength);
+			updateInputValue(newValue);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.inputHandler();
+		};
+		const clearHandler = async () => {
+			await updateInputValue("");
+			emits("change", "");
+			emits("clear", "");
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const changeHandler = (e) => {
+			const target = e.target;
+			emits("change", target.value, e);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const focusMode = ref(false);
+		const blurHandler = (e) => {
+			focusMode.value = false;
+			emits("blur", e);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.blurHandler();
+		};
+		const focusHandler = (e) => {
+			focusMode.value = true;
+			emits("focus", e);
+		};
+		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 showPassword = ref(false);
+		const toggleShowPassword = () => {
+			showPassword.value = !showPassword.value;
+		};
+		const typeComputed = computed(() => {
+			if (props.nativeType) return props.nativeType;
+			if (props.password) return showPassword.value ? "text" : "password";
+			return "text";
+		});
+		const slots = useSlots();
+		__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();
+			}
+		});
+		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);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["pixelium px-input", {
+					[`px-input__${unref(sizeComputed)}`]: !!unref(sizeComputed),
+					[`px-input__${unref(shapeComputed)}`]: !!unref(shapeComputed),
+					"px-input__inner": innerInputGroup.value,
+					"px-input__disabled": !!unref(disabledComputed)
+				}]),
+				ref_key: "wrapperRef",
+				ref: wrapperRef,
+				onClick: focusInputHandler,
+				onMouseenter: mouseenterHandler,
+				onMouseleave: mouseleaveHandler,
+				onFocusout: blurHandler,
+				onFocusin: focusHandler
+			}, [
+				unref(slots).prefix ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("v-if", true),
+				createElementVNode("input", {
+					class: "px-input-inner",
+					value: unref(inputValue),
+					ref_key: "inputRef",
+					ref: inputRef,
+					placeholder: props.placeholder,
+					disabled: unref(disabledComputed) || unref(readonlyComputed),
+					autofocus: __props.autofocus,
+					type: typeComputed.value,
+					onInput: withModifiers(inputHandler, ["stop"]),
+					onChange: withModifiers(changeHandler, ["stop"]),
+					onCompositionstart: _cache[0] || (_cache[0] = (...args) => unref(compositionStartHandler) && unref(compositionStartHandler)(...args)),
+					onCompositionend: _cache[1] || (_cache[1] = (...args) => unref(compositionUpdateHandler) && unref(compositionUpdateHandler)(...args))
+				}, null, 40, _hoisted_2),
+				showClose.value ? (openBlock(), createElementBlock("div", _hoisted_3, [hoverFlag.value && !!unref(inputValue) ? (openBlock(), createBlock(unref(times_circle_solid_default), {
+					key: 0,
+					class: "px-input-icon",
+					onClick: clearHandler
+				})) : (openBlock(), createElementBlock("div", _hoisted_4))])) : createCommentVNode("v-if", true),
+				props.password ? (openBlock(), createElementBlock("div", _hoisted_5, [!showPassword.value ? (openBlock(), createBlock(unref(eye_default), {
+					key: 0,
+					class: "px-input-icon",
+					onClick: toggleShowPassword
+				})) : (openBlock(), createBlock(unref(eye_cross_default), {
+					key: 1,
+					class: "px-input-icon",
+					onClick: toggleShowPassword
+				}))])) : createCommentVNode("v-if", true),
+				props.showCount ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "count", {
+					value: unref(inputValue),
+					count: currentLength.value,
+					maxLength: props.maxLength
+				}, () => [createElementVNode("span", null, toDisplayString(currentLength.value) + toDisplayString(unref(E)(props.maxLength) ? "" : " / " + props.maxLength), 1)])])) : createCommentVNode("v-if", true),
+				props.loading ? (openBlock(), createElementBlock("div", _hoisted_7, [createVNode(unref(spinner_third_solid_default), { class: "px-input-icon px-animation__loading" })])) : createCommentVNode("v-if", true),
+				unref(slots).suffix ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("v-if", true),
+				createElementVNode("canvas", {
+					class: "px-input-canvas",
+					ref_key: "canvasRef",
+					ref: canvasRef
+				}, null, 512)
+			], 34);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { input_default as t };