@eturnity/eturnity_reusable_components 7.35.1-EPDM-10620.4 → 7.35.1-EPDM-10620.5

package/package.json

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

package/src/components/inputs/select/index.vue

@@ -613,7 +613,9 @@
         if (this.isDropdownOpen) {
           return this.$refs.dropdown.$el.childElementCount > 1
             ? this.$refs.dropdown.$el.childElementCount
-            : this.$refs.dropdown.$el.children[0].childElementCount
+            : !!this.$refs.dropdown.$el.children[0]
+            ? this.$refs.dropdown.$el.children[0].childElementCount
+            : 0
         }
 
         return 0

package/src/components/inputs/select/option/index.vue

@@ -15,6 +15,7 @@
     :is-disabled="isDisabled"
     :min-width="minWidth"
     :padding="padding"
+    :text-color="textColor"
     :title="hoverText"
     @click="clickHandler"
     @mouseover="hoverHandler"
@@ -36,6 +37,7 @@
     disabledBgColor: String,
     disabledTextColor: String,
     padding: String,
+    textColor: String,
   }
   const OptionContainer = styled('div', optionProps)`
     display: flex;
@@ -67,7 +69,9 @@
             ? props.theme.colors[props.disabledTextColor]
             : props.disabledTextColor
           : props.theme.colors.grey3
-        : 'inherit'};
+        : props.theme.colors[props.textColor]
+        ? props.theme.colors[props.textColor]
+        : props.textColor};
     &:hover {
       background-color: ${(props) =>
         !!props.disabledTextColor && props.isDisabled
@@ -125,6 +129,10 @@
         required: false,
         default: '12px 10px',
       },
+      textColor: {
+        type: true,
+        default: 'inherit',
+      },
     },
     emits: ['option-hovered', 'option-selected'],
     data() {

package/src/components/selectedOptions/index.vue

@@ -51,39 +51,47 @@
             />
           </IconContainer>
         </TitleContainer>
-        <Divider />
-        <ExpandedListItem
-          v-for="item in limitedOptions"
-          :key="item.type"
-          :disabled="item.disabled || false"
-          :hover-color="item.hoverColor"
-          @click="!item?.component && $emit('on-' + item.type)"
-        >
-          <ListItemWrapper
-            v-if="item?.component"
-            @click="!item.disabled && toggleElement(item.type)"
+        <DividerContainer>
+          <Divider />
+        </DividerContainer>
+        <ExpandedList>
+          <ExpandedListItem
+            v-for="item in expandedOptions"
+            :key="item.type"
+            :disabled="item.disabled || false"
+            :hover-color="item.hoverColor"
+            @click="
+              !item?.component && !item.disabled && $emit('on-' + item.type)
+            "
           >
-            <ListItemTitle>
-              {{ item.name }}
-              <InfoText
-                v-if="item.disabled && item.disabledInfo"
-                :text="item.disabledInfo"
+            <ListItemWrapper
+              v-if="item?.component"
+              @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"
               />
-            </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">
-            <slot :name="item.component"></slot>
-          </OptionsContainer>
-        </ExpandedListItem>
+            </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>
   </PageWrapper>
@@ -127,11 +135,18 @@
   import InfoText from '../infoText'
   import Icon from '../icon'
 
-  const PageWrapper = styled.div``
+  const PageWrapper = styled.div`
+    font-size: 13px;
+  `
+
+  const DividerContainer = styled.div`
+    display: contents;
+  `
 
   const Divider = styled.div`
-    border-bottom: 1px solid ${({ theme }) => theme.colors.white};
-    width: 100%;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    width: 95%;
+    margin: 0 auto;
   `
 
   const PageContainer = styled.div`
@@ -174,10 +189,11 @@
     align-items: center;
     justify-content: space-between;
     width: 100%;
+    padding: 16px;
   `
 
   const BoxTitle = styled.div`
-    font-size: 14px;
+    font-size: 13px;
     color: ${(props) => props.theme.colors.white};
   `
 
@@ -189,7 +205,7 @@
     color: ${(props) => props.theme.colors.white};
     border-radius: 4px;
     padding: 8px 10px 8px 20px;
-    font-size: 14px;
+    font-size: 13px;
     height: 40px;
   `
 
@@ -197,11 +213,10 @@
     justify-content: center;
     flex-direction: column;
     height: auto;
-    gap: 25px;
     align-items: flex-start;
     border-radius: 4px;
     width: 400px;
-    padding: 20px;
+    padding: 0px;
   `
 
   const ButtonContainer = styled.div`
@@ -267,11 +282,24 @@
     }
   `
 
+  const ExpandedList = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  `
+
   const ExpandedListItem = styled(ListItem)`
     display: flex;
     width: 100%;
     justify-content: space-between;
     align-items: center;
+    padding: 13px 15px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: ${(props) =>
+        props.disabled ? props.theme.colors.grey3 : props.theme.colors.white};
+    }
   `
 
   const ListItemWrapper = styled.div`
@@ -317,6 +345,8 @@
       EmptyText,
       BoxTitle,
       Divider,
+      DividerContainer,
+      ExpandedList,
     },
     props: {
       optionsList: {
@@ -335,13 +365,16 @@
         optionLimit: 4,
         showOverlay: false,
         expanded: false,
-        limitedOptions: [],
+        expandedOptions: [],
       }
     },
     computed: {
       hasComponent() {
         return this.optionsList.some((item) => item.component)
       },
+      limitedOptions() {
+        return this.expandedOptions.filter((option) => !option.component)
+      },
     },
     watch: {
       optionsList() {
@@ -353,15 +386,17 @@
     },
     methods: {
       initializeOptions() {
-        this.limitedOptions = this.optionsList
-          .map((item) => {
-            return { ...item, open: false }
+        this.expandedOptions = [...this.optionsList]
+          .map((option, index) => {
+            const currentOption = this.expandedOptions[index]
+            const isOpen = !!currentOption ? currentOption.open : false
+
+            return { ...option, open: isOpen }
           })
-          .filter((item) => !item.component)
           .slice(0, this.optionLimit)
       },
       toggleElement(type) {
-        this.limitedOptions = this.optionsList.map((item) => {
+        this.expandedOptions = this.optionsList.map((item) => {
           if (item.type === type) {
             item.open = !item.open
           } else item.open = false
@@ -371,7 +406,7 @@
       },
       expandOptions() {
         this.expanded = !this.expanded
-        this.limitedOptions = this.optionsList
+        this.expandedOptions = this.optionsList
       },
     },
   }