@eturnity/eturnity_reusable_components 8.16.0 → 8.16.2--EPDM-14330.2

package/src/components/selectedOptions/index.vue

@@ -1,462 +1,473 @@
-<template>
-  <PageWrapper>
-    <CenterPageContainer v-if="expanded">
-      <CenterBox>
-        <TitleContainer>
-          <BoxTitle> {{ numberSelected }} {{ selectedText }} </BoxTitle>
-          <IconContainer @click="$emit('on-close')">
-            <Icon color="white" cursor="pointer" name="close" size="14px" />
-          </IconContainer>
-        </TitleContainer>
-        <DividerContainer>
-          <Divider />
-        </DividerContainer>
-        <ExpandedList>
-          <ExpandedListItem
-            v-for="item in expandedOptions"
-            :key="item.type"
-            :disabled="item.disabled || false"
-            :has-component="!!item?.component"
-            :hover-color="item.hoverColor"
-            @click="
-              !item?.component && !item.disabled && $emit('on-' + item.type)
-            "
-          >
-            <ListItemWrapper
-              v-if="item?.component"
-              :has-component="!!item?.component"
-              test-data-id="expanded_list_item"
-              @click="!item.disabled && toggleElement(item.type)"
-            >
-              <ListItemTitle>
-                {{ item.name }}
-                <InfoText
-                  v-if="item.disabled && item.disabledInfo"
-                  :text="item.disabledInfo"
-                />
-              </ListItemTitle>
-              <Icon
-                color="white"
-                :cursor="item.disabled ? 'not-allowed' : 'pointer'"
-                name="arrow_right"
-                size="20px"
-              />
-            </ListItemWrapper>
-            <template v-else>
-              {{ item.name }}
-            </template>
-            <OptionsContainer
-              v-if="item?.component && item.open && !item.disabled"
-            >
-              <slot :name="item.component"></slot>
-            </OptionsContainer>
-          </ExpandedListItem>
-        </ExpandedList>
-      </CenterBox>
-    </CenterPageContainer>
-    <PageContainer v-else>
-      <BoxContainer>
-        <SelectedContainer>
-          {{ numberSelected }} {{ selectedText }}
-        </SelectedContainer>
-        <ListContainer v-if="optionsList.length">
-          <ListItem
-            v-for="item in limitedOptions"
-            :key="item.type"
-            :disabled="item.disabled || false"
-            :hover-color="item.hoverColor"
-            @click="$emit('on-' + item.type)"
-          >
-            {{ item.name }}
-          </ListItem>
-          <IconContainer
-            v-if="optionsList.length > optionLimit || hasComponent"
-            test-data-id="more_actions_button_wrapper"
-            @click="expandOptions"
-          >
-            <ButtonContainer name="more_options,_tool_tips">
-              <DotItem />
-              <DotItem />
-              <DotItem />
-            </ButtonContainer>
-          </IconContainer>
-        </ListContainer>
-        <EmptyText v-else test-data-id="no_bulk_actions">
-          {{ noBulkActionsText }}
-        </EmptyText>
-        <CloseContainer>
-          <IconContainer @click="$emit('on-close')">
-            <Icon color="white" cursor="pointer" name="close" size="14px" />
-          </IconContainer>
-        </CloseContainer>
-      </BoxContainer>
-    </PageContainer>
-  </PageWrapper>
-</template>
-
-<script>
-  // import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
-  // optionsList = [
-  //   {
-  //     type: 'export',
-  //     name: 'Export'
-  //   },
-  //   {
-  //     type: 'export',
-  //     name: 'Export'
-  //     ...
-  //     add component parameter if we were passing a component to the selected options
-  //     component: 'set_supplier'
-  //   },
-  //   {
-  //     type: 'delete',
-  //     name: 'Delete',
-  //     hoverColor: 'red' // default is green
-  //   }
-  // ]
-  // @on-${type}="function" should $emit the callback for the 'type' in the optionsList
-  // <selected-options
-  //   :numberSelected="numberSelected"
-  //   :optionsList="optionsList"
-  //   @on-close="onCloseFunction()"
-  //   @on-export="function()" @on-delete="function()"
-  // >
-  //   <template v-slot:set_supplier>
-  //     <CustomSelectComponent
-  //       :option-list="suppliers"
-  //       @set-supplier="checkboxBulkActions('setSupplier', $event)"
-  //     />
-  //   </template>
-  // </SelectedOptions>
-  import styled from 'vue3-styled-components'
-  import InfoText from '../infoText'
-  import Icon from '../icon'
-
-  const PageWrapper = styled.div`
-    font-size: 13px;
-  `
-
-  const DividerContainer = styled.div`
-    display: contents;
-  `
-
-  const Divider = styled.div`
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-    width: 95%;
-    margin: 0 auto;
-  `
-
-  const PageContainer = styled.div`
-    position: fixed;
-    bottom: 30px;
-    left: 50%;
-    width: auto;
-    max-width: 70%;
-    transform: translateX(-50%);
-    z-index: 999;
-  `
-
-  const CenterPageContainer = styled.div`
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: 4px;
-    background-color: rgba(0, 0, 0, 0.4);
-  `
-
-  const OptionsContainer = styled.div`
-    position: absolute;
-    left: 101%;
-    background-color: ${(props) => props.theme.colors.black};
-    border-radius: 4px;
-    padding: 15px;
-  `
-
-  const SelectedContainer = styled.div`
-    display: grid;
-    align-items: center;
-    height: 100%;
-    padding-right: 20px;
-    white-space: nowrap;
-    border-right: 1px solid rgba(255, 255, 255, 0.2);
-  `
-
-  const TitleContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    padding: 16px;
-  `
-
-  const BoxTitle = styled.div`
-    font-size: 13px;
-    color: ${(props) => props.theme.colors.white};
-    transform: translateZ(0);
-    backface-visibility: hidden;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  `
-
-  const BoxContainer = styled.div`
-    display: flex;
-    align-items: center;
-    background-color: ${(props) => props.theme.colors.black};
-    opacity: 90%;
-    color: ${(props) => props.theme.colors.white};
-    border-radius: 4px;
-    padding: 0px 10px 0px 20px;
-    font-size: 13px;
-    height: 45px;
-  `
-
-  const CenterBox = styled(BoxContainer)`
-    justify-content: center;
-    flex-direction: column;
-    height: auto;
-    align-items: flex-start;
-    border-radius: 4px;
-    width: 400px;
-    padding: 0px;
-  `
-
-  const ButtonContainer = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding: 5px;
-    cursor: pointer;
-
-    div {
-      // This is the dot color
-      background: ${(props) => props.theme.colors.white};
-    }
-  `
-
-  const CloseContainer = styled.div`
-    margin-left: 20px;
-  `
-
-  const DotItem = styled.div`
-    width: 4px;
-    height: 4px;
-    margin: 1px;
-    border-radius: 50%;
-  `
-
-  const ListContainer = styled.div`
-    height: 100%;
-    display: flex;
-    align-items: center;
-    color: ${(props) => props.theme.colors.white};
-  `
-
-  const ListAttrs = {
-    disabled: Boolean,
-    hoverColor: String,
-  }
-
-  const ListItem = styled('div', ListAttrs)`
-    width: max-content;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    padding: 0 10px;
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-    color: ${(props) => props.disabled && props.theme.colors.grey3};
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: ${(props) =>
-        props.disabled
-          ? props.theme.colors.grey3
-          : props.hoverColor
-          ? props.theme.colors[props.hoverColor]
-          : props.theme.colors.white};
-    }
-  `
-
-  const IconContainer = styled.div`
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    height: 30px;
-    width: 30px;
-    cursor: pointer;
-    margin-left: 8px;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: 4px;
-    }
-  `
-
-  const ExpandedList = styled.div`
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  `
-
-  const ExpandedListItem = styled('div', {
-    disabled: Boolean,
-    hoverColor: String,
-    hasComponent: Boolean,
-  })`
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: ${(props) => (props.hasComponent ? '0' : '13px 15px')};
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-    color: ${(props) => props.disabled && props.theme.colors.grey3};
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: ${(props) =>
-        props.disabled ? props.theme.colors.grey3 : props.theme.colors.white};
-    }
-  `
-
-  const ListItemWrapper = styled('div', { hasComponent: Boolean })`
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: ${(props) => (props.hasComponent ? '13px 15px' : '0')};
-  `
-
-  const ListItemTitle = styled.div`
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  `
-
-  const EmptyText = styled.div`
-    color: ${(props) => props.theme.colors.white};
-    font-size: 13px;
-    padding-left: 16px;
-  `
-
-  export default {
-    name: 'SelectedOptions',
-    components: {
-      PageContainer,
-      BoxContainer,
-      SelectedContainer,
-      ListContainer,
-      ButtonContainer,
-      DotItem,
-      ListItem,
-      InfoText,
-      CenterBox,
-      Icon,
-      CenterPageContainer,
-      ListItemWrapper,
-      ListItemTitle,
-      PageWrapper,
-      OptionsContainer,
-      ExpandedListItem,
-      TitleContainer,
-      IconContainer,
-      EmptyText,
-      BoxTitle,
-      Divider,
-      DividerContainer,
-      ExpandedList,
-      CloseContainer,
-    },
-    props: {
-      optionsList: {
-        type: Array,
-        required: true,
-        default: () => [],
-      },
-      numberSelected: {
-        type: Number,
-        required: true,
-        default: 0,
-      },
-      selectedLabel: {
-        type: String,
-        default: null,
-      },
-      noBulkActionsLabel: {
-        type: String,
-        default: null,
-      },
-    },
-    data() {
-      return {
-        //maximum number of options to display, if more than 4, display a 'more' option
-        optionLimit: 4,
-        showOverlay: false,
-        expanded: false,
-        expandedOptions: [],
-      }
-    },
-    computed: {
-      hasComponent() {
-        return this.optionsList.some((item) => item.component)
-      },
-      limitedOptions() {
-        return this.expandedOptions.filter((option) => !option.component)
-      },
-      selectedText() {
-        //work around for storybook not finding the $gettext function
-        return this.selectedLabel || this.$gettext('selected')
-      },
-      noBulkActionsText() {
-        //work around for storybook not finding the $gettext function
-        return (
-          this.noBulkActionsLabel || this.$gettext('no_batch_actions_available')
-        )
-      },
-    },
-    watch: {
-      optionsList() {
-        this.initializeOptions()
-      },
-    },
-    mounted() {
-      this.initializeOptions()
-    },
-    methods: {
-      initializeOptions() {
-        this.expandedOptions = [...this.optionsList]
-          .map((option, index) => {
-            const currentOption = this.expandedOptions[index]
-            const isOpen = currentOption ? currentOption.open : false
-
-            return { ...option, open: isOpen }
-          })
-          .slice(0, this.optionLimit)
-      },
-      toggleElement(type) {
-        this.expandedOptions = this.optionsList.map((item) => {
-          if (item.type === type) {
-            item.open = !item.open
-          } else item.open = false
-
-          return item
-        })
-      },
-      expandOptions() {
-        this.expanded = !this.expanded
-        this.expandedOptions = this.optionsList
-      },
-      handleExpandedOptionClick(item) {
-        if (item.disabled) return
-
-        if (!item.component) {
-          this.$emit('on-' + item.type)
-
-          return
-        }
-
-        this.toggleElement(item.type)
-      },
-    },
-  }
-</script>
+<template>
+  <PageWrapper>
+    <CenterPageContainer v-if="expanded">
+      <CenterBox>
+        <TitleContainer>
+          <BoxTitle> {{ numberSelected }} {{ selectedText }} </BoxTitle>
+          <IconContainer @click="$emit('on-close')">
+            <Icon color="white" cursor="pointer" name="close" size="14px" />
+          </IconContainer>
+        </TitleContainer>
+        <DividerContainer>
+          <Divider />
+        </DividerContainer>
+        <ExpandedList>
+          <ExpandedListItem
+            v-for="item in expandedOptions"
+            :key="item.type"
+            :disabled="item.disabled || false"
+            :has-component="!!item?.component"
+            :hover-color="item.hoverColor"
+            @click="
+              !item?.component && !item.disabled && $emit('on-' + item.type)
+            "
+          >
+            <ListItemWrapper
+              v-if="item?.component"
+              :has-component="!!item?.component"
+              test-data-id="expanded_list_item"
+              @click="!item.disabled && toggleElement(item.type)"
+            >
+              <ListItemTitle>
+                {{ item.name }}
+                <InfoText
+                  v-if="item.disabled && item.disabledInfo"
+                  :text="item.disabledInfo"
+                />
+              </ListItemTitle>
+              <Icon
+                :color="theme.colors.white"
+                :cursor="item.disabled ? 'not-allowed' : 'pointer'"
+                :hovered-color="theme.colors.white"
+                name="arrow_right"
+                size="20px"
+              />
+            </ListItemWrapper>
+            <template v-else>
+              {{ item.name }}
+            </template>
+            <OptionsContainer
+              v-if="item?.component && item.open && !item.disabled"
+            >
+              <slot :name="item.component"></slot>
+            </OptionsContainer>
+          </ExpandedListItem>
+        </ExpandedList>
+      </CenterBox>
+    </CenterPageContainer>
+    <PageContainer v-else>
+      <BoxContainer>
+        <SelectedContainer>
+          {{ numberSelected }} {{ selectedText }}
+        </SelectedContainer>
+        <ListContainer v-if="optionsList.length">
+          <ListItem
+            v-for="item in limitedOptions"
+            :key="item.type"
+            :disabled="item.disabled || false"
+            :hover-color="item.hoverColor"
+            @click="$emit('on-' + item.type)"
+          >
+            {{ item.name }}
+          </ListItem>
+          <IconContainer
+            v-if="optionsList.length > optionLimit || hasComponent"
+            test-data-id="more_actions_button_wrapper"
+            @click="expandOptions"
+          >
+            <ButtonContainer name="more_options,_tool_tips">
+              <DotItem />
+              <DotItem />
+              <DotItem />
+            </ButtonContainer>
+          </IconContainer>
+        </ListContainer>
+        <EmptyText v-else test-data-id="no_bulk_actions">
+          {{ noBulkActionsText }}
+        </EmptyText>
+        <CloseContainer>
+          <IconContainer @click="$emit('on-close')">
+            <Icon
+              :color="theme.colors.white"
+              cursor="pointer"
+              :hovered-color="theme.colors.white"
+              name="close"
+              size="14px"
+            />
+          </IconContainer>
+        </CloseContainer>
+      </BoxContainer>
+    </PageContainer>
+  </PageWrapper>
+</template>
+
+<script>
+  // import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
+  // optionsList = [
+  //   {
+  //     type: 'export',
+  //     name: 'Export'
+  //   },
+  //   {
+  //     type: 'export',
+  //     name: 'Export'
+  //     ...
+  //     add component parameter if we were passing a component to the selected options
+  //     component: 'set_supplier'
+  //   },
+  //   {
+  //     type: 'delete',
+  //     name: 'Delete',
+  //     hoverColor: 'red' // default is green
+  //   }
+  // ]
+  // @on-${type}="function" should $emit the callback for the 'type' in the optionsList
+  // <selected-options
+  //   :numberSelected="numberSelected"
+  //   :optionsList="optionsList"
+  //   @on-close="onCloseFunction()"
+  //   @on-export="function()" @on-delete="function()"
+  // >
+  //   <template v-slot:set_supplier>
+  //     <CustomSelectComponent
+  //       :option-list="suppliers"
+  //       @set-supplier="checkboxBulkActions('setSupplier', $event)"
+  //     />
+  //   </template>
+  // </SelectedOptions>
+  import styled from 'vue3-styled-components'
+  import InfoText from '../infoText'
+  import Icon from '../icon'
+  import theme from '../../assets/theme'
+
+  const PageWrapper = styled.div`
+    font-size: 13px;
+  `
+
+  const DividerContainer = styled.div`
+    display: contents;
+  `
+
+  const Divider = styled.div`
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    width: 95%;
+    margin: 0 auto;
+  `
+
+  const PageContainer = styled.div`
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    width: auto;
+    max-width: 70%;
+    transform: translateX(-50%);
+    z-index: 999;
+  `
+
+  const CenterPageContainer = styled.div`
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.4);
+  `
+
+  const OptionsContainer = styled.div`
+    position: absolute;
+    left: 101%;
+    background-color: ${(props) => props.theme.colors.black};
+    border-radius: 4px;
+    padding: 15px;
+  `
+
+  const SelectedContainer = styled.div`
+    display: grid;
+    align-items: center;
+    height: 100%;
+    padding-right: 20px;
+    white-space: nowrap;
+    border-right: 1px solid rgba(255, 255, 255, 0.2);
+  `
+
+  const TitleContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 16px;
+  `
+
+  const BoxTitle = styled.div`
+    font-size: 13px;
+    color: ${(props) => props.theme.colors.white};
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  `
+
+  const BoxContainer = styled.div`
+    display: flex;
+    align-items: center;
+    background-color: ${(props) => props.theme.colors.black};
+    opacity: 90%;
+    color: ${(props) => props.theme.colors.white};
+    border-radius: 4px;
+    padding: 0px 10px 0px 20px;
+    font-size: 13px;
+    height: 45px;
+  `
+
+  const CenterBox = styled(BoxContainer)`
+    justify-content: center;
+    flex-direction: column;
+    height: auto;
+    align-items: flex-start;
+    border-radius: 4px;
+    width: 400px;
+    padding: 0px;
+  `
+
+  const ButtonContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
+    cursor: pointer;
+
+    div {
+      // This is the dot color
+      background: ${(props) => props.theme.colors.white};
+    }
+  `
+
+  const CloseContainer = styled.div`
+    margin-left: 20px;
+  `
+
+  const DotItem = styled.div`
+    width: 4px;
+    height: 4px;
+    margin: 1px;
+    border-radius: 50%;
+  `
+
+  const ListContainer = styled.div`
+    height: 100%;
+    display: flex;
+    align-items: center;
+    color: ${(props) => props.theme.colors.white};
+  `
+
+  const ListAttrs = {
+    disabled: Boolean,
+    hoverColor: String,
+  }
+
+  const ListItem = styled('div', ListAttrs)`
+    width: max-content;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    color: ${(props) => props.disabled && props.theme.colors.grey3};
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: ${(props) =>
+        props.disabled
+          ? props.theme.colors.grey3
+          : props.hoverColor
+          ? props.theme.colors[props.hoverColor]
+          : props.theme.colors.white};
+    }
+  `
+
+  const IconContainer = styled.div`
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    height: 30px;
+    width: 30px;
+    cursor: pointer;
+    margin-left: 8px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+    }
+  `
+
+  const ExpandedList = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  `
+
+  const ExpandedListItem = styled('div', {
+    disabled: Boolean,
+    hoverColor: String,
+    hasComponent: Boolean,
+  })`
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: ${(props) => (props.hasComponent ? '0' : '13px 15px')};
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    color: ${(props) => props.disabled && props.theme.colors.grey3};
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: ${(props) =>
+        props.disabled ? props.theme.colors.grey3 : props.theme.colors.white};
+    }
+  `
+
+  const ListItemWrapper = styled('div', { hasComponent: Boolean })`
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: ${(props) => (props.hasComponent ? '13px 15px' : '0')};
+  `
+
+  const ListItemTitle = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  `
+
+  const EmptyText = styled.div`
+    color: ${(props) => props.theme.colors.white};
+    font-size: 13px;
+    padding-left: 16px;
+  `
+
+  export default {
+    name: 'SelectedOptions',
+    components: {
+      PageContainer,
+      BoxContainer,
+      SelectedContainer,
+      ListContainer,
+      ButtonContainer,
+      DotItem,
+      ListItem,
+      InfoText,
+      CenterBox,
+      Icon,
+      CenterPageContainer,
+      ListItemWrapper,
+      ListItemTitle,
+      PageWrapper,
+      OptionsContainer,
+      ExpandedListItem,
+      TitleContainer,
+      IconContainer,
+      EmptyText,
+      BoxTitle,
+      Divider,
+      DividerContainer,
+      ExpandedList,
+      CloseContainer,
+    },
+    props: {
+      optionsList: {
+        type: Array,
+        required: true,
+        default: () => [],
+      },
+      numberSelected: {
+        type: Number,
+        required: true,
+        default: 0,
+      },
+      selectedLabel: {
+        type: String,
+        default: null,
+      },
+      noBulkActionsLabel: {
+        type: String,
+        default: null,
+      },
+    },
+    data() {
+      return {
+        //maximum number of options to display, if more than 4, display a 'more' option
+        optionLimit: 4,
+        showOverlay: false,
+        expanded: false,
+        expandedOptions: [],
+      }
+    },
+    computed: {
+      theme() {
+        return theme
+      },
+      hasComponent() {
+        return this.optionsList.some((item) => item.component)
+      },
+      limitedOptions() {
+        return this.expandedOptions.filter((option) => !option.component)
+      },
+      selectedText() {
+        //work around for storybook not finding the $gettext function
+        return this.selectedLabel || this.$gettext('selected')
+      },
+      noBulkActionsText() {
+        //work around for storybook not finding the $gettext function
+        return (
+          this.noBulkActionsLabel || this.$gettext('no_batch_actions_available')
+        )
+      },
+    },
+    watch: {
+      optionsList() {
+        this.initializeOptions()
+      },
+    },
+    mounted() {
+      this.initializeOptions()
+    },
+    methods: {
+      initializeOptions() {
+        this.expandedOptions = [...this.optionsList]
+          .map((option, index) => {
+            const currentOption = this.expandedOptions[index]
+            const isOpen = currentOption ? currentOption.open : false
+
+            return { ...option, open: isOpen }
+          })
+          .slice(0, this.optionLimit)
+      },
+      toggleElement(type) {
+        this.expandedOptions = this.optionsList.map((item) => {
+          if (item.type === type) {
+            item.open = !item.open
+          } else item.open = false
+
+          return item
+        })
+      },
+      expandOptions() {
+        this.expanded = !this.expanded
+        this.expandedOptions = this.optionsList
+      },
+      handleExpandedOptionClick(item) {
+        if (item.disabled) return
+
+        if (!item.component) {
+          this.$emit('on-' + item.type)
+
+          return
+        }
+
+        this.toggleElement(item.type)
+      },
+    },
+  }
+</script>