@eturnity/eturnity_reusable_components 8.7.3 → 8.7.4--EPDM-12729.1

package/dist/main.es92.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "6",
+  height: "16",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M21.75 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 20a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const context_menu = { render };
+export {
+  context_menu as default,
+  render
+};

package/dist/main.es93.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "6",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#B2B9C5",
+  d: "M16.5 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M27 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const context_menu_tabs = { render };
+export {
+  context_menu_tabs as default,
+  render
+};

package/dist/main.es94.js

@@ -0,0 +1,24 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "800",
+  height: "800",
+  viewBox: "0 0 512 512"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "none",
+  "fill-rule": "evenodd",
+  d: "M426.667 128v320h-256V128zM384 170.667H213.333v234.666H384zm-64-128v42.666H128v256H85.333V42.667z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const copy = { render };
+export {
+  copy as default,
+  render
+};

package/dist/main.es95.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "10",
+  height: "10",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "m9.879 8.479-1.4 1.4L.12 1.52l1.4-1.4L5.7 4.3z"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "m1.521 9.879-1.4-1.4L8.48.12l1.4 1.4z"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const cross = { render };
+export {
+  cross as default,
+  render
+};

package/dist/main.es96.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "14",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M20 16c2.829 0 4.976 1.278 6.69 4.003C24.975 22.724 22.827 24 20 24s-4.975-1.276-6.69-3.997C15.024 17.278 17.171 16 20 16m0-2c-4.273 0-7.094 2.43-9 6.005C12.906 23.57 15.727 26 20 26s7.094-2.43 9-5.995C27.094 16.43 24.273 14 20 14"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M20 22a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const current_variant = { render };
+export {
+  current_variant as default,
+  render
+};

package/dist/main.es97.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#fff",
+  d: "M0 10h8V0H0zm0 8h8v-6H0zm10 0h8V8h-8zm0-18v6h8V0z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const dashboard = { render };
+export {
+  dashboard as default,
+  render
+};

package/dist/main.es98.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M16 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4v-2H2V2h14v14h-4v2h4c1.1 0 2-.9 2-2V2a2 2 0 0 0-2-2M9 6l-4 4h3v8h2v-8h3z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const data_transfer = { render };
+export {
+  data_transfer as default,
+  render
+};

package/dist/main.es99.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "12",
+  height: "16",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M15 13h2v14h-2z"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M17 21a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h8l-2.857 4L25 21z"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const deadline = { render };
+export {
+  deadline as default,
+  render
+};

package/dist/style.css

@@ -0,0 +1 @@
+html,body{height:100%;margin:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.7.3",
+  "version": "8.7.4--EPDM-12729.1",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/reorder_string.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3536 0.646484L13.3536 2.64648L13.7071 3.00004L13.3536 3.35359L11.3536 5.35359L10.6464 4.64648L11.7929 3.50004H9.50093L7.756 5.34373L7.02971 4.65635L8.92257 2.65635L9.0705 2.50004H9.28571H11.7929L10.6464 1.35359L11.3536 0.646484ZM0 3.50004H3.49625L8.91932 9.34026L9.06768 9.50004H9.28571H11.7929L10.6464 10.6465L11.3536 11.3536L13.3536 9.35359L13.7071 9.00004L13.3536 8.64648L11.3536 6.64648L10.6464 7.35359L11.7929 8.50004H9.50375L4.08068 2.65981L3.93232 2.50004H3.71429H0V3.50004ZM0 8.50004H3.49042L5.12703 6.66703L5.87297 7.33305L4.08725 9.33305L3.93815 9.50004H3.71429H0V8.50004Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/solarmarkt.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 19 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.947 24.9C4.1 24.9 1.308 23.24.1 19.773c-.141-.389-.148-.542.1-.649l3.457-1.791c.218-.11.292-.1.393.177a4.731 4.731 0 0 0 4.8 3.039c2.459-.044 4.162-.874 4.162-2.5 0-1.448-1.574-3.046-4.849-3.42-.259-.027-.577-.06-.858-.1C3.8 13.986.871 11.979.737 7.921c-.151-4.6 2.4-7.81 8.708-7.81 4.735 0 7.455 2.236 8.582 5.194.142.378-.038.532-.251.6l-3.955 1.623c-.249.106-.348.029-.416-.147-.544-1.418-1.642-3.339-4.2-3.224-2.6.121-3.633 1.159-3.862 2.706-.316 2.128 1.568 3.117 5.1 3.527.318.035.711.106 1.175.176 4.558.636 6.967 3.083 6.967 6.768 0 5.446-4.047 7.564-9.637 7.564" fill="white"/>
+</svg>

package/src/components/buttons/buttonIcon/index.vue

@@ -1,8 +1,10 @@
 <template>
   <PageContainer>
     <ButtonWrapper
+      :app-theme="appTheme"
       :custom-color="customColor"
       :height="height"
+      :is-active="isActive"
       :is-disabled="isDisabled"
       :min-width="minWidth"
     >
@@ -44,6 +46,8 @@
     minWidth: String,
     customColor: String,
     height: String,
+    appTheme: String,
+    isActive: Boolean,
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     display: grid;
@@ -55,6 +59,10 @@
         ? props.theme.colors[props.customColor]
           ? props.theme.colors[props.customColor]
           : props.customColor
+        : props.appTheme === 'dark'
+        ? props.isActive
+          ? 'rgba(255, 255, 255, 0.2)'
+          : props.theme.colors.black
         : props.theme.colors.yellow};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
