pgo-ui 1.0.96 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgo-ui",
-  "version": "1.0.96",
+  "version": "1.1.2",
   "description": "A Vue 3 component library with PGO design system",
   "private": false,
   "type": "module",
@@ -42,7 +42,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "postinstall": "node ./src/copy-assets.cjs",
-    "release": "npm version patch --no-git-tag-version && npm run build && npm --//registry.npmjs.org/:_authToken=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 publish"
+    "release": "npm version patch --no-git-tag-version && npm run build && npm --//registry.npmjs.org/:_authToken=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 publish"
   },
   "dependencies": {
     "@heroicons/vue": "^2.2.0",
@@ -59,14 +59,12 @@
     "@vuepic/vue-datepicker": "^12.1.0",
     "@vueuse/components": "^14.0.0",
     "@vueuse/core": "^14.0.0",
-    "apexcharts": "^5.10.6",
     "axios": "^1.13.2",
     "core-js": "^3.49.0",
     "date-fns": "^4.1.0",
     "pdfjs-dist": "^5.5.207",
     "vue": "^3.0.0",
     "vue-pdf-embed": "^2.1.4",
-    "vue3-apexcharts": "^1.11.1",
     "vue3-tailwind-components": "^0.3.3"
   },
   "devDependencies": {

package/src/components/examples/DonutChartExample.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>
+        <DonutChart
+          :series="[
+            { label: 'Approved', value: 120 },
+            { label: 'Pending', value: 45 },
+            { label: 'Rejected', value: 10 }
+          ]"
+          :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 + Bilingual Labels</p>
+        <DonutChart
+          :series="[
+            { label: { en: 'Letters Replied', dv: 'ޖަވާބު ލިބިފައިވާ ސިޓީ' }, value: 60 },
+            { label: { en: 'Letters Submitted', dv: 'ހުށަހަޅާފައިވާ ސިޓީ' }, value: 1344 },
+            { label: { en: 'Letters Received', dv: 'ހުށަހެޅުނު ސިޓީ' }, value: 80 }
+          ]"
+          :colors="['#10B981', '#3B82F6', '#F59E0B']"
+          :total-label="{ en: 'Total', dv: 'ޖުމްލަ' }"
+          :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">No Legend, No Total</p>
+        <DonutChart
+          :series="[
+            { label: 'A', value: 30 },
+            { label: 'B', value: 70 }
+          ]"
+          :show-legend="false"
+          :show-total="false"
+          donut-size="70%"
+          :height="200"
+        />
+      </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</p>
+        <DonutChart
+          :series="[
+            { label: 'Category 1', value: 40 },
+            { label: 'Category 2', value: 25 },
+            { label: 'Category 3', value: 35 },
+            { label: 'Category 4', value: 15 }
+          ]"
+          :colors="['#8B5CF6', '#EC4899', '#14B8A6', '#F97316']"
+          :show-data-labels="false"
+          :height="200"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { DonutChart } from '../pgo'
+</script>

package/src/components/examples/LineChartExample.vue

@@ -0,0 +1,64 @@
+<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 (Smooth Curves)</p>
+        <LineChart
+          :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">Straight Lines + Data Labels</p>
+        <LineChart
+          :series="[
+            { name: 'Users', data: [100, 150, 200, 180, 250, 300] }
+          ]"
+          :categories="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
+          :colors="['#8B5CF6']"
+          :curved="false"
+          :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">Bilingual Labels</p>
+        <LineChart
+          :series="[
+            { name: { en: 'Letters', dv: 'ސިޓީ' }, data: [40, 55, 70, 48, 90, 60] },
+            { name: { en: 'Cases', dv: 'މައްސަލަ' }, data: [20, 35, 25, 50, 45, 65] }
+          ]"
+          :categories="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
+          :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">Custom Stroke + No Legend</p>
+        <LineChart
+          :series="[
+            { name: 'Temperature', data: [28, 30, 32, 31, 33, 35, 34] }
+          ]"
+          :categories="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
+          :colors="['#EF4444']"
+          :stroke-width="5"
+          :show-legend="false"
+          :height="200"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { LineChart } from '../pgo'
+</script>

package/src/components/examples/index.ts

@@ -28,6 +28,8 @@ import TimelineExample from './TimelineExample.vue'
 import TooltipExample from './TooltipExample.vue'
 import VueDatePickerShowcase from './VueDatePickerShowcase.vue'
 import CardViewExample from './CardViewExample.vue'
