pgo-ui 1.1.11 → 1.1.13

package/package.json

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

package/src/App.vue

@@ -68,6 +68,13 @@
 
         <!-- APPEND -->
         <template #append>
+          <button
+            class="p-2 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer"
+            :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+            @click="toggleThemeVariant"
+          >
+            <HeroIcon :name="isDark ? 'sun' : 'moon'" size="22" color="text-current" />
+          </button>
           <button class="p-2 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer">
             <HeroIcon name="arrow-right-start-on-rectangle" size="22" color="text-current" />
           </button>
@@ -187,6 +194,15 @@
   // const setRtl = inject('setRtl')
   const drawerOpen = inject('drawerOpen')
 
+  // Theme variant toggle — reads/writes the global VTS plugin; persistence handled by plugin
+  const themePlugin = typeof window !== 'undefined' ? /** @type {any} */ (window).__VTS_PLUGIN__ : null
+  const isDark = computed(() => themePlugin?.state?.variant === 'dark')
+  function toggleThemeVariant() {
+    if (!themePlugin?.setTheme) { return }
+    const next = isDark.value ? 'light' : 'dark'
+    themePlugin.setTheme(themePlugin.state?.theme ?? 'default', next)
+  }
+
   // function onClick() {
   //   alert('Clicked')
   // }

package/src/components/pgo/AppBar.vue

@@ -351,7 +351,7 @@
   })
   function selectLanguage(lang: string) {
     if (typeof setLanguage === 'function') setLanguage(lang)
-    window.location.reload()
+    // window.location.reload()
     isLangOpen.value = false
   }
 

package/src/components/pgo/CopyTextBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-tooltip="{en: 'Copy', dv: 'ކޮޕީ'}" :class="['cursor-pointer hover:text-gray-800 font-normal ', getColumnFont(lang)]"  @click="handleChipClick">
+  <div v-tooltip="{en: 'Copy', dv: 'ކޮޕީ'}" :class="['cursor-pointer hover:text-gray-800 font-normal font-en',]"  @click="handleChipClick">
       {{ text }}
   </div>
 </template>

package/src/components/pgo/DataTable.vue

@@ -450,13 +450,13 @@
                   <div v-if="header.displayType == 'html'" :class="['text-base', cellText]" v-html="getNestedValue(item, header.value)" />
                   <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">
+                      <div class="flex flex-wrap items-center gap-1 justify-end font-en">
                         <CopyTextBox v-for="(chip, idx) in getCustomColumnData(header, item).CopyTextBox" :key="idx" v-bind="chip" />
                       </div>
                     </template>
                     <div v-else v-html="getCustomColumnData(header, item)" />
                   </div>
-                  <div v-else-if="header.displayType == 'copyButton'" :class="['align-middle', getColumnFont(lang)]">
+                  <div v-else-if="header.displayType == 'copyButton'" :class="['align-middle font-en',]">
                     <CopyTextBox :text="getNestedValue(item, header.value)" />
                   </div>
                   <div v-else-if="header.displayType == 'chip'" :class="['align-middle', getColumnFont(lang)]">

package/src/components/pgo/DocumentViewer.vue

@@ -3,7 +3,7 @@
     v-model="open"
     :persistent="true"
     padding="p-0"
-    :width="modalWidth"
+    :width="width"
     :fullscreen="fullscreen"
     rounded="sm"
     overflow="overflow-hidden"
@@ -76,7 +76,7 @@ const props = defineProps({
   modelValue:   { type: Boolean, default: false },
   src:          { type: String, default: '' },
   title:        { type: [String, Object], default: 'Document Viewer' },
-  modalWidth:   { type: String, default: 'w-full sm:w-[900px]' },
+  width:   { type: String, default: 'w-full sm:w-[900px]' },
   modalHeight:  { type: String, default: 'h-[75vh]' },
   fullscreen:   { type: Boolean, default: false },
   initialPage:  { type: Number, default: 1 },

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

@@ -6,6 +6,7 @@
       :show-download="true"
       :show-print="true"
       :title="pdf?.title"
+      :width="'900'"
       z-index="z-[99999999]"
     />
     <!-- <FileDisplay