@eturnity/eturnity_reusable_components 8.13.3-EPDM-14657.2 → 8.13.3-EPDM-14657.3

package/src/components/spinner/index.vue

@@ -43,8 +43,8 @@
     align-items: center;
     justify-items: center;
     position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
-    height: ${(props) => (props.limitedToModal ? '100%' : 'auto')};
-    width: ${(props) => (props.limitedToModal ? '100%' : 'auto')};
+    height: 100%;
+    width: 100%;
   `
 
   const wrapperAttrs = { size: String }

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/tableDropdown/index.vue

@@ -25,7 +25,7 @@
                 item.type === 'template')
             "
           />
-          <TableItem
+          <TemplateItem
             v-if="
               item.type &&
               item.type === 'template' &&
@@ -40,7 +40,7 @@
               :variant="showArchived ? 'cancel' : 'main'"
               @click.stop="onTemplateClick(item.row)"
             />
-          </TableItem>
+          </TemplateItem>
           <TemplateLink
             v-else-if="
               item.type && item.type === 'template' && item.value !== ''
@@ -101,7 +101,7 @@
         <ArrowWrapper :show-archived="showArchived">
           <InfoWrapper v-if="showArchived">
             <InfoText
-              icon-color="red"
+              button-type="error"
               :text="
                 $gettext(`Component has been archived and shouldn't be used`)
               "
@@ -140,10 +140,10 @@
               @keyup.enter="onItemClick(item)"
             >
               <template v-for="(option, idx) in optionsDisplay" :key="idx">
-                <TableItem v-if="option !== 'template'">
+                <DropdownItem v-if="option !== 'template'">
                   {{ !!item[option] ? item[option] : '-' }}
-                </TableItem>
-                <TableItem
+                </DropdownItem>
+                <TemplateItem
                   v-else-if="option === 'template' && item.has_template"
                 >
                   <MainButton
@@ -152,7 +152,7 @@
                     type="secondary"
                     @click.stop="onTemplateClick(item)"
                   />
-                </TableItem>
+                </TemplateItem>
                 <NoTemplate
                   v-else-if="option === 'template' && !item.has_template"
                 >
@@ -219,7 +219,7 @@
 
     .input-placeholder {
       height: 25px;
-      padding-left: 12px;
+      margin-left: -2px;
     }
   `
 
@@ -250,6 +250,12 @@
     padding-left: 15px;
   `
 
+  const TemplateItem = styled.span`
+    padding-left: 15px;
+  `
+
+  const DropdownItem = styled.span``
+
   const containerAttrs = { colSpan: Number, width: String }
   const ComponentContainer = styled('div', containerAttrs)`
     display: contents;
@@ -390,7 +396,7 @@
   const inputContainerAttrs = { hasMessage: Boolean }
   const InputContainer = styled('div', inputContainerAttrs)`
     margin-left: ${(props) => (props.hasMessage ? '10px' : '0')};
-    display: flex;
+    display: block;
     align-items: center;
     justify-content: flex-start;
 
@@ -480,6 +486,8 @@
       InfoText,
       InfoWrapper,
       TableItem,
+      TemplateItem,
+      DropdownItem,
     },
     props: {
       colSpan: {

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

@@ -239,8 +239,6 @@
 
       &.checkbox-header {
         min-width: 40px;
-        display: flex;
-        gap: 10px;
       }
     }
 
@@ -258,6 +256,10 @@
           background-color: ${(props) => props.theme.colors.grey5};
         }
 
+        td:first-of-type {
+          padding-left: 15px !important;
+        }
+
         .text {
           cursor: auto !important;
         }

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

@@ -2,14 +2,7 @@ import App from './App.vue'
 import { createApp } from 'vue'
 import router from './router/dynamicRoutes'
 
-const link = document.createElement('link')
-link.href =
-  'https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&display=swap'
-link.rel = 'stylesheet'
-document.getElementsByTagName('head')[0].appendChild(link)
-
 const app = createApp(App)
 
-app.config.globalProperties.$c = console
 app.use(router)
 app.mount('#app')

package/src/router/dynamicRoutes.js

@@ -1,8 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Test from '@/Test.vue'
 import Toggle from '@/components/inputs/toggle/index.vue'
