@xenknight/framework7 0.0.2

package/components/stepper/stepper-class.js

@@ -0,0 +1,403 @@
+import $ from '../../shared/dom7.js';
+import { extend, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
+class Stepper extends Framework7Class {
+  constructor(app, params) {
+    super(params, [app]);
+    const stepper = this;
+    const defaults = {
+      el: null,
+      inputEl: null,
+      valueEl: null,
+      value: 0,
+      formatValue: null,
+      step: 1,
+      min: 0,
+      max: 100,
+      watchInput: true,
+      autorepeat: false,
+      autorepeatDynamic: false,
+      wraps: false,
+      manualInputMode: false,
+      decimalPoint: 4,
+      buttonsEndInputMode: true
+    };
+
+    // Extend defaults with modules params
+    stepper.useModulesParams(defaults);
+    stepper.params = extend(defaults, params);
+    if (stepper.params.value < stepper.params.min) {
+      stepper.params.value = stepper.params.min;
+    }
+    if (stepper.params.value > stepper.params.max) {
+      stepper.params.value = stepper.params.max;
+    }
+    const el = stepper.params.el;
+    if (!el) return stepper;
+    const $el = $(el);
+    if ($el.length === 0) return stepper;
+    if ($el[0].f7Stepper) return $el[0].f7Stepper;
+    let $inputEl;
+    if (stepper.params.inputEl) {
+      $inputEl = $(stepper.params.inputEl);
+    } else if ($el.find('.stepper-input-wrap').find('input, textarea').length) {
+      $inputEl = $el.find('.stepper-input-wrap').find('input, textarea').eq(0);
+    }
+    if ($inputEl && $inputEl.length) {
+      'step min max'.split(' ').forEach(paramName => {
+        if (!params[paramName] && $inputEl.attr(paramName)) {
+          stepper.params[paramName] = parseFloat($inputEl.attr(paramName));
+        }
+      });
+      const decimalPoint = parseInt(stepper.params.decimalPoint, 10);
+      if (Number.isNaN(decimalPoint)) {
+        stepper.params.decimalPoint = 0;
+      } else {
+        stepper.params.decimalPoint = decimalPoint;
+      }
+      const inputValue = parseFloat($inputEl.val());
+      if (typeof params.value === 'undefined' && !Number.isNaN(inputValue) && (inputValue || inputValue === 0)) {
+        stepper.params.value = inputValue;
+      }
+    }
+    let $valueEl;
+    if (stepper.params.valueEl) {
+      $valueEl = $(stepper.params.valueEl);
+    } else if ($el.find('.stepper-value').length) {
+      $valueEl = $el.find('.stepper-value').eq(0);
+    }
+    const $buttonPlusEl = $el.find('.stepper-button-plus');
+    const $buttonMinusEl = $el.find('.stepper-button-minus');
+    const {
+      step,
+      min,
+      max,
+      value,
+      decimalPoint
+    } = stepper.params;
+    extend(stepper, {
+      app,
+      $el,
+      el: $el[0],
+      $buttonPlusEl,
+      buttonPlusEl: $buttonPlusEl[0],
+      $buttonMinusEl,
+      buttonMinusEl: $buttonMinusEl[0],
+      $inputEl,
+      inputEl: $inputEl ? $inputEl[0] : undefined,
+      $valueEl,
+      valueEl: $valueEl ? $valueEl[0] : undefined,
+      step,
+      min,
+      max,
+      value,
+      decimalPoint,
+      typeModeChanged: false
+    });
+    $el[0].f7Stepper = stepper;
+
+    // Handle Events
+    const touchesStart = {};
+    let isTouched;
+    let isScrolling;
+    let preventButtonClick;
+    let intervalId;
+    let timeoutId;
+    let autorepeatAction = null;
+    let autorepeatInAction = false;
+    let manualInput = false;
+    function dynamicRepeat(current, progressions, startsIn, progressionStep, repeatEvery, action) {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        if (current === 1) {
+          preventButtonClick = true;
+          autorepeatInAction = true;
+        }
+        clearInterval(intervalId);
+        action();
+        intervalId = setInterval(() => {
+          action();
+        }, repeatEvery);
+        if (current < progressions) {
+          dynamicRepeat(current + 1, progressions, startsIn, progressionStep, repeatEvery / 2, action);
+        }
+      }, current === 1 ? startsIn : progressionStep);
+    }
+    function onTouchStart(e) {
+      if (isTouched) return;
+      if (manualInput) {
+        return;
+      }
+      if ($(e.target).closest($buttonPlusEl).length) {
+        autorepeatAction = 'increment';
+      } else if ($(e.target).closest($buttonMinusEl).length) {
+        autorepeatAction = 'decrement';
+      }
+      if (!autorepeatAction) return;
+      touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
+      touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
+      isTouched = true;
+      isScrolling = undefined;
+      const progressions = stepper.params.autorepeatDynamic ? 4 : 1;
+      dynamicRepeat(1, progressions, 500, 1000, 300, () => {
+        stepper[autorepeatAction]();
+      });
+    }
+    function onTouchMove(e) {
+      if (!isTouched) return;
+      if (manualInput) {
+        return;
+      }
+      const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
+      const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
+      if (typeof isScrolling === 'undefined' && !autorepeatInAction) {
+        isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x));
+      }
+      const distance = ((pageX - touchesStart.x) ** 2 + (pageY - touchesStart.y) ** 2) ** 0.5;
+      if (isScrolling || distance > 20) {
+        isTouched = false;
+        clearTimeout(timeoutId);
+        clearInterval(intervalId);
+      }
+    }
+    function onTouchEnd() {
+      clearTimeout(timeoutId);
+      clearInterval(intervalId);
+      autorepeatAction = null;
+      autorepeatInAction = false;
+      isTouched = false;
+    }
+    function onMinusClick() {
+      if (manualInput) {
+        if (stepper.params.buttonsEndInputMode) {
+          manualInput = false;
+          stepper.endTypeMode(true);
+        }
+        return;
+      }
+      if (preventButtonClick) {
+        preventButtonClick = false;
+        return;
+      }
+      stepper.decrement(true);
+    }
+    function onPlusClick() {
+      if (manualInput) {
+        if (stepper.params.buttonsEndInputMode) {
+          manualInput = false;
+          stepper.endTypeMode(true);
+        }
+        return;
+      }
+      if (preventButtonClick) {
+        preventButtonClick = false;
+        return;
+      }
+      stepper.increment(true);
+    }
+    function onInputClick(e) {
+      if (!e.target.readOnly && stepper.params.manualInputMode) {
+        manualInput = true;
+        if (typeof e.target.selectionStart === 'number') {
+          e.target.selectionStart = e.target.value.length;
+          e.target.selectionEnd = e.target.value.length;
+        }
+      }
+    }
+    function onInputKey(e) {
+      if (e.keyCode === 13 || e.which === 13) {
+        e.preventDefault();
+        manualInput = false;
+        stepper.endTypeMode();
+      }
+    }
+    function onInputBlur() {
+      manualInput = false;
+      stepper.endTypeMode(true);
+    }
+    function onInput(e) {
+      if (manualInput) {
+        stepper.typeValue(e.target.value);
+        return;
+      }
+      if (e.detail && e.detail.sentByF7Stepper) return;
+      stepper.setValue(e.target.value, true);
+    }
+    stepper.attachEvents = function attachEvents() {
+      $buttonMinusEl.on('click', onMinusClick);
+      $buttonPlusEl.on('click', onPlusClick);
+      if (stepper.params.watchInput && $inputEl && $inputEl.length) {
+        $inputEl.on('input', onInput);
+        $inputEl.on('click', onInputClick);
+        $inputEl.on('blur', onInputBlur);
+        $inputEl.on('keyup', onInputKey);
+      }
+      if (stepper.params.autorepeat) {
+        app.on('touchstart:passive', onTouchStart);
+        app.on('touchmove:active', onTouchMove);
+        app.on('touchend:passive', onTouchEnd);
+      }
+    };
+    stepper.detachEvents = function detachEvents() {
+      $buttonMinusEl.off('click', onMinusClick);
+      $buttonPlusEl.off('click', onPlusClick);
+      if (stepper.params.watchInput && $inputEl && $inputEl.length) {
+        $inputEl.off('input', onInput);
+        $inputEl.off('click', onInputClick);
+        $inputEl.off('blur', onInputBlur);
+        $inputEl.off('keyup', onInputKey);
+      }
+    };
+
+    // Install Modules
+    stepper.useModules();
+
+    // Init
+    stepper.init();
+    return stepper;
+  }
+  minus() {
+    return this.decrement();
+  }
+  plus() {
+    return this.increment();
+  }
+  decrement() {
+    const stepper = this;
+    return stepper.setValue(stepper.value - stepper.step, false, true);
+  }
+  increment() {
+    const stepper = this;
+    return stepper.setValue(stepper.value + stepper.step, false, true);
+  }
+  setValue(newValue, forceUpdate, withWraps) {
+    const stepper = this;
+    const {
+      step,
+      min,
+      max
+    } = stepper;
+    const oldValue = stepper.value;
+    let value = Math.round(newValue / step) * step;
+    if (stepper.params.wraps && withWraps) {
+      if (value > max) value = min;
+      if (value < min) value = max;
+    } else {
+      value = Math.max(Math.min(value, max), min);
+    }
+    if (Number.isNaN(value)) {
+      value = oldValue;
+    }
+    stepper.value = value;
+    const valueChanged = oldValue !== value;
+
+    // Events
+    if (!valueChanged && !forceUpdate) return stepper;
+    stepper.$el.trigger('stepper:change', stepper.value);
+    const formattedValue = stepper.formatValue(stepper.value);
+    if (stepper.$inputEl && stepper.$inputEl.length) {
+      stepper.$inputEl.val(formattedValue);
+      stepper.$inputEl.trigger('input change', {
+        sentByF7Stepper: true
+      });
+    }
+    if (stepper.$valueEl && stepper.$valueEl.length) {
+      stepper.$valueEl.html(formattedValue);
+    }
+    stepper.emit('local::change stepperChange', stepper, stepper.value);
+    return stepper;
+  }
+  endTypeMode(noBlur) {
+    const stepper = this;
+    const {
+      min,
+      max
+    } = stepper;
+    let value = parseFloat(stepper.value);
+    if (Number.isNaN(value)) value = 0;
+    value = Math.max(Math.min(value, max), min);
+    stepper.value = value;
+    if (!stepper.typeModeChanged) {
+      if (stepper.$inputEl && stepper.$inputEl.length && !noBlur) {
+        stepper.$inputEl.blur();
+      }
+      return stepper;
+    }
+    stepper.typeModeChanged = false;
+    stepper.$el.trigger('stepper:change', stepper.value);
+    const formattedValue = stepper.formatValue(stepper.value);
+    if (stepper.$inputEl && stepper.$inputEl.length) {
+      stepper.$inputEl.val(formattedValue);
+      stepper.$inputEl.trigger('input change', {
+        sentByF7Stepper: true
+      });
+      if (!noBlur) stepper.$inputEl.blur();
+    }
+    if (stepper.$valueEl && stepper.$valueEl.length) {
+      stepper.$valueEl.html(formattedValue);
+    }
+    stepper.emit('local::change stepperChange', stepper, stepper.value);
+    return stepper;
+  }
+  typeValue(value) {
+    const stepper = this;
+    stepper.typeModeChanged = true;
+    let inputTxt = String(value);
+    if (inputTxt.length === 1 && inputTxt === '-') return stepper;
+    if (inputTxt.lastIndexOf('.') + 1 === inputTxt.length || inputTxt.lastIndexOf(',') + 1 === inputTxt.length) {
+      if (inputTxt.lastIndexOf('.') !== inputTxt.indexOf('.') || inputTxt.lastIndexOf(',') !== inputTxt.indexOf(',')) {
+        inputTxt = inputTxt.slice(0, -1);
+        stepper.value = inputTxt;
+        stepper.$inputEl.val(stepper.value);
+        return stepper;
+      }
+    } else {
+      let newValue = parseFloat(inputTxt.replace(',', '.'));
+      if (newValue === 0) {
+        stepper.value = inputTxt.replace(',', '.');
+        stepper.$inputEl.val(stepper.value);
+        return stepper;
+      }
+      if (Number.isNaN(newValue)) {
+        stepper.value = 0;
+        stepper.$inputEl.val(stepper.value);
+        return stepper;
+      }
+      const powVal = 10 ** stepper.params.decimalPoint;
+      newValue = Math.round(newValue * powVal).toFixed(stepper.params.decimalPoint + 1) / powVal;
+      stepper.value = parseFloat(String(newValue).replace(',', '.'));
+      stepper.$inputEl.val(stepper.value);
+      return stepper;
+    }
+    stepper.value = inputTxt;
+    stepper.$inputEl.val(inputTxt);
+    return stepper;
+  }
+  getValue() {
+    return this.value;
+  }
+  formatValue(value) {
+    const stepper = this;
+    if (!stepper.params.formatValue) return value;
+    return stepper.params.formatValue.call(stepper, value);
+  }
+  init() {
+    const stepper = this;
+    stepper.attachEvents();
+    if (stepper.$valueEl && stepper.$valueEl.length) {
+      const formattedValue = stepper.formatValue(stepper.value);
+      stepper.$valueEl.html(formattedValue);
+    }
+    return stepper;
+  }
+  destroy() {
+    let stepper = this;
+    stepper.$el.trigger('stepper:beforedestroy');
+    stepper.emit('local::beforeDestroy stepperBeforeDestroy', stepper);
+    delete stepper.$el[0].f7Stepper;
+    stepper.detachEvents();
+    deleteProps(stepper);
+    stepper = null;
+  }
+}
+export default Stepper;

