@dative-gpi/foundation-shared-components 1.0.128-fix-mobile-12 → 1.0.128-fix-mobile-map

package/components/FSFadeOut.vue

@@ -3,7 +3,6 @@
     class="fs-fade-out"
     ref="fadeOutRef"
     :id="elementId"
-    :style="style"
     @scroll="$emit('scroll', $event); debounceMasks()"
   >
     <slot />
@@ -11,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, type StyleValue, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
 
 import { useBreakpoints, useColors, useDebounce } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -65,6 +64,10 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    style:{
+      type: Object,
+      required: false
     }
   },
   emits: ["scroll"],
@@ -75,7 +78,7 @@ export default defineComponent({
 
     const backgrounds = getColors(ColorEnum.Background);
 
-    const fadeOutRef = ref(null);
+    const fadeOutRef = ref<HTMLElement | null>(null);
     const bottomMaskHeight = ref("0px");
     const topMaskHeight = ref("0px");
     const lastScroll = ref(0);
@@ -86,7 +89,7 @@ export default defineComponent({
 
     const showOutsideScrollbar = computed(() => props.scrollOutside && !isTouchScreenEnabled.value);
 
-    const style = computed((): StyleValue => ({
+    const style = computed((): {[index: string]: string} => ({
       "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : "initial",
       "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : "initial",
       "--fs-fade-out-width"             : sizeToVar(props.width),
@@ -97,7 +100,8 @@ export default defineComponent({
       "--fs-fade-out-mask-color"        : backgrounds.base,
       "--fs-fade-out-top-mask-height"   : props.disableTopMask ? '0px' : topMaskHeight.value,
       "--fs-fade-out-bottom-mask-height": props.disableBottomMask ? '0px' : bottomMaskHeight.value,
-      "--fs-fade-out-x-overflow"        : props.hideHorizontalOverflow ? 'hidden' : 'auto'
+      "--fs-fade-out-x-overflow"        : props.hideHorizontalOverflow ? 'hidden' : 'auto', 
+      ...props.style
     }));
 
     const handleMasks = () => {
@@ -148,6 +152,15 @@ export default defineComponent({
 
     watch([() => windowWidth.value, () => windowHeight.value], debounceMasks);
 
+    watch(() => [style.value, fadeOutRef.value], () => {
+      if(!fadeOutRef.value || !style.value) {
+        return;
+      }
+      for(const key in style.value){
+        fadeOutRef.value.style.setProperty(key, style.value[key])
+      }
+    }, { immediate: true})
+
     return {
       fadeOutRef,
       elementId,

package/components/map/FSMap.vue

@@ -259,7 +259,7 @@ export default defineComponent({
         name: "map",
         label: $tr("ui.map-layer.map", "Map"),
         image: new URL("../../assets/images/map/map.png", import.meta.url).href,
-        layer: tileLayer(`http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
+        layer: tileLayer(`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
           maxZoom: 22,
           subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
           attribution: '© Google Map Data'
@@ -269,7 +269,7 @@ export default defineComponent({
         name: "imagery",
         label: $tr("ui.map-layer.imagery", "Imagery"),
         image: new URL("../../assets/images/map/imagery.png", import.meta.url).href,
-        layer: tileLayer(`http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
+        layer: tileLayer(`https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ""}`, {
           maxZoom: 22,
           subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
           attribution: '© Google Map Data'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.128-fix-mobile-12",
+  "version": "1.0.128-fix-mobile-map",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.128-fix-mobile-12",
-    "@dative-gpi/foundation-shared-services": "1.0.128-fix-mobile-12"
+    "@dative-gpi/foundation-shared-domain": "1.0.128-fix-mobile-map",
+    "@dative-gpi/foundation-shared-services": "1.0.128-fix-mobile-map"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "001b23c2ba55899cb9e93038c769289a1b20024b"
+  "gitHead": "a5512820c57c64f4ffe5653bbfc138f438098ac8"
 }

package/styles/components/fs_dialog.scss

@@ -1,5 +1,5 @@
 .fs-dialog-mobile > .v-overlay__content {
-  max-height: 100vh !important;
+  max-height: 100dvh !important;
   max-width: 100vw !important;
   width: 100% !important;
   margin: 0 !important;

package/styles/components/fs_dialog_menu.scss

@@ -1,11 +1,11 @@
 .v-overlay__content:has(.fs-dialog-menu) {
     width: fit-content !important;
-    max-height: calc(100vh - 40px) !important;
+    max-height: calc(100dvh - 40px) !important;
     justify-content: center;
     align-items: center;
 }
 
 .fs-dialog-menu {
-    max-height: calc(100vh - 40px) !important;
+    max-height: calc(100dvh - 40px) !important;
     max-width: calc(100vw - 40px) !important;
 }