@designcrowd/fe-shared-lib 1.1.7 → 1.1.8

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

@@ -17,7 +17,7 @@ export const SliderFontSize = () => {
     template: `
         <div>
           <div>Min 12, Max 128</div>
-          <Slider :min="12" :max="128"  :model-value="16"/>
+          <Slider :min="12" :max="128"  :model-value="16" :prevent-negative="true"/>
           <div class="tw-mt-8">Min 0, max 100, Manually emptying the input box should fall back to 0 as min value</div>
           <Slider :min="0" :max="100"  :model-value="16"/>
         </div>
@@ -31,7 +31,7 @@ export const SliderLineheight = () => {
       Slider,
     },
     template: `
-        <Slider :min="1" :max="2.5" :step="0.1" :model-value="1.2"/>
+        <Slider :min="1" :max="2.5" :step="0.1" :model-value="1.2" :max-decimal-point="1"/>
       `,
   };
 };

package/src/atoms/components/Slider/Slider.vue

@@ -29,11 +29,12 @@
           :value="sliderValue"
           type="text"
           :step="step"
-          class="tw-rounded-r tw-rounded-l tw-py-2 tw-bg-white tw-text-grayscale-600 tw-box-border tw-w-full tw-text-base tw-px-4 tw-border tw-border-solid focus:tw-outline-none tw-transition-colors tw-duration-300 tw-ease-out tw-shadow-inner"
+          class="input-slider tw-rounded-r tw-rounded-l tw-py-2 tw-bg-white tw-text-grayscale-600 tw-box-border tw-w-full tw-text-base tw-px-4 tw-border tw-border-solid focus:tw-outline-none tw-transition-colors tw-duration-300 tw-ease-out tw-shadow-inner"
           @input.stop="setInput"
           @blur.stop="checkLimit"
           @keydown.down="limitToMinimum"
           @keydown.up="limitToMaximum"
+          @keydown="onKeydown"
         />
       </div>
     </div>
@@ -138,11 +139,21 @@ export default {
       required: false,
       default: undefined,
     },
+    maxDecimalPoint: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+    preventNegative: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
       sliderValue: this.modelValue,
-      decimalRegex: /^[0-9]*\.[0-9]*$/,
+      decimalRegex: /^\d+\.\d{0,1}$/,
       isInteracting: false,
     };
   },
@@ -165,11 +176,12 @@ export default {
       this.$emit('update:model-value', value);
     },
     setInput(e) {
-      if (e.target.value === '' || e.target.value === '-') {
+      const value = e.target.value;
+      if (value === '' || value === '-') {
         return;
       }
 
-      const newVal = this.isDecimal ? e.target.value : Math.round(parseFloat(e.target.value));
+      const newVal = this.isDecimal ? value : Math.round(parseFloat(value));
       let newNumber = 0;
       if (newVal > this.max) {
         newNumber = this.max;
@@ -182,7 +194,24 @@ export default {
         if (this.decimalRegex.test(newNumber)) {
           this.updateValue(newNumber, e);
         } else {
-          const numbersOnly = newVal.replace(/[^\d.]/g, '');
+          // Remove all non-digit/non-dot characters
+          let numbersOnly = newVal.replace(/[^\d.]/g, '');
+
+          // Remove all dots except the first one
+          const firstDotIndex = numbersOnly.indexOf('.');
+          if (firstDotIndex !== -1) {
+            numbersOnly =
+              numbersOnly.slice(0, firstDotIndex + 1) + numbersOnly.slice(firstDotIndex + 1).replace(/\./g, '');
+          }
+          if (this.maxDecimalPoint) {
+            // Limit decimal point
+            const decimalLimit = this.maxDecimalPoint;
+            const decimalRegex = new RegExp(`^(\\d+)(\\.\\d{0,${decimalLimit}})?`);
+            const decimalMatch = numbersOnly.match(decimalRegex);
+            if (decimalMatch) {
+              numbersOnly = decimalMatch[1] + (decimalMatch[2] || '');
+            }
+          }
           this.updateValue(numbersOnly, e);
         }
       } else {
@@ -191,11 +220,7 @@ export default {
     },
     checkLimit(e) {
       let newNumber = 0;
-      if (e.target.value === '') {
-        newNumber = this.min;
-      } else if (Number.isNaN(this.sliderValue)) {
-        newNumber = this.min;
-      } else if (this.sliderValue <= this.min) {
+      if (e.target.value === '' || Number.isNaN(this.sliderValue) || this.sliderValue <= this.min) {
         newNumber = this.min;
       } else if (this.sliderValue > this.max) {
         newNumber = this.max;
@@ -207,7 +232,7 @@ export default {
         const limitDecimal = parseFloat(newNumber).toFixed(1);
         this.updateValue(limitDecimal, e);
       } else {
-        this.updateValue(newNumber, e);
+        this.updateValue(parseFloat(newNumber), e);
       }
     },
     limitToMinimum(e) {
@@ -261,6 +286,14 @@ export default {
         this.onSliderMouseUp();
       }
     },
+    onKeydown(e) {
+      if (this.preventNegative) {
+        // Prevent typing minus sign '-'
+        if (e.key === '-' || e.key === 'Subtract') {
+          e.preventDefault();
+        }
+      }
+    },
   },
 };
 </script>

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

@@ -1,50 +1,50 @@
-import StarRating from './StarRating.vue';
-
-export default {
-  title: 'Components/Star Rating',
-  component: StarRating,
-};
-
-export const NoStar = () => {
-  return {
-    components: {
-      StarRating,
-    },
-    template: `
-        <StarRating :maxRating="5" />
-      `,
-  };
-};
-
-export const OneStar = () => {
-  return {
-    components: {
-      StarRating,
-    },
-    template: `
-      <StarRating :maxRating="8" :rating="1" :is-interactive="true"/>
-    `,
-  };
-};
-
-export const Middle = () => {
-  return {
-    components: {
-      StarRating,
-    },
-    template: `
-        <StarRating :maxRating="10" :rating="6"/>
-      `,
-  };
-};
-
-export const Full = () => {
-  return {
-    components: {
-      StarRating,
-    },
-    template: `
-        <StarRating :maxRating="5" :rating="5" :is-interactive="true"/>
-      `,
-  };
-};
+import StarRating from './StarRating.vue';
+
+export default {
+  title: 'Components/Star Rating',
+  component: StarRating,
+};
+
+export const NoStar = () => {
+  return {
+    components: {
+      StarRating,
+    },
+    template: `
+        <StarRating :maxRating="5" />
+      `,
+  };
+};
+
+export const OneStar = () => {
+  return {
+    components: {
+      StarRating,
+    },
+    template: `
+      <StarRating :maxRating="8" :rating="1" :is-interactive="true"/>
+    `,
+  };
+};
+
+export const Middle = () => {
+  return {
+    components: {
+      StarRating,
+    },
+    template: `
+        <StarRating :maxRating="10" :rating="6"/>
+      `,
+  };
+};
+
+export const Full = () => {
+  return {
+    components: {
+      StarRating,
+    },
+    template: `
+        <StarRating :maxRating="5" :rating="5" :is-interactive="true"/>
+      `,
+  };
+};

package/src/atoms/components/StarRating/StarRating.vue

@@ -1,84 +1,84 @@
-<template>
-  <ul class="tw-flex tw-justify-center">
-    <li
-      v-for="index in maxRating"
-      :key="index"
-      class="tw-list-none"
-      @click="onRate(index)"
-      @mouseover="applyHoverEffect(index)"
-      @mouseleave="removeHoverEffect()"
-    >
-      <Icon v-if="index <= currentRating" name="star-filled" :size="size" :color="color" />
-      <Icon v-else-if="shouldShowFilledOnHover(index)" name="star-filled" :size="size" :color="color" />
-      <Icon v-else name="star-hollow" :size="size" :color="color" />
-    </li>
-  </ul>
-</template>
-
-<script>
-import Icon from '../Icon/Icon.vue';
-
-export default {
-  components: {
-    Icon,
-  },
-  props: {
-    maxRating: {
-      type: Number,
-      required: false,
-      default: 5,
-    },
-    rating: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    size: {
-      type: String,
-      required: false,
-      default: 'sm',
-    },
-    color: {
-      type: String,
-      required: false,
-      default: 'warning-500',
-    },
-    isInteractive: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      currentRating: this.rating,
-      hoverRating: undefined,
-    };
-  },
-  methods: {
-    shouldShowFilledOnHover(index) {
-      return this.isInteractive && this.hoverRating && this.hoverRating >= index;
-    },
-    onRate(rating) {
-      if (this.isInteractive) {
-        this.currentRating = rating;
-        this.$emit('on-rated', rating);
-      }
-    },
-    applyHoverEffect(rating) {
-      if (this.isInteractive) {
-        this.hoverRating = rating;
-      }
-    },
-    removeHoverEffect() {
-      this.hoverRating = undefined;
-    },
-  },
-};
-</script>
-
-<style scoped>
-li:not(:last-child) {
-  @apply tw-mr-1;
-}
-</style>
+<template>
+  <ul class="tw-flex tw-justify-center">
+    <li
+      v-for="index in maxRating"
+      :key="index"
+      class="tw-list-none"
+      @click="onRate(index)"
+      @mouseover="applyHoverEffect(index)"
+      @mouseleave="removeHoverEffect()"
+    >
+      <Icon v-if="index <= currentRating" name="star-filled" :size="size" :color="color" />
+      <Icon v-else-if="shouldShowFilledOnHover(index)" name="star-filled" :size="size" :color="color" />
+      <Icon v-else name="star-hollow" :size="size" :color="color" />
+    </li>
+  </ul>
+</template>
+
+<script>
+import Icon from '../Icon/Icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    maxRating: {
+      type: Number,
+      required: false,
+      default: 5,
+    },
+    rating: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'sm',
+    },
+    color: {
+      type: String,
+      required: false,
+      default: 'warning-500',
+    },
+    isInteractive: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      currentRating: this.rating,
+      hoverRating: undefined,
+    };
+  },
+  methods: {
+    shouldShowFilledOnHover(index) {
+      return this.isInteractive && this.hoverRating && this.hoverRating >= index;
+    },
+    onRate(rating) {
+      if (this.isInteractive) {
+        this.currentRating = rating;
+        this.$emit('on-rated', rating);
+      }
+    },
+    applyHoverEffect(rating) {
+      if (this.isInteractive) {
+        this.hoverRating = rating;
+      }
+    },
+    removeHoverEffect() {
+      this.hoverRating = undefined;
+    },
+  },
+};
+</script>
+
+<style scoped>
+li:not(:last-child) {
+  @apply tw-mr-1;
+}
+</style>

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

@@ -1,54 +1,54 @@
-import TabMenu from './TabMenu.vue';
-
-export default {
-  title: 'Components/Tab Menu',
-  component: TabMenu,
-};
-
-export const Sample = () => {
-  return {
-    components: {
-      TabMenu,
-    },
-
-    data() {
-      return {
-        checked: true,
-        tabNames: ['all', 'categories'],
-        selectedTabName: 'all',
-      };
-    },
-    methods: {
-      selectTab(tabName) {
-        this.selectedTabName = tabName;
-      },
-    },
-    template: `
-      <TabMenu :tab-names="tabNames" :selected-tab-name="selectedTabName" @on-tab-selected="selectTab" />
-    `,
-  };
-};
-
-export const SampleMoreTabs = () => {
-  return {
-    components: {
-      TabMenu,
-    },
-
-    data() {
-      return {
-        checked: true,
-        tabNames: ['home', 'gaming', 'food', 'nature', 'beauty', 'tax', 'legal'],
-        selectedTabName: 'gaming',
-      };
-    },
-    methods: {
-      selectTab(tabName) {
-        this.selectedTabName = tabName;
-      },
-    },
-    template: `
-      <TabMenu :tab-names="tabNames" :selected-tab-name="selectedTabName" @on-tab-selected="selectTab" />
-    `,
-  };
-};
+import TabMenu from './TabMenu.vue';
+
+export default {
+  title: 'Components/Tab Menu',
+  component: TabMenu,
+};
+
+export const Sample = () => {
+  return {
+    components: {
+      TabMenu,
+    },
+
+    data() {
+      return {
+        checked: true,
+        tabNames: ['all', 'categories'],
+        selectedTabName: 'all',
+      };
+    },
+    methods: {
+      selectTab(tabName) {
+        this.selectedTabName = tabName;
+      },
+    },
+    template: `
+      <TabMenu :tab-names="tabNames" :selected-tab-name="selectedTabName" @on-tab-selected="selectTab" />
+    `,
+  };
+};
+
+export const SampleMoreTabs = () => {
+  return {
+    components: {
+      TabMenu,
+    },
+
+    data() {
+      return {
+        checked: true,
+        tabNames: ['home', 'gaming', 'food', 'nature', 'beauty', 'tax', 'legal'],
+        selectedTabName: 'gaming',
+      };
+    },
+    methods: {
+      selectTab(tabName) {
+        this.selectedTabName = tabName;
+      },
+    },
+    template: `
+      <TabMenu :tab-names="tabNames" :selected-tab-name="selectedTabName" @on-tab-selected="selectTab" />
+    `,
+  };
+};

package/src/atoms/components/TabMenu/TabMenu.vue

@@ -1,44 +1,44 @@
-<template>
-  <div class="tw-flex tw-w-full tw-overflow-x-auto">
-    <div
-      v-for="(tabName, index) in tabNames"
-      :key="index"
-      class="tw-w-full tw-py-2 tw-text-center tw-uppercase tw-font-bold tw-font-sans tw-text-sm tw-cursor-pointer tw-border tw-border-l-0 tw-border-r-0 tw-border-t-0 tw-border-solid"
-      :class="[
-        {
-          'tw-text-secondary-500 tw-border-grayscale-500 tw-border-b-1': selectedTabName !== tabName,
-          'tw-text-primary-500 tw-border-primary-500 tw-border-b-4': selectedTabName === tabName,
-        },
-        classes,
-      ]"
-      @click="onTabSelected(tabName)"
-    >
-      {{ tabName }}
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    tabNames: {
-      type: Array,
-      required: true,
-    },
-
-    selectedTabName: {
-      type: String,
-      required: true,
-    },
-    classes: {
-      type: [String, Object],
-      required: false,
-      default: '',
-    },
-  },
-  methods: {
-    onTabSelected(tabName) {
-      this.$emit('on-tab-selected', tabName);
-    },
-  },
-};
-</script>
+<template>
+  <div class="tw-flex tw-w-full tw-overflow-x-auto">
+    <div
+      v-for="(tabName, index) in tabNames"
+      :key="index"
+      class="tw-w-full tw-py-2 tw-text-center tw-uppercase tw-font-bold tw-font-sans tw-text-sm tw-cursor-pointer tw-border tw-border-l-0 tw-border-r-0 tw-border-t-0 tw-border-solid"
+      :class="[
+        {
+          'tw-text-secondary-500 tw-border-grayscale-500 tw-border-b-1': selectedTabName !== tabName,
+          'tw-text-primary-500 tw-border-primary-500 tw-border-b-4': selectedTabName === tabName,
+        },
+        classes,
+      ]"
+      @click="onTabSelected(tabName)"
+    >
+      {{ tabName }}
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    tabNames: {
+      type: Array,
+      required: true,
+    },
+
+    selectedTabName: {
+      type: String,
+      required: true,
+    },
+    classes: {
+      type: [String, Object],
+      required: false,
+      default: '',
+    },
+  },
+  methods: {
+    onTabSelected(tabName) {
+      this.$emit('on-tab-selected', tabName);
+    },
+  },
+};
+</script>