package/components/stepper/stepper-ios.less

@@ -0,0 +1,36 @@
+.ios {
+  .stepper-button,
+  .stepper-button-minus,
+  .stepper-button-plus {
+    .f7-icons {
+      font-size: 22px;
+    }
+  }
+  .stepper-fill,
+  .stepper-fill-ios {
+    --f7-stepper-button-pressed-bg-color: var(
+      --f7-stepper-fill-button-pressed-bg-color,
+      var(--f7-theme-color-tint)
+    );
+  }
+
+  .stepper-small,
+  .stepper-small-ios {
+    &.stepper-raised,
+    &.stepper-raised-ios {
+      --f7-stepper-border-width: 0px;
+    }
+    .stepper-button,
+    .stepper-button-minus,
+    .stepper-button-plus {
+      transition-duration: 200ms;
+      &.active-state {
+        &:after,
+        &:before {
+          transition-duration: 200ms;
+          background-color: var(--f7-theme-color);
+        }
+      }
+    }
+  }
+}

package/components/stepper/stepper-md.less

@@ -0,0 +1,16 @@
+.md {
+  .stepper-button,
+  .stepper-button-minus,
+  .stepper-button-plus {
+    transition-duration: 300ms;
+    transform: translate3d(0, 0, 0);
+    overflow: hidden;
+  }
+  .stepper-fill,
+  .stepper-fill-md {
+    --f7-stepper-button-pressed-bg-color: var(
+      --f7-stepper-fill-button-bg-color,
+      var(--f7-theme-color)
+    );
+  }
+}