@@ -110,32 +118,50 @@
       isDisabled: {
         required: false,
         default: false,
+        type: Boolean,
       },
       text: {
         required: true,
+        type: String,
       },
       minWidth: {
         required: false,
         default: null,
+        type: String,
       },
       customColor: {
         required: false,
         default: null,
+        type: String,
       },
       iconName: {
         required: true,
+        type: String,
       },
       fontColor: {
         required: false,
         default: null,
+        type: String,
       },
       fontSize: {
         required: false,
         default: '13px',
+        type: String,
       },
       height: {
         required: false,
         default: '30px',
+        type: String,
+      },
+      appTheme: {
+        required: false,
+        default: 'light',
+        type: String,
+      },
+      isActive: {
+        required: false,
+        default: false,
+        type: Boolean,
       },
     },
     data() {

package/src/components/sideMenu/index.vue

@@ -254,9 +254,6 @@
         activeDropdown: null,
       }
     },
-    mounted() {
-      this.activeDropdown = this.activeParentTab
-    },
     methods: {
       toggleActiveDropdown(value) {
         if (this.activeDropdown === value) {
@@ -266,5 +263,17 @@
         }
       },
     },
+    watch: {
+      activeTab: {
+        // once active tab is received, check if any parent
+        // tab is active and if so open according dropdown
+        handler() {
+          if (this.activeParentTab) {
+            this.activeDropdown = this.activeParentTab
+          }
+        },
+        once: true,
+      },
+    },
   }
 </script>

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

@@ -2,12 +2,22 @@
   <PageContainer>
     <PageTitleContainer data-id="string_design_expand_collapse_section">
       <SectionTitleText>{{ $gettext('inverters') }}</SectionTitleText>
-      <ButtonIcon
-        custom-color="black"
-        :icon-name="hasExpandedSection ? 'collapse_all' : 'expand_all'"
-        :text="$gettext(hasExpandedSection ? 'collapse_all' : 'expand_all')"
-        @click="toggleAllSections"
-      />
+      <TitleButtonsContainer>
+        <ButtonIcon
+          v-if="dataListToDisplay.length > 1"
+          app-theme="dark"
+          icon-name="reorder_string"
+          :is-active="showReorder"
+          :text="$gettext('reorder')"
+          @click="toggleShowReorder()"
+        />
+        <ButtonIcon
+          app-theme="dark"
+          :icon-name="hasExpandedSection ? 'collapse_all' : 'expand_all'"
+          :text="$gettext(hasExpandedSection ? 'collapse_all' : 'expand_all')"
+          @click="toggleAllSections"
+        />
+      </TitleButtonsContainer>
     </PageTitleContainer>
     <SectionContainer
       v-for="(item, index) in dataListToDisplay"
@@ -208,7 +218,7 @@
             </IconWrapper>
           </IconsContainer>
         </LeftContainer>
-        <SortingContainer v-if="dataListToDisplay.length > 1">
+        <SortingContainer v-if="dataListToDisplay.length > 1 && showReorder">
           <SortingIconWrapper
             :data-test-id="'move_up_' + index"
             :is-disabled="index === 0"
@@ -622,9 +632,15 @@
     background-color: ${(props) => props.theme.colors.black};
     z-index: 99;
     padding: 8px;
