@eturnity/eturnity_reusable_components 7.35.1-EPDM-10620.7 → 7.35.1-EPDM-10620.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.35.1-EPDM-10620.7",
+  "version": "7.35.1-EPDM-10620.9",
   "files": [
     "dist",
     "src"

package/src/components/selectedOptions/index.vue

@@ -15,11 +15,10 @@
           >
             {{ item.name }}
           </ListItem>
-          <IconContainer>
+          <IconContainer @click="expandOptions">
             <ButtonContainer
               v-if="optionsList.length > optionLimit || hasComponent"
               name="more_options,_tool_tips"
-              @click="expandOptions"
             >
               <DotItem />
               <DotItem />
@@ -63,6 +62,7 @@
             v-for="item in expandedOptions"
             :key="item.type"
             :disabled="item.disabled || false"
+            :hasComponent="!!item?.component"
             :hover-color="item.hoverColor"
             @click="
               !item?.component && !item.disabled && $emit('on-' + item.type)
@@ -70,6 +70,7 @@
           >
             <ListItemWrapper
               v-if="item?.component"
+              :hasComponent="!!item?.component"
               @click="!item.disabled && toggleElement(item.type)"
             >
               <ListItemTitle>
@@ -305,12 +306,16 @@
     flex-direction: column;
   `
 
-  const ExpandedListItem = styled('div', ListAttrs)`
+  const ExpandedListItem = styled('div', {
+    disabled: Boolean,
+    hoverColor: String,
+    hasComponent: Boolean,
+  })`
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 13px 15px;
+    padding: ${(props) => (props.hasComponent ? '0' : '13px 15px')};
     cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
     color: ${(props) => props.disabled && props.theme.colors.grey3};
 
@@ -321,11 +326,12 @@
     }
   `
 
-  const ListItemWrapper = styled.div`
+  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`
@@ -428,6 +434,17 @@
         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>