@eturnity/eturnity_reusable_components 7.24.3 → 7.30.1

package/package.json

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

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

@@ -20,8 +20,8 @@
 
 <script>
 // To use:
-// import MainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
-// <main-button
+// import RCMainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
+// <RCMainButton
 //   text="Click Me"
 //   customColor="#ab5348"
 //   type="secondary" // primary, secondary, cancel

package/src/components/filter/filterSettings.vue

@@ -304,7 +304,7 @@ const ContainerWrapper = styled.div`
   width: max-content;
   border: 1px solid ${(props) => props.theme.colors.grey4};
   border-radius: 4px;
-  z-index: 9999;
+  z-index: 99999;
   font-size: 13px;
 `
 

package/src/components/icon/index.vue

@@ -114,8 +114,9 @@ const IconImage = styled('div', {
   svg path {
     ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
   }
-  &:hover > svg path {
-    ${props.hoveredColor && `fill: ${props.hoveredColor};`}
+  &:hover svg path {
+    ${({ theme, hoveredColor }) =>
+      hoveredColor && `fill: ${theme.colors[hoveredColor] || hoveredColor};`}
   }
   &:hover + div {
     background-color: ${(props) => props.hoveredColor};

package/src/components/infoCard/index.vue

@@ -1,6 +1,6 @@
 <template>
   <info-container>
-    <icon name="info" size="24px" />
+    <icon name="info" size="24px" :color="color" />
     <text-container>
       <slot />
     </text-container>
@@ -8,11 +8,13 @@
 </template>
 
 <script>
+// import InfoCard from '@eturnity/eturnity_reusable_components/src/components/infoCard'
 import styled from 'vue3-styled-components'
 import Icon from '../icon'
 
 const InfoContainer = styled.div`
   display: flex;
+  align-items: center;
   gap: 15px;
   padding: 20px;
   border: 1px dashed ${(props) => props.theme.colors.grey4};
@@ -30,6 +32,11 @@ export default {
     Icon,
     InfoContainer,
     TextContainer
+  },
+  props: {
+    color: {
+      required: false
+    }
   }
 }
 </script>

package/src/components/infoText/index.vue

@@ -14,6 +14,7 @@
         :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
         :alignArrow="alignArrow"
         :iconSize="size"
+        :maxWidth="maxWidth"
         ><slot />
         <span v-html="text"></span>
       </text-overlay>
@@ -52,7 +53,7 @@ const TextOverlay = styled('div', textAttrs)`
   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;
@@ -124,6 +125,10 @@ export default {
     width: {
       required: false,
       default: '165px'
+    },
+    maxWidth: {
+      type: String,
+      default: '400px'
     }
   },
   methods: {

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

@@ -1,5 +1,5 @@
 <template>
-  <component-wrapper>
+  <component-wrapper @click.stop>
     <container
       :checkColor="checkColor"
       :size="size"

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

@@ -63,9 +63,34 @@
         :isError="isError"
         >{{ unitName }}</unit-container
       >
-      <icon-wrapper v-if="isError && !showLinearUnitName" size="16px">
+      <icon-wrapper
+        v-if="isError && !showLinearUnitName"
+        size="16px"
+        :marginRight="showSelect ? selectWidth : 0"
+      >
         <icon name="warning" size="16px" cursor="default" />
       </icon-wrapper>
+      <select-wrapper v-if="showSelect">
+        <divider />
+        <Select
+          :showBorder="false"
+          :selectWidth="`${selectWidth}px`"
+          @input-change="$emit('select-change', $event)"
+        >
+          <template #selector>
+            <select-text>{{ getSelectValue }}</select-text>
+          </template>
+          <template #dropdown>
+            <Option
+              v-for="item in selectOptions"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </Option>
+          </template>
+        </Select>
+      </select-wrapper>
     </input-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
@@ -107,6 +132,8 @@ import {
 } 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'
 
@@ -282,16 +309,35 @@ const LabelText = styled('div', inputProps)`
   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: 'input-number',
   components: {
@@ -306,7 +352,12 @@ export default {
     InfoText,
     Icon,
     SlotContainer,
-    IconWrapper
+    IconWrapper,
+    Select,
+    Option,
+    SelectWrapper,
+    SelectText,
+    Divider
   },
   inheritAttrs: false,
   data() {
@@ -450,6 +501,22 @@ export default {
     inputDataId: {
       required: false,
       default: ''
+    },
+    showSelect: {
+      type: Boolean,
+      default: false
+    },
+    selectWidth: {
+      type: Number,
+      default: 70
+    },
+    selectOptions: {
+      type: Array,
+      default: () => []
+    },
+    selectValue: {
+      type: [String, Number],
+      default: null
     }
   },
   computed: {
@@ -464,6 +531,13 @@ export default {
     },
     hasLabelSlot() {
       return !!this.$slots.label
+    },
+    getSelectValue() {
+      const item = this.selectOptions.find(
+        ({ value }) => value === this.selectValue
+      )
+
+      return item ? item.label : '-'
     }
   },
   methods: {

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

@@ -10,7 +10,11 @@
       :alignItems="alignItems"
       :noRelative="noRelative"
     >
-      <label-wrapper v-if="label" :data-id="labelDataId">
+      <label-wrapper
+        v-if="label"
+        :data-id="labelDataId"
+        :infoTextMessage="!!infoTextMessage"
+      >
         <input-label
           :fontColor="
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
@@ -22,10 +26,15 @@
           >
         </input-label>
         <info-text
-          v-if="infoTextMessage"
+          v-if="infoTextMessage || !!this.$slots.infoText"
           :text="infoTextMessage"
           :size="infoTextSize"
-        />
+          :alignArrow="infoTextAlignArrow"
+          :width="infoTextWidth"
+          :max-width="infoTextWidth"
+        >
+          <slot name="infoText" />
+        </info-text>
       </label-wrapper>
       <select-button-wrapper :disabled="disabled">
         <selectButton
@@ -44,7 +53,7 @@
           "
           :fontSize="fontSize"
           :hasError="hasError"
-          :hasNoPadding="isSearchBarVisible || !hasSelectButtonPadding"
+          :hasNoPadding="hasNoPadding"
           :disabled="disabled"
           @keydown="onKeyDown"
           :showBorder="showBorder"
@@ -153,7 +162,7 @@
 //     alignItems="vertical"
 //     label-data-id="test-label-data-id"
 //     data-id="test-data-id"
-//     :hasSelectButtonPadding="false"
+//     :hasNoPadding="true"
 //     >
 //     <template #selector="{selectedValue}">
 //     value selected: {{selectedValue}}
@@ -231,9 +240,12 @@ const Container = styled('div', inputProps)`
   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;
@@ -521,10 +533,6 @@ export default {
       type: String,
       default: ''
     },
-    hasSelectButtonPadding: {
-      type: Boolean,
-      default: true
-    },
     isDraggable: {
       type: Boolean,
       default: false
@@ -547,6 +555,19 @@ export default {
     dropdownMenuPosition: {
       type: String,
       default: DROPDOWN_MENU_POSITIONS.Automatic // options: ['automatic', bottom]
+    },
+    hasNoPadding: {
+      required: false,
+      default: false,
+      type: Boolean
+    },
+    infoTextWidth: {
+      type: String,
+      required: false
+    },
+    infoTextAlignArrow: {
+      type: String,
+      required: false
     }
   },
 

package/src/components/pageTitle/index.vue

@@ -31,7 +31,7 @@ const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
 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/spinner/index.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-// import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
+// import RCSpinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 // <spinner size="30px" />
 import styled from 'vue3-styled-components'
 import SpinnerSvg from '../../assets/icons/black_spinner.svg?component'

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

@@ -18,6 +18,8 @@
           v-else
           :cellPaddings="cellPaddings"
           :tableCursor="tableCursor"
+          @mouseover="hasAimHover ? setHovers($event) : null"
+          @mouseleave="hasAimHover ? removeHoverClass : null"
         >
           <slot />
         </table-container>
@@ -122,7 +124,7 @@ const TableContainer = styled('table', containerAttrs)`
 
   tbody {
     tr {
-      &:hover {
+      &:hover, td.hovered-column {
         background-color: ${(props) => props.theme.colors.white};
         cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
 
@@ -406,6 +408,10 @@ export default {
       required: false,
       default: null
     },
+    hasAimHover: {
+      required: false,
+      default: false
+    },
     tableCursor: {
       required: false
     }
@@ -425,6 +431,46 @@ export default {
     }
   },
   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>