@kong-ui-public/i18n 0.2.9-pr.129.9aef2e9.0 → 0.2.9-pr.150.06758e7.0

package/README.md

@@ -161,6 +161,8 @@ _Please, do not use this method in any new code. This prevents using parameters/
 
 ### HTML safe formatting with `<i18n-t>`
 
+#### When registered as Vue Plugin
+
 Sometimes it is needed to render translated message with HTML as part of the parameters. For this Provided component can be used.
 
 `en.json:`
@@ -174,7 +176,6 @@ Sometimes it is needed to render translated message with HTML as part of the par
 }
 ```
 
-
 `main.ts` (registing component)
 
 ```ts
@@ -244,6 +245,60 @@ And then, anywhere in application code where `i18n` is needed
 <h1><b>Morning</b>, my name is <i>Val</i>. And I am <i>Money Asker</i>. I want <div class="red">$1,000.00</div></h1>
 ```
 
+#### With direct use of i18nT component
+
+In some cases we do not have access to the Vue `app` and cannot relay on registered i18nT plugin. Working on standalone components in `public-ui-components` is of those cases. And for this your component will look like:
+
+
+```html
+<template>
+  <i18n-t
+    tag="h1"
+    keypath="global.default">
+      <a href="https://google.com">Google</a>
+  </i18n-t>
+</template>
+
+<script setup lang="ts">
+  import { createI18n, i18nTComponent } from '@kong-ui-public/i18n'
+  import english from './locales/en.json'
+
+  const i18n = createI18n('en-us', english)
+  const i18nT = i18nTComponent(i18n)
+
+</script>
+```
+
+Or in old `defineComponent` way
+
+```html
+
+<template>
+  <i18n-t
+    :i18n="i18n"
+    tag="h1"
+    keypath="global.default">
+      <a href="https://google.com">Google</a>
+  </i18n-t>
+</template>
+
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import { createI18n, i18nTComponent } from '../src'
+  import english from './locales/en.json'
+
+  export default defineComponent({
+    components: { i18nT: i18nTComponent() },
+    setup() {
+      return {
+        i18n: createI18n('en-us', english)
+      }
+    }
+  })
+</script>
+```
+
 ## Formatting numbers, dates and times
 
 This comes for free from FormatJS, and documentation on those methods can be found there: [FormatJS](https://formatjs.io/docs/intl)

package/dist/i18n.es.js

@@ -3304,9 +3304,13 @@ const gr = (e, t, n = !1) => {
 function pr() {
   return Ve;
 }
-const cr = (e) => ke({
+const cr = (e = null) => ke({
   name: "I18nT",
   props: {
+    i18n: {
+      type: Object,
+      default: null
+    },
     keypath: {
       type: String,
       required: !0
@@ -3324,7 +3328,7 @@ const cr = (e) => ke({
       return i.split(a).filter(Boolean);
     };
     return () => {
-      const i = Object.keys(n).filter((s) => s !== "_"), a = e.messages[t.keypath].toString();
+      const i = Object.keys(n).filter((s) => s !== "_"), a = (e || t.i18n).messages[t.keypath].toString();
       let o = r(a);
       return o = o.filter((s) => s !== ""), o.forEach((s, h) => {
         if (!s.startsWith("{") && !s.endsWith("}"))
@@ -3343,6 +3347,7 @@ const cr = (e) => ke({
 export {
   vr as Translation,
   gr as createI18n,
+  cr as i18nTComponent,
   pr as useI18n
 };
 //# sourceMappingURL=i18n.es.js.map