pgo-ui 1.0.78 → 1.0.79

package/package.json

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

package/src/components/pgo/AppBar.vue

@@ -17,7 +17,7 @@
       densityClass,
       collapseClass
     ]"
-    :style="[themeStyles, customStyle,]"
+    :style="[themeStyles, customStyle, fontPinStyle]"
   >
     <div
         :class="['w-full flex items-center justify-between', innerDirectionClass, dense ? 'h-12' : 'h-16']"
@@ -86,31 +86,43 @@
               </div>
             </div>
 
-            <!-- Font Size Accessibility -->
-            <div class="flex items-center">
-              <button
-                @click="onDecreaseFontScale"
-                :disabled="fontScaleAtMin"
-                class="px-1.5 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
-                title="Decrease font size"
-              >
-                <span class="font-bold" style="font-size: 0.7rem;">A-</span>
-              </button>
-              <button
-                @click="onResetFontScale"
-                class="px-1 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer"
-                title="Reset font size"
-              >
-                <span style="font-size: 0.65rem;">{{ currentFontScale }}%</span>
+            <!-- Accessibility Menu -->
+            <div class="relative" ref="a11yMenuRef">
+              <button @click="toggleA11yMenu" class="px-2 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer">
+                <HeroIcon name="user-circle" size="22" color="text-current" />
               </button>
-              <button
-                @click="onIncreaseFontScale"
-                :disabled="fontScaleAtMax"
-                class="px-1.5 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
-                title="Increase font size"
+              <div
+                v-if="isA11yOpen"
+                :class="['absolute vts-mt-2 w-40 rounded shadow-lg z-50 p-3', overflowPositionClass]"
+                :style="{ backgroundColor: 'var(--vts-color-surfaceElevated)', borderColor: 'var(--vts-color-divider)' }"
               >
-                <span class="font-bold" style="font-size: 0.85rem;">A+</span>
-              </button>
+                <div class="text-xs opacity-60 mb-2">Font Size</div>
+                <div class="flex items-center justify-between">
+                  <button
+                    @click="onDecreaseFontScale"
+                    :disabled="fontScaleAtMin"
+                    class="px-1.5 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
+                    title="Decrease font size"
+                  >
+                    <span class="font-bold" style="font-size: 0.7rem;">A-</span>
+                  </button>
+                  <button
+                    @click="onResetFontScale"
+                    class="px-1 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer"
+                    title="Reset font size"
+                  >
+                    <span style="font-size: 0.65rem;">{{ currentFontScale }}%</span>
+                  </button>
+                  <button
+                    @click="onIncreaseFontScale"
+                    :disabled="fontScaleAtMax"
+                    class="px-1.5 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
+                    title="Increase font size"
+                  >
+                    <span class="font-bold" style="font-size: 0.85rem;">A+</span>
+                  </button>
+                </div>
+              </div>
             </div>
 
             <!-- Language Selector -->
@@ -211,6 +223,8 @@
   })
 
   const globalRtl = inject('globalRtl', ref(false))
+  const fontScaleMode = inject('fontScaleMode', ref('app'))
+  const fontPinStyle = computed(() => fontScaleMode.value === 'body' ? { fontSize: '16px' } : {})
   const selectedRtl = computed(() => props.rtl !== undefined ? props.rtl : globalRtl.value)
 
   /* ---------------------------------------------
@@ -225,6 +239,10 @@
   const currentFontScale = computed(() => globalFontScale.value)
   const fontScaleAtMin = computed(() => globalFontScale.value <= FONT_SCALE_STEPS[0])
   const fontScaleAtMax = computed(() => globalFontScale.value >= FONT_SCALE_STEPS[FONT_SCALE_STEPS.length - 1])
+
+  const isA11yOpen = ref(false)
+  const a11yMenuRef = ref<HTMLElement | null>(null)
+  const toggleA11yMenu = () => (isA11yOpen.value = !isA11yOpen.value)
   /* ---------------------------------------------
  * layout integration
  ----------------------------------------------*/
@@ -340,17 +358,13 @@
   }
 
   function onDocumentClick(e: MouseEvent) {
-    if (!isLangOpen.value) return
-    isLangOpen.value = false
-    // const root = langMenuRef.value
-    // const target = e.target as Node | null
-    // if (!root || !target) {
-    //   isLangOpen.value = false
-    //   return
-    // }
-    // if (!root.contains(target)) {
-    //   isLangOpen.value = false
-    // }
+    const target = e.target as Node | null
+    if (isLangOpen.value && langMenuRef.value && target && !langMenuRef.value.contains(target)) {
+      isLangOpen.value = false
+    }
+    if (isA11yOpen.value && a11yMenuRef.value && target && !a11yMenuRef.value.contains(target)) {
+      isA11yOpen.value = false
+    }
   }
 
 function getLangLabel(lang: string) {

package/src/components/pgo/DataTable copy 2.vue

@@ -206,7 +206,7 @@
                           cellText,
                           textAlign[header?.align ?? 'defaults'],
                         ]"
