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

package/src/components/tableDropdown/index.vue

@@ -1,176 +1,159 @@
 <template>
-  <DropdownRow
+  <dropdown-row
     :colspan="colSpan"
-    :disabled="disabled"
-    :is-open="isOpen"
+    :isOpen="isOpen"
     @click="toggleOpen"
+    :disabled="disabled"
   >
-    <ComponentContainer
-      class="table-dropdown"
-      :col-span="colSpan - 1"
-    >
-      <ComponentItem
+    <component-container :colSpan="colSpan - 1" class="table-dropdown">
+      <component-item
         v-for="(item, index) in tableItems"
         :key="index"
         ref="dropdownItem"
+        :isNested="isNested"
         :class="{
           'table-dropdown-item': item.type !== 'input'
         }"
-        :is-nested="isNested"
       >
-        <NestedContainer :is-nested="isNested">
-          <NestedIcon
+        <nested-container :isNested="isNested">
+          <nested-icon
             v-if="
               isNested &&
-                (item.type === 'input' ||
-                  item.type === 'no-template' ||
-                  item.type === 'template')
+              (item.type === 'input' ||
+                item.type === 'no-template' ||
+                item.type === 'template')
             "
           />
-          <TemplateButton
+          <template-button
+            @click.stop="onTemplateClick(item.row)"
             v-if="
               item.type &&
-                item.type === 'template' &&
-                (item.value === '' || item.value === '-')
+              item.type === 'template' &&
+              (item.value === '' || item.value === '-')
             "
             :key="index + '_button'"
-            @click.stop="onTemplateClick(item.row)"
+            >{{ $gettext('Use template...') }}</template-button
           >
-            {{ $gettext('Use template...') }}
-          </TemplateButton>
-          <TemplateLink
+          <template-link
             v-else-if="
               item.type && item.type === 'template' && item.value !== ''
             "
             @click.stop="onSelectedTemplateClick(item.row)"
           >
             <!-- <img :src="fileIcon" alt="icon" width="12" height="16" /> -->
-            <Icon
-              :color="theme.colors.brightBlue"
+            <icon
               name="template_icon_not_clickable"
+              :color="theme.colors.brightBlue"
               size="14px"
             />
             <div>{{ item.value }}</div>
-          </TemplateLink>
-          <NoTemplate v-if="item.type && item.type === 'no-template'">
+          </template-link>
+          <no-template v-if="item.type && item.type === 'no-template'">
             {{ $gettext('No main component template') }}
-          </NoTemplate>
-          <InputContainer
+          </no-template>
+          <input-container
             v-if="item.type === 'input'"
             @click.stop="onInputClick()"
           >
-            <TextContainer
+            <text-container
               v-if="customInputDisabled"
               class="input-placeholder"
             >
               <span> {{ item.value }}</span>
-            </TextContainer>
-            <InputText
+            </text-container>
+            <input-text
               v-else
               class="inputField"
-              :disabled="customInputDisabled"
-              :min-width="item.value.length + 'ch'"
-              :no-border="true"
               :value="item.value"
+              :noBorder="true"
+              :minWidth="item.value.length + 'ch'"
+              :disabled="customInputDisabled"
               @input-change="onCustomInputChange($event)"
             />
-          </InputContainer>
-          <TextContainer
+          </input-container>
+          <text-container
             v-else-if="
               item.type !== 'input' &&
-                item.type !== 'no-template' &&
-                item.type !== 'template'
+              item.type !== 'no-template' &&
+              item.type !== 'template'
             "
           >
             <span> {{ item.value }}</span>
-          </TextContainer>
-        </NestedContainer>
-      </ComponentItem>
-      <ArrowContainer
-        class="arrow-container"
-        :is-disabled="disabled"
-      >
-        <ArrowWrapper :show-archived="showArchived">
-          <EtPopover
+          </text-container>
+        </nested-container>
+      </component-item>
+      <arrow-container class="arrow-container" :isDisabled="disabled">
+        <arrow-wrapper :showArchived="showArchived">
+          <et-popover
             v-if="showArchived"
             button-class="error"
             :text="
               $gettext(`Component has been archived and shouldn't be used`)
             "
-            trigger-type="hover"
-          />
-          <ArrowDown
+            triggerType="hover"
+          ></et-popover>
+          <arrow-down
+            @click.stop="toggleOpen"
             v-if="!isOpen"
             class="arrow-dropdown"
