@eturnity/eturnity_reusable_components 6.46.5 → 6.48.0-EPDM-9012.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.46.5",
+  "version": "6.48.0-EPDM-9012.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-
+      <page-title text="Hello" infoText="The ElektroForm solar integration has been activated for your company. Please log in with your Brunner Informatik Cloud-ID. Eturnity will not store your credentials but just a token for the connection."></page-title>
       <br/>
       <input-number
           :value="value"
@@ -114,6 +114,7 @@ import iconCollection from '@/components/icon/iconCollection'
 import dropdownComponent from '@/components/dropdown'
 import videoThumbnail from '@/components/videoThumbnail'
 import icon from '@/components/icon'
+import pageTitle from '@/components/pageTitle'
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -137,6 +138,7 @@ export default {
     SwitchField,
     iconCollection,
     dropdownComponent,
+    pageTitle,
     videoThumbnail,
     icon
   },

package/src/assets/svgIcons/collections.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 10H1C0.45 10 0 10.45 0 11V17C0 17.55 0.45 18 1 18H17C17.55 18 18 17.55 18 17V11C18 10.45 17.55 10 17 10ZM4 16C2.9 16 2 15.1 2 14C2 12.9 2.9 12 4 12C5.1 12 6 12.9 6 14C6 15.1 5.1 16 4 16ZM17 0H1C0.45 0 0 0.45 0 1V7C0 7.55 0.45 8 1 8H17C17.55 8 18 7.55 18 7V1C18 0.45 17.55 0 17 0ZM4 6C2.9 6 2 5.1 2 4C2 2.9 2.9 2 4 2C5.1 2 6 2.9 6 4C6 5.1 5.1 6 4 6Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/dashboard.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 10H8V0H0V10ZM0 18H8V12H0V18ZM10 18H18V8H10V18ZM10 0V6H18V0H10Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/subscriptions.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 12H8V10H0V12ZM0 16H8V14H0V16ZM0 8H8V6H0V8ZM0 2V4H8V2H0ZM10 2H18V16H10V2Z" fill="white"/>
+</svg>

package/src/components/filter/filterSettings.vue

@@ -40,7 +40,10 @@
         v-for="(item, idx) in filterData"
         :key="idx + '_filterdata'"
       >
-        <column-title :showBorder="idx + 1 !== filterData.length">
+        <column-title
+          :showBorder="idx + 1 !== filterData.length"
+          :data-id="`filter_label_project_view_file_manager_${item.type}`"
+        >
           {{ item.columnName }}
         </column-title>
         <row-container v-if="item.type === 'columns'">
@@ -88,13 +91,12 @@
               selectHeight="36px"
               fontSize="13px"
               :label="filter.label"
+              :labelDataId="filter.dataId"
               alignItems="vertical"
               :disabled="!filter.choices.length"
             >
               <template #selector>
-                <option-title>
-                  {{ filter.selectedText }}
-                </option-title>
+                <option-title> {{ filter.selectedText }} </option-title>
               </template>
               <template #dropdown>
                 <dropdown-checkbox-container @click.stop>
@@ -117,7 +119,7 @@
               </template>
             </select-component>
             <section-container v-else-if="isRangeSelector(filter.filter_type)">
-              <row-label>{{ filter.label }}</row-label>
+              <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
               <grid-container>
                 <input-number
                   :placeholder="
@@ -125,7 +127,7 @@
                       ? $gettext('min') + ' (' + filter.unit + ')'
                       : $gettext('min')
                   "
