@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.3 → 7.24.3-EPDM-11320.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.24.3-EPDM-11320.3",
+  "version": "7.24.3-EPDM-11320.4",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -19,17 +19,17 @@
 </template>
 
 <script>
-  // To use:
-  // import MainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
-  // <main-button
-  //   text="Click Me"
-  //   customColor="#ab5348"
-  //   type="secondary" // primary, secondary, cancel
-  //   icon="icon-name" // icon name from icon component
-  //   :isDisabled="true"
-  //   :minWidth="minWidth"
-  //   :data-id="test_data_id"
-  // />
+// To use:
+// import RCMainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
+// <RCMainButton
+//   text="Click Me"
+//   customColor="#ab5348"
+//   type="secondary" // primary, secondary, cancel
+//   icon="icon-name" // icon name from icon component
+//   :isDisabled="true"
+//   :minWidth="minWidth"
+//   :data-id="test_data_id"
+// />
 
   import styled from 'vue3-styled-components'
   import Icon from '../../icon'

package/src/components/filter/filterSettings.vue

@@ -302,17 +302,17 @@
   import theme from '@/assets/theme.js'
   import VueDatePicker from '@vuepic/vue-datepicker'
 
-  const ContainerWrapper = styled.div`
-    position: absolute;
-    margin-top: 4px;
-    background-color: ${(props) => props.theme.colors.white};
-    min-width: 100%;
-    width: max-content;
-    border: 1px solid ${(props) => props.theme.colors.grey4};
-    border-radius: 4px;
-    z-index: 9999;
-    font-size: 13px;
-  `
+const ContainerWrapper = styled.div`
+  position: absolute;
+  margin-top: 4px;
+  background-color: ${(props) => props.theme.colors.white};
+  min-width: 100%;
+  width: max-content;
+  border: 1px solid ${(props) => props.theme.colors.grey4};
+  border-radius: 4px;
+  z-index: 99999;
+  font-size: 13px;
+`
 
   const ColAttrs = { numCols: Number, hasActiveView: Boolean }
   const ColumnWrapper = styled('div', ColAttrs)`

package/src/components/icon/index.vue

@@ -104,12 +104,24 @@
   })`
     animation: ${(props) => props.animation};
     width: 100%;
-    svg {
-      width: 100%;
-      height: 100%;
-      background-color: ${(props) =>
-        props.backgroundColor ? props.backgroundColor : 'transparent'};
-      padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
+    height: 100%;
+    background-color: ${(props) =>
+      props.backgroundColor ? props.backgroundColor : 'transparent'};
+    padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
+  }
+  svg path {
+    ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
+  }
+  &:hover svg path {
+    ${({ theme, hoveredColor }) =>
+      hoveredColor && `fill: ${theme.colors[hoveredColor] || hoveredColor};`}
+  }
+  &:hover + div {
+    background-color: ${(props) => props.hoveredColor};
+  }
+  @keyframes fade {
+    50% {
+      opacity: 0.3;
     }
     svg path {
       ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}

package/src/components/infoCard/index.vue

@@ -1,6 +1,6 @@
 <template>
   <InfoContainer>
-    <RCIcon name="info" size="24px" />
+    <RCIcon name="info" size="24px" :color="color" />
     <TextContainer>
       <slot></slot>
     </TextContainer>
@@ -31,5 +31,10 @@
       InfoContainer,
       TextContainer,
     },
+    props: {
+      color: {
+        required: false
+      }
+    }
   }
 </script>

package/src/components/infoText/index.vue

@@ -6,16 +6,21 @@
         @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
         @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
       >
-        <RCIcon :color="iconColor" cursor="pointer" name="info" :size="size" />
+        <IconComponent
+          :color="iconColor"
+          cursor="pointer"
+          name="info"
+          :size="size"
+        />
       </IconImg>
       <TextOverlay
         v-if="showInfo"
         :align-arrow="alignArrow"
         :half-computed-text-info-width="halfComputedTextInfoWidth"
         :icon-size="size"
+        :max-width="maxWidth"
         :width="width"
