@eturnity/eturnity_reusable_components 7.48.1-EPDM-12680.35 → 7.48.1-EPDM-12680.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.48.1-EPDM-12680.35",
+  "version": "7.48.1-EPDM-12680.37",
   "files": [
     "dist",
     "src"

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

@@ -19,7 +19,7 @@
       <CheckWrapper :has-label="hasLabel">
         <span class="checkmark"></span>
       </CheckWrapper>
-      <LabelText v-if="hasLabel">
+      <LabelText v-if="hasLabel" :is-disabled="isDisabled">
         {{ label }}
       </LabelText>
     </Container>
@@ -90,18 +90,20 @@
           ? '16px'
           : '25px'};
       background-color: ${(props) =>
-        props.isChecked
+        props.isDisabled
+          ? props.theme.colors.lightGray
+          : props.isChecked
           ? props.backgroundColor
             ? props.backgroundColor
             : props.theme.colors.green
-          : props.isDisabled
-          ? props.theme.colors.lightGray
           : props.theme.colors.white};
       border-radius: 4px;
       border: 1px solid
         ${(props) =>
           props.isChecked
-            ? props.backgroundColor
+            ? props.isDisabled
+              ? props.theme.colors.lightGray
+              : props.backgroundColor
               ? props.backgroundColor
               : props.theme.colors.green
             : props.theme.colors.mediumGray};
@@ -140,7 +142,11 @@
           : '10px'};
       border: solid
         ${(props) =>
-          props.checkColor ? props.checkColor : props.theme.colors.white};
+          props.isDisabled
+            ? props.theme.colors.green
+            : props.checkColor
+            ? props.checkColor
+            : props.theme.colors.white};
       border-width: ${(props) =>
         props.size === 'medium'
           ? '0 3px 3px 0'
@@ -160,11 +166,16 @@
     width: 0;
   `
 
-  const LabelText = styled.div`
+  const LabelTextAttrs = {
+    isDisabled: Boolean,
+  }
+  const LabelText = styled('div', LabelTextAttrs)`
     font-size: 13px;
     display: grid;
     align-items: center;
     min-height: 18px;
+    color: ${(props) =>
+      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   `
 
   export default {

package/src/components/stringDesign/DropdownMenu/index.vue

@@ -11,9 +11,7 @@
       />
     </PageTitleContainer>
     <SectionContainer
-      v-for="(item, index) in hasExpandedSection
-        ? dataList
-        : compressedDataList"
+      v-for="(item, index) in dataListToDisplay"
       :key="item.inverterId"
     >
       <TopContainer>
@@ -61,7 +59,7 @@
                     }}
                     kWp
                   </ContainerValue>
-                  <ContainerValue v-else>
+                  <ContainerValue v-else-if="item.type !== 'optimizer'">
                     |
                     {{
                       numberToString({
@@ -107,7 +105,9 @@
             </MarkerItem>
             <MarkerItem>
               <RCIcon color="white" :name="getIconName(item)" size="14px" />
-              <div>{{ getTypeName(item.type) }}</div>
+              <MarkerText :title="getTypeName(item.type)">
+                {{ getTypeName(item.type) }}
+              </MarkerText>
             </MarkerItem>
             <MarkerItem
               v-if="item.type !== 'optimizer'"
@@ -123,7 +123,7 @@
               {{ $gettext('kWAC') }}
             </MarkerItem>
             <MarkerItem
-              v-if="!itemHasStrings(item) && item.type !== 'optimizer'"
+              v-if="!itemHasStrings(item)"
               :title="$gettext('The DC power is the maximum DC input power.')"
             >
               {{
@@ -173,11 +173,11 @@
             </IconWrapper>
           </IconsContainer>
         </LeftContainer>
-        <SortingContainer v-if="dataList.length > 1">
+        <SortingContainer v-if="dataListToDisplay.length > 1">
           <SortingIconWrapper
             :data-test-id="'move_up_' + index"
             :is-disabled="index === 0"
-            @click="index > 0 && handleMoveClick('up', index)"
+            @click="index > 0 && handleMoveClick('up', index, item)"
           >
             <RCIcon
               :color="index === 0 ? 'grey6' : 'grey3'"
@@ -188,17 +188,22 @@
           </SortingIconWrapper>
           <SortingIconWrapper
             :data-test-id="'move_down_' + index"
-            :is-disabled="index === dataList.length - 1"
+            :is-disabled="index === dataListToDisplay.length - 1"
             @click="
-              index < dataList.length - 1 && handleMoveClick('down', index)
+              index < dataListToDisplay.length - 1 &&
+                handleMoveClick('down', index, item)
             "
           >
             <RCIcon
-              :color="index === dataList.length - 1 ? 'grey6' : 'grey3'"
+              :color="
+                index === dataListToDisplay.length - 1 ? 'grey6' : 'grey3'
+              "
               :cursor="
-                index === dataList.length - 1 ? 'not-allowed' : 'pointer'
+                index === dataListToDisplay.length - 1
+                  ? 'not-allowed'
+                  : 'pointer'
               "
-              :is-disabled="index === dataList.length - 1"
+              :is-disabled="index === dataListToDisplay.length - 1"
               name="move_down"
               size="14px"
             />
@@ -461,16 +466,21 @@
         : props.theme.colors.grey6};
     font-size: 11px;
     color: ${(props) => props.theme.colors.white};
-    max-width: 11ch;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
     & > span {
       overflow: hidden;
+      white-space: nowrap;
       text-overflow: ellipsis;
+      max-width: 11ch;
     }
   `
 
+  const MarkerText = styled.div`
+    max-width: 11ch;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `
+
   const ContainerValue = styled.div`
     font-size: 12px;
   `
@@ -729,6 +739,7 @@
       EmptyStringBox,
       InfoText,
       InfoWrapper,
+      MarkerText,
     },
     props: {
       dataList: {
@@ -757,6 +768,11 @@
       }
     },
     computed: {
+      dataListToDisplay(){
+        return this.hasExpandedSection
+        ? this.dataList
+        : this.compressedDataList"
+      },
       hasExpandedSection() {
         return this.expandedInverters.length > 0
       },
@@ -933,10 +949,13 @@
             return 'pv'
         }
       },
-      handleMoveClick(direction, index) {
+      handleMoveClick(direction, index, item) {
+        console.log('handleMoveClick', item)
         this.$emit('on-move', {
           direction: direction,
           index: index,
+          item: item,
+          isExpanded: this.hasExpandedSection,
         })
       },
     },