@designcrowd/fe-shared-lib 1.0.4 → 1.0.5

package/package.json

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

package/src/atoms/components/Dropdown/Dropdown.vue

@@ -5,7 +5,7 @@
       :class="[elementClasses, disabled && 'tw-opacity-40 tw-cursor-not-allowed']"
       @click="() => !disabled && onToggleMenu()"
     >
-      <div class="tw-text-left tw-flex-auto tw-pl-3">
+      <div class="tw-text-left tw-flex-auto tw-pl-3 tw-truncate">
         <slot name="title">
           {{ title }}
         </slot>
@@ -20,7 +20,7 @@
 
     <div
       v-show="isMenuVisible"
-      class="tw-origin-top-right tw-absolute tw-left-0 tw-mt-2 tw-w-full tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5"
+      class="tw-origin-top-right tw-absolute tw-left-0 tw-mt-2 tw-w-full tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-z-20"
       :class="[
         menuElementClasses,
         {
@@ -72,7 +72,7 @@ export default {
       type: Boolean,
       required: false,
       default: false,
-    }
+    },
   },
   data: () => ({
     isMenuVisible: false,
@@ -85,7 +85,7 @@ export default {
   watch: {
     show() {
       this.isMenuVisible = this.show;
-    }
+    },
   },
   mounted() {
     this.isMenuVisible = this.show;

package/src/atoms/components/Dropdown/DropdownItem.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="tw-flex tw-items-center tw-px-2 tw-py-2 drop-down-item tw-cursor-pointer" @click="onClick">
-    <slot></slot>
+  <div>
+    <div class="tw-flex tw-items-center tw-px-2 tw-py-2 drop-down-item tw-cursor-pointer" @click="onClick">
+      <slot></slot>
+    </div>
   </div>
 </template>
 <script>

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

@@ -21,6 +21,7 @@
     <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]"
@@ -97,6 +98,10 @@ export default {
       type: String,
       default: 'medium',
     },
+    inputClasses: {
+      type: String,
+      default: undefined,
+    },
   },
   setup(props) {
     const numberStepperRef = `js-number-stepper-${props.id}`;
@@ -106,6 +111,7 @@ export default {
     return {
       num: null,
       longPress: null,
+      longPressDelayTimeout: null,
       longPressTimeout: null,
       longPressInterval: null,
     };
@@ -140,6 +146,7 @@ export default {
     },
   },
   created() {
+    this.DELAY_BEFORE_LONG_PRESS_START = 300;
     this.LONG_PRESS_DELAY = 1000;
     this.LONG_PRESS_INTERVAL_DELAY = 100;
     this.LONG_PRESS_AMOUNT = 5;
@@ -212,20 +219,25 @@ export default {
 
         vm.changeNumber(direction);
 
-        vm.longPressInterval = setInterval(() => {
-          vm.changeNumber(direction, longPressValue);
-        }, vm.LONG_PRESS_INTERVAL_DELAY);
+        // 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.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;