import { createVNode as _createVNode } from "vue";
import { computed, defineComponent, ref, watch } from 'vue';
import InputNumber from '../../input-number';
import classNames from '../../_util/classNames';
var ColorSteppers = defineComponent({
  name: 'ColorSteppers',
  props: ['prefixCls', 'value', 'min', 'max', 'onChange', 'formatter'],
  setup: function setup(props) {
    var colorSteppersPrefixCls = computed(function () {
      return "".concat(props.prefixCls, "-steppers");
    });
    var stepValue = ref(props.value);
    watch(function () {
      return props.value;
    }, function (val) {
      if (!Number.isNaN(val)) {
        stepValue.value = val;
      }
    }, {
      immediate: true
    });
    return function () {
      return _createVNode(InputNumber, {
        "class": classNames(colorSteppersPrefixCls.value),
        "hideControls": true,
        "min": props.min,
        "max": props.max,
        "value": stepValue.value,
        "formatter": props.formatter,
        "size": "small",
        "onChange": function onChange(step) {
          var _props$onChange;
          if (!props.value) {
            stepValue.value = step || 0;
          }
          (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, step);
        }
      }, null);
    };
  }
});
export default ColorSteppers;