@eturnity/eturnity_reusable_components 8.7.5-EPIC-8593.2 → 8.7.5-EPIC-8593.4

package/src/components/pageSubtitle/PageSubtitle.stories.js

@@ -16,7 +16,6 @@ export default {
       description: 'Text for tooltip',
     },
   },
-  tags: ['autodocs'],
 }
 
 // To use:

package/src/components/spinnerGif/index.vue

@@ -1,7 +1,7 @@
 <template>
   <SpinnerContainer v-if="fullWidth" data-test-id="spinner_full_container">
     <Container>
-      <SpinnerWrapper data-test-id="spinner_full_wrapper">
+      <SpinnerWrapper data-test-id="spinner_full_wrapper" :size="size">
         <img
           :class="{ white: isWhite }"
           data-test-id="spinner_full_icon"
@@ -16,7 +16,7 @@
     data-test-id="spinner_container"
     :limited-to-modal="limitedToModal"
   >
-    <SpinnerWrapper data-test-id="spinner_wrapper">
+    <SpinnerWrapper data-test-id="spinner_wrapper" :size="size">
       <img
         :class="{ white: isWhite }"
         data-test-id="spinner_full_icon"
@@ -55,7 +55,7 @@
     width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
   `
 
-  const SpinnerWrapper = styled.div`
+  const SpinnerWrapper = styled('div', { size: String })`
     width: ${(props) => (props.size ? props.size : '60px')};
     height: auto;
 

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/dateTimeFormatting.js

@@ -0,0 +1,51 @@
+// functions for standard date and time formatting
+
+// e.g. 13.12.2024
+export const toLocaleDate = ({
+  locale = localStorage.getItem('lang'),
+  value,
+}) => {
+  const localeLC = locale.toLowerCase()
+  const options = {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+  }
+
+  return new Intl.DateTimeFormat(localeLC, options).format(Date.parse(value))
+}
+
+// e.g. 31 December 2024
+export const toLocaleDateLong = ({
+  locale = localStorage.getItem('lang'),
+  value,
+}) => {
+  const localeLC = locale.toLowerCase()
+  const options = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }
+
+  return new Intl.DateTimeFormat(localeLC, options).format(Date.parse(value))
+}
+
+// e.g. 08:45
+export const toLocaleTime = ({
+  locale = localStorage.getItem('lang'),
+  value,
+}) => {
+  const nonDefaultFormatting = {
+    'es-es': { hour: '2-digit' },
+    'cs-es': { hour: '2-digit' },
+  }
+
+  const localeLC = locale.toLowerCase()
+  const options = {
+    hour: 'numeric',
+    minute: 'numeric',
+    ...nonDefaultFormatting[localeLC],
+  }
+
+  return new Intl.DateTimeFormat(localeLC, options).format(Date.parse(value))
+}

package/src/helpers/isObjectEqual.js

@@ -0,0 +1,22 @@
+import { toRaw } from 'vue'
+
+export default function isObjectEqual(obj1, obj2) {
+  obj1 = toRaw(obj1)
+  obj2 = toRaw(obj2)
+  if (obj1 === obj2) return true
+  if (obj1 === null || obj2 === null) return false
+  if (typeof obj1 !== 'object' || typeof obj2 !== 'object') return false
+
+  const isArray1 = Array.isArray(obj1)
+  const isArray2 = Array.isArray(obj2)
+  if (isArray1 !== isArray2) return false
+
+  const keys1 = Object.keys(obj1)
+  if (keys1.length !== Object.keys(obj2).length) return false
+
+  return keys1.every(
+    (key) =>
+      Object.prototype.hasOwnProperty.call(obj2, key) &&
+      isObjectEqual(obj1[key], obj2[key])
+  )
+}

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)
+}

package/src/main.js

@@ -3,5 +3,6 @@ import { createApp } from 'vue'
 import router from './router/dynamicRoutes'
 
 const app = createApp(App)
+
 app.use(router)
 app.mount('#app')