@eturnity/eturnity_reusable_components 7.35.1-EPDM-10620.1 → 7.35.1-EPDM-10620.3

package/package.json

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

package/src/components/selectedOptions/index.vue

@@ -9,6 +9,7 @@
           <ListItem
             v-for="item in limitedOptions"
             :key="item.type"
+            :disabled="item.disabled || false"
             :hover-color="item.hoverColor"
             @click="$emit('on-' + item.type)"
           >
@@ -16,8 +17,8 @@
           </ListItem>
           <ButtonContainer
             v-if="optionsList.length > optionLimit || hasComponent"
-            @click="expandOptions"
             name="more_options,_tool_tips"
+            @click="expandOptions"
           >
             <DotItem />
             <DotItem />
@@ -54,23 +55,33 @@
         <ExpandedListItem
           v-for="item in limitedOptions"
           :key="item.type"
+          :disabled="item.disabled || false"
           :hover-color="item.hoverColor"
-          @click="item?.component ? '' : $emit('on-' + item.type)"
+          @click="!item?.component && $emit('on-' + item.type)"
         >
-          {{ item.name }}
-          <IconContainer
+          <ListItemWrapper
             v-if="item?.component"
-            @click="toggleElement(item.type)"
+            @click="!item.disabled && toggleElement(item.type)"
           >
+            <ListItemTitle>
+              {{ item.name }}
+              <InfoText
+                v-if="item.disabled && item.disabledInfo"
+                :text="item.disabledInfo"
+              />
+            </ListItemTitle>
             <Icon
               color="white"
-              cursor="pointer"
+              :cursor="item.disabled ? 'not-allowed' : 'pointer'"
               name="arrow_right"
-              size="14px"
+              size="20px"
             />
-          </IconContainer>
+          </ListItemWrapper>
+          <template v-else>
+            {{ item.name }}
+          </template>
           <OptionsContainer v-if="item?.component && item.open">
-            <slot :name="item.component" />
+            <slot :name="item.component"></slot>
           </OptionsContainer>
         </ExpandedListItem>
       </CenterBox>
@@ -113,7 +124,7 @@
   //   </template>
   // </SelectedOptions>
   import styled from 'vue3-styled-components'
-  import MainButton from '../buttons/mainButton'
+  import InfoText from '../infoText'
   import Icon from '../icon'
 
   const PageWrapper = styled.div``
@@ -219,25 +230,24 @@
   `
 
   const ListAttrs = {
+    disabled: Boolean,
     hoverColor: String,
   }
+
   const ListItem = styled('div', ListAttrs)`
-    cursor: pointer;
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    color: ${(props) => props.disabled && props.theme.colors.grey3};
+
     &:hover {
       color: ${(props) =>
-        props.hoverColor
+        props.disabled
+          ? props.theme.colors.grey3
+          : props.hoverColor
           ? props.theme.colors[props.hoverColor]
           : props.theme.colors.green};
     }
   `
 
-  const ExpandedListItem = styled(ListItem)`
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-  `
-
   const IconContainer = styled.div`
     display: grid;
     align-items: center;
@@ -253,6 +263,26 @@
     }
   `
 
+  const ExpandedListItem = styled(ListItem)`
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+  `
+
+  const ListItemWrapper = styled.div`
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  `
+
+  const ListItemTitle = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  `
+
   const EmptyText = styled.div`
     color: ${(props) => props.theme.colors.white};
     font-size: 13px;
@@ -266,13 +296,15 @@
       BoxContainer,
       SelectedContainer,
       ListContainer,
-      MainButton,
       ButtonContainer,
       DotItem,
       ListItem,
+      InfoText,
       CenterBox,
       Icon,
       CenterPageContainer,
+      ListItemWrapper,
+      ListItemTitle,
       PageWrapper,
       OptionsContainer,
       ExpandedListItem,
@@ -282,12 +314,48 @@
       BoxTitle,
       Divider,
     },
+    props: {
+      optionsList: {
+        type: Array,
+        required: true,
+      },
+      numberSelected: {
+        type: Number,
+        required: true,
+        default: 0,
+      },
+    },
+    data() {
+      return {
+        //maximum number of options to display, if more than 4, display a 'more' option
+        optionLimit: 4,
+        showOverlay: false,
+        expanded: false,
+        limitedOptions: [],
+      }
+    },
     computed: {
       hasComponent() {
         return this.optionsList.some((item) => item.component)
       },
     },
+    watch: {
+      optionsList() {
+        this.initializeOptions()
+      },
+    },
+    mounted() {
+      this.initializeOptions()
+    },
     methods: {
+      initializeOptions() {
+        this.limitedOptions = this.optionsList
+          .map((item) => {
+            return { ...item, open: false }
+          })
+          .filter((item) => !item.component)
+          .slice(0, this.optionLimit)
+      },
       toggleElement(type) {
         this.limitedOptions = this.optionsList.map((item) => {
           if (item.type === type) {
@@ -302,30 +370,5 @@
         this.limitedOptions = this.optionsList
       },
     },
-    props: {
-      optionsList: {
-        required: true,
-      },
-      numberSelected: {
-        required: true,
-        default: 0,
-      },
-    },
-    mounted() {
-      this.limitedOptions = this.optionsList
-        .map((item) => {
-          return { ...item, open: false }
-        })
-        .filter((item) => !item.component)
-        .slice(0, this.optionLimit)
-    },
-    data() {
-      return {
-        //maximum number of options to display, if more than 4, display a 'more' option
-        optionLimit: 4,
-        expanded: false,
-        limitedOptions: [],
-      }
-    },
   }
 </script>