-                      >
+                      >   
                         <template v-if="getCustomColumnData(header, item)?.type === 'CopyTextBox'">
                           <div class="flex flex-wrap items-center gap-1">
                             <template

package/src/components/pgo/DataTable.vue

@@ -16,7 +16,7 @@
                 type="text"
                 :placeholder="searchPlaceholder"
                 :class="[
-                  'pl-10 pr-4 py-2 rounded-lg w-64 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0',
+                  'pl-10 pr-4 py-2 rounded-lg w-64 text-base transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0',
                   inputBorder
                 ]"
                 @input="debounceSearch"
@@ -44,7 +44,7 @@
         </div>
 
         <!-- Desktop Table View -->
-        <table :dir="dir" class="w-full caption-bottom text-sm hidden md:table" style="table-layout: fixed;">
+        <table :dir="dir" class="w-full caption-bottom text-base hidden md:table" style="table-layout: fixed;">
           <!-- Colgroup for consistent column widths -->
           <colgroup>
             <col v-if="selectable" style="width: 48px;" />
@@ -146,7 +146,7 @@
                   <svg class="w-12 h-12 text-gray-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                   </svg>
-                  <span class="text-sm text-gray-500">{{ noDataText }}</span>
+                  <span class="text-base text-gray-500">{{ noDataText }}</span>
                 </div>
               </td>
             </tr>
@@ -196,7 +196,7 @@
                       <!-- html -->
                       <div
                         v-if="header.displayType == 'html'" :class="[
-                          'text-sm truncate',
+                          'text-base truncate',
                           cellText,
                           textAlign[header?.align ?? 'defaults'],
                         ]" v-html="getCustomColumnData(header, item)"
@@ -205,22 +205,22 @@
                       <!-- Custom column -->
                       <div
                         v-else-if="header.displayType == 'custom'" :class="[
-                          'text-sm',
+                          'text-base truncate',
                           cellText,
                           textAlign[header?.align ?? 'defaults'],
                         ]"
                       >
                         <template v-if="getCustomColumnData(header, item)?.type === 'CopyTextBox'">
-                          <div class="flex flex-wrap items-center gap-1">fff
+                          <div class="flex flex-wrap items-center gap-1">
                             <template
                               v-for="(chip, idx) in getCustomColumnData(header, item).CopyTextBox"
                               :key="idx"
-                            >dda
+                            >
                               <CopyTextBox
                                 :text="chip.text"
                                 class="mr-1 "
                               />
- b
+
                             </template>
                           </div>
                         </template>
@@ -232,7 +232,7 @@
                         v-else-if="header.displayType == 'copyButton'"
                         :class="['align-middle leading-0', getColumnFont(lang)]"
                       >
-                      
+
                         <CopyTextBox
                           :text="getNestedValue(item, header.value)"
                           class="mr-1 "
@@ -276,7 +276,7 @@
                           v-bind="header.select"
                           @update:model-value="(value) => handleCellUpdate(item, header.value, value, index)"
                         />
-                        <div v-else :class="['text-sm', cellText]">
+                        <div v-else :class="['text-base', cellText]">
                           {{ formatCellValue(getNestedValue(item, header.value), header) }}
                         </div>
                       </div>
@@ -290,10 +290,10 @@
                           v-if="editMode && header.inlineEditable"
                           :value="getNestedValue(item, header.value)"
                           type="text"
-                          class="w-full px-2 py-1 text-sm border rounded focus:outline-none focus:ring-2 focus:ring-primary"
+                          class="w-full px-2 py-1 text-base border rounded focus:outline-none focus:ring-2 focus:ring-primary"
                           @input="(e) => handleCellUpdate(item, header.value, e.target.value, index)"
                         >
-                        <div v-else :class="['text-sm', cellText]">
+                        <div v-else :class="['text-base', cellText]">
                           {{ formatCellValue(getNestedValue(item, header.value), header) }}
                         </div>
                       </div>
@@ -308,11 +308,54 @@
                           @view-file="emit('viewpdf', $event)"
                         />
                       </div>
