@dative-gpi/foundation-shared-components 0.0.49 → 0.0.51

package/components/FSAccordion.vue

@@ -1,7 +1,7 @@
 <template>
   <v-expansion-panels variant="accordion">
     <template
-      v-for="(component, index) in getChildren()"
+      v-for="(component, index) in getChildren(undefined)"
       :key="index"
     >
       <component :is="component" />
@@ -21,7 +21,7 @@ export default defineComponent({
 
     return {
       getChildren
-    }
+    };
   }
-})
+});
 </script>

package/components/FSAccordionPanel.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -58,17 +58,17 @@ export default defineComponent({
   },
   props: {
     prependIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     title: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     content: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -109,7 +109,7 @@ export default defineComponent({
     const backgrounds = getColors(ColorEnum.Background);
     const lights = getColors(ColorEnum.Light);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       return {
         "--fs-accordion-panel-padding-title"         : sizeToVar(props.paddingTitle),
         "--fs-accordion-panel-padding-content"       : sizeToVar(props.paddingContent),

package/components/FSBadge.vue

@@ -24,7 +24,7 @@ export default defineComponent({
   name: "FSBadge",
   props: {
     content: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     }, 

package/components/FSBreadcrumbs.vue

@@ -42,7 +42,7 @@ export default defineComponent({
 
     const darks = getColors(ColorEnum.Dark);
 
-    const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
+    const style: Ref<{ [key: string] : string }> = ref({
       "--fs-breadcrumbs-color": darks.dark,
       "--fs-breadcrumbs-active-color": darks.base,
       "--fs-breadcrumbs-disabled-color": darks.light

package/components/FSButton.vue

@@ -1,7 +1,6 @@
 <template>
   <FSClickable
     v-if="!['icon'].includes($props.variant)"
-    :fullWidth="$props.fullWidth"
     :editable="$props.editable"
     :height="['40px', '36px']"
     :variant="$props.variant"
@@ -121,7 +120,7 @@ export default defineComponent({
       default: null
     },
     prependIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -131,12 +130,12 @@ export default defineComponent({
       default: null
     },
     appendIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     icon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -175,7 +174,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         switch (props.variant) {
           case "icon": return {
@@ -196,6 +195,7 @@ export default defineComponent({
           };
         }
       }
+      return {};
     });
 
     const iconClasses = computed((): string[] => {

package/components/FSCalendar.vue

@@ -42,15 +42,17 @@
         class="fs-calendar-divider"
         :style="style"
       />
-      <v-locale-provider :locale="languageCode">
+      <v-locale-provider
+        :locale="languageCode"
+      >
         <v-date-picker-month
           :month="innerMonth"
           :year="innerYear"
           :multiple="false"
           :showAdjacentMonths="true"
           :allowedDates="allowedDates"
-          :modelValue="epochToPicker($props.modelValue)"
-          @update:modelValue="(value) => $emit('update:modelValue', pickerToEpoch(value[0]))"
+          :modelValue="[epochToPicker($props.modelValue)]"
+          @update:modelValue="onClickDate"
           @update:month="null"
           @update:year="null"
         />
@@ -62,7 +64,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
-import { useTimeZone, useLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
@@ -81,12 +83,12 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     modelValue: {
-      type: Number,
+      type: Number as PropType<number | null>,
       required: false,
       default: null
     },
@@ -102,9 +104,9 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props) {
-    const { epochToPicker, pickerToEpoch, todayToEpoch } = useTimeZone();
-    const { languageCode } = useLanguageCode();
+  setup(props, { emit }) {
+    const { epochToPicker, pickerToEpoch, todayToEpoch } = useAppTimeZone();
+    const { languageCode } = useAppLanguageCode();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
@@ -114,7 +116,7 @@ export default defineComponent({
     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((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       return {
         "--fs-calendar-background-color"       : backgrounds.base,
         "--fs-calendar-hover-background-color" : colors.value.light,
@@ -155,8 +157,15 @@ export default defineComponent({
       }
     };
 
-    const allowedDates = (value: Date): boolean => {
-      const valueEpoch = pickerToEpoch(value);
+    const onClickDate = (value: unknown): void => {
+      const date = (value as Date[])[0];
+      const epoch = pickerToEpoch(date);
+      emit("update:modelValue", epoch);
+    };
+
+    const allowedDates = (value: unknown): boolean => {
+      const date = value as Date;
+      const valueEpoch = pickerToEpoch(date);
       switch (props.limit) {
         case "past":
           return valueEpoch <= todayToEpoch(true);
@@ -178,6 +187,7 @@ export default defineComponent({
       pickerToEpoch,
       onClickPrevious,
       onClickNext,
+      onClickDate,
       allowedDates
     };
   }

package/components/FSCalendarTwin.vue

@@ -102,7 +102,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, PropType, ref } from "vue";
 
-import { useTimeZone, useLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
@@ -121,12 +121,12 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     modelValue: {
-      type: Array as PropType<number[]>,
+      type: Array as PropType<number[] | null>,
       required: false,
       default: null
     },
@@ -143,8 +143,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToPicker, epochToPickerHeader, pickerToEpoch, todayToEpoch } = useTimeZone();
-    const { languageCode } = useLanguageCode();
+    const { epochToPicker, epochToPickerHeader, pickerToEpoch, todayToEpoch } = useAppTimeZone();
+    const { languageCode } = useAppLanguageCode();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
@@ -212,7 +212,7 @@ export default defineComponent({
       }
     }
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       return {
         "--fs-calendar-background-color"       : backgrounds.base,
         "--fs-calendar-hover-background-color" : colors.value.light,
@@ -338,8 +338,9 @@ export default defineComponent({
       }
     };
 
-    const onClickLeft = (value: Date[]): void => {
-      const clicked = pickerToEpoch(value[value.length - 1]);
+    const onClickLeft = (value: unknown): void => {
+      const dates = value as Date[];
+      const clicked = pickerToEpoch(dates[dates.length - 1]);
       if (!props.modelValue || !props.modelValue.length) {
         emit("update:modelValue", [clicked, clicked]);
       }
@@ -357,8 +358,10 @@ export default defineComponent({
       }
     };
 
-    const onClickRight = (value: Date[]): void => {
-      const clicked = pickerToEpoch(value[value.length - 1]);
+
+    const onClickRight = (value: unknown): void => {
+      const dates = value as Date[];
+      const clicked = pickerToEpoch(dates[dates.length - 1]);
       if (!props.modelValue || !props.modelValue.length) {
         emit("update:modelValue", [clicked, clicked]);
       }
@@ -377,8 +380,9 @@ export default defineComponent({
       toggle.value = (++toggle.value) % 2;
     };
 
-    const allowedDates = (value: Date): boolean => {
-      const valueEpoch = pickerToEpoch(value);
+    const allowedDates = (value: unknown): boolean => {
+      const date = value as Date;
+      const valueEpoch = pickerToEpoch(date);
       switch (props.limit) {
         case "past":
           return valueEpoch <= todayToEpoch(true);

package/components/FSCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="fs-card"
+    :class="classes"
     :style="style"
   >
     <slot>
@@ -98,7 +98,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       switch (props.variant) {
         case "standard": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
@@ -123,7 +123,16 @@ export default defineComponent({
       }
     });
 
+    const classes = computed((): string[] => {
+      const classNames = ["fs-card"];
+      if (props.elevation) {
+        classNames.push("fs-card-elevation");
+      }
+      return classNames;
+    });
+
     return {
+      classes,
       style
     };
   }

package/components/FSCarousel.vue

@@ -44,7 +44,7 @@ export default defineComponent({
 
     const backgrounds = getColors(ColorEnum.Background);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       return {
         "--fs-carousel-height"          : sizeToVar(props.height),
         "--fs-carousel-background-color": backgrounds.base

package/components/FSCheckbox.vue

@@ -73,12 +73,12 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     description: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -98,7 +98,7 @@ export default defineComponent({
       default: ColorEnum.Primary
     },
     rules: {
-      type: Array as PropType<Function[]>,
+      type: Array as PropType<any[]>,
       required: false,
       default: () => []
     },
@@ -123,7 +123,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-checkbox-cursor"        : "default",

package/components/FSChip.vue

@@ -54,17 +54,17 @@ export default defineComponent({
   },
   props: {
     prependIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
     appendIcon: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -90,7 +90,7 @@ export default defineComponent({
     const colors = computed(() => getColors(props.color));
     const backgrounds = getColors(ColorEnum.Background);
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       switch (props.variant) {
         case "standard": return {
           "--fs-chip-background-color"       : backgrounds.base,

package/components/FSClickable.vue

@@ -130,7 +130,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-clickable-border-size"     : props.border ? "1px" : "0",

package/components/FSClock.vue

@@ -7,38 +7,27 @@
       align="center-center"
       :wrap="false"
     >
-      <FSText
-        v-if="$props.reminder"
-      >
-        {{ epochToLongDateFormat($props.date) }}
-      </FSText>
-      <v-spacer v-if="$props.reminder" />
-      <FSRow
-        align="center-center"
-        :wrap="false"
-      >
-        <v-text-field
-          class="fs-clock-field"
-          variant="outlined"
-          type="number"
-          hide-details
-          :style="style"
-          :readonly="!$props.editable"
-          :modelValue="innerHours.toString().padStart(2, '0')"
-          @update:modelValue="onChangeHours"
-        />
-        :
-        <v-text-field
-          class="fs-clock-field"
-          variant="outlined"
-          type="number"
-          hide-details
-          :style="style"
-          :readonly="!$props.editable"
-          :modelValue="innerMinutes.toString().padStart(2, '0')"
-          @update:modelValue="onChangeMinutes"
-        />
-      </FSRow>
+      <v-text-field
+        class="fs-clock-field"
+        variant="outlined"
+        type="number"
+        hide-details
+        :style="style"
+        :readonly="!$props.editable"
+        :modelValue="innerHours.toString().padStart(2, '0')"
+        @update:modelValue="onChangeHours"
+      />
+      :
+      <v-text-field
+        class="fs-clock-field"
+        variant="outlined"
+        type="number"
+        hide-details
+        :style="style"
+        :readonly="!$props.editable"
+        :modelValue="innerMinutes.toString().padStart(2, '0')"
+        @update:modelValue="onChangeMinutes"
+      />
     </FSRow>
     <FSCol
       v-if="$props.slider"
@@ -73,7 +62,7 @@
 import { computed, defineComponent, PropType, ref, watch } from "vue";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSlider from "./FSSlider.vue";
@@ -91,7 +80,7 @@ export default defineComponent({
   },
   props: {
     modelValue: {
-      type: Number,
+      type: Number as PropType<number | null>,
       required: false,
       default: null
     },
@@ -101,15 +90,10 @@ export default defineComponent({
       default: ColorEnum.Primary
     },
     date: {
-      type: Number,
+      type: Number as PropType<number | null>,
       required: false,
       default: null
     },
-    reminder: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     editable: {
       type: Boolean,
       required: false,
@@ -123,7 +107,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToLongDateFormat } = useTimeZone();
+    const { epochToLongDateFormat } = useAppTimeZone();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
@@ -134,7 +118,7 @@ export default defineComponent({
     const innerHours = ref(props.modelValue ? Math.floor(props.modelValue / (60 * 60 * 1000)) : 0);
     const innerMinutes = ref(props.modelValue ? Math.floor((props.modelValue % (60 * 60 * 1000)) / (60 * 1000)) : 0);
 
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
           "--fs-clock-field-cursor"             : "default",
@@ -153,14 +137,22 @@ export default defineComponent({
       };
     });
 
-    const onChangeHours = (value: number): void => {
-      value = Math.min(23, Math.max(0, value));
-      innerHours.value = value;
+    const onChangeHours = (value: string): void => {
+      let number = parseInt(value);
+      if (isNaN(number) || !isFinite(number)) {
+        return;
+      }
+      number = Math.min(23, Math.max(0, number));
+      innerHours.value = number;
     };
 
-    const onChangeMinutes = (value: number): void => {
-      value = Math.min(59, Math.max(0, value));
-      innerMinutes.value = value;
+    const onChangeMinutes = (value: string): void => {
+      let number = parseInt(value);
+      if (isNaN(number) || !isFinite(number)) {
+        return;
+      }
+      number = Math.min(59, Math.max(0, number));
+      innerMinutes.value = number;
     };
 
     watch([innerHours, innerMinutes], () => {

package/components/FSCol.vue

@@ -43,7 +43,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => ({
+    const style = computed((): { [key: string] : string | undefined } => ({
       "--fs-col-padding": sizeToVar(props.padding),
       "--fs-col-gap"    : sizeToVar(props.gap),
       "--fs-col-width"  : sizeToVar(props.width),

package/components/FSColor.vue

@@ -39,13 +39,15 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
-      "--fs-color-background-color": colors.value.light,
-      "--fs-color-border-color"    : colors.value.lightContrast,
-      "--fs-color-color"           : colors.value.lightContrast,
-      "--fs-color-light"           : colors.value.light,
-      "--fs-color-base"            : colors.value.base,
-      "--fs-color-dark"            : colors.value.dark
+    const style = computed((): { [key: string] : string | undefined } => {
+      return {
+        "--fs-color-background-color": colors.value.light,
+        "--fs-color-border-color"    : colors.value.lightContrast,
+        "--fs-color-color"           : colors.value.lightContrast,
+        "--fs-color-light"           : colors.value.light,
+        "--fs-color-base"            : colors.value.base,
+        "--fs-color-dark"            : colors.value.dark
+      };
     });
 
     const classes = computed((): string[] => {

package/components/FSColorIcon.vue

@@ -39,7 +39,7 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       switch (props.variant) {
         case "full": return {
           "--fs-icon-background-color": colors.value.light

package/components/FSDivider.vue

@@ -44,7 +44,7 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },
@@ -75,7 +75,7 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+    const style = computed((): { [key: string] : string | undefined } => {
       switch (props.variant) {
         case "base": return {
           "--fs-divider-width": sizeToVar(props.width),