pgo-ui 1.0.39 → 1.0.41

package/package.json

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

package/src/components/examples/CardViewExample.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="p-6 max-w-7xl mx-auto space-y-6">
+    <h2 class="text-2xl font-bold">CardView Example</h2>
+    <p class="text-sm text-gray-500">Stack-based card layout with sample expert data ({{ sampleData.length }} cards)</p>
+
+    <CardView
+      :items="sampleData"
+      :settings="cardSettings"
+      :server-side-options="options"
+      :loading="loading"
+      lang="dv"
+      @update:options="handleOptionsUpdate"
+      @action-click="handleActionClick"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import CardView from '../pgo/CardView.vue'
+import sampleJson from '../../pgo-components/sample-data/card-sample-data.json'
+
+const loading = ref(false)
+
+const sampleData = ref(sampleJson.data)
+
+const options = ref({
+  page: sampleJson.current_page,
+  itemsPerPage: sampleJson.per_page,
+  itemsLength: sampleJson.total,
+  sortBy: [],
+  sortDesc: []
+})
+
+const cardSettings = ref({
+  grid: { sm: 1, md: 2, lg: 3 },
+  scrollHeight: '300px',
+  cardLayout: {
+    stacks: [
+      {
+        stackType: 'field',
+        key: 'person.nid_pp',
+        align: 'right',
+        lang: 'en',
+        tag: 'h4',
+        class: 'font-semibold'
+      },
+      {
+        stackType: 'row',
+        justify: 'space-between',
+        align: 'center',
+        fields: [
+          { key: 'person.person_name_div', tag: 'h3', class: 'font-bold' },
+          {
+            stackType: 'button',
+            label: { en: 'CV', dv: 'ސީ.ވީ' },
+            color: 'info',
+            size: 'xs',
+            linkKey: 'cv.attachment.url'
+          }
+        ]
+      },
+      { stackType: 'divider' },
+      {
+        stackType: 'chips',
+        key: 'categories',
+        labelKey: { en: 'label_eng', dv: 'label_div' },
+        variant: 'tonal',
+        size: 'sm'
+      },
+      { stackType: 'divider' },
+      {
+        stackType: 'section',
+        title: { en: 'Education & Training', dv: 'ތަޢުލީމާއި ތަމްރީނު' },
+        bgColor: 'bg-teal-50',
+        key: 'expertises',
+        emptyText: { en: 'No records added', dv: 'ރެކޯޑެއް ނެތް' },
+        stacks: [
+          {
+            stackType: 'row',
+            separator: ' - ',
+            fields: [
+              { key: 'categories.label_div' },
+              { key: 'issued_date', displayType: 'date' }
+            ]
+          }
+        ]
+      },
+      {
+        stackType: 'section',
+        title: { en: 'Work Experience', dv: 'ވަޒީފާގެ ތަޖުރިބާ' },
+        bgColor: 'bg-green-50',
+        key: 'experiences',
+        emptyText: { en: 'No records added', dv: 'ރެކޯޑެއް ނެތް' },
+        stacks: [
+          {
+            stackType: 'row',
+            separator: ' - ',
+            fields: [
+              { key: 'organization' },
+              { key: 'designation' }
+            ]
+          }
+        ]
+      },
+      {
+        stackType: 'section',
+        title: { en: 'Professional Affiliations', dv: 'ޕްރޮފެޝަނަލް އެފިލިއޭޝަންސް' },
+        bgColor: 'bg-lime-50',
+        key: 'professional_affiliations',
+        emptyText: { en: 'No affiliations added', dv: 'އެފިލިއޭޝަންސް އިތުރު ކޮށްފައި ނެތް' },
+        stacks: [
+          { stackType: 'field', key: 'name' }
+        ]
+      },
+      {
+        stackType: 'section',
+        title: { en: 'Other Experiences', dv: 'އިތުރު ދާއިރާ ތަކުގެ ތަޖުރިބާ' },
+        bgColor: 'bg-amber-50',
+        key: 'other_experiences',
+        emptyText: { en: 'No records added', dv: 'އިތުރު ކޮށްފައި ނެތް' },
+        stacks: [
+          { stackType: 'field', key: 'description' }
+        ]
+      }
+    ]
+  }
+})
+
+const handleOptionsUpdate = (newOptions) => {
+  console.log('Pagination changed:', newOptions)
+  // In a real setup, this would fetch new data from the API
+  loading.value = true
+  setTimeout(() => {
+    options.value = { ...options.value, ...newOptions }
+    loading.value = false
+  }, 500)
+}
+
+const handleActionClick = ({ item, field }) => {
+  console.log('Action clicked:', field, 'on item:', item)
+}
+</script>

