@eturnity/eturnity_reusable_components 7.24.3-EPDM-10576.1 → 7.24.3-EPDM-11320.0

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

@@ -1,144 +1,157 @@
 <template>
   <Container
-    :selectWidth="selectWidth"
-    :noRelative="noRelative"
+    :no-relative="noRelative"
+    :select-width="selectWidth"
     @mouseenter="mouseEnterHandler"
     @mouseleave="mouseLeaveHandler"
   >
-    <input-wrapper
-      :hasLabel="!!label && label.length > 0"
-      :alignItems="alignItems"
-      :noRelative="noRelative"
+    <InputWrapper
+      :align-items="alignItems"
+      :has-label="!!label && label.length > 0"
+      :no-relative="noRelative"
     >
-      <label-wrapper v-if="label" :data-id="labelDataId">
-        <input-label
-          :fontColor="
+      <LabelWrapper
+        v-if="label"
+        :data-id="labelDataId"
+      >
+        <InputLabel
+          :font-color="
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
           "
-          :fontSize="fontSize"
-          >{{ label }}
-          <optionalLabel v-if="labelOptional">
-            ({{ $gettext('Optional') }})</optionalLabel
-          >
-        </input-label>
-        <info-text
+          :font-size="fontSize"
+        >
+          {{ label }}
+          <OptionalLabel v-if="labelOptional">
+            ({{ $gettext('Optional') }})
+          </OptionalLabel>
+        </InputLabel>
+        <InfoText
           v-if="infoTextMessage"
-          :text="infoTextMessage"
           :size="infoTextSize"
+          :text="infoTextMessage"
         />
-      </label-wrapper>
-      <select-button-wrapper :disabled="disabled">
-        <selectButton
+      </LabelWrapper>
+      <SelectButtonWrapper :disabled="disabled">
+        <SelectButton
           ref="select"
-          class="select-button"
-          @click="toggleDropdown"
-          :selectWidth="selectWidth"
-          :selectHeight="selectHeight"
-          :height="height"
-          :selectMinHeight="selectMinHeight"
-          :bgColor="
+          :bg-color="
             buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
           "
-          :fontColor="
+          class="select-button"
+          :data-id="dataId"
+          :disabled="disabled"
+          :font-color="
             buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
           "
-          :fontSize="fontSize"
-          :hasError="hasError"
-          :hasNoPadding="isSearchBarVisible || !hasSelectButtonPadding"
-          :disabled="disabled"
+          :font-size="fontSize"
+          :has-error="hasError"
+          :has-no-padding="isSearchBarVisible || !hasSelectButtonPadding"
+          :height="height"
+          :no-relative="noRelative"
+          :padding-left="paddingLeft"
+          :select-height="selectHeight"
+          :select-min-height="selectMinHeight"
+          :select-width="selectWidth"
+          :show-border="showBorder"
+          :show-disabled-background="showDisabledBackground"
+          :table-padding-left="tablePaddingLeft"
+          @click="toggleDropdown"
           @keydown="onKeyDown"
-          :showBorder="showBorder"
-          :data-id="dataId"
-          :paddingLeft="paddingLeft"
-          :tablePaddingLeft="tablePaddingLeft"
-          :noRelative="noRelative"
-          :showDisabledBackground="showDisabledBackground"
         >
-          <draggableInputHandle
+          <DraggableInputHandle
             v-if="isDraggable && !isSearchBarVisible"
             :height="selectHeight"
           />
-          <inputText
+          <InputText
             v-if="isSearchBarVisible"
             ref="searchInput"
-            tabindex="0"
-            inputHeight="34px"
-            :noBorder="true"
-            :fontSize="fontSize"
-            backgroundColor="transparent"
-            :fontColor="
+            background-color="transparent"
+            :font-color="
               buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
             "
+            :font-size="fontSize"
+            input-height="34px"
+            :input-width="computedWidth"
+            :no-border="true"
+            tabindex="0"
             :value="textSearch"
-            :inputWidth="computedWidth"
-            @keydown.stop="onKeyDown"
-            @input-change="searchChange"
             @click.stop
+            @input-change="searchChange"
+            @keydown.stop="onKeyDown"
           />
-          <selector
+          <Selector
             v-else
-            :showBorder="showBorder"
-            :selectWidth="selectWidth"
-            :paddingLeft="paddingLeft"
+            :padding-left="paddingLeft"
+            :select-width="selectWidth"
+            :show-border="showBorder"
+          >
+            <slot
+              name="selector"
+              :selected-value="selectedValue"
+            ></slot>
+          </Selector>
+          <Caret
+            class="caret_dropdown"
+            @click.stop="toggleCaretDropdown"
           >
-            <slot name="selector" :selectedValue="selectedValue"></slot>
-          </selector>
-          <Caret @click.stop="toggleCaretDropdown" class="caret_dropdown">
-            <icon
+            <RCIcon
               v-if="isDropdownOpen"
-              name="arrow_up"
-              size="12px"
               :color="
                 caretColor || colorMode == 'dark'
                   ? 'white'
                   : 'transparentBlack1'
               "
+              name="arrow_up"
+              size="12px"
             />
-            <icon
+            <RCIcon
               v-else
-              name="arrow_down"
-              size="12px"
               :color="
                 caretColor || colorMode == 'dark'
                   ? 'white'
                   : 'transparentBlack1'
               "
+              name="arrow_down"
+              size="12px"
             />
           </Caret>
