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

package/dist/main.es92.js

@@ -1,23 +0,0 @@
-import "./main.es3.js";
-import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
-const _hoisted_1 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "6",
-  height: "16",
-  fill: "none"
-};
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M21.75 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 20a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
-}, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
-}
-const context_menu = { render };
-export {
-  context_menu as default,
-  render
-};

package/dist/main.es93.js

@@ -1,23 +0,0 @@
-import "./main.es3.js";
-import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
-const _hoisted_1 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "6",
-  fill: "none"
-};
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#B2B9C5",
-  d: "M16.5 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M27 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
-}, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
-}
-const context_menu_tabs = { render };
-export {
-  context_menu_tabs as default,
-  render
-};

package/dist/main.es94.js

@@ -1,24 +0,0 @@
-import "./main.es3.js";
-import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
-const _hoisted_1 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "800",
-  height: "800",
-  viewBox: "0 0 512 512"
-};
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "none",
-  "fill-rule": "evenodd",
-  d: "M426.667 128v320h-256V128zM384 170.667H213.333v234.666H384zm-64-128v42.666H128v256H85.333V42.667z"
-}, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
-}
-const copy = { render };
-export {
-  copy as default,
-  render
-};

package/dist/main.es95.js

@@ -1,28 +0,0 @@
-import "./main.es3.js";
-import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
-const _hoisted_1 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "10",
-  height: "10",
-  fill: "none"
-};
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#000",
-  d: "m9.879 8.479-1.4 1.4L.12 1.52l1.4-1.4L5.7 4.3z"
-}, null, -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#000",
-  d: "m1.521 9.879-1.4-1.4L8.48.12l1.4 1.4z"
-}, null, -1);
-const _hoisted_4 = [
-  _hoisted_2,
-  _hoisted_3
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
-}
-const cross = { render };
-export {
-  cross as default,
-  render
-};

package/dist/main.es96.js

@@ -1,28 +0,0 @@
-import "./main.es3.js";
-import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
-const _hoisted_1 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "20",
-  height: "14",
-  fill: "none"
-};
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M20 16c2.829 0 4.976 1.278 6.69 4.003C24.975 22.724 22.827 24 20 24s-4.975-1.276-6.69-3.997C15.024 17.278 17.171 16 20 16m0-2c-4.273 0-7.094 2.43-9 6.005C12.906 23.57 15.727 26 20 26s7.094-2.43 9-5.995C27.094 16.43 24.273 14 20 14"
-}, null, -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M20 22a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
-}, null, -1);
-const _hoisted_4 = [
-  _hoisted_2,
-  _hoisted_3
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
-}
-const current_variant = { render };
-export {
-  current_variant as default,
-  render
-};

package/dist/main.es97.js

@@ -1,23 +0,0 @@
-import "./main.es3.js";
-import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
-const _hoisted_1 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "18",
-  height: "18",
-  fill: "none"
-};
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#fff",
-  d: "M0 10h8V0H0zm0 8h8v-6H0zm10 0h8V8h-8zm0-18v6h8V0z"
-}, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
-}
-const dashboard = { render };
-export {
-  dashboard as default,
-  render
-};

package/dist/main.es98.js

@@ -1,23 +0,0 @@
-import "./main.es3.js";
-import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
-const _hoisted_1 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "18",
-  height: "18",
-  fill: "none"
-};
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M16 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4v-2H2V2h14v14h-4v2h4c1.1 0 2-.9 2-2V2a2 2 0 0 0-2-2M9 6l-4 4h3v8h2v-8h3z"
-}, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
-}
-const data_transfer = { render };
-export {
-  data_transfer as default,
-  render
-};

package/dist/main.es99.js

@@ -1,28 +0,0 @@
-import "./main.es3.js";
-import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
-const _hoisted_1 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "12",
-  height: "16",
-  fill: "none"
-};
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M15 13h2v14h-2z"
-}, null, -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M17 21a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h8l-2.857 4L25 21z"
-}, null, -1);
-const _hoisted_4 = [
-  _hoisted_2,
-  _hoisted_3
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
-}
-const deadline = { render };
-export {
-  deadline as default,
-  render
-};

package/dist/style.css

@@ -1 +0,0 @@
-html,body{height:100%;margin:0}

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>