package/src/components/examples/index.ts

@@ -27,6 +27,7 @@ import ThemeToggle from './ThemeToggle.vue'
 import TimelineExample from './TimelineExample.vue'
 import TooltipExample from './TooltipExample.vue'
 import VueDatePickerShowcase from './VueDatePickerShowcase.vue'
+import CardViewExample from './CardViewExample.vue'
 
 export {
     AppBarExample,
@@ -55,6 +56,7 @@ export {
     ThemeToggle,
     TimelineExample,
     TooltipExample,
-    VueDatePickerShowcase
+    VueDatePickerShowcase,
+    CardViewExample
 
-}
+}

package/src/components/pgo/Card.vue

@@ -13,7 +13,7 @@
           :class="[headerClass, headerBg, headerPadding, topRoundedClass, headerBd , headerText, `overflow-hidden flex items-center gap-2`]"
         >
           <h3 :class="[titleClass, headerTextSize ]">
-            {{ selectedlabels.title ? selectedlabels.title : props.title }}
+            {{ selectedlabels.title ? selectedlabels.title : useLanguageSelected(props.title, selectLanguage)  }}
           </h3>
         </div>
       </slot>
@@ -123,8 +123,8 @@ const { language } = inject('i18n')
         else {
             Selected = language.value
         }
-        console.log('selectLanguage in Card222:', Selected)
-        return (Selected === 'dv') ? 'dv' : 'en'
+        // console.log('selectLanguage in Card222:', Selected)
+        return (Selected === 'en') ? 'en' : 'dv'
     })
 
     // Provide dir and lang to child components - MOVED HERE AFTER COMPUTED
@@ -138,7 +138,7 @@ const { language } = inject('i18n')
     }));
 
     const faruma = computed(() => {
-       if (selectLanguage.value == 'dv') return 'faruma'
+       if (selectLanguage.value != 'en') return 'faruma'
        return ''
     })
 

package/src/components/pgo/CardView.vue

