@dative-gpi/foundation-shared-components 1.0.6 → 1.0.9

package/components/FSAccordionPanel.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -136,15 +136,13 @@ export default defineComponent({
     const backgrounds = getColors(ColorEnum.Background);
     const lights = getColors(ColorEnum.Light);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-accordion-panel-padding-title"         : sizeToVar(props.paddingTitle),
-        "--fs-accordion-panel-padding-content"       : sizeToVar(props.paddingContent),
-        "--fs-accordion-panel-divider-size"          : props.divider ? "1px" : "0",
-        "--fs-accordion-panel-divider-color"         : lights.dark,
-        "--fs-accordion-panel-background-color"      : backgrounds.base
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-accordion-panel-padding-title"   : sizeToVar(props.paddingTitle),
+      "--fs-accordion-panel-padding-content" : sizeToVar(props.paddingContent),
+      "--fs-accordion-panel-divider-size"    : props.divider ? "1px" : "0",
+      "--fs-accordion-panel-divider-color"   : lights.dark,
+      "--fs-accordion-panel-background-color": backgrounds.base
+    }));
 
     return {
       style

package/components/FSBadge.vue

@@ -18,11 +18,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
   name: "FSBadge",

package/components/FSBreadcrumbs.vue

@@ -1,7 +1,7 @@
 <template>
   <v-breadcrumbs
-    :style="style"
     :items="$props.items"
+    :style="style"
     v-bind="$attrs"
   >
     <template
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, type Ref, ref } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
@@ -53,11 +53,11 @@ export default defineComponent({
 
     const darks = getColors(ColorEnum.Dark);
 
-    const style: Ref<{ [key: string] : string }> = ref({
-      "--fs-breadcrumbs-color": darks.dark,
-      "--fs-breadcrumbs-active-color": darks.base,
+    const style = computed((): StyleValue => ({
+      "--fs-breadcrumbs-color"         : darks.dark,
+      "--fs-breadcrumbs-active-color"  : darks.base,
       "--fs-breadcrumbs-disabled-color": darks.soft
-    });
+    }));
 
     const classes = (item: FSBreadcrumbItem): string[] => {
       const classNames = ["fs-breadcrumbs-label"];

package/components/FSButton.vue

@@ -1,6 +1,6 @@
 <template>
   <FSClickable
-    v-if="!['icon'].includes($props.variant)"
+    v-if="$props.variant !== 'icon'"
     :editable="$props.editable"
     :height="['40px', '36px']"
     :variant="$props.variant"
@@ -128,7 +128,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 import { type RouteLocation } from "vue-router";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -164,7 +164,7 @@ export default defineComponent({
       default: null
     },
     label: {
-      type: [String, Function],
+      type: [String, Function] as PropType<string | Function | null>,
       required: false,
       default: null
     },
@@ -218,7 +218,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         switch (props.variant) {
           case "icon": return {

package/components/FSCalendar.vue

@@ -65,12 +65,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, onMounted, type PropType, ref, type StyleValue } from "vue";
 
 import { useAppTimeZone, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSButton from "./FSButton.vue";
@@ -113,27 +111,25 @@ export default defineComponent({
     const { epochToPicker, pickerToEpoch, todayToEpoch } = useAppTimeZone();
     const { languageCode } = useAppLanguageCode();
     const { getColors } = useColors();
+    
+    const innerMonth = ref(new Date().getMonth());
+    const innerYear = ref(new Date().getFullYear());
 
     const colors = computed(() => getColors(props.color));
     const backgrounds = getColors(ColorEnum.Background);
     const darks = getColors(ColorEnum.Dark);
-    
-    const innerMonth = ref(props.modelValue ? epochToPicker(props.modelValue).getMonth() : new Date().getMonth());
-    const innerYear = ref(props.modelValue ? epochToPicker(props.modelValue).getFullYear() : new Date().getFullYear());
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-calendar-background-color"       : backgrounds.base,
-        "--fs-calendar-hover-background-color" : colors.value.light,
-        "--fs-calendar-active-background-color": colors.value.base,
-        "--fs-calendar-border-color"           : darks.base,
-        "--fs-calendar-hover-border-color"     : colors.value.base,
-        "--fs-calendar-active-border-color"    : colors.value.base,
-        "--fs-calendar-color"                  : darks.base,
-        "--fs-calendar-hover-color"            : colors.value.base,
-        "--fs-calendar-active-color"           : colors.value.light
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-calendar-background-color"       : backgrounds.base,
+      "--fs-calendar-hover-background-color" : colors.value.light,
+      "--fs-calendar-active-background-color": colors.value.base,
+      "--fs-calendar-border-color"           : darks.base,
+      "--fs-calendar-hover-border-color"     : colors.value.base,
+      "--fs-calendar-active-border-color"    : colors.value.base,
+      "--fs-calendar-color"                  : darks.base,
+      "--fs-calendar-hover-color"            : colors.value.base,
+      "--fs-calendar-active-color"           : colors.value.light
+    }));
 
     const text = computed((): string => {
       const date = new Date(0);
@@ -163,24 +159,30 @@ export default defineComponent({
     };
 
     const onClickDate = (value: unknown): void => {
-      const date = (value as Date[])[0];
-      const epoch = pickerToEpoch(date);
-      emit("update:modelValue", epoch);
+      if (!Array.isArray(value) || !(value[0] instanceof Date)) {
+        return;
+      }
+      emit("update:modelValue", pickerToEpoch(value[0]));
     };
 
     const allowedDates = (value: unknown): boolean => {
-      const date = value as Date;
-      const valueEpoch = pickerToEpoch(date);
+      if (!(value instanceof Date)) {
+        return false;
+      }
       switch (props.limit) {
-        case "past":
-          return valueEpoch <= todayToEpoch(true);
-        case "future":
-          return valueEpoch >= todayToEpoch(true);
-        default:
-          return true;
+        case "past"  : return pickerToEpoch(value) <= todayToEpoch();
+        case "future": return pickerToEpoch(value) >= todayToEpoch();
+        default      : return true;
       }
     };
 
+    onMounted(() => {
+      if (props.modelValue) {
+        innerMonth.value = epochToPicker(props.modelValue).getMonth();
+        innerYear.value = epochToPicker(props.modelValue).getFullYear();
+      }
+    });
+
     return {
       ColorEnum,
       languageCode,

package/components/FSCalendarTwin.vue

@@ -112,12 +112,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, onMounted, ref } from "vue";
+import { computed, defineComponent, onMounted, type PropType, ref, type StyleValue } from "vue";
 
 import { useAppTimeZone, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSButton from "./FSButton.vue";
@@ -160,10 +158,6 @@ export default defineComponent({
     const { epochToPicker, epochToPickerHeader, pickerToEpoch, todayToEpoch } = useAppTimeZone();
     const { languageCode } = useAppLanguageCode();
     const { getColors } = useColors();
-
-    const colors = computed(() => getColors(props.color));
-    const backgrounds = getColors(ColorEnum.Background);
-    const darks = getColors(ColorEnum.Dark);
     
     const innerLeftMonth = ref(new Date().getMonth());
     const innerLeftYear = ref(new Date().getFullYear());
@@ -173,72 +167,21 @@ export default defineComponent({
 
     const toggle = ref((props.modelValue?.length ?? 0) % 2);
 
-    onMounted((): void => {
-      if (!props.modelValue || !props.modelValue.length) {
-        innerLeftMonth.value = new Date().getMonth();
-        innerLeftYear.value = new Date().getFullYear();
-        if (innerLeftMonth.value < 11) {
-          innerRightMonth.value = innerLeftMonth.value + 1;
-          innerRightYear.value = innerLeftYear.value;
-        }
-        else {
-          innerRightMonth.value = 0;
-          innerRightYear.value = innerLeftYear.value + 1;
-        }
-      }
-      else {
-        innerLeftMonth.value = epochToPickerHeader(props.modelValue[0]).m;
-        innerLeftYear.value = epochToPickerHeader(props.modelValue[0]).y;
-        if (innerLeftMonth.value < 11) {
-          innerRightMonth.value = innerLeftMonth.value + 1;
-          innerRightYear.value = innerLeftYear.value;
-        }
-        else {
-          innerRightMonth.value = 0;
-          innerRightYear.value = innerLeftYear.value + 1;
-        }
-      }
-    });
-
-    const compare = (operator: "before" | "during" | "after", side: "left" | "right", date: { d: number, m: number, y: number }): boolean => {
-      switch (operator) {
-        case "before":
-          switch (side) {
-            case "left":
-              return innerLeftYear.value > date.y || (innerLeftYear.value === date.y && innerLeftMonth.value > date.m);
-            default:
-              return innerRightYear.value > date.y || (innerRightYear.value === date.y && innerRightMonth.value > date.m);
-          }
-        case "during":
-          switch (side) {
-            case "left":
-              return innerLeftYear.value === date.y && innerLeftMonth.value === date.m;
-            default:
-              return innerRightYear.value === date.y && innerRightMonth.value === date.m;
-          }
-        case "after":
-          switch (side) {
-            case "left":
-              return innerLeftYear.value < date.y || (innerLeftYear.value === date.y && innerLeftMonth.value < date.m);
-            default:
-              return innerRightYear.value < date.y || (innerRightYear.value === date.y && innerRightMonth.value < date.m);
-          }
-      }
-    }
+    const colors = computed(() => getColors(props.color));
+    const backgrounds = getColors(ColorEnum.Background);
+    const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-calendar-background-color"       : backgrounds.base,
-        "--fs-calendar-hover-background-color" : colors.value.light,
-        "--fs-calendar-active-background-color": colors.value.base,
-        "--fs-calendar-border-color"           : darks.base,
-        "--fs-calendar-hover-border-color"     : colors.value.base,
-        "--fs-calendar-active-border-color"    : colors.value.base,
-        "--fs-calendar-color"                  : darks.base,
-        "--fs-calendar-hover-color"            : colors.value.base,
-        "--fs-calendar-active-color"           : colors.value.light
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-calendar-background-color"       : backgrounds.base,
+      "--fs-calendar-hover-background-color" : colors.value.light,
+      "--fs-calendar-active-background-color": colors.value.base,
+      "--fs-calendar-border-color"           : darks.base,
+      "--fs-calendar-hover-border-color"     : colors.value.base,
+      "--fs-calendar-active-border-color"    : colors.value.base,
+      "--fs-calendar-color"                  : darks.base,
+      "--fs-calendar-hover-color"            : colors.value.base,
+      "--fs-calendar-active-color"           : colors.value.light
+    }));
 
     const innerLeftValue = computed((): number[] => {
       if (!props.modelValue || !props.modelValue.length) {
@@ -318,6 +261,32 @@ export default defineComponent({
       return classNames;
     });
 
+    const compare = (operator: "before" | "during" | "after", side: "left" | "right", date: { d: number, m: number, y: number }): boolean => {
+      switch (operator) {
+        case "before":
+          switch (side) {
+            case "left":
+              return innerLeftYear.value > date.y || (innerLeftYear.value === date.y && innerLeftMonth.value > date.m);
+            default:
+              return innerRightYear.value > date.y || (innerRightYear.value === date.y && innerRightMonth.value > date.m);
+          }
+        case "during":
+          switch (side) {
+            case "left":
+              return innerLeftYear.value === date.y && innerLeftMonth.value === date.m;
+            default:
+              return innerRightYear.value === date.y && innerRightMonth.value === date.m;
+          }
+        case "after":
+          switch (side) {
+            case "left":
+              return innerLeftYear.value < date.y || (innerLeftYear.value === date.y && innerLeftMonth.value < date.m);
+            default:
+              return innerRightYear.value < date.y || (innerRightYear.value === date.y && innerRightMonth.value < date.m);
+          }
+      }
+    };
+
     const onClickPrevious = (): void => {
       if (innerLeftMonth.value === 11) {
         innerLeftMonth.value--;
@@ -372,7 +341,6 @@ export default defineComponent({
       }
     };
 
-
     const onClickRight = (value: unknown): void => {
       const dates = value as Date[];
       const clicked = pickerToEpoch(dates[dates.length - 1]);
@@ -395,18 +363,43 @@ export default defineComponent({
     };
 
     const allowedDates = (value: unknown): boolean => {
-      const date = value as Date;
-      const valueEpoch = pickerToEpoch(date);
+      if (!(value instanceof Date)) {
+        return false;
+      }
       switch (props.limit) {
-        case "past":
-          return valueEpoch <= todayToEpoch(true);
-        case "future":
-          return valueEpoch >= todayToEpoch(true);
-        default:
-          return true;
+        case "past"  : return pickerToEpoch(value) <= todayToEpoch();
+        case "future": return pickerToEpoch(value) >= todayToEpoch();
+        default      : return true;
       }
     };
 
+    onMounted((): void => {
+      if (!props.modelValue || !props.modelValue.length) {
+        innerLeftMonth.value = new Date().getMonth();
+        innerLeftYear.value = new Date().getFullYear();
+        if (innerLeftMonth.value < 11) {
+          innerRightMonth.value = innerLeftMonth.value + 1;
+          innerRightYear.value = innerLeftYear.value;
+        }
+        else {
+          innerRightMonth.value = 0;
+          innerRightYear.value = innerLeftYear.value + 1;
+        }
+      }
+      else {
+        innerLeftMonth.value = epochToPickerHeader(props.modelValue[0]).m;
+        innerLeftYear.value = epochToPickerHeader(props.modelValue[0]).y;
+        if (innerLeftMonth.value < 11) {
+          innerRightMonth.value = innerLeftMonth.value + 1;
+          innerRightYear.value = innerLeftYear.value;
+        }
+        else {
+          innerRightMonth.value = 0;
+          innerRightYear.value = innerLeftYear.value + 1;
+        }
+      }
+    });
+
     return {
       ColorEnum,
       languageCode,

package/components/FSCard.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
@@ -115,7 +115,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       switch (props.variant) {
         case "background": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
@@ -136,8 +136,8 @@ export default defineComponent({
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": colors.value.light,
-          "--fs-card-border-color"    : colors.value.lightContrast,
-          "--fs-card-color"           : colors.value.lightContrast
+          "--fs-card-border-color"    : colors.value.lightContrast!,
+          "--fs-card-color"           : colors.value.lightContrast!
         }
         case "full": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
@@ -148,7 +148,7 @@ export default defineComponent({
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": colors.value.base,
           "--fs-card-border-color"    : colors.value.base,
-          "--fs-card-color"           : colors.value.baseContrast
+          "--fs-card-color"           : colors.value.baseContrast!
         }
         case "gradient": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
@@ -158,8 +158,8 @@ export default defineComponent({
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": gradients.value.base,
-          "--fs-card-border-color"    : colors.value.lightContrast,
-          "--fs-card-color"           : colors.value.lightContrast
+          "--fs-card-border-color"    : colors.value.lightContrast!,
+          "--fs-card-color"           : colors.value.lightContrast!
         }
       }
     });

package/components/FSCardPlaceholder.vue

@@ -30,8 +30,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import { ColorEnum } from "../models";
 

package/components/FSCheckbox.vue

@@ -59,12 +59,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
@@ -131,7 +129,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-checkbox-cursor"        : "default",
@@ -155,7 +153,7 @@ export default defineComponent({
 
     const icon = computed((): string => props.modelValue ? "mdi-checkbox-marked" : props.indeterminate ? "mdi-minus-box" : "mdi-checkbox-blank-outline");
 
-    const font = computed((): string => props.modelValue ? "text-button" : "text-body");
+    const font = computed((): "text-button" | "text-body" => props.modelValue ? "text-button" : "text-body");
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 

package/components/FSChip.vue

@@ -44,11 +44,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
@@ -107,7 +105,7 @@ export default defineComponent({
     const backgrounds = getColors(ColorEnum.Background);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       switch (props.variant) {
         case "standard": return {
           "--fs-chip-height"                 : sizeToVar(props.height),
@@ -125,13 +123,13 @@ export default defineComponent({
           "--fs-chip-height"                 : sizeToVar(props.height),
           "--fs-chip-background-color"       : colors.value.base,
           "--fs-chip-border-color"           : colors.value.base,
-          "--fs-chip-color"                  : colors.value.baseContrast,
+          "--fs-chip-color"                  : colors.value.baseContrast!,
           "--fs-chip-hover-background-color" : colors.value.base,
           "--fs-chip-hover-border-color"     : colors.value.base,
-          "--fs-chip-hover-color"            : colors.value.baseContrast,
+          "--fs-chip-hover-color"            : colors.value.baseContrast!,
           "--fs-chip-active-background-color": colors.value.dark,
-          "--fs-chip-active-border-color"    : colors.value.darkContrast,
-          "--fs-chip-active-color"           : colors.value.darkContrast
+          "--fs-chip-active-border-color"    : colors.value.darkContrast!,
+          "--fs-chip-active-color"           : colors.value.darkContrast!
         };
         case "borderless": return {
           "--fs-chip-height"                 : sizeToVar(props.height),
@@ -157,9 +155,9 @@ export default defineComponent({
     });
 
     return {
+      classes,
       colors,
-      style,
-      classes
+      style
     };
   }
 });