+                      <!-- Nested List Display -->
+                      <div
+                        v-else-if="header.displayType == 'nestedList'"
+                        :class="['align-middle leading-normal', getColumnFont(lang)]"
+                      >
+                        <div
+                          v-for="(nestedItem, nIdx) in (getNestedValue(item, header.value) || [])"
+                          :key="nIdx"
+                          :class="[
+                            'py-1.5',
+                            nIdx > 0 ? 'border-t border-input-border' : ''
+                          ]"
+                        >
+                          <div
+                            v-for="col in header.nestedColumns"
+                            :key="col.key"
+                            class="flex items-center gap-2 py-0.5"
+                          >
+                            <span :class="['text-xs font-medium shrink-0 w-20', headerText]">
+                              {{ col.label?.[lang] || col.label?.en || col.key }}
+                            </span>
+                            <div class="flex-1 min-w-0">
+                              <!-- Chip -->
+                              <Chip
+                                v-if="col.displayType === 'chip' && col.chip?.[String(nestedItem[col.key])]"
+                                v-bind="col.chip[String(nestedItem[col.key])]"
+                                size="small"
+                              />
+                              <!-- HTML -->
+                              <div
+                                v-else-if="col.displayType === 'html'"
+                                :class="['text-sm', cellText]"
+                                v-html="nestedItem[col.key]"
+                              />
+                              <!-- Text (default) -->
+                              <span v-else :class="['text-sm', cellText]">
+                                {{ nestedItem[col.key] ?? '-' }}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <span v-if="!getNestedValue(item, header.value)?.length" class="text-xs text-gray-400">-</span>
+                      </div>
 
                       <!-- Default Text Display -->
                       <bdi
                         v-else :class="[
-                          'text-sm',
+                          'text-base',
                           cellText,
                           textAlign[header.align ?? 'defaults'],
                           header.displayType == 'englishText' || header.displayType == 'date' ? 'eng-font' : getColumnFont(lang),
@@ -351,7 +394,7 @@
               <svg class="w-12 h-12 text-gray-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
               </svg>
-              <span class="text-sm text-gray-500">{{ noDataText }}</span>
+              <span class="text-base text-gray-500">{{ noDataText }}</span>
             </div>
           </div>
 
@@ -398,8 +441,8 @@
                   :header="header"
                   :index="index"
                 >
-                  <div v-if="header.displayType == 'html'" :class="['text-sm', cellText]" v-html="getCustomColumnData(header, item)" />
-                  <div v-else-if="header.displayType == 'custom'" :class="['text-sm', cellText]">
+                  <div v-if="header.displayType == 'html'" :class="['text-base', cellText]" v-html="getCustomColumnData(header, item)" />
+                  <div v-else-if="header.displayType == 'custom'" :class="['text-base', cellText]">
                     <template v-if="getCustomColumnData(header, item)?.type === 'CopyTextBox'">
                       <div class="flex flex-wrap items-center gap-1 justify-end">
                         <CopyTextBox v-for="(chip, idx) in getCustomColumnData(header, item).CopyTextBox" :key="idx" v-bind="chip" />
@@ -420,7 +463,26 @@
                   <div v-else-if="header.displayType == 'docButton'" :class="['align-middle', getColumnFont(header.lang)]">
                     <FileDisplay :item="getNestedValue(item, header.value)" v-bind="header.docButton" @view-file="emit('viewpdf', $event)" />
                   </div>
-                  <bdi v-else :class="['text-sm', cellText, header.displayType == 'englishText' || header.displayType == 'date' ? 'eng-font' : getColumnFont(lang)]">
+                  <div v-else-if="header.displayType === 'nestedList'" :class="['align-middle', getColumnFont(lang)]">
+                    <div
+                      v-for="(nestedItem, nIdx) in (getNestedValue(item, header.value) || [])"
+                      :key="nIdx"
+                      :class="['py-1.5', nIdx > 0 ? 'border-t border-input-border' : '']"
+                    >
+                      <div v-for="col in header.nestedColumns" :key="col.key" class="flex items-center gap-2 py-0.5">
+                        <span :class="['text-xs font-medium shrink-0 w-20', headerText]">
+                          {{ col.label?.[lang] || col.label?.en || col.key }}
+                        </span>
+                        <div class="flex-1 min-w-0">
+                          <Chip v-if="col.displayType === 'chip' && col.chip?.[String(nestedItem[col.key])]" v-bind="col.chip[String(nestedItem[col.key])]" size="small" />
+                          <div v-else-if="col.displayType === 'html'" :class="['text-sm', cellText]" v-html="nestedItem[col.key]" />
+                          <span v-else :class="['text-sm', cellText]">{{ nestedItem[col.key] ?? '-' }}</span>
+                        </div>
+                      </div>
+                    </div>
+                    <span v-if="!getNestedValue(item, header.value)?.length" class="text-xs text-gray-400">-</span>
+                  </div>
+                  <bdi v-else :class="['text-base', cellText, header.displayType == 'englishText' || header.displayType == 'date' ? 'eng-font' : getColumnFont(lang)]">
                     {{ formatCellValue(getNestedValue(item, header.value), header) }}
                   </bdi>
                 </slot>
