@designcrowd/fe-shared-lib 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "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/Icon/icons/upload-arrow.vue

@@ -1,6 +1,5 @@
 <template>
   <path
     d="M8.58929 1.26673L12.0179 4.76844C12.3661 5.09673 12.3661 5.67123 12.0179 5.99951C11.6964 6.35515 11.1339 6.35515 10.8125 5.99951L8.85714 4.00244V9.74744C8.85714 10.2399 8.45536 10.6229 8 10.6229C7.51786 10.6229 7.14286 10.2399 7.14286 9.74744V4.00244L5.16071 5.99951C4.83929 6.35515 4.27679 6.35515 3.95536 5.99951C3.60714 5.67123 3.60714 5.09673 3.95536 4.76844L7.38393 1.26673C7.70536 0.911089 8.26786 0.911089 8.58929 1.26673ZM3.71429 10.6229V12.3737C3.71429 12.8661 4.08929 13.2491 4.57143 13.2491H11.4286C11.8839 13.2491 12.2857 12.8661 12.2857 12.3737V10.6229C12.2857 10.1578 12.6607 9.74744 13.1429 9.74744C13.5982 9.74744 14 10.1578 14 10.6229V12.3737C14 13.8236 12.8482 15 11.4286 15H4.57143C3.15179 15 2 13.8236 2 12.3737V10.6229C2 10.1578 2.375 9.74744 2.85714 9.74744C3.3125 9.74744 3.71429 10.1578 3.71429 10.6229Z"
-    fill="black"
   />
 </template>

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;