@dative-gpi/foundation-shared-components 1.0.70 → 1.0.71-groupings-2

package/components/FSCol.vue

@@ -26,6 +26,11 @@ export default defineComponent({
       required: false,
       default: "fill"
     },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -49,11 +54,12 @@ export default defineComponent({
   },
   setup(props) {
     const style = computed((): StyleValue => ({
-      "--fs-col-overflow": props.overflow,
-      "--fs-col-padding" : sizeToVar(props.padding),
-      "--fs-col-gap"     : sizeToVar(props.gap),
-      "--fs-col-width"   : sizeToVar(props.width),
-      "--fs-col-height"  : sizeToVar(props.height)
+      "--fs-col-overflow"   : props.overflow,
+      "--fs-col-padding"    : sizeToVar(props.padding),
+      "--fs-col-gap"        : sizeToVar(props.gap),
+      "--fs-col-width"      : sizeToVar(props.width),
+      "--fs-col-max-width"  : props.maxWidth ? sizeToVar(props.maxWidth) : "100%",
+      "--fs-col-height"     : sizeToVar(props.height),
     }));
 
     const classes = computed((): string[] => {

package/components/FSDialog.vue

@@ -4,6 +4,7 @@
     :class="classes"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
+    :width="$props.width"
     v-bind="$attrs"
   >
     <slot>
@@ -67,7 +68,7 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ["update:modelValue"],
+  emits: ["click", "update:modelValue"],
   setup() {
     const { isExtraSmall } = useBreakpoints();
 

package/components/FSDialogContent.vue

@@ -1,6 +1,6 @@
 <template>
   <FSCard
-    padding="24px 8px 24px 24px"
+    :padding="['24px', '16px', '16px 12px']"
     gap="24px"
     :class="$props.cardClasses"
     :color="$props.color"
@@ -9,9 +9,7 @@
     <template
       #header
     >
-      <FSCol
-        padding="0 16px 0 0"
-      >
+      <FSCol>
         <FSRow
           align="center-left"
           :wrap="false"
@@ -21,13 +19,16 @@
           >
             {{ $props.title }}
           </FSText>
-          <v-spacer />
-          <FSButton
-            icon="mdi-close"
-            variant="icon"
-            :color="ColorEnum.Dark"
-            @click="$emit('update:modelValue', false)"
-          />
+          <FSRow
+            align="center-right"
+          >
+            <FSButton
+              icon="mdi-close"
+              variant="icon"
+              :color="ColorEnum.Dark"
+              @click="$emit('update:modelValue', false)"
+            />
+          </FSRow>
         </FSRow>
         <FSText
           v-if="$props.subtitle"

package/components/FSDialogForm.vue

@@ -11,12 +11,14 @@
       #body
     >
       <FSDialogFormBody 
+        ref="bodyRef"
         v-bind="$attrs"
         :subtitle="$props.subtitle"
         :validation="$props.validation"
         @click:cancelButton="$emit('update:modelValue', false)"
         @click:submitButton="$emit('click:submitButton')"
         @click:validateButton="onValidate"
+        @update:isValidForm="isValidForm = $event"
       >
         <template
           v-for="(_, name) in $slots"
@@ -33,8 +35,8 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { defineComponent } from "vue";
+import type { PropType } from "vue";
+import { defineComponent, ref } from "vue";
 
 import FSDialogFormBody from "./FSDialogFormBody.vue";
 import FSDialog from "./FSDialog.vue";
@@ -74,6 +76,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "click:validateButton", "click:submitButton"],
   setup(props, { emit }) {
+    const bodyRef = ref<typeof FSDialogFormBody | null>(null);
+    const isValidForm = ref(false);
 
     const onClose = () => {
       if (props.validation) {
@@ -87,8 +91,24 @@ export default defineComponent({
       emit("update:modelValue", false);
     };
 
+    const resetFormValidation = () => {
+      if (bodyRef.value) {
+        bodyRef.value.resetFormValidation();
+      }
+    };
+
+    const validateForm = async () => {
+      if (bodyRef.value) {
+        return await bodyRef.value.validateForm();
+      }
+    };
+
     return {
+      resetFormValidation,
+      validateForm,
+      isValidForm,
       onValidate,
+      bodyRef,
       onClose
     };
   }

package/components/FSDialogFormBody.vue

@@ -6,22 +6,19 @@
       ref="formRef"
       :variant="$props.variant"
       @submit="onSubmit"
-      v-model="valid"
+      v-model="isValidForm"
     >
       <FSCol
         gap="24px"
       >
         <FSFadeOut
-          padding="0 8px 0 0"
           :maxHeight="maxHeight"
         >
           <slot
             name="body"
           />
         </FSFadeOut>
-        <FSRow
-          padding="0 16px 0 0"
-        >
+        <FSRow>
           <slot
             name="left-footer"
           />
@@ -31,6 +28,7 @@
             :wrap="false"
           >
             <FSButton
+              v-if="$props.showCancelButton"
               :prependIcon="$props.cancelButtonPrependIcon"
               :appendIcon="$props.cancelButtonAppendIcon"
               :variant="$props.cancelButtonVariant"
@@ -39,12 +37,13 @@
               @click="() => $emit('click:cancelButton', false)"
             />
             <FSButton
+              v-if="$props.showSubmitButton"
               type="submit"
               :prependIcon="$props.submitButtonPrependIcon"
               :appendIcon="$props.submitButtonAppendIcon"
               :variant="$props.submitButtonVariant"
               :color="$props.submitButtonColor"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :label="submitLabel"
               :load="$props.load"
             />
@@ -60,16 +59,13 @@
       gap="24px"
     >
       <FSFadeOut
-        padding="0 8px 0 0"
         :maxHeight="maxHeight"
       >
         <slot
           name="validation"
         />
       </FSFadeOut>
-      <FSRow
-        padding="0 16px 0 0"
-      >
+      <FSRow>
         <slot
           name="left-footer"
         />
@@ -93,7 +89,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -118,16 +114,16 @@ export default defineComponent({
       required: false,
       default: "submit"
     },
-    modelValue: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     subtitle: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
+    showCancelButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     cancelButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,
@@ -153,6 +149,11 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     },
+    showSubmitButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     submitButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,
@@ -213,42 +214,54 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
-  emits: ["click:cancelButton", "click:submitButton", "click:validateButton"],
+  emits: ["click:cancelButton", "click:submitButton", "click:validateButton", "update:isValidForm"],
   setup(props, { emit }) {
     const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
-    const formRef = ref<HTMLElement | null>(null);
-    const valid = ref(false);
+    const formRef = ref<typeof FSForm | null>(null);
+    const isValidForm = ref(null);
 
     const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
-        + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
+        + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
         + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
-      return `calc(100vh - 40px - ${other}px)`;
+      return `calc(100vh - 42px - ${other}px)`;
     });
 
     const cancelLabel = computed(() => {
-      return props.cancelButtonLabel ?? $tr("ui.button.cancel", "Cancel");
+      return props.cancelButtonLabel ?? $tr("ui.common.cancel", "Cancel");
     });
 
     const submitLabel = computed(() => {
-      return props.submitButtonLabel ??  $tr("ui.button.submit", "Submit");
+      return props.submitButtonLabel ??  $tr("ui.common.submit", "Submit");
     });
 
     const validateLabel = computed(() => {
-      return props.validateButtonLabel ??  $tr("ui.button.validate", "Done");
+      return props.validateButtonLabel ??  $tr("ui.common.validate", "Validate");
     });
 
+    const resetFormValidation = () => {
+      if (formRef.value) {
+        formRef.value.resetValidation();
+      }
+    };
+
+    const validateForm =  async () => {
+      if (formRef.value) {
+        return await formRef.value.validate();
+      }
+    };
+
     const onSubmit = () => {
-      if (valid.value) {
+      if (isValidForm.value) {
         emit("click:submitButton");
       }
     };
@@ -256,17 +269,23 @@ export default defineComponent({
     const onValidate = () => {
       emit("click:validateButton");
     };
+    
+    watch(() => isValidForm.value, () => {
+      emit("update:isValidForm", isValidForm.value);
+    }, { immediate: true });
 
     return {
+      resetFormValidation,
       validateLabel,
+      validateForm,
+      isValidForm,
       cancelLabel,
       submitLabel,
+      onValidate,
       ColorEnum,
       maxHeight,
-      formRef,
-      valid,
-      onValidate,
-      onSubmit
+      onSubmit,
+      formRef
     };
   }
 });

package/components/FSDialogMenu.vue

@@ -5,9 +5,8 @@
     v-bind="$attrs"
   >
     <FSCard
-      width="calc(100vw - 48px)"
-      padding="8px"
-      gap="24px"
+      :padding="$props.padding"
+      :gap="$props.gap"
       :color="$props.color"
       :class="classes"
     >
@@ -38,11 +37,21 @@ export default defineComponent({
     FSCard
   },
   props: {
-    cardClasses: {
+    classes: {
       type: [Array, String] as PropType<string[] | string | null>,
       required: false,
       default: null
     },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "8px"
+    },
+    gap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "24px"
+    },
     modelValue: {
       type: Boolean,
       required: false,
@@ -60,12 +69,12 @@ export default defineComponent({
 
     const classes = computed((): string[] => {
       const classNames = ["fs-dialog-menu"];
-      if (props.cardClasses) {
-        if (Array.isArray(props.cardClasses)) {
-          classNames.push(...props.cardClasses);
+      if (props.classes) {
+        if (Array.isArray(props.classes)) {
+          classNames.push(...props.classes);
         }
         else {
-          classNames.push(props.cardClasses);
+          classNames.push(props.classes);
         }
       }
       return classNames;

package/components/FSDialogMultiFormBody.vue

@@ -22,16 +22,13 @@
           gap="24px"
         >
           <FSFadeOut
-            padding="0 8px 0 0"
             :maxHeight="maxHeight"
           >
             <slot
               :name="`step-${step}`"
             />
           </FSFadeOut>
-          <FSRow
-            padding="0 16px 0 0"
-          >
+          <FSRow>
             <slot
               name="left-footer"
             />
@@ -41,6 +38,7 @@
               :wrap="false"
             >
               <FSButton
+                v-if="$props.showCancelButton || currentStep > 1"
                 :prependIcon="$props.cancelButtonPrependIcon"
                 :appendIcon="$props.cancelButtonAppendIcon"
                 :variant="$props.cancelButtonVariant"
@@ -49,12 +47,13 @@
                 @click="onPrevious()"
               />
               <FSButton
+                v-if="$props.showSubmitButton || currentStep < $props.steps"
                 type="submit"
                 :prependIcon="$props.submitButtonPrependIcon"
                 :appendIcon="$props.submitButtonAppendIcon"
                 :color="$props.submitButtonColor"
                 :variant="nextButtonVariant"
-                :editable="$props.editable"
+                :disabled="$props.disabled"
                 :label="nextButtonLabel"
                 :load="$props.load"
               />
@@ -110,6 +109,11 @@ export default defineComponent({
       type: Number,
       required: true
     },
+    showCancelButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     cancelButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,
@@ -135,6 +139,11 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     },
+    showSubmitButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     submitButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,
@@ -165,10 +174,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["click:cancelButton", "click:submitButton"],
@@ -183,21 +192,22 @@ export default defineComponent({
     const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
-        + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
+        + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
+        + (props.steps > 1 ? 24 + 4 : 0)                             // Pagination
         + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
-      return `calc(100vh - 40px - ${other}px)`;
+      return `calc(100vh - 42px - ${other}px)`;
     });
 
     const previousButtonLabel = computed(() => {
       return currentStep.value == 1
-        ? props.cancelButtonLabel ?? $tr("ui.button.cancel", "Cancel")
-        : $tr("ui.button.back", "Back");
+        ? props.cancelButtonLabel ?? $tr("ui.common.cancel", "Cancel")
+        : $tr("ui.common.back", "Back");
     });
 
     const nextButtonLabel = computed(() => {
       return currentStep.value == props.steps
-        ? props.submitButtonLabel ?? $tr("ui.button.validate", "Validate")
-        : $tr("ui.button.next", "Next");
+        ? props.submitButtonLabel ?? $tr("ui.common.validate", "Validate")
+        : $tr("ui.common.next", "Next");
     });
 
     const nextButtonVariant = computed(() => {

package/components/FSDialogRemove.vue

@@ -2,7 +2,7 @@
   <FSDialogSubmit
     width="460px"
     :title="title"
-    :submitButtonLabel="$tr('ui.button.remove', 'Remove')"
+    :submitButtonLabel="$tr('ui.common.remove', 'Remove')"
     :submitButtonColor="ColorEnum.Error"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -21,20 +21,20 @@
             mdi-alert-outline
           </FSIcon>
           <FSRow
-            gap="2px"
+            gap="4px"
           >
             <FSSpan>
-              {{ $tr("ui.remove-dialog.body-regular", "This action is") }}
+              {{ $tr("dialog-remove.body-regular", "This action is") }}
             </FSSpan>
             <FSSpan
               font="text-button"
             >
-              {{ $tr("ui.remove-dialog.body-bold", "definitive") }}
+              {{ $tr("dialog-remove.body-bold", "definitive") }}
             </FSSpan>
           </FSRow>
         </FSRow>
         <FSSpan>
-          {{ $tr("ui.remove-dialog.final-warning", "Once removed, entities won't be retrievable") }}
+          {{ $tr("dialog-remove.final-warning", "Once removed, entities won't be retrievable") }}
         </FSSpan>
       </FSCol>
     </template>
@@ -43,7 +43,6 @@
       v-if="$props.removing"
     >
       <FSRow
-        padding="0 16px 0 0"
         align="center-right"
         :height="footerHeight"
       >
@@ -109,10 +108,10 @@ export default defineComponent({
 
     const title = computed((): string => {
       if (props.removeTotal > 1) {
-        return $tr("ui.dialog-remove.remove-plural", "Remove {0} entities", props.removeTotal.toString());
+        return $tr("dialog-remove.remove-plural", "Remove {0} entities", props.removeTotal.toString());
       }
       else {
-        return $tr("ui.dialog-remove.remove-singular", "Remove an entity");
+        return $tr("dialog-remove.remove-singular", "Remove an entity");
       }
     });
 

package/components/FSDialogSubmit.vue

@@ -11,7 +11,6 @@
       #body
     >
       <FSFadeOut
-        padding="0 8px 0 0"
         :maxHeight="maxHeight"
       >
         <slot
@@ -25,9 +24,7 @@
       <slot
         name="footer"
       >
-        <FSRow
-          padding="0 16px 0 0"
-        >
+        <FSRow>
           <slot
             name="left-footer"
           />
@@ -36,6 +33,7 @@
             :wrap="false"
           >
             <FSButton
+              v-if="$props.showCancelButton"
               :prependIcon="$props.cancelButtonPrependIcon"
               :appendIcon="$props.cancelButtonAppendIcon"
               :variant="$props.cancelButtonVariant"
@@ -44,11 +42,12 @@
               @click="$emit('update:modelValue', false)"
             />
             <FSButton
+              v-if="$props.showSubmitButton"
               :prependIcon="$props.submitButtonPrependIcon"
               :appendIcon="$props.submitButtonAppendIcon"
               :variant="$props.submitButtonVariant"
               :color="$props.submitButtonColor"
-              :editable="$props.editable"
+              :disabled="$props.disabled"
               :label="submitLabel"
               :load="$props.load"
               @click="$emit('click:submitButton')"
@@ -101,6 +100,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    showCancelButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     cancelButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,
@@ -126,6 +130,11 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     },
+    showSubmitButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     submitButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,
@@ -156,10 +165,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue", "click:submitButton"],
@@ -170,17 +179,17 @@ export default defineComponent({
     const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
-        + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
+        + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
         + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
-      return `calc(100vh - 40px - ${other}px)`;
+      return `calc(100vh - 42px - ${other}px)`;
     });
 
     const cancelLabel = computed(() => {
-      return props.cancelButtonLabel ?? $tr("ui.button.cancel", "Cancel");
+      return props.cancelButtonLabel ?? $tr("ui.common.cancel", "Cancel");
     });
 
     const submitLabel = computed(() => {
-      return props.submitButtonLabel ??  $tr("ui.button.validate", "Validate");
+      return props.submitButtonLabel ??  $tr("ui.common.validate", "Validate");
     });
 
     return {