pgo-ui 1.1.12 → 1.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgo-ui",
-  "version": "1.1.12",
+  "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>