-            @click.stop="toggleOpen"
           />
-          <ArrowUp
-            v-else
-            @click.stop="toggleOpen"
-          />
-        </ArrowWrapper>
-        <OptionsContainer
-          v-if="isOpen"
-          ref="optionsContainer"
-        >
-          <OptionsWrapper @click.prevent.stop>
-            <SearchContainer @click.prevent.stop>
-              <SearchInput
-                ref="searchInput"
-                :placeholder="$gettext('Keyword') + '...'"
+          <arrow-up @click.stop="toggleOpen" v-else />
+        </arrow-wrapper>
+        <options-container v-if="isOpen" ref="optionsContainer">
+          <options-wrapper @click.prevent.stop>
+            <search-container @click.prevent.stop>
+              <search-input
                 :value="inputText"
+                :placeholder="$gettext('Keyword') + '...'"
                 @click.prevent.stop
                 @on-change="onSearch($event)"
+                ref="searchInput"
               />
-            </SearchContainer>
-            <Spinner v-if="optionsLoading" />
-            <EmptyText v-else-if="!optionsLoading && !optionItems.length">
+            </search-container>
+            <spinner v-if="optionsLoading" />
+            <empty-text v-else-if="!optionsLoading && !optionItems.length">
               {{ emptyText ? emptyText : $gettext('No components found.') }}
-            </EmptyText>
-            <OptionsItem
-              v-for="(item, index) in optionItems"
+            </empty-text>
+            <options-item
               v-else
-              :key="index"
-              :col-span="colSpan - 1"
-              :tabindex="0"
+              :colSpan="colSpan - 1"
               :width="dynamicGridWidth"
+              v-for="(item, index) in optionItems"
+              :key="index"
               @click="onItemClick(item)"
+              :tabindex="0"
               @keyup.enter="onItemClick(item)"
             >
-              <template
-                v-for="(option, idx) in optionsDisplay"
-                :key="idx"
-              >
+              <template v-for="(option, idx) in optionsDisplay" :key="idx">
                 <span v-if="option !== 'template'">
                   {{ !!item[option] ? item[option] : '-' }}
                 </span>
-                <TemplateButton
-                  v-else-if="option === 'template' && item.has_template"
+                <template-button
                   @click.stop="onTemplateClick(item)"
+                  v-else-if="option === 'template' && item.has_template"
+                  >{{ $gettext('Use template...') }}</template-button
                 >
-                  {{ $gettext('Use template...') }}
-                </TemplateButton>
-                <NoTemplate
+                <no-template
                   v-else-if="option === 'template' && !item.has_template"
                 >
                   {{ $gettext('No main component template') }}
-                </NoTemplate>
+                </no-template>
               </template>
-            </OptionsItem>
-          </OptionsWrapper>
-          <CustomContainer
+            </options-item>
+          </options-wrapper>
+          <custom-container
             v-if="inputText.length && allowFreeInputs"
             @click="onCustomNameClick()"
           >
-            <CustomName>{{ getCustomName }}</CustomName>
-            <CustomSubtext>
-              ({{ $gettext('custom_component') }})
-            </CustomSubtext>
-          </CustomContainer>
-        </OptionsContainer>
-      </ArrowContainer>
-    </ComponentContainer>
-  </DropdownRow>
+            <custom-name>{{ getCustomName }}</custom-name>
+            <custom-subtext
+              >({{ $gettext('custom_component') }})</custom-subtext
+            >
+          </custom-container>
+        </options-container>
+      </arrow-container>
+    </component-container>
+  </dropdown-row>
 </template>
 
 <script>
@@ -193,18 +176,18 @@
 //   :optionsDisplay="['display_name', 'company_item_number']" // Array. what should be displayed
 //   :disabled="true"
 // />
