@eturnity/eturnity_reusable_components 1.2.86-EPDM-7509.1 → 1.2.86-EPDM-7435-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.86-EPDM-7509.1",
+  "version": "1.2.86-EPDM-7435-1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/assets/svgIcons/subdirectory.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 13H12v5l6-6-6-6v5H4V2H2v11z"/></svg>

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

@@ -7,7 +7,7 @@
       <label-wrapper v-if="label">
         <input-label :labelFontColor="labelFontColor" :fontSize="fontSize">{{
           label
-        }}</input-label>
+        }} <optionalLabel v-if="labelOptional">({{ $gettext('Optional') }})</optionalLabel></input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
@@ -81,7 +81,9 @@ const InputLabel = styled('div', labelAttrs)`
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   font-weight: 700;
 `
-
+const optionalLabel = styled.span`
+  font-weight: 300;
+`
 const LabelWrapper = styled.div`
   display: inline-grid;
   grid-template-columns: auto auto;
@@ -217,7 +219,8 @@ export default {
     Icon,
     IconWrapper,
     IconContainer,
-    InputErrorWrapper
+    InputErrorWrapper,
+    optionalLabel
   },
   data() {
     return {
@@ -266,6 +269,10 @@ export default {
     label: {
       required: false
     },
+    labelOptional: {
+      required: false,
+      default: false
+    },
     noBorder: {
       required: false,
       default: false

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

@@ -14,7 +14,8 @@
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
           "
           :fontSize="fontSize"
-          >{{ label }}</input-label
+          >{{ label }} <optionalLabel v-if="labelOptional"> ({{ $gettext('Optional') }})</optionalLabel>
+          </input-label
         >
         <info-text
           v-if="infoTextMessage"
@@ -158,6 +159,10 @@ const InputLabel = styled('div', labelAttrs)`
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   font-weight: 700;
 `
+const optionalLabel = styled.span`
+  font-weight: 300;
+
+`
 const inputProps = { selectWidth: String, optionWidth: String }
 const Container = styled('div', inputProps)`
   width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
@@ -193,7 +198,7 @@ const selectButton = styled('div', selectButtonAttrs)`
   box-sizing: border-box;
   border-radius: 4px;
   padding: ${(props) =>
-    props.isSearchBarVisible ? '0 10px 0 0' : '0px 10px 0 15px'};
+    props.isSearchBarVisible ? '0' : '0px 0px 0 15px'};
   text-align: left;
   border-radius: 4px;
   min-height: 36px;
@@ -230,7 +235,6 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
     z-index:${(props) => (props.isActive ? '2' : '1')};
     position:absolute;
     top:5px;
-    padding:10px;
     border:1px solid ${(props) => props.theme.colors.grey4}
     border-radius:4px;
     display: flex;
@@ -283,6 +287,10 @@ export default {
     label: {
       required: false
     },
+    labelOptional: {
+      required: false,
+      default: false
+    },
     infoTextMessage: {
       required: false
     },
@@ -360,6 +368,7 @@ export default {
     Container,
     InputLabel,
     LabelWrapper,
+    optionalLabel,
     InfoText,
     InputWrapper,
     DropdownWrapper,

package/src/components/tables/mainTable/index.vue

@@ -12,8 +12,6 @@
           v-else
           :cellPaddings="cellPaddings"
           :tableCursor="tableCursor"
-          @mouseover="setHovers($event)"
-          @mouseleave="setHovers($event)"
         >
           <slot />
         </table-container>
@@ -89,8 +87,8 @@ const TableContainer = styled('table', containerAttrs)`
   }
 
   tbody {
-    tr, td {
-      &:hover, &.hover {
+    tr {
+      &:hover {
         background-color: ${(props) => props.theme.colors.white};
         cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
 
@@ -380,33 +378,6 @@ export default {
     tableCursor: {
       required: false
     }
-  },
-  methods: {
-    setHovers(event) {
-      if (event.target.tagName !== 'TABLE') {
-        console.log('over', event)
-        let hoveredCell = event.target
-        console.log(hoveredCell.tagName)
-
-        if (hoveredCell.tagName !== 'TD') {
-          let currentParentElement = hoveredCell.parentElement
-          while (currentParentElement.tagName !== 'TR') {
-            console.log(currentParentElement.tagName)
-            if (currentParentElement.tagName === 'TD') hoveredCell = currentParentElement
-            currentParentElement = currentParentElement.parentElement
-          }
-        }
-
-        if (hoveredCell) {
-          const rowChildren = Array.from(hoveredCell.parentElement.children)
-          const rowList = Array.from(document.querySelectorAll('tr'))
-          rowList.forEach((el) => {
-            const cells = Array.from(el.children)
-            cells[rowChildren.indexOf(hoveredCell)].classList.add('hover')
-          })
-        }
-      }
-    }
   }
 }
 </script>