pgo-ui 1.1.47 → 1.1.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgo-ui",
-  "version": "1.1.47",
+  "version": "1.1.49",
   "description": "A Vue 3 component library with PGO design system",
   "private": false,
   "type": "module",

package/src/components/examples/BarChartExample.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="space-y-4">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="border border-[var(--vts-color-border)] rounded-lg p-4">
+        <p class="text-xs font-semibold text-[var(--vts-color-textSecondary)] uppercase tracking-wider mb-2">Default</p>
+        <BarChart
+          :series="[
+            { name: 'Revenue', data: [30, 40, 35, 50, 49, 60] },
+            { name: 'Expenses', data: [20, 30, 25, 40, 30, 45] }
+          ]"
+          :categories="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
+          :height="280"
+        />
+      </div>
+
+      <div class="border border-[var(--vts-color-border)] rounded-lg p-4">
+        <p class="text-xs font-semibold text-[var(--vts-color-textSecondary)] uppercase tracking-wider mb-2">Stacked + Data Labels</p>
+        <BarChart
+          :series="[
+            { name: 'Online', data: [44, 55, 41, 67, 22, 43] },
+            { name: 'In-Store', data: [13, 23, 20, 8, 13, 27] }
+          ]"
+          :categories="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
+          :colors="['#8B5CF6', '#F59E0B']"
+          :stacked="true"
+          :show-data-labels="true"
+          :height="280"
+        />
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="border border-[var(--vts-color-border)] rounded-lg p-4">
+        <p class="text-xs font-semibold text-[var(--vts-color-textSecondary)] uppercase tracking-wider mb-2">Horizontal + Bilingual Labels</p>
+        <BarChart
+          :series="[
+            { name: { en: 'Letters', dv: 'ސިޓީ' }, data: [40, 55, 70, 48, 90] },
+            { name: { en: 'Cases', dv: 'މައްސަލަ' }, data: [20, 35, 25, 50, 45] }
+          ]"
+          :categories="['Dept A', 'Dept B', 'Dept C', 'Dept D', 'Dept E']"
+          :colors="['#3B82F6', '#10B981']"
+          :horizontal="true"
+          :height="280"
+        />
+      </div>
+
+      <div class="border border-[var(--vts-color-border)] rounded-lg p-4">
+        <p class="text-xs font-semibold text-[var(--vts-color-textSecondary)] uppercase tracking-wider mb-2">Custom Colors + No Legend</p>
+        <BarChart
+          :series="[
+            { name: 'Temperature', data: [28, 30, 32, 31, 33, 35, 34] }
+          ]"
+          :categories="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
+          :colors="['#EF4444']"
+          :show-legend="false"
+          column-width="40%"
+          :height="200"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { BarChart } from '../pgo'
+</script>