-  import styled from 'vue3-styled-components'
-  import Spinner from '../spinner'
-  import SearchInput from '../inputs/searchInput'
-  import InputText from '../inputs/inputText'
-  import CollapseArrowIcon from '../../assets/icons/collapse_arrow_icon.svg'
-  import SubpositionMarkerIcon from '../../assets/icons/subposition_marker.svg'
-  import fileIconPng from '../../assets/icons/file_icon.png'
-  import Icon from '../icon'
-  import theme from '@/assets/theme.js'
-
-  const rowAttrs = { disabled: Boolean, isOpen: Boolean }
-  const DropdownRow = styled('div', rowAttrs)`
+import styled from 'vue3-styled-components'
+import Spinner from '../spinner'
+import SearchInput from '../inputs/searchInput'
+import InputText from '../inputs/inputText'
+import CollapseArrowIcon from '../../assets/icons/collapse_arrow_icon.svg'
+import SubpositionMarkerIcon from '../../assets/icons/subposition_marker.svg'
+import fileIconPng from '../../assets/icons/file_icon.png'
+import Icon from '../icon'
+import theme from '@/assets/theme.js'
+
+const rowAttrs = { disabled: Boolean, isOpen: Boolean }
+const DropdownRow = styled('div', rowAttrs)`
   cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   display: contents;
 
@@ -218,8 +201,8 @@
   }
 `
 
-  const ItemAttrs = { isNested: Boolean }
-  const ComponentItem = styled('td', ItemAttrs)`
+const ItemAttrs = { isNested: Boolean }
+const ComponentItem = styled('td', ItemAttrs)`
   padding-left: ${(props) => (props.isNested ? '14px !important' : '0')};
   overflow: hidden;
   text-overflow: ellipsis;
@@ -243,8 +226,8 @@
   }
 `
 
-  const containerAttrs = { colSpan: Number, width: String }
-  const ComponentContainer = styled('div', containerAttrs)`
+const containerAttrs = { colSpan: Number, width: String }
+const ComponentContainer = styled('div', containerAttrs)`
   display: contents;
   align-items: center;
   background-color: ${(props) => props.theme.colors.white};
@@ -252,19 +235,19 @@
   padding: 5px 4px;
 `
 
-  const ArrowDown = styled(CollapseArrowIcon)`
+const ArrowDown = styled(CollapseArrowIcon)`
   width: 8px;
   transition: transform 150ms ease;
 `
 
-  const ArrowUp = styled.img`
+const ArrowUp = styled.img`
   width: 8px;
   transform: rotate(180deg);
   transition: transform 150ms ease;
 `
 
-  const ArrowAttrs = { isDisabled: Boolean }
-  const ArrowContainer = styled('td', ArrowAttrs)`
+const ArrowAttrs = { isDisabled: Boolean }
+const ArrowContainer = styled('td', ArrowAttrs)`
   border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
   background-clip: content-box;
   padding: 8px 0 7px 0 !important;
@@ -284,18 +267,18 @@
   }
 `
 
-  const arrowAttrs = { showArchived: Boolean }
-  const ArrowWrapper = styled('div', arrowAttrs)`
+const arrowAttrs = { showArchived: Boolean }
+const ArrowWrapper = styled('div', arrowAttrs)`
   display: grid;
   grid-template-columns: ${(props) =>
-  props.showArchived ? 'auto auto' : 'auto'};
+    props.showArchived ? 'auto auto' : 'auto'};
   align-items: center;
   justify-items: center;
   height: 100%;
 `
 
-  const optionsAttrs = { top: Number, left: Number }
-  const OptionsContainer = styled('div', optionsAttrs)`
+const optionsAttrs = { top: Number, left: Number }
+const OptionsContainer = styled('div', optionsAttrs)`
   position: absolute;
   margin-top: 10px;
   display: grid;
@@ -311,7 +294,7 @@
   border-radius: 4px;
 `
 
-  const EmptyText = styled.div`
+const EmptyText = styled.div`
   align-self: center;
   justify-self: center;
   height: 100px;
@@ -319,7 +302,7 @@
   align-content: center;
 `
 
-  const OptionsWrapper = styled.div`
+const OptionsWrapper = styled.div`
   display: grid;
   position: relative;
   padding: 12px;
@@ -330,7 +313,7 @@
   min-width: 400px; // kind of an arbitrary number until we know all use cases
 `
 
-  const OptionsItem = styled('div', containerAttrs)`
+const OptionsItem = styled('div', containerAttrs)`
   display: grid;
   grid-template-columns: ${(props) => props.width};
   grid-gap: 30px;
@@ -348,7 +331,7 @@
   }
 `
 
-  const SearchContainer = styled.div`
+const SearchContainer = styled.div`
   position: sticky;
   top: 0;
   padding-top: 6px;
@@ -356,7 +339,7 @@
   height: 40px;
 `
 
-  const TemplateButton = styled.div`
+const TemplateButton = styled.div`
   cursor: pointer;
   background-color: #263238;
   color: ${(props) => props.theme.colors.white};
