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

package/es/input-number/index.js

@@ -1,543 +1,435 @@
 import './css.js'
-import { defineComponent, createElementBlock, openBlock, normalizeStyle, createElementVNode, getCurrentInstance, ref, inject, computed, shallowRef, watch, useSlots, onMounted, nextTick, normalizeClass, createCommentVNode, unref, renderSlot, createBlock, withModifiers, 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 { T as TimesCircleSolid, S as SpinnerThirdSolid } from "../auto-complete/index.js";
-import { z, N, k, R } from "../aside/index.js";
-import { u as useComposition } from "../share/hook/use-composition.js";
-import { c as clamp } from "../share/util/common.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 Minus = /* @__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: "M1 11h22v2H1z" },
-            null,
-            -1
-            /* CACHED */
-          )
-        ])],
-        4
-        /* STYLE */
-      );
-    };
-  }
-});
-const Plus = /* @__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 11v2H13v10h-2V13H1v-2h10V1h2v10z" },
-            null,
-            -1
-            /* CACHED */
-          )
-        ])],
-        4
-        /* STYLE */
-      );
-    };
-  }
-});
-const _hoisted_1 = {
-  key: 0,
-  class: "px-input-number-prefix-wrapper"
+import { P as ke, T as R, V as spinner_third_solid_default, _ as E, a as minus_default, g as A, i as plus_default, l as times_circle_solid_default, v as F } from "../vendor.js";
+import { t as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
+import { i as fixedNumber } 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 drawBorder } from "./draw.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, inject, nextTick, normalizeClass, onMounted, openBlock, ref, renderSlot, shallowRef, unref, useSlots, watch, withModifiers } from "vue";
+var _hoisted_1 = {
+	key: 0,
+	class: "px-input-number-prefix-wrapper"
 };
-const _hoisted_2 = ["value", "placeholder", "disabled", "autofocus"];
-const _hoisted_3 = {
-  key: 2,
-  class: "px-input-number-close-wrapper"
+var _hoisted_2 = [
+	"value",
+	"placeholder",
+	"disabled",
+	"autofocus"
+];
+var _hoisted_3 = {
+	key: 2,
+	class: "px-input-number-close-wrapper"
 };
-const _hoisted_4 = {
-  key: 1,
-  class: "px-input-number-icon-placeholder"
+var _hoisted_4 = {
+	key: 1,
+	class: "px-input-number-icon-placeholder"
 };
-const _hoisted_5 = {
-  key: 4,
-  class: "px-input-number-loading-wrapper"
+var _hoisted_5 = {
+	key: 4,
+	class: "px-input-number-loading-wrapper"
 };
-const _hoisted_6 = {
-  key: 5,
-  class: "px-input-number-suffix-wrapper"
+var _hoisted_6 = {
+	key: 5,
+	class: "px-input-number-suffix-wrapper"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "InputNumber"
-  },
-  __name: "index",
-  props: {
-    modelValue: null,
-    defaultValue: null,
-    placeholder: null,
-    disabled: { type: Boolean, default: false },
-    readonly: { type: Boolean, default: false },
-    max: { default: Number.MAX_SAFE_INTEGER },
-    min: { default: Number.MIN_SAFE_INTEGER },
-    step: { default: 1 },
-    precision: null,
-    strickStep: { type: Boolean, default: false },
-    format: { type: Function },
-    allowInput: { type: Function },
-    parse: { type: Function },
-    clearable: { type: Boolean, default: false },
-    loading: { type: Boolean, default: false },
-    size: { default: "medium" },
-    shape: { default: "default" },
-    borderRadius: null,
-    buttonPlacement: { default: "end" },
-    status: { default: "normal" },
-    autofocus: { type: Boolean }
-  },
-  emits: ["input", "update:modelValue", "change", "clear", "blur", "focus"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    var _a;
-    const props = __props;
-    const emits = __emit;
-    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 reg4Number = /^[+-]?\d+(?:\.\d*)?$/;
-    const adjustValue = (value) => {
-      if (z(value)) {
-        value = 0;
-      }
-      if (k(props.precision)) {
-        value = parseFloat(value.toFixed(clamp(Math.round(props.precision), 0, 100)));
-      }
-      const min = props.min ?? Number.MIN_SAFE_INTEGER;
-      const max = props.max ?? Number.MAX_SAFE_INTEGER;
-      value = clamp(value, min, max);
-      if (props.strickStep && !R(props.step) && !z(props.step) && props.step !== 0) {
-        let valueWithStrickStep = Math.round(value / props.step) * props.step;
-        if (valueWithStrickStep < min) {
-          valueWithStrickStep = Math.ceil(value / props.step) * props.step;
-        }
-        if (valueWithStrickStep > max) {
-          valueWithStrickStep = Math.floor(value / props.step) * props.step;
-        }
-        value = valueWithStrickStep;
-      }
-      return value;
-    };
-    const formatNumberValue = (value) => {
-      if (props.format) {
-        return props.format(value);
-      }
-      if (z(value) || N(value)) {
-        return "";
-      }
-      const ans = k(props.precision) ? value.toFixed(clamp(Math.round(props.precision), 0, 100)) : value + "";
-      return ans;
-    };
-    const checkInputValue = (value) => {
-      if (props.allowInput) {
-        return props.allowInput(value);
-      }
-      if (!value.length) {
-        return true;
-      }
-      return reg4Number.test(value);
-    };
-    const formatEmitModelValue = (value) => {
-      if (props.parse) {
-        return props.parse(value);
-      }
-      if (!value.length) {
-        return 0;
-      }
-      return parseFloat(value);
-    };
-    const [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
-      defaultField: "defaultValue",
-      transform: (value) => {
-        if (!N(value)) {
-          const adjustedInitValue = adjustValue(value);
-          if (adjustedInitValue !== value) {
-            emits("update:modelValue", adjustedInitValue);
-          }
-          return adjustedInitValue;
-        }
-        return value;
-      }
-    });
-    const inputValue = ref(formatNumberValue(modelValue.value));
-    const [isComposing, compositionStartHandler, compositionUpdateHandler] = useComposition({
-      afterComposition: (e) => {
-        nextTick(() => {
-          inputHandler(e);
-        });
-      }
-    });
-    const wrapperRef = shallowRef(null);
-    const canvasRef = shallowRef(null);
-    const inputRef = shallowRef(null);
-    const setInputValue = (value) => {
-      inputValue.value = value;
-    };
-    watch(modelValue, (val) => {
-      if (!focusMode.value) {
-        setInputValue(formatNumberValue(val));
-      }
-    });
-    const inputHandler = async (e) => {
-      const target = e.target;
-      const newValue = target.value;
-      if (isComposing.value) {
-        return;
-      }
-      if (!checkInputValue(newValue)) {
-        if (inputRef.value) {
-          inputRef.value.value = inputValue.value;
-        }
-        return;
-      }
-      inputValue.value = newValue;
-      const nextValue = adjustValue(formatEmitModelValue(newValue));
-      emits("input", nextValue, e);
-      await updateModelValue(nextValue);
-    };
-    const clearHandler = async () => {
-      const defaultValue = adjustValue(0);
-      await updateModelValue(defaultValue);
-      setInputValue(formatNumberValue(modelValue.value));
-      emits("change", defaultValue);
-      emits("clear", defaultValue);
-    };
-    const changeHandler = (e) => {
-      const target = e.target;
-      const numberValue = formatEmitModelValue(target.value);
-      setInputValue(formatNumberValue(modelValue.value));
-      emits("change", numberValue, e);
-    };
-    const focusMode = ref(false);
-    const blurHandler = () => {
-      setInputValue(formatNumberValue(modelValue.value));
-      focusMode.value = false;
-    };
-    const focusHandler = () => {
-      focusMode.value = true;
-    };
-    const showClose = computed(() => {
-      return props.clearable && !disabledComputed.value && !props.readonly;
-    });
-    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 increaseDisabled = computed(() => {
-      return props.readonly || disabledComputed.value || modelValue.value && modelValue.value >= props.max;
-    });
-    const decreaseDisabled = computed(() => {
-      return props.readonly || disabledComputed.value || modelValue.value && modelValue.value <= props.min;
-    });
-    const increaseHandler = async () => {
-      if (increaseDisabled.value) {
-        return;
-      }
-      let currentValue = modelValue.value;
-      if (N(currentValue)) {
-        const defaultValue = adjustValue(0);
-        currentValue = defaultValue;
-      }
-      const nextValue = adjustValue(currentValue + props.step);
-      await updateModelValue(nextValue);
-      setInputValue(formatNumberValue(modelValue.value));
-    };
-    const decreaseHandler = async () => {
-      if (decreaseDisabled.value) {
-        return;
-      }
-      let currentValue = modelValue.value;
-      if (N(currentValue)) {
-        const defaultValue = adjustValue(0);
-        currentValue = defaultValue;
-      }
-      const nextValue = adjustValue(currentValue - props.step);
-      await updateModelValue(nextValue);
-      setInputValue(formatNumberValue(modelValue.value));
-    };
-    const showSettingSuffix = computed(() => {
-      return props.buttonPlacement === "both" || props.buttonPlacement === "both-reverse" || props.buttonPlacement === "end" || props.buttonPlacement === "end-reverse";
-    });
-    const showPlusSuffix = computed(() => {
-      return props.buttonPlacement === "both-reverse" || props.buttonPlacement === "end" || props.buttonPlacement === "end-reverse";
-    });
-    const showMinusSuffix = computed(() => {
-      return props.buttonPlacement === "both" || props.buttonPlacement === "end" || props.buttonPlacement === "end-reverse";
-    });
-    const showSettingPrefix = computed(() => {
-      return props.buttonPlacement === "both" || props.buttonPlacement === "both-reverse" || props.buttonPlacement === "start" || props.buttonPlacement === "start-reverse";
-    });
-    const showPlusPrefix = computed(() => {
-      return props.buttonPlacement === "both" || props.buttonPlacement === "start" || props.buttonPlacement === "start-reverse";
-    });
-    const showMinusPrefix = computed(() => {
-      return props.buttonPlacement === "both-reverse" || props.buttonPlacement === "start" || props.buttonPlacement === "start-reverse";
-    });
-    const subButtonMousedownHandler = (e) => {
-      if (e.detail > 1) {
-        e.preventDefault();
-      }
-    };
-    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 darkMode = useDarkMode();
-    watch(
-      [
-        () => props.status,
-        borderRadiusComputed,
-        shapeComputed,
-        sizeComputed,
-        disabledComputed,
-        () => slots,
-        first,
-        last,
-        darkMode,
-        hoverFlag,
-        focusMode
-      ],
-      () => {
-        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-number", {
-            [`px-input-number__${sizeComputed.value}`]: !!sizeComputed.value,
-            [`px-input-number__${shapeComputed.value}`]: !!shapeComputed.value,
-            "px-input-number__inner": innerInputGroup.value,
-            "px-input-number__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),
-          showSettingPrefix.value ? (openBlock(), createElementBlock(
-            "div",
-            {
-              key: 1,
-              class: normalizeClass([
-                "px-input-number-setting-prefix-wrapper",
-                props.buttonPlacement === "start-reverse" && "px-input-number-setting-prefix-wrapper__reverse"
-              ])
-            },
-            [
-              showPlusPrefix.value ? (openBlock(), createBlock(unref(Plus), {
-                key: 0,
-                class: normalizeClass(["px-input-number-icon", increaseDisabled.value && "px-input-number-icon__disabled"]),
-                onClick: increaseHandler,
-                onMousedown: subButtonMousedownHandler
-              }, null, 8, ["class"])) : createCommentVNode("v-if", true),
-              showMinusPrefix.value ? (openBlock(), createBlock(unref(Minus), {
-                key: 1,
-                class: normalizeClass(["px-input-number-icon", decreaseDisabled.value && "px-input-number-icon__disabled"]),
-                onClick: decreaseHandler,
-                onMousedown: subButtonMousedownHandler
-              }, null, 8, ["class"])) : createCommentVNode("v-if", true)
-            ],
-            2
-            /* CLASS */
-          )) : createCommentVNode("v-if", true),
-          createElementVNode("input", {
-            class: "px-input-number-inner",
-            value: inputValue.value,
-            ref_key: "inputRef",
-            ref: inputRef,
-            placeholder: props.placeholder,
-            disabled: disabledComputed.value || props.readonly,
-            autofocus: __props.autofocus,
-            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 && !!inputValue.value ? (openBlock(), createBlock(unref(TimesCircleSolid), {
-              key: 0,
-              class: "px-input-number-icon",
-              onClick: clearHandler
-            })) : (openBlock(), createElementBlock("div", _hoisted_4))
-          ])) : createCommentVNode("v-if", true),
-          showSettingSuffix.value ? (openBlock(), createElementBlock(
-            "div",
-            {
-              key: 3,
-              class: normalizeClass([
-                "px-input-number-setting-suffix-wrapper",
-                props.buttonPlacement === "end-reverse" && "px-input-number-setting-suffix-wrapper__reverse"
-              ])
-            },
-            [
-              showPlusSuffix.value ? (openBlock(), createBlock(unref(Plus), {
-                key: 0,
-                class: normalizeClass(["px-input-number-icon", increaseDisabled.value && "px-input-number-icon__disabled"]),
-                onClick: increaseHandler,
-                onMousedown: subButtonMousedownHandler
-              }, null, 8, ["class"])) : createCommentVNode("v-if", true),
-              showMinusSuffix.value ? (openBlock(), createBlock(unref(Minus), {
-                key: 1,
-                class: normalizeClass(["px-input-number-icon", decreaseDisabled.value && "px-input-number-icon__disabled"]),
-                onClick: decreaseHandler,
-                onMousedown: subButtonMousedownHandler
-              }, null, 8, ["class"])) : createCommentVNode("v-if", true)
-            ],
-            2
-            /* CLASS */
-          )) : createCommentVNode("v-if", true),
-          props.loading ? (openBlock(), createElementBlock("div", _hoisted_5, [
-            createVNode(unref(SpinnerThirdSolid), { class: "px-input-number-icon px-animation__loading" })
-          ])) : createCommentVNode("v-if", true),
-          unref(slots).suffix ? (openBlock(), createElementBlock("div", _hoisted_6, [
-            renderSlot(_ctx.$slots, "suffix")
-          ])) : createCommentVNode("v-if", true),
-          createElementVNode(
-            "canvas",
-            {
-              class: "px-input-number-canvas",
-              ref_key: "canvasRef",
-              ref: canvasRef
-            },
-            null,
-            512
-            /* NEED_PATCH */
-          )
-        ],
-        34
-        /* CLASS, NEED_HYDRATION */
-      );
-    };
-  }
+var input_number_default = /* @__PURE__ */ defineComponent({
+	name: "InputNumber",
+	__name: "index",
+	props: {
+		modelValue: null,
+		defaultValue: null,
+		placeholder: null,
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		max: { default: Number.MAX_SAFE_INTEGER },
+		min: { default: Number.MIN_SAFE_INTEGER },
+		step: { default: 1 },
+		precision: null,
+		strickStep: {
+			type: Boolean,
+			default: false
+		},
+		format: { type: Function },
+		allowInput: { type: Function },
+		parse: { type: Function },
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		size: null,
+		shape: null,
+		borderRadius: null,
+		buttonPlacement: { default: "end" },
+		status: { default: "normal" },
+		autofocus: { type: Boolean }
+	},
+	emits: [
+		"input",
+		"update:modelValue",
+		"change",
+		"clear",
+		"blur",
+		"focus"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		var _instance$parent;
+		const props = __props;
+		const emits = __emit;
+		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, 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", [
+			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 reg4Number = /^[+-]?\d+(?:\.\d*)?$/;
+		const adjustValue = (value) => {
+			if (F(value)) value = 0;
+			if (A(props.precision)) value = fixedNumber(value, props.precision);
+			const min = props.min ?? Number.MIN_SAFE_INTEGER;
+			const max = props.max ?? Number.MAX_SAFE_INTEGER;
+			value = ke(value, min, max);
+			if (props.strickStep && !R(props.step) && !F(props.step) && props.step !== 0) {
+				let valueWithStrickStep = Math.round(value / props.step) * props.step;
+				if (valueWithStrickStep < min) valueWithStrickStep = Math.ceil(value / props.step) * props.step;
+				if (valueWithStrickStep > max) valueWithStrickStep = Math.floor(value / props.step) * props.step;
+				value = valueWithStrickStep;
+			}
+			return value;
+		};
+		const formatNumberValue = (value) => {
+			if (props.format) return props.format(value);
+			if (F(value) || E(value)) return "";
+			return A(props.precision) ? value.toFixed(ke(Math.round(props.precision), 0, 100)) : value + "";
+		};
+		const checkInputValue = (value) => {
+			if (props.allowInput) return props.allowInput(value);
+			if (!value.length) return true;
+			return reg4Number.test(value);
+		};
+		const formatEmitModelValue = (value) => {
+			if (props.parse) return props.parse(value);
+			if (!value.length) return 0;
+			return parseFloat(value);
+		};
+		const [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
+			defaultField: "defaultValue",
+			transform: (value) => {
+				if (!E(value)) {
+					const adjustedInitValue = adjustValue(value);
+					if (adjustedInitValue !== value) emits("update:modelValue", adjustedInitValue);
+					return adjustedInitValue;
+				}
+				return value;
+			}
+		});
+		const inputValue = ref(formatNumberValue(modelValue.value));
+		const [isComposing, compositionStartHandler, compositionUpdateHandler] = useComposition({ afterComposition: (e) => {
+			nextTick(() => {
+				inputHandler(e);
+			});
+		} });
+		const wrapperRef = shallowRef(null);
+		const canvasRef = shallowRef(null);
+		const inputRef = shallowRef(null);
+		const plusRef = shallowRef(null);
+		const minusRef = shallowRef(null);
+		const setInputValue = (value) => {
+			inputValue.value = value;
+		};
+		watch(modelValue, (val) => {
+			if (!focusMode.value) setInputValue(formatNumberValue(val));
+		});
+		const inputHandler = async (e) => {
+			const newValue = e.target.value;
+			if (isComposing.value) return;
+			if (!checkInputValue(newValue)) {
+				if (inputRef.value) inputRef.value.value = inputValue.value;
+				return;
+			}
+			inputValue.value = newValue;
+			const nextValue = adjustValue(formatEmitModelValue(newValue));
+			emits("input", nextValue, e);
+			await updateModelValue(nextValue);
+		};
+		const clearHandler = async () => {
+			const defaultValue = adjustValue(0);
+			await updateModelValue(defaultValue);
+			setInputValue(formatNumberValue(modelValue.value));
+			emits("change", defaultValue);
+			emits("clear", defaultValue);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const changeHandler = (e) => {
+			const target = e.target;
+			const numberValue = formatEmitModelValue(target.value);
+			setInputValue(formatNumberValue(modelValue.value));
+			emits("change", numberValue, e);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const focusMode = ref(false);
+		const blurHandler = (e) => {
+			setInputValue(formatNumberValue(modelValue.value));
+			focusMode.value = false;
+			emits("blur", e);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.blurHandler();
+		};
+		const focusHandler = (e) => {
+			focusMode.value = true;
+			emits("focus", e);
+		};
+		const showClose = computed(() => {
+			return props.clearable && !disabledComputed.value && !readonlyComputed.value;
+		});
+		const slots = useSlots();
+		__expose({
+			focus: () => {
+				var _inputRef$value;
+				(_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 || _inputRef$value.focus();
+			},
+			blur: () => {
+				var _inputRef$value2;
+				(_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 || _inputRef$value2.blur();
+			},
+			clear: () => clearHandler(),
+			select: () => {
+				var _inputRef$value3;
+				(_inputRef$value3 = inputRef.value) === null || _inputRef$value3 === void 0 || _inputRef$value3.select();
+			}
+		});
+		const increaseDisabled = computed(() => {
+			return readonlyComputed.value || disabledComputed.value || !E(modelValue.value) && modelValue.value >= props.max;
+		});
+		const decreaseDisabled = computed(() => {
+			return readonlyComputed.value || disabledComputed.value || !E(modelValue.value) && modelValue.value <= props.min;
+		});
+		const increaseHandler = async () => {
+			if (increaseDisabled.value) return;
+			let currentValue = modelValue.value;
+			if (E(currentValue)) currentValue = adjustValue(0);
+			const nextValue = adjustValue(currentValue + props.step);
+			await updateModelValue(nextValue);
+			emits("change", nextValue);
+			setInputValue(formatNumberValue(modelValue.value));
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const decreaseHandler = async () => {
+			if (decreaseDisabled.value) return;
+			let currentValue = modelValue.value;
+			if (E(currentValue)) currentValue = adjustValue(0);
+			const nextValue = adjustValue(currentValue - props.step);
+			await updateModelValue(nextValue);
+			emits("change", nextValue);
+			setInputValue(formatNumberValue(modelValue.value));
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const showSettingSuffix = computed(() => {
+			return props.buttonPlacement === "both" || props.buttonPlacement === "both-reverse" || props.buttonPlacement === "end" || props.buttonPlacement === "end-reverse";
+		});
+		const showPlusSuffix = computed(() => {
+			return props.buttonPlacement === "both-reverse" || props.buttonPlacement === "end" || props.buttonPlacement === "end-reverse";
+		});
+		const showMinusSuffix = computed(() => {
+			return props.buttonPlacement === "both" || props.buttonPlacement === "end" || props.buttonPlacement === "end-reverse";
+		});
+		const showSettingPrefix = computed(() => {
+			return props.buttonPlacement === "both" || props.buttonPlacement === "both-reverse" || props.buttonPlacement === "start" || props.buttonPlacement === "start-reverse";
+		});
+		const showPlusPrefix = computed(() => {
+			return props.buttonPlacement === "both" || props.buttonPlacement === "start" || props.buttonPlacement === "start-reverse";
+		});
+		const showMinusPrefix = computed(() => {
+			return props.buttonPlacement === "both-reverse" || props.buttonPlacement === "start" || props.buttonPlacement === "start-reverse";
+		});
+		const subButtonMousedownHandler = (e) => {
+			if (e.detail > 1) e.preventDefault();
+		};
+		const focusInputHandler = (e) => {
+			var _inputRef$value4, _inputRef$value5;
+			const target = e.target;
+			const plusIcon = plusRef.value.$el;
+			const minusIcon = minusRef.value.$el;
+			if (((_inputRef$value4 = inputRef.value) === null || _inputRef$value4 === void 0 ? void 0 : _inputRef$value4.contains(target)) || (minusIcon === null || minusIcon === void 0 ? void 0 : minusIcon.contains(target)) || (plusIcon === null || plusIcon === void 0 ? void 0 : plusIcon.contains(target))) return;
+			(_inputRef$value5 = inputRef.value) === null || _inputRef$value5 === void 0 || _inputRef$value5.focus();
+		};
+		const hoverFlag = ref(false);
+		const mouseenterHandler = () => {
+			hoverFlag.value = true;
+		};
+		const mouseleaveHandler = () => {
+			hoverFlag.value = false;
+		};
+		watch([
+			statusComputed,
+			borderRadiusComputed,
+			shapeComputed,
+			sizeComputed,
+			readonlyComputed,
+			disabledComputed,
+			() => slots,
+			first,
+			last,
+			useDarkMode(),
+			hoverFlag,
+			focusMode,
+			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, 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-number", {
+					[`px-input-number__${unref(sizeComputed)}`]: !!unref(sizeComputed),
+					[`px-input-number__${unref(shapeComputed)}`]: !!unref(shapeComputed),
+					"px-input-number__inner": innerInputGroup.value,
+					"px-input-number__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),
+				showSettingPrefix.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(["px-input-number-setting-prefix-wrapper", props.buttonPlacement === "start-reverse" && "px-input-number-setting-prefix-wrapper__reverse"])
+				}, [showPlusPrefix.value ? (openBlock(), createBlock(unref(plus_default), {
+					key: 0,
+					class: normalizeClass(["px-input-number-icon", increaseDisabled.value && "px-input-number-icon__disabled"]),
+					onClick: increaseHandler,
+					onMousedown: subButtonMousedownHandler,
+					tabindex: unref(disabledComputed) || unref(readonlyComputed) || increaseDisabled.value ? -1 : 0,
+					ref_key: "plusRef",
+					ref: plusRef
+				}, null, 8, ["tabindex", "class"])) : createCommentVNode("v-if", true), showMinusPrefix.value ? (openBlock(), createBlock(unref(minus_default), {
+					key: 1,
+					class: normalizeClass(["px-input-number-icon", decreaseDisabled.value && "px-input-number-icon__disabled"]),
+					onClick: decreaseHandler,
+					onMousedown: subButtonMousedownHandler,
+					tabindex: unref(disabledComputed) || unref(readonlyComputed) || decreaseDisabled.value ? -1 : 0,
+					ref_key: "minusRef",
+					ref: minusRef
+				}, null, 8, ["tabindex", "class"])) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true),
+				createElementVNode("input", {
+					class: "px-input-number-inner",
+					value: inputValue.value,
+					ref_key: "inputRef",
+					ref: inputRef,
+					placeholder: props.placeholder,
+					disabled: unref(disabledComputed) || unref(readonlyComputed),
+					autofocus: __props.autofocus,
+					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 && !!inputValue.value ? (openBlock(), createBlock(unref(times_circle_solid_default), {
+					key: 0,
+					class: "px-input-number-icon",
+					onClick: clearHandler
+				})) : (openBlock(), createElementBlock("div", _hoisted_4))])) : createCommentVNode("v-if", true),
+				showSettingSuffix.value ? (openBlock(), createElementBlock("div", {
+					key: 3,
+					class: normalizeClass(["px-input-number-setting-suffix-wrapper", props.buttonPlacement === "end-reverse" && "px-input-number-setting-suffix-wrapper__reverse"])
+				}, [showPlusSuffix.value ? (openBlock(), createBlock(unref(plus_default), {
+					key: 0,
+					class: normalizeClass(["px-input-number-icon", increaseDisabled.value && "px-input-number-icon__disabled"]),
+					onClick: increaseHandler,
+					onMousedown: subButtonMousedownHandler,
+					tabindex: unref(disabledComputed) || unref(readonlyComputed) || increaseDisabled.value ? -1 : 0,
+					ref_key: "plusRef",
+					ref: plusRef
+				}, null, 8, ["tabindex", "class"])) : createCommentVNode("v-if", true), showMinusSuffix.value ? (openBlock(), createBlock(unref(minus_default), {
+					key: 1,
+					class: normalizeClass(["px-input-number-icon", decreaseDisabled.value && "px-input-number-icon__disabled"]),
+					onClick: decreaseHandler,
+					onMousedown: subButtonMousedownHandler,
+					tabindex: unref(disabledComputed) || unref(readonlyComputed) || decreaseDisabled.value ? -1 : 0,
+					ref_key: "minusRef",
+					ref: minusRef
+				}, null, 8, ["tabindex", "class"])) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true),
+				props.loading ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(unref(spinner_third_solid_default), { class: "px-input-number-icon px-animation__loading" })])) : createCommentVNode("v-if", true),
+				unref(slots).suffix ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("v-if", true),
+				createElementVNode("canvas", {
+					class: "px-input-number-canvas",
+					ref_key: "canvasRef",
+					ref: canvasRef
+				}, null, 512)
+			], 34);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { input_number_default as t };