@eturnity/eturnity_reusable_components 8.7.5-EPIC-8593.1 → 8.7.5-EPIC-8593.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.7.5-EPIC-8593.1",
+  "version": "8.7.5-EPIC-8593.3",
   "files": [
     "dist",
     "src"

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

@@ -68,7 +68,17 @@
             <Icon name="current_variant" size="20px" />
           </IconWrapper>
           <IconWrapper v-if="hasError" data-test-id="error_wrapper" size="16px">
-            <Icon cursor="default" name="warning" size="16px" />
+            <InfoText
+              v-if="infoErrorMessage != ''"
+              :align-arrow="infoTextAlign"
+              :app-theme="appTheme"
+              button-type="error"
+              data-test-id="info_text_message"
+              icon-name="warning"
+              :size="fontSize ? fontSize : '16px'"
+              :text="infoErrorMessage"
+            />
+            <Icon v-else cursor="default" name="warning" size="16px" />
           </IconWrapper>
           <IconWrapper
             v-if="iconName && !hasError && inputType !== 'password'"
@@ -148,10 +158,10 @@
   }
   const InputContainer = styled('input', inputProps)`
     border: ${(props) =>
-      props.isError
-        ? '1px solid ' + props.theme.colors.red
-        : props.noBorder
+      props.noBorder
         ? 'none'
+        : props.isError
+        ? '1px solid ' + props.theme.colors.red
         : props.borderColor
         ? props.theme.colors[props.borderColor]
           ? '1px solid ' + props.theme.colors[props.borderColor]
@@ -410,6 +420,11 @@
         default: '',
         type: String,
       },
+      infoErrorMessage: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
     data() {
       return {

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

@@ -45,7 +45,9 @@
         <SelectButton
           ref="select"
           :bg-color="
-            buttonBgColor || colorMode == 'dark'
+            buttonBgColor
+              ? buttonBgColor
+              : colorMode == 'dark'
               ? 'transparentBlack1'
               : colorMode == 'transparent'
               ? 'transparent'
@@ -370,7 +372,7 @@
         ? props.theme.colors.grey5
         : props.theme.colors[props.bgColor]
         ? props.theme.colors[props.bgColor]
-        : props.bgColor};
+        : props.bgColor} !important;
     color: ${(props) =>
       props.colorMode === 'transparent'
         ? props.theme.colors.white

package/src/components/tabsHeader/index.vue

@@ -8,7 +8,11 @@
         :is-active="activeTab === item.id"
         @click="onTabClick({ id: item.id })"
       >
-        <div>{{ item.text }}</div>
+        <NameContainer>
+          <div>{{ item.text }}</div>
+          <DotIcon v-if="item.subText" :is-active="activeTab === item.id" />
+          <SubText v-if="item.subText">{{ item.subText }}</SubText>
+        </NameContainer>
         <RCIcon v-if="item.hasError" name="warning" size="14px" />
       </TabItem>
     </TabsContainer>
@@ -36,6 +40,27 @@
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
 
+  const NameContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  `
+
+  const DotIconAttrs = { isActive: Boolean }
+  const DotIcon = styled('div', DotIconAttrs)`
+    width: 4px;
+    height: 4px;
+    border-radius: 100%;
+    background-color: ${(props) =>
+      props.isActive ? props.theme.colors.purple6 : props.theme.colors.black};
+  `
+
+  const SubText = styled.div`
+    font-size: 12px;
+    color: ${(props) => props.theme.colors.black};
+  `
+
   const PageContainer = styled.div``
 
   const TabsContainer = styled.div`
@@ -67,7 +92,10 @@
     components: {
       PageContainer,
       TabsContainer,
+      NameContainer,
       TabItem,
+      SubText,
+      DotIcon,
       RCIcon,
     },
     props: {

package/src/helpers/toLocaleNumber.js

@@ -0,0 +1,11 @@
+import { langForLocaleString } from './translateLang'
+
+export const toLocaleNumber = (value, digit = 0) => {
+  if (isNaN(value)) {
+    return '-'
+  }
+  return new Intl.NumberFormat(langForLocaleString(), {
+    minimumFractionDigits: digit,
+    maximumFractionDigits: digit,
+  }).format(value)
+}