-      >
-        <slot></slot>
+        ><slot></slot>
         <span v-html="text"></span>
       </TextOverlay>
     </IconWrapper>
@@ -32,7 +37,7 @@
   // />
   import theme from '../../assets/theme.js'
   import styled from 'vue3-styled-components'
-  import RCIcon from '../icon'
+  import IconComponent from '../icon'
 
   const textAttrs = {
     iconSize: String,
@@ -53,7 +58,7 @@
     background: ${(props) => props.theme.colors.black};
     padding: 10px;
     width: ${(props) => props.width};
-    max-width: 400px;
+    max-width: ${(props) => props.maxWidth};
     font-size: 13px;
     font-weight: 400;
     line-height: normal;
@@ -104,7 +109,7 @@
       TextOverlay,
       ComponentWrapper,
       IconImg,
-      RCIcon,
+      IconComponent,
     },
     props: {
       text: {
@@ -126,6 +131,10 @@
         required: false,
         default: '165px',
       },
+      maxWidth: {
+        type: String,
+        default: '400px',
+      },
     },
     data() {
       return {

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

@@ -1,5 +1,5 @@
 <template>
-  <ComponentWrapper>
+  <ComponentWrapper @click.stop>
     <Container
       :background-color="backgroundColor"
       :check-color="checkColor"

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

@@ -61,16 +61,38 @@
         v-if="unitName && showLinearUnitName && !hasSlot"
         :has-length="!!textInput.length"
         :is-error="isError"
+        >{{ unitName }}</UnitContainer
+      >
+      <IconWrapper
+        v-if="isError && !showLinearUnitName"
+        :margin-right="showSelect ? selectWidth : 0"
+        size="16px"
       >
-        {{ unitName }}
-      </UnitContainer>
-      <IconWrapper v-if="isError && !showLinearUnitName" size="16px">
         <Icon cursor="default" name="warning" size="16px" />
       </IconWrapper>
+      <SelectWrapper v-if="showSelect">
+        <Divider />
+        <Select
+          :select-width="`${selectWidth}px`"
+          :show-border="false"
+          @input-change="$emit('select-change', $event)"
+        >
+          <template #selector>
+            <SelectText>{{ getSelectValue }}</SelectText>
+          </template>
+          <template #dropdown>
+            <Option
+              v-for="item in selectOptions"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </Option>
+          </template>
+        </Select>
+      </SelectWrapper>
     </InputWrapper>
-    <ErrorMessage v-if="isError">
-      {{ errorMessage }}
-    </ErrorMessage>
+    <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
   </Container>
 </template>
 
@@ -110,6 +132,8 @@
   } from '../../../helpers/numberConverter'
   import InfoText from '../../infoText'
   import ErrorMessage from '../../errorMessage'
+  import Select from '../select'
+  import Option from '../select/option'
   import warningIcon from '../../../assets/icons/error_icon.png'
   import Icon from '../../icon'
 
@@ -285,16 +309,35 @@
     font-weight: 700;
   `
 
-  const IconAttrs = { size: String }
+  const IconAttrs = { size: String, marginRight: Number }
   const IconWrapper = styled('div', IconAttrs)`
     position: absolute;
     top: 0;
     bottom: 0;
     margin: auto;
-    right: 5px;
+    right: ${(props) => props.marginRight + 10}px;
     height: ${(props) => (props.size ? props.size : 'auto')};
   `
 
+  const SelectText = styled.div`
+    font-size: 13px;
+  `
+
+  const SelectWrapper = styled.div`
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    display: flex;
+    height: 100%;
+  `
+
+  const Divider = styled.div`
+    margin-top: 6px;
+    height: calc(100% - 16px);
+    width: 1px;
+    background-color: ${({ theme }) => theme.colors.grey4};
+  `
+
   export default {
     name: 'InputNumber',
     components: {
@@ -310,6 +353,11 @@
       Icon,
       SlotContainer,
       IconWrapper,
+      Select,
+      Option,
+      SelectWrapper,
+      SelectText,
+      Divider,
     },
     inheritAttrs: false,
     props: {
@@ -447,6 +495,22 @@
         required: false,
         default: '',
       },
+      showSelect: {
+        type: Boolean,
+        default: false,
+      },
+      selectWidth: {
+        type: Number,
+        default: 70,
+      },
+      selectOptions: {
+        type: Array,
+        default: () => [],
+      },
+      selectValue: {
+        type: [String, Number],
+        default: null,
+      },
     },
     data() {
       return {
@@ -468,6 +532,13 @@
       hasLabelSlot() {
         return !!this.$slots.label
       },
+      getSelectValue() {
+        const item = this.selectOptions.find(
+          ({ value }) => value === this.selectValue
+        )
+
+        return item ? item.label : '-'
+      },
     },
     watch: {
       focus(value) {

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

@@ -10,23 +10,31 @@
       :has-label="!!label && label.length > 0"
       :no-relative="noRelative"
     >
-      <LabelWrapper v-if="label" :data-id="labelDataId">
+      <LabelWrapper
+        v-if="label"
+        :data-id="labelDataId"
+        :info-text-message="!!infoTextMessage"
+      >
         <InputLabel
           :font-color="
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
           "
           :font-size="fontSize"
-        >
-          {{ label }}
+          >{{ label }}
           <OptionalLabel v-if="labelOptional">
-            ({{ $gettext('Optional') }})
-          </OptionalLabel>
+            ({{ $gettext('Optional') }})</OptionalLabel
+          >
         </InputLabel>
         <InfoText
-          v-if="infoTextMessage"
+          v-if="infoTextMessage || !!$slots.infoText"
+          :align-arrow="infoTextAlignArrow"
+          :max-width="infoTextWidth"
           :size="infoTextSize"
           :text="infoTextMessage"
-        />
+          :width="infoTextWidth"
+        >
+          <slot name="infoText"></slot>
+        </InfoText>
       </LabelWrapper>
       <SelectButtonWrapper :disabled="disabled">
         <SelectButton
@@ -85,7 +93,7 @@
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
           <Caret class="caret_dropdown" @click.stop="toggleCaretDropdown">
-            <RCIcon
+            <Icon
               v-if="isDropdownOpen"
               :color="
                 caretColor || colorMode == 'dark'
@@ -95,7 +103,7 @@
               name="arrow_up"
               size="12px"
             />
-            <RCIcon
+            <Icon
               v-else
               :color="
                 caretColor || colorMode == 'dark'
@@ -170,7 +178,7 @@
   import { Teleport } from 'vue'
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
-  import RCIcon from '../../icon'
+  import Icon from '../../icon'
   import InputText from '../inputText'
   import DraggableInputHandle from '../../draggableInputHandle'
 
@@ -232,9 +240,12 @@
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
     display: inline-block;
   `
-  const LabelWrapper = styled.div`
+
+  const LabelWrapperAttrs = { infoTextMessage: Boolean }
+  const LabelWrapper = styled('div', LabelWrapperAttrs)`
     display: inline-grid;
-    grid-template-columns: auto auto;
+    grid-template-columns: ${(props) =>
+      props.infoTextMessage ? 'auto auto' : 'auto'};
     grid-gap: 12px;
     align-items: center;
     justify-content: start;
@@ -367,7 +378,7 @@
     }
     font-size: ${(props) => props.fontSize};
   `
-  SelectDropdown.emits = ['option-hovered', 'option-selected']
+  selectDropdown.emits = ['option-hovered', 'option-selected']
   const DropdownAttrs = { noRelative: Boolean }
   const DropdownWrapper = styled('div', DropdownAttrs)`
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
@@ -411,7 +422,7 @@
       InfoText,
       InputWrapper,
       DropdownWrapper,
