import { Fragment as _Fragment, withDirectives as _withDirectives, mergeProps as _mergeProps, vModelText as _vModelText, createVNode as _createVNode } from "vue";
// Styles
import "./VNumberInput.css";

// Components
import { VBtn } from "../../components/VBtn/index.mjs";
import { VDefaultsProvider } from "../../components/VDefaultsProvider/index.mjs";
import { VDivider } from "../../components/VDivider/index.mjs";
import { filterFieldProps, makeVFieldProps, VField } from "../../components/VField/VField.mjs";
import { makeVInputProps, VInput } from "../../components/VInput/VInput.mjs"; // Composables
import { makeFocusProps, useFocus } from "../../composables/focus.mjs";
import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
import { computed, ref } from 'vue';
import { filterInputAttrs, genericComponent, only, propsFactory, useRender } from "../../util/index.mjs"; // Types
const makeVNumberInputProps = propsFactory({
  controlVariant: {
    type: String,
    default: 'default'
  },
  inset: Boolean,
  hideInput: Boolean,
  min: Number,
  max: Number,
  step: Number,
  ...only(makeVInputProps(), ['density', 'disabled', 'focused', 'hideDetails', 'hint', 'label', 'persistentHint', 'readonly']),
  ...only(makeVFieldProps(), ['baseColor', 'bgColor', 'class', 'color', 'disabled', 'error', 'loading', 'reverse', 'rounded', 'style', 'theme', 'variant']),
  ...makeFocusProps()
}, 'VNumberInput');
export const VNumberInput = genericComponent()({
  name: 'VNumberInput',
  inheritAttrs: false,
  props: {
    ...makeVNumberInputProps(),
    modelValue: {
      type: [Number, String],
      default: 0
    }
  },
  emits: {
    'update:modelValue': val => true
  },
  setup(props, _ref) {
    let {
      attrs,
      emit,
      slots
    } = _ref;
    const model = useProxiedModel(props, 'modelValue');
    const {
      isFocused,
      focus,
      blur
    } = useFocus(props);
    const inputRef = ref();
    function onFocus() {
      if (!isFocused.value) focus();
    }
    const controlVariant = computed(() => {
      return props.hideInput ? 'stacked' : props.controlVariant;
    });
    function toggleUpDown() {
      let increment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
      if (increment) {
        inputRef.value?.stepUp();
      } else {
        inputRef.value?.stepDown();
      }
      if (inputRef.value) model.value = parseInt(inputRef.value.value, 10);
    }
    function onClickUp() {
      toggleUpDown();
    }
    function onClickDown() {
      toggleUpDown(false);
    }
    const incrementSlotProps = computed(() => ({
      click: onClickUp
    }));
    const decrementSlotProps = computed(() => ({
      click: onClickDown
    }));
    useRender(() => {
      const fieldProps = filterFieldProps(props);
      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
      const {
        modelValue: _,
        ...inputProps
      } = VInput.filterProps(props);
      function controlNode() {
        const defaultHeight = controlVariant.value === 'stacked' ? 'auto' : '100%';
        return _createVNode("div", {
          "class": "v-number-input__control"
        }, [!slots.decrement ? _createVNode(VBtn, {
          "flat": true,
          "key": "decrement-btn",
          "height": defaultHeight,
          "icon": "$expand",
          "size": "small",
          "onClick": onClickDown
        }, null) : _createVNode(VDefaultsProvider, {
          "key": "decrement-defaults",
          "defaults": {
            VBtn: {
              flat: true,
              height: defaultHeight,
              size: 'small',
              icon: '$expand'
            }
          }
        }, {
          default: () => [slots.decrement(decrementSlotProps.value)]
        }), _createVNode(VDivider, {
          "vertical": controlVariant.value !== 'stacked'
        }, null), !slots.increment ? _createVNode(VBtn, {
          "flat": true,
          "key": "increment-btn",
          "height": defaultHeight,
          "icon": "$collapse",
          "onClick": onClickUp,
          "size": "small"
        }, null) : _createVNode(VDefaultsProvider, {
          "key": "increment-defaults",
          "defaults": {
            VBtn: {
              flat: true,
              height: defaultHeight,
              size: 'small',
              icon: '$collapse'
            }
          }
        }, {
          default: () => [slots.increment(incrementSlotProps.value)]
        })]);
      }
      function dividerNode() {
        return !props.hideInput && !props.inset ? _createVNode(VDivider, {
          "vertical": true
        }, null) : undefined;
      }
      return _createVNode(VInput, _mergeProps({
        "class": ['v-number-input', {
          'v-number-input--default': controlVariant.value === 'default',
          'v-number-input--hide-input': props.hideInput,
          'v-number-input--inset': props.inset,
          'v-number-input--reverse': props.reverse,
          'v-number-input--split': controlVariant.value === 'split',
          'v-number-input--stacked': controlVariant.value === 'stacked'
        }, props.class]
      }, rootAttrs, inputProps, {
        "focused": isFocused.value,
        "style": props.style
      }), {
        ...slots,
        default: () => _createVNode(VField, _mergeProps(fieldProps, {
          "active": true,
          "focused": isFocused.value
        }), {
          ...slots,
          default: _ref2 => {
            let {
              props: {
                class: fieldClass,
                ...slotProps
              }
            } = _ref2;
            return _withDirectives(_createVNode("input", _mergeProps({
              "ref": inputRef,
              "type": "number",
              "onUpdate:modelValue": $event => model.value = $event,
              "class": fieldClass,
              "max": props.max,
              "min": props.min,
              "step": props.step,
              "onFocus": onFocus,
              "onBlur": blur
            }, inputAttrs), null), [[_vModelText, model.value]]);
          },
          'append-inner': controlVariant.value === 'split' ? () => _createVNode("div", {
            "class": "v-number-input__control"
          }, [_createVNode(VDivider, {
            "vertical": true
          }, null), _createVNode(VBtn, {
            "flat": true,
            "height": "100%",
            "icon": "$plus",
            "tile": true,
            "onClick": onClickUp
          }, null)]) : !props.reverse ? () => _createVNode(_Fragment, null, [dividerNode(), controlNode()]) : undefined,
          'prepend-inner': controlVariant.value === 'split' ? () => _createVNode("div", {
            "class": "v-number-input__control"
          }, [_createVNode(VBtn, {
            "flat": true,
            "height": "100%",
            "icon": "$minus",
            "tile": true,
            "onClick": onClickDown
          }, null), _createVNode(VDivider, {
            "vertical": true
          }, null)]) : props.reverse ? () => _createVNode(_Fragment, null, [controlNode(), dividerNode()]) : undefined
        })
      });
    });
  }
});
//# sourceMappingURL=VNumberInput.mjs.map