package/components/stepper/stepper-rtl.css

@@ -0,0 +1 @@
+:root{--f7-stepper-raised-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12),0 1px 2px rgba(0, 0, 0, 0.24);--f7-stepper-value-font-weight:500}.ios{--f7-stepper-height:28px;--f7-stepper-border-radius:5px;--f7-stepper-fill-button-text-color:#fff;--f7-stepper-large-height:44px;--f7-stepper-small-height:26px;--f7-stepper-value-font-size:17px;--f7-stepper-border-width:2px;--f7-stepper-border-color:var(--f7-theme-color);--f7-stepper-small-border-width:2px}.md{--f7-stepper-height:40px;--f7-stepper-border-radius:8px;--f7-stepper-large-height:48px;--f7-stepper-small-height:32px;--f7-stepper-value-font-size:14px;--f7-stepper-border-width:1px;--f7-stepper-small-border-width:1px;--f7-stepper-button-pressed-bg-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-stepper-fill-button-text-color:var(--f7-md-on-primary);--f7-stepper-fill-button-pressed-bg-color:var(--f7-theme-color);--f7-stepper-border-color:var(--f7-md-outline)}.stepper{--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.25);display:inline-flex;align-items:stretch;height:var(--f7-stepper-height);border-radius:var(--f7-stepper-border-radius);flex-direction:row-reverse}.stepper-button,.stepper-button-minus,.stepper-button-plus{background-color:var(--f7-stepper-button-bg-color);width:40px;border-radius:var(--f7-stepper-border-radius);border:var(--f7-stepper-border-width) solid var(--f7-stepper-border-color);color:var(--f7-stepper-button-text-color,var(--f7-theme-color));line-height:calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px));text-align:center;display:flex;justify-content:center;align-content:center;align-items:center;flex-shrink:0;box-sizing:border-box;position:relative;cursor:pointer}.stepper-button-minus.active-state,.stepper-button-plus.active-state,.stepper-button.active-state{background-color:var(--f7-stepper-button-pressed-bg-color,rgba(var(--f7-theme-color-rgb),.15));color:var(--f7-stepper-button-pressed-text-color,var(--f7-stepper-button-text-color,var(--f7-theme-color)))}.stepper-button-minus:first-child,.stepper-button-plus:first-child,.stepper-button:first-child{border-radius:var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius)}.stepper-button-minus:last-child,.stepper-button-plus:last-child,.stepper-button:last-child{border-radius:0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0}.stepper-button .icon,.stepper-button-minus .icon,.stepper-button-plus .icon{pointer-events:none}.stepper-button+.stepper-button,.stepper-button+.stepper-button-minus,.stepper-button+.stepper-button-plus,.stepper-button-minus+.stepper-button,.stepper-button-minus+.stepper-button-minus,.stepper-button-minus+.stepper-button-plus,.stepper-button-plus+.stepper-button,.stepper-button-plus+.stepper-button-minus,.stepper-button-plus+.stepper-button-plus{border-left:none}.stepper-button-minus,.stepper-button-plus{-webkit-user-select:none;user-select:none}.stepper-button-minus:after,.stepper-button-minus:before,.stepper-button-plus:after,.stepper-button-plus:before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:var(--f7-stepper-button-text-color,var(--f7-theme-color));border-radius:2px}.stepper-button-minus:after,.stepper-button-plus:after{width:15px;height:2px}.stepper-button-plus:before{height:15px;width:2px}.stepper-value{display:flex;align-content:center;align-items:center;justify-content:center}.stepper-input-wrap,.stepper-value{flex-shrink:1;text-align:center;border-top:var(--f7-stepper-border-width) solid var(--f7-stepper-border-color);border-bottom:var(--f7-stepper-border-width) solid var(--f7-stepper-border-color)}.stepper .stepper-input-wrap input,.stepper-value{width:45px;color:var(--f7-stepper-value-text-color,var(--f7-theme-color));font-size:var(--f7-stepper-value-font-size);font-weight:var(--f7-stepper-value-font-weight);text-align:center}.stepper .stepper-input-wrap input{height:100%}.ios .stepper-round-ios,.md .stepper-round-md,.stepper-round{--f7-stepper-border-radius:var(--f7-stepper-height)}.ios .stepper-fill-ios,.md .stepper-fill-md,.stepper-fill{--f7-stepper-border-color:var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));--f7-stepper-button-bg-color:var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));--f7-stepper-button-text-color:var(--f7-stepper-fill-button-text-color);--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.ios .stepper-fill-ios .stepper-button+.stepper-button,.ios .stepper-fill-ios .stepper-button-minus+.stepper-button-plus,.ios .stepper-raised-ios .stepper-button+.stepper-button,.ios .stepper-raised-ios .stepper-button-minus+.stepper-button-plus,.md .stepper-fill-md .stepper-button+.stepper-button,.md .stepper-fill-md .stepper-button-minus+.stepper-button-plus,.md .stepper-raised-md .stepper-button+.stepper-button,.md .stepper-raised-md .stepper-button-minus+.stepper-button-plus,.stepper-fill .stepper-button+.stepper-button,.stepper-fill .stepper-button-minus+.stepper-button-plus,.stepper-raised .stepper-button+.stepper-button,.stepper-raised .stepper-button-minus+.stepper-button-plus{border-left:1px solid rgba(0,0,0,.1)}.ios .stepper-fill-ios .stepper-button+.stepper-button.active-state,.ios .stepper-fill-ios .stepper-button-minus+.stepper-button-plus.active-state,.md .stepper-fill-md .stepper-button+.stepper-button.active-state,.md .stepper-fill-md .stepper-button-minus+.stepper-button-plus.active-state,.stepper-fill .stepper-button+.stepper-button.active-state,.stepper-fill .stepper-button-minus+.stepper-button-plus.active-state{border-left-color:var(--f7-stepper-button-pressed-bg-color)}.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-input-wrap,.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-value,.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-input-wrap,.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-value,.stepper-raised:not(.stepper-fill) .stepper-input-wrap,.stepper-raised:not(.stepper-fill) .stepper-value{border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1)}.ios .stepper-large-ios,.md .stepper-large-md,.stepper-large{--f7-stepper-height:var(--f7-stepper-large-height)}.ios .stepper-small-ios,.md .stepper-small-md,.stepper-small{--f7-stepper-border-width:var(--f7-stepper-small-border-width);--f7-stepper-height:var(--f7-stepper-small-height)}.ios .stepper-fill.stepper-small,.ios .stepper-fill.stepper-small-ios{--f7-stepper-button-pressed-bg-color:transparent;--f7-stepper-button-pressed-text-color:var(--f7-theme-color)}.ios .stepper-raised-ios,.md .stepper-raised-md,.stepper-raised{--f7-stepper-border-width:0;box-shadow:var(--f7-stepper-raised-box-shadow)}.ios .stepper-button .f7-icons,.ios .stepper-button-minus .f7-icons,.ios .stepper-button-plus .f7-icons{font-size:22px}.ios .stepper-fill,.ios .stepper-fill-ios{--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-tint))}.ios .stepper-small-ios.stepper-raised,.ios .stepper-small-ios.stepper-raised-ios,.ios .stepper-small.stepper-raised,.ios .stepper-small.stepper-raised-ios{--f7-stepper-border-width:0px}.ios .stepper-small .stepper-button,.ios .stepper-small .stepper-button-minus,.ios .stepper-small .stepper-button-plus,.ios .stepper-small-ios .stepper-button,.ios .stepper-small-ios .stepper-button-minus,.ios .stepper-small-ios .stepper-button-plus{transition-duration:.2s}.ios .stepper-small .stepper-button-minus.active-state:after,.ios .stepper-small .stepper-button-minus.active-state:before,.ios .stepper-small .stepper-button-plus.active-state:after,.ios .stepper-small .stepper-button-plus.active-state:before,.ios .stepper-small .stepper-button.active-state:after,.ios .stepper-small .stepper-button.active-state:before,.ios .stepper-small-ios .stepper-button-minus.active-state:after,.ios .stepper-small-ios .stepper-button-minus.active-state:before,.ios .stepper-small-ios .stepper-button-plus.active-state:after,.ios .stepper-small-ios .stepper-button-plus.active-state:before,.ios .stepper-small-ios .stepper-button.active-state:after,.ios .stepper-small-ios .stepper-button.active-state:before{transition-duration:.2s;background-color:var(--f7-theme-color)}.md .stepper-button,.md .stepper-button-minus,.md .stepper-button-plus{transition-duration:.3s;transform:translate3d(0,0,0);overflow:hidden}.md .stepper-fill,.md .stepper-fill-md{--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color))}

package/components/stepper/stepper-vars.less

@@ -0,0 +1,40 @@
+:root {
+  /*
+  --f7-stepper-button-text-color: var(--f7-theme-color);
+  --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
+  --f7-stepper-value-text-color: var(--f7-theme-color);
+  --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
+  */
+  --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  --f7-stepper-value-font-weight: 500;
+}
+.ios-vars({
+  --f7-stepper-height: 28px;
+  --f7-stepper-border-radius: 5px;
+  --f7-stepper-fill-button-text-color: #fff;
+  /*
+  --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
+  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
+  */
+  --f7-stepper-large-height: 44px;
+  --f7-stepper-small-height: 26px;
+  --f7-stepper-value-font-size: 17px;
+  --f7-stepper-border-width: 2px;
+  --f7-stepper-border-color: var(--f7-theme-color);
+  --f7-stepper-small-border-width: 2px;
+});
+.md-vars({
+  --f7-stepper-height: 40px;
+  --f7-stepper-border-radius: 8px;
+  --f7-stepper-large-height: 48px;
+  --f7-stepper-small-height: 32px;
+  --f7-stepper-value-font-size: 14px;
+  --f7-stepper-border-width: 1px;
+  --f7-stepper-small-border-width: 1px;
+  --f7-stepper-button-pressed-bg-color: transparent;
+});
+.md-color-vars({
+  --f7-stepper-fill-button-text-color: var(--f7-md-on-primary);
+  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color);
+  --f7-stepper-border-color: var(--f7-md-outline);
+});

