@dative-gpi/foundation-shared-components 0.0.97 → 0.0.98

package/components/FSDialogMultiForm.vue

@@ -0,0 +1,258 @@
+<template>
+  <FSDialog
+    :title="$props.title"
+    :subtitle="$props.subtitle"
+    :width="$props.width"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      #body
+    >
+      <FSWindow
+        width="100%"
+        :modelValue="currentStep - 1"
+      >
+        <FSForm
+          v-for="(step, index) in $props.steps"
+          :key="index"
+          :variant="$props.variant"
+          @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.leftButtonPrependIcon"
+                  :label="previousButtonLabel"
+                  :appendIcon="$props.leftButtonAppendIcon"
+                  :variant="$props.leftButtonVariant"
+                  :color="$props.leftButtonColor"
+                  @click="onPrevious()"
+                />
+                <FSButton
+                  type="submit"
+                  :prependIcon="$props.rightButtonPrependIcon"
+                  :label="nextButtonLabel"
+                  :appendIcon="$props.rightButtonAppendIcon"
+                  :variant="nextButtonVariant"
+                  :color="$props.rightButtonColor"
+                  :load="$props.load"
+                  :editable="$props.editable"
+                />
+              </FSRow>
+            </FSRow>
+          </FSCol>
+        </FSForm>
+      </FSWindow>
+    </template>
+  </FSDialog>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { 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 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
+  },
+  props: {
+    title: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    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" | "lazy" | "submit">,
+      required: false,
+      default: "submit"
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    steps: {
+      type: Number,
+      required: true
+    },
+    leftButtonPrependIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    leftButtonLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    leftButtonAppendIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    leftButtonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    rightButtonPrependIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    rightButtonLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    rightButtonAppendIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    rightButtonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "full"
+    },
+    leftButtonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    },
+    rightButtonColor: {
+      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:rightButton"],
+  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
+        + (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 previousButtonLabel = computed(() => {
+      return currentStep.value == 1
+        ? props.leftButtonLabel ?? $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")
+        : $tr("ui.button.next", "Next");
+    });
+
+    const nextButtonVariant = computed(() => {
+      return currentStep.value == props.steps
+        ? props.rightButtonVariant ?? "full"
+        : "standard";
+    });
+
+    const onPrevious = () => {
+      if (currentStep.value > 1) {
+        currentStep.value--;
+      } else {
+        emit("update:modelValue", false);
+      }
+    };
+
+    const onSubmit = () => {
+      console.log(valid.value)
+      if (valid.value) {
+        switch (currentStep.value) {
+          case props.steps:
+            emit("click:rightButton");
+            break;
+          default:
+            currentStep.value++;
+            break;
+        }
+      }
+    };
+
+    return {
+      previousButtonLabel,
+      nextButtonVariant,
+      nextButtonLabel,
+      currentStep,
+      ColorEnum,
+      height,
+      valids,
+      valid,
+      onSubmit,
+      onPrevious
+    };
+  }
+});
+</script>

package/components/FSForm.vue

@@ -45,8 +45,8 @@ export default defineComponent({
       event.preventDefault();
       submitted.value = true;
       await (formRef.value as any).validate();
-      emit("update:modelValue", !!(formRef.value as any).isValid);
-      emit("submit", !!(formRef.value as any).isValid);
+      emit("update:modelValue", !!((formRef.value as any).isValid ?? true));
+      emit("submit", !!((formRef.value as any).isValid ?? true));
       
     }; 
 

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -39,7 +39,7 @@
             gap="4px"
           >
             <FSConnectivity
-              v-if="$props.deviceConnectivity && $props.deviceConnectivity.status != 0"
+              v-if="$props.deviceConnectivity && $props.deviceConnectivity.status != ConnectivityStatus.None"
               :deviceConnectivity="$props.deviceConnectivity"
             />
             <FSWorstAlert
@@ -77,6 +77,7 @@ import { computed, defineComponent, PropType } from "vue";
 
 import { FSModelStatus, FSDeviceStatus, FSDeviceAlert, FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSStatusesCarousel from "../deviceOrganisations/FSStatusesCarousel.vue";
@@ -221,6 +222,7 @@ export default defineComponent({
       ColorEnum,
       lineModelStatuses,
       lineDeviceStatuses,
+      ConnectivityStatus,
       carouselModelStatuses,
       carouselDeviceStatuses,
       imageSize,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.97",
+  "version": "0.0.98",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.97",
-    "@dative-gpi/foundation-shared-services": "0.0.97",
+    "@dative-gpi/foundation-shared-domain": "0.0.98",
+    "@dative-gpi/foundation-shared-services": "0.0.98",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "693196d41a0a3852953992a72defed751ef2dde3"
+  "gitHead": "3e3b2cf8888bd50741bd2d91a76ebb7f53ff5f27"
 }