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

package/components/fields/FSColorField.vue

@@ -9,29 +9,29 @@
     >
       <FSBaseField
         class="fs-color-field"
+        :description="$props.description"
         :hideHeader="$props.hideHeader"
-        :required="$props.required"
         :editable="$props.editable"
-        :modelValue="innerColor"
-        :description="$props.description"
+        :required="$props.required"
         :label="$props.label"
-        :style="style"
         :width="$props.width"
+        :style="style"
+        :modelValue="innerColor"
         v-bind="$attrs"
       >
         <FSCard
-          width="100%"
           padding="8px"
-          v-bind="props"
+          width="100%"
           :class="{ 'fs-color-field-disabled': !$props.editable }"
+          v-bind="props"
         >
           <FSRow
             align="center-center"
           >
             <FSIcon
-              :color="innerColor"
-              size="20px"
               icon="mdi-circle-half"
+              size="20px"
+              :color="innerColor"
             />
             <FSText
               font="text-overline"
@@ -53,23 +53,23 @@
           v-if="!$props.onlyBaseColors"
           class="fs-color-field-picker"
           mode="hexa"
-          :elevation="0"
           :modes="allowOpacity ? ['hexa', 'rgba'] : ['hex', 'rgb']"
+          :elevation="0"
           :modelValue="fullColor"
           @update:modelValue="onSubmit"
         />
         <v-color-picker
           v-else
           class="fs-color-field-picker"
-          :elevation="0"
-          :modelValue="fullColor"
-          @update:modelValue="onSubmit"
           swatches-max-height="400px"
           show-swatches
-          hide-inputs
-          hide-canvas
           hide-sliders
+          hide-canvas
+          hide-inputs
           :swatches="getBasePaletteColors()"
+          :elevation="0"
+          :modelValue="fullColor"
+          @update:modelValue="onSubmit"
         />
       </FSCol>
     </FSCard>
