feat: data-t attribute for translation raw inside html templates

PlusAuth · Dec 5, 2024 · 26dbd3c · 26dbd3c
1 parent f0c00c4
commit 26dbd3c
Showing 1 changed file with 11 additions and 6 deletions.
diff --git a/src/ui/index.ts b/src/ui/index.ts
@@ -23,12 +23,6 @@ export function createWidget(container: Element | string,
   widget.config.globalProperties.$i18n = inject.i18n
   widget.config.globalProperties.settings = settings
 
-  watch(translator.localeRef, (locale) => {
-    if (locale) {
-      translator.locale = locale
-    }
-  })
-
   installComponents(widget)
 
   container = typeof container === 'string' ? document.querySelector(container)! : container
@@ -41,5 +35,16 @@ export function createWidget(container: Element | string,
   widget.provide('templates', templates)
   widget.mount(container)
 
+  watch(translator.localeRef, (locale) => {
+    if(locale !== translator.locale ){
+      translator.locale = locale
+    }
+    if (locale) {
+      document.querySelectorAll('[data-t]').forEach((el) => {
+        el.textContent = translator.t((el as HTMLElement).dataset.t)
+      });
+    }
+  }, { immediate: true, flush: 'post' })
+
   return widget;
 }