@designcrowd/fe-shared-lib 1.0.0 → 1.0.1-2.eng2594

package/src/atoms/components/NumberStepper/NumberStepper.vue

@@ -1,282 +1,298 @@
-<template>
-  <div class="tw-flex tw-items-stretch">
-    <Button
-      variant="flat"
-      icon="minus"
-      :icon-size="buttonIconSize"
-      class="tw-rounded-r-none"
-      :classes="buttonStyle"
-      :rounded="false"
-      :rounded-left="true"
-      :disabled="disabled"
-      @mousedown.left="onMouseDown('down')"
-      @mousedown.right="clearLongPressTimers"
-      @mousedown.middle="clearLongPressTimers"
-      @mouseup="clearLongPressTimers"
-      @mouseleave="clearLongPressTimers"
-      @touchstart="onMouseDown('down')"
-      @touchend="clearLongPressTimers($event)"
-      @touchcancel="clearLongPressTimers($event)"
-    />
-    <input
-      :ref="numberStepperRef"
-      class="tw-w-full tw-text-center tw-border tw-border-solid tw-border-secondary-200"
-      type="text"
-      :value="number"
-      pattern="[0-9]"
-      :disabled="disabled"
-      @wheel="onMouseWheel"
-      @input.stop="onInput"
-      @keyup="clearLongPressTimers"
-      @keydown.up="onArrowDown('up')"
-      @keydown.down="onArrowDown('down')"
-      @focus="$emit(FOCUSED_EVENT)"
-      @blur="$emit(BLUR_EVENT)"
-    />
-    <Button
-      variant="flat"
-      :rounded="false"
-      :rounded-right="true"
-      icon="plus"
-      :icon-size="buttonIconSize"
-      class="tw-rounded-l-none"
-      :classes="buttonStyle"
-      :disabled="disabled"
-      @mousedown.left="onMouseDown('up')"
-      @mousedown.right="clearLongPressTimers"
-      @mousedown.middle="clearLongPressTimers"
-      @mouseup="clearLongPressTimers"
-      @mouseleave="clearLongPressTimers"
-      @touchstart="onMouseDown('up')"
-      @touchend="clearLongPressTimers($event)"
-      @touchcancel="clearLongPressTimers($event)"
-    />
-  </div>
-</template>
-
-<script>
-import { ref } from 'vue';
-import Button from '../Button/Button.vue';
-
-export default {
-  components: {
-    Button,
-  },
-  props: {
-    // The value returned when a variable is assigned to v-model
-    id: {
-      type: String,
-      default: () => '1',
-    },
-    modelValue: {
-      type: Number,
-      default: undefined,
-    },
-    min: {
-      type: Number,
-      default: 1,
-    },
-    max: {
-      type: Number,
-      default: undefined,
-    },
-    dataAttribute: {
-      type: String,
-      default: null,
-    },
-    // Flag that determines if the input is disabled or not
-    disabled: {
-      type: Boolean,
-      default: undefined,
-    },
-    size: {
-      type: String,
-      default: 'medium',
-    },
-  },
-  setup(props) {
-    const numberStepperRef = `js-number-stepper-${props.id}`;
-    return { numberStepperRef, [numberStepperRef]: ref(null) };
-  },
-  data() {
-    return {
-      num: null,
-      longPress: null,
-      longPressTimeout: null,
-      longPressInterval: null,
-    };
-  },
-  computed: {
-    buttonStyle() {
-      let style = '';
-      if (this.size === 'medium') {
-        style = '!tw-p-4';
-      }
-      return style;
-    },
-    buttonIconSize() {
-      let size = 'xs';
-      if (this.size === 'medium') {
-        size = 'sm';
-      }
-      return size;
-    },
-    number: {
-      get() {
-        return parseInt(this.num, 10);
-      },
-      set(val) {
-        this.num = val;
-      },
-    },
-  },
-  watch: {
-    modelValue(val) {
-      this.number = val;
-    },
-  },
-  created() {
-    this.LONG_PRESS_DELAY = 1000;
-    this.LONG_PRESS_INTERVAL_DELAY = 100;
-    this.LONG_PRESS_AMOUNT = 5;
-    this.FOCUSED_EVENT = 'focus';
-    this.BLUR_EVENT = 'blur';
-  },
-  mounted() {
-    this.number = this.modelValue;
-    this.addDataAttribute();
-  },
-  beforeUnmount() {
-    this.clearLongPressTimers();
-  },
-  methods: {
-    addDataAttribute() {
-      if (this.dataAttribute) {
-        const inputEl = this.$refs[this.numberStepperRef];
-        inputEl.setAttribute(this.dataAttribute, '');
-      }
-    },
-    changeNumber(direction, value) {
-      if (!this.disabled) {
-        if (direction === 'up') {
-          this.increment(value);
-        } else {
-          this.decrement(value);
-        }
-      }
-    },
-    increment(val) {
-      const value = typeof val === 'number' ? val : 1;
-      if (!this.max || (this.max && this.number + value <= this.max)) {
-        this.number += value;
-      }
-
-      if (this.max && this.number + value > this.max) {
-        this.number = this.max;
-      }
-
-      this.$emit('update:modelValue', this.number);
-      this.$emit('input', this.number);
-    },
-    decrement(val) {
-      const value = typeof val === 'number' ? val : 1;
-
-      if (this.number - value >= this.min) {
-        this.number -= value;
-      } else {
-        this.number = this.min;
-      }
-
-      this.$emit('update:modelValue', this.number);
-      this.$emit('input', this.number);
-    },
-    onMouseWheel(e) {
-      if (!this.disabled) {
-        e.preventDefault();
-
-        if (e.deltaY < 0) {
-          this.increment();
-        } else {
-          this.decrement();
-        }
-      }
-    },
-    onMouseDown(direction) {
-      if (!this.disabled) {
-        const vm = this;
-        let longPressValue = 1;
-
-        vm.changeNumber(direction);
-
-        vm.longPressInterval = setInterval(() => {
-          vm.changeNumber(direction, longPressValue);
-        }, vm.LONG_PRESS_INTERVAL_DELAY);
-
-        vm.longPressTimeout = setTimeout(() => {
-          longPressValue = vm.LONG_PRESS_AMOUNT;
-        }, vm.LONG_PRESS_DELAY);
-      }
-    },
-    clearLongPressTimers(e) {
-      // eslint-disable-next-line no-unused-expressions
-      e && e.preventDefault();
-      clearTimeout(this.longPressTimeout);
-      clearInterval(this.longPressInterval);
-      this.longPressTimeout = null;
-      this.longPressInterval = null;
-      this.longPress = false;
-    },
-    onArrowDown(direction) {
-      if (!this.disabled) {
-        const vm = this;
-
-        if (vm.longPress) {
-          vm.changeNumber(direction, vm.LONG_PRESS_AMOUNT);
-        } else {
-          vm.changeNumber(direction);
-        }
-
-        if (!vm.longPressTimeout) {
-          vm.longPressTimeout = setTimeout(() => {
-            vm.longPress = true;
-          }, vm.LONG_PRESS_DELAY);
-        }
-      }
-    },
-    onInput(e) {
-      if (!this.disabled) {
-        const value = Math.round(parseFloat(e.target.value));
-        let newNumber = 0;
-
-        if (!/\D/.test(value) || !value) {
-          newNumber = value && value;
-        } else if (value.length >= this.number.toString().length) {
-          newNumber = value.slice(0, -1);
-        } else if (typeof size === 'string') {
-          // TODO: revist linting
-          // eslint-disable-next-line no-undef
-          const integer = Math.round(parseFloat(size));
-          newNumber = Number.isNaN(integer) ? this.number : integer;
-        }
-
-        if (value) {
-          if (value < this.min) {
-            newNumber = this.min;
-          }
-
-          if (this.max && value > this.max) {
-            newNumber = this.max;
-          }
-        } else {
-          newNumber = this.min;
-        }
-
-        this.number = newNumber;
-        e.target.value = newNumber;
-        this.$emit('update:modelValue', this.number);
-        this.$emit('input', this.number);
-      }
-    },
-  },
-};
-</script>
+<template>
+  <div class="tw-flex tw-items-stretch">
+    <Button
+      variant="flat"
+      icon="minus"
+      :icon-size="buttonIconSize"
+      class="tw-rounded-r-none"
+      :classes="buttonStyle"
+      :rounded="false"
+      :rounded-left="true"
+      :disabled="disabled"
+      @mousedown.left="onMouseDown('down')"
+      @mousedown.right="clearLongPressTimers"
+      @mousedown.middle="clearLongPressTimers"
+      @mouseup="clearLongPressTimers"
+      @mouseleave="clearLongPressTimers"
+      @touchstart="onMouseDown('down')"
+      @touchend="clearLongPressTimers($event)"
+      @touchcancel="clearLongPressTimers($event)"
+    />
+    <input
+      :ref="numberStepperRef"
+      class="tw-w-full tw-text-center tw-border tw-border-solid tw-border-secondary-200"
+      :class="inputClasses"
+      type="text"
+      :value="number"
+      pattern="[0-9]"
+      :disabled="disabled || disableManualInput"
+      @wheel="onMouseWheel"
+      @input.stop="onInput"
+      @keyup="clearLongPressTimers"
+      @keydown.up="onArrowDown('up')"
+      @keydown.down="onArrowDown('down')"
+      @focus="$emit(FOCUSED_EVENT)"
+      @blur="$emit(BLUR_EVENT)"
+    />
+    <Button
+      variant="flat"
+      :rounded="false"
+      :rounded-right="true"
+      icon="plus"
+      :icon-size="buttonIconSize"
+      class="tw-rounded-l-none"
+      :classes="buttonStyle"
+      :disabled="disabled"
+      @mousedown.left="onMouseDown('up')"
+      @mousedown.right="clearLongPressTimers"
+      @mousedown.middle="clearLongPressTimers"
+      @mouseup="clearLongPressTimers"
+      @mouseleave="clearLongPressTimers"
+      @touchstart="onMouseDown('up')"
+      @touchend="clearLongPressTimers($event)"
+      @touchcancel="clearLongPressTimers($event)"
+    />
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import Button from '../Button/Button.vue';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    // The value returned when a variable is assigned to v-model
+    id: {
+      type: String,
+      default: () => '1',
+    },
+    modelValue: {
+      type: Number,
+      default: undefined,
+    },
+    min: {
+      type: Number,
+      default: 1,
+    },
+    max: {
+      type: Number,
+      default: undefined,
+    },
+    dataAttribute: {
+      type: String,
+      default: null,
+    },
+    // Flag that determines if the input is disabled or not
+    disabled: {
+      type: Boolean,
+      default: undefined,
+    },
+    disableManualInput: {
+      type: Boolean,
+      default: undefined,
+    },
+    size: {
+      type: String,
+      default: 'medium',
+    },
+    inputClasses: {
+      type: String,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    const numberStepperRef = `js-number-stepper-${props.id}`;
+    return { numberStepperRef, [numberStepperRef]: ref(null) };
+  },
+  data() {
+    return {
+      num: null,
+      longPress: null,
+      longPressDelayTimeout: null,
+      longPressTimeout: null,
+      longPressInterval: null,
+    };
+  },
+  computed: {
+    buttonStyle() {
+      let style = '';
+      if (this.size === 'medium') {
+        style = '!tw-p-4';
+      }
+      return style;
+    },
+    buttonIconSize() {
+      let size = 'xs';
+      if (this.size === 'medium') {
+        size = 'sm';
+      }
+      return size;
+    },
+    number: {
+      get() {
+        return parseInt(this.num, 10);
+      },
+      set(val) {
+        this.num = val;
+      },
+    },
+  },
+  watch: {
+    modelValue(val) {
+      this.number = val;
+    },
+  },
+  created() {
+    this.DELAY_BEFORE_LONG_PRESS_START = 300;
+    this.LONG_PRESS_DELAY = 1000;
+    this.LONG_PRESS_INTERVAL_DELAY = 100;
+    this.LONG_PRESS_AMOUNT = 5;
+    this.FOCUSED_EVENT = 'focus';
+    this.BLUR_EVENT = 'blur';
+  },
+  mounted() {
+    this.number = this.modelValue;
+    this.addDataAttribute();
+  },
+  beforeUnmount() {
+    this.clearLongPressTimers();
+  },
+  methods: {
+    addDataAttribute() {
+      if (this.dataAttribute) {
+        const inputEl = this.$refs[this.numberStepperRef];
+        inputEl.setAttribute(this.dataAttribute, '');
+      }
+    },
+    changeNumber(direction, value) {
+      if (!this.disabled) {
+        if (direction === 'up') {
+          this.increment(value);
+        } else {
+          this.decrement(value);
+        }
+      }
+    },
+    increment(val) {
+      const value = typeof val === 'number' ? val : 1;
+      if (!this.max || (this.max && this.number + value <= this.max)) {
+        this.number += value;
+      }
+
+      if (this.max && this.number + value > this.max) {
+        this.number = this.max;
+      }
+
+      this.$emit('update:modelValue', this.number);
+      this.$emit('input', this.number);
+    },
+    decrement(val) {
+      const value = typeof val === 'number' ? val : 1;
+
+      if (this.number - value >= this.min) {
+        this.number -= value;
+      } else {
+        this.number = this.min;
+      }
+
+      this.$emit('update:modelValue', this.number);
+      this.$emit('input', this.number);
+    },
+    onMouseWheel(e) {
+      if (!this.disabled) {
+        e.preventDefault();
+
+        if (e.deltaY < 0) {
+          this.increment();
+        } else {
+          this.decrement();
+        }
+      }
+    },
+    onMouseDown(direction) {
+      if (!this.disabled) {
+        const vm = this;
+        let longPressValue = 1;
+
+        vm.changeNumber(direction);
+
+        // Small delay before long press logic other wise sometimes slight long click once registers twice
+        vm.longPressDelayTimeout = setTimeout(() => {
+          vm.longPressInterval = setInterval(() => {
+            vm.changeNumber(direction, longPressValue);
+          }, vm.LONG_PRESS_INTERVAL_DELAY);
+
+          vm.longPressTimeout = setTimeout(() => {
+            longPressValue = vm.LONG_PRESS_AMOUNT;
+          }, vm.LONG_PRESS_DELAY);
+        }, vm.DELAY_BEFORE_LONG_PRESS_START);
+      }
+    },
+    clearLongPressTimers(e) {
+      // eslint-disable-next-line no-unused-expressions
+      e && e.preventDefault();
+      clearTimeout(this.longPressDelayTimeout);
+      clearTimeout(this.longPressTimeout);
+      clearInterval(this.longPressInterval);
+      this.longPressDelayTimeout = null;
+      this.longPressTimeout = null;
+      this.longPressInterval = null;
+      this.longPress = false;
+    },
+    onArrowDown(direction) {
+      if (!this.disabled) {
+        const vm = this;
+
+        if (vm.longPress) {
+          vm.changeNumber(direction, vm.LONG_PRESS_AMOUNT);
+        } else {
+          vm.changeNumber(direction);
+        }
+
+        if (!vm.longPressTimeout) {
+          vm.longPressTimeout = setTimeout(() => {
+            vm.longPress = true;
+          }, vm.LONG_PRESS_DELAY);
+        }
+      }
+    },
+    onInput(e) {
+      if (!this.disabled) {
+        const value = Math.round(parseFloat(e.target.value));
+        let newNumber = 0;
+
+        if (!/\D/.test(value) || !value) {
+          newNumber = value && value;
+        } else if (value.length >= this.number.toString().length) {
+          newNumber = value.slice(0, -1);
+        } else if (typeof size === 'string') {
+          // TODO: revist linting
+          // eslint-disable-next-line no-undef
+          const integer = Math.round(parseFloat(size));
+          newNumber = Number.isNaN(integer) ? this.number : integer;
+        }
+
+        if (value) {
+          if (value < this.min) {
+            newNumber = this.min;
+          }
+
+          if (this.max && value > this.max) {
+            newNumber = this.max;
+          }
+        } else {
+          newNumber = this.min;
+        }
+
+        this.number = newNumber;
+        e.target.value = newNumber;
+        this.$emit('update:modelValue', this.number);
+        this.$emit('input', this.number);
+      }
+    },
+  },
+};
+</script>