@@ -367,7 +350,7 @@
   margin-left: 15px;
 `
 
-  const NoTemplate = styled.div`
+const NoTemplate = styled.div`
   color: ${(props) => props.theme.colors.gray1};
   font-style: italic;
   overflow: hidden;
@@ -375,7 +358,7 @@
   padding-left: 15px;
 `
 
-  const TemplateLink = styled.div`
+const TemplateLink = styled.div`
   color: ${(props) => props.theme.colors.brightBlue};
   cursor: pointer;
   display: grid;
@@ -384,13 +367,13 @@
   padding-left: 15px;
 `
 
-  const InputContainer = styled.div`
+const InputContainer = styled.div`
   .inputField input {
     border-radius: 4px 0 0 4px;
   }
 `
 
-  const CustomContainer = styled.div`
+const CustomContainer = styled.div`
   display: grid;
   grid-template-columns: auto 1fr;
   padding: 10px 22px;
@@ -402,254 +385,254 @@
   }
 `
 
-  const CustomName = styled.div`
+const CustomName = styled.div`
   justify-self: flex-start;
 `
 
-  const CustomSubtext = styled.div`
+const CustomSubtext = styled.div`
   justify-self: flex-end;
   color: ${(props) => props.theme.colors.grey3};
 `
 
-  const TextContainer = styled.div`
+const TextContainer = styled.div`
   height: 100%;
   display: grid;
   align-items: center;
 `
 
-  const NestedIcon = styled(SubpositionMarkerIcon)`
+const NestedIcon = styled(SubpositionMarkerIcon)`
   height: 10px;
   width: 6px;
 `
 
-  const NestedAttrs = { isNested: Boolean }
-  const NestedContainer = styled('div', NestedAttrs)`
+const NestedAttrs = { isNested: Boolean }
+const NestedContainer = styled('div', NestedAttrs)`
   display: grid;
   grid-gap: 5px;
   grid-template-columns: ${(props) => (props.isNested ? 'auto 1fr' : '1fr')};
   align-items: center;
 `
 