+import DonutChartExample from './DonutChartExample.vue'
+import LineChartExample from './LineChartExample.vue'
 
 export {
     AppBarExample,
@@ -57,6 +59,8 @@ export {
     TimelineExample,
     TooltipExample,
     VueDatePickerShowcase,
-    CardViewExample
+    CardViewExample,
+    DonutChartExample,
+    LineChartExample
 
 }

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

@@ -1,5 +1,6 @@
 <template>
   <VueApexCharts
+    v-if="ready"
     type="donut"
     :options="chartOptions"
     :series="chartSeries"
@@ -8,9 +9,17 @@
 </template>
 
 <script setup>
-import { computed, inject } from 'vue'
+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 = ['#10B981', '#3B82F6', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#14B8A6', '#F97316']

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

@@ -1,5 +1,6 @@
 <template>
   <VueApexCharts
+    v-if="ready"
     type="line"
     :options="chartOptions"
     :series="chartSeries"
@@ -8,9 +9,17 @@
 </template>
 
 <script setup>
-import { computed, inject } from 'vue'
+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']

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

@@ -594,37 +594,76 @@ const initializeFormData = () => {
 
         try {
             // Build safe variable declarations instead of using function parameters
-            const varDeclarations = Object.keys(context)
-                .filter(key => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key)) // only valid JS identifiers
-                .map(key => {
-                    const value = context[key];
-                    if (value === null || value === undefined) {
-                        return `var ${key} = ${JSON.stringify(null)};`;
-                    } else if (typeof value === 'function') {
-                        return ''; // skip functions
+            const functionKeys = []
+            const functionValues = []
+            const varDeclarations = []
+
+            Object.keys(context)
+                .filter(key => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key))
+                .forEach(key => {
+                    const value = context[key]
+
+                    if (typeof value === 'function') {
+                        // Pass functions as parameters
+                        functionKeys.push(key)
+                        functionValues.push(value)
+                    } else if (value === null || value === undefined) {
+                        varDeclarations.push(`var ${key} = null;`)
                     } else if (typeof value === 'object') {
                         try {
-                            return `var ${key} = ${JSON.stringify(value)};`;
+                            varDeclarations.push(`var ${key} = ${JSON.stringify(value)};`)
                         } catch {
-                            return `var ${key} = null;`; // skip non-serializable objects
+                            varDeclarations.push(`var ${key} = null;`)
                         }
                     } else if (typeof value === 'string') {
-                        return `var ${key} = ${JSON.stringify(value)};`;
+                        varDeclarations.push(`var ${key} = ${JSON.stringify(value)};`)
                     } else {
-                        return `var ${key} = ${value};`;
+                        varDeclarations.push(`var ${key} = ${value};`)
                     }
                 })
-                .filter(Boolean)
-                .join('\n');
 
-            const fn = new Function(varDeclarations + `\nreturn (${expression});`);
-            return fn();
+            const body = varDeclarations.join('\n') + `\nreturn (${expression});`
+            const fn = new Function(...functionKeys, body)
+            return fn(...functionValues)
         } catch (error) {
-            console.warn('Error evaluating expression:', expression, error.message);
-            return false;
+            console.warn('Error evaluating expression:', expression, error.message)
+            return false
         }
     };
 
+        const safeEval = (expression, context) => {
+        const functionKeys = []
+        const functionValues = []
+        const varDeclarations = []
+
+        Object.keys(context)
+            .filter(key => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key))
+            .forEach(key => {
+                const value = context[key]
+
+                if (typeof value === 'function') {
+                    functionKeys.push(key)
+                    functionValues.push(value)
+                } else if (value === null || value === undefined) {
+                    varDeclarations.push(`var ${key} = null;`)
+                } else if (typeof value === 'object') {
+                    try {
+                        varDeclarations.push(`var ${key} = ${JSON.stringify(value)};`)
+                    } catch {
+                        varDeclarations.push(`var ${key} = null;`)
+                    }
+                } else if (typeof value === 'string') {
+                    varDeclarations.push(`var ${key} = ${JSON.stringify(value)};`)
+                } else {
+                    varDeclarations.push(`var ${key} = ${value};`)
+                }
+            })
+
+        const body = varDeclarations.join('\n') + `\n${expression}`
+        const fn = new Function(...functionKeys, body)
+        return fn(...functionValues)
+    }
+
     // Simplified getFieldProps function
     const getFieldProps = (field) => {
         if (!field) {

package/src/pgo-components/pages/Examples.vue

@@ -240,6 +240,8 @@ import {
   TooltipExample,
   VueDatePickerShowcase,
   CardViewExample,
+  DonutChartExample,
+  LineChartExample,
 } from '@/components/examples/index.ts'
 
 // ─── Example component map (index → component) ────────────────────────────
@@ -271,6 +273,8 @@ const exampleMap = [
   TooltipExample,        // 24
   VueDatePickerShowcase, // 25
   CardViewExample,       // 26
+  DonutChartExample,     // 27
+  LineChartExample,      // 28
 ]
 
 // ─── Category definitions with colour tokens ──────────────────────────────
@@ -361,6 +365,18 @@ const categories = [
       { name: 'CardView', index: 26 },
     ],
   },
+  {
+    name: 'Charts',
+    dotClass:      'bg-orange-500',
+    textClass:     'text-orange-500',
+    activeClass:   'bg-orange-500/10 text-orange-600 font-semibold',
+    gradientClass: 'bg-gradient-to-r from-orange-400 to-amber-500',
+    badgeClass:    'text-orange-600 border-orange-300 bg-orange-50',
+    items: [
+      { name: 'DonutChart', index: 27 },
+      { name: 'LineChart',  index: 28 },
+    ],
+  },
   {
     name: 'Utilities',
     dotClass:      'bg-slate-400',
@@ -1423,6 +1439,66 @@ const docs = [
     slots: [],
   },
 
+  // ── 27 · DonutChart ─────────────────────────
+  {
+    name: 'DonutChart',
+    description: 'ApexCharts-powered donut chart with bilingual labels, configurable colors, center total, and legend. Wraps vue3-apexcharts internally — no extra install needed.',
+    usage:
+`<DonutChart
+  :series="[
+    { label: { en: 'Approved', dv: 'ފާސް' }, value: 120 },
+    { label: { en: 'Pending', dv: 'ނުނިމި' }, value: 45 },
+    { label: { en: 'Rejected', dv: 'ބޭރު' }, value: 10 }
+  ]"
+  :colors="['#10B981', '#F59E0B', '#EF4444']"
+  :total-label="{ en: 'Total', dv: 'ޖުމްލަ' }"
+  :height="350"
+/>`,
+    props: [
+      { name: 'series', type: 'Array', default: 'required', description: 'Data items: [{ label: string | {en,dv}, value: number }].' },
+      { name: 'colors', type: 'Array', default: 'built-in palette', description: 'Hex color strings per slice.' },
+      { name: 'height', type: 'String|Number', default: '350', description: 'Chart height in pixels.' },
+      { name: 'showLegend', type: 'Boolean', default: 'true', description: 'Show/hide the bottom legend.' },
+      { name: 'showDataLabels', type: 'Boolean', default: 'true', description: 'Show percentage labels on slices.' },
+      { name: 'donutSize', type: 'String', default: "'55%'", description: 'Inner donut hole size.' },
+      { name: 'showTotal', type: 'Boolean', default: 'true', description: 'Show total value in center.' },
+      { name: 'totalLabel', type: 'String|Object', default: "{en:'Total',dv:'ޖުމްލަ'}", description: 'Center label text (bilingual).' },
+      { name: 'lang', type: 'String', default: 'injected', description: 'Language override (reads from i18n if omitted).' },
+    ],
+    events: [],
+    slots: [],
+  },
+
+  // ── 28 · LineChart ──────────────────────────
+  {
+    name: 'LineChart',
+    description: 'ApexCharts-powered line chart with bilingual series names, smooth/straight curves, configurable stroke, and responsive layout.',
+    usage:
+`<LineChart
+  :series="[
+    { name: { en: 'Revenue', dv: 'އާމްދަނީ' }, data: [30, 40, 35, 50, 49, 60] },
+    { name: { en: 'Expenses', dv: 'ޚަރަދު' }, data: [20, 30, 25, 40, 30, 45] }
+  ]"
+  :categories="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
+  :colors="['#3B82F6', '#EF4444']"
+  :curved="true"
+  :height="350"
+/>`,
+    props: [
+      { name: 'series', type: 'Array', default: 'required', description: 'Line data: [{ name: string | {en,dv}, data: number[] }].' },
+      { name: 'categories', type: 'Array', default: '[]', description: 'X-axis labels.' },
+      { name: 'colors', type: 'Array', default: 'built-in palette', description: 'Color per line.' },
+      { name: 'height', type: 'String|Number', default: '350', description: 'Chart height in pixels.' },
+      { name: 'showLegend', type: 'Boolean', default: 'true', description: 'Show/hide the legend.' },
+      { name: 'showDataLabels', type: 'Boolean', default: 'false', description: 'Show value labels on data points.' },
+      { name: 'curved', type: 'Boolean', default: 'true', description: 'Smooth curves (true) or straight lines (false).' },
+      { name: 'strokeWidth', type: 'Number', default: '3', description: 'Line thickness in pixels.' },
+      { name: 'lang', type: 'String', default: 'injected', description: 'Language override (reads from i18n if omitted).' },
+    ],
+    events: [],
+    slots: [],
+  },
+
 ]
 </script>
 

package/dist/Radio--JH6hOnu.js

@@ -1,4 +0,0 @@
-import { _ as f } from "./index-ZWMgoNTb.js";
-export {
-  f as default
-};