@eturnity/eturnity_reusable_components 7.48.1-EPDM-12680.2 → 7.48.1-EPDM-11314.0

package/src/stories/page.css

@@ -1,69 +1,69 @@
-.storybook-page {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 24px;
-  padding: 48px 20px;
-  margin: 0 auto;
-  max-width: 600px;
-  color: #333;
-}
-
-.storybook-page h2 {
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 1;
-  margin: 0 0 4px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-page p {
-  margin: 1em 0;
-}
-
-.storybook-page a {
-  text-decoration: none;
-  color: #1ea7fd;
-}
-
-.storybook-page ul {
-  padding-left: 30px;
-  margin: 1em 0;
-}
-
-.storybook-page li {
-  margin-bottom: 8px;
-}
-
-.storybook-page .tip {
-  display: inline-block;
-  border-radius: 1em;
-  font-size: 11px;
-  line-height: 12px;
-  font-weight: 700;
-  background: #e7fdd8;
-  color: #66bf3c;
-  padding: 4px 12px;
-  margin-right: 10px;
-  vertical-align: top;
-}
-
-.storybook-page .tip-wrapper {
-  font-size: 13px;
-  line-height: 20px;
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
-.storybook-page .tip-wrapper svg {
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  margin-right: 4px;
-  vertical-align: top;
-  margin-top: 3px;
-}
-
-.storybook-page .tip-wrapper svg path {
-  fill: #1ea7fd;
-}
+.storybook-page {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 24px;
+  padding: 48px 20px;
+  margin: 0 auto;
+  max-width: 600px;
+  color: #333;
+}
+
+.storybook-page h2 {
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+  margin: 0 0 4px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  text-decoration: none;
+  color: #1ea7fd;
+}
+
+.storybook-page ul {
+  padding-left: 30px;
+  margin: 1em 0;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  border-radius: 1em;
+  font-size: 11px;
+  line-height: 12px;
+  font-weight: 700;
+  background: #e7fdd8;
+  color: #66bf3c;
+  padding: 4px 12px;
+  margin-right: 10px;
+  vertical-align: top;
+}
+
+.storybook-page .tip-wrapper {
+  font-size: 13px;
+  line-height: 20px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  margin-right: 4px;
+  vertical-align: top;
+  margin-top: 3px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}

package/src/utils/index.js

@@ -1,12 +1,12 @@
-export function debounce(fn, wait) {
-  let timer
-  return function (...args) {
-    if (timer) {
-      clearTimeout(timer)
-    }
-    const context = this
-    timer = setTimeout(() => {
-      fn.apply(context, args)
-    }, wait)
-  }
-}
+export function debounce(fn, wait) {
+  let timer
+  return function (...args) {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    const context = this
+    timer = setTimeout(() => {
+      fn.apply(context, args)
+    }, wait)
+  }
+}

package/src/assets/svgIcons/collapse_all.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
-  <path d="M3 2L7 5L11 2" stroke="white" stroke-width="1.27273" class="fix"/>
-  <path d="M3 12L7 9L11 12" stroke="white" stroke-width="1.27273" class="fix"/>
-</svg>

package/src/assets/svgIcons/hybrid.svg

@@ -1,4 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.22998 11.8962H10.5006H12.2505V10.1463V8.97906H14.0004V5.47917H12.2505V4.31283V2.56289V2.55151H10.5006V2.56289H8.58218L7.76617 4.31283H10.5006V10.1463H5.04599L4.22998 11.8962Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.2622 4.79738C6.91629 4.63687 6.53076 4.54729 6.12431 4.54729C4.63054 4.54729 3.41919 5.75796 3.41919 7.25241C3.41919 8.33588 4.05591 9.26984 4.97534 9.70158L7.2622 4.79738ZM5.44786 3.11681C5.44786 3.49042 5.7507 3.79326 6.12431 3.79326C6.49793 3.79326 6.80077 3.49042 6.80077 3.11681V1.76459C6.80077 1.39097 6.49793 1.08813 6.12431 1.08813C5.7507 1.08813 5.44786 1.39097 5.44786 1.76459V3.11681ZM2.02818 7.88939H0.675962C0.302349 7.88939 -0.000488281 7.58655 -0.000488281 7.21294C-0.000488281 6.83932 0.302349 6.53649 0.675962 6.53649H2.02818C2.4018 6.53649 2.70463 6.83932 2.70463 7.21294C2.70463 7.58655 2.4018 7.88939 2.02818 7.88939ZM3.7057 10.5877L2.74955 11.5439C2.4855 11.8079 2.05745 11.8079 1.7934 11.5439C1.52935 11.2798 1.52935 10.8518 1.7934 10.5877L2.74955 9.63155C3.0136 9.36751 3.44165 9.36751 3.7057 9.63155C3.96975 9.8956 3.96975 10.3237 3.7057 10.5877ZM2.74955 4.79432L1.7934 3.83817C1.52935 3.57412 1.52935 3.14607 1.7934 2.88202C2.05745 2.61797 2.4855 2.61797 2.74955 2.88202L3.7057 3.83817C3.96975 4.10222 3.96975 4.53027 3.7057 4.79432C3.44165 5.05837 3.0136 5.05837 2.74955 4.79432Z" fill="white"/>
-</svg>

package/src/assets/svgIcons/module.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0722 3.6H1.6V10.4H11.0722L7.87332 7.60217L7.18484 7L7.87332 6.39783L11.0722 3.6ZM12.4 9.43572V4.56428L9.61516 7L12.4 9.43572ZM0 2H1.6H12.4H14V3.6V10.4V12H12.4H1.6H0V10.4V3.6V2Z" fill="white"/>
-</svg>

package/src/assets/svgIcons/optimizer.svg

@@ -1,6 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="3.11079" y="3.10981" width="7.77778" height="7.77778" stroke="white" stroke-width="1.55556"/>
-<line x1="3.72749" y1="10.3387" x2="10.7275" y2="3.3387" stroke="white" stroke-width="1.55556"/>
-<line x1="-0.000366211" y1="7.05425" x2="2.99963" y2="7.05425" stroke="white" stroke-width="1.55556"/>
-<line x1="10.9994" y1="6.99957" x2="13.9994" y2="6.99957" stroke="white" stroke-width="1.55556"/>
-</svg>

package/src/assets/svgIcons/string_design.svg

@@ -1,5 +0,0 @@
-<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.85714 1.92857C2.85714 2.71755 2.21755 3.35714 1.42857 3.35714C0.639593 3.35714 0 2.71755 0 1.92857C0 1.13959 0.639593 0.5 1.42857 0.5C2.21755 0.5 2.85714 1.13959 2.85714 1.92857Z" fill="white"/>
-<path d="M10 9.07143C10 9.86041 9.36041 10.5 8.57143 10.5C7.78245 10.5 7.14286 9.86041 7.14286 9.07143C7.14286 8.28245 7.78245 7.64286 8.57143 7.64286C9.36041 7.64286 10 8.28245 10 9.07143Z" fill="white"/>
-<path d="M5.71429 3C5.71429 2.40827 6.19398 1.92857 6.78571 1.92857C7.37745 1.92857 7.85714 2.40827 7.85714 3V6.21429H9.28571V3C9.28571 1.61929 8.16643 0.5 6.78571 0.5C5.405 0.5 4.28571 1.61929 4.28571 3V8C4.28571 8.59173 3.80602 9.07143 3.21429 9.07143C2.62255 9.07143 2.14286 8.59173 2.14286 8V4.78571H0.714286V8C0.714286 9.38071 1.83357 10.5 3.21429 10.5C4.595 10.5 5.71429 9.38071 5.71429 8V3Z" fill="white"/>
-</svg>

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

@@ -1,417 +0,0 @@
-<template>
-  <PageContainer>
-    <PageTitleContainer>
-      <SectionTitleText>{{ $gettext('inverters') }}</SectionTitleText>
-      <ButtonIcon
-        custom-color="black"
-        :icon-name="hasExpandedSection ? 'collapse_all' : 'expand'"
-        :text="$gettext(hasExpandedSection ? 'collapse_all' : 'expand_all')"
-        @click="toggleAllSections"
-      />
-    </PageTitleContainer>
-    <SectionContainer v-for="item in dataList" :key="item.inverterId">
-      <TitleContainer>
-        <IconWrapper size="20px" @click="toggleSection(item.inverterId)">
-          <RCIcon
-            color="white"
-            :name="isExpanded(item.inverterId) ? 'arrow_up' : 'arrow_down'"
-            size="10px"
-          />
-        </IconWrapper>
-        <TextContainer>
-          <TitleText :title="item.model">{{ item.model }}</TitleText>
-          <TitleSubText>{{ item.brandName }}</TitleSubText>
-        </TextContainer>
-        <IconsContainer>
-          <IconWrapper>
-            <RCIcon color="red" cursor="pointer" name="delete" size="14px" />
-          </IconWrapper>
-          <IconWrapper @click="$emit('on-edit', item)">
-            <RCIcon
-              color="white"
-              cursor="pointer"
-              name="edit_button"
-              size="14px"
-            />
-          </IconWrapper>
-          <IconWrapper>
-            <RCIcon
-              color="white"
-              cursor="pointer"
-              name="document"
-              size="14px"
-            />
-          </IconWrapper>
-        </IconsContainer>
-      </TitleContainer>
-      <MarkersContainer>
-        <MarkerItem>??%</MarkerItem>
-        <MarkerItem>{{
-          item.hasTemplate ? 'Template!' : $gettext('no_template')
-        }}</MarkerItem>
-        <MarkerItem>
-          <RCIcon color="white" :name="getIconName(item.type)" size="14px" />
-          <div>{{ getTypeName(item.type) }}</div>
-        </MarkerItem>
-        <ContainerValue>? kWp</ContainerValue>
-      </MarkersContainer>
-      <BoxContainer
-        v-for="mppt in item.mppts"
-        v-show="isExpanded(item.inverterId)"
-        :key="mppt.mpptId"
-      >
-        <BoxTitleWrapper>
-          <IconWrapper size="20px" @click="toggleMppt(mppt.mpptId)">
-            <RCIcon
-              color="white"
-              cursor="pointer"
-              :name="isMpptExpanded(mppt.mpptId) ? 'arrow_up' : 'arrow_down'"
-              size="10px"
-            />
-          </IconWrapper>
-          <BoxTitleText>{{ mppt.name }}</BoxTitleText>
-          <BoxIconsContainer>
-            <BoxIconWrapper>
-              <RCIcon
-                color="white"
-                cursor="pointer"
-                name="string_design"
-                size="11px"
-              />
-              <div>
-                {{ mppt.strings.length }}/{{
-                  mppt.numberOfMppts ? mppt.numberOfMppts : 0
-                }}
-              </div>
-            </BoxIconWrapper>
-            <BoxIconWrapper>
-              <RCIcon
-                color="white"
-                cursor="pointer"
-                name="panels_tool"
-                size="11px"
-              />
-              <div>{{ getNumberOfMpptModules(mppt.strings) }}</div>
-            </BoxIconWrapper>
-          </BoxIconsContainer>
-        </BoxTitleWrapper>
-        <div v-show="isMpptExpanded(mppt.mpptId)">
-          <StringBox v-for="string in mppt.strings" :key="string.id">
-            <StringColorContainer :background-color="string.color" />
-            <StringContainer>
-              <div>{{ string.name }}</div>
-              <StringIconContainer>
-                <div>{{ string.modules.length }}</div>
-                <RCIcon color="white" name="module" size="14px" />
-              </StringIconContainer>
-            </StringContainer>
-          </StringBox>
-        </div>
-      </BoxContainer>
-    </SectionContainer>
-  </PageContainer>
-</template>
-
-<script>
-  // import DropdownMenu from '@eturnity/eturnity_reusable_components/src/components/stringDesign/DropdownMenu'
-  import styled from 'vue3-styled-components'
-  import RCIcon from '../../icon'
-  import ButtonIcon from '../../buttons/buttonIcon'
-
-  const PageContainer = styled.div``
-
-  const SectionContainer = styled.div`
-    &:not(:last-child) {
-      margin-bottom: 8px;
-    }
-    background-color: ${(props) => props.theme.colors.black};
-    padding: 8px;
-    border-radius: 4px;
-    color: ${(props) => props.theme.colors.white};
-  `
-
-  const TitleContainer = styled.div`
-    display: flex;
-    gap: 14px;
-    align-items: center;
-  `
-
-  const IconsContainer = styled.div`
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-  `
-
-  const TextContainer = styled.div`
-    display: grid;
-  `
-
-  const TitleText = styled.div`
-    font-size: 13px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `
-
-  const TitleSubText = styled.div`
-    font-size: 10px;
-  `
-
-  const MarkersContainer = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin: 8px 0 16px 30px;
-    align-items: end;
-  `
-
-  const MarkerAttrs = { backgroundColor: String }
-  const MarkerItem = styled('div', MarkerAttrs)`
-    display: flex;
-    gap: 5px;
-    align-items: center;
-    padding: 2px 7px;
-    border-radius: 4px;
-    background-color: ${(props) =>
-      props.backgroundColor
-        ? props.theme.colors[props.backgroundColor]
-        : props.theme.colors.grey6};
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.white};
-  `
-
-  const ContainerValue = styled.div`
-    font-size: 11px;
-  `
-
-  const IconAttrs = { size: { type: String, default: '36px' } }
-  const IconWrapper = styled('div', IconAttrs)`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    cursor: pointer;
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
-
-    &:active {
-      background: rgba(255, 255, 255, 0.2);
-    }
-  `
-
-  const BoxContainer = styled.div`
-    border-radius: 4px;
-    background: ${(props) => props.theme.colors.grey6};
-    padding: 8px;
-    margin-top: 8px;
-    margin-left: 30px;
-  `
-
-  const BoxTitleWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  `
-
-  const BoxTitleText = styled.div`
-    font-size: 13px;
-  `
-
-  const BoxIconsContainer = styled.div`
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    margin-left: auto;
-    font-size: 11px;
-  `
-
-  const BoxIconWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    padding: 4px;
-  `
-
-  const StringBox = styled.div`
-    display: grid;
-    grid-template-columns: auto 1fr;
-    margin-top: 8px;
-    border-radius: 4px;
-    border: 1px solid ${(props) => props.theme.colors.grey3};
-  `
-
-  const StringContainer = styled.div`
-    display: flex;
-    justify-content: space-between;
-    gap: 8px;
-    padding: 8px;
-    font-size: 11px;
-  `
-
-  const StringColorAttrs = { backgroundColor: String }
-  const StringColorContainer = styled('div', StringColorAttrs)`
-    background-color: ${(props) => props.backgroundColor};
-    width: 22px;
-    min-height: 100%;
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-  `
-
-  const StringIconContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 2px;
-    padding: 0 4px;
-  `
-
-  const PageTitleContainer = styled.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 8px;
-  `
-
-  const SectionTitleText = styled.div`
-    font-size: 14px;
-    font-weight: 700;
-    color: ${(props) => props.theme.colors.white};
-  `
-
-  export default {
-    name: 'DropdownMenu',
-    components: {
-      SectionContainer,
-      TitleContainer,
-      IconsContainer,
-      TextContainer,
-      TitleText,
-      TitleSubText,
-      RCIcon,
-      MarkersContainer,
-      MarkerItem,
-      ContainerValue,
-      IconWrapper,
-      BoxContainer,
-      BoxTitleWrapper,
-      BoxTitleText,
-      BoxIconsContainer,
-      BoxIconWrapper,
-      StringBox,
-      StringContainer,
-      StringColorContainer,
-      StringIconContainer,
-      PageTitleContainer,
-      SectionTitleText,
-      ButtonIcon,
-      PageContainer,
-    },
-    props: {
-      dataList: {
-        required: true,
-        type: Array,
-      },
-    },
-    emits: ['on-edit'],
-    data() {
-      return {
-        expandedInverters: [],
-        expandedMppts: [],
-      }
-    },
-    computed: {
-      hasExpandedSection() {
-        return this.expandedInverters.length > 0
-      },
-    },
-    methods: {
-      getNumberOfMpptModules(strings) {
-        return strings.reduce((acc, curr) => acc + curr.modules.length, 0)
-      },
-      getStringColor(idx) {
-        // ToDo: get correct colors
-        const colors = [
-          '#FF6B6B', // coral red
-          '#4ECDC4', // turquoise
-          '#45B7D1', // sky blue
-          '#96CEB4', // sage green
-          '#FFEEAD', // cream yellow
-          '#D4A5A5', // dusty rose
-          '#9B59B6', // purple
-          '#3498DB', // bright blue
-          '#E67E22', // orange
-          '#27AE60', // emerald green
-        ]
-        return colors[idx]
-      },
-      isExpanded(id) {
-        return this.expandedInverters.includes(id)
-      },
-      isMpptExpanded(id) {
-        return this.expandedMppts.includes(id)
-      },
-      toggleSection(id) {
-        const index = this.expandedInverters.indexOf(id)
-        if (index === -1) {
-          this.expandedInverters.push(id)
-        } else {
-          this.expandedInverters.splice(index, 1)
-        }
-      },
-      toggleMppt(id) {
-        const index = this.expandedMppts.indexOf(id)
-        if (index === -1) {
-          this.expandedMppts.push(id)
-        } else {
-          this.expandedMppts.splice(index, 1)
-        }
-      },
-      toggleAllSections() {
-        if (this.hasExpandedSection) {
-          this.expandedInverters = []
-          this.expandedMppts = []
-        } else {
-          this.expandedInverters = this.dataList.map((item) => item.inverterId)
-          this.expandedMppts = this.dataList.flatMap((item) =>
-            item.mppts.map((mppt) => mppt.mpptId)
-          )
-        }
-      },
-      getTypeName(type) {
-        const value = type.toLowerCase()
-        switch (value) {
-          case 'pv':
-            return this.$gettext('PV')
-          case 'pv_storage':
-            return this.$gettext('hybrid')
-          case 'storage':
-            return this.$gettext('battery')
-          case 'optimizer':
-            return this.$gettext('inverter_type_optimizer')
-          default:
-            return this.$gettext('PV')
-        }
-      },
-      getIconName(type) {
-        const value = type.toLowerCase()
-        switch (value) {
-          case 'pv':
-            return 'pv'
-          case 'pv_storage':
-            return 'hybrid'
-          case 'storage':
-            return 'battery'
-          case 'optimizer':
-            return 'optimizer'
-          default:
-            return 'pv'
-        }
-      },
-    },
-  }
-</script>