-        </selectButton>
-        <DropdownWrapper ref="dropdownWrapperRef" :noRelative="noRelative">
+        </SelectButton>
+        <DropdownWrapper
+          ref="dropdownWrapperRef"
+          :no-relative="noRelative"
+        >
           <Teleport to="#portal-target">
-            <selectDropdown
-              ref="dropdown"
+            <SelectDropdown
               v-show="isSelectDropdownShown"
-              :dropdownPosition="dropdownPosition"
-              :hoveredIndex="hoveredIndex"
-              :hoveredValue="hoveredValue"
-              :isActive="isActive"
-              :optionWidth="getOptionWidth"
-              :hoveredBgColor="
-                colorMode == 'dark' ? '#000000' : dropdownBgColor
-              "
-              :bgColor="
+              ref="dropdown"
+              :bg-color="
                 dropdownBgColor || colorMode == 'dark' ? 'black' : 'white'
               "
-              :fontColor="
+              :dropdown-position="dropdownPosition"
+              :font-color="
                 dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
               "
-              :noRelative="noRelative"
-              :fontSize="fontSize"
-              :minWidth="minWidth"
-              :selectedValue="selectedValue"
-              @option-selected="optionSelected"
-              @option-hovered="optionHovered"
+              :font-size="fontSize"
+              :hovered-bg-color="
+                colorMode == 'dark' ? '#000000' : dropdownBgColor
+              "
+              :hovered-index="hoveredIndex"
+              :hovered-value="hoveredValue"
+              :is-active="isActive"
+              :min-width="minWidth"
+              :no-relative="noRelative"
+              :option-width="getOptionWidth"
+              :selected-value="selectedValue"
               @mouseleave="optionLeave"
+              @option-hovered="optionHovered"
+              @option-selected="optionSelected"
             >
               <slot name="dropdown"></slot>
-            </selectDropdown>
+            </SelectDropdown>
           </Teleport>
         </DropdownWrapper>
-      </select-button-wrapper>
-    </input-wrapper>
+      </SelectButtonWrapper>
+    </InputWrapper>
   </Container>
 </template>
 
@@ -166,17 +179,17 @@
 //     </template>
 // </Select>
 
-import { Teleport } from 'vue'
-import styled from 'vue3-styled-components'
-import InfoText from '../../infoText'
-import icon from '../../icon'
-import inputText from '../inputText'
-import draggableInputHandle from '../../draggableInputHandle'
+  import { Teleport } from 'vue'
+  import styled from 'vue3-styled-components'
+  import InfoText from '../../infoText'
+  import RCIcon from '../../icon'
+  import InputText from '../inputText'
+  import DraggableInputHandle from '../../draggableInputHandle'
 
-const CARET_WIDTH = '30px'
-const BORDER_WIDTH = '1px'
+  const CARET_WIDTH = '30px'
+  const BORDER_WIDTH = '1px'
 
-const Caret = styled.div`
+  const Caret = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -188,12 +201,12 @@ const Caret = styled.div`
   margin-left: auto;
 `
 
-const selectorProps = {
-  selectWidth: String,
-  paddingLeft: String,
-  showBorder: Boolean
-}
-const Selector = styled('div', selectorProps)`
+  const selectorProps = {
+    selectWidth: String,
+    paddingLeft: String,
+    showBorder: Boolean
+  }
+  const Selector = styled('div', selectorProps)`
   ${(props) =>
     props.selectWidth === '100%'
       ? 'width: 100%;'
@@ -209,29 +222,29 @@ const Selector = styled('div', selectorProps)`
     overflow: hidden;`}
 `
 
-const labelAttrs = { fontSize: String, fontColor: String }
-const InputLabel = styled('div', labelAttrs)`
+  const labelAttrs = { fontSize: String, fontColor: String }
+  const InputLabel = styled('div', labelAttrs)`
   color: ${(props) =>
     props.theme.colors[props.fontColor]
       ? props.theme.colors[props.fontColor]
-      : props.fontColor};
+  : props.fontColor};
   font-size: ${(props) => props.fontSize};
   font-weight: 700;
 `
-const optionalLabel = styled.span`
+  const OptionalLabel = styled.span`
   font-weight: 300;
 `
-const inputProps = {
-  selectWidth: String,
-  optionWidth: String,
-  noRelative: Boolean
-}
-const Container = styled('div', inputProps)`
+  const inputProps = {
+    selectWidth: String,
+    optionWidth: String,
+    noRelative: Boolean
+  }
+  const Container = styled('div', inputProps)`
   width: ${(props) => props.selectWidth};
   position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   display: inline-block;
 `
-const LabelWrapper = styled.div`
+  const LabelWrapper = styled.div`
   display: inline-grid;
   grid-template-columns: auto auto;
   grid-gap: 12px;
@@ -239,30 +252,30 @@ const LabelWrapper = styled.div`
   justify-content: start;
 `
 
-const SelectButtonWrapperAttrs = {
-  disabled: Boolean
-}
-const SelectButtonWrapper = styled('div', SelectButtonWrapperAttrs)`
+  const SelectButtonWrapperAttrs = {
+    disabled: Boolean
+  }
+  const SelectButtonWrapper = styled('div', SelectButtonWrapperAttrs)`
   ${(props) => (props.disabled ? 'cursor: not-allowed' : 'cursor: pointer')};
 `
 
