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

package/src/components/tableDropdown/index.vue

@@ -1,159 +1,176 @@
 <template>
-  <dropdown-row
+  <DropdownRow
     :colspan="colSpan"
-    :isOpen="isOpen"
-    @click="toggleOpen"
     :disabled="disabled"
+    :is-open="isOpen"
+    @click="toggleOpen"
   >
-    <component-container :colSpan="colSpan - 1" class="table-dropdown">
-      <component-item
+    <ComponentContainer
+      class="table-dropdown"
+      :col-span="colSpan - 1"
+    >
+      <ComponentItem
         v-for="(item, index) in tableItems"
         :key="index"
         ref="dropdownItem"
-        :isNested="isNested"
         :class="{
           'table-dropdown-item': item.type !== 'input'
         }"
+        :is-nested="isNested"
       >
-        <nested-container :isNested="isNested">
-          <nested-icon
+        <NestedContainer :is-nested="isNested">
+          <NestedIcon
             v-if="
               isNested &&
-              (item.type === 'input' ||
-                item.type === 'no-template' ||
-                item.type === 'template')
+                (item.type === 'input' ||
+                  item.type === 'no-template' ||
+                  item.type === 'template')
             "
           />
-          <template-button
-            @click.stop="onTemplateClick(item.row)"
+          <TemplateButton
             v-if="
               item.type &&
-              item.type === 'template' &&
-              (item.value === '' || item.value === '-')
+                item.type === 'template' &&
+                (item.value === '' || item.value === '-')
             "
             :key="index + '_button'"
-            >{{ $gettext('Use template...') }}</template-button
+            @click.stop="onTemplateClick(item.row)"
           >
-          <template-link
+            {{ $gettext('Use template...') }}
+          </TemplateButton>
+          <TemplateLink
             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
-              name="template_icon_not_clickable"
+            <Icon
               :color="theme.colors.brightBlue"
+              name="template_icon_not_clickable"
               size="14px"
             />
             <div>{{ item.value }}</div>
-          </template-link>
-          <no-template v-if="item.type && item.type === 'no-template'">
+          </TemplateLink>
+          <NoTemplate v-if="item.type && item.type === 'no-template'">
             {{ $gettext('No main component template') }}
-          </no-template>
-          <input-container
+          </NoTemplate>
+          <InputContainer
             v-if="item.type === 'input'"
             @click.stop="onInputClick()"
           >
-            <text-container
+            <TextContainer
               v-if="customInputDisabled"
               class="input-placeholder"
             >
               <span> {{ item.value }}</span>
-            </text-container>
-            <input-text
+            </TextContainer>
+            <InputText
               v-else
               class="inputField"
-              :value="item.value"
-              :noBorder="true"
-              :minWidth="item.value.length + 'ch'"
               :disabled="customInputDisabled"
+              :min-width="item.value.length + 'ch'"
+              :no-border="true"
+              :value="item.value"
               @input-change="onCustomInputChange($event)"
             />
-          </input-container>
-          <text-container
+          </InputContainer>
+          <TextContainer
             v-else-if="
               item.type !== 'input' &&
-              item.type !== 'no-template' &&
-              item.type !== 'template'
+                item.type !== 'no-template' &&
+                item.type !== 'template'
             "
           >
             <span> {{ item.value }}</span>
-          </text-container>
-        </nested-container>
-      </component-item>
-      <arrow-container class="arrow-container" :isDisabled="disabled">
-        <arrow-wrapper :showArchived="showArchived">
-          <et-popover
+          </TextContainer>
+        </NestedContainer>
+      </ComponentItem>
+      <ArrowContainer
+        class="arrow-container"
+        :is-disabled="disabled"
+      >
+        <ArrowWrapper :show-archived="showArchived">
+          <EtPopover
             v-if="showArchived"
             button-class="error"
             :text="
               $gettext(`Component has been archived and shouldn't be used`)
             "
-            triggerType="hover"
-          ></et-popover>
-          <arrow-down
-            @click.stop="toggleOpen"
+            trigger-type="hover"
+          />
+          <ArrowDown
             v-if="!isOpen"
             class="arrow-dropdown"
+            @click.stop="toggleOpen"
           />
-          <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"
+          <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') + '...'"
+                :value="inputText"
                 @click.prevent.stop
                 @on-change="onSearch($event)"
-                ref="searchInput"
               />
-            </search-container>
-            <spinner v-if="optionsLoading" />
-            <empty-text v-else-if="!optionsLoading && !optionItems.length">
+            </SearchContainer>
+            <Spinner v-if="optionsLoading" />
+            <EmptyText v-else-if="!optionsLoading && !optionItems.length">
               {{ emptyText ? emptyText : $gettext('No components found.') }}
-            </empty-text>
-            <options-item
-              v-else
-              :colSpan="colSpan - 1"
-              :width="dynamicGridWidth"
+            </EmptyText>
+            <OptionsItem
               v-for="(item, index) in optionItems"
+              v-else
               :key="index"
-              @click="onItemClick(item)"
+              :col-span="colSpan - 1"
               :tabindex="0"
