@dative-gpi/foundation-shared-components 1.0.179 → 1.0.180

package/components/FSDialogMultiFormBody.vue

@@ -3,10 +3,45 @@
     gap="24px"
   >
     <FSPagination
+      v-if="$props.mode === 'pagination'"
       width="calc(100% - 16px)"
       :pages="$props.steps"
       :modelValue="currentStep - 1"
     />
+    <FSTabs
+      v-else-if="$props.mode === 'tabs'"
+      :tab="currentStep - 1"
+      :color="$props.tabsColor"
+      @update:tab="(val) => currentStep = val + 1"
+    >
+      <FSTab
+        v-for="(step, index) in $props.steps"
+        :key="index"
+      >
+        <slot
+          :name="`tab-${index + 1}`"
+        >
+          <FSRow>
+            <FSIcon
+              v-if="tabIconSlots[`tab-${index + 1}-icon`]"
+            >
+              <slot
+                :name="`tab-${index + 1}-icon`"
+              />
+            </FSIcon>
+            <FSSpan
+              :font="index + 1 === currentStep ? 'text-button' : 'text-body'"
+            >
+              <slot
+                :name="`tab-${index + 1}-label`"
+              >
+                {{ $tr('ui.tabs.step.default', 'Step {0}', step) }}
+              </slot>
+            </FSSpan>
+          </FSRow>
+        </slot>
+      </FSTab>
+    </FSTabs>
     <FSWindow
       width="100%"
       :modelValue="currentStep - 1"
