@dative-gpi/foundation-shared-components 1.0.33 → 1.0.34

package/components/FSClickable.vue

@@ -3,6 +3,7 @@
     v-if="$props.href"
     :href="$props.href"
     :style="style"
+    :class="$props.class"
     @mouseover="hover = true"
     @mouseleave="hover = false"
     @mousedown="active = true"
@@ -44,6 +45,7 @@
     v-else-if="$props.to"
     :style="style"
     :to="$props.to"
+    :class="$props.class"
     @mouseover="hover = true"
     @mouseleave="hover = false"
     @mousedown="active = true"
@@ -85,6 +87,7 @@
     v-else
     :type="$props.type"
     :style="style"
+    :class="$props.class"
     @click.stop="onClick"
     @mouseover="hover = true"
     @mouseleave="hover = false"
@@ -115,6 +118,7 @@
       v-if="$props.load"
     >
       <v-progress-circular
+        :class="$props.class"
         class="fs-clickable-load"
         width="2"
         size="24"
@@ -156,6 +160,11 @@ export default defineComponent({
       required: false,
       default: "0"
     },
+    class: {
+      type: [String, Array] as PropType<string | string[] | null>,
+      required: false,
+      default: null
+    },
     to: {
       type: [String, Object] as PropType<string | RouteLocation | null>,
       required: false,

package/components/FSDialogFormBody.vue

@@ -12,8 +12,8 @@
         gap="24px"
       >
         <FSFadeOut
-          :height="height"
           padding="0 8px 0 0"
+          :maxHeight="maxHeight"
         >
           <slot
             name="body"
@@ -60,8 +60,8 @@
       gap="24px"
     >
       <FSFadeOut
-        :height="height"
         padding="0 8px 0 0"
+        :maxHeight="maxHeight"
       >
         <slot
           name="validation"
@@ -227,7 +227,7 @@ export default defineComponent({
     const formRef = ref<HTMLElement | null>(null);
     const valid = ref(false);
 
-    const height = computed(() => {
+    const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
         + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
@@ -262,8 +262,8 @@ export default defineComponent({
       cancelLabel,
       submitLabel,
       ColorEnum,
+      maxHeight,
       formRef,
-      height,
       valid,
       onValidate,
       onSubmit

package/components/FSDialogMultiFormBody.vue

@@ -14,8 +14,8 @@
         gap="24px"
       >
         <FSFadeOut
-          :height="height"
           padding="0 8px 0 0"
+          :maxHeight="maxHeight"
         >
           <slot
             :name="`step-${step}`"
@@ -167,7 +167,7 @@ export default defineComponent({
     const valid = ref(false);
     const valids = ref(Array.from({ length: props.steps }, () => false));
 
-    const height = computed(() => {
+    const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
         + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
@@ -220,7 +220,7 @@ export default defineComponent({
       nextButtonLabel,
       currentStep,
       ColorEnum,
-      height,
+      maxHeight,
       valids,
       valid,
       onPrevious,

package/components/FSDialogSubmit.vue

@@ -11,8 +11,8 @@
       #body
     >
       <FSFadeOut
-        :height="height"
         padding="0 8px 0 0"
+        :maxHeight="maxHeight"
       >
         <slot
           name="body"
@@ -167,7 +167,7 @@ export default defineComponent({
     const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
-    const height = computed(() => {
+    const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
         + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
@@ -187,7 +187,7 @@ export default defineComponent({
       cancelLabel,
       submitLabel,
       ColorEnum,
-      height
+      maxHeight
     };
   }
 });

package/components/FSFadeOut.vue

@@ -22,8 +22,14 @@ export default defineComponent({
   name: "FSFadeOut",
   props: {
     height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: true
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null | undefined>,
+      required: false,
+      default: undefined
+    },
+    maxHeight: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null | undefined>,
+      required: false,
+      default: undefined
     },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
@@ -59,7 +65,8 @@ export default defineComponent({
     const elementId = `id${uuidv4()}`;
 
     const style = computed((): StyleValue => ({
-      "--fs-fade-out-height"            : sizeToVar(props.height),
+      "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : undefined,
+      "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : undefined,
       "--fs-fade-out-width"             : sizeToVar(props.width),
       "--fs-fade-out-padding"           : sizeToVar(props.padding),
       "--fs-fade-out-mask-color"        : backgrounds.base,

package/components/fields/FSAutocompleteField.vue

@@ -81,7 +81,7 @@
             v-model="search"
           />
           <FSFadeOut
-            :height="height"
+            :maxHeight="maxHeight"
           >
             <FSCol
               v-if="$props.multiple"
@@ -515,7 +515,7 @@ export default defineComponent({
       });
     });
 
-    const height = computed(() => {
+    const maxHeight = computed(() => {
       const other = 8 + 8                // Paddings
         + (isMobileSized ? 36 : 40) + 8; // Header
       return `calc(100vh - 40px - ${other}px)`;
@@ -625,10 +625,10 @@ export default defineComponent({
       validateOn,
       ColorEnum,
       listStyle,
+      maxHeight,
       messages,
       classes,
       dialog,
-      height,
       search,
       slots,
       style,

package/components/fields/FSSelectField.vue

@@ -61,7 +61,7 @@
           #body
         >
           <FSFadeOut
-            :height="height"
+            :maxHeight="maxHeight"
           >
             <FSCol
               v-if="$props.multiple"
@@ -377,7 +377,7 @@ export default defineComponent({
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
-    const height = computed(() => {
+    const maxHeight = computed(() => {
       const other = 8 + 8; // Paddings
       return `calc(100vh - 40px - ${other}px)`;
     });
@@ -477,9 +477,9 @@ export default defineComponent({
       validateOn,
       ColorEnum,
       listStyle,
+      maxHeight,
       messages,
       dialog,
-      height,
       style,
       openMobileOverlay,
       onCheckboxChange,

package/components/fields/FSTreeViewField.vue

@@ -57,7 +57,7 @@
             #body
           >
             <FSFadeOut
-              :height="height"
+              :maxHeight="maxHeight"
             >
               <v-treeview
                 :itemTitle="$props.itemTitle"
@@ -381,7 +381,7 @@ export default defineComponent({
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
-    const height = computed(() => {
+    const maxHeight = computed(() => {
       const other = 8 + 8; // Paddings
       return `calc(100vh - 40px - ${other}px)`;
     });
@@ -501,11 +501,11 @@ export default defineComponent({
       innerValue,
       fieldSlots,
       validateOn,
+      maxHeight,
       menuSlots,
       treeItems,
       messages,
       dialog,
-      height,
       style,
       menu,
       openMobileOverlay,

package/components/fields/periodicField/FSPeriodicDailyField.vue

@@ -80,24 +80,31 @@ export default defineComponent({
 
     const selectedConfiguration = ref("custom");
 
-    const days = computed(() => {
-      return +props.modelValue[2].replace("*/", "");
+    const days = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[2].replace("*/", "")))) {
+        return 0
+      }
+      return parseInt(props.modelValue[2].replace("*/", ""));
     });
-    const time = computed(() => {
-      return (+props.modelValue[1] * 60 + +props.modelValue[0]) * 1000 * 60;
+
+    const time = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[0])) || isNaN(parseInt(props.modelValue[1]))) {
+        return 0;
+      }
+      return ((parseInt(props.modelValue[0])) + (parseInt(props.modelValue[1]) * 60)) * 60 * 1000;
     });
 
-    const onUpdateDays = (value: number) => {
+    const onUpdateDays = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `*/${value}`, "*", "*"]);
-    }
+    };
 
-    const onUpdateHours = (value: number) => {
+    const onUpdateHours = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `*/${days.value}`, "*", "*"]);
-    }
+    };
 
     return {
       availableConfigurations,
@@ -107,7 +114,7 @@ export default defineComponent({
       time,
       onUpdateHours,
       onUpdateDays
-    }
+    };
   }
-})
+});
 </script>

package/components/fields/periodicField/FSPeriodicMonthlyField.vue

@@ -134,39 +134,53 @@ export default defineComponent({
 
     const selectedConfiguration = ref(props.modelValue[4] !== "*" ? "customDayWeek" : "customDayNumber");
 
-    const dayNumber = computed(() => 
-      props.modelValue[4] !== "*" ? 1 : +props.modelValue[2]
-    );
+    const dayNumber = computed((): number => {
+      if (props.modelValue[4] !== "*" || isNaN(parseInt(props.modelValue[2]))) {
+        return 1;
+      }
+      return parseInt(props.modelValue[2]);
+    });
 
-    const dayWeek = computed(() => 
-      props.modelValue[4] === "*" ? 0 : +props.modelValue[4] - 1
-    );
+    const dayWeek = computed((): number => {
+      if (props.modelValue[4] !== "*" || isNaN(parseInt(props.modelValue[4]))) {
+        return 0;
+      }
+      return parseInt(props.modelValue[4]) - 1;
+    });
 
-    const dayWeekNumber = computed(() => 
-      props.modelValue[2].includes("-") ? Math.floor(+props.modelValue[2].split("-")[1] / 7) : 1
-    );
+    const dayWeekNumber = computed((): number => {
+      if (!props.modelValue[2].includes("-") || isNaN(parseInt(props.modelValue[2].split("-")[1]))) {
+        return 1;
+      }
+      return Math.floor(parseInt(props.modelValue[2].split("-")[1]) / 7);
+    });
 
-    const time = computed(() => (+props.modelValue[1] * 60 + +props.modelValue[0]) * 1000 * 60);
+    const time = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[0])) || isNaN(parseInt(props.modelValue[1]))) {
+        return 0;
+      }
+      return ((parseInt(props.modelValue[0])) + (parseInt(props.modelValue[1]) * 60)) * 60 * 1000;
+    });
 
-    const onUpdateDayNumber = (value: number) => {
+    const onUpdateDayNumber = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `${value}`, `*`, `*`]);
     };
 
-    const onUpdateDayWeekNumber = (value: number) => {
+    const onUpdateDayWeekNumber = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `${(value - 1) * 7 + 1}-${value * 7}`, `*`, `${dayWeek.value + 1}`]);
     };
 
-    const onUpdateDayWeek = (value: number) => {
+    const onUpdateDayWeek = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `${(dayWeekNumber.value - 1) * 7 + 1}-${dayWeekNumber.value * 7}`, `*`, `${value + 1}`]);
     };
 
-    const onUpdateHours = (value: number) => {
+    const onUpdateHours = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       if (selectedConfiguration.value === "customDayNumber") {
@@ -177,7 +191,7 @@ export default defineComponent({
       }
     };
 
-    watch(() => selectedConfiguration.value, (value: string) => {
+    watch(() => selectedConfiguration.value, (value: string): void => {
       const hours = Math.floor(time.value / (60 * 60 * 1000));
       const minutes = Math.floor(time.value / (60 * 1000) % 60);
       if(value === "customDayNumber") {

package/components/fields/periodicField/FSPeriodicWeeklyField.vue

@@ -79,22 +79,28 @@ export default defineComponent({
     ];
 
     const selectedConfiguration = ref("custom");
-    
-    const day = computed(() => {
-      return +props.modelValue[4] - 1;
+
+    const day = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[4]))) {
+        return 0;
+      }
+      return parseInt(props.modelValue[4]) - 1;
     });
 
-    const time = computed(() => {
-      return (+props.modelValue[1] * 60 + +props.modelValue[0]) * 1000 * 60;
+    const time = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[0])) || isNaN(parseInt(props.modelValue[1]))) {
+        return 0;
+      }
+      return ((parseInt(props.modelValue[0])) + (parseInt(props.modelValue[1]) * 60)) * 60 * 1000;
     });
 
-    const onUpdateDay = (value: number) => {
+    const onUpdateDay = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `*`, `*`, `${value + 1}`]);
     };
 
-    const onUpdateHours = (value: number) => {
+    const onUpdateHours = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `*`, `*`, `${day.value + 1}`]);

package/components/fields/periodicField/FSPeriodicYearlyField.vue

@@ -88,32 +88,41 @@ export default defineComponent({
     ];
 
     const selectedConfiguration = ref("custom");
-    
-    const day = computed(() => {
-      return +props.modelValue[2];
+
+    const day = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[2]))) {
+        return 0;
+      }
+      return parseInt(props.modelValue[2]);
     });
 
-    const month = computed(() => {
-      return +props.modelValue[3] - 1;
+    const month = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[3]))) {
+        return 0;
+      }
+      return parseInt(props.modelValue[3]) - 1;
     });
 
-    const time = computed(() => {
-      return (+props.modelValue[1] * 60 + +props.modelValue[0]) * 1000 * 60;
+    const time = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[0])) || isNaN(parseInt(props.modelValue[1]))) {
+        return 0;
+      }
+      return ((parseInt(props.modelValue[0])) + (parseInt(props.modelValue[1]) * 60)) * 60 * 1000;
     });
 
-    const onUpdateDay = (value: number) => {
+    const onUpdateDay = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `${value}`, `${month.value + 1}`, "*"]);
     };
 
-    const onUpdateHours = (value: number) => {
+    const onUpdateHours = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${month.value + 1}`, "*"]);
     };
 
-    const onUpdateMonth = (value: number) => {
+    const onUpdateMonth = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${value + 1}`, "*"]);

package/components/lists/FSFilterButton.vue

@@ -7,10 +7,10 @@
       #activator="{ props }"
     >
       <FSChip
+        prependIcon="mdi-filter-variant"
         class="fs-filter-button"
         variant="standard"
-        prependIcon="mdi-filter-variant"
-        :height="[30, 24]"
+        :height="['30px', '24px']"
         :color="ColorEnum.Dark"
         :editable="true"
         :label="label"
@@ -23,12 +23,12 @@
       :border="false"
     >
       <FSCol
-        gap="12px"
         padding="16px 0 24px 16px"
+        gap="12px"
       >
         <FSCol
-          gap="12px"
           padding="0 16px 0 0"
+          gap="12px"
         >
           <FSSpan
             font="text-overline"
@@ -37,11 +37,11 @@
           </FSSpan>
           <FSChip
             class="fs-filter-button-chip"
-            :height="[30, 24]"
-            :editable="true"
-            :color="$props.color"
-            :variant="getAllVariant()"
             :label="$tr('ui.data-table.all-values', 'All values')"
+            :height="['30px', '24px']"
+            :variant="getAllVariant()"
+            :color="$props.color"
+            :editable="true"
             @click="onToggleAll"
           />
           <FSDivider
@@ -55,7 +55,7 @@
         </FSCol>
         <FSFadeOut
           padding="0 8px 0 0"
-          height="360px"
+          maxHeight="360px"
         >
           <FSCol
             gap="6px"
@@ -63,12 +63,12 @@
             <FSChip
               v-for="(filter, index) in searchedFilters"
               class="fs-filter-button-chip"
-              :height="[30, 24]"
-              :key="index"
-              :editable="true"
-              :label="filter.text"
-              :color="$props.color"
               :variant="getVariant(filter)"
+              :height="['30px', '24px']"
+              :color="$props.color"
+              :label="filter.text"
+              :editable="true"
+              :key="index"
               @click="() => onToggle(filter)"
             >
               <template
@@ -89,8 +89,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref } from "vue";
 
-import type { ColorBase, FSDataTableColumn, FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum, type FSDataTableColumn, type FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
 import FSSearchField from "../fields/FSSearchField.vue";
@@ -195,15 +194,15 @@ export default defineComponent({
 
     return {
       searchedFilters,
+      singlePick,
       ColorEnum,
       expanded,
       search,
       label,
-      singlePick,
-      getVariant,
       getAllVariant,
-      onToggle,
-      onToggleAll
+      onToggleAll,
+      getVariant,
+      onToggle
     };
   }
 });

package/components/lists/FSHiddenButton.vue

@@ -21,12 +21,12 @@
       :border="false"
     >
       <FSCol
-        gap="12px"
         padding="16px 0px 24px 16px"
+        gap="12px"
       >
         <FSCol
-          gap="12px"
           padding="0 16px 0 0"
+          gap="12px"
         >
           <FSSpan
             font="text-overline"
@@ -36,7 +36,7 @@
         </FSCol>
         <FSFadeOut
           padding="0 8px 0 0"
-          height="360px"
+          maxHeight="360px"
         >
           <FSCol
             gap="6px"
@@ -44,12 +44,12 @@
             <FSChip
               v-for="(header, index) in $props.headers"
               class="fs-hidden-button-chip"
-              :height="[30, 24]"
-              :key="index"
-              :editable="true"
-              :label="header.text"
-              :color="$props.color"
               variant="full"
+              :height="['30px', '24px']"
+              :color="$props.color"
+              :label="header.text"
+              :editable="true"
+              :key="index"
               @click="$emit('update:show', header)"
             >
             </FSChip>
@@ -61,11 +61,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { defineComponent, ref } from "vue";
+import { defineComponent, type PropType, ref } from "vue";
 
-import type { ColorBase, FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum, type FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
 
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";