@kong-ui-public/i18n 0.3.5-pr.231.a506685.0 → 0.3.5-pr.231.d61ae69.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -9
- package/dist/i18n.es.js.map +1 -1
- package/dist/i18n.umd.js.map +1 -1
- package/dist/types/Translation.d.ts +2 -2
- package/dist/types/Translation.d.ts.map +1 -1
- package/dist/types/i18n.d.ts +2 -2
- package/dist/types/i18n.d.ts.map +1 -1
- package/dist/types/types/index.d.ts +1 -1
- package/dist/types/types/index.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -26,7 +26,7 @@ This is a wrapper around [FormatJS](https://formatjs.io/docs/intl) that allows c
|
|
|
26
26
|
|
|
27
27
|
In order to provide full autocompletion for the translation keys, you need to pass the type of the `messages` object to the various init functions, as shown here:
|
|
28
28
|
|
|
29
|
-
> **Note**: type checking and
|
|
29
|
+
> **Note**: For the `i18n-t` component (`Translation.ts`), the type checking and auto-completion for the `keypath` prop are still a work-in-progress due to [the issue described here](https://github.com/Kong/public-ui-components/pull/231).
|
|
30
30
|
>
|
|
31
31
|
|
|
32
32
|
### Global Registration
|
|
@@ -40,14 +40,12 @@ const i18n = createI18n<typeof english>('en-us', english, true)
|
|
|
40
40
|
app.use(Translation, { i18n })
|
|
41
41
|
|
|
42
42
|
// composables/index.ts
|
|
43
|
-
import { useI18n
|
|
43
|
+
import { useI18n } from '@kong-ui-public/i18n'
|
|
44
44
|
import english from './locales/en.json'
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
const useI18n = useI18nComposable<typeof english>
|
|
48
|
-
|
|
49
46
|
export default {
|
|
50
|
-
|
|
47
|
+
// Be sure to provide the interface when exporting
|
|
48
|
+
useI18n: useI18n<typeof english>,
|
|
51
49
|
}
|
|
52
50
|
|
|
53
51
|
// Component.vue
|
|
@@ -93,7 +91,8 @@ And then, anywhere in application code where `i18n` is needed:
|
|
|
93
91
|
|
|
94
92
|
<script setup lang="ts">
|
|
95
93
|
import { useI18n } from '@kong-ui-public/i18n'
|
|
96
|
-
|
|
94
|
+
import english from './locales/en.json'
|
|
95
|
+
const i18n = useI18n<typeof english>()
|
|
97
96
|
</script>
|
|
98
97
|
```
|
|
99
98
|
|
|
@@ -151,7 +150,8 @@ const i18n = createI18n<typeof english>(props.locale || 'en-us', english)
|
|
|
151
150
|
|
|
152
151
|
<script setup lang="ts">
|
|
153
152
|
import { useI18n } from '@kong-ui-public/i18n'
|
|
154
|
-
|
|
153
|
+
import english from './locales/en.json'
|
|
154
|
+
const i18n = useI18n<typeof english>()
|
|
155
155
|
</script>
|
|
156
156
|
```
|
|
157
157
|
|
|
@@ -199,8 +199,9 @@ In `khcp-ui` there are many places where instead of using Intl function we are a
|
|
|
199
199
|
|
|
200
200
|
<script setup lang="ts">
|
|
201
201
|
import { useI18n } from '@kong-ui-public/i18n'
|
|
202
|
+
import english from './locales/en.json'
|
|
202
203
|
|
|
203
|
-
const i18n = useI18n()
|
|
204
|
+
const i18n = useI18n<typeof english>()
|
|
204
205
|
const helpText = i18n.source.components.docUploadCard
|
|
205
206
|
</script>
|
|
206
207
|
```
|