-const selectButtonAttrs = {
-  bgColor: String,
-  fontColor: String,
-  hasError: Boolean,
-  disabled: Boolean,
-  selectHeight: String,
-  selectWidth: String,
-  height: String,
-  selectMinHeight: String,
-  hasNoPadding: Boolean,
-  showBorder: Boolean,
-  paddingLeft: String,
-  noRelative: Boolean,
-  tablePaddingLeft: String,
-  showDisabledBackground: Boolean
-}
-const selectButton = styled('div', selectButtonAttrs)`
+  const selectButtonAttrs = {
+    bgColor: String,
+    fontColor: String,
+    hasError: Boolean,
+    disabled: Boolean,
+    selectHeight: String,
+    selectWidth: String,
+    height: String,
+    selectMinHeight: String,
+    hasNoPadding: Boolean,
+    showBorder: Boolean,
+    paddingLeft: String,
+    noRelative: Boolean,
+    tablePaddingLeft: String,
+    showDisabledBackground: Boolean
+  }
+  const SelectButton = styled('div', selectButtonAttrs)`
   position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   box-sizing: border-box;
   border-radius: 4px;
@@ -276,7 +289,7 @@ const selectButton = styled('div', selectButtonAttrs)`
             : props.tablePaddingLeft
             ? props.tablePaddingLeft
             : props.paddingLeft
-        }`};
+  }`};
   text-align: left;
   min-height: ${(props) =>
     props.selectHeight
@@ -285,7 +298,7 @@ const selectButton = styled('div', selectButtonAttrs)`
       ? props.selectMinHeight
       : props.height
       ? props.height
-      : '36px'};
+  : '36px'};
   display: flex;
   align-items: center;
   height: ${(props) => props.selectHeight};
@@ -301,38 +314,38 @@ const selectButton = styled('div', selectButtonAttrs)`
       ? props.theme.colors.grey5
       : props.theme.colors[props.bgColor]
       ? props.theme.colors[props.bgColor]
-      : props.bgColor};
+  : props.bgColor};
   color: ${(props) =>
     props.theme.colors[props.fontColor]
       ? props.theme.colors[props.fontColor]
-      : props.fontColor};
+  : props.fontColor};
   ${(props) => (props.disabled ? 'pointer-events: none' : '')};
   overflow: hidden;
   & > .handle {
     border-right: ${(props) =>
-        props.hasError ? props.theme.colors.red : props.theme.colors.grey4}
+  props.hasError ? props.theme.colors.red : props.theme.colors.grey4}
       1px solid;
   }
 `
-const selectDropdownAttrs = {
-  hoveredBgColor: String,
-  bgColor: String,
-  fontColor: String,
-  optionWidth: String,
-  hoveredIndex: Number,
-  fontSize: String,
-  dropdownPosition: Object,
-  hoveredValue: Number | String,
-  selectedValue: Number | String,
-  noRelative: Boolean,
-  minWidth: String
-}
-const selectDropdown = styled('div', selectDropdownAttrs)`
+  const selectDropdownAttrs = {
+    hoveredBgColor: String,
+    bgColor: String,
+    fontColor: String,
+    optionWidth: String,
+    hoveredIndex: Number,
+    fontSize: String,
+    dropdownPosition: Object,
+    hoveredValue: Number | String,
+    selectedValue: Number | String,
+    noRelative: Boolean,
+    minWidth: String
+  }
+  const SelectDropdown = styled('div', selectDropdownAttrs)`
   box-sizing: border-box;
   z-index: ${(props) => (props.isActive ? '2' : '99999')};
   position: absolute;
   top: ${(props) =>
-    props.noRelative ? 'auto' : props.dropdownPosition?.top + 'px'};
+  props.noRelative ? 'auto' : props.dropdownPosition?.top + 'px'};
   left: ${(props) => props.dropdownPosition?.left}px;
   border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
   border-radius: 4px;
@@ -347,36 +360,36 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
       ? props.minWidth
       : props.optionWidth
       ? props.optionWidth
-      : '100%'};
+  : '100%'};
   background-color: ${(props) =>
     props.theme.colors[props.bgColor]
       ? props.theme.colors[props.bgColor]
-      : props.bgColor};
+  : props.bgColor};
   color: ${(props) =>
     props.theme.colors[props.fontColor]
       ? props.theme.colors[props.fontColor]
-      : props.fontColor};
+  : props.fontColor};
   max-height: 300px;
   overflow-y: auto;
   & > div[data-value='${(props) => props.hoveredValue}'] {
     background-color: ${(props) =>
       props.theme.colors[props.hoveredBgColor]
         ? props.theme.colors[props.hoveredBgColor]
-        : props.hoveredBgColor};
+  : props.hoveredBgColor};
   }
   font-size: ${(props) => props.fontSize};
 `
-selectDropdown.emits = ['option-hovered', 'option-selected']
-const DropdownAttrs = { noRelative: Boolean }
-const DropdownWrapper = styled('div', DropdownAttrs)`
+  selectDropdown.emits = ['option-hovered', 'option-selected']
+  const DropdownAttrs = { noRelative: Boolean }
+  const DropdownWrapper = styled('div', DropdownAttrs)`
   position: ${(props) => (props.noRelative ? 'static' : 'relative')};
 `
