@designcrowd/fe-shared-lib 1.1.4-rte-2 → 1.1.4-rte-3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.1.4-rte-2",
+  "version": "1.1.4-rte-3",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",

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

@@ -20,12 +20,13 @@
       @touchcancel="clearLongPressTimers($event)"
     />
     <input
-      v-if="disableManualInput"
       :ref="numberStepperRef"
-      class="tw-w-full tw-text-center tw-border tw-border-solid tw-border-grayscale-500 tw-border-l-0 tw-border-r-0 tw-rounded-none"
-      :class="inputClasses"
+      :class="[
+        inputClasses,
+        'border-radius-none tw-w-full tw-text-center tw-border tw-border-solid tw-border-grayscale-500 tw-border-l-0 tw-border-r-0 tw-rounded-none',
+      ]"
       type="text"
-      :model-value="number"
+      :value="number"
       pattern="[0-9]"
       :disabled="disabled || disableManualInput"
       @wheel="onMouseWheel"
@@ -34,23 +35,7 @@
       @keydown.up="onArrowDown('up')"
       @keydown.down="onArrowDown('down')"
       @focus="$emit(FOCUSED_EVENT)"
-      @blur="$emit(BLUR_EVENT)"
-    />
-    <NumberInput
-      v-else
-      :min="min"
-      :max="max"
-      :model-value="number"
-      :element-classes="[
-        inputClasses,
-        'tw-w-full tw-text-center tw-border tw-border-solid tw-border-grayscale-500 tw-border-l-0 tw-border-r-0 tw-rounded-none',
-      ]"
-      :rounded-corners="false"
-      @wheel="onMouseWheel"
-      @input="onSetInput"
-      @keyup="clearLongPressTimers"
-      @keydown.up="onArrowDown('up')"
-      @keydown.down="onArrowDown('down')"
+      @blur.stop="checkLimit"
     />
     <Button
       variant="flat"
@@ -77,12 +62,10 @@
 <script>
 import { ref } from 'vue';
 import Button from '../Button/Button.vue';
-import NumberInput from '../NumberInput/NumberInput.vue';
 
 export default {
   components: {
     Button,
-    NumberInput,
   },
   props: {
     // The value returned when a variable is assigned to v-model
@@ -288,32 +271,17 @@ export default {
         }
       }
     },
+
     onInput(e) {
       if (!this.disabled) {
-        const value = Math.round(parseFloat(e.target.value));
+        const newVal = 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;
-          }
+        if (newVal > this.max) {
+          newNumber = this.max;
+        } else if (Number.isNaN(newVal)) {
+          newNumber = 0;
         } else {
-          newNumber = this.min;
+          newNumber = newVal;
         }
 
         this.number = newNumber;
@@ -322,12 +290,20 @@ export default {
         this.$emit('input', this.number);
       }
     },
-    onSetInput(e) {
-      let value = Math.round(parseFloat(e.target.value));
-      this.number = value;
-      e.target.value = value;
-      this.$emit('update:modelValue', this.number);
-      this.$emit('input', this.number);
+    checkLimit(e) {
+      let newNumber = 0;
+      if (e.target.value === '') {
+        newNumber = this.min;
+      } else if (Number.isNaN(this.number)) {
+        newNumber = this.min;
+      } else if (this.number <= this.min) {
+        newNumber = this.min;
+      } else if (this.number > this.max) {
+        newNumber = this.max;
+      } else {
+        newNumber = this.number;
+      }
+      this.$emit('update:modelValue', newNumber);
     },
   },
 };

package/src/atoms/components/NumberInput/NumberInput.stories.js

@@ -1,26 +0,0 @@
-import NumberInput from './NumberInput.vue';
-
-export default {
-  title: 'Components/Number Input',
-  component: NumberInput,
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export const NumberInputStory = () => {
-  return {
-    components: {
-      NumberInput,
-    },
-    template: `
-        <div>
-          <div>Min 12, Max 128</div>
-          <NumberInput :min="12" :max="128"  :model-value="16"/>
-          <div class="tw-mt-8">Min 0, max 100, Manually emptying the input box should fall back to 0 as min value</div>
-          <NumberInput :min="0" :max="100"  :model-value="16"/>
-        </div>
-        
-      `,
-  };
-};

package/src/atoms/components/NumberInput/NumberInput.vue

@@ -1,115 +0,0 @@
-<template>
-  <input
-    ref="numberInput"
-    :value="numberValue"
-    type="text"
-    class="tw-w-full"
-    :class="[
-      elementClasses,
-      {
-        'border-radius-none': !roundedCorners,
-      },
-    ]"
-    @input.stop="setInput"
-    @blur.stop="checkLimit"
-  />
-</template>
-
-<script>
-export default {
-  props: {
-    min: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    max: {
-      type: Number,
-      required: false,
-      default: 100,
-    },
-    modelValue: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    elementClasses: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    label: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    roundedCorners: {
-      type: Boolean,
-      default: true,
-    },
-    step: {
-      type: Number,
-      required: false,
-      default: 1,
-    },
-  },
-  data() {
-    return {
-      numberValue: this.modelValue,
-    };
-  },
-  watch: {
-    modelValue(v) {
-      this.numberValue = v;
-    },
-  },
-  methods: {
-    focus() {
-      this.$refs.numberInput.focus();
-    },
-    setInput(e) {
-      const newVal = parseFloat(e.target.value);
-      let newNumber = 0;
-      if (newVal > this.max) {
-        newNumber = this.max;
-      } else if (Number.isNaN(newVal)) {
-        newNumber = 0;
-      } else {
-        newNumber = newVal;
-      }
-      this.updateValue(newNumber, e);
-    },
-    checkLimit(e) {
-      let newNumber = 0;
-      if (e.target.value === '') {
-        newNumber = this.min;
-      } else if (Number.isNaN(this.numberValue)) {
-        newNumber = this.min;
-      } else if (this.numberValue <= this.min) {
-        newNumber = this.min;
-      } else if (this.numberValue > this.max) {
-        newNumber = this.max;
-      } else {
-        newNumber = this.numberValue;
-      }
-      this.updateValue(newNumber, e);
-    },
-    updateValue(value, e) {
-      this.numberValue = value;
-      e.target.value = value;
-      this.$emit('input', e, value);
-    },
-  },
-};
-</script>
-<style scoped>
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.border-radius-none {
-  border-radius: 0 !important;
-}
-</style>