-      RCIcon,
+      Icon,
       Caret,
       Selector,
       InputText,
@@ -542,6 +553,7 @@
         default: '',
       },
       hasSelectButtonPadding: {
+        required: false,
         type: Boolean,
         default: true,
       },
@@ -568,6 +580,14 @@
         type: String,
         default: DROPDOWN_MENU_POSITIONS.Automatic, // options: ['automatic', bottom]
       },
+      infoTextWidth: {
+        type: String,
+        required: false,
+      },
+      infoTextAlignArrow: {
+        type: String,
+        required: false,
+      },
     },
 
     data() {

package/src/components/pageTitle/index.vue

@@ -31,7 +31,7 @@
   const TitleText = styled('span', titleAttrs)`
     color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
     font-weight: bold;
-    font-size: ${(props) => (props.fontSize ? props.fontSize : '18px')};
+    font-size: ${(props) => (props.fontSize ? props.fontSize : '20px')};
     text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
   `
 

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

@@ -18,6 +18,8 @@
           v-else
           :cell-paddings="cellPaddings"
           :table-cursor="tableCursor"
+          @mouseleave="hasAimHover ? removeHoverClass() : null"
+          @mouseover="hasAimHover ? setHovers($event) : null"
         >
           <slot></slot>
         </TableContainer>
@@ -122,7 +124,8 @@
 
     tbody {
       tr {
-        &:hover {
+        &:hover,
+        td.hovered-column {
           background-color: ${(props) => props.theme.colors.white};
           cursor: ${(props) =>
             props.tableCursor ? props.tableCursor : 'auto'};
@@ -410,6 +413,10 @@
         required: false,
         default: null,
       },
+      hasAimHover: {
+        required: false,
+        default: false,
+      },
       tableCursor: {
         required: false,
       },
@@ -423,12 +430,64 @@
     mounted() {
       this.observeTableHeight()
     },
-    beforeDestroy() {
+    beforeUnmount() {
       if (this.resizeObserver) {
         this.resizeObserver.disconnect()
       }
     },
     methods: {
+      findParentElementByTagName(element, tagName) {
+        let currentParentElement = element.parentElement
+        while (
+          currentParentElement &&
+          currentParentElement.tagName !== tagName
+        ) {
+          currentParentElement = currentParentElement.parentElement
+        }
+
+        return currentParentElement && currentParentElement.tagName === tagName
+          ? currentParentElement
+          : null
+      },
+      removeHoverClass() {
+        const hoveredItems = document.querySelectorAll('.hovered-column')
+        hoveredItems.forEach((el) => {
+          el.classList.remove('hovered-column')
+        })
+      },
+      setHovers(event) {
+        this.removeHoverClass()
+        if (
+          event.target.tagName !== 'TABLE' &&
+          event.target.tagName !== 'TH' &&
+          event.target.tagName !== 'TR'
+        ) {
+          let hoveredCell = event.target
+
+          if (hoveredCell.tagName !== 'TD') {
+            // Looking for hovered TD element
+            hoveredCell = this.findParentElementByTagName(hoveredCell, 'TD')
+          }
+
+          if (hoveredCell) {
+            const rowChildren = Array.from(hoveredCell.parentElement.children)
+            const hoveredCellIndex = rowChildren.indexOf(hoveredCell)
+            const currentTable = this.findParentElementByTagName(
+              hoveredCell,
+              'TABLE'
+            )
+            if (currentTable) {
+              const rowList = Array.from(currentTable.querySelectorAll('tr'))
+              rowList.forEach((el) => {
+                const cells = Array.from(el.children)
+                if (cells[hoveredCellIndex]) {
+                  cells[hoveredCellIndex].classList.add('hovered-column')
+                }
+              })
+            }
+          }
+        }
+      },
       observeTableHeight() {
         if (!this.$refs.tableRef) return
 

package/src/components/tabsHeader/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <PageContainer>
+    <TabsContainer>
+      <TabItem
+        v-for="item in tabsData"
+        :key="item.id"
+        :is-active="activeTab === item.id"
+        @click="onTabClick({ id: item.id })"
+      >
+        {{ item.text }}
+      </TabItem>
+    </TabsContainer>
+  </PageContainer>
+</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'
+
+const PageContainer = styled.div``
+
+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) =>
+      props.isActive
+        ? props.theme.colors.brightBlue
+        : props.theme.colors.grey4};
+  flex-grow: 1;
+`
+
+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)
+    }
+  }
+}
+</script>