@dative-gpi/foundation-shared-components 0.0.205 → 0.0.207

package/components/FSCalendar.vue

@@ -13,6 +13,7 @@
     </FSRow>
     <FSCol
       class="fs-calendar"
+      :height="['380px', '375px']"
       :style="style"
     >
       <FSRow

package/components/FSCalendarTwin.vue

@@ -14,8 +14,9 @@
     </FSRow>
     <FSRow
       class="fs-calendar-twin"
-      align="center-center"
+      align="top-center"
       width="hug"
+      :height="['380px', '375px']"
       :style="style"
     >
       <FSCol

package/components/FSClock.vue

@@ -52,11 +52,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } 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 { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
@@ -108,8 +106,8 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    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 innerHours = ref(0);
+    const innerMinutes = ref(0);
 
     const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
@@ -148,6 +146,20 @@ export default defineComponent({
       innerMinutes.value = number;
     };
 
+    const reset = (): void => {
+      innerHours.value = props.modelValue ? Math.floor(props.modelValue / (60 * 60 * 1000)) : 0;
+      innerMinutes.value = props.modelValue ? Math.floor((props.modelValue % (60 * 60 * 1000)) / (60 * 1000)) : 0;
+    };
+
+    watch(() => props.modelValue, () => {
+      if (
+        innerHours.value !== (props.modelValue ? Math.floor(props.modelValue / (60 * 60 * 1000)) : 0) ||
+        innerMinutes.value !== (props.modelValue ? Math.floor((props.modelValue % (60 * 60 * 1000)) / (60 * 1000)) : 0)
+      ) {
+        reset();
+      }
+    }, { immediate: true });
+
     watch([innerHours, innerMinutes], () => {
       emit("update:modelValue", (innerHours.value * 60 * 60 * 1000) + (innerMinutes.value * 60 * 1000));
     });

package/components/FSImageCard.vue

@@ -0,0 +1,72 @@
+<template>
+  <FSClickable
+    class="fs-image-card"
+    :height="height"
+    :width="width"
+    :style="style"
+    v-bind="$attrs"
+  >
+    <FSRow
+      align="bottom-left"
+      height="fill"
+    >
+      <FSRow
+        class="fs-image-card-label"
+        align="center-left"
+        padding="8px"
+      >
+        <FSSpan
+          font="text-overline"
+        >
+          {{ $props.label }}
+        </FSSpan>
+      </FSRow>
+    </FSRow>
+  </FSClickable>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import FSClickable from "./FSClickable.vue";
+import FSSpan from "./FSSpan.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSImageCard",
+  components: {
+    FSClickable,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    src: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: '110px'
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: '200px'
+    }
+  },
+  setup(props) {
+    const style = computed(() => ({
+      "--fs-image-card-background": `url(${props.src})`
+    }));
+
+    return {
+      style
+    };
+  }
+});
+</script>

package/components/autocompletes/FSAutoCompleteAddress.vue

@@ -14,10 +14,10 @@
 <script lang="ts">
 import { defineComponent, onMounted, ref, watch } from "vue";
 
+import { type Address, type Place } from "@dative-gpi/foundation-shared-domain/models";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
-import { useAddress } from "../../composables/useAddress";
 
-import type { Address, Place } from "@dative-gpi/foundation-shared-domain/models";
+import { useAddress } from "../../composables/useAddress";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
 
