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

package/components/FSDialogSubmit.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)"
@@ -36,21 +36,22 @@
             :wrap="false"
           >
             <FSButton
-              :prependIcon="$props.leftButtonPrependIcon"
-              :label="cancelButtonLabel"
-              :appendIcon="$props.leftButtonAppendIcon"
-              :variant="$props.leftButtonVariant"
-              :color="$props.leftButtonColor"
-              @click="() => $emit('update:modelValue', false)"
+              :prependIcon="$props.cancelButtonPrependIcon"
+              :appendIcon="$props.cancelButtonAppendIcon"
+              :variant="$props.cancelButtonVariant"
+              :color="$props.cancelButtonColor"
+              :label="cancelLabel"
+              @click="$emit('update:modelValue', false)"
             />
             <FSButton
-              :prependIcon="$props.rightButtonPrependIcon"
-              :label="submitButtonLabel"
-              :appendIcon="$props.rightButtonAppendIcon"
-              :variant="$props.rightButtonVariant"
-              :color="$props.rightButtonColor"
+              :prependIcon="$props.submitButtonPrependIcon"
+              :appendIcon="$props.submitButtonAppendIcon"
+              :variant="$props.submitButtonVariant"
+              :color="$props.submitButtonColor"
               :editable="$props.editable"
-              @click="() => $emit('click:rightButton')"
+              :label="submitLabel"
+              :load="$props.load"
+              @click="$emit('click:submitButton')"
             />
           </FSRow>
         </FSRow>
@@ -100,55 +101,60 @@ 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
     },
-    rightButtonColor: {
-      type: String as PropType<ColorBase>,
+    load: {
+      type: Boolean,
       required: false,
-      default: ColorEnum.Primary
+      default: false
     },
     editable: {
       type: Boolean,
@@ -156,31 +162,30 @@ export default defineComponent({
       default: true
     }
   },
-  emits: ["update:modelValue", "click:rightButton"],
+  emits: ["update:modelValue", "click:submitButton"],
   setup(props) {
     const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
     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 cancelButtonLabel = computed(() => {
-      return props.leftButtonLabel ?? $tr("ui.button.cancel", "Cancel");
+    const cancelLabel = computed(() => {
+      return props.cancelButtonLabel ?? $tr("ui.button.cancel", "Cancel");
     });
 
-    const submitButtonLabel = computed(() => {
-      return props.rightButtonLabel ??  $tr("ui.button.validate", "Validate");
+    const submitLabel = computed(() => {
+      return props.submitButtonLabel ??  $tr("ui.button.validate", "Validate");
     });
 
     return {
-      cancelButtonLabel,
-      submitButtonLabel,
+      cancelLabel,
+      submitLabel,
       ColorEnum,
       height
     };

package/components/FSDivider.vue

@@ -19,7 +19,7 @@
       :style="style"
     />
     <FSText
-      variant="light"
+      variant="soft"
       :font="$props.font"
     >
       <slot>

package/components/FSSlideGroup.vue

@@ -91,7 +91,7 @@ export default defineComponent({
     const style = computed((): { [key: string] : string | null | undefined } => ({
       "--fs-group-padding"     : sizeToVar(props.padding),
       "--fs-group-gap"         : sizeToVar(props.gap),
-      "--fs-group-color"       : darks.light,
+      "--fs-group-color"       : darks.soft,
       "--fs-group-hover-color" : darks.dark
     }));
 

package/components/FSTabs.vue

@@ -1,17 +1,18 @@
 <template>
   <v-tabs
-    class="fs-tabs"
     selectedClass="fs-tab-active"
-    :grow="true"
-    :style="style"
-    :showArrows="true"
+    class="fs-tabs"
     :sliderColor="$props.color"
+    :showArrows="true"
+    :style="style"
+    :grow="true"
     :modelValue="$props.tab"
-    @update:modelValue="(value) => $emit('update:tab', value)"
+    @update:modelValue="$emit('update:tab', $event)"
     v-bind="$attrs"
   >
     <template
-      v-for="component in getChildren()"
+      v-for="(component, index) in getChildren()"
+      :key="index"
     >
       <component
         :is="component"
@@ -45,16 +46,15 @@ export default defineComponent({
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
+    const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): { [key: string] : string | null | undefined } => ({
-      "--fs-group-color"                 : darks.base,
-      "--fs-group-disabled-color"        : darks.light,
-      "--fs-group-hover-background-color": colors.value.light,
+      "--fs-group-color"                 : darks.soft,
       "--fs-group-hover-color"           : darks.dark,
-      "--fs-group-light"                 : colors.value.light,
-      "--fs-group-base"                  : colors.value.base,
-      "--fs-group-dark"                  : colors.value.dark,
+      "--fs-tab-border-color"            : lights.dark,
+      "--fs-tab-hover-border-color"      : darks.dark,
+      "--fs-tab-active-background-color" : colors.value.light,
       "--fs-tab-tag-background-color"    : colors.value.base,
       "--fs-tab-tag-color"               : colors.value.baseContrast
     }));

package/components/FSTagGroup.vue

@@ -1,16 +1,34 @@
 <template>
-  <FSWrapGroup v-bind="$attrs">
+  <FSWrapGroup
+    v-if="$props.variant === 'wrap'"
+    v-bind="$attrs"
+  >
     <FSTag
       v-for="(tag, index) in $props.tags"
-      :key="index"
-      :label="tag"
-      :variant="$props.variant"
-      :color="$props.color"
+      :variant="$props.tagVariant"
       :editable="$props.editable"
+      :color="$props.color"
+      :label="tag"
+      :key="index"
       @remove="() => $emit('remove', tag)"
     />
     <slot />
   </FSWrapGroup>
+  <FSSlideGroup
+    v-if="$props.variant === 'slide'"
+    v-bind="$attrs"
+  >
+    <FSTag
+      v-for="(tag, index) in $props.tags"
+      :variant="$props.tagVariant"
+      :editable="$props.editable"
+      :color="$props.color"
+      :label="tag"
+      :key="index"
+      @remove="() => $emit('remove', tag)"
+    />
+    <slot />
+  </FSSlideGroup>
 </template>
 
 <script lang="ts">
@@ -34,6 +52,11 @@ export default defineComponent({
       default: () => []
     },
     variant: {
+      type: String as PropType<"wrap" | "slide">,
+      required: false,
+      default: "wrap"
+    },
+    tagVariant: {
       type: String as PropType<"standard" | "full">,
       required: false,
       default: "full"

package/components/FSText.vue

@@ -45,7 +45,7 @@ export default defineComponent({
       default: ColorEnum.Dark
     },
     variant: {
-      type: String as PropType<"base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
+      type: String as PropType<"base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast" | "soft" | "softContrast">,
       required: false,
       default: "base"
     }

package/components/FSWrapGroup.vue

@@ -54,7 +54,7 @@ export default defineComponent({
     const style = computed((): { [key: string] : string | null | undefined } => ({
       "--fs-group-padding"    : sizeToVar(props.padding),
       "--fs-group-gap"        : sizeToVar(props.gap),
-      "--fs-group-color"      : darks.light,
+      "--fs-group-color"      : darks.soft,
       "--fs-group-hover-color": darks.dark
     }));
 

package/components/deviceOrganisations/FSStatusCard.vue

@@ -50,7 +50,6 @@
             </FSSpan>
           </FSRow>
         </FSCol>
-
       </FSCol>
       <FSRow
         v-if="deviceTimestamp"