-  export default {
-    name: 'TableDropdown',
-    components: {
-      DropdownRow,
-      ComponentItem,
-      ComponentContainer,
-      ArrowDown,
-      ArrowUp,
-      OptionsContainer,
-      Spinner,
-      EmptyText,
-      SearchInput,
-      ArrowWrapper,
-      OptionsWrapper,
-      OptionsItem,
-      SearchContainer,
-      TemplateButton,
-      NoTemplate,
-      TemplateLink,
-      InputText,
-      InputContainer,
-      CustomContainer,
-      CustomName,
-      CustomSubtext,
-      ArrowContainer,
-      TextContainer,
-      NestedIcon,
-      NestedContainer,
-      Icon
+export default {
+  name: 'table-dropdown',
+  components: {
+    DropdownRow,
+    ComponentItem,
+    ComponentContainer,
+    ArrowDown,
+    ArrowUp,
+    OptionsContainer,
+    Spinner,
+    EmptyText,
+    SearchInput,
+    ArrowWrapper,
+    OptionsWrapper,
+    OptionsItem,
+    SearchContainer,
+    TemplateButton,
+    NoTemplate,
+    TemplateLink,
+    InputText,
+    InputContainer,
+    CustomContainer,
+    CustomName,
+    CustomSubtext,
+    ArrowContainer,
+    TextContainer,
+    NestedIcon,
+    NestedContainer,
+    Icon
+  },
+  props: {
+    colSpan: {
+      required: false,
+      default: 1
+    },
+    customInputDisabled: {
+      // whether the input field should be disabled
+      required: false,
+      default: true
+    },
+    allowFreeInputs: {
+      // whether we allow the user to select a custom input
+      required: false,
+      default: false
+    },
+    tableItems: {
+      required: true
+    },
+    showArchived: {
+      required: false,
+      default: false
+    },
+    isOpen: {
+      required: true,
+      default: false
+    },
+    optionsLoading: {
+      required: false,
+      default: false
+    },
+    emptyText: {
+      required: false,
+      default: null
+    },
+    optionItems: {
+      required: true
+    },
+    optionsDisplay: {
+      required: true,
+      default: [] // should be like ['display_name', 'company_item_number', 'description']
+    },
+    disabled: {
+      required: false,
+      default: false
+    },
+    isNested: {
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      inputText: '',
+      wasClicked: false, // prevents custom-name from being triggered on the <input-text />
+      dynamicWidth: [], // for numbers
+      dynamicGridWidth: [], // for grid values
+      fileIcon: fileIconPng
+    }
+  },
+  methods: {
+    toggleOpen(event) {
+      if (
+        this.disabled ||
+        (event &&
+          !(event.target === this.$el) &&
+          !this.$el.contains(event.target))
+      ) {
+        return
+      }
+      this.wasClicked = false
+      if (!this.isOpen) {
+        document.addEventListener('click', this.clickOutside)
+        this.$emit('dropdown-search', '')
+        this.$nextTick(() => {
+          this.scrollToItem()
+        })
+        this.$emit('toggle-dropdown-open', { close: false })
+        this.$nextTick(() => {
+          this.$refs.searchInput.$el.children[0].children[1].focus()
+        })
+      } else {
+        document.removeEventListener('click', this.clickOutside)
+        this.$emit('toggle-dropdown-open', { close: true })
+        this.inputText = ''
+      }
     },
-    props: {
-      colSpan: {
-        required: false,
-        default: 1
-      },
-      customInputDisabled: {
-        // whether the input field should be disabled
-        required: false,
-        default: true
-      },
-      allowFreeInputs: {
-        // whether we allow the user to select a custom input
-        required: false,
-        default: false
-      },
-      tableItems: {
-        required: true
-      },
-      showArchived: {
-        required: false,
-        default: false
-      },
-      isOpen: {
-        required: true,
-        default: false
-      },
-      optionsLoading: {
-        required: false,
-        default: false
-      },
-      emptyText: {
-        required: false,
-        default: null
-      },
-      optionItems: {
-        required: true
-      },
-      optionsDisplay: {
-        required: true,
-        default: [] // should be like ['display_name', 'company_item_number', 'description']
-      },
-      disabled: {
-        required: false,
-        default: false
-      },
-      isNested: {
-        required: false,
-        default: false
+    onInputClick() {
+      if (!this.isOpen) {
+        this.toggleOpen()
       }
     },
-    data() {
-      return {
-        inputText: '',
-        wasClicked: false, // prevents custom-name from being triggered on the <input-text />
-        dynamicWidth: [], // for numbers
-        dynamicGridWidth: [], // for grid values
-        fileIcon: fileIconPng
+    scrollToItem() {
+      if (this.$refs.optionsContainer) {
+        this.$refs.optionsContainer.$el.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        })
       }
     },
-    computed: {
-      getCustomName() {
-        return this.inputText
-      },
-      theme() {
-        return theme
+    onTemplateClick(item) {
+      this.$emit('on-template-click', item)
+    },
+    onSelectedTemplateClick(item) {
+      this.$emit('on-selected-template-click', item)
+    },
+    onItemClick(item) {
+      this.wasClicked = true
+      this.$emit('item-selected', item)
+    },
+    onSearch(value) {
+      this.inputText = value
+      this.$emit('dropdown-search', value)
+    },
+    clickOutside(event) {
+      if (event.target === this.$el || this.$el.contains(event.target)) {
+        return
       }
+      this.inputText = ''
+      // 'close: true' is needed in case a box is open and another box is clicked on
+      // so this one will close properly
+      document.removeEventListener('click', this.clickOutside)
+      this.$emit('toggle-dropdown-open', { close: true })
     },
-    watch: {
-      isOpen(newVal) {
-        if (newVal) {
-          document.addEventListener('click', this.clickOutside)
-          this.$emit('dropdown-search', '')
-          this.$nextTick(() => {
-            this.$refs.searchInput.$el.children[0].children[0].focus()
-          })
-          this.$nextTick(() => {
-            this.scrollToItem()
-          })
-        }
-      },
-      optionItems: {
-        immediate: true,
-        handler(val) {
-          if (val && val.length) {
-            this.setDropdownWidth(val)
-          }
-        }
+    onCustomNameClick() {
+      this.wasClicked = true
+      this.$emit('on-custom-input-name', this.inputText)
+      this.$emit('toggle-dropdown-open', { close: true })
+      this.inputText = ''
+    },
+    onCustomInputChange(event) {
+      if (this.wasClicked) {
+        return
       }
+      this.$emit('custom-input-change', event)
     },
-    methods: {
-      toggleOpen(event) {
-        if (
-          this.disabled ||
-          (event &&
-            !(event.target === this.$el) &&
-            !this.$el.contains(event.target))
-        ) {
-          return
-        }
-        this.wasClicked = false
-        if (!this.isOpen) {
-          document.addEventListener('click', this.clickOutside)
-          this.$emit('dropdown-search', '')
-          this.$nextTick(() => {
-            this.scrollToItem()
-          })
-          this.$emit('toggle-dropdown-open', { close: false })
-          this.$nextTick(() => {
-            this.$refs.searchInput.$el.children[0].children[1].focus()
-          })
-        } else {
-          document.removeEventListener('click', this.clickOutside)
-          this.$emit('toggle-dropdown-open', { close: true })
-          this.inputText = ''
-        }
-      },
-      onInputClick() {
-        if (!this.isOpen) {
-          this.toggleOpen()
-        }
-      },
-      scrollToItem() {
-        if (this.$refs.optionsContainer) {
-          this.$refs.optionsContainer.$el.scrollIntoView({
-            behavior: 'smooth',
-            block: 'center'
-          })
-        }
-      },
-      onTemplateClick(item) {
-        this.$emit('on-template-click', item)
-      },
-      onSelectedTemplateClick(item) {
-        this.$emit('on-selected-template-click', item)
-      },
-      onItemClick(item) {
-        this.wasClicked = true
-        this.$emit('item-selected', item)
-      },
-      onSearch(value) {
-        this.inputText = value
-        this.$emit('dropdown-search', value)
-      },
-      clickOutside(event) {
-        if (event.target === this.$el || this.$el.contains(event.target)) {
-          return
-        }
-        this.inputText = ''
-        // 'close: true' is needed in case a box is open and another box is clicked on
-        // so this one will close properly
-        document.removeEventListener('click', this.clickOutside)
-        this.$emit('toggle-dropdown-open', { close: true })
-      },
-      onCustomNameClick() {
-        this.wasClicked = true
-        this.$emit('on-custom-input-name', this.inputText)
-        this.$emit('toggle-dropdown-open', { close: true })
-        this.inputText = ''
-      },
-      onCustomInputChange(event) {
-        if (this.wasClicked) {
-          return
-        }
-        this.$emit('custom-input-change', event)
-      },
-      setDropdownWidth(options) {
-        this.dynamicWidth = []
-
-        options.forEach((item) => {
-          this.optionsDisplay.forEach((header, index) => {
-            let value =
-              header === 'template'
-                ? this.$gettext('No main component template')
-                : item[header]
-            value = value ? value : ''
-
-            // Update dynamicWidth with the maximum value
-            if (
-              !this.dynamicWidth[index] ||
-              value.length > this.dynamicWidth[index]
-            ) {
-              this.dynamicWidth[index] = value.length
-            }
-          })
+    setDropdownWidth(options) {
+      this.dynamicWidth = []
+
+      options.forEach((item) => {
+        this.optionsDisplay.forEach((header, index) => {
+          let value =
+            header === 'template'
+              ? this.$gettext('No main component template')
+              : item[header]
+          value = value ? value : ''
+
+          // Update dynamicWidth with the maximum value
+          if (
+            !this.dynamicWidth[index] ||
+            value.length > this.dynamicWidth[index]
+          ) {
+            this.dynamicWidth[index] = value.length
+          }
         })
+      })
 
-        this.dynamicGridWidth = this.dynamicWidth
-          .map((width) => width + 'ch')
-          .join(' ')
+      this.dynamicGridWidth = this.dynamicWidth
+        .map((width) => width + 'ch')
+        .join(' ')
+    }
+  },
+  computed: {
+    getCustomName() {
+      return this.inputText
+    },
+    theme() {
+      return theme
+    }
+  },
+  watch: {
+    isOpen(newVal) {
+      if (newVal) {
+        document.addEventListener('click', this.clickOutside)
+        this.$emit('dropdown-search', '')
+        this.$nextTick(() => {
+          this.$refs.searchInput.$el.children[0].children[0].focus()
+        })
+        this.$nextTick(() => {
+          this.scrollToItem()
+        })
+      }
+    },
+    optionItems: {
+      immediate: true,
+      handler(val) {
+        if (val && val.length) {
+          this.setDropdownWidth(val)
+        }
       }
     }
   }
+}
 </script>