@eturnity/eturnity_reusable_components 7.18.0-EPDM-10335.2 → 7.18.0-EPDM-10335.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.18.0-EPDM-10335.2",
+  "version": "7.18.0-EPDM-10335.4",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/filter/filterSettings.vue

@@ -94,6 +94,7 @@
               :labelDataId="filter.dataId"
               alignItems="vertical"
               :disabled="!filter.choices.length"
+              :minOptionLength="1"
             >
               <template #selector>
                 <option-title> {{ filter.selectedText }} </option-title>

package/src/components/inputs/select/index.vue

@@ -350,6 +350,12 @@ const InputWrapper = styled('div', inputAttrs)`
 
 const DROPDOWN_HEIGHT_OFFSET = 4
 const DROPDOWN_TOP_OFFSET = 21
+const MIN_OPTION_LENGTH = 5
+
+const DROPDOWN_MENU_POSITIONS = {
+  Automatic: 'automatic',
+  Bottom: 'bottom'
+}
 
 export default {
   name: 'RCselect',
@@ -469,6 +475,14 @@ export default {
     isDraggable: {
       type: Boolean,
       default: false
+    },
+    minOptionLength: {
+      type: Number,
+      default: MIN_OPTION_LENGTH
+    },
+    dropdownMenuPosition: {
+      type: String,
+      default: DROPDOWN_MENU_POSITIONS.Automatic // options: ['automatic', bottom]
     }
   },
 
@@ -643,12 +657,15 @@ export default {
         window.scrollY +
         DROPDOWN_HEIGHT_OFFSET
 
-      const top = isDropdownNotCompletelyVisible
-        ? dropdownWrapperRelativeHeight
-        : dropdownWrapperRelativeHeight -
-          dropdownHeight -
-          selectButtonHeight -
-          DROPDOWN_TOP_OFFSET
+      const top =
+        isDropdownNotCompletelyVisible ||
+        (!isDropdownNotCompletelyVisible &&
+          this.dropdownMenuPosition === DROPDOWN_MENU_POSITIONS.Bottom)
+          ? dropdownWrapperRelativeHeight
+          : dropdownWrapperRelativeHeight -
+            dropdownHeight -
+            selectButtonHeight -
+            DROPDOWN_TOP_OFFSET
       const left = this.dropdownPosition.left
         ? this.dropdownPosition.left
         : dropdownWrapperEl.getBoundingClientRect().left + window.scrollX
@@ -658,9 +675,13 @@ export default {
       return isDropdownNotCompletelyVisible
     },
     async isBottomOfDropdownOutOfViewport() {
-      if (!this.$refs.dropdown) {
+      if (
+        !this.$refs.dropdown ||
+        this.dropdownMenuPosition === DROPDOWN_MENU_POSITIONS.Bottom
+      ) {
         return false
       }
+
       await this.$nextTick()
       const rect = this.$refs.dropdown.$el.getBoundingClientRect()
       const windowHeight =
@@ -730,7 +751,11 @@ export default {
       return 0
     },
     isSearchBarVisible() {
-      return this.isSearchable && this.optionLength >= 5 && this.isDropdownOpen
+      return (
+        this.isSearchable &&
+        this.optionLength >= this.minOptionLength &&
+        this.isDropdownOpen
+      )
     },
     getOptionWidth() {
       if (this.optionWidth) return this.optionWidth

package/src/components/inputs/select/option/index.vue

@@ -16,6 +16,7 @@
     :disabledTextColor="disabledTextColor"
     :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
     :title="hoverText"
+    :padding="padding"
   >
     <slot></slot>
   </optionContainer>
@@ -31,7 +32,8 @@ const optionProps = {
   cursorType: String,
   backgroundColor: String,
   disabledBgColor: String,
-  disabledTextColor: String
+  disabledTextColor: String,
+  padding: String
 }
 const optionContainer = styled('div', optionProps)`
   display: flex;
@@ -39,7 +41,7 @@ const optionContainer = styled('div', optionProps)`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 10px;
+  padding: ${(props) => props.padding};
   gap: 14px;
   width: 100%;
   background-color: ${(props) =>
@@ -111,6 +113,10 @@ export default {
     disabledTextColor: {
       required: false,
       default: null
+    },
+    padding: {
+      required: false,
+      default: '12px 10px'
     }
   },