package/src/components/examples/BubbleChartExample.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="space-y-4">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="border border-[var(--vts-color-border)] rounded-lg p-4">
+        <p class="text-xs font-semibold text-[var(--vts-color-textSecondary)] uppercase tracking-wider mb-2">Default</p>
+        <BubbleChart
+          :series="[
+            { name: 'Product A', data: [[10, 20, 15], [20, 30, 25], [30, 15, 35], [40, 45, 20], [50, 35, 30]] },
+            { name: 'Product B', data: [[15, 25, 20], [25, 40, 15], [35, 20, 40], [45, 50, 25], [55, 30, 35]] }
+          ]"
+          :height="280"
+        />
+      </div>
+
+      <div class="border border-[var(--vts-color-border)] rounded-lg p-4">
+        <p class="text-xs font-semibold text-[var(--vts-color-textSecondary)] uppercase tracking-wider mb-2">Axis Titles + Data Labels</p>
+        <BubbleChart
+          :series="[
+            { name: { en: 'Revenue', dv: 'އާމްދަނީ' }, data: [[5, 50, 20], [15, 80, 30], [25, 60, 45], [35, 90, 25], [45, 70, 35]] }
+          ]"
+          :xaxis-title="{ en: 'Months', dv: 'މަސް' }"
+          :yaxis-title="{ en: 'Amount', dv: 'ޢަދަދު' }"
+          :colors="['#8B5CF6']"
+          :show-data-labels="true"
+          :height="280"
+        />
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="border border-[var(--vts-color-border)] rounded-lg p-4">
+        <p class="text-xs font-semibold text-[var(--vts-color-textSecondary)] uppercase tracking-wider mb-2">Custom Bubble Sizes</p>
+        <BubbleChart
+          :series="[
+            { name: 'Group 1', data: [[10, 30, 10], [20, 50, 30], [30, 40, 50], [40, 60, 20]] },
+            { name: 'Group 2', data: [[12, 35, 25], [22, 55, 15], [32, 45, 40], [42, 65, 35]] }
+          ]"
+          :colors="['#10B981', '#F59E0B']"
+          :min-bubble-size="5"
+          :max-bubble-size="70"
+          :height="280"
+        />
+      </div>
+
+      <div class="border border-[var(--vts-color-border)] rounded-lg p-4">
+        <p class="text-xs font-semibold text-[var(--vts-color-textSecondary)] uppercase tracking-wider mb-2">Single Series + No Legend</p>
+        <BubbleChart
+          :series="[
+            { name: 'Data', data: [[8, 20, 30], [18, 40, 15], [28, 25, 45], [38, 55, 20], [48, 35, 40], [58, 45, 25]] }
+          ]"
+          :colors="['#EF4444']"
+          :show-legend="false"
+          :height="200"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { BubbleChart } from '../pgo'
+</script>

package/src/components/examples/TreemapChartExample.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="space-y-4">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="border border-[var(--vts-color-border)] rounded-lg p-4">
+        <p class="text-xs font-semibold text-[var(--vts-color-textSecondary)] uppercase tracking-wider mb-2">Default</p>
+        <TreemapChart
+          :series="[
+            { data: [
+              { x: 'Criminal', y: 120 },
+              { x: 'Civil', y: 85 },
+              { x: 'Family', y: 60 },
+              { x: 'Commercial', y: 45 },
+              { x: 'Administrative', y: 30 },
+              { x: 'Other', y: 20 }
+            ]}
+          ]"
+          :height="280"
+        />
+      </div>
+
+      <div class="border border-[var(--vts-color-border)] rounded-lg p-4">
+        <p class="text-xs font-semibold text-[var(--vts-color-textSecondary)] uppercase tracking-wider mb-2">Bilingual Labels</p>
+        <TreemapChart
+          :series="[
+            { data: [
+              { x: { en: 'Letters', dv: 'ސިޓީ' }, y: 90 },
+              { x: { en: 'Cases', dv: 'މައްސަލަ' }, y: 75 },
+              { x: { en: 'Reports', dv: 'ރިޕޯޓް' }, y: 50 },
+              { x: { en: 'Complaints', dv: 'ޝަކުވާ' }, y: 35 }
+            ]}
+          ]"
+          :colors="['#8B5CF6', '#EC4899', '#14B8A6', '#F97316']"
+          :height="280"
+        />
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="border border-[var(--vts-color-border)] rounded-lg p-4">
+        <p class="text-xs font-semibold text-[var(--vts-color-textSecondary)] uppercase tracking-wider mb-2">Multi-group</p>
+        <TreemapChart
+          :series="[
+            { name: 'Dept A', data: [
+              { x: 'Criminal', y: 40 },
+              { x: 'Civil', y: 30 },
+              { x: 'Family', y: 20 }
+            ]},
+            { name: 'Dept B', data: [
+              { x: 'Criminal', y: 55 },
+              { x: 'Civil', y: 25 },
+              { x: 'Family', y: 35 }
+            ]}
+          ]"
+          :distributed="false"
+          :colors="['#3B82F6', '#10B981']"
+          :height="280"
+        />
+      </div>
+
+      <div class="border border-[var(--vts-color-border)] rounded-lg p-4">
+        <p class="text-xs font-semibold text-[var(--vts-color-textSecondary)] uppercase tracking-wider mb-2">No Data Labels + Custom Colors</p>
+        <TreemapChart
+          :series="[
+            { data: [
+              { x: 'A', y: 100 },
+              { x: 'B', y: 80 },
+              { x: 'C', y: 60 },
+              { x: 'D', y: 40 },
+              { x: 'E', y: 20 }
+            ]}
+          ]"
+          :colors="['#EF4444', '#F59E0B', '#10B981', '#3B82F6', '#8B5CF6']"
+          :show-data-labels="false"
+          :height="200"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { TreemapChart } from '../pgo'
+</script>