-const inputAttrs = {
-  alignItems: String,
-  hasLabel: Boolean,
-  noRelative: Boolean
-}
-const InputWrapper = styled('div', inputAttrs)`
+  const inputAttrs = {
+    alignItems: String,
+    hasLabel: Boolean,
+    noRelative: Boolean
+  }
+  const InputWrapper = styled('div', inputAttrs)`
   position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   display: grid;
   width: 100%;
@@ -384,502 +397,502 @@ const InputWrapper = styled('div', inputAttrs)`
   align-items: center;
   gap: 8px;
   grid-template-columns: ${(props) =>
-    props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
+  props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
 `
 
-const DROPDOWN_HEIGHT_OFFSET = 4
-const DROPDOWN_TOP_OFFSET = 21
-const MIN_OPTION_LENGTH = 5
+  const DROPDOWN_HEIGHT_OFFSET = 4
+  const DROPDOWN_TOP_OFFSET = 21
+  const MIN_OPTION_LENGTH = 5
 
-const DROPDOWN_MENU_POSITIONS = {
-  Automatic: 'automatic',
-  Bottom: 'bottom'
-}
+  const DROPDOWN_MENU_POSITIONS = {
+    Automatic: 'automatic',
+    Bottom: 'bottom'
+  }
 
-export default {
-  name: 'RCselect',
+  export default {
+    name: 'RCselect',
 
-  props: {
-    value: {
-      required: false,
-      default: null
-    },
-    fontSize: {
-      required: false,
-      default: '13px'
-    },
-    noRelative: {
-      required: false,
-      default: false
-    },
-    label: {
-      required: false
-    },
-    labelOptional: {
-      required: false,
-      default: false
-    },
-    labelDataId: {
-      required: false,
-      default: ''
-    },
-    infoTextMessage: {
-      required: false
-    },
-    selectWidth: {
-      type: String,
-      required: false,
-      default: '100%'
-    },
-    minWidth: {
-      required: false
-    },
-    maxWidth: {
-      required: false
-    },
-    selectHeight: {
-      type: String,
-      required: false,
-      default: null
+    components: {
+      SelectButton,
+      SelectButtonWrapper,
+      SelectDropdown,
+      Container,
+      InputLabel,
+      LabelWrapper,
+      OptionalLabel,
+      InfoText,
+      InputWrapper,
+      DropdownWrapper,
+      RCIcon,
+      Caret,
+      Selector,
+      InputText,
+      Teleport,
+      DraggableInputHandle
     },
-    height: {
-      required: false,
-      default: null
-    },
-    selectMinHeight: {
-      required: false,
-      default: '36px'
-    },
-    optionWidth: {
-      required: false,
-      default: null
-    },
-    hoverDropdown: {
-      required: false,
-      default: false
-    },
-    dropdownAutoClose: {
-      required: false,
-      default: false
-    },
-    alignItems: {
-      required: false,
-      default: 'horizontal'
-    },
-    buttonBgColor: {
-      required: false
-    },
-    buttonFontColor: {
-      required: false
-    },
-    dropdownBgColor: {
-      required: false,
-      default: 'grey5'
-    },
-    dropdownFontColor: {
-      required: false
-    },
-    dropDownArrowVisible: {
-      required: false,
-      default: true
-    },
-    caretColor: {
-      required: false
-    },
-    labelFontColor: {
-      required: false
-    },
-    colorMode: {
-      required: false,
-      default: 'light'
-    },
-    isSearchable: {
-      required: false,
-      default: true
-    },
-    hasError: {
-      required: false,
-      default: false
-    },
-    disabled: {
-      required: false,
-      default: false
-    },
-    isAutoSearch: {
-      required: false,
-      default: true
-    },
-    showBorder: {
-      required: false,
-      default: true
-    },
-    infoTextSize: {
-      required: false,
-      default: '14px'
-    },
-    dataId: {
-      type: String,
-      default: ''
-    },
-    hasSelectButtonPadding: {
-      type: Boolean,
-      default: true
-    },
-    isDraggable: {
-      type: Boolean,
-      default: false
-    },
-    leftPadding: {
-      type: String,
-      default: '15px'
-    },
-    tablePaddingLeft: {
-      required: false
-    },
-    showDisabledBackground: {
-      required: false,
-      default: true
-    },
-    minOptionLength: {
-      type: Number,
-      default: MIN_OPTION_LENGTH
-    },
-    dropdownMenuPosition: {
-      type: String,
-      default: DROPDOWN_MENU_POSITIONS.Automatic // options: ['automatic', bottom]
-    }
-  },
-
-  components: {
-    selectButton,
-    SelectButtonWrapper,
-    selectDropdown,
-    Container,
-    InputLabel,
-    LabelWrapper,
-    optionalLabel,
-    InfoText,
-    InputWrapper,
-    DropdownWrapper,
-    icon,
-    Caret,
-    Selector,
-    inputText,
-    Teleport,
-    draggableInputHandle
-  },
 
-  data() {
-    return {
-      selectedValue: null,
-      paddingLeft: this.isDraggable ? '30px' : this.leftPadding,
-      isDropdownOpen: false,
-      isActive: false,
-      textSearch: '',
-      hoveredIndex: 0,
-      isClickOutsideActive: false,
-      dropdownPosition: {
-        left: null,
-        top: null
-      },
-      dropdownWidth: null,
-      hoveredValue: null
-    }
-  },
-  mounted() {
-    this.observeDropdownHeight()
-    this.observeSelectWidth()
-    window.addEventListener('resize', this.handleSetDropdownOffet)
-  },
-  beforeMount() {
-    this.selectedValue = this.value
-    document.addEventListener('click', this.clickOutside)
-    this.getDropdownPosition()
-    window.removeEventListener('resize', this.handleSetDropdownOffet)
-    if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
-    if (this.selectResizeObserver) this.selectResizeObserver.disconnect()
-  },
-  unmounted() {
-    document.removeEventListener('click', this.clickOutside)
-  },
-  methods: {
-    focus() {
-      this.isActive = true
-    },
-    blur(e) {
-      this.isActive = false
-      this.$emit('blur', e)
-    },
-    toggleDropdown() {
-      this.isDropdownOpen = !this.isDropdownOpen
-    },
-    toggleCaretDropdown() {
-      this.isDropdownOpen = !this.isDropdownOpen
-    },
-    closeDropdown() {
-      this.blur()
-      this.clearSearch()
-      this.isDropdownOpen = false
-    },
-    clearSearch() {
-      this.textSearch = ''
-      this.searchChange('')
-    },
-    optionSelected(e) {
-      this.selectedValue = e
-      this.closeDropdown()
-      this.blur()
-      this.$emit('input-change', e)
-    },
-    optionHovered(e) {
-      this.hoveredValue = e
-    },
-    mouseEnterHandler() {
-      if (this.hoverDropdown) {
-        this.focus()
-        this.isDropdownOpen = true
-      }
-    },
-    mouseLeaveHandler() {
-      if (this.hoverDropdown) {
-        this.blur()
+    props: {
+      value: {
+        required: false,
+        default: null
+      },
+      fontSize: {
+        required: false,
+        default: '13px'
+      },
+      noRelative: {
+        required: false,
+        default: false
+      },
+      label: {
+        required: false
+      },
+      labelOptional: {
+        required: false,
+        default: false
+      },
+      labelDataId: {
+        required: false,
+        default: ''
+      },
+      infoTextMessage: {
+        required: false
+      },
+      selectWidth: {
+        type: String,
+        required: false,
+        default: '100%'
+      },
+      minWidth: {
+        required: false
+      },
+      maxWidth: {
+        required: false
+      },
+      selectHeight: {
+        type: String,
+        required: false,
+        default: null
+      },
+      height: {
+        required: false,
+        default: null
+      },
+      selectMinHeight: {
+        required: false,
+        default: '36px'
+      },
+      optionWidth: {
+        required: false,
+        default: null
+      },
+      hoverDropdown: {
+        required: false,
+        default: false
+      },
+      dropdownAutoClose: {
+        required: false,
+        default: false
+      },
+      alignItems: {
+        required: false,
+        default: 'horizontal'
+      },
+      buttonBgColor: {
+        required: false
+      },
+      buttonFontColor: {
+        required: false
+      },
+      dropdownBgColor: {
+        required: false,
+        default: 'grey5'
+      },
+      dropdownFontColor: {
+        required: false
+      },
+      dropDownArrowVisible: {
+        required: false,
+        default: true
+      },
+      caretColor: {
+        required: false
+      },
+      labelFontColor: {
+        required: false
+      },
+      colorMode: {
+        required: false,
+        default: 'light'
+      },
+      isSearchable: {
+        required: false,
+        default: true
+      },
+      hasError: {
+        required: false,
+        default: false
+      },
+      disabled: {
+        required: false,
+        default: false
+      },
+      isAutoSearch: {
+        required: false,
+        default: true
+      },
+      showBorder: {
+        required: false,
+        default: true
+      },
+      infoTextSize: {
+        required: false,
+        default: '14px'
+      },
+      dataId: {
+        type: String,
+        default: ''
+      },
+      hasSelectButtonPadding: {
+        type: Boolean,
+        default: true
+      },
+      isDraggable: {
+        type: Boolean,
+        default: false
+      },
+      leftPadding: {
+        type: String,
+        default: '15px'
+      },
+      tablePaddingLeft: {
+        required: false
+      },
+      showDisabledBackground: {
+        required: false,
+        default: true
+      },
+      minOptionLength: {
+        type: Number,
+        default: MIN_OPTION_LENGTH
+      },
+      dropdownMenuPosition: {
+        type: String,
+        default: DROPDOWN_MENU_POSITIONS.Automatic // options: ['automatic', bottom]
       }
     },
-    optionLeave() {
-      if (this.dropdownAutoClose) {
-        this.isDropdownOpen = false
+
+    data() {
+      return {
+        selectedValue: null,
+        paddingLeft: this.isDraggable ? '30px' : this.leftPadding,
+        isDropdownOpen: false,
+        isActive: false,
+        textSearch: '',
+        hoveredIndex: 0,
+        isClickOutsideActive: false,
+        dropdownPosition: {
+          left: null,
+          top: null
+        },
+        dropdownWidth: null,
+        hoveredValue: null
       }
     },
-    searchChange(value) {
-      this.textSearch = value
-      this.$emit('search-change', value)
-      const dropdownChildren = [...this.$refs.dropdown.$el.children]
-      dropdownChildren.forEach((el) => {
-        if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
-          el.style.display = 'none'
-
-          return
+    computed: {
+      optionLength() {
+        if (this.isDropdownOpen) {
+          return this.$refs.dropdown.$el.childElementCount > 1
+            ? this.$refs.dropdown.$el.childElementCount
+            : this.$refs.dropdown.$el.children[0].childElementCount
         }
 
-        el.style.display = 'inherit'
-      })
-    },
-    clickOutside(event) {
-      const dropdownRef = this.$refs.dropdown
-      // we need to prevent closing on selecting an option, because in the case of
-      // a disabled option, we don't want to close the dropdown
-      if (!this.isClickOutsideActive) return
-      if (
-        this.$refs.select.$el == event.target ||
-        this.$refs.select.$el.contains(event.target) ||
-        event.target.id === 'more-button' ||
-        event.target.parentNode === dropdownRef.$el
-      ) {
-        return
-      } else {
-        this.closeDropdown()
-      }
-    },
-    onKeyDown(e) {
-      if (e.key == 'ArrowDown') {
-        this.onArrowPress(1)
-      } else if (e.key == 'ArrowUp') {
-        this.onArrowPress(-1)
-      } else if (e.key == 'Enter') {
-        const optionHoveredComponent = [...this.$refs.dropdown.$el.children][
-          (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
-        ]
-        this.optionSelected(optionHoveredComponent.$el.dataset.value)
-      }
-    },
-    // If some part of the dropdown menu is outside viewport of the bottom of the screen,
-    // we need to offset it and display it at the top of the select dropdown instead
-    async getDropdownPosition() {
-      if (
-        !this.$refs.dropdownWrapperRef ||
-        !this.$refs.select ||
-        !this.$refs.dropdown
-      ) {
-        return
-      }
-      await this.$nextTick()
-      const isDisplayedAtBottom = await this.generateDropdownPosition()
-      // If the dropdown menu is going to be displayed at the bottom,
-      // we need reverify its position after a dom update (nextTick)
-      await this.$nextTick()
-      if (isDisplayedAtBottom) this.generateDropdownPosition()
-    },
-    async generateDropdownPosition() {
-      const isDropdownNotCompletelyVisible =
-        await this.isBottomOfDropdownOutOfViewport()
-      const dropdownWrapperEl = this.$refs.dropdownWrapperRef.$el
-      const selectButtonHeight = this.$refs.select.$el.clientHeight
-      const dropdownHeight = this.$refs.dropdown.$el.clientHeight
-      const dropdownWrapperRelativeHeight =
-        dropdownWrapperEl.getBoundingClientRect().top +
-        window.scrollY +
-        DROPDOWN_HEIGHT_OFFSET
+        return 0
+      },
+      isSearchBarVisible() {
+        return (
+          this.isSearchable &&
+          this.optionLength >= this.minOptionLength &&
+          this.isDropdownOpen
+        )
+      },
+      computedWidth() {
+        function removePX(item) {
+          return Number(item.replace('px', ''))
+        }
 
-      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
+        return this.selectWidth === '100%'
+          ? '100%'
+          : removePX(this.selectWidth) - removePX(CARET_WIDTH) + 'px'
+      },
+      getOptionWidth() {
+        if (this.optionWidth) return this.optionWidth
 
-      this.dropdownPosition = { left: Math.floor(left), top: Math.floor(top) }
+        return this.dropdownWidth
+      },
+      isSelectDropdownShown() {
+        return (
+          this.isDropdownOpen &&
+          this.dropdownPosition.left !== null &&
+          (!this.isSearchable || this.isSearchable)
+        )
+      },
+      isMobileDevice() {
+        const userAgent = navigator.userAgent || navigator.vendor || window.opera
+        const touchCapable =
+          'ontouchstart' in window ||
+          navigator.maxTouchPoints > 0 ||
+          navigator.msMaxTouchPoints > 0
 
-      return isDropdownNotCompletelyVisible
+        return (
+          /Android/i.test(userAgent) ||
+          /iPad|iPhone|iPod/.test(userAgent) ||
+          (/Macintosh/.test(userAgent) && touchCapable) ||
+          /windows phone/i.test(userAgent)
+        )
+      }
     },
-    async isBottomOfDropdownOutOfViewport() {
-      if (
-        !this.$refs.dropdown ||
-        this.dropdownMenuPosition === DROPDOWN_MENU_POSITIONS.Bottom
-      ) {
-        return false
+    watch: {
+      value(val) {
+        this.selectedValue = val
+      },
+      async isDropdownOpen(val) {
+        if (val) {
+          this.$emit('on-dropdown-open')
+          setTimeout(() => {
+            this.isClickOutsideActive = true
+          }, 10)
+          await this.$nextTick()
+          this.handleSetDropdownOffet()
+        } else {
+          this.dropdownPosition.left = null
+          setTimeout(() => {
+            this.isClickOutsideActive = false
+          }, 10)
+        }
+        if (val && this.isSearchable) {
+          this.$nextTick(() => {
+            if (this.$refs.searchInput && !this.isMobileDevice) {
+              this.$refs.searchInput.$el.querySelector('input').focus()
+            }
+          })
+        }
       }
+    },
+    mounted() {
+      this.observeDropdownHeight()
+      this.observeSelectWidth()
+      window.addEventListener('resize', this.handleSetDropdownOffet)
+    },
+    beforeMount() {
+      this.selectedValue = this.value
+      document.addEventListener('click', this.clickOutside)
+      this.getDropdownPosition()
+      window.removeEventListener('resize', this.handleSetDropdownOffet)
+      if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
+      if (this.selectResizeObserver) this.selectResizeObserver.disconnect()
+    },
+    unmounted() {
+      document.removeEventListener('click', this.clickOutside)
+    },
+    methods: {
+      focus() {
+        this.isActive = true
+      },
+      blur(e) {
+        this.isActive = false
+        this.$emit('blur', e)
+      },
+      toggleDropdown() {
+        this.isDropdownOpen = !this.isDropdownOpen
+      },
+      toggleCaretDropdown() {
+        this.isDropdownOpen = !this.isDropdownOpen
+      },
+      closeDropdown() {
+        this.blur()
+        this.clearSearch()
+        this.isDropdownOpen = false
+      },
+      clearSearch() {
+        this.textSearch = ''
+        this.searchChange('')
+      },
+      optionSelected(e) {
+        this.selectedValue = e
+        this.closeDropdown()
+        this.blur()
+        this.$emit('input-change', e)
+      },
+      optionHovered(e) {
+        this.hoveredValue = e
+      },
+      mouseEnterHandler() {
+        if (this.hoverDropdown) {
+          this.focus()
+          this.isDropdownOpen = true
+        }
+      },
+      mouseLeaveHandler() {
+        if (this.hoverDropdown) {
+          this.blur()
+        }
+      },
+      optionLeave() {
+        if (this.dropdownAutoClose) {
+          this.isDropdownOpen = false
+        }
+      },
+      searchChange(value) {
+        this.textSearch = value
+        this.$emit('search-change', value)
+        const dropdownChildren = [...this.$refs.dropdown.$el.children]
+        dropdownChildren.forEach((el) => {
+          if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
+            el.style.display = 'none'
 
-      await this.$nextTick()
-      const rect = this.$refs.dropdown.$el.getBoundingClientRect()
-      const windowHeight =
-        window.innerHeight || document.documentElement.clientHeight
-
-      if (windowHeight <= 650) return true
+            return
+          }
 
-      // using Math.floor because the offsets may contain decimals we are not going to consider here
-      return Math.floor(rect.top) + Math.floor(rect.height) <= windowHeight
-    },
-    observeDropdownHeight() {
-      if (!this.$refs.dropdown) return
-      this.dropdownResizeObserver = new ResizeObserver(() => {
-        this.$nextTick(() => this.getDropdownPosition())
-      })
-      this.dropdownResizeObserver.observe(this.$refs.dropdown.$el)
-    },
-    handleSetDropdownOffet() {
-      if (!this.$refs.select) return
-      this.dropdownPosition.left = Math.floor(
-        this.$refs.select.$el.getBoundingClientRect().left
-      )
-      this.getDropdownWidth()
-    },
-    observeSelectWidth() {
-      if (!this.$refs.select) return
-      this.selectResizeObserver = new ResizeObserver(() =>
-        // eslint-disable-next-line vue/valid-next-tick
-        this.$nextTick(() => this.getDropdownWidth())
-      )
-      this.selectResizeObserver.observe(this.$refs.dropdown.$el)
-    },
-    async getDropdownWidth() {
-      if (!this.$refs.select) return
-      await this.$nextTick()
-      this.dropdownWidth = `${this.$refs.select.$el.clientWidth}px`
-    },
-    onArrowPress(dir) {
-      let newHoveredElem
-      const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
-        `[data-value="${this.hoveredValue}"]`
-      )
-      if (currentHoveredElem) {
-        if (dir > 0) {
-          newHoveredElem = currentHoveredElem.nextElementSibling
+          el.style.display = 'inherit'
+        })
+      },
+      clickOutside(event) {
+        const dropdownRef = this.$refs.dropdown
+        // we need to prevent closing on selecting an option, because in the case of
+        // a disabled option, we don't want to close the dropdown
+        if (!this.isClickOutsideActive) return
+        if (
+          this.$refs.select.$el == event.target ||
+          this.$refs.select.$el.contains(event.target) ||
+          event.target.id === 'more-button' ||
+          event.target.parentNode === dropdownRef.$el
+        ) {
+          return
         } else {
-          newHoveredElem = currentHoveredElem.previousElementSibling
+          this.closeDropdown()
+        }
+      },
+      onKeyDown(e) {
+        if (e.key == 'ArrowDown') {
+          this.onArrowPress(1)
+        } else if (e.key == 'ArrowUp') {
+          this.onArrowPress(-1)
+        } else if (e.key == 'Enter') {
+          const optionHoveredComponent = [...this.$refs.dropdown.$el.children][
+            (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
+          ]
+          this.optionSelected(optionHoveredComponent.$el.dataset.value)
         }
-        if (newHoveredElem) {
-          this.hoveredValue = newHoveredElem.getAttribute('data-value')
-          const topPos = newHoveredElem.offsetTop
-          this.$refs.dropdown.$el.scrollTop = topPos
+      },
+      // If some part of the dropdown menu is outside viewport of the bottom of the screen,
+      // we need to offset it and display it at the top of the select dropdown instead
+      async getDropdownPosition() {
+        if (
+          !this.$refs.dropdownWrapperRef ||
+          !this.$refs.select ||
+          !this.$refs.dropdown
+        ) {
+          return
         }
-      }
-    }
-  },
-  computed: {
-    optionLength() {
-      if (this.isDropdownOpen) {
-        return this.$refs.dropdown.$el.childElementCount > 1
-          ? this.$refs.dropdown.$el.childElementCount
-          : this.$refs.dropdown.$el.children[0].childElementCount
-      }
+        await this.$nextTick()
+        const isDisplayedAtBottom = await this.generateDropdownPosition()
+        // If the dropdown menu is going to be displayed at the bottom,
+        // we need reverify its position after a dom update (nextTick)
+        await this.$nextTick()
+        if (isDisplayedAtBottom) this.generateDropdownPosition()
+      },
+      async generateDropdownPosition() {
+        const isDropdownNotCompletelyVisible =
+          await this.isBottomOfDropdownOutOfViewport()
+        const dropdownWrapperEl = this.$refs.dropdownWrapperRef.$el
+        const selectButtonHeight = this.$refs.select.$el.clientHeight
+        const dropdownHeight = this.$refs.dropdown.$el.clientHeight
+        const dropdownWrapperRelativeHeight =
+          dropdownWrapperEl.getBoundingClientRect().top +
+          window.scrollY +
+          DROPDOWN_HEIGHT_OFFSET
 
-      return 0
-    },
-    isSearchBarVisible() {
-      return (
-        this.isSearchable &&
-        this.optionLength >= this.minOptionLength &&
-        this.isDropdownOpen
-      )
-    },
-    computedWidth() {
-      function removePX(item) {
-        return Number(item.replace('px', ''))
-      }
+        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
 
-      return this.selectWidth === '100%'
-        ? '100%'
-        : removePX(this.selectWidth) - removePX(CARET_WIDTH) + 'px'
-    },
-    getOptionWidth() {
-      if (this.optionWidth) return this.optionWidth
+        this.dropdownPosition = { left: Math.floor(left), top: Math.floor(top) }
 
-      return this.dropdownWidth
-    },
-    isSelectDropdownShown() {
-      return (
-        this.isDropdownOpen &&
-        this.dropdownPosition.left !== null &&
-        (!this.isSearchable || this.isSearchable)
-      )
-    },
-    isMobileDevice() {
-      const userAgent = navigator.userAgent || navigator.vendor || window.opera
-      const touchCapable =
-        'ontouchstart' in window ||
-        navigator.maxTouchPoints > 0 ||
-        navigator.msMaxTouchPoints > 0
+        return isDropdownNotCompletelyVisible
+      },
+      async isBottomOfDropdownOutOfViewport() {
+        if (
+          !this.$refs.dropdown ||
+          this.dropdownMenuPosition === DROPDOWN_MENU_POSITIONS.Bottom
+        ) {
+          return false
+        }
 
-      return (
-        /Android/i.test(userAgent) ||
-        /iPad|iPhone|iPod/.test(userAgent) ||
-        (/Macintosh/.test(userAgent) && touchCapable) ||
-        /windows phone/i.test(userAgent)
-      )
-    }
-  },
-  watch: {
-    value(val) {
-      this.selectedValue = val
-    },
-    async isDropdownOpen(val) {
-      if (val) {
-        this.$emit('on-dropdown-open')
-        setTimeout(() => {
-          this.isClickOutsideActive = true
-        }, 10)
         await this.$nextTick()
-        this.handleSetDropdownOffet()
-      } else {
-        this.dropdownPosition.left = null
-        setTimeout(() => {
-          this.isClickOutsideActive = false
-        }, 10)
-      }
-      if (val && this.isSearchable) {
-        this.$nextTick(() => {
-          if (this.$refs.searchInput && !this.isMobileDevice) {
-            this.$refs.searchInput.$el.querySelector('input').focus()
-          }
+        const rect = this.$refs.dropdown.$el.getBoundingClientRect()
+        const windowHeight =
+          window.innerHeight || document.documentElement.clientHeight
+
+        if (windowHeight <= 650) return true
+
+        // using Math.floor because the offsets may contain decimals we are not going to consider here
+        return Math.floor(rect.top) + Math.floor(rect.height) <= windowHeight
+      },
+      observeDropdownHeight() {
+        if (!this.$refs.dropdown) return
+        this.dropdownResizeObserver = new ResizeObserver(() => {
+          this.$nextTick(() => this.getDropdownPosition())
         })
+        this.dropdownResizeObserver.observe(this.$refs.dropdown.$el)
+      },
+      handleSetDropdownOffet() {
+        if (!this.$refs.select) return
+        this.dropdownPosition.left = Math.floor(
+          this.$refs.select.$el.getBoundingClientRect().left
+        )
+        this.getDropdownWidth()
+      },
+      observeSelectWidth() {
+        if (!this.$refs.select) return
+        this.selectResizeObserver = new ResizeObserver(() =>
+          // eslint-disable-next-line vue/valid-next-tick
+          this.$nextTick(() => this.getDropdownWidth())
+        )
+        this.selectResizeObserver.observe(this.$refs.dropdown.$el)
+      },
+      async getDropdownWidth() {
+        if (!this.$refs.select) return
+        await this.$nextTick()
+        this.dropdownWidth = `${this.$refs.select.$el.clientWidth}px`
+      },
+      onArrowPress(dir) {
+        let newHoveredElem
+        const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
+          `[data-value="${this.hoveredValue}"]`
+        )
+        if (currentHoveredElem) {
+          if (dir > 0) {
+            newHoveredElem = currentHoveredElem.nextElementSibling
+          } else {
+            newHoveredElem = currentHoveredElem.previousElementSibling
+          }
+          if (newHoveredElem) {
+            this.hoveredValue = newHoveredElem.getAttribute('data-value')
+            const topPos = newHoveredElem.offsetTop
+            this.$refs.dropdown.$el.scrollTop = topPos
+          }
+        }
       }
     }
   }
-}
 </script>