Merge pull request #46 from devforth/added_component_interpolation_instead_v_html

Changed v-html translations to t-i18n-component

Author: ivictbor

adminforth/documentation/docs/tutorial/05-Plugins/10-i18n.md

@@ -273,15 +273,24 @@ const adminForth = new AdminForth({
 
 ### HTML in translations
 
-Sometimes you might want to have HTML in translations. You can use `v-html` directive for this. For example:
+Sometimes you might want to have HTML in translations. You can use `i18n-t` translation component for this. For example:
 
 ```html
-<h1 class="mb-4 text-xl font-extrabold text-gray-900 dark:text-white md:text-2xl lg:text-3xl"
-      v-html='$t("<span class=\"text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400\">Apartments</span> Statistics.")'></h1>
+<span class="hidden sm:inline">
+  <i18n-t keypath="Showing {from} to {to} of {total} Entries" tag="p"  >
+    <template v-slot:from>
+      <strong>{{ from }}</strong>
+    </template>
+    <template v-slot:to>
+      <strong>{{ to }}</strong>
+    </template>
+    <template v-slot:total>
+      <strong>{{ totalRows }}</strong>
+    </template>
+  </i18n-t>
+</span>
 ```
 
-> 🪪 Security alert. Please keep in mind that if you are using `v-html="$t(`, the roles who have access to translations resource can make HTML/XSS injections, though anyway if you are using [Audit Log](/docs/tutorial/Plugins/AuditLog/) plugin you can track all changes in translations and understand who made them.
-
 ### Pluralization
 
 Frontend uses same pluralization rules as vue-i18n library. You can use it in the same way. For example:

adminforth/spa/src/components/ResourceListTable.vue

@@ -234,16 +234,33 @@
     <span class="text-sm text-gray-700 dark:text-gray-400">
         <span v-if="((page || 1) - 1) * pageSize + 1 > totalRows">{{ $t('Wrong Page') }} </span>
         <template v-else>
-          <span class="hidden sm:inline"
-            v-html="$t('Showing {from} to {to} of {total} Entries', {from: ((page || 1) - 1) * pageSize + 1, to: Math.min((page || 1) * pageSize, totalRows), total: totalRows})
-              .replace(/\d+/g, '<strong>$&</strong>')">
-          </span>
-          <span class="sm:hidden"
-            v-html="$t('{from} - {to} of {total}', {from: ((page || 1) - 1) * pageSize + 1, to: Math.min((page || 1) * pageSize, totalRows), total: totalRows})
-              .replace(/\d+/g, '<strong>$&</strong>')
-            ">
+          
+          <span class="hidden sm:inline">
+            <i18n-t keypath="Showing {from} to {to} of {total} Entries" tag="p"  >
+              <template v-slot:from>
+                <strong>{{ from }}</strong>
+              </template>
+              <template v-slot:to>
+                <strong>{{ to }}</strong>
+              </template>
+              <template v-slot:total>
+                <strong>{{ totalRows }}</strong>
+              </template>
+            </i18n-t>
           </span>
-
+          <span class="sm:hidden">
+            <i18n-t keypath="{from} - {to} of {total}" tag="p"  >
+              <template v-slot:from>
+                <strong>{{ from }}</strong>
+              </template>
+              <template v-slot:to>
+                <strong>{{ to }}</strong>
+              </template>
+              <template v-slot:total>
+                <strong>{{ totalRows }}</strong>
+              </template>
+            </i18n-t>
+          </span> 
         </template>
     </span>
   </div>
@@ -302,6 +319,8 @@ const page = ref(1);
 const sort = ref([]);
 
 
+const from = computed(() => ((page.value || 1) - 1) * props.pageSize + 1);
+const to = computed(() => Math.min((page.value || 1) * props.pageSize, props.totalRows));
 
 watch(() => page.value, (newPage) => {
   emits('update:page', newPage);