package/src/components/pgo/charts/BarChart.vue

@@ -0,0 +1,137 @@
+<template>
+  <VueApexCharts
+    v-if="ready"
+    type="bar"
+    :options="chartOptions"
+    :series="chartSeries"
+    :height="height"
+  />
+</template>
+
+<script setup>
+import { computed, inject, ref, onMounted } from 'vue'
+import VueApexCharts from 'vue3-apexcharts'
+
+const ready = ref(false)
+
+onMounted(() => {
+  requestAnimationFrame(() => {
+    ready.value = true
+  })
+})
+
+const i18n = inject('i18n', null)
+
+const defaultColors = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#14B8A6', '#F97316']
+
+const props = defineProps({
+  series: {
+    type: Array,
+    required: true
+  },
+  categories: {
+    type: Array,
+    default: () => []
+  },
+  colors: {
+    type: Array,
+    default: () => []
+  },
+  height: {
+    type: [String, Number],
+    default: 350
+  },
+  showLegend: {
+    type: Boolean,
+    default: true
+  },
+  showDataLabels: {
+    type: Boolean,
+    default: false
+  },
+  horizontal: {
+    type: Boolean,
+    default: false
+  },
+  stacked: {
+    type: Boolean,
+    default: false
+  },
+  columnWidth: {
+    type: String,
+    default: '55%'
+  },
+  lang: {
+    type: String,
+    default: ''
+  }
+})
+
+const currentLang = computed(() => props.lang || i18n?.language?.value || 'dv')
+
+const resolveLabel = (label) => {
+  if (!label) return ''
+  if (typeof label === 'string') return label
+  if (typeof label === 'object') return label[currentLang.value] ?? label['en'] ?? ''
+  return ''
+}
+
+const paletteColors = computed(() =>
+  props.colors.length ? props.colors : defaultColors.slice(0, props.series.length)
+)
+
+const chartSeries = computed(() =>
+  props.series.map(s => ({
+    name: resolveLabel(s.name),
+    data: s.data
+  }))
+)
+
+const chartOptions = computed(() => ({
+  chart: {
+    type: 'bar',
+    stacked: props.stacked,
+    fontFamily: currentLang.value === 'dv' ? 'Faruma, sans-serif' : 'inherit',
+    toolbar: { show: false }
+  },
+  colors: paletteColors.value,
+  plotOptions: {
+    bar: {
+      horizontal: props.horizontal,
+      columnWidth: props.columnWidth,
+      borderRadius: 4
+    }
+  },
+  stroke: {
+    show: true,
+    width: 2,
+    colors: ['transparent']
+  },
+  xaxis: {
+    categories: props.categories
+  },
+  legend: {
+    show: props.showLegend,
+    position: 'bottom',
+    fontSize: '13px',
+    fontFamily: currentLang.value === 'dv' ? 'Faruma, sans-serif' : 'inherit'
+  },
+  dataLabels: {
+    enabled: props.showDataLabels
+  },
+  tooltip: {
+    y: {
+      formatter: (val) => `${val}`
+    }
+  },
+  responsive: [
+    {
+      breakpoint: 480,
+      options: {
+        chart: { width: 300 },
+        legend: { position: 'bottom' }
+      }
+    }
+  ]
+}))
+</script>

package/src/components/pgo/charts/BubbleChart.vue

