import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass } from "vue";
const _hoisted_1 = {
  key: 0,
  class: "stepper-input-wrap"
};
const _hoisted_2 = ["id", "name", "type", "min", "max", "step", "value", "readonly"];
const _hoisted_3 = {
  key: 1,
  class: "stepper-value"
};
function render(_ctx, _cache) {
  return _openBlock(), _createElementBlock("div", {
    ref: "elRef",
    class: _normalizeClass(_ctx.classes)
  }, [_createElementVNode("div", {
    class: "stepper-button-minus",
    onClick: _cache[0] || (_cache[0] = function () {
      return _ctx.onMinusClick && _ctx.onMinusClick(...arguments);
    })
  }), _ctx.input && !_ctx.buttonsOnly ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("input", {
    id: _ctx.inputId,
    name: _ctx.name,
    type: _ctx.inputType,
    min: _ctx.inputType === 'number' ? _ctx.min : undefined,
    max: _ctx.inputType === 'number' ? _ctx.max : undefined,
    step: _ctx.inputType === 'number' ? _ctx.step : undefined,
    value: _ctx.value,
    readonly: _ctx.inputReadonly,
    onInput: _cache[1] || (_cache[1] = function () {
      return _ctx.onInput && _ctx.onInput(...arguments);
    }),
    onChange: _cache[2] || (_cache[2] = function () {
      return _ctx.onChange && _ctx.onChange(...arguments);
    })
  }, null, 40, _hoisted_2)])) : _createCommentVNode("", true), !_ctx.input && !_ctx.buttonsOnly ? (_openBlock(), _createElementBlock("div", _hoisted_3, _toDisplayString(_ctx.value), 1)) : _createCommentVNode("", true), _createElementVNode("div", {
    class: "stepper-button-plus",
    onClick: _cache[3] || (_cache[3] = function () {
      return _ctx.onPlusClick && _ctx.onPlusClick(...arguments);
    })
  })], 2);
}
import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
import { classNames, noUndefinedProps } from '../shared/utils.js';
import { colorClasses, colorProps } from '../shared/mixins.js';
import { f7ready, f7 } from '../shared/f7.js';
export default {
  name: 'f7-stepper',
  render,
  props: {
    init: {
      type: Boolean,
      default: true
    },
    value: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    step: {
      type: Number,
      default: 1
    },
    formatValue: Function,
    name: String,
    inputId: String,
    input: {
      type: Boolean,
      default: true
    },
    inputType: {
      type: String,
      default: 'text'
    },
    inputReadonly: {
      type: Boolean,
      default: false
    },
    autorepeat: {
      type: Boolean,
      default: false
    },
    autorepeatDynamic: {
      type: Boolean,
      default: false
    },
    wraps: {
      type: Boolean,
      default: false
    },
    manualInputMode: {
      type: Boolean,
      default: false
    },
    decimalPoint: {
      type: Number,
      default: 4
    },
    buttonsEndInputMode: {
      type: Boolean,
      default: true
    },
    disabled: Boolean,
    buttonsOnly: Boolean,
    round: Boolean,
    roundMd: Boolean,
    roundIos: Boolean,
    fill: Boolean,
    fillMd: Boolean,
    fillIos: Boolean,
    large: Boolean,
    largeMd: Boolean,
    largeIos: Boolean,
    small: Boolean,
    smallMd: Boolean,
    smallIos: Boolean,
    raised: Boolean,
    raisedMd: Boolean,
    raisedIos: Boolean,
    ...colorProps
  },
  emits: ['input', 'change', 'stepper:minusclick', 'stepper:plusclick', 'stepper:change', 'update:value'],
  setup(props, _ref) {
    let {
      emit
    } = _ref;
    let f7Stepper = null;
    const elRef = ref(null);
    const increment = () => {
      if (!f7Stepper) return;
      f7Stepper.increment();
    };
    const decrement = () => {
      if (!f7Stepper) return;
      f7Stepper.decrement();
    };
    const setValue = newValue => {
      if (f7Stepper && f7Stepper.setValue) f7Stepper.setValue(newValue);
    };
    const getValue = () => {
      if (f7Stepper && f7Stepper.getValue) {
        return f7Stepper.getValue();
      }
      return undefined;
    };
    const onInput = event => {
      emit('input', event, f7Stepper);
    };
    const onChange = event => {
      emit('change', event, f7Stepper);
    };
    const onMinusClick = event => {
      emit('stepper:minusclick', event, f7Stepper);
    };
    const onPlusClick = event => {
      emit('stepper:plusclick', event, f7Stepper);
    };
    watch(() => props.value, newValue => {
      if (!f7Stepper) return;
      f7Stepper.setValue(newValue);
    });
    onMounted(() => {
      f7ready(() => {
        if (!props.init || !elRef.value) return;
        f7Stepper = f7.stepper.create(noUndefinedProps({
          el: elRef.value,
          min: props.min,
          max: props.max,
          value: props.value,
          step: props.step,
          formatValue: props.formatValue,
          autorepeat: props.autorepeat,
          autorepeatDynamic: props.autorepeatDynamic,
          wraps: props.wraps,
          manualInputMode: props.manualInputMode,
          decimalPoint: props.decimalPoint,
          buttonsEndInputMode: props.buttonsEndInputMode,
          on: {
            change(stepper, newValue) {
              emit('stepper:change', newValue);
              emit('update:value', newValue);
            }
          }
        }));
      });
    });
    onBeforeUnmount(() => {
      if (f7Stepper && f7Stepper.destroy) {
        f7Stepper.destroy();
      }
      f7Stepper = null;
    });
    const classes = computed(() => classNames('stepper', {
      disabled: props.disabled,
      'stepper-round': props.round,
      'stepper-round-ios': props.roundIos,
      'stepper-round-md': props.roundMd,
      'stepper-fill': props.fill,
      'stepper-fill-ios': props.fillIos,
      'stepper-fill-md': props.fillMd,
      'stepper-large': props.large,
      'stepper-large-ios': props.largeIos,
      'stepper-large-md': props.largeMd,
      'stepper-small': props.small,
      'stepper-small-ios': props.smallIos,
      'stepper-small-md': props.smallMd,
      'stepper-raised': props.raised,
      'stepper-raised-ios': props.raisedIos,
      'stepper-raised-md': props.raisedMd
    }, colorClasses(props)));
    return {
      elRef,
      classes,
      increment,
      decrement,
      setValue,
      getValue,
      onInput,
      onChange,
      onMinusClick,
      onPlusClick
    };
  }
};