@@ -78,6 +113,11 @@ import FSButton from "./FSButton.vue";
 import FSForm from "./FSForm.vue";
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
+import FSSpan from "./FSSpan.vue";
+import FSTabs from "./FSTabs.vue";
+import FSTab from "./FSTab.vue";
+import FSIcon from "./FSIcon.vue";
+import FSWindow from "./FSWindow.vue";
 
 export default defineComponent({
   name: "FSDialogMultiFormBody",
@@ -87,7 +127,12 @@ export default defineComponent({
     FSButton,
     FSForm,
     FSCol,
-    FSRow
+    FSRow,
+    FSSpan,
+    FSTabs,
+    FSTab,
+    FSIcon,
+    FSWindow
   },
   props: {
     subtitle: {
@@ -178,10 +223,20 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    }
+    },
+    mode: {
+      type: String as PropType<"pagination" | "tabs">,
+      required: false,
+      default: "pagination"
+    },
+    tabsColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
   },
   emits: ["click:cancelButton", "click:submitButton"],
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
@@ -189,6 +244,16 @@ export default defineComponent({
     const valid = ref(false);
     const valids = ref(Array.from({ length: props.steps }, () => false));
 
+    const hasSlot = (name: string) => !!slots[name];
+
+    const tabIconSlots = computed(() => {
+      const result:  Record<string, boolean> = {};
+      for (let i = 1; i <= props.steps; i++) {
+        result[`tab-${i}-icon`] = hasSlot(`tab-${i}-icon`);
+      }
+      return result;
+    });
+
     const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
@@ -246,6 +311,7 @@ export default defineComponent({
       maxHeight,
       valids,
       valid,
+      tabIconSlots,
       onPrevious,
       onSubmit
     };

package/components/FSEditImage.vue

@@ -13,7 +13,7 @@ import { computed, defineComponent, type PropType } from "vue";
 
 import { IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config";
 
-import { useImage } from "@dative-gpi/foundation-shared-services/composables";
+import { useImage, useAppAuthToken } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSEditImageUI from "./FSEditImageUI.vue";
 
@@ -32,10 +32,11 @@ export default defineComponent({
   emits: ["update:imageId"],
   setup(props) {
     const { get: getImage, entity: image } = useImage();
+    const { authToken } = useAppAuthToken();
     
     const source = computed(() => {
-      return props.imageId ? IMAGE_RAW_URL(props.imageId) : null;
-    })
+      return props.imageId ? IMAGE_RAW_URL(props.imageId, authToken.value) : null;
+    });
 
     const onError = (): void => {
       if (props.imageId) {

package/components/FSTab.vue

@@ -18,7 +18,9 @@
             {{ $props.prependIcon }}
           </FSIcon>
         </slot>
-        <slot>
+        <slot
+          name="label"
+        >
           <FSSpan
             v-if="$props.label"
             font="text-button"

package/components/fields/FSTranslateField.vue

@@ -84,7 +84,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
@@ -97,6 +97,7 @@ import FSButton from "../FSButton.vue";
 import FSIcon from "../FSIcon.vue";
 import FSSpan from "../FSSpan.vue";
 import FSRow from "../FSRow.vue";
+import type { Translation } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
   name: "FSTranslateField",
@@ -140,7 +141,7 @@ export default defineComponent({
       default: "label"
     },
     translations: {
-      type: Array as PropType<{ languageCode: string; [key: string]: string }[]>,
+      type: Array as PropType<Translation[]>,
       required: false,
       default: () => []
     },
@@ -165,7 +166,7 @@ export default defineComponent({
     
     const dialog = ref(false);
 
-    const innerTranslations = ref(props.translations);
+    const innerTranslations = ref<Translation[]>(props.translations);
 
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
@@ -189,7 +190,8 @@ export default defineComponent({
       if (!translation || !translation[props.property]) {
         return "";
       }
-      return translation[props.property];
+      
+      return translation[props.property] ?? "";
     };
 
     const setTranslation = (languageCode: string, value: string): void => {
@@ -219,6 +221,10 @@ export default defineComponent({
       }
     };
 
+    watch(() => props.translations, (newVal) => {
+      innerTranslations.value = newVal;
+    }, { immediate: true, deep: true });
+
     return {
       innerTranslations,
       ColorEnum,

package/components/fields/FSTranslateTextArea.vue

@@ -86,10 +86,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
+import type { Translation } from "@dative-gpi/foundation-shared-components/models";
 
 import { useColors } from "../../composables";
 
@@ -142,7 +143,7 @@ export default defineComponent({
       default: "label"
     },
     translations: {
-      type: Array as PropType<{ languageCode: string; [key: string]: string }[]>,
+      type: Array as PropType<Translation[]>,
       required: false,
       default: () => []
     },
@@ -164,7 +165,7 @@ export default defineComponent({
     
     const dialog = ref(false);
 
-    const innerTranslations = ref(props.translations);
+    const innerTranslations = ref<Translation[]>(props.translations);
 
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
@@ -188,7 +189,7 @@ export default defineComponent({
       if (!translation || !translation[props.property]) {
         return "";
       }
-      return translation[props.property];
+      return translation[props.property] ?? "";
     };
 
     const setTranslation = (languageCode: string, value: string): void => {
@@ -218,6 +219,10 @@ export default defineComponent({
       }
     };
 
+    watch(() => props.translations, (newVal) => {
+      innerTranslations.value = newVal;
+    }, { immediate: true, deep: true });
+
     return {
       innerTranslations,
       ColorEnum,

package/models/index.ts

@@ -11,4 +11,5 @@ export * from "./map";
 export * from "./modelStatuses";
 export * from "./rules";
 export * from "./tables";
-export * from "./toggleSets";
+export * from "./toggleSets";
+export * from "./translations";

package/models/translations.ts

@@ -0,0 +1,4 @@
+export interface Translation {
+  languageCode: string;
+  [key: string]: string;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.179",
+  "version": "1.0.180",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.179",
-    "@dative-gpi/foundation-shared-services": "1.0.179"
+    "@dative-gpi/foundation-shared-domain": "1.0.180",
+    "@dative-gpi/foundation-shared-services": "1.0.180"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "6500ee86f8f47666fd31d52f02426c1551a57c1c"
+  "gitHead": "2480d0cfc4620dc8fff18bfd04aca1c80c9d7cc2"
 }