+              :width="dynamicGridWidth"
+              @click="onItemClick(item)"
               @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>
-                <template-button
-                  @click.stop="onTemplateClick(item)"
+                <TemplateButton
                   v-else-if="option === 'template' && item.has_template"
-                  >{{ $gettext('Use template...') }}</template-button
+                  @click.stop="onTemplateClick(item)"
                 >
-                <no-template
+                  {{ $gettext('Use template...') }}
+                </TemplateButton>
+                <NoTemplate
                   v-else-if="option === 'template' && !item.has_template"
                 >
                   {{ $gettext('No main component template') }}
-                </no-template>
+                </NoTemplate>
               </template>
-            </options-item>
-          </options-wrapper>
-          <custom-container
+            </OptionsItem>
+          </OptionsWrapper>
+          <CustomContainer
             v-if="inputText.length && allowFreeInputs"
             @click="onCustomNameClick()"
           >
-            <custom-name>{{ getCustomName }}</custom-name>
-            <custom-subtext
-              >({{ $gettext('custom_component') }})</custom-subtext
-            >
-          </custom-container>
-        </options-container>
-      </arrow-container>
-    </component-container>
-  </dropdown-row>
+            <CustomName>{{ getCustomName }}</CustomName>
+            <CustomSubtext>
+              ({{ $gettext('custom_component') }})
+            </CustomSubtext>
+          </CustomContainer>
+        </OptionsContainer>
+      </ArrowContainer>
+    </ComponentContainer>
+  </DropdownRow>
 </template>
 
 <script>
@@ -176,18 +193,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;
 
@@ -201,8 +218,8 @@ const DropdownRow = styled('div', rowAttrs)`
   }
 `
 
-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;
@@ -226,8 +243,8 @@ const ComponentItem = styled('td', ItemAttrs)`
   }
 `
 
-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};
@@ -235,19 +252,19 @@ const ComponentContainer = styled('div', containerAttrs)`
   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;
@@ -267,18 +284,18 @@ const ArrowContainer = styled('td', ArrowAttrs)`
   }
 `
 
-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;
@@ -294,7 +311,7 @@ const OptionsContainer = styled('div', optionsAttrs)`
   border-radius: 4px;
 `
 
-const EmptyText = styled.div`
+  const EmptyText = styled.div`
   align-self: center;
   justify-self: center;
   height: 100px;
@@ -302,7 +319,7 @@ const EmptyText = styled.div`
   align-content: center;
 `
 
-const OptionsWrapper = styled.div`
+  const OptionsWrapper = styled.div`
   display: grid;
   position: relative;
   padding: 12px;
@@ -313,7 +330,7 @@ const OptionsWrapper = styled.div`
   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;
@@ -331,7 +348,7 @@ const OptionsItem = styled('div', containerAttrs)`
   }
 `
 
-const SearchContainer = styled.div`
+  const SearchContainer = styled.div`
   position: sticky;
   top: 0;
   padding-top: 6px;
@@ -339,7 +356,7 @@ const SearchContainer = styled.div`
   height: 40px;
 `
 
-const TemplateButton = styled.div`
+  const TemplateButton = styled.div`
   cursor: pointer;
   background-color: #263238;
   color: ${(props) => props.theme.colors.white};
@@ -350,7 +367,7 @@ const TemplateButton = styled.div`
   margin-left: 15px;
 `
 
-const NoTemplate = styled.div`
+  const NoTemplate = styled.div`
   color: ${(props) => props.theme.colors.gray1};
   font-style: italic;
   overflow: hidden;
@@ -358,7 +375,7 @@ const NoTemplate = styled.div`
   padding-left: 15px;
 `
 
-const TemplateLink = styled.div`
+  const TemplateLink = styled.div`
   color: ${(props) => props.theme.colors.brightBlue};
   cursor: pointer;
   display: grid;
@@ -367,13 +384,13 @@ const TemplateLink = styled.div`
   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;
@@ -385,254 +402,254 @@ const CustomContainer = styled.div`
   }
 `
 
-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: '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 = ''
-      }
+  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
     },
-    onInputClick() {
-      if (!this.isOpen) {
-        this.toggleOpen()
+    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
       }
     },
-    scrollToItem() {
-      if (this.$refs.optionsContainer) {
-        this.$refs.optionsContainer.$el.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center'
-        })
+    data() {
+      return {
+        inputText: '',
+        wasClicked: false, // prevents custom-name from being triggered on the <input-text />
+        dynamicWidth: [], // for numbers
+        dynamicGridWidth: [], // for grid values
+        fileIcon: fileIconPng
       }
     },
-    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
+    computed: {
+      getCustomName() {
+        return this.inputText
+      },
+      theme() {
+        return theme
       }
-      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
+    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)
           }
-        })
-      })
-
-      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)
+    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
+            }
+          })
+        })
+
+        this.dynamicGridWidth = this.dynamicWidth
+          .map((width) => width + 'ch')
+          .join(' ')
       }
     }
   }
-}
 </script>