@dative-gpi/foundation-shared-components 0.0.146 → 0.0.148

package/components/fields/FSTranslateField.vue

@@ -56,7 +56,8 @@
             v-for="(language, index) in languages"
             :editable="$props.editable"
             :key="index"
-            v-model="innerTranslations[language.code]"
+            :modelValue="getTranslation(language.code)"
+            @update:modelValue="setTranslation(language.code, $event)"
           >
             <template
               #label
@@ -134,10 +135,15 @@ export default defineComponent({
       required: false,
       default: null
     },
+    property: {
+      type: String as PropType<string>,
+      required: false,
+      default: "label"
+    },
     translations: {
-      type: Object as PropType<{ [key: string]: string }>,
+      type: Array as PropType<{ languageCode: string; [key: string]: string }[]>,
       required: false,
-      default: () => ({})
+      default: () => []
     },
     buttonColor: {
       type: String as PropType<ColorBase>,
@@ -155,7 +161,7 @@ export default defineComponent({
     const { getMany: getManyLanguages, fetching: fetchingLanguages, entities: languages } = useLanguages();
     const { getColors } = useColors();
 
-    const innerTranslations = ref(props.translations ?? {});
+    const innerTranslations = ref(props.translations);
     const dialog = ref(false);
 
     const lights = getColors(ColorEnum.Light);
@@ -172,6 +178,37 @@ export default defineComponent({
       };
     });
 
+    const getTranslation = (languageCode: string): string => {
+      if (!innerTranslations.value) {
+        return "";
+      }
+      const translation = innerTranslations.value.find((t) => t.languageCode === languageCode);
+      if (!translation || !translation[props.property]) {
+        return "";
+      }
+      return translation[props.property];
+    };
+
+    const setTranslation = (languageCode: string, value: string): void => {
+      if (!innerTranslations.value) {
+        innerTranslations.value = [{
+          languageCode,
+          [props.property]: value
+        }]
+        return;
+      }
+      const translation = innerTranslations.value.find((t) => t.languageCode === languageCode);
+      if (translation) {
+        translation[props.property] = value;
+      }
+      else {
+        innerTranslations.value.push({
+          languageCode,
+          [props.property]: value
+        });
+      }
+    };
+
     const onSubmit = (): void => {
       dialog.value = false;
       if (props.editable) {
@@ -190,6 +227,8 @@ export default defineComponent({
       languages,
       dialog,
       style,
+      getTranslation,
+      setTranslation,
       onSubmit
     };
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.146",
+  "version": "0.0.148",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.146",
-    "@dative-gpi/foundation-shared-services": "0.0.146",
+    "@dative-gpi/foundation-shared-domain": "0.0.148",
+    "@dative-gpi/foundation-shared-services": "0.0.148",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "b3b909100302b8a5efac8d887620fd8d9e01a8e6"
+  "gitHead": "ec24a9fa023be6aac4fbad69217572f9e34c87f8"
 }