+    display: grid;
+    gap: 6px;
+    align-items: center;
+  `
+
+  const TitleButtonsContainer = styled.div`
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    gap: 4px;
     padding-bottom: 8px;
   `
 
@@ -755,6 +771,7 @@
       StringColorContainer,
       StringIconContainer,
       PageTitleContainer,
+      TitleButtonsContainer,
       SectionTitleText,
       ButtonIcon,
       PageContainer,
@@ -798,6 +815,7 @@
       return {
         expandedInverters: [],
         expandedMppts: [],
+        showReorder: false,
         numberToString,
       }
     },
@@ -861,6 +879,9 @@
       hasGroupedInverters(item) {
         return item.type != 'optimizer' && item.quantity > 1
       },
+      toggleShowReorder() {
+        this.showReorder = !this.showReorder
+      },
       isTargetRatioInRange(inverter) {
         const currentTargetRatio = inverter.getTargetRatio()
         return (

package/src/components/tabsHeader/index.vue

@@ -14,70 +14,73 @@
 </template>
 
 <script>
-// import RCTabsHeader from "@eturnity/eturnity_reusable_components/src/components/tabsHeader"
-// To use:
-// <RCTabsHeader
-//   :activeTab="activeTabIndex" // should match the 'id'
-// :tabsData="[
-// {
-//   text: 'Tab 1',
-//   id: 0
-// },
-// {
-//   text: 'Tab 1',
-//   id: 1
-// }
-//  ]"
-// />
-import styled from 'vue3-styled-components'
+  // import RCTabsHeader from "@eturnity/eturnity_reusable_components/src/components/tabsHeader"
+  // To use:
+  // <RCTabsHeader
+  //   :activeTab="activeTabIndex" // should match the 'id'
+  // :tabsData="[
+  // {
+  //   text: 'Tab 1',
+  //   id: 0
+  // },
+  // {
+  //   text: 'Tab 1',
+  //   id: 1
+  // }
+  //  ]"
+  // />
+  import styled from 'vue3-styled-components'
 
-const PageContainer = styled.div``
+  const PageContainer = styled.div``
 
-const TabsContainer = styled.div`
-  display: flex;
-  cursor: pointer;
-  width: 100%;
-`
+  const TabsContainer = styled.div`
+    display: flex;
+    cursor: pointer;
+    width: 100%;
+  `
 
-const TabAttrs = { isActive: Boolean }
-const TabItem = styled('div', TabAttrs)`
-  padding: 10px 20px;
-  font-size: 14px;
-  font-weight: 700;
-  background-color: ${(props) =>
-    props.isActive ? props.theme.colors.grey5 : props.theme.colors.white};
-  border-top: 3px solid
-    ${(props) =>
+  const TabAttrs = { isActive: Boolean }
+  const TabItem = styled('div', TabAttrs)`
+    padding: 10px 20px;
+    font-size: 14px;
+    font-weight: 600;
+    background-color: ${(props) =>
+      props.isActive ? props.theme.colors.secondary : props.theme.colors.white};
+    color: ${(props) =>
       props.isActive
         ? props.theme.colors.brightBlue
-        : props.theme.colors.grey4};
-  flex-grow: 1;
-`
+        : props.theme.colors.black};
+    border-bottom: ${(props) =>
+      props.isActive
+        ? '4px solid' + props.theme.colors.brightBlue
+        : '1px solid' + props.theme.colors.grey4};
+    flex-grow: 1;
+  `
 
-export default {
-  name: 'RCTabsHeader',
-  components: {
-    PageContainer,
-    TabsContainer,
-    TabItem
-  },
-  props: {
-    tabsData: {
-      required: true,
-      type: Array
+  export default {
+    name: 'RCTabsHeader',
+    components: {
+      PageContainer,
+      TabsContainer,
+      TabItem,
+    },
+    props: {
+      tabsData: {
+        required: true,
+        type: Array,
+      },
+      activeTab: {
+        required: true,
+        type: Number,
+      },
+    },
+    methods: {
+      onTabClick({ id }) {
+        if (id === this.activeTab) {
+          return
+        }
+        this.$emit('on-tab-change', id)
+      },
     },
-    activeTab: {
-      required: true,
-      type: Number
-    }
-  },
-  methods: {
-    onTabClick({ id }) {
-      if (id === this.activeTab) {
-        return
-      }
-      this.$emit('on-tab-change', id)
-    }
   }
-}
 </script>