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

package/es/input-number/index.js

@@ -0,0 +1,543 @@
+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"
+};
+const _hoisted_2 = ["value", "placeholder", "disabled", "autofocus"];
+const _hoisted_3 = {
+  key: 2,
+  class: "px-input-number-close-wrapper"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "px-input-number-icon-placeholder"
+};
+const _hoisted_5 = {
+  key: 4,
+  class: "px-input-number-loading-wrapper"
+};
+const _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 */
+      );
+    };
+  }
+});
+export {
+  _sfc_main as _
+};