comic-plus/es/components/input-number/src/main.vue.mjs

<p align="center"> <img width="200px" src="./logo.png"/> </p>

import { defineComponent, inject, computed, ref, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, unref } from "vue";
import "../style/input-number.css";
import "../../form-common.css";
import { FORM_PROVIDE } from "../../form/src/type.mjs";
import { useGlobal } from "../../../utils/config.mjs";
import { isNumber } from "../../../utils/typescript.mjs";
import "@vueuse/core";
import { useItemValidate } from "../../../hooks/validate.mjs";
import { inputNumberProps, inputNumberEmits } from "./main.props.mjs";
import "../../../icons/index.mjs";
import { Minus, Plus } from "../../../icons/components/components.mjs";
const _hoisted_1 = { class: "cu-input-number__content" };
const _hoisted_2 = ["min", "max", "disabled", "value"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "CuInputNumber"
  },
  __name: "main",
  props: inputNumberProps,
  emits: inputNumberEmits,
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const { itemValidate } = useItemValidate();
    const { globalSize } = useGlobal();
    const form = inject(FORM_PROVIDE, void 0);
    const currentSize = computed(() => {
      return props.size ?? (form == null ? void 0 : form.props.size) ?? (globalSize == null ? void 0 : globalSize.value);
    });
    const currentValue = ref(props.modelValue);
    function change(e) {
      currentValue.value = Number(e.target.value);
      validateValue();
      emit("update:modelValue", currentValue.value);
      emit("change", currentValue.value);
      itemValidate("change");
    }
    function validateValue() {
      if (isNumber(props.min) && currentValue.value < props.min) {
        currentValue.value = props.min;
      }
      if (isNumber(props.max) && currentValue.value > props.max) {
        currentValue.value = props.max;
      }
    }
    function valuePlus() {
      if (props.disabled) return;
      if (isNumber(props.max) && currentValue.value > props.max) return;
      currentValue.value += props.step;
      validateValue();
      emit("update:modelValue", currentValue.value);
      emit("change", currentValue.value);
      itemValidate("change");
    }
    function valueMinus() {
      if (props.disabled) return;
      if (isNumber(props.min) && currentValue.value < props.min) return;
      currentValue.value -= props.step;
      validateValue();
      emit("update:modelValue", currentValue.value);
      emit("change", currentValue.value);
      itemValidate("change");
    }
    function blur(e) {
      emit("blur", e);
      itemValidate("blur");
    }
    watch(
      () => props.modelValue,
      (val) => {
        currentValue.value = val;
      }
    );
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("span", {
        class: normalizeClass(["cu-input-number", [{ "is-disabled": _ctx.disabled }, currentSize.value]])
      }, [
        createElementVNode("span", {
          class: normalizeClass(["cu-input-number__minus", { disabled: currentValue.value <= _ctx.min }]),
          onClick: valueMinus
        }, [
          createVNode(unref(Minus))
        ], 2),
        createElementVNode("span", _hoisted_1, [
          createElementVNode("input", {
            type: "number",
            class: "cu-input__inner",
            min: _ctx.min,
            max: _ctx.max,
            disabled: _ctx.disabled,
            value: _ctx.modelValue,
            onChange: change,
            onFocus: _cache[0] || (_cache[0] = ($event) => emit("focus", $event)),
            onBlur: blur
          }, null, 40, _hoisted_2)
        ]),
        createElementVNode("span", {
          class: normalizeClass(["cu-input-number__plus", { disabled: currentValue.value >= _ctx.max }]),
          onClick: valuePlus
        }, [
          createVNode(unref(Plus))
        ], 2)
      ], 2);
    };
  }
});
export {
  _sfc_main as default
};