@dative-gpi/foundation-shared-components 0.1.120 → 1.0.0

package/components/FSDialogMultiFormBody.vue

@@ -0,0 +1,231 @@
+<template>
+  <FSWindow
+    width="100%"
+    :modelValue="currentStep - 1"
+  >
+    <FSForm
+      v-for="(step, index) in $props.steps"
+      :variant="$props.variant"
+      :key="index"
+      @submit="onSubmit"
+      v-model="valid"
+    >
+      <FSCol
+        gap="24px"
+      >
+        <FSFadeOut
+          :height="height"
+          padding="0 8px 0 0"
+        >
+          <slot
+            :name="`step-${step}`"
+          />
+        </FSFadeOut>
+        <FSRow
+          padding="0 16px 0 0"
+        >
+          <slot
+            name="left-footer"
+          />
+          <FSRow
+            class="fs-dialog-actions"
+            align="top-right"
+            :wrap="false"
+          >
+            <FSButton
+              :prependIcon="$props.cancelButtonPrependIcon"
+              :appendIcon="$props.cancelButtonAppendIcon"
+              :variant="$props.cancelButtonVariant"
+              :color="$props.cancelButtonColor"
+              :label="previousButtonLabel"
+              @click="onPrevious()"
+            />
+            <FSButton
+              type="submit"
+              :prependIcon="$props.submitButtonPrependIcon"
+              :appendIcon="$props.submitButtonAppendIcon"
+              :color="$props.submitButtonColor"
+              :variant="nextButtonVariant"
+              :editable="$props.editable"
+              :label="nextButtonLabel"
+              :load="$props.load"
+            />
+          </FSRow>
+        </FSRow>
+      </FSCol>
+    </FSForm>
+  </FSWindow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSFadeOut from "./FSFadeOut.vue";
+import FSButton from "./FSButton.vue";
+import FSForm from "./FSForm.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSDialogMultiFormBody",
+  components: {
+    FSFadeOut,
+    FSButton,
+    FSForm,
+    FSRow
+  },
+  props: {
+    subtitle: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    width: {
+      type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
+      required: false,
+      default: "auto"
+    },
+    variant: {
+      type: String as PropType<"standard" | "submit">,
+      required: false,
+      default: "submit"
+    },
+    steps: {
+      type: Number,
+      required: true
+    },
+    cancelButtonPrependIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    cancelButtonLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    cancelButtonAppendIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    cancelButtonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    cancelButtonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    },
+    submitButtonPrependIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    submitButtonLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    submitButtonAppendIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    submitButtonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "full"
+    },
+    submitButtonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    load: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["click:cancelButton", "click:submitButton"],
+  setup(props, { emit }) {
+    const { isMobileSized } = useBreakpoints();
+    const { $tr } = useTranslationsProvider();
+
+    const currentStep = ref(1);
+    const valid = ref(false);
+    const valids = ref(Array.from({ length: props.steps }, () => false));
+
+    const height = computed(() => {
+      const other = 24 + 24                                          // Paddings
+        + (isMobileSized.value ? 24 : 32) + 24                       // Title
+        + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
+        + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
+      return `calc(100vh - 40px - ${other}px)`;
+    });
+
+    const previousButtonLabel = computed(() => {
+      return currentStep.value == 1
+        ? props.cancelButtonLabel ?? $tr("ui.button.cancel", "Cancel")
+        : $tr("ui.button.back", "Back");
+    });
+
+    const nextButtonLabel = computed(() => {
+      return currentStep.value == props.steps
+        ? props.submitButtonLabel ?? $tr("ui.button.validate", "Validate")
+        : $tr("ui.button.next", "Next");
+    });
+
+    const nextButtonVariant = computed(() => {
+      return currentStep.value == props.steps
+        ? props.submitButtonVariant ?? "full" : "standard";
+    });
+
+    const onPrevious = () => {
+      if (currentStep.value > 1) {
+        currentStep.value--;
+      }
+      else {
+        emit("click:cancelButton");
+      }
+    };
+
+    const onSubmit = () => {
+      if (valid.value) {
+        switch (currentStep.value) {
+          case props.steps:
+            emit("click:submitButton");
+            break;
+          default:
+            currentStep.value++;
+            break;
+        }
+      }
+    };
+
+    return {
+      previousButtonLabel,
+      nextButtonVariant,
+      nextButtonLabel,
+      currentStep,
+      ColorEnum,
+      height,
+      valids,
+      valid,
+      onPrevious,
+      onSubmit
+    };
+  }
+});
+</script>

