Repository: xiCO2k/laravel-vue-i18n (ts)

Issue:
Feature request: Language array
Hi,

I'm not sure if this is already possible, but can there be a function which allows you to use an array of language strings.

I for example have in my `en.php`

```php
<?php

return [
    'homepage' => [
        'title' => 'This is the homepage',
        'content' => [
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam convallis vitae est vitae posuere. Quisque imperdiet nunc nisi, ut imperdiet lectus auctor eu. Donec elit neque, dignissim eu tempor placerat, volutpat sed odio. Praesent non ligula odio. Curabitur finibus est quis urna sagittis, a finibus nulla lobortis. Phasellus sit amet ligula non urna congue elementum id vitae eros. Ut faucibus cursus finibus. Sed pretium at tortor ac semper. Morbi quis est quis ligula maximus mollis at non est. Aenean tempor metus mattis quam pretium suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.',
            'Duis ultrices elementum nulla, et posuere velit eleifend eget. Donec vitae malesuada neque. Curabitur ac ipsum at risus consectetur mattis. Nam id ipsum quis velit dignissim venenatis. Pellentesque vulputate semper leo eu aliquet. Vestibulum ornare nunc neque, non vulputate nulla tempus eget. Donec in turpis sed turpis facilisis consectetur at tristique odio. In non congue augue, sit amet posuere quam. Cras pulvinar leo posuere lectus aliquet cursus. Vivamus metus ligula, scelerisque in finibus quis, elementum et urna. Pellentesque purus lorem, imperdiet et pulvinar quis, dapibus id nisi. Sed varius orci id arcu mollis tempor. Donec vitae pretium urna. Integer egestas ipsum et tempus euismod.',
        ],
    ]
];
```

In the Json this gets converted to.
```json
{
	"pages.homepage.title": "This is the homepage",
	"pages.homepage.content.0": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam convallis vitae est vitae posuere. Quisque imperdiet nunc nisi, ut imperdiet lectus auctor eu. Donec elit neque, dignissim eu tempor placerat, volutpat sed odio. Praesent non ligula odio. Curabitur finibus est quis urna sagittis, a finibus nulla lobortis. Phasellus sit amet ligula non urna congue elementum id vitae eros. Ut faucibus cursus finibus. Sed pretium at tortor ac semper. Morbi quis est quis ligula maximus mollis at non est. Aenean tempor metus mattis quam pretium suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.",
	"pages.homepage.content.1": "Duis ultrices elementum nulla, et posuere velit eleifend eget. Donec vitae malesuada neque. Curabitur ac ipsum at risus consectetur mattis. Nam id ipsum quis velit dignissim venenatis. Pellentesque vulputate semper leo eu aliquet. Vestibulum ornare nunc neque, non vulputate nulla tempus eget. Donec in turpis sed turpis facilisis consectetur at tristique odio. In non congue augue, sit amet posuere quam. Cras pulvinar leo posuere lectus aliquet cursus. Vivamus metus ligula, scelerisque in finibus quis, elementum et urna. Pellentesque purus lorem, imperdiet et pulvinar quis, dapibus id nisi. Sed varius orci id arcu mollis tempor. Donec vitae pretium urna. Integer egestas ipsum et tempus euismod.",
}
```

Now I'm not sure how to retrieve these language strings from the array.
The reason I want to do it like this, is because I want them to be seperate paragraphs.
Each line is supposed to be a ```<p></p>```

So preferably I would do something like:

```vue
<p v-for="line in $t('pages.homepage.content')">
    {{line}}
</p>
```

But this just outputs.
```html
   <p>p</p>
   <p>a</p>
   <p>g</p>
   <p>e</p>
   <p>s</p>
   <p>.</p>
   <p>h</p>
   <p>o</p>
   <p>m</p>
   <p>e</p>
   <p>p</p>
   <p>a</p>
   <p>g</p>
   <p>e</p>
   <p>.</p>
   <p>c</p>
   <p>o</p>
   <p>n</p>
   <p>t</p>
   <p>e</p>
   <p>n</p>
   <p>t</p>
```

Is there a 'simple' fix for this?
Or could there maybe be a seperate function that can work for multiline/arrays like that. (E.g: $tm() )

Pull request description:
feat: add support for language arrays
I've added a simple and easy way to use language arrays, without bloating the .json files.

Closes #71

Patch:
diff --git a/src/index.ts b/src/index.ts
index 97c3c18..c5daadd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -338,7 +338,14 @@ export class I18n {
    */
   wTrans(key: string, replacements: ReplacementsInterface = {}): ComputedRef<string> {
     if (!this.activeMessages[key]) {
-      this.activeMessages[key] = key
+      const hasChildItems = this.activeMessages[`${key}.0`] !== undefined;
+
+      if (hasChildItems) {
+        const childItems = Object.entries(this.activeMessages).filter((item) => item[0].startsWith(`${key}.`)).map(item => item[1]);
+        this.activeMessages[key] = reactive(childItems);
+      } else {
+        this.activeMessages[key] = key;
+      }
     }
 
     return computed(() => this.makeReplacements(this.activeMessages[key], replacements))


Test patch:
diff --git a/test/fixtures/lang/de.json b/test/fixtures/lang/de.json
new file mode 100644
index 0000000..a462c5e
--- /dev/null
+++ b/test/fixtures/lang/de.json
@@ -0,0 +1,4 @@
+{
+    "auth.arr.0": "foo",
+    "auth.arr.1": "bar"
+}
diff --git a/test/translate.test.ts b/test/translate.test.ts
index 58d349e..32a90cc 100644
--- a/test/translate.test.ts
+++ b/test/translate.test.ts
@@ -173,3 +173,17 @@ it('resolves translated data with loader if there is only .php files for that la
 
   expect(wrapper.html()).toBe('<h1>Ces identifiants ne correspondent pas à nos enregistrements.</h1>')
 })
+
+
+it('translates arrays with $t mixin', async () => {
+  const wrapper = await global.mountPlugin(`<h1 v-for="line in $t('auth.arr')">{{line}}</h1>`, 'de');
+
+  expect(wrapper.html()).toBe("<h1>foo</h1>\n<h1>bar</h1>")
+})
+
+it('translates arrays with "trans" helper', async () => {
+  await global.mountPlugin(undefined, 'de');
+
+  expect(trans('auth.arr')).toStrictEqual(['foo', 'bar']);
+})
+