@@ -40,7 +40,7 @@ export default defineComponent({
     const places = ref<Place[]>([]);
     const modelValuePlace = ref<Place | null>(null);
 
-    const innerFetch = async (search: string | null) => {
+    const fetch = async (search: string | null) => {
       if (search === null) {
         return Promise.resolve([]);
       }
@@ -48,7 +48,7 @@ export default defineComponent({
       return Promise.resolve([]);
     };
 
-    const innerUpdate = async (value: { id: string; label: string; } | { id: string; label: string; }[] | null) => {
+    const update = async (value: { id: string; label: string; } | { id: string; label: string; }[] | null) => {
       if (value === null) {
         emit("update:modelValue", null);
         return;
@@ -64,8 +64,8 @@ export default defineComponent({
       places,
       [],
       emit,
-      innerFetch,
-      innerUpdate,
+      fetch,
+      update,
       (item) => (item).id,
       (item) => (item).label,
       true,

package/components/autocompletes/FSAutocompleteLanguage.vue

@@ -49,12 +49,11 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue"
+import { computed, defineComponent, type PropType } from "vue"
 
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
+import { type LanguageFilters } from "@dative-gpi/foundation-shared-domain/models";
 import { useLanguages } from "@dative-gpi/foundation-shared-services/composables";
-import type { LanguageFilters } from "@dative-gpi/foundation-shared-domain/models";
 
 import FSAutocompleteField from "../fields/FSAutocompleteField.vue";
 import FSIcon from "../FSIcon.vue";
@@ -99,7 +98,7 @@ export default defineComponent({
       return init.value && fetchingLanguages.value;
     });
 
-    const innerFetch = (search: string | null) => {
+    const fetch = (search: string | null) => {
       return getManyLanguages({ ...props.languageFilters, search: search ?? undefined });
     };
 
@@ -107,7 +106,7 @@ export default defineComponent({
       languages,
       [() => props.languageFilters],
       emit,
-      innerFetch
+      fetch
     );
 
     return {

package/components/autocompletes/FSAutocompleteTimeZone.vue

@@ -65,10 +65,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import type { TimeZoneFilters, TimeZoneInfos } from "@dative-gpi/foundation-shared-domain/models";
+import { type TimeZoneFilters, type TimeZoneInfos } from "@dative-gpi/foundation-shared-domain/models";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
 import { useTimeZones } from "@dative-gpi/foundation-shared-services/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -118,7 +117,7 @@ export default defineComponent({
       return init.value && fetchingTimeZones.value;
     });
 
-    const innerFetch = (search: string | null) => {
+    const fetch = (search: string | null) => {
       return getManyTimeZones({ ...props.timeZoneFilters, search: search ?? undefined });
     };
 
@@ -126,7 +125,7 @@ export default defineComponent({
       timeZones,
       [() => props.timeZoneFilters],
       emit,
-      innerFetch,
+      fetch,
       null,
       (item: TimeZoneInfos) => item.id,
       (item: TimeZoneInfos) => item.id

package/components/fields/FSColorField.vue

@@ -77,19 +77,18 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent, onMounted, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
 import { getPercentageFromHex, getHexFromPercentage } from "@dative-gpi/foundation-shared-components/utils";
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSBaseField from "./FSBaseField.vue";
 import FSCard from "../FSCard.vue";
 import FSIcon from "../FSIcon.vue";
+import FSText from "../FSText.vue";
 import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
-import FSBaseField from "./FSBaseField.vue";
-import FSText from "../FSText.vue";
 
 export default defineComponent({
   name: "FSColorField",
@@ -99,7 +98,7 @@ export default defineComponent({
     FSCard,
     FSIcon,
     FSCol,
-    FSRow,
+    FSRow
   },
   props: {
     label: {
@@ -164,6 +163,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const menu = ref(false);
+
     const innerColor = ref(props.modelValue.toString().substring(0, 7));
     const innerOpacity = ref(getHexFromPercentage(props.opacityValue));
     const fullColor = ref(innerColor.value + innerOpacity.value);
@@ -194,16 +194,14 @@ export default defineComponent({
       emit("update:opacity", getPercentageFromHex(innerOpacity.value));
     };
 
-    onMounted(() => {
+    const reset = (): void => {
       innerColor.value = getColors(props.modelValue)['base'];
       innerOpacity.value = getHexFromPercentage(props.opacityValue);
       fullColor.value = innerColor.value + innerOpacity.value;
-    });
+    };
 
-    watch(() => props.modelValue, (value) => {
-      innerColor.value = getColors(value)['base'];
-      innerOpacity.value = getHexFromPercentage(props.opacityValue);
-      fullColor.value = innerColor.value + innerOpacity.value;
+    watch(() => props.modelValue, () => {
+      reset();
     });
 
     return {

package/components/fields/FSDateField.vue

@@ -147,12 +147,11 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import _ from "lodash";
 
 import { useBreakpoints, 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 { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSDialogMenu from "../FSDialogMenu.vue";
@@ -222,6 +221,7 @@ export default defineComponent({
 
     const dialog = ref(false);
     const menu = ref(false);
+    
     const innerDate = ref<number | null>(props.modelValue);
 
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
@@ -244,6 +244,12 @@ export default defineComponent({
       menu.value = false;
     };
 
+    watch(() => props.modelValue, () => {
+      if (!_.isEqual(innerDate.value, props.modelValue)) {
+        innerDate.value = props.modelValue;
+      }
+    });
+
     return {
       isExtraSmall,
       validateOn,

package/components/fields/FSDateRangeField.vue

@@ -58,11 +58,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import _ from "lodash";
 
-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 { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 import { useRules } from "@dative-gpi/foundation-shared-components/composables";
 
@@ -127,6 +126,7 @@ export default defineComponent({
     const { epochToShortDateFormat } = useAppTimeZone();
 
     const dialog = ref(false);
+    
     const innerDateRange = ref<number[] | null>(props.modelValue);
 
     const toShortDateFormat = computed((): string => {
@@ -154,6 +154,12 @@ export default defineComponent({
       dialog.value = false;
     };
 
+    watch(() => props.modelValue, () => {
+      if (!_.isEqual(innerDateRange.value, props.modelValue)) {
+        innerDateRange.value = props.modelValue;
+      }
+    });
+
     return {
       toShortDateFormat,
       innerDateRange,

package/components/fields/FSDateTimeField.vue

@@ -193,12 +193,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
 import { useBreakpoints, 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 { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSDialogMenu from "../FSDialogMenu.vue";
@@ -273,16 +271,10 @@ export default defineComponent({
     const dialog = ref(false);
     const menu = ref(false);
     const tabs = ref(0);
+
     const innerDate = ref<number | null>(null);
     const innerTime = ref(0);
 
-    if (props.modelValue) {
-      // FSClock just gives two numbers without consideration for the time zone
-      // We must adjust the time to the user's time zone
-      innerTime.value = Math.floor((props.modelValue + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
-      innerDate.value = props.modelValue - innerTime.value;
-    }
-
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
 
     const openMobileOverlay = () => {
@@ -304,6 +296,23 @@ export default defineComponent({
       menu.value = false;
     };
 
+    const reset = (): void => {
+      if (props.modelValue) {
+        // FSClock just gives two numbers without consideration for the time zone
+        // We must adjust the time to the user's time zone
+        innerTime.value = Math.floor((props.modelValue + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
+        innerDate.value = props.modelValue - innerTime.value;
+      }
+      else {
+        innerDate.value = null;
+        innerTime.value = 0;
+      }
+    };
+
+    watch(() => props.modelValue, () => {
+      reset();
+    }, { immediate: true });
+
     watch([menu, dialog], (): void => {
       if (!menu.value && !dialog.value) {
         setTimeout(() => tabs.value = 0, 290);

package/components/fields/FSDateTimeRangeField.vue

@@ -76,11 +76,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } 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 { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 import { useRules } from "@dative-gpi/foundation-shared-components/composables";
 
@@ -151,31 +149,11 @@ export default defineComponent({
     const { validateOn, getMessages } = useRules();
 
     const dialog = ref(false);
+
     const innerDateRange = ref<number[] | null>(null);
     const innerTimeRight = ref(0);
     const innerTimeLeft = ref(0);
 
-    if (props.modelValue && Array.isArray(props.modelValue)) {
-      // FSClock just gives two numbers without consideration for the time zone
-      // We must adjust the time to the user's time zone
-      switch (props.modelValue.length) {
-        case 0: {
-          break;
-        }
-        case 1: {
-          innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
-          innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value];
-          break;
-        }
-        default: {
-          innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
-          innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
-          innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
-          break;
-        }
-      }
-    }
-
     const toShortTimeFormat = computed((): string => {
       if (!props.modelValue || !Array.isArray(props.modelValue) || !props.modelValue.length) {
         return "";
@@ -219,6 +197,38 @@ export default defineComponent({
       dialog.value = false;
     };
 
+    const reset = (): void => {
+      if (props.modelValue && Array.isArray(props.modelValue)) {
+        // FSClock just gives two numbers without consideration for the time zone
+        // We must adjust the time to the user's time zone
+        switch (props.modelValue.length) {
+          case 0: {
+            break;
+          }
+          case 1: {
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
+            innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value];
+            break;
+          }
+          default: {
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
+            innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
+            innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
+            break;
+          }
+        }
+      }
+      else {
+        innerDateRange.value = null;
+        innerTimeLeft.value = 0;
+        innerTimeRight.value = 0;
+      }
+    };
+
+    watch(() => props.modelValue, () => {
+      reset();
+    }, { immediate: true });
+
     return {
       toShortTimeFormat,
       innerDateLeft,