package/components/FSDialogSubmit.vue

@@ -61,10 +61,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSFadeOut from "./FSFadeOut.vue";

package/components/FSDivider.vue

@@ -34,10 +34,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 import FSText from "./FSText.vue";
@@ -66,7 +68,7 @@ export default defineComponent({
     variant: {
       type: String as PropType<"base" | "light" | "dark">,
       required: false,
-      default: "dark"
+      default: "base"
     },
     vertical: {
       type: Boolean as PropType<boolean>,
@@ -112,4 +114,4 @@ export default defineComponent({
     };
   }
 });
-</script>
+</script>

package/components/FSEditImage.vue

@@ -65,13 +65,13 @@
           >
             <FSText
               v-if="fileSelected && fileSelected.fileName"
-              lineClamp="2"
               font="text-body"
+              :lineClamp="2"
             >
               {{ fileSelected.fileName }}
             </FSText>
             <FSCol
-              gap="0"
+              gap="0px"
             >
               <FSText
                 class="fs-edit-image-overline"
@@ -97,7 +97,7 @@
           <FSButtonFileMini
             accept="image/*"
             :readFile="false"
-            @update:modelValue="onUpload"
+            @update:metadata="onUpload"
           />
           <FSButtonRemoveMini
             @click="onRemove"
@@ -124,7 +124,7 @@
         <FSButtonFileMini
           accept="image/*"
           :readFile="false"
-          @update:modelValue="onUpload"
+          @update:metadata="onUpload"
         />
         <FSButtonRemoveMini
           @click="onRemove"
@@ -147,17 +147,17 @@
           mdi-plus-box-outline
         </FSIcon>
         <FSText
-          lineClamp="2"
           font="text-body"
+          :lineClamp="2"
         >
           {{ $tr('ui.edit-image.add-image', 'Add an image.') }}
         </FSText>
         <FSButtonFileMini
-          ref="invisibleButtonRef"
           class="fs-edit-image-hidden-button"
+          ref="invisibleButtonRef"
           accept="image/*"
           :readFile="false"
-          @update:modelValue="onUpload"
+          @update:metadata="onUpload"
         />
       </FSRow>
     </FSClickable>
@@ -165,11 +165,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum, type FileImage } from "@dative-gpi/foundation-shared-components/models";
 import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
-import { ColorEnum, FileImage } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButtonRemoveMini from "./buttons/FSButtonRemoveMini.vue";
 import FSButtonFileMini from "./buttons/FSButtonFileMini.vue";
@@ -281,6 +281,13 @@ export default defineComponent({
       }
     };
 
