feat: adding hasScroll property

solfacil · Nov 10, 2022 · c4a727d · c4a727d
1 parent a45017e
commit c4a727d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/src/assets/scss/_selectinput.scss b/src/assets/scss/_selectinput.scss
@@ -93,7 +93,7 @@
     }
 
     .options-list {
-      @apply bg-white w-full overflow-y-auto pr-3 pt-1 mt-2;
+      @apply bg-white w-full pr-3 pt-1 mt-2;
       max-height: 160px;
 
       /* width */

diff --git a/src/components/SelectInput/SelectInput.stories.js b/src/components/SelectInput/SelectInput.stories.js
@@ -32,6 +32,26 @@ const Template = (args, { argTypes }) => ({
           value: '2',
           name: 'Sou um integrador e quero tirar dúvidas',
         },
+        {
+          value: '3',
+          name: 'Sou um integrador e quero tirar dúvidas',
+        },
+        {
+          value: '4',
+          name: 'Sou um integrador e quero tirar dúvidas',
+        },
+        {
+          value: '5',
+          name: 'Sou um integrador e quero tirar dúvidas',
+        },
+        {
+          value: '6',
+          name: 'Sou um integrador e quero tirar dúvidas',
+        },
+        {
+          value: '7',
+          name: 'Sou um integrador e quero tirar dúvidas',
+        },
       ],
       inputModel: '2',
     };
@@ -46,4 +66,5 @@ Default.args = {
   id: 'select',
   searchable: true,
   placeholder: 'Selecione',
+  hasScroll: true,
 };
diff --git a/src/components/SelectInput/SelectInput.vue b/src/components/SelectInput/SelectInput.vue
@@ -60,7 +60,7 @@
         placeholder="Busque aqui"
         class="shadow-none"
       />
-      <ul class="options-list">
+      <ul class="options-list" :class="scrollClass">
         <li
           v-for="item in searchItems(searchString)"
           :key="item.value"
@@ -161,6 +161,12 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    /** Specify whether show scroll or not */
+    hasScroll: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   data: () => ({
@@ -169,6 +175,12 @@ export default {
     searchString: '',
   }),
 
+  computed: {
+    scrollClass() {
+      return this.hasScroll ? 'overflow-y-auto' : 'overflow-hidden';
+    },
+  },
+
   watch: {
     options() {
       const action = [