@eturnity/eturnity_reusable_components 8.19.8-EPDM-14690.4 → 8.19.8-EPDM-11600.11

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

@@ -30,61 +30,7 @@
       />
     </LabelWrapper>
     <InputWrapper>
-      <InputInfoText
-        v-if="!!inputInfoText"
-        info-position="bottom"
-        :text="inputInfoText"
-      >
-        <template #trigger>
-          <InputContainer
-            v-bind="$attrs"
-            ref="inputField1"
-            :align-items="alignItems"
-            :background-color="
-              colorMode === 'transparent' ? 'transparent' : backgroundColor
-            "
-            :border-color="
-              colorMode === 'transparent' && !borderColor
-                ? 'white'
-                : borderColor
-            "
-            :color-mode="colorMode"
-            :data-id="inputDataId"
-            :data-qa-id="dataQaId"
-            :disabled="disabled && !isDisabledStyledOnly"
-            :font-color="colorMode === 'transparent' ? 'white' : fontColor"
-            :font-size="fontSize"
-            :has-label-slot="hasLabelSlot"
-            :has-slot="hasSlot"
-            :has-unit="unitName && !!unitName.length"
-            :input-height="inputHeight"
-            :is-border-error-only="isBorderErrorOnly"
-            :is-disabled="disabled"
-            :is-error="isError"
-            :is-info-border="isInfoBorder"
-            :is-interactive="isInteractive"
-            :min-width="minWidth"
-            :no-border="noBorder"
-            :placeholder="displayedPlaceholder"
-            :read-only="isReadOnly"
-            :readonly="isReadOnly"
-            :show-arrow-controls="showArrowControls"
-            :show-linear-unit-name="showLinearUnitName"
-            :slot-size="slotSize"
-            :text-align="textAlign"
-            :value="formatWithCurrency(value)"
-            @blur="onInputBlur($event)"
-            @focus="focusInput()"
-            @input="onInput($event)"
-            @keydown.down="decrementValue"
-            @keydown.up="incrementValue"
-            @keyup.enter="onEnterPress"
-          />
-        </template>
-      </InputInfoText>
-
       <InputContainer
-        v-else
         v-bind="$attrs"
         ref="inputField1"
         :align-items="alignItems"
@@ -97,23 +43,19 @@
         :color-mode="colorMode"
         :data-id="inputDataId"
         :data-qa-id="dataQaId"
-        :disabled="disabled && !isDisabledStyledOnly"
         :font-color="colorMode === 'transparent' ? 'white' : fontColor"
         :font-size="fontSize"
         :has-label-slot="hasLabelSlot"
         :has-slot="hasSlot"
         :has-unit="unitName && !!unitName.length"
         :input-height="inputHeight"
-        :is-border-error-only="isBorderErrorOnly"
         :is-disabled="disabled"
         :is-error="isError"
-        :is-info-border="isInfoBorder"
         :is-interactive="isInteractive"
         :min-width="minWidth"
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
         :read-only="isReadOnly"
-        :readonly="isReadOnly"
         :show-arrow-controls="showArrowControls"
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
@@ -126,7 +68,6 @@
         @keydown.up="incrementValue"
         @keyup.enter="onEnterPress"
       />
-
       <SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
         <slot></slot>
       </SlotContainer>
@@ -138,7 +79,7 @@
         >{{ unitName }}</UnitContainer
       >
       <IconWrapper
-        v-if="isError && !showLinearUnitName && !isBorderErrorOnly"
+        v-if="isError && !showLinearUnitName"
         :margin-right="showSelect ? selectWidth : 0"
         size="16px"
       >
@@ -192,9 +133,7 @@
         </ArrowButton>
       </ArrowControls>
     </InputWrapper>
-    <ErrorMessage v-if="isError && errorMessage">{{
-      errorMessage
-    }}</ErrorMessage>
+    <ErrorMessage v-if="isError && errorMessage">{{ errorMessage }}</ErrorMessage>
   </Container>
 </template>
 
@@ -265,8 +204,6 @@
     colorMode: String,
     showArrowControls: Boolean,
     readOnly: Boolean,
-    isBorderErrorOnly: Boolean,
-    isInfoBorder: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -279,9 +216,7 @@
 
   const InputContainer = styled('input', inputProps)`
     border: ${(props) =>
-      props.isInfoBorder
-        ? '1px solid ' + props.theme.semanticColors.blue[500]
-        : props.isError
+      props.isError
         ? '1px solid ' + props.theme.colors.red
         : props.noBorder
         ? 'none'
@@ -300,17 +235,16 @@
       showLinearUnitName,
       colorMode,
       showArrowControls,
-      isBorderErrorOnly,
     }) =>
       showArrowControls
         ? '40px'
         : colorMode === 'transparent'
         ? '0'
         : slotSize
-        ? isError && !showLinearUnitName && !isBorderErrorOnly
+        ? isError && !showLinearUnitName
           ? 'calc(' + slotSize + ' + 24px)'
           : 'calc(' + slotSize + ' + 10px)'
-        : isError && !showLinearUnitName && !isBorderErrorOnly
+        : isError && !showLinearUnitName
         ? '24px'
         : '5px'};
     border-radius: ${(props) =>
@@ -522,10 +456,6 @@
     background-color: ${({ theme }) => theme.colors.grey4};
   `
 
-  const InputInfoText = styled(InfoText)`
-    width: 100%;
-  `
-
   export default {
     name: 'InputNumber',
     components: {
@@ -549,7 +479,6 @@
       ArrowControls,
       ArrowButton,
       ArrowDivider,
-      InputInfoText,
     },
     inheritAttrs: false,
     props: {
@@ -728,12 +657,18 @@
         required: false,
         default: '',
       },
+      labelDataTestId: {
+        type: String,
+        required: false,
+        default: '',
+      },
       inputDataId: {
         type: String,
         required: false,
         default: '',
       },
       dataQaId: {
+        type: String,
         required: false,
         default: '',
       },
@@ -769,22 +704,6 @@
         type: Boolean,
         default: false,
       },
-      isBorderErrorOnly: {
-        type: Boolean,
-        default: false,
-      },
-      isInfoBorder: {
-        type: Boolean,
-        default: false,
-      },
-      inputInfoText: {
-        type: String,
-        default: '',
-      },
-      isDisabledStyledOnly: {
-        type: Boolean,
-        default: false,
-      },
     },
     data() {
       return {

package/src/components/pageSubtitle/index.vue

@@ -5,7 +5,8 @@
     :has-info-text="!!infoText"
     :margin-bottom="marginBottom"
   >
-    <span data-test-id="page_subtitle_text">
+    <span v-if="containsHtml" data-test-id="page_subtitle_text" v-html="text"></span>
+    <span v-else data-test-id="page_subtitle_text">
       {{ text }}
     </span>
     <InfoText
@@ -58,6 +59,11 @@
         required: true,
         type: String,
       },
+      containsHtml: {
+        required: false,
+        type: Boolean,
+        default: false,
+      },
       color: {
         required: false,
         type: String,

package/src/components/pageTitle/index.vue

@@ -46,6 +46,7 @@
     color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
     font-weight: 600;
     font-size: ${(props) => (props.fontSize ? props.fontSize : '20px')};
+    text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
   `
 
   export default {

package/src/DemoChart.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>