package/components/stepper/stepper.css

@@ -0,0 +1 @@
+:root{--f7-stepper-raised-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12),0 1px 2px rgba(0, 0, 0, 0.24);--f7-stepper-value-font-weight:500}.ios{--f7-stepper-height:28px;--f7-stepper-border-radius:5px;--f7-stepper-fill-button-text-color:#fff;--f7-stepper-large-height:44px;--f7-stepper-small-height:26px;--f7-stepper-value-font-size:17px;--f7-stepper-border-width:2px;--f7-stepper-border-color:var(--f7-theme-color);--f7-stepper-small-border-width:2px}.md{--f7-stepper-height:40px;--f7-stepper-border-radius:8px;--f7-stepper-large-height:48px;--f7-stepper-small-height:32px;--f7-stepper-value-font-size:14px;--f7-stepper-border-width:1px;--f7-stepper-small-border-width:1px;--f7-stepper-button-pressed-bg-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-stepper-fill-button-text-color:var(--f7-md-on-primary);--f7-stepper-fill-button-pressed-bg-color:var(--f7-theme-color);--f7-stepper-border-color:var(--f7-md-outline)}.stepper{--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.25);display:inline-flex;align-items:stretch;height:var(--f7-stepper-height);border-radius:var(--f7-stepper-border-radius)}.stepper-button,.stepper-button-minus,.stepper-button-plus{background-color:var(--f7-stepper-button-bg-color);width:40px;border-radius:var(--f7-stepper-border-radius);border:var(--f7-stepper-border-width) solid var(--f7-stepper-border-color);color:var(--f7-stepper-button-text-color,var(--f7-theme-color));line-height:calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px));text-align:center;display:flex;justify-content:center;align-content:center;align-items:center;flex-shrink:0;box-sizing:border-box;position:relative;cursor:pointer}.stepper-button-minus.active-state,.stepper-button-plus.active-state,.stepper-button.active-state{background-color:var(--f7-stepper-button-pressed-bg-color,rgba(var(--f7-theme-color-rgb),.15));color:var(--f7-stepper-button-pressed-text-color,var(--f7-stepper-button-text-color,var(--f7-theme-color)))}.stepper-button-minus:first-child,.stepper-button-plus:first-child,.stepper-button:first-child{border-radius:var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius)}.stepper-button-minus:last-child,.stepper-button-plus:last-child,.stepper-button:last-child{border-radius:0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0}.stepper-button .icon,.stepper-button-minus .icon,.stepper-button-plus .icon{pointer-events:none}.stepper-button+.stepper-button,.stepper-button+.stepper-button-minus,.stepper-button+.stepper-button-plus,.stepper-button-minus+.stepper-button,.stepper-button-minus+.stepper-button-minus,.stepper-button-minus+.stepper-button-plus,.stepper-button-plus+.stepper-button,.stepper-button-plus+.stepper-button-minus,.stepper-button-plus+.stepper-button-plus{border-left:none}.stepper-button-minus,.stepper-button-plus{-webkit-user-select:none;user-select:none}.stepper-button-minus:after,.stepper-button-minus:before,.stepper-button-plus:after,.stepper-button-plus:before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:var(--f7-stepper-button-text-color,var(--f7-theme-color));border-radius:2px}.stepper-button-minus:after,.stepper-button-plus:after{width:15px;height:2px}.stepper-button-plus:before{height:15px;width:2px}.stepper-value{display:flex;align-content:center;align-items:center;justify-content:center}.stepper-input-wrap,.stepper-value{flex-shrink:1;text-align:center;border-top:var(--f7-stepper-border-width) solid var(--f7-stepper-border-color);border-bottom:var(--f7-stepper-border-width) solid var(--f7-stepper-border-color)}.stepper .stepper-input-wrap input,.stepper-value{width:45px;color:var(--f7-stepper-value-text-color,var(--f7-theme-color));font-size:var(--f7-stepper-value-font-size);font-weight:var(--f7-stepper-value-font-weight);text-align:center}.stepper .stepper-input-wrap input{height:100%}.ios .stepper-round-ios,.md .stepper-round-md,.stepper-round{--f7-stepper-border-radius:var(--f7-stepper-height)}.ios .stepper-fill-ios,.md .stepper-fill-md,.stepper-fill{--f7-stepper-border-color:var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));--f7-stepper-button-bg-color:var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));--f7-stepper-button-text-color:var(--f7-stepper-fill-button-text-color);--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.ios .stepper-fill-ios .stepper-button+.stepper-button,.ios .stepper-fill-ios .stepper-button-minus+.stepper-button-plus,.ios .stepper-raised-ios .stepper-button+.stepper-button,.ios .stepper-raised-ios .stepper-button-minus+.stepper-button-plus,.md .stepper-fill-md .stepper-button+.stepper-button,.md .stepper-fill-md .stepper-button-minus+.stepper-button-plus,.md .stepper-raised-md .stepper-button+.stepper-button,.md .stepper-raised-md .stepper-button-minus+.stepper-button-plus,.stepper-fill .stepper-button+.stepper-button,.stepper-fill .stepper-button-minus+.stepper-button-plus,.stepper-raised .stepper-button+.stepper-button,.stepper-raised .stepper-button-minus+.stepper-button-plus{border-left:1px solid rgba(0,0,0,.1)}.ios .stepper-fill-ios .stepper-button+.stepper-button.active-state,.ios .stepper-fill-ios .stepper-button-minus+.stepper-button-plus.active-state,.md .stepper-fill-md .stepper-button+.stepper-button.active-state,.md .stepper-fill-md .stepper-button-minus+.stepper-button-plus.active-state,.stepper-fill .stepper-button+.stepper-button.active-state,.stepper-fill .stepper-button-minus+.stepper-button-plus.active-state{border-left-color:var(--f7-stepper-button-pressed-bg-color)}.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-input-wrap,.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-value,.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-input-wrap,.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-value,.stepper-raised:not(.stepper-fill) .stepper-input-wrap,.stepper-raised:not(.stepper-fill) .stepper-value{border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1)}.ios .stepper-large-ios,.md .stepper-large-md,.stepper-large{--f7-stepper-height:var(--f7-stepper-large-height)}.ios .stepper-small-ios,.md .stepper-small-md,.stepper-small{--f7-stepper-border-width:var(--f7-stepper-small-border-width);--f7-stepper-height:var(--f7-stepper-small-height)}.ios .stepper-fill.stepper-small,.ios .stepper-fill.stepper-small-ios{--f7-stepper-button-pressed-bg-color:transparent;--f7-stepper-button-pressed-text-color:var(--f7-theme-color)}.ios .stepper-raised-ios,.md .stepper-raised-md,.stepper-raised{--f7-stepper-border-width:0;box-shadow:var(--f7-stepper-raised-box-shadow)}.ios .stepper-button .f7-icons,.ios .stepper-button-minus .f7-icons,.ios .stepper-button-plus .f7-icons{font-size:22px}.ios .stepper-fill,.ios .stepper-fill-ios{--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-tint))}.ios .stepper-small-ios.stepper-raised,.ios .stepper-small-ios.stepper-raised-ios,.ios .stepper-small.stepper-raised,.ios .stepper-small.stepper-raised-ios{--f7-stepper-border-width:0px}.ios .stepper-small .stepper-button,.ios .stepper-small .stepper-button-minus,.ios .stepper-small .stepper-button-plus,.ios .stepper-small-ios .stepper-button,.ios .stepper-small-ios .stepper-button-minus,.ios .stepper-small-ios .stepper-button-plus{transition-duration:.2s}.ios .stepper-small .stepper-button-minus.active-state:after,.ios .stepper-small .stepper-button-minus.active-state:before,.ios .stepper-small .stepper-button-plus.active-state:after,.ios .stepper-small .stepper-button-plus.active-state:before,.ios .stepper-small .stepper-button.active-state:after,.ios .stepper-small .stepper-button.active-state:before,.ios .stepper-small-ios .stepper-button-minus.active-state:after,.ios .stepper-small-ios .stepper-button-minus.active-state:before,.ios .stepper-small-ios .stepper-button-plus.active-state:after,.ios .stepper-small-ios .stepper-button-plus.active-state:before,.ios .stepper-small-ios .stepper-button.active-state:after,.ios .stepper-small-ios .stepper-button.active-state:before{transition-duration:.2s;background-color:var(--f7-theme-color)}.md .stepper-button,.md .stepper-button-minus,.md .stepper-button-plus{transition-duration:.3s;transform:translate3d(0,0,0);overflow:hidden}.md .stepper-fill,.md .stepper-fill-md{--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color))}

package/components/stepper/stepper.d.ts

@@ -0,0 +1,121 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Stepper {
+  interface Parameters {
+    /** Stepper element. HTMLElement or string with CSS selector of stepper element */
+    el: HTMLElement | CSSSelector;
+    /** Stepper input element or CSS selector of input element. If not specified, will try to look for <input> inside of stepper element */
+    inputEl?: HTMLElement | CSSSelector;
+    /** Minimal step between values (default 1) */
+    step?: number;
+    /** Minimum value (default 0) */
+    min?: number;
+    /** Maximum value (default 100) */
+    max?: number;
+    /** Initial value (default 0) */
+    value?: number;
+    /** When enabled, incrementing beyond maximum value sets value to minimum value; likewise, decrementing below minimum value sets value to maximum value (default false) */
+    wraps?: boolean;
+    /** When enabled it will repeatedly increase/decrease values while you tap and hold plus/minus buttons (default false) */
+    autorepeat?: boolean;
+    /** When enabled it will increase autorepeat ratio based on how long you hold the button (default false) */
+    autorepeatDynamic?: boolean;
+    /** Stepper value element or CSS selector of this element where Stepper will insert value. If not specified, and there is no inputEl passed will try to look for <div class="stepper-value"> inside of stepper element */
+    valueEl?: HTMLElement | CSSSelector;
+    /** Function to format value in required format. It accepts current value and must return new formatted value */
+    formatValue?: (value: number) => string | number;
+    /**  */
+    manualInputMode?: boolean;
+    /** Enables manual input mode. This mode allows to type value from keyboar and check fractional part with defined accurancy. Also, step parameter is ignored when typing in this mode */
+    decimalPoint?: number;
+    /** Number of digits after dot, when in manual input mode */
+    buttonsEndInputMode?: boolean;
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+  interface Stepper extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** Stepper HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with stepper HTML element */
+    $el: Dom7Array;
+    /** Stepper min value */
+    min: number;
+    /** Stepper max value */
+    max: number;
+    /** Stepper value */
+    value: number;
+    /** Stepper input HTML element */
+    inputEl: HTMLElement;
+    /** Dom7 instance with stepper input HTML element */
+    $inputEl: Dom7Array;
+    /** Stepper value container HTML element */
+    valueEl: HTMLElement;
+    /** Dom7 instance with stepper value container HTML element */
+    $valueEl: HTMLElement;
+    /** Stepper parameters */
+    params: Parameters;
+    /** Returns stepper value */
+    getValue(): number;
+    /** Set new stepper value */
+    setValue(value: number): Stepper;
+    /** Increment stepper value, similar to clicking on its "plus" button */
+    incremenet(): Stepper;
+    /** Increment stepper value, similar to clicking on its "plus" button */
+    plus(): Stepper;
+    /** Decrement stepper value, similar to clicking on its "minus" button */
+    decrement(): Stepper;
+    /** Decrement stepper value, similar to clicking on its "minus" button */
+    minus(): Stepper;
+    /** Destroy stepper */
+    destroy(): void;
+  }
+  interface Events {
+    /** Event will be triggered when stepper value has been changed. As an argument event handler receives stepper instance and stepper value */
+    change: (stepper: Stepper, value: number) => void;
+    /** Event will be triggered right before Stepper instance will be destroyed. As an argument event handler receives stepper instance */
+    beforeDestroy: (stepper: Stepper) => void;
+  }
+  interface DomEvents {
+    /** Event will be triggered when Stepper value has been changed*/
+    'stepper:change': () => void;
+    /** Event will be triggered right before Stepper instance will be destroyed */
+    'stepper:beforedestroy': () => void;
+  }
+
+  interface AppMethods {
+    stepper: {
+      /** create Stepper instance */
+      create(parameters: Parameters): Stepper;
+      /** get Stepper instance by HTML element */
+      get(el: HTMLElement | CSSSelector | Stepper): Stepper;
+      /** get Stepper value */
+      getValue(el: HTMLElement | CSSSelector | Stepper): number | number[];
+      /** set new Stepper value */
+      setValue(el: HTMLElement | CSSSelector | Stepper, value: number | number[]): void;
+      /** destroy Stepper instance */
+      destroy(el: HTMLElement | CSSSelector | Stepper): void;
+    };
+  }
+  interface AppParams {
+    stepper?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered when stepper value has been changed. As an argument event handler receives stepper instance and stepper value */
+    stepperChange: (stepper: Stepper, value: number) => void;
+    /** Event will be triggered right before Stepper instance will be destroyed. As an argument event handler receives stepper instance */
+    stepperBeforeDestroy: (stepper: Stepper) => void;
+  }
+}
+
+declare const StepperComponent: Framework7Plugin;
+
+export default StepperComponent;