-import TestChart from '@/TestChart.vue'
-import DemoCharts from '@/DemoCharts.vue'
 
 const routes = [
   {
@@ -15,16 +13,6 @@ const routes = [
     name: 'Toggle',
     component: Toggle,
   },
-  {
-    path: '/test-chart',
-    name: 'TestChart',
-    component: TestChart,
-  },
-  {
-    path: '/demo-charts',
-    name: 'DemoCharts',
-    component: DemoCharts,
-  },
 ]
 
 const router = createRouter({

package/src/DemoCharts.vue

@@ -1,424 +0,0 @@
-<template>
-  <div class="demo-container">
-    <h1>BarChart Component Examples</h1>
-
-    <h2>1. Basic Bar Chart</h2>
-    <BarChart
-      :data="basicData"
-      :value-formatter="kwhFormatter"
-      height="300px"
-      width="800px"
-    />
-
-    <h2>2. Bar Chart with Custom Bar Width</h2>
-    <BarChart
-      :bar-width="80"
-      :data="basicData"
-      :value-formatter="kwhFormatter"
-      height="300px"
-      width="800px"
-    />
-
-    <h2>3. Stacked Bar Chart - 3 Series with Legend</h2>
-    <BarChart
-      :bar-width="80"
-      :data="quarterLabels"
-      :is-legend-shown="true"
-      :series="threeZoneSeries"
-      :value-formatter="kwhFormatter"
-      height="400px"
-      width="800px"
-    />
-
-    <h2>4. Stacked Bar Chart - 6 Series with Multi-Row Legend</h2>
-    <BarChart
-      :bar-width="60"
-      :data="monthLabels"
-      :is-legend-shown="true"
-      :legends-item-per-row="3"
-      :series="tariffZones"
-      :value-formatter="kwhFormatter"
-      height="400px"
-      width="800px"
-    />
-
-    <h2>5. Scrollable Chart with Many Data Points</h2>
-    <BarChart
-      :bar-width="40"
-      :data="dailyData"
-      :is-scrollable="true"
-      :value-formatter="kwhFormatter"
-      height="300px"
-      width="800px"
-    />
-
-    <h2>6. Scrollable Chart with Selection</h2>
-    <BarChart
-      :bar-width="40"
-      :data="dailyData"
-      :is-scrollable="true"
-      :is-selection-enabled="true"
-      :selection-size="5"
-      :value-formatter="kwhFormatter"
-      height="300px"
-      width="800px"
-      @selection-change="handleSelectionChange"
-    />
-
-    <h2>7. Chart with Top Controls & Time Frame Selector</h2>
-    <BarChart
-      :bar-width="70"
-      :data="quarterLabels"
-      :is-legend-shown="true"
-      :selected-split-button="selectedTimeFrame"
-      :series="threeZoneSeries"
-      :split-button-options="timeFrameOptions"
-      :value-formatter="kwhFormatter"
-      chart-controls-position="top"
-      height="350px"
-      width="800px"
-      @select-split-button="handleTimeFrameSelect"
-    />
-
-    <h2>8. Chart with Bottom Controls & Time Frame Selector</h2>
-    <BarChart
-      :bar-width="70"
-      :data="quarterLabels"
-      :is-legend-shown="true"
-      :selected-split-button="selectedTimeFrame"
-      :series="threeZoneSeries"
-      :split-button-options="timeFrameOptions"
-      :value-formatter="kwhFormatter"
-      chart-controls-position="bottom"
-      height="350px"
-      width="800px"
-      @select-split-button="handleTimeFrameSelect"
-    />
-
-    <h2>9. Chart with Custom Tooltip</h2>
-    <BarChart :bar-width="60" :data="basicData" height="300px" width="800px">
-      <template #tooltip="{ item }">
-        <div style="padding: 8px">
-          <div style="font-weight: bold">{{ item.label }}</div>
-          <div>Consumption: {{ kwhFormatter(item.segments[0].value) }}</div>
-          <div>Peak Time: {{ getPeakTime(item.label) }}</div>
-          <div>Efficiency: {{ getEfficiency(item.segments[0].value) }}</div>
-        </div>
-      </template>
-    </BarChart>
-
-    <h2>10. Chart with Bottom Fields</h2>
-    <BarChart
-      :bar-width="60"
-      :data="basicData"
-      :is-bottom-fields-shown="true"
-      :value-formatter="kwhFormatter"
-      height="300px"
-      width="800px"
-      @update-value="handleValueUpdate"
-    />
-
-    <h2>11. Scrollable Chart with Bottom Fields</h2>
-    <BarChart
-      :bar-width="40"
-      :data="monthlyData"
-      :is-bottom-fields-shown="true"
-      :is-scrollable="true"
-      :value-formatter="kwhFormatter"
-      height="300px"
-      width="800px"
-    />
-
-    <h2>12. Stacked Chart with Bottom Fields</h2>
-    <BarChart
-      :bar-width="70"
-      :data="quarterLabels"
-      :is-bottom-fields-shown="true"
-      :is-legend-shown="true"
-      :series="threeZoneSeries"
-      :value-formatter="kwhFormatter"
-      height="400px"
-      width="800px"
-    />
-
-    <h2>13. Scrollable Stacked Chart with Bottom Fields</h2>
-    <BarChart
-      :bar-width="60"
-      :data="monthLabels"
-      :is-bottom-fields-shown="true"
-      :is-legend-shown="true"
-      :is-scrollable="true"
-      :legends-item-per-row="3"
-      :series="tariffZones"
-      :value-formatter="kwhFormatter"
-      height="400px"
-      width="800px"
-    />
-
-    <h2>14. Chart with Selection and Bottom Fields</h2>
-    <BarChart
-      :bar-width="40"
-      :data="monthlyData"
-      :is-bottom-fields-shown="true"
-      :is-scrollable="true"
-      :is-selection-enabled="true"
-      :selection-size="6"
-      :value-formatter="kwhFormatter"
-      height="350px"
-      width="800px"
-      @selection-change="handleSelectionChange"
-    />
-
-    <h2>15. Stacked Chart and Bottom Fields</h2>
-    <BarChart
-      :bar-width="70"
-      :data="quarterLabels"
-      :is-bottom-fields-shown="true"
-      :is-legend-shown="true"
-      :series="threeZoneSeries"
-      :value-formatter="kwhFormatter"
-      height="400px"
-      width="800px"
-      @selection-change="handleSelectionChange"
-    />
-  </div>
-</template>
-
-<script setup>
-  import { ref } from 'vue'
-  import BarChart from './components/barchart/index.vue'
-
-  // Formatters
-  const kwhFormatter = (value) => `${value.toLocaleString()} kWh`
-
-  // Basic data
-  const basicData = [
-    { label: 'Jan', value: 1200 },
-    { label: 'Feb', value: 1800 },
-    { label: 'Mar', value: 2200 },
-    { label: 'Apr', value: 1600 },
-    { label: 'May', value: 2400 },
-    { label: 'Jun', value: 2800 },
-    { label: 'Jul', value: 2200 },
-    { label: 'Aug', value: 1600 },
-    { label: 'Sep', value: 2400 },
-    { label: 'Oct', value: 2800 },
-    { label: 'Nov', value: 2200 },
-    { label: 'Dec', value: 1600 },
-  ]
-
-  // Minimal data with fewer points
-  const minimalData = [
-    { label: 'Q1', value: 3500 },
-    { label: 'Q2', value: 4200 },
-    { label: 'Q3', value: 5100 },
-    { label: 'Q4', value: 4800 },
-  ]
-
-  // Labels for stacked charts
-  const quarterLabels = [
-    { label: 'Q1' },
-    { label: 'Q2' },
-    { label: 'Q3' },
-    { label: 'Q4' },
-  ]
-
-  const monthLabels = [
-    { label: 'Jan' },
-    { label: 'Feb' },
-    { label: 'Mar' },
-    { label: 'Apr' },
-    { label: 'May' },
-    { label: 'Jun' },
-    { label: 'Jul' },
-    { label: 'Aug' },
-    { label: 'Sep' },
-    { label: 'Oct' },
-    { label: 'Nov' },
-    { label: 'Dec' },
-  ]
-
-  const monthlyData = [
-    { label: 'Jan', value: 300 },
-    { label: 'Feb', value: 600 },
-    { label: 'Mar', value: 1000 },
-    { label: 'Apr', value: 1200 },
-    { label: 'May', value: 1400 },
-    { label: 'Jun', value: 1810 },
-    { label: 'Jul', value: 2000 },
-    { label: 'Aug', value: 2200 },
-    { label: 'Sep', value: 2400 },
-    { label: 'Oct', value: 2600 },
-    { label: 'Nov', value: 2800 },
-    { label: 'Dec', value: 3000 },
-    { label: 'Jan 2024', value: 2800 },
-    { label: 'Feb 2024', value: 2600 },
-    { label: 'Mar 2024', value: 2900 },
-    { label: 'Apr 2024', value: 3100 },
-    { label: 'May 2024', value: 2700 },
-    { label: 'Jun 2024', value: 2500 },
-  ]
-
-  // Three zone series data
-  const threeZoneSeries = [
-    {
-      name: 'Peak Hours',
-      data: [
-        { label: 'Q1', value: 800 },
-        { label: 'Q2', value: 1200 },
-        { label: 'Q3', value: 1600 },
-        { label: 'Q4', value: 1400 },
-      ],
-    },
-    {
-      name: 'Mid-Peak',
-      data: [
-        { label: 'Q1', value: 600 },
-        { label: 'Q2', value: 800 },
-        { label: 'Q3', value: 1000 },
-        { label: 'Q4', value: 900 },
-      ],
-    },
-    {
-      name: 'Off-Peak',
-      data: [
-        { label: 'Q1', value: 400 },
-        { label: 'Q2', value: 500 },
-        { label: 'Q3', value: 600 },
-        { label: 'Q4', value: 550 },
-      ],
-    },
-  ]
-
-  // Six zone series data
-  const tariffZones = [
-    {
-      name: 'Residential',
-      data: monthLabels.map(() => ({
-        label: 'Jan',
-        value: Math.floor(Math.random() * 300) + 100,
-      })),
-    },
-    {
-      name: 'Commercial',
-      data: monthLabels.map(() => ({
-        label: 'Jan',
-        value: Math.floor(Math.random() * 400) + 200,
-      })),
-    },
-    {
-      name: 'Industrial',
-      data: monthLabels.map(() => ({
-        label: 'Jan',
-        value: Math.floor(Math.random() * 500) + 300,
-      })),
-    },
-    {
-      name: 'Agricultural',
-      data: monthLabels.map(() => ({
-        label: 'Jan',
-        value: Math.floor(Math.random() * 200) + 100,
-      })),
-    },
-    {
-      name: 'Public',
-      data: monthLabels.map(() => ({
-        label: 'Jan',
-        value: Math.floor(Math.random() * 300) + 150,
-      })),
-    },
-    {
-      name: 'Special',
-      data: monthLabels.map(() => ({
-        label: 'Jan',
-        value: Math.floor(Math.random() * 250) + 100,
-      })),
-    },
-  ].map((zone) => ({
-    ...zone,
-    data: zone.data.map((item, index) => ({
-      ...item,
-      label: monthLabels[index].label,
-    })),
-  }))
-
-  // Daily data for scrollable example
-  const dailyData = Array.from({ length: 31 }, (_, i) => ({
-    label: `Day ${i + 1}`,
-    value: Math.floor(Math.random() * 200) + 50,
-  }))
-
-  // Time frame options
-  const timeFrameOptions = [
-    { label: 'Daily', value: 'daily' },
-    { label: 'Weekly', value: 'weekly' },
-    { label: 'Monthly', value: 'monthly' },
-    { label: 'Yearly', value: 'yearly' },
-  ]
-  const selectedTimeFrame = ref('monthly')
-
-  // View options
-  const viewOptions = [
-    { label: 'Chart', value: 'chart' },
-    { label: 'Table', value: 'table' },
-    { label: 'Combined', value: 'combined' },
-  ]
-  const selectedView = ref('chart')
-
-  // Handlers
-  const handleTimeFrameSelect = (value) => {
-    selectedTimeFrame.value = value
-    console.log(`Time frame changed to: ${value}`)
-  }
-
-  const handleViewSelect = (value) => {
-    selectedView.value = value
-    console.log(`View changed to: ${value}`)
-  }
-
-  const handleSelectionChange = (selection) => {
-    console.log('Selection changed:', selection)
-  }
-
-  const handleValueUpdate = (data) => {
-    console.log('Value updated:', data)
-  }
-
-  // Helper for custom tooltip
-  const getPeakTime = (month) => {
-    const peakTimes = {
-      Jan: '6-8 PM',
-      Feb: '5-7 PM',
-      Mar: '4-6 PM',
-      Apr: '3-5 PM',
-      May: '2-4 PM',
-      Jun: '1-3 PM',
-    }
-    return peakTimes[month] || 'N/A'
-  }
-
-  const getEfficiency = (value) => {
-    if (value < 1500) return 'High Efficiency'
-    if (value < 2500) return 'Medium Efficiency'
-    return 'Low Efficiency'
-  }
-</script>
-
-<style scoped>
-  .demo-container {
-    padding: 20px;
-    font-family: 'Figtree', sans-serif;
-  }
-
-  .demo-container > h2 {
-    margin: 40px 0 20px;
-    color: #333;
-    border-bottom: 1px solid #eee;
-    padding-bottom: 10px;
-  }
-
-  h1 {
-    color: #2c3e50;
-    margin-bottom: 30px;
-  }
-</style>