@@ -482,7 +544,7 @@
 
       title="Confirm Update"
     >
-      <p class="text-sm text-gray-600 mb-6">
+      <p class="text-base text-gray-600 mb-6">
         Are you sure you want to update <strong>{{ pendingUpdate.header }}</strong>
         from <strong>{{ pendingUpdate.oldValue }}</strong> to <strong>{{ pendingUpdate.newValue }}</strong>?
       </p>

package/src/components/pgo/HeroIcon.vue

@@ -16,7 +16,7 @@
     :height="sizePx"
     viewBox="0 0 24 24"
     fill="none"
-    stroke="currentColor"
+    :stroke="color"
     stroke-width="1.5"
     aria-hidden="true"
   >

package/src/components/pgo/Main.vue

@@ -17,7 +17,6 @@ const el = ref<HTMLElement | null>(null);
 const contentClass = computed(() => "");
 
 const style = computed(() => {
-//   console.log("Layout in Main.vue horizontal:", layout?.horizontalOffset?.value);
   const top = layout?.topOffset?.value || 0;
   const bottom = layout?.bottomOffset?.value || 0;
   const { left, right } = layout?.horizontalOffset?.value || {

package/src/components/pgo/NavigationDrawer.vue

@@ -189,11 +189,13 @@ function isActive(item: any) {
   return item.href === currentPath.value
 }
 
+  const fontScaleMode = inject('fontScaleMode', ref('app'))
   const themeStyles = computed(() => ({
     backgroundColor: 'var(--vts-color-surface)',
     color: 'var(--vts-color-text)',
     borderRight: '1px solid var(--vts-color-border)',
-    boxShadow: 'var(--vts-elevation-2)'
+    boxShadow: 'var(--vts-elevation-2)',
+    ...(fontScaleMode.value === 'body' ? { fontSize: '16px' } : {}),
   }))
 
   const scrimThemeStyles = computed(() => ({

package/src/components/pgo/Pagination.vue

@@ -22,7 +22,7 @@
     </bdi>
 
     <div :class="['flex items-center gap-2 text-base font-medium', textColor]">
-      <bdi :class="language == 'dv' ? 'text-right faruma' : 'text-left'">{{ startItem }}-{{ endItem }} {{ t('pagination.of') }} {{ itemsLength }}</bdi>
+      <bdi :class="language == 'dv' ? 'text-right faruma' : 'text-left'">{{ startItem }}-{{ endItem }} {{  itemsPerPage <= 1 ? t('pagination.of') : '' }} {{ itemsPerPage <= 1 ? itemsLength : '' }}</bdi>
     </div>
 
     <!-- Pagination controls -->

package/src/components/pgo/base/Base.vue

@@ -20,7 +20,7 @@
         {{ selectedlabels ? selectedlabels ?? selectedlabels.label  : label }}
       </div>
       <!-- main -->
-      <div class="flex items-center w-full gap-2 overflow-hidden min-w-0">
+      <div class="flex items-center w-full gap-2 overflow-hidden min-w-0 text-base">
         <div v-if="$slots.prepend || prepend" class="shrink-0">
           <slot name="prepend">
             <HeroIcon :size="iconSizes[size]" :name="prepend" :type="iconType == 'outline' ? 'outline' : 'solid'" />
@@ -434,11 +434,17 @@ function onInput(val) {
   // m on mount
 onMounted(() => {
   // Capture the initial width of the container to prevent it from growing
-    nextTick(() => {
-      if (inputContainerRef.value) {
-        containerMaxWidth.value = inputContainerRef.value.offsetWidth + 'px'
-      }
-    })
+  // Use ResizeObserver to wait until the element actually has a width (avoids 0px on initial load)
+    if (inputContainerRef.value) {
+      const ro = new ResizeObserver((entries) => {
+        const width = entries[0]?.contentRect?.width
+        if (width > 0) {
+          containerMaxWidth.value = width + 'px'
+          ro.disconnect()
+        }
+      })
+      ro.observe(inputContainerRef.value)
+    }
   if (formContext) {
     formContext.register(uid, {
       rules: props.rules,

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

@@ -34,7 +34,7 @@
       <template #control="{ attrs, events }">
         <div
           :class="[
-            'flex-none items-center h-full gap-1 min-w-0 w-full overflow-hidden',
+            'flex items-center h-full gap-1 min-w-0 w-full overflow-hidden',
             shouldAutoHeight ? 'flex-wrap py-1 -my-1' : '',
           ]"
         >
@@ -128,7 +128,7 @@
           name="chevron-down"
           type="outline"
           size="16"
-          :class="['transition-transform duration-200', isOpen ? 'rotate-180' : '', 'text-input-border']"
+          :class="['transition-transform duration-200', isOpen ? 'rotate-180' : '',]"
         />
         <svg v-else-if="loading" class="animate-spin h-4 w-4 text-input-border" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
           <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>

package/src/index.js

@@ -17,8 +17,8 @@ import { drawerOpen } from './pgo-components/lib/drawerState.ts'
 import {globalRtl} from './pgo-components/lib/core/rtl/rtl.ts'
 import { setRtl } from './pgo-components/lib/core/rtl/setRtl.ts'
 
-import { globalFontScale } from './pgo-components/lib/core/fontSize/fontSize.ts'
-import { setFontScale, increaseFontScale, decreaseFontScale, resetFontScale } from './pgo-components/lib/core/fontSize/setFontScale.ts'
+import { globalFontScale, fontScaleMode } from './pgo-components/lib/core/fontSize/fontSize.ts'
+import { setFontScale, setFontScaleMode, increaseFontScale, decreaseFontScale, resetFontScale } from './pgo-components/lib/core/fontSize/setFontScale.ts'
 
 //components
 import {Button, Card, HeroIcon} from './components/pgo/index.ts' // for Global registration
@@ -31,7 +31,8 @@ export { globalRtl }
 export { setRtl }
 export { drawerOpen }
 export { globalFontScale }
-export { setFontScale, increaseFontScale, decreaseFontScale, resetFontScale }
+export { setFontScale, setFontScaleMode, increaseFontScale, decreaseFontScale, resetFontScale }
+export { fontScaleMode }
 // export { useSnackBar }
 export { _useTheme as useTheme }
 export { createThemePlugin } from './pgo-components/plugins/theme-plugin.js'
@@ -52,7 +53,9 @@ if (typeof window !== 'undefined') {
   window.__VTS_THEMES__ = Object.keys(themes)
 }
 
-// set font scale default
+// set font scale mode from env, then restore saved scale
+const scaleMode = import.meta.env.VITE_FONT_SCALE_MODE === 'body' ? 'body' : 'app'
+setFontScaleMode(scaleMode)
 const savedFontScale = localStorage.getItem('fontScaleSetting')
 if (savedFontScale !== null) {
   setFontScale(parseInt(savedFontScale))
@@ -82,6 +85,7 @@ export default {
     app.provide('setRtl', setRtl)
     app.provide('drawerOpen', drawerOpen)
     app.provide('globalFontScale', globalFontScale)
+    app.provide('fontScaleMode', fontScaleMode)
     app.provide('increaseFontScale', increaseFontScale)
     app.provide('decreaseFontScale', decreaseFontScale)
     app.provide('resetFontScale', resetFontScale)

package/src/pgo-components/lib/core/fontSize/fontSize.ts

@@ -1,3 +1,4 @@
 import { ref } from "vue"
 
 export const globalFontScale = ref(100)
+export const fontScaleMode = ref<'app' | 'body'>('app')

package/src/pgo-components/lib/core/fontSize/setFontScale.ts

@@ -1,12 +1,18 @@
-import { globalFontScale } from './fontSize.ts'
+import { globalFontScale, fontScaleMode } from './fontSize.ts'
 
 export const FONT_SCALE_STEPS = [85, 100, 115, 130, 145]
 const STORAGE_KEY = 'fontScaleSetting'
 
+export function setFontScaleMode(mode: 'app' | 'body') {
+    fontScaleMode.value = mode
+}
+
 export function setFontScale(percentage: number) {
     globalFontScale.value = percentage
     localStorage.setItem(STORAGE_KEY, String(percentage))
     if (typeof document !== 'undefined') {
+        // Always set root font-size so rem-based text scales.
+        // In "body" mode, AppBar/NavigationDrawer pin themselves at 16px.
         document.documentElement.style.fontSize = `${percentage}%`
     }
 }

package/dist/Radio-CuaoA4ip.js

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