From d9040852acda859c247e3fd0e61aa9c2028a78e0 Mon Sep 17 00:00:00 2001
From: Eugene <thebestfrontend@gmail.com>
Date: Mon, 15 Apr 2024 13:30:01 +0300
Subject: [PATCH] feat: vue named slot syntax (#3327)

---
 packages/vue/src/T.ts                    | 16 ++++++++++++----
 packages/vue/src/__integration/T.spec.ts | 12 ++++++++++++
 testapps/vue/src/TranslationMethods.vue  | 14 ++++++++++++++
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/packages/vue/src/T.ts b/packages/vue/src/T.ts
index 79b302557c..202167ed23 100644
--- a/packages/vue/src/T.ts
+++ b/packages/vue/src/T.ts
@@ -4,7 +4,7 @@ import {
   TranslateProps,
   TranslationKey,
 } from '@tolgee/web';
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType, SetupContext, computed } from 'vue';
 import { useTranslateInternal } from './useTranslateInternal';
 
 export const T = defineComponent({
@@ -20,14 +20,22 @@ export const T = defineComponent({
     ns: { type: String as PropType<NsType> },
     language: { type: String as PropType<string> },
   },
-  setup() {
+  setup(props, context: SetupContext) {
+    const { slots } = context;
     const { t } = useTranslateInternal();
-    return { t };
+    const assignedParams = computed(() => {
+      const slotsParams = {};
+      Object.keys(slots).forEach((key) => {
+        slotsParams[key] = slots[key]();
+      });
+      return Object.assign({}, props.params, slotsParams);
+    });
+    return { t, assignedParams };
   },
   render() {
     const params: TranslateProps = {
       key: this.$props.keyName,
-      params: this.$props.params,
+      params: this.assignedParams,
       defaultValue: this.$props.defaultValue,
       noWrap: this.$props.noWrap,
       ns: this.$props.ns,
diff --git a/packages/vue/src/__integration/T.spec.ts b/packages/vue/src/__integration/T.spec.ts
index 82d93ccdb6..cdcbd3b9e3 100644
--- a/packages/vue/src/__integration/T.spec.ts
+++ b/packages/vue/src/__integration/T.spec.ts
@@ -30,6 +30,11 @@ const TestComponent = {
       <div data-testid="with_language_prop">
         <T keyName="hello_world" language="en" />
       </div>
+      <div data-testid="peter_dogs_slot">
+        <T keyName="peter_dogs">
+          <template #dogsCount><span class='test_class'>5</span></template>
+        </T>
+      </div>
     </div>`,
 };
 
@@ -111,6 +116,13 @@ describe('T component integration', () => {
     );
   });
 
+  it('works with slots', () => {
+    expect(screen.queryByTestId('peter_dogs_slot').innerHTML).toContain(
+      'Petr má <span class="test_class">5</span> psů.'
+    );
+    expect(screen.queryByTestId('peter_dogs')).toHaveAttribute('_tolgee');
+  });
+
   describe('language switch', () => {
     beforeEach(async () => {
       await tolgee.changeLanguage('en');
diff --git a/testapps/vue/src/TranslationMethods.vue b/testapps/vue/src/TranslationMethods.vue
index 521c4abc5e..36e1b08ef2 100644
--- a/testapps/vue/src/TranslationMethods.vue
+++ b/testapps/vue/src/TranslationMethods.vue
@@ -42,6 +42,20 @@
         </div>
       </div>
 
+      <div>
+        <h1>T component with Slots syntax</h1>
+        <div>
+          <T keyName="this_is_a_key_with_params">
+            <template #key>
+              <span class="custom_class">value</span>
+            </template>
+            <template #key2>
+              <a href="#">value2</a>
+            </template>
+          </T>
+        </div>
+      </div>
+
       <div>
         <h1>t function without default</h1>
         <div>{{ $t('this_is_a_key') }}</div>