@dative-gpi/foundation-shared-components 0.0.220 → 0.0.222

package/components/FSDialogFormBody.vue

@@ -0,0 +1,273 @@
+<template>
+  <template
+    v-if="!$props.validation"
+  >
+    <FSForm
+      ref="formRef"
+      :variant="$props.variant"
+      @submit="onSubmit"
+      v-model="valid"
+    >
+      <FSCol
+        gap="24px"
+      >
+        <FSFadeOut
+          :height="height"
+          padding="0 8px 0 0"
+        >
+          <slot
+            name="body"
+          />
+        </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="cancelLabel"
+              @click="() => $emit('click:cancelButton', false)"
+            />
+            <FSButton
+              type="submit"
+              :prependIcon="$props.submitButtonPrependIcon"
+              :appendIcon="$props.submitButtonAppendIcon"
+              :variant="$props.submitButtonVariant"
+              :color="$props.submitButtonColor"
+              :editable="$props.editable"
+              :label="submitLabel"
+              :load="$props.load"
+            />
+          </FSRow>
+        </FSRow>
+      </FSCol>
+    </FSForm>
+  </template>
+  <template
+    v-else
+  >
+    <FSCol
+      gap="24px"
+    >
+      <FSFadeOut
+        :height="height"
+        padding="0 8px 0 0"
+      >
+        <slot
+          name="validation"
+        />
+      </FSFadeOut>
+      <FSRow
+        padding="0 16px 0 0"
+      >
+        <slot
+          name="left-footer"
+        />
+        <FSRow
+          class="fs-dialog-actions"
+          align="top-right"
+          :wrap="false"
+        >
+          <FSButton
+            :prependIcon="$props.validateButtonPrependIcon"
+            :appendIcon="$props.validateButtonAppendIcon"
+            :variant="$props.validateButtonVariant"
+            :color="$props.validateButtonColor"
+            :label="validateLabel"
+            @click="onValidate"
+          />
+        </FSRow>
+      </FSRow>
+    </FSCol>
+  </template>
+</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: "FSDialogFormBody",
+  components: {
+    FSFadeOut,
+    FSButton,
+    FSForm,
+    FSRow
+  },
+  props: {
+    variant: {
+      type: String as PropType<"standard" | "submit">,
+      required: false,
+      default: "submit"
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    subtitle: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    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
+    },
+    validateButtonPrependIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    validateButtonLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    validateButtonAppendIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    validateButtonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    validateButtonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    },
+    validation: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    load: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["click:cancelButton", "click:submitButton", "click:validateButton"],
+  setup(props, { emit }) {
+    const { isMobileSized } = useBreakpoints();
+    const { $tr } = useTranslationsProvider();
+
+    const formRef = ref<HTMLElement | null>(null);
+    const valid = ref(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 cancelLabel = computed(() => {
+      return props.cancelButtonLabel ?? $tr("ui.button.cancel", "Cancel");
+    });
+
+    const submitLabel = computed(() => {
+      return props.submitButtonLabel ??  $tr("ui.button.submit", "Submit");
+    });
+
+    const validateLabel = computed(() => {
+      return props.validateButtonLabel ??  $tr("ui.button.validate", "Done");
+    });
+
+    const onSubmit = () => {
+      if (valid.value) {
+        emit("click:submitButton");
+      }
+    };
+
+    const onValidate = () => {
+      emit("click:validateButton");
+    };
+
+    return {
+      validateLabel,
+      cancelLabel,
+      submitLabel,
+      ColorEnum,
+      formRef,
+      height,
+      valid,
+      onValidate,
+      onSubmit
+    };
+  }
+});
+</script>

package/components/FSDialogMultiForm.vue

@@ -10,89 +10,39 @@
     <template
       #body
     >
-      <FSWindow
-        width="100%"
-        :modelValue="currentStep - 1"
+      <FSDialogMultiFormBody
+        :subtitle="$props.subtitle"
+        :steps="$props.steps"
+        @click:submitButton="$emit('click:submitButton')"
+        @click:cancelButton="$emit('update:modelValue', false)"
+        v-bind="$attrs"
       >
-        <FSForm
-          v-for="(step, index) in $props.steps"
-          :variant="$props.variant"
-          :key="index"
-          @submit="onSubmit"
-          v-model="valid"
+        <template
+          v-for="(_, name) in $slots"
+          v-slot:[name]="slotData"
         >
-          <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>
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+      </FSDialogMultiFormBody>
     </template>
   </FSDialog>
 </template>
 
 <script lang="ts">
 import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import { defineComponent } from "vue";
 
-import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-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";
-import FSButton from "./FSButton.vue";
+import FSDialogMultiFormBody from "./FSDialogMultiFormBody.vue";
 import FSDialog from "./FSDialog.vue";
-import FSForm from "./FSForm.vue";
-import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSDialogMultiForm",
   components: {
-    FSFadeOut,
-    FSButton,
-    FSDialog,
-    FSForm,
-    FSRow
+    FSDialogMultiFormBody,
+    FSDialog  
   },
   props: {
     title: {
@@ -110,11 +60,6 @@ export default defineComponent({
       required: false,
       default: "auto"
     },
-    variant: {
-      type: String as PropType<"standard" | "lazy" | "submit">,
-      required: false,
-      default: "submit"
-    },
     modelValue: {
       type: Boolean,
       required: false,
@@ -124,134 +69,11 @@ export default defineComponent({
       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: ["update:modelValue", "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("update:modelValue", false);
-      }
-    };
-
-    const onSubmit = () => {
-      if (valid.value) {
-        switch (currentStep.value) {
-          case props.steps:
-            emit("click:submitButton");
-            break;
-          default:
-            currentStep.value++;
-            break;
-        }
-      }
-    };
+  setup() {
 
     return {
-      previousButtonLabel,
-      nextButtonVariant,
-      nextButtonLabel,
-      currentStep,
-      ColorEnum,
-      height,
-      valids,
-      valid,
-      onPrevious,
-      onSubmit
     };
   }
 });