@@ -0,0 +1,358 @@
+<template>
+  <div>
+    <!-- Loading bar -->
+    <div v-if="loading" class="w-full h-1 bg-primary/20 overflow-hidden rounded">
+      <div class="h-full bg-primary animate-[indeterminate_1.5s_infinite_ease-in-out] w-1/3 rounded"></div>
+    </div>
+
+    <!-- Card Grid -->
+    <div
+      v-if="items && items.length > 0"
+      :class="gridClasses"
+      class="gap-4 p-2"
+    >
+      <div
+        v-for="(item, index) in items"
+        :key="item[itemKey] ?? index"
+        class="min-h-full"
+      >
+        <Card
+          bg="bg-background-color"
+          border="border border-input-border"
+          rounded="lg"
+          shadow="shadow-md"
+          padding="p-3"
+          margin=""
+          :lang="lang"
+          class="h-full"
+        >
+          <div class="flex flex-col gap-1">
+            <template v-for="(stack, sIdx) in stacks" :key="sIdx">
+              <!-- Field -->
+              <div
+                v-if="stack.stackType === 'field'"
+                :class="[fieldAlignClass(stack), stack.class || '']"
+                :dir="stack.lang === 'en' ? 'ltr' : stack.lang === 'dv' ? 'rtl' : ''"
+              >
+                <component :is="stack.tag || 'span'">
+                  {{ getNestedValue(item, stack.key) ?? '' }}
+                </component>
+              </div>
+
+              <!-- Row -->
+              <div
+                v-else-if="stack.stackType === 'row'"
+                class="flex items-center gap-2"
+                :class="rowJustifyClass(stack)"
+              >
+                <template v-for="(field, fIdx) in stack.fields" :key="fIdx">
+                  <!-- Separator text between fields (not before the first) -->
+                  <span
+                    v-if="Number(fIdx) > 0 && stack.separator"
+                    class="text-gray-400 text-sm"
+                  >{{ stack.separator }}</span>
+
+                  <!-- Button type inside row -->
+                  <Button
+                    v-if="field.stackType === 'button'"
+                    :size="field.size || 'sm'"
+                    :color="field.color || 'primary'"
+                    @click="handleActionClick(item, field)"
+                  >
+                    {{ resolveLocalizedValue(field.label) }}
+                  </Button>
+
+                  <!-- Regular field inside row -->
+                  <component
+                    v-else
+                    :is="field.tag || 'span'"
+                    :class="[field.class || '']"
+                    :dir="field.lang === 'en' ? 'ltr' : field.lang === 'dv' ? 'rtl' : ''"
+                  >
+                    {{ formatFieldValue(getNestedValue(item, field.key), field) }}
+                  </component>
+                </template>
+              </div>
+
+              <!-- Divider -->
+              <hr
+                v-else-if="stack.stackType === 'divider'"
+                class="border-input-border my-1"
+              />
+
+              <!-- Chips -->
+              <div
+                v-else-if="stack.stackType === 'chips'"
+                class="flex flex-wrap gap-1 py-1"
+              >
+                <Chip
+                  v-for="(chipItem, cIdx) in (getNestedValue(item, stack.key) || [])"
+                  :key="cIdx"
+                  :label="resolveChipLabel(chipItem, stack.labelKey)"
+                  :variant="stack.variant || 'tonal'"
+                  :size="stack.size || 'sm'"
+                  :color="stack.color || 'primary'"
+                />
+              </div>
+
+              <!-- Section (iterates over array field, renders nested stacks per item) -->
+              <div
+                v-else-if="stack.stackType === 'section'"
+                :class="[stack.bgColor || '', 'rounded-lg p-2 my-1']"
+              >
+                <h3 class="font-semibold text-sm mb-1">
+                  {{ resolveLocalizedValue(stack.title) }}
+                </h3>
+
+                <!-- Section items -->
+                <div
+                  v-if="getNestedValue(item, stack.key) && getNestedValue(item, stack.key).length > 0"
+                >
+                  <div
+                    v-for="(subItem, subIdx) in getNestedValue(item, stack.key)"
+                    :key="subIdx"
+                    class="py-0.5"
+                  >
+                    <!-- Render nested stacks for each sub-item -->
+                    <template v-for="(subStack, ssIdx) in (stack.stacks || [])" :key="ssIdx">
+                      <!-- Nested field -->
+                      <div
+                        v-if="subStack.stackType === 'field'"
+                        :class="[fieldAlignClass(subStack), subStack.class || '', 'text-sm']"
+                      >
+                        <component :is="subStack.tag || 'span'">
+                          {{ formatFieldValue(getNestedValue(subItem, subStack.key), subStack) }}
+                        </component>
+                      </div>
+
+                      <!-- Nested row -->
+                      <div
+                        v-else-if="subStack.stackType === 'row'"
+                        class="flex items-center gap-1 text-sm"
+                        :class="rowJustifyClass(subStack)"
+                      >
+                        <template v-for="(subField, sfIdx) in subStack.fields" :key="sfIdx">
+                          <span
+                            v-if="Number(sfIdx) > 0 && subStack.separator"
+                            class="text-gray-400"
+                          >{{ subStack.separator }}</span>
+                          <component
+                            :is="subField.tag || 'span'"
+                            :class="[subField.class || '']"
+                          >
+                            {{ formatFieldValue(getNestedValue(subItem, subField.key), subField) }}
+                          </component>
+                        </template>
+                      </div>
+                    </template>
+                  </div>
+                </div>
+
+                <!-- Empty state -->
+                <p
+                  v-else
+                  class="text-gray-400 text-center text-sm py-2"
+                >
+                  {{ resolveLocalizedValue(stack.emptyText) }}
+                </p>
+              </div>
+            </template>
+          </div>
+        </Card>
+      </div>
+    </div>
+
+    <!-- Empty state -->
+    <div v-else-if="!loading" class="text-center py-8 text-gray-400">
+      {{ resolveLocalizedValue(noDataText) || 'No data available' }}
+    </div>
+
+    <!-- Scrollable area wrapper (applied via scrollHeight setting) -->
+
+    <!-- Pagination -->
+    <Pagination
+      v-if="!hidePagination && serverSideOptions?.itemsLength > 0"
+      :page="serverSideOptions.page"
+      :items-per-page="serverSideOptions.itemsPerPage"
+      :items-length="serverSideOptions.itemsLength"
+      :items-per-page-options="itemsPerPageOptions"
+      @change="handlePaginationChange"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue'
+import Card from './Card.vue'
+import Chip from './buttons/Chip.vue'
+import Button from './Button.vue'
+import Pagination from './Pagination.vue'
+
+const { language } = inject('i18n')
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  settings: {
+    type: Object,
+    default: () => ({})
+  },
+  serverSideOptions: {
+    type: Object,
+    default: () => ({})
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  lang: {
+    type: String,
+    default: 'dv'
+  },
+  noDataText: {
+    type: [String, Object],
+    default: ''
+  },
+  hidePagination: {
+    type: Boolean,
+    default: false
+  },
+  itemsPerPageOptions: {
+    type: Array,
+    default: () => [9, 18, 27, 36]
+  },
+  itemKey: {
+    type: String,
+    default: 'id'
+  }
+})
+
+const emit = defineEmits(['update:options', 'card-click', 'action-click'])
+
+// --- Computed ---
+const stacks = computed(() => props.settings?.cardLayout?.stacks || [])
+
+const gridConfig = computed(() => props.settings?.grid || { sm: 1, md: 2, lg: 3 })
+
+const gridClasses = computed(() => {
+  const sm = gridConfig.value.sm || 1
+  const md = gridConfig.value.md || 2
+  const lg = gridConfig.value.lg || 3
+
+  const colMap = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-2',
+    3: 'grid-cols-3',
+    4: 'grid-cols-4',
+    5: 'grid-cols-5',
+    6: 'grid-cols-6'
+  }
+  const mdMap = {
+    1: 'md:grid-cols-1',
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-3',
+    4: 'md:grid-cols-4',
+    5: 'md:grid-cols-5',
+    6: 'md:grid-cols-6'
+  }
+  const lgMap = {
+    1: 'lg:grid-cols-1',
+    2: 'lg:grid-cols-2',
+    3: 'lg:grid-cols-3',
+    4: 'lg:grid-cols-4',
+    5: 'lg:grid-cols-5',
+    6: 'lg:grid-cols-6'
+  }
+
+  return `grid ${colMap[sm] || 'grid-cols-1'} ${mdMap[md] || 'md:grid-cols-2'} ${lgMap[lg] || 'lg:grid-cols-3'}`
+})
+
+// --- Helpers ---
+const getNestedValue = (obj, path) => {
+  if (!path || !obj) return undefined
+  return path.split('.').reduce((current, key) => current?.[key], obj)
+}
+
+const resolveLocalizedValue = (val) => {
+  if (!val) return ''
+  if (typeof val === 'string') return val
+  if (typeof val === 'object') {
+    const lang = props.lang || language?.value || 'dv'
+    return val[lang] ?? val['en'] ?? ''
+  }
+  return ''
+}
+
+const resolveChipLabel = (chipItem, labelKey) => {
+  if (!labelKey) return String(chipItem ?? '')
+  if (typeof labelKey === 'object') {
+    const lang = props.lang || language?.value || 'dv'
+    const key = labelKey[lang] || labelKey['en']
+    return key ? (getNestedValue(chipItem, key) ?? '') : String(chipItem ?? '')
+  }
+  return getNestedValue(chipItem, labelKey) ?? ''
+}
+
+const formatFieldValue = (value, field) => {
+  if (value == null) return ''
+  if (field?.displayType === 'date' && value) {
+    try {
+      return new Date(value).toLocaleDateString()
+    } catch {
+      return value
+    }
+  }
+  return value
+}
+
+const fieldAlignClass = (stack) => {
+  const alignMap = {
+    'left': 'text-left',
+    'right': 'text-right',
+    'center': 'text-center'
+  }
+  return alignMap[stack.align] || ''
+}
+
+const rowJustifyClass = (stack) => {
+  const justifyMap = {
+    'space-between': 'justify-between',
+    'center': 'justify-center',
+    'start': 'justify-start',
+    'end': 'justify-end',
+    'around': 'justify-around',
+    'evenly': 'justify-evenly'
+  }
+  return justifyMap[stack.justify] || ''
+}
+
+// --- Events ---
+const handlePaginationChange = ({ page, itemsPerPage }) => {
+  emit('update:options', {
+    page,
+    itemsPerPage,
+    sortBy: props.serverSideOptions?.sortBy || [],
+    sortDesc: props.serverSideOptions?.sortDesc || []
+  })
+}
+
+const handleActionClick = (item, field) => {
+  if (field.linkKey) {
+    const url = getNestedValue(item, field.linkKey)
+    if (url) {
+      window.open(url, '_blank', 'noopener,noreferrer')
+      return
+    }
+  }
+  emit('action-click', { item, field })
+}
+</script>
+
+<style scoped>
+@keyframes indeterminate {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(400%); }
+}
+</style>