-                  :numberPrecision="2"
+                  :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
                   :value="filter.range.start"
                   @input-change="
                     onChange({
@@ -145,7 +147,7 @@
                       ? $gettext('max') + ' (' + filter.unit + ')'
                       : $gettext('max')
                   "
-                  :numberPrecision="2"
+                  :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
                   :value="filter.range.end"
                   @input-change="
                     onChange({
@@ -165,7 +167,7 @@
               v-else-if="isDateSelector(filter.filter_type)"
               @click.stop
             >
-              <row-label>{{ filter.label }}</row-label>
+              <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
               <grid-container>
                 <date-picker-input
                   :placeholder="$gettext('Date from')"
@@ -338,7 +340,7 @@ const DragContainer = styled.div`
 
 const RowContainer = styled('div', TitleAttrs)`
   padding: 10px 14px;
-  width: 300px;
+  min-width: 300px;
 
   ${({ showBorder, theme }) =>
     showBorder &&
@@ -613,6 +615,9 @@ export default {
       return type === 'multi_select_integer' || type === 'multi_select_string'
     },
     isRangeSelector(type) {
+      return type === 'integer_range' || type === 'number_range'
+    },
+    isIntegerRange(type) {
       return type === 'integer_range'
     },
     isDateSelector(type) {

package/src/components/iconWrapper/index.vue

@@ -120,10 +120,11 @@ export default {
       isStriked:{
         required:false,
         default:false
+    
+      }
+    },
+    data() {
+      return {}
     }
-  },
-  data() {
-    return {}
   }
-}
 </script>

package/src/components/infoText/index.vue

@@ -10,7 +10,6 @@
       </icon-img>
       <text-overlay
         v-if="showInfo"
-        :borderColor="borderColor"
         :width="width"
         :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
         :alignArrow="alignArrow"
@@ -27,7 +26,6 @@
 //To use:
 // <info-text
 //     text="Veritatis et quasi architecto beatae vitae"
-//     borderColor="#ccc"
 //     size="20"
 //     alignArrow="right" // which side the arrow should be on
 // />
@@ -37,7 +35,6 @@ import icon from '../icon'
 
 const textAttrs = {
   iconSize: String,
-  borderColor: String,
   alignArrow: String,
   width: String,
   halfComputedTextInfoWidth: Number
@@ -111,10 +108,6 @@ export default {
     text: {
       required: false
     },
-    borderColor: {
-      required: false,
-      default: null
-    },
     size: {
       required: false,
       default: '14px'
@@ -156,11 +149,7 @@ export default {
   },
   computed: {
     iconColor() {
-      return this.isActive
-        ? this.borderColor
-          ? this.borderColor
-          : theme.colors.secondary
-        : theme.colors.mediumGray
+      return theme.colors.mediumGray
     },
     halfComputedTextInfoWidth() {
       return parseInt(this.width) / 2

package/src/components/inputs/inputNumber/InputNumber.stories.js

@@ -32,7 +32,6 @@ const Template = (args, { argTypes }) => ({
   //     fontSize="13px"
   //     labelText="Number of Modules"
   //     labelInfoText="Here is some information for you..."
-  //     labelInfoAlign="left"
   // />
 })
 
@@ -129,8 +128,7 @@ WithLabelInfo.args = {
   textAlign: "left",
   showLinearUnitName: false,
   labelText: "Number Input",
-  labelInfoText: "Here is some information for you...",
-  labelInfoAlign: "right",
+  labelInfoText: "Here is some information for you..."
 }
 
 export const LargerFont = Template.bind({})

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

@@ -13,15 +13,12 @@
     </label-slot-wrapper>
 
     <label-wrapper v-if="labelText">
-      <label-text :labelFontColor="labelFontColor">
+      <label-text :labelFontColor="labelFontColor" :data-id="labelDataId">
         {{ labelText }}
       </label-text>
       <info-text
         v-if="labelInfoText"
         :text="labelInfoText"
-        borderColor="#ccc"
-        size="14px"
-        :alignText="labelInfoAlign"
       />
     </label-wrapper>
     <input-wrapper>
@@ -53,6 +50,7 @@
         :hasLabelSlot="hasLabelSlot"
         :slotSize="slotSize"
         :showLinearUnitName="showLinearUnitName"
+        :data-id="inputDataId"
       />
       <slot-container v-if="hasSlot" :slotSize="slotSize" :isError="isError">
         <slot></slot>
@@ -94,7 +92,6 @@
 //     fontSize="13px"
 //     labelText="Number of Modules"
 //     labelInfoText="Here is some information for you..."
-//     labelInfoAlign="left"
 //     :minNumber="0"
 //     fontColor="blue"
 // />
@@ -399,10 +396,6 @@ export default {
       required: false,
       default: null
     },
-    labelInfoAlign: {
-      required: false,
-      default: 'left'
-    },
     defaultNumber: {
       required: false,
       default: null
@@ -437,6 +430,14 @@ export default {
     focus: {
       required: false,
       default: false
+    },
+    labelDataId: {
+      required: false,
+      default: ''
+    },
+    inputDataId: {
+      required: false,
+      default: ''
     }
   },
   computed: {

package/src/components/inputs/inputText/InputText.stories.js

@@ -21,7 +21,6 @@ const Template = (args, { argTypes }) => ({
   //   @input-change="onInputChange({ value: $event, type: 'companyName' })"
   //   :isError="checkErrors()"
   //   :errorMessage="This is my error message"
-  //   infoTextAlign="right" // left by default
   //   infoTextMessage="My info message"
   //   label="Question 5"
   //   alignItems="horizontal" // horizontal, vertical

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

@@ -5,15 +5,19 @@
       :alignItems="alignItems"
     >
       <label-wrapper v-if="label">
-        <input-label :labelFontColor="labelFontColor" :fontSize="fontSize">{{
-          label
-        }} <optionalLabel v-if="labelOptional">({{ $gettext('Optional') }})</optionalLabel></input-label>
+        <input-label
+          :labelFontColor="labelFontColor"
+          :fontSize="fontSize"
+          :dataId="labelDataId"
+          >{{ label }}
+          <optionalLabel v-if="labelOptional"
+            >({{ $gettext('Optional') }})</optionalLabel
+          ></input-label
+        >
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           :size="fontSize ? fontSize : '16px'"
-          :alignText="infoTextAlign"
         />
       </label-wrapper>
       <input-error-wrapper>
@@ -38,6 +42,7 @@
             :hasFocus="hasFocus"
             :backgroundColor="backgroundColor"
             :disabledBackgroundColor="disabledBackgroundColor"
+            :dataId="inputDataId"
           />
           <icon-wrapper
             v-if="inputType === 'password' && !isError"
@@ -199,7 +204,6 @@ export default {
   //   @input-blur="onInputBlur($event)"
   //   :isError="checkErrors()"
   //   :errorMessage="This is my error message"
-  //   infoTextAlign="right" // left by default
   //   infoTextMessage="My info message"
   //   label="Question 5"
   //   alignItems="horizontal" // horizontal, vertical
@@ -263,9 +267,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     label: {
       required: false
     },
@@ -310,6 +311,14 @@ export default {
     },
     borderColor: {
       required: false
+    },
+    labelDataId: {
+      required: false,
+      default: ''
+    },
+    inputDataId: {
+      required: false,
+      default: ''
     }
   },
   methods: {

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

@@ -11,6 +11,7 @@
         :inputWidth="inputWidth"
         :isFilter="isFilter"
         :hasFocus="hasFocus"
+        :dataId="dataId"
       />
       <img
         class="search-icn"
@@ -30,6 +31,7 @@
 //   inputWidth="250px"
 //   @on-change="function($event)"
 //   :isFilter="true" // to set the height at 30px
+//   dataId="test-data-id"
 // />
 import styled from 'vue-styled-components'
 
@@ -104,6 +106,10 @@ export default {
     hasFocus: {
       required: false,
       default: false
+    },
+    dataId: {
+      required: false,
+      default: ''
     }
   },
   methods: {

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

@@ -8,7 +8,7 @@
       :hasLabel="!!label && label.length > 0"
       :alignItems="alignItems"
     >
-      <label-wrapper v-if="label">
+      <label-wrapper v-if="label" :data-id="labelDataId">
         <input-label
           :fontColor="
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
@@ -22,9 +22,7 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           :size="fontSize ? fontSize : '16px'"
-          :alignText="infoTextAlign"
         />
       </label-wrapper>
       <select-button-wrapper :disabled="disabled">
@@ -104,6 +102,7 @@
             :selectedValue="selectedValue"
             @option-selected="optionSelected"
             @option-hovered="optionHovered"
+            @mouseleave="optionLeave"
           >
             <slot name="dropdown"></slot>
           </selectDropdown>
@@ -121,6 +120,7 @@
 //     optionWidth="50%"
 //     label="that is a label"
 //     alignItems="vertical"
+//     label-data-id="test-data-id"
 //     >
 //     <template #selector="{selectedValue}">
 //     value selected: {{selectedValue}}
@@ -304,10 +304,11 @@ export default {
       required: false,
       default: false
     },
-    infoTextMessage: {
-      required: false
+    labelDataId: {
+      required: false,
+      default: ''
     },
-    infoTextAlign: {
+    infoTextMessage: {
       required: false
     },
     selectWidth: {
@@ -335,6 +336,10 @@ export default {
       required: false,
       default: false
     },
+    dropdownAutoClose: {
+      required: false,
+      default: false
+    },
     alignItems: {
       required: false,
       default: 'horizontal'
@@ -408,7 +413,7 @@ export default {
       isActive: false,
       textSearch: '',
       hoveredIndex: 0,
-      hoveredValue:null,
+      hoveredValue: null,
       isClickOutsideActive: false
     }
   },
@@ -447,7 +452,7 @@ export default {
       this.$emit('input-change', e)
     },
     optionHovered(e) {
-      this.hoveredValue=e
+      this.hoveredValue = e
     },
     mouseEnterHandler() {
       if (this.hoverDropdown) {
@@ -460,6 +465,11 @@ export default {
         this.blur()
       }
     },
+    optionLeave() {
+      if(this.dropdownAutoClose) {
+        this.isDropdownOpen = false
+      }
+    },
     searchChange(value) {
       this.textSearch = value
       this.$emit('search-change', value)
@@ -502,14 +512,16 @@ export default {
     },
     onArrowPress(dir) {
       let newHoveredElem
-      const currentHoveredElem=this.$refs.dropdown.$el.querySelector(`[data-value="${this.hoveredValue}"]`);
-      if(currentHoveredElem){
-        if(dir>0){
-          newHoveredElem=currentHoveredElem.nextElementSibling
-        }else{
-          newHoveredElem=currentHoveredElem.previousElementSibling
+      const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
+        `[data-value="${this.hoveredValue}"]`
+      )
+      if (currentHoveredElem) {
+        if (dir > 0) {
+          newHoveredElem = currentHoveredElem.nextElementSibling
+        } else {
+          newHoveredElem = currentHoveredElem.previousElementSibling
         }
-        if(newHoveredElem){
+        if (newHoveredElem) {
           this.hoveredValue = newHoveredElem.getAttribute('data-value')
           const topPos = newHoveredElem.offsetTop
           this.$refs.dropdown.$el.scrollTop = topPos

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

@@ -15,9 +15,6 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
 
@@ -48,9 +45,6 @@
           @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
     </flex-wrapper>
@@ -202,9 +196,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     colorMode: {
       required: false,
       default: 'light'

package/src/components/inputs/textAreaInput/TextAreaInput.stories.js

@@ -22,7 +22,6 @@ const Template = (args, { argTypes }) => ({
   //     rowHeight="4" //optional
   //     :isError="false"
   //     :errorText="$gettext('field_required')"
-  //     infoTextAlign="right" // left by default
   //     infoTextMessage="My info message"
   //     label="Question 5"
   //     alignItems="horizontal" // horizontal, vertical
@@ -37,7 +36,6 @@ Default.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -52,7 +50,6 @@ Disabled.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -67,7 +64,6 @@ Error.args = {
   rowHeight: "2",
   isError: true,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -82,7 +78,6 @@ WithLabel.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -97,7 +92,6 @@ HorizontalLabel.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -112,7 +106,6 @@ LargerTextArea.args = {
   rowHeight: "5",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -127,7 +120,6 @@ LargerFontSize.args = {
   fontSize: "24px",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",

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

@@ -5,13 +5,13 @@
       :hasLabel="label && label.length > 0"
     >
       <label-wrapper v-if="label">
-        <input-label :fontSize="fontSize">{{ label }}</input-label>
+        <input-label :fontSize="fontSize" :data-id="labelDataId">{{
+          label
+        }}</input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           size="16px"
-          :alignText="infoTextAlign"
         />
       </label-wrapper>
       <input-container
@@ -27,6 +27,7 @@
           :disabled="isDisabled"
           @input="onChangeHandler"
           :resize="resize"
+          :data-id="inputDataId"
         />
       </input-container>
     </input-wrapper>
@@ -44,7 +45,6 @@
 //     rowHeight="4" //optional
 //     :isError="false"
 //     :errorText="$gettext('field_required')"
-//     infoTextAlign="right" // left by default
 //     infoTextMessage="My info message"
 //     label="Question 5"
 //     alignItems="horizontal" // horizontal, vertical
@@ -164,9 +164,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     label: {
       required: false
     },
@@ -181,6 +178,14 @@ export default {
     resize: {
       required: false,
       default: 'none'
+    },
+    labelDataId: {
+      required: false,
+      default: ''
+    },
+    inputDataId: {
+      required: false,
+      default: ''
     }
   },
   methods: {

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

@@ -9,9 +9,6 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
       <toggle-wrapper
@@ -45,9 +42,6 @@
           @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
     </flex-wrapper>
@@ -67,7 +61,6 @@
 //   labelAlign="right"
 //   fontColor="black"
 //   :disabled="true"
-//   infoTextAlign="right" // left by default
 //   infoTextMessage="My info message"
 // />
 
@@ -271,10 +264,7 @@ export default {
     },
     infoTextMessage: {
       required: false,
-    },
-    infoTextAlign: {
-      required: false,
-    },
+    }
   },
   methods: {
     onToggleChange() {