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

package/components/FSBreadcrumbs.vue

@@ -55,7 +55,7 @@ export default defineComponent({
     const style: Ref<{ [key: string] : string }> = ref({
       "--fs-breadcrumbs-color": darks.dark,
       "--fs-breadcrumbs-active-color": darks.base,
-      "--fs-breadcrumbs-disabled-color": darks.light
+      "--fs-breadcrumbs-disabled-color": darks.soft
     });
 
     const classes = (item: FSBreadcrumbItem): string[] => {

package/components/FSButton.vue

@@ -251,7 +251,7 @@ export default defineComponent({
         case ColorEnum.Success:
         case ColorEnum.Warning:
         case ColorEnum.Error  : return ["standard"].includes(props.variant) ? colors.value.dark : colors.value.light;
-        default               : return ["standard"].includes(props.variant) ? darks.dark : darks.light;
+        default               : return ["standard"].includes(props.variant) ? darks.dark : darks.soft;
       }
     });
 

package/components/FSChip.vue

@@ -122,7 +122,7 @@ export default defineComponent({
         case "full": return {
           "--fs-chip-height"                 : sizeToVar(props.height),
           "--fs-chip-background-color"       : colors.value.base,
-          "--fs-chip-border-color"           : colors.value.baseContrast,
+          "--fs-chip-border-color"           : colors.value.base,
           "--fs-chip-color"                  : colors.value.baseContrast,
           "--fs-chip-hover-background-color" : colors.value.base,
           "--fs-chip-hover-border-color"     : colors.value.base,

package/components/FSClickable.vue

@@ -254,7 +254,7 @@ export default defineComponent({
                 "--fs-clickable-border-color"           : colors.value.lightContrast,
                 "--fs-clickable-color"                  : colors.value.lightContrast,
                 "--fs-clickable-hover-background-color" : colors.value.base,
-                "--fs-clickable-hover-border-color"     : colors.value.baseContrast,
+                "--fs-clickable-hover-border-color"     : colors.value.base,
                 "--fs-clickable-hover-color"            : colors.value.baseContrast,
                 "--fs-clickable-active-background-color": colors.value.dark,
                 "--fs-clickable-active-border-color"    : colors.value.darkContrast,
@@ -326,7 +326,7 @@ export default defineComponent({
         case ColorEnum.Success:
         case ColorEnum.Warning:
         case ColorEnum.Error  : return ["full"].includes(props.variant) ? colors.value.light : colors.value.dark;
-        default               : return ["full"].includes(props.variant) ? darks.light : darks.dark;
+        default               : return ["full"].includes(props.variant) ? darks.soft : darks.dark;
       }
     });
 

package/components/FSClock.vue

@@ -1,7 +1,5 @@
 <template>
-  <FSCol
-    width="fill"
-  >
+  <FSCol>
     <FSRow
       align="center-center"
       :wrap="false"
@@ -40,10 +38,6 @@
         :min="0"
         v-model="innerHours"
       />
-    </FSCol>
-    <FSCol
-      v-if="$props.slider"
-    >
       <FSSlider
         :label="$tr('ui.clock.minutes', 'Minutes')"
         :readonly="!$props.editable"

package/components/FSCol.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    :style="style"
     :class="classes"
+    :style="style"
     v-bind="$attrs"
   >
     <slot />

package/components/FSDialogForm.vue

@@ -1,20 +1,71 @@
 <template>
   <FSDialog
-    :title="$props.title"
     :subtitle="$props.subtitle"
+    :title="$props.title"
     :width="$props.width"
     :modelValue="$props.modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
+    @update:modelValue="onClose"
     v-bind="$attrs"
   >
     <template
       #body
     >
-      <FSForm
-        ref="formRef"
-        :variant="$props.variant"
-        @submit="onSubmit"
-        v-model="valid"
+      <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('update:modelValue', 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"
@@ -24,7 +75,7 @@
             padding="0 8px 0 0"
           >
             <slot
-              name="body"
+              name="validation"
             />
           </FSFadeOut>
           <FSRow
@@ -39,27 +90,17 @@
               :wrap="false"
             >
               <FSButton
-                :prependIcon="$props.leftButtonPrependIcon"
-                :label="cancelButtonLabel"
-                :appendIcon="$props.leftButtonAppendIcon"
-                :variant="$props.leftButtonVariant"
-                :color="$props.leftButtonColor"
-                @click="() => $emit('update:modelValue', false)"
-              />
-              <FSButton
-                type="submit"
-                :prependIcon="$props.rightButtonPrependIcon"
-                :label="submitButtonLabel"
-                :appendIcon="$props.rightButtonAppendIcon"
-                :variant="$props.rightButtonVariant"
-                :color="$props.rightButtonColor"
-                :load="$props.load"
-                :editable="$props.editable"
+                :prependIcon="$props.validateButtonPrependIcon"
+                :appendIcon="$props.validateButtonAppendIcon"
+                :variant="$props.validateButtonVariant"
+                :color="$props.validateButtonColor"
+                :label="validateLabel"
+                @click="onValidate"
               />
             </FSRow>
           </FSRow>
         </FSCol>
-      </FSForm>
+      </template>
     </template>
   </FSDialog>
 </template>
@@ -112,55 +153,85 @@ export default defineComponent({
       required: false,
       default: false
     },
-    leftButtonPrependIcon: {
+    cancelButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    leftButtonLabel: {
+    cancelButtonLabel: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    leftButtonAppendIcon: {
+    cancelButtonAppendIcon: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    leftButtonVariant: {
+    cancelButtonVariant: {
       type: String as PropType<"standard" | "full" | "icon">,
       required: false,
       default: "standard"
     },
-    rightButtonPrependIcon: {
+    cancelButtonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    },
+    submitButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    rightButtonLabel: {
+    submitButtonLabel: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    rightButtonAppendIcon: {
+    submitButtonAppendIcon: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    rightButtonVariant: {
+    submitButtonVariant: {
       type: String as PropType<"standard" | "full" | "icon">,
       required: false,
       default: "full"
     },
-    leftButtonColor: {
+    submitButtonColor: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Light
+      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"
     },
-    rightButtonColor: {
+    validateButtonColor: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Primary
+      default: ColorEnum.Light
+    },
+    validation: {
+      type: Boolean,
+      required: false,
+      default: false
     },
     load: {
       type: Boolean,
@@ -173,7 +244,7 @@ export default defineComponent({
       default: true
     }
   },
-  emits: ["update:modelValue", "click:rightButton"],
+  emits: ["update:modelValue", "click:submitButton", "click:validateButton"],
   setup(props, { emit }) {
     const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
@@ -182,36 +253,54 @@ export default defineComponent({
     const valid = ref(false);
 
     const height = computed(() => {
-      const other = 24 + 24                                            // Paddings
-        + (props.title ? isMobileSized.value ? 24 : 32 : 0)            // Title
-        + (props.subtitle ? isMobileSized.value ? 14 + 8 : 16 + 8 : 0) // Subtitle
-        + (isMobileSized.value ? 36 : 40)                              // Footer
-        + 64;                                                          // Debug mask
-      return `calc(90vh - ${other}px)`;
+      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 cancelButtonLabel = computed(() => {
-      return props.leftButtonLabel ?? $tr("ui.button.cancel", "Cancel");
+    const submitLabel = computed(() => {
+      return props.submitButtonLabel ??  $tr("ui.button.submit", "Submit");
     });
 
-    const submitButtonLabel = computed(() => {
-      return props.rightButtonLabel ??  $tr("ui.button.validate", "Validate");
+    const validateLabel = computed(() => {
+      return props.validateButtonLabel ??  $tr("ui.button.validate", "Done");
     });
 
+    const onClose = () => {
+      if (props.validation) {
+        emit("click:validateButton");
+      }
+      emit("update:modelValue", false);
+    };
+
     const onSubmit = () => {
       if (valid.value) {
-        emit("click:rightButton");
+        emit("click:submitButton");
       }
     };
 
+    const onValidate = () => {
+      emit("click:validateButton");
+      emit("update:modelValue", false);
+    };
+
     return {
-      cancelButtonLabel,
-      submitButtonLabel,
+      validateLabel,
+      cancelLabel,
+      submitLabel,
       ColorEnum,
       formRef,
       height,
       valid,
-      onSubmit
+      onValidate,
+      onSubmit,
+      onClose
     };
   }
 });

package/components/FSDialogMultiForm.vue

@@ -1,7 +1,7 @@
 <template>
   <FSDialog
-    :title="$props.title"
     :subtitle="$props.subtitle"
+    :title="$props.title"
     :width="$props.width"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -16,8 +16,8 @@
       >
         <FSForm
           v-for="(step, index) in $props.steps"
-          :key="index"
           :variant="$props.variant"
+          :key="index"
           @submit="onSubmit"
           v-model="valid"
         >
@@ -44,22 +44,22 @@
                 :wrap="false"
               >
                 <FSButton
-                  :prependIcon="$props.leftButtonPrependIcon"
+                  :prependIcon="$props.cancelButtonPrependIcon"
+                  :appendIcon="$props.cancelButtonAppendIcon"
+                  :variant="$props.cancelButtonVariant"
+                  :color="$props.cancelButtonColor"
                   :label="previousButtonLabel"
-                  :appendIcon="$props.leftButtonAppendIcon"
-                  :variant="$props.leftButtonVariant"
-                  :color="$props.leftButtonColor"
                   @click="onPrevious()"
                 />
                 <FSButton
                   type="submit"
-                  :prependIcon="$props.rightButtonPrependIcon"
-                  :label="nextButtonLabel"
-                  :appendIcon="$props.rightButtonAppendIcon"
+                  :prependIcon="$props.submitButtonPrependIcon"
+                  :appendIcon="$props.submitButtonAppendIcon"
+                  :color="$props.submitButtonColor"
                   :variant="nextButtonVariant"
-                  :color="$props.rightButtonColor"
-                  :load="$props.load"
                   :editable="$props.editable"
+                  :label="nextButtonLabel"
+                  :load="$props.load"
                 />
               </FSRow>
             </FSRow>
@@ -122,52 +122,52 @@ export default defineComponent({
       type: Number,
       required: true
     },
-    leftButtonPrependIcon: {
+    cancelButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    leftButtonLabel: {
+    cancelButtonLabel: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    leftButtonAppendIcon: {
+    cancelButtonAppendIcon: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    leftButtonVariant: {
+    cancelButtonVariant: {
       type: String as PropType<"standard" | "full" | "icon">,
       required: false,
       default: "standard"
     },
-    rightButtonPrependIcon: {
+    cancelButtonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    },
+    submitButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    rightButtonLabel: {
+    submitButtonLabel: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    rightButtonAppendIcon: {
+    submitButtonAppendIcon: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    rightButtonVariant: {
+    submitButtonVariant: {
       type: String as PropType<"standard" | "full" | "icon">,
       required: false,
       default: "full"
     },
-    leftButtonColor: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Light
-    },
-    rightButtonColor: {
+    submitButtonColor: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
@@ -183,7 +183,7 @@ export default defineComponent({
       default: true
     }
   },
-  emits: ["update:modelValue", "click:rightButton"],
+  emits: ["update:modelValue", "click:submitButton"],
   setup(props, { emit }) {
     const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
@@ -193,36 +193,35 @@ export default defineComponent({
     const valids = ref(Array.from({ length: props.steps }, () => false));
 
     const height = computed(() => {
-      const other = 24 + 24                                            // Paddings
-        + (props.title ? isMobileSized.value ? 24 : 32 : 0)            // Title
-        + (props.subtitle ? isMobileSized.value ? 14 + 8 : 16 + 8 : 0) // Subtitle
-        + (isMobileSized.value ? 36 : 40)                              // Footer
-        + 64;                                                          // Debug mask
-      return `calc(90vh - ${other}px)`;
+      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.leftButtonLabel ?? $tr("ui.button.cancel", "Cancel")
+        ? props.cancelButtonLabel ?? $tr("ui.button.cancel", "Cancel")
         : $tr("ui.button.back", "Back");
     });
 
     const nextButtonLabel = computed(() => {
       return currentStep.value == props.steps
-        ? props.rightButtonLabel ?? $tr("ui.button.validate", "Validate")
+        ? props.submitButtonLabel ?? $tr("ui.button.validate", "Validate")
         : $tr("ui.button.next", "Next");
     });
 
     const nextButtonVariant = computed(() => {
       return currentStep.value == props.steps
-        ? props.rightButtonVariant ?? "full"
-        : "standard";
+        ? props.submitButtonVariant ?? "full" : "standard";
     });
 
     const onPrevious = () => {
       if (currentStep.value > 1) {
         currentStep.value--;
-      } else {
+      }
+      else {
         emit("update:modelValue", false);
       }
     };
@@ -231,7 +230,7 @@ export default defineComponent({
       if (valid.value) {
         switch (currentStep.value) {
           case props.steps:
-            emit("click:rightButton");
+            emit("click:submitButton");
             break;
           default:
             currentStep.value++;
@@ -249,8 +248,8 @@ export default defineComponent({
       height,
       valids,
       valid,
-      onSubmit,
-      onPrevious
+      onPrevious,
+      onSubmit
     };
   }
 });

package/components/FSDialogRemove.vue

@@ -1,8 +1,8 @@
 <template>
   <FSDialogSubmit
     :title="title"
-    :rightButtonLabel="$tr('ui.button.remove', 'Remove')"
-    :rightButtonColor="ColorEnum.Error"
+    :submitButtonLabel="$tr('ui.button.remove', 'Remove')"
+    :submitButtonColor="ColorEnum.Error"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"