@@ -77,7 +77,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 
 import { getPercentageFromHex, getHexFromPercentage } from "@dative-gpi/foundation-shared-components/utils";
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
@@ -168,7 +168,7 @@ export default defineComponent({
     const innerOpacity = ref("00");
     const fullColor = ref("#00000000");
 
-    const style = computed((): { [key: string]: string | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-color-field-cursor"             : "default",

package/components/fields/FSDateTimeField.vue

@@ -264,7 +264,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { getUserOffsetMillis, epochToLongTimeFormat } = useAppTimeZone();
+    const { epochToLongTimeFormat, getOffsetUser } = useAppTimeZone();
     const { validateOn, getMessages } = useRules();
     const { isExtraSmall } = useBreakpoints();
 
@@ -300,7 +300,7 @@ export default defineComponent({
       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));
+        innerTime.value = Math.floor((props.modelValue + getOffsetUser()) % (24 * 60 * 60 * 1000));
         innerDate.value = props.modelValue - innerTime.value;
       }
       else {

package/components/fields/FSDateTimeRangeField.vue

@@ -145,7 +145,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { getUserOffsetMillis, epochToShortTimeFormat } = useAppTimeZone();
+    const { epochToShortTimeFormat, getOffsetUser } = useAppTimeZone();
     const { validateOn, getMessages } = useRules();
 
     const dialog = ref(false);
@@ -206,13 +206,13 @@ export default defineComponent({
             break;
           }
           case 1: {
-            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getOffsetUser()) % (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));
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getOffsetUser()) % (24 * 60 * 60 * 1000));
+            innerTimeRight.value = Math.floor((props.modelValue[1] + getOffsetUser()) % (24 * 60 * 60 * 1000));
             innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
             break;
           }

package/components/fields/FSIconField.vue

@@ -48,8 +48,7 @@ import { computed, defineComponent, ref, watch } from "vue";
 
 import { Icons, sortByLevenshteinDistance } from "@dative-gpi/foundation-shared-components/utils";
 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 { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import type { FSToggle } from "@dative-gpi/foundation-shared-components/models";
 
 import FSToggleSet from "../FSToggleSet.vue";
@@ -139,7 +138,7 @@ export default defineComponent({
     const toggleSetRef = ref<HTMLElement | null>(null);
     const innerValue = ref<string | null>(null);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-icon-field-color": lights.dark

package/components/fields/FSMagicConfigField.vue

@@ -38,8 +38,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import { DateRules, IconRules, NumberRules, TextRules, TimeRules } from "../../models";
 import { useMagicFieldProvider } from "../../composables";

package/components/fields/FSMagicField.vue

@@ -58,8 +58,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 

package/components/fields/FSNumberField.vue

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

package/components/fields/FSPasswordField.vue

@@ -33,8 +33,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, type PropType, ref } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -69,7 +68,7 @@ export default defineComponent({
 
     const stars = ref(true);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-password-field-cursor"   : "default",

package/components/fields/FSRichTextField.vue

@@ -218,7 +218,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, type PropType, ref, type StyleValue, watch } from "vue";
 
 import { $createParagraphNode, $getSelection, $isElementNode, $isRangeSelection, $isNodeSelection, $setSelection, CAN_UNDO_COMMAND, createEditor, type ElementNode, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, ParagraphNode, UNDO_COMMAND } from "lexical";
 import { $createHeadingNode, HeadingNode, type HeadingTagType, registerRichText } from "@lexical/rich-text";
@@ -374,7 +374,7 @@ export default defineComponent({
       return ["readonly"].includes(props.variant);
     });
 
-    const style = computed((): { [key: string]: string | null | undefined } => {
+    const style = computed((): StyleValue => {
       let minHeight: string | undefined = "auto";
       if (!readonly.value) {
         const base = isMobileSized.value ? 30 : 42;
@@ -386,7 +386,6 @@ export default defineComponent({
           minHeight = `${base}px`;
         }
       }
-
       switch (props.variant) {
         case "standard": {
           if (!props.editable) {
@@ -410,7 +409,7 @@ export default defineComponent({
               "--fs-rich-text-field-link-color": linkColors.value.dark,
               "--fs-rich-text-field-min-height": minHeight,
               "--fs-rich-text-field-variable-backgroundcolor": getColors(ColorEnum.Primary).light,
-              "--fs-rich-text-field-variable-color": getColors(ColorEnum.Primary).lightContrast
+              "--fs-rich-text-field-variable-color": getColors(ColorEnum.Primary).lightContrast!
             };
           }
         }

package/components/fields/FSSearchField.vue

@@ -57,8 +57,7 @@ import type { PropType} from "vue";
 import { computed, defineComponent, ref, watch } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/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 { useSlots } from "../../composables";
 

package/components/fields/FSSelectField.vue

@@ -241,8 +241,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
 
 import { useBreakpoints, useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -351,7 +350,7 @@ export default defineComponent({
 
     const dialog = ref(false);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-select-field-cursor"             : "default",

package/components/fields/FSTagField.vue

@@ -49,12 +49,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, type PropType, ref } from "vue";
 
 import { useColors, useRules, useSlots } 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 FSTextField from "./FSTextField.vue";
 import FSTagGroup from "../FSTagGroup.vue";
@@ -130,7 +128,7 @@ export default defineComponent({
 
     const innerValue = ref("");
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-tag-field-color": lights.dark

package/components/fields/FSTermField.vue

@@ -163,7 +163,7 @@ export default defineComponent({
   },
   emits: ["update:startDate", "update:endDate"],
   setup(props, { emit }) {
-    const { parseForPicker,formatFromPicker, formatCurrentForPicker } = useAppTimeZone();
+    const { parseForPicker, formatFromPicker, todayToPicker, yesterdayToPicker } = useAppTimeZone();
     const { getMessages } = useRules();
 
     const innerDateSetting = ref<DateSetting>(DateSetting.PastDays);
@@ -336,8 +336,8 @@ export default defineComponent({
           }
           break;
         case DateSetting.Pick:
-          innerEndDate.value = formatCurrentForPicker(0);
-          innerStartDate.value = formatCurrentForPicker(-1);
+          innerEndDate.value = todayToPicker();
+          innerStartDate.value = yesterdayToPicker();
           break;
       }
       emit("update:startDate", innerStartDate.value);
@@ -409,14 +409,15 @@ export default defineComponent({
 
     const onPickDates = (value: number[] | null) => {
       if (!value) {
-        innerEndDate.value = formatCurrentForPicker(0);
-        innerStartDate.value = formatCurrentForPicker(-1);
+        innerEndDate.value = todayToPicker();
+        innerStartDate.value = yesterdayToPicker();
         if (valid.value) {
           emit("update:startDate", innerStartDate.value);
           emit("update:endDate", innerEndDate.value);
         }
       }
       else {
+        console.log(value[0], value[1]);
         if (value && value[0] != null && formatFromPicker(value[0]) !== innerStartDate.value) {
           innerStartDate.value = formatFromPicker(value[0]);
           if (valid.value) {

package/components/fields/FSTextArea.vue

@@ -54,8 +54,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useColors, useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -136,7 +135,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 => {
       let height: string | undefined = undefined;
       let fieldHeight: string | undefined = undefined;
       if (!props.autoGrow) {

package/components/fields/FSTextField.vue

@@ -65,8 +65,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -145,7 +144,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-text-field-cursor"             : "default",

package/components/fields/FSTimeField.vue

@@ -130,7 +130,7 @@ export default defineComponent({
     const innerTime = ref(0);
     const selectedUnit = ref(timeScale[0]);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-time-field-cursor"             : "default",

package/components/fields/FSTimeSlotField.vue

@@ -61,8 +61,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -142,7 +141,7 @@ export default defineComponent({
       return acc;
     }, [] as { id: number, label: string }[]);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-time-slot-field-cursor"             : "default",

package/components/fields/FSTranslateField.vue

@@ -83,7 +83,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
@@ -169,7 +169,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-translate-field-color": lights.dark

package/components/fields/FSTreeViewField.vue

@@ -240,14 +240,12 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+import { VTreeview } from "vuetify/labs/VTreeview";
 
 import { useBreakpoints, useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import { VTreeview } from "vuetify/labs/VTreeview";
-
 import FSDialogMenu from "../FSDialogMenu.vue";
 import FSTextField from "./FSTextField.vue";
 import FSCheckbox from "../FSCheckbox.vue";
@@ -367,7 +365,7 @@ export default defineComponent({
     const dialog = ref(false);
     const menu = ref(false);
 
-    const style = computed((): { [key: string]: string | undefined | null } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-tree-view-field-cursor": "default"
@@ -431,7 +429,7 @@ export default defineComponent({
           return item[props.itemParent] == parentId;
         });
       });
-      const process = ((item: any) => {
+      const process = ((item: any): any => {
         if (props.items.some((child: any) => child[props.itemParent] === item[props.itemValue])) {
           return {
             ...item,

package/components/lists/FSDataIteratorItem.vue

@@ -39,7 +39,9 @@
           <FSRow
             align="center-left"
           >
-            <FSText>
+            <FSText
+              v-if="header.value"
+            >
               {{ $props.item[header.value] }}
             </FSText>
           </FSRow>
@@ -67,11 +69,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 { FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum, type FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
 
 import FSCheckbox from "../FSCheckbox.vue";
 import FSCard from "../FSCard.vue";
@@ -135,11 +135,9 @@ export default defineComponent({
       }
     });
 
-    const style = computed((): { [key: string]: string | null | undefined } => {
-      return {
-        "--fs-data-iterator-item-cursor": props.clickable ? "pointer" : "default"
-      }
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-data-iterator-item-cursor": props.clickable ? "pointer" : "default"
+    }));
 
     return {
       variant,

package/components/lists/FSDataTableUI.vue

@@ -689,12 +689,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType, Ref, Slot} from "vue";
-import { computed, defineComponent, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, defineComponent, nextTick, onMounted, onUnmounted, type PropType, type Ref, ref, type Slot, type StyleValue, watch } from "vue";
 import { useRouter } from "vue-router";
 
-import type { FSDataTableColumn, FSDataTableFilter, FSDataTableOrder, FSToggle } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum, type FSDataTableColumn, type FSDataTableFilter, type FSDataTableOrder, type FSToggle } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { uuidv4 } from "@dative-gpi/bones-ui/tools/uuid"
@@ -963,13 +961,11 @@ export default defineComponent({
       return slots;
     });
 
-    const style = computed((): { [key: string]: string | undefined } => {
-      return {
-        "--fs-data-table-background-color": backgrounds.base,
-        "--fs-data-table-border-color": lights.base,
-        "--fs-data-table-row-gap": sizeToVar(props.rowGap)
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-data-table-background-color": backgrounds.base,
+      "--fs-data-table-border-color": lights.base,
+      "--fs-data-table-row-gap": sizeToVar(props.rowGap)
+    }));
 
     const classes = computed((): string[] => {
       const classNames = ["fs-data-table"];

package/components/lists/FSFilterButton.vue

@@ -87,8 +87,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+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";

package/components/lists/FSLoadDataTable.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type StyleValue } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -81,11 +81,9 @@ export default defineComponent({
 
     const backgroundColors = getColors(ColorEnum.Background);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-load-data-table-background-color": backgroundColors.base
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-load-data-table-background-color": backgroundColors.base
+    }));
 
     return {
       style

package/components/map/FSMap.vue

@@ -129,17 +129,16 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
-
-import * as L from "leaflet";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, type StyleValue, watch } from "vue";
 import "leaflet.markercluster";
+import * as L from "leaflet";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { type Address, type FSArea } from '@dative-gpi/foundation-shared-domain/models';
 
 import { clusterMarkerHtml, locationMarkerHtml, myLocationMarkerHtml } from "../../utils";
-import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
 import { useColors, useAddress, useBreakpoints } from "../../composables";
+import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
 
 import FSMapEditPointAddressOverlay from "./FSMapEditPointAddressOverlay.vue";
 import FSMapLayerButton from "./FSMapLayerButton.vue";
@@ -309,16 +308,14 @@ export default defineComponent({
       return margin;
     });
 
-    const style = computed((): { [key: string]: string | undefined } => {
-      return {
-        "--fs-map-location-pin-color": getColors(ColorEnum.Primary).base,
-        "--fs-map-mylocation-pin-color": getColors(ColorEnum.Primary).base,
-        "--fs-map-mylocation-pin-color-alpha": getColors(ColorEnum.Primary).base + "50",
-        "--fs-map-leaflet-container-height": props.height as string,
-        "--fs-map-leaflet-bottom-overlay-margin": `${bottomMargin.value}px`,
-        "--fs-map-container-grayscale": props.grayscale ? '0.9' : '0'
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-map-location-pin-color": getColors(ColorEnum.Primary).base,
+      "--fs-map-mylocation-pin-color": getColors(ColorEnum.Primary).base,
+      "--fs-map-mylocation-pin-color-alpha": getColors(ColorEnum.Primary).base + "50",
+      "--fs-map-leaflet-container-height": props.height as string,
+      "--fs-map-leaflet-bottom-overlay-margin": `${bottomMargin.value}px`,
+      "--fs-map-container-grayscale": props.grayscale ? '0.9' : '0'
+    }));
 
     const displayLocations = () => {
       markerLayerGroup.clearLayers();