+    watch(() => props.modelValue, () => {
+      if (!props.modelValue) {
+        fileSelected.value.fileName = "";
+        fileSelected.value.fileContent = null;
+      }
+    });
+
     return {
       invisibleButtonRef,
       fileSelected,

package/components/FSErrorToast.vue

@@ -28,7 +28,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { getError, sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";

package/components/FSFadeOut.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
 
 import { useBreakpoints, useColors, useDebounce } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";

package/components/FSForm.vue

@@ -11,7 +11,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, provide, ref } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent, provide, ref } from "vue";
 
 export default defineComponent({
   name: "FSForm",
@@ -22,7 +23,7 @@ export default defineComponent({
       default: null
     },
     variant: {
-      type: String as PropType<"standard" | "lazy" | "submit">,
+      type: String as PropType<"standard" | "submit">,
       required: false,
       default: "submit"
     }
@@ -32,10 +33,9 @@ export default defineComponent({
     const formRef = ref<HTMLFormElement | null>(null);
     const submitted = ref(false);
 
-    const validateOn = computed((): "submit" | "blur" | "input"  => {
+    const validateOn = computed((): "submit" | "input"  => {
       switch (props.variant) {
         case "standard": return "input";
-        case "lazy":     return "blur";
         default:         return "submit";
       }
     });
@@ -72,10 +72,10 @@ export default defineComponent({
       validateOn,
       submitted,
       formRef,
-      reset,
-      validate,
+      resetValidation,
       onSubmit,
-      resetValidation
+      validate,
+      reset
     };
   }
 });

package/components/FSGrid.vue

@@ -66,10 +66,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorEnum, FSGridItem } from "@dative-gpi/foundation-shared-components/models";
+import type { FSGridItem } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSText from "./FSText.vue";
 import FSCol from "./FSCol.vue";

package/components/FSGridMosaic.vue

@@ -34,10 +34,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
-import { FSGridMosaic } from "@dative-gpi/foundation-shared-components/models";
+import type { FSGridMosaic } from "@dative-gpi/foundation-shared-components/models";
 
 import FSGrid from "./FSGrid.vue";
 import FSCol from "./FSCol.vue";

package/components/FSIcon.vue

@@ -10,10 +10,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase } from "@dative-gpi/foundation-shared-components/models";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 export default defineComponent({

package/components/FSIconCard.vue

@@ -11,7 +11,7 @@
     >
       <FSIcon 
         variant="dark"
-        size="56"
+        :size="$props.iconSize"
         :color="$props.iconColor"
       >
         {{ $props.icon }}
@@ -21,9 +21,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
@@ -54,6 +56,11 @@ export default defineComponent({
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Dark
+    },
+    iconSize: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "56px"
     }
   },
   setup(props) {

package/components/FSIconCheck.vue

@@ -9,7 +9,8 @@
 <script lang="ts">
 import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSIcon from "./FSIcon.vue";
 

package/components/FSIconFlag.vue

@@ -5,7 +5,8 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, onMounted } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent, onMounted } from "vue";
   
 import { useLanguages } from "@dative-gpi/foundation-shared-services/composables";
   

package/components/FSImage.vue

@@ -39,7 +39,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent, ref, watch } from "vue";
 import { decode, isBlurhashValid } from "blurhash";
 
 import { IMAGE_RAW_EXTENSION_URL, IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config/urls";

package/components/FSImageCard.vue

@@ -0,0 +1,72 @@
+<template>
+  <FSClickable
+    class="fs-image-card"
+    :height="height"
+    :width="width"
+    :style="style"
+    v-bind="$attrs"
+  >
+    <FSRow
+      align="bottom-left"
+      height="fill"
+    >
+      <FSRow
+        class="fs-image-card-label"
+        align="center-left"
+        padding="8px"
+      >
+        <FSSpan
+          font="text-overline"
+        >
+          {{ $props.label }}
+        </FSSpan>
+      </FSRow>
+    </FSRow>
+  </FSClickable>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import FSClickable from "./FSClickable.vue";
+import FSSpan from "./FSSpan.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSImageCard",
+  components: {
+    FSClickable,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    src: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: '110px'
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: '200px'
+    }
+  },
+  setup(props) {
+    const style = computed(() => ({
+      "--fs-image-card-background": `url(${props.src})`
+    }));
+
+    return {
+      style
+    };
+  }
+});
+</script>

package/components/FSLabel.vue

@@ -16,10 +16,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSLoader from "./FSLoader.vue";
 

package/components/FSLink.vue

@@ -25,11 +25,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
-import { RouteLocation } from "vue-router";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
+import type { RouteLocation } from "vue-router";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
   name: "FSLink",

package/components/FSLoader.vue

@@ -7,7 +7,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";