package/src/components/pgo/Modal.vue

@@ -92,7 +92,7 @@
     }) },
     width: { type: String, default: '' },
     height: { type: String, default: '' },
-    title: { type: [String, Object], default: '' },
+    title: { type: [String, Object, Array], default: '' },
     cardClass: { type: String, default: '' },
     overflow: { type: String, default: 'max-h-[calc(100vh-150px)] overflow-auto' },
     bg: { type: String, default: 'bg-background-color' },

package/src/components/pgo/index.ts

@@ -1,5 +1,6 @@
 import Button from './Button.vue'
 import Card from './Card.vue'
+import CardView from './CardView.vue'
 import HeroIcon from './HeroIcon.vue'
 
 import AppBar from './AppBar.vue'
@@ -50,7 +51,7 @@ import SearchBox from './SearchBox.vue'
 
 
 // export {  Chip, ChipGroup, DataTable, Dropdown, FileUpload, Form }
-export {  Button, Card, HeroIcon, 
+export {  Button, Card, CardView, HeroIcon, 
     AppBar,
     Avatar,
     Banner,

package/src/components/pgo/inputs/Select.vue

@@ -41,7 +41,7 @@
             :required="attrs.required"
             :dir="attrs.dir"
             type="text"
-            :placeholder="isFocused && !searchQuery ? useLanguageSelected(placeholder) : ''"
+            :placeholder="!isFocused || (!isFocused && searchQuery) || selectedLabel ? '' : useLanguageSelected(placeholder)"
             :class="inputClasses"
             @focus="handleFocus"
             @blur="handleBlur"
@@ -49,7 +49,7 @@
           />
 
           <!-- Single select label -->
-          <div v-if="selectedLabel && !multiple" :class="['absolute', computedLang || language === 'dv' ? 'right-0' : 'left-0', ' px-3 truncate pointer-events-none']">
+          <div v-if="selectedLabel && !multiple" :class="['absolute', computedLang == 'dv' ? 'right-0' : 'left-0', ' px-3 truncate pointer-events-none']">
             {{ selectedLabel }}
           </div>
           <!-- Multi-select badges - Show BEFORE input -->
@@ -254,7 +254,7 @@
   const baseUrl = inject('baseUrl')
 
   const computedDir = computed(() => props.dir || cardDir)
-  const computedLang = computed(() => props.lang || cardLang)
+  const computedLang = computed(() => props.lang || language.value)
 
   const isOpen = ref(false)
 

package/src/pgo-components/__index.js

@@ -16,6 +16,7 @@ import Footer from '../components/pgo/Footer.vue'
 import PApp from '../components/pgo/PApp.vue'
 import Button from '../components/pgo/Button.vue'
 import Card from '../components/pgo/Card.vue'
+import CardView from '../components/pgo/CardView.vue'
 import Select from '../components/pgo/inputs/Select.vue'
 import AppBar from '../components/pgo/AppBar.vue'
 import NavigationDrawer from '../components/pgo/NavigationDrawer.vue'
@@ -45,6 +46,7 @@ export {
   PApp,
   Button,
   Card,
+  CardView,
 }
 
 // Export plugin

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

@@ -239,6 +239,7 @@ import {
   TimelineExample,
   TooltipExample,
   VueDatePickerShowcase,
+  CardViewExample,
 } from '@/components/examples/index.ts'
 
 // ─── Example component map (index → component) ────────────────────────────
@@ -269,6 +270,7 @@ const exampleMap = [
   TimelineExample,       // 23
   TooltipExample,        // 24
   VueDatePickerShowcase, // 25
+  CardViewExample,       // 26
 ]
 
 // ─── Category definitions with colour tokens ──────────────────────────────
@@ -356,6 +358,7 @@ const categories = [
     badgeClass:    'text-cyan-600 border-cyan-300 bg-cyan-50',
     items: [
       { name: 'DataTable', index: 19 },
+      { name: 'CardView', index: 26 },
     ],
   },
   {
@@ -1390,6 +1393,36 @@ const docs = [
     slots: [],
   },
 
+  // ── 26 · CardView ───────────────────────
+  {
+    name: 'CardView',
+    description: 'A stack-based card layout for displaying data in a responsive grid of cards. Supports configurable stacks: field, row (with separator), divider, chips, and recursive section. Driven by a cardLayout config from CCS.',
+    usage:
+`<CardView
+  :items="items"
+  :settings="{ grid: { sm: 1, md: 2, lg: 3 }, scrollHeight: '300px', cardLayout: { stacks: [...] } }"
+  :server-side-options="options"
+  lang="en"
+  @update:options="handlePagination"
+  @action-click="handleAction"
+/>`,
+    props: [
+      { name: 'items', type: 'Array', default: '[]', description: 'Array of data objects to render as cards.' },
+      { name: 'settings', type: 'Object', default: '{}', description: 'Card settings: grid, scrollHeight, cardLayout (stacks array).' },
+      { name: 'serverSideOptions', type: 'Object', default: '{}', description: 'Pagination state: page, itemsPerPage, itemsLength, sortBy, sortDesc.' },
+      { name: 'loading', type: 'Boolean', default: 'false', description: 'Show loading overlay.' },
+      { name: 'lang', type: 'String', default: "'en'", description: 'Language code for localized label resolution.' },
+      { name: 'noDataText', type: 'String|Object', default: "'No data'", description: 'Text shown when items is empty.' },
+      { name: 'hidePagination', type: 'Boolean', default: 'false', description: 'Hide the pagination footer.' },
+    ],
+    events: [
+      { name: 'update:options', payload: 'Object', description: 'Emitted when pagination changes (page, itemsPerPage).' },
+      { name: 'card-click', payload: '{ item }', description: 'Emitted when a card is clicked.' },
+      { name: 'action-click', payload: '{ item, field }', description: 'Emitted when a button stack is clicked.' },
+    ],
+    slots: [],
+  },
+
 ]
 </script>