@@ -0,0 +1,146 @@
+<template>
+  <VueApexCharts
+    v-if="ready"
+    type="bubble"
+    :options="chartOptions"
+    :series="chartSeries"
+    :height="height"
+  />
+</template>
+
+<script setup>
+import { computed, inject, ref, onMounted } from 'vue'
+import VueApexCharts from 'vue3-apexcharts'
+
+const ready = ref(false)
+
+onMounted(() => {
+  requestAnimationFrame(() => {
+    ready.value = true
+  })
+})
+
+const i18n = inject('i18n', null)
+
+const defaultColors = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#14B8A6', '#F97316']
+
+const props = defineProps({
+  series: {
+    type: Array,
+    required: true
+  },
+  colors: {
+    type: Array,
+    default: () => []
+  },
+  height: {
+    type: [String, Number],
+    default: 350
+  },
+  showLegend: {
+    type: Boolean,
+    default: true
+  },
+  showDataLabels: {
+    type: Boolean,
+    default: false
+  },
+  xaxisTitle: {
+    type: [String, Object],
+    default: ''
+  },
+  yaxisTitle: {
+    type: [String, Object],
+    default: ''
+  },
+  minBubbleSize: {
+    type: Number,
+    default: 10
+  },
+  maxBubbleSize: {
+    type: Number,
+    default: 50
+  },
+  lang: {
+    type: String,
+    default: ''
+  }
+})
+
+const currentLang = computed(() => props.lang || i18n?.language?.value || 'dv')
+
+const resolveLabel = (label) => {
+  if (!label) return ''
+  if (typeof label === 'string') return label
+  if (typeof label === 'object') return label[currentLang.value] ?? label['en'] ?? ''
+  return ''
+}
+
+const paletteColors = computed(() =>
+  props.colors.length ? props.colors : defaultColors.slice(0, props.series.length)
+)
+
+const chartSeries = computed(() =>
+  props.series.map(s => ({
+    name: resolveLabel(s.name),
+    data: s.data
+  }))
+)
+
+const chartOptions = computed(() => ({
+  chart: {
+    type: 'bubble',
+    fontFamily: currentLang.value === 'dv' ? 'Faruma, sans-serif' : 'inherit',
+    toolbar: { show: false }
+  },
+  colors: paletteColors.value,
+  fill: {
+    opacity: 0.8
+  },
+  plotOptions: {
+    bubble: {
+      minBubbleRadius: props.minBubbleSize,
+      maxBubbleRadius: props.maxBubbleSize
+    }
+  },
+  xaxis: {
+    title: {
+      text: resolveLabel(props.xaxisTitle),
+      style: {
+        fontFamily: currentLang.value === 'dv' ? 'Faruma, sans-serif' : 'inherit'
+      }
+    }
+  },
+  yaxis: {
+    title: {
+      text: resolveLabel(props.yaxisTitle),
+      style: {
+        fontFamily: currentLang.value === 'dv' ? 'Faruma, sans-serif' : 'inherit'
+      }
+    }
+  },
+  legend: {
+    show: props.showLegend,
+    position: 'bottom',
+    fontSize: '13px',
+    fontFamily: currentLang.value === 'dv' ? 'Faruma, sans-serif' : 'inherit'
+  },
+  dataLabels: {
+    enabled: props.showDataLabels
+  },
+  tooltip: {
+    y: {
+      formatter: (val) => `${val}`
+    }
+  },
+  responsive: [
+    {
+      breakpoint: 480,
+      options: {
+        chart: { width: 300 },
+        legend: { position: 'bottom' }
+      }
+    }
+  ]
+}))
+</script>

package/src/components/pgo/charts/TreemapChart.vue

@@ -0,0 +1,116 @@
+<template>
+  <VueApexCharts
+    v-if="ready"
+    type="treemap"
+    :options="chartOptions"
+    :series="chartSeries"
+    :height="height"
+  />
+</template>
+
+<script setup>
+import { computed, inject, ref, onMounted } from 'vue'
+import VueApexCharts from 'vue3-apexcharts'
+
+const ready = ref(false)
+
+onMounted(() => {
+  requestAnimationFrame(() => {
+    ready.value = true
+  })
+})
+
+const i18n = inject('i18n', null)
+
+const defaultColors = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#14B8A6', '#F97316']
+
+const props = defineProps({
+  series: {
+    type: Array,
+    required: true
+  },
+  colors: {
+    type: Array,
+    default: () => []
+  },
+  height: {
+    type: [String, Number],
+    default: 350
+  },
+  showDataLabels: {
+    type: Boolean,
+    default: true
+  },
+  distributed: {
+    type: Boolean,
+    default: true
+  },
+  enableShadeIntensity: {
+    type: Boolean,
+    default: true
+  },
+  lang: {
+    type: String,
+    default: ''
+  }
+})
+
+const currentLang = computed(() => props.lang || i18n?.language?.value || 'dv')
+
+const resolveLabel = (label) => {
+  if (!label) return ''
+  if (typeof label === 'string') return label
+  if (typeof label === 'object') return label[currentLang.value] ?? label['en'] ?? ''
+  return ''
+}
+
+const paletteColors = computed(() =>
+  props.colors.length ? props.colors : defaultColors
+)
+
+const chartSeries = computed(() =>
+  props.series.map(s => ({
+    name: resolveLabel(s.name),
+    data: s.data.map(d => ({
+      x: resolveLabel(d.x),
+      y: d.y
+    }))
+  }))
+)
+
+const chartOptions = computed(() => ({
+  chart: {
+    type: 'treemap',
+    fontFamily: currentLang.value === 'dv' ? 'Faruma, sans-serif' : 'inherit',
+    toolbar: { show: false }
+  },
+  colors: paletteColors.value,
+  plotOptions: {
+    treemap: {
+      distributed: props.distributed,
+      enableShades: props.enableShadeIntensity,
+      shadeIntensity: 0.5
+    }
+  },
+  dataLabels: {
+    enabled: props.showDataLabels,
+    style: {
+      fontSize: '13px',
+      fontFamily: currentLang.value === 'dv' ? 'Faruma, sans-serif' : 'inherit'
+    }
+  },
+  tooltip: {
+    y: {
+      formatter: (val) => `${val}`
+    }
+  },
+  responsive: [
+    {
+      breakpoint: 480,
+      options: {
+        chart: { width: 300 }
+      }
+    }
+  ]
+}))
+</script>

package/src/components/pgo/forms/DynamicForm.vue

@@ -154,6 +154,7 @@
     const clickedButton = ref('');
     const isPreFilled = ref(false)
     const originalFormData = ref({})
+    const dataChanged = ref(false)
 
     const emit = defineEmits([
         'update:modelValue', 
@@ -1011,12 +1012,14 @@
         isPreFilled.value = false
         originalFormData.value = {}
         valid.value = false;
-        formMode.value = props.mode 
+        formMode.value = props.mode
         formId.value = null
-        emit('close', false);
+        emit('close', dataChanged.value);
+        dataChanged.value = false;
     };
 
     const handleUploadSuccess = () => {
+        dataChanged.value = true;
         fetchData();
     };
     // Initialize on mount

package/src/components/pgo/index.ts

@@ -52,6 +52,9 @@ import ToastItem from './Deprecated/ToastItem.vue'
 import SearchBox from './SearchBox.vue'
 import DonutChart from './charts/DonutChart.vue'
 import LineChart from './charts/LineChart.vue'
+import BarChart from './charts/BarChart.vue'
+import BubbleChart from './charts/BubbleChart.vue'
+import TreemapChart from './charts/TreemapChart.vue'
 
 
 // export {  Chip, ChipGroup, DataTable, Dropdown, FileUpload, Form }
@@ -104,5 +107,8 @@ export {  Button, Card, CardView, HeroIcon,
     Toolbar,
     Tooltip,
     DonutChart,
-    LineChart
+    LineChart,
+    BarChart,
+    BubbleChart,
+    TreemapChart
 }