@dative-gpi/foundation-shared-components 1.0.33 → 1.0.35

package/components/map/FSMapFeatureGroup.vue

@@ -0,0 +1,51 @@
+<template>
+  <slot />
+</template>
+
+<script lang="ts">
+import { inject, provide, ref, type Ref } from 'vue';
+
+import { type Map, FeatureGroup } from 'leaflet';
+import { INJECTION_FSMAP_MAP } from './keys';
+
+export default {
+  name: 'FSMapFeatureGroup',
+  props: {
+    expectedLayers: {
+      type: Number,
+      default: 0,
+      required: false
+    }
+  },
+  setup(props, { emit }) {
+    const map = inject<Ref<Map | null>>(INJECTION_FSMAP_MAP);
+    let added = false;
+    
+    if(!map) {
+      throw new Error('FSMapFeatureGroup must be used inside a FSMap component');
+    }
+
+    if(!map.value) {
+      throw new Error('FSMapFeatureGroup must be used inside a FSMap component with a map');
+    }
+
+    const featureGroup = ref<FeatureGroup>(new FeatureGroup());
+
+    provide('featureGroup', featureGroup);
+
+    featureGroup.value.on("layeradd", () => {
+      if(!map.value) {
+        return;
+      }
+
+      const layers = featureGroup.value.getLayers();
+
+      if(layers.length === props.expectedLayers && !added) {
+        featureGroup.value.addTo(map.value);
+        added = true;
+        emit("update:bounds", featureGroup.value.getBounds());
+      }
+    });
+  }
+};
+</script>

package/components/map/FSMapLayerButton.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
-    prependIcon="mdi-layers-outline"
-    padding="0 7px"
+    class="fs-map-layer-button"
+    icon="mdi-layers-outline"
     :elevation="true"
     @click="dialog = true"
   />

package/components/map/FSMapMarker.vue

@@ -0,0 +1,116 @@
+<template>
+  <slot />
+</template>
+
+<script lang="ts">
+import { inject, type PropType, onMounted, type Ref, watch, ref } from 'vue';
+
+import { type Map, type DivIcon, divIcon, type LatLng, marker, type Marker, type MarkerClusterGroup, type Layer } from 'leaflet';
+
+import { useColors } from "../../composables";
+
+import { gpsMarkerHtml, locationMarkerHtml, pinMarkerHtml } from '../../utils/leafletMarkers';
+import { INJECTION_FSMAP_MAP, INJECTION_FSMAP_MARKERCLUSTERGROUP } from './keys';
+
+export default {
+  name: 'FSMapMarker',
+  props: {
+    variant: {
+      type: String as PropType<'gps' | 'location' | 'pin'>,
+      default: 'location',
+      required: false
+    },
+    color: {
+      type: String,
+      default: 'primary',
+      required: false
+    },
+    latlng: {
+      type: Object as PropType<Pick<LatLng, "lat" | "lng"> | null>,
+      required: true
+    },
+    icon: {
+      type: String,
+      required: false
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const map = inject<Ref<Map | null>>(INJECTION_FSMAP_MAP);
+    const markerClusterGroup = inject<Ref<MarkerClusterGroup | null>>(INJECTION_FSMAP_MARKERCLUSTERGROUP, ref(null));
+
+    const { getColors } = useColors();
+
+    const lastMarker = ref<Marker | null>(null); 
+
+    if(!map) {
+      throw new Error('FSMapTileLayer must be used inside a FSMap component');
+    }
+
+    if(!map.value) {
+      throw new Error('FSMapTileLayer must be used inside a FSMap component with a map');
+    }
+
+    const updateMarker = () => {
+      if(!map.value || !props.latlng) {
+        return;
+      }
+
+      if(lastMarker.value) {
+        if(markerClusterGroup && markerClusterGroup.value) {
+          markerClusterGroup.value.removeLayer(lastMarker.value);
+        } else {
+          map.value.removeLayer(lastMarker.value as Layer);
+        }
+      }
+
+      let icon: DivIcon | null = null;
+      if(props.variant === 'gps') {
+        const size = 16;
+        icon = divIcon({
+          html: gpsMarkerHtml(),
+          className: 'fs-map-mylocation',
+          iconSize: [size, size],
+          iconAnchor: [size / 2, size / 2],
+        });
+      } else if(props.variant === 'location' && props.icon) {
+        const size = 36;
+        icon = divIcon({
+          html: locationMarkerHtml(props.icon, getColors(props.color).base),
+          iconSize: [size, size],
+          className: props.selected ? 'fs-map-location fs-map-location-selected' : 'fs-map-location',
+          iconAnchor: [size / 2, size / 2],
+        });
+      } else {
+        const size = 20;
+        icon = divIcon({
+          html: pinMarkerHtml(getColors(props.color).base),
+          iconSize: [size, size],
+          className: props.selected ? 'fs-map-location fs-map-location-selected' : 'fs-map-location',
+          iconAnchor: [size / 2, size / 2],
+        });
+      }
+      
+      lastMarker.value = marker(props.latlng, { icon });
+      lastMarker.value.on('click', (e) => {
+        emit('click', e);
+      });
+
+      if(markerClusterGroup && markerClusterGroup.value) {
+        lastMarker.value.addTo(markerClusterGroup.value);
+      } else {
+        lastMarker.value.addTo(map.value);
+      }
+    };
+
+    onMounted(updateMarker);
+
+    watch(() => [props.variant, props.color, props.latlng, props.selected], updateMarker);
+  }
+};
+</script>

package/components/map/FSMapMarkerClusterGroup.vue

@@ -0,0 +1,67 @@
+<template>
+  <slot />
+</template>
+
+<script lang="ts">
+import { inject, provide, ref, type Ref } from 'vue';
+
+import { type Map, MarkerClusterGroup, divIcon } from 'leaflet';
+
+import { clusterMarkerHtml } from '../../utils/leafletMarkers';
+import { INJECTION_FSMAP_MAP } from './keys';
+
+export default {
+  name: 'FSMapMarkerClusterGroup',
+  props: {
+    expectedLayers: {
+      type: Number,
+      default: 0,
+      required: false
+    }
+  },
+  setup(props, { emit }) {
+    const map = inject<Ref<Map | null>>(INJECTION_FSMAP_MAP);
+    let added = false;
+    
+    if(!map) {
+      throw new Error('FSMapMarkerClusterGroup must be used inside a FSMap component');
+    }
+
+    if(!map.value) {
+      throw new Error('FSMapMarkerClusterGroup must be used inside a FSMap component with a map');
+    }
+
+    const markerClusterGroup = ref<MarkerClusterGroup>(new MarkerClusterGroup({
+      spiderfyOnMaxZoom: false,
+      showCoverageOnHover: false,
+      disableClusteringAtZoom: 17,
+      iconCreateFunction: function (cluster: any) {
+        const size = 36;
+
+        return divIcon({
+          html: clusterMarkerHtml(cluster.getChildCount()),
+          className: 'fs-map-location fs-map-location-full',
+          iconSize: [size, size],
+          iconAnchor: [size / 2, size / 2],
+        });
+      }}
+    ));
+
+    provide('markerClusterGroup', markerClusterGroup);
+
+    markerClusterGroup.value.on("layeradd", () => {
+      if(!map.value) {
+        return;
+      }
+
+      const layers = markerClusterGroup.value.getLayers();
+
+      if(layers.length === props.expectedLayers && !added) {
+        markerClusterGroup.value.addTo(map.value);
+        added = true;
+        emit("update:bounds", markerClusterGroup.value.getBounds());
+      }
+    });
+  }
+};
+</script>

package/components/map/FSMapOverlay.vue

@@ -1,23 +1,25 @@
 <template>
-  <FSCol
+  <v-overlay
+    v-if="isExtraSmall"
+    :modelValue="$props.mode === 'expand'"
+    :contained="true"
+    @click="$emit('update:mode', 'collapse')"
+    zIndex="0"
+  />
+  <div
     v-show="isExtraSmall"
-    class="fs-map-overlay-left-mobile"
-    ref="mobileOverlayElement"
-    align="bottom-center"
-    width="hug"
-    gap="2px"
-    :height="$props.mode === 'expand' ? '100%' : ($props.mode === 'half' ? '50%' : 'hug')"
-    :id="`left-overlay-mobile-${$props.mapId}`"
-    :style="style"
-    @click="$event.target === mobileOverlayElement?.$el ? $emit('update:mode', 'collapse') : null"
+    ref="mobileOverlayWrapper"
+    class="fs-map-overlay-mobile"
+    :style="{ height: $props.mode === 'expand' ? '90%' : ($props.mode === 'half' ? '50%' : '20px') }"
   >
     <FSCard
-      padding="0px"
+      width="100%"
+      height="100%"
       :elevation="true"
       :border="false"
     >
       <FSCol
-        height="fill"
+        height="100%"
         gap="0px"
       >
         <FSRow
@@ -31,62 +33,38 @@
           />
         </FSRow>
         <FSCol
-          class="fs-map-overlay-left-mobile-content"
+          v-if="$props.mode !== 'collapse'"
           height="fill"
+          style="min-height: 0;"
         >
           <slot
-            name="leftoverlay-header"
+            name="body"
           />
-          <FSFadeOut
-            maskHeight="0px"
-            :height="$props.mode === 'collapse' ? '0px' : '100%'"
-          >
-            <slot
-              name="leftoverlay-body"
-            />
-          </FSFadeOut>
         </FSCol>
       </FSCol>
     </FSCard>
-  </FSCol>
-  <FSCol
+  </div>
+
+  <FSCard
     v-show="!isExtraSmall"
-    class="fs-map-overlay-left"
-    width="hug"
-    gap="2px"
-    :id="`left-overlay-${$props.mapId}`"
-    :style="style"
+    class="fs-map-overlay-desktop"
+    ref="desktopOverlay"
+    :elevation="true"
+    :border="false"
   >
-    <FSCard
-      padding="4px"
-      :elevation="true"
-      :border="false"
+    <FSCol
+      height="fill"
     >
-      <FSCol
-        class="fs-map-overlay-left-content"
-      >
-        <slot
-          name="leftoverlay-header"
-        />
-        <FSFadeOut
-          maskHeight="0"
-          height="100%"
-        >
-          <slot
-            name="leftoverlay-body"
-          />
-        </FSFadeOut>
-      </FSCol>
-    </FSCard>
-  </FSCol>
+      <slot
+        name="body"
+      />
+    </FSCol>
+  </FSCard>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
-
+import { defineComponent, type PropType, onUnmounted, onMounted, ref } from "vue";
 import { useBreakpoints } from "../../composables";
-
-import FSFadeOut from "../FSFadeOut.vue";
 import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
 import FSCol from "../FSCol.vue";
@@ -95,56 +73,64 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSMapOverlay",
   props: {
-    height: {
-      type: [String, Number] as PropType<string | number | null>,
-      required: false,
-      default: "100%"
-    },
     mode: {
       type: String as PropType<"collapse" | "half" | "expand">,
       required: false,
       default: "collapse"
-    },
-    mapId: {
-      type: String,
-      required: true
     }
   },
   components: {
-    FSFadeOut,
     FSButton,
     FSCard,
     FSCol,
     FSRow
   },
-  emits: ["update:mode"],
-  setup(props) {
+  emits: ["update:mode", "update:height", "update:width"],
+  setup(_, { emit }) {
     const { isExtraSmall } = useBreakpoints();
 
-    const leftOverlayMenuMobile = ref(false);
-    const mobileOverlayElement = ref(null);
+    const mobileOverlayWrapper = ref<HTMLDivElement | null>(null);
+    const desktopOverlay = ref<InstanceType<typeof FSCard> | null>(null);
+
+    const mobileResizeObserver = ref<ResizeObserver | null>(null);
+    const desktopResizeObserver = ref<ResizeObserver | null>(null);
+
+    onMounted(() => {
+      mobileResizeObserver.value = new ResizeObserver(entries => {
+        entries.forEach((entry) => {
+          emit("update:height", entry.contentRect.height);
+        });
+      });
+
+      desktopResizeObserver.value = new ResizeObserver(entries => {
+        entries.forEach((entry) => {
+          emit("update:width", entry.contentRect.width);
+        });
+      });
+
+      if (mobileOverlayWrapper.value) {
+        mobileResizeObserver.value.observe(mobileOverlayWrapper.value);
+      }
+
+      if (desktopOverlay.value) {
+        desktopResizeObserver.value.observe(desktopOverlay.value.$el);
+      }
+    });
 
-    const style = computed((): StyleValue => {
-      if (props.mode === "expand") {
-        return {
-          "--fs-map-overlay-max-height": `calc(${props.height} - 40px)`,
-          "--fs-map-overlay-card-height": "95%",
-        };
+    onUnmounted((): void => {
+      if (mobileResizeObserver.value) {
+        mobileResizeObserver.value.disconnect();
       }
-      else {
-        return {
-          "--fs-map-overlay-max-height": `calc(${props.height} - 40px)`,
-          "--fs-map-overlay-card-height": "100%",
-        };
+      if (desktopResizeObserver.value) {
+        desktopResizeObserver.value.disconnect();
       }
     });
 
     return {
-      leftOverlayMenuMobile,
-      mobileOverlayElement,
       isExtraSmall,
-      style
+      mobileOverlayWrapper,
+      desktopOverlay
     };
   }
 });
-</script>
+</script>

package/components/map/FSMapPolygon.vue

@@ -0,0 +1,81 @@
+<template>
+  <slot />
+</template>
+
+<script lang="ts">
+import { inject, type PropType, onMounted, type Ref, watch, ref } from 'vue';
+
+import { type Map, type LatLng, type Polygon, type FeatureGroup, polygon } from 'leaflet';
+
+import { useColors } from "../../composables";
+import { INJECTION_FSMAP_FEATUREGROUP, INJECTION_FSMAP_MAP } from './keys';
+
+export default {
+  name: 'FSMapPolygon',
+  props: {
+    color: {
+      type: String,
+      default: 'primary',
+      required: false
+    },
+    latlngs: {
+      type: Array as PropType<Pick<LatLng, "lat" | "lng">[] | null>,
+      required: true
+    }
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const map = inject<Ref<Map | null>>(INJECTION_FSMAP_MAP);
+    const featureGroup = inject<Ref<FeatureGroup | null>>(INJECTION_FSMAP_FEATUREGROUP, ref(null));
+
+    const { getColors } = useColors();
+
+    const lastPolygon = ref<Polygon | null>(null); 
+
+    if(!map) {
+      throw new Error('FSMapTileLayer must be used inside a FSMap component');
+    }
+
+    if(!map.value) {
+      throw new Error('FSMapTileLayer must be used inside a FSMap component with a map');
+    }
+
+    const updatePolygon = () => {
+      if(!map.value || !props.latlngs) {
+        return;
+      }
+
+      if(lastPolygon.value) {
+        if(featureGroup && featureGroup.value) {
+          featureGroup.value.removeLayer(lastPolygon.value);
+        } else {
+          map.value.removeLayer(lastPolygon.value);
+        }
+      }
+
+      const color = getColors(props.color).base;
+      lastPolygon.value = polygon(props.latlngs.map((coord) => [coord.lat, coord.lng]), {
+        color: color,
+        fillColor: color + "50",
+        fillOpacity: 0.5,
+        className: 'fs-map-area',
+      })
+      
+      lastPolygon.value.on('click', (e) => {
+        emit('click', e);
+      });
+      
+      if(featureGroup && featureGroup.value) {
+        lastPolygon.value.addTo(featureGroup.value);
+      }
+      else {
+        lastPolygon.value.addTo(map.value);
+      }
+    };
+
+    onMounted(updatePolygon);
+
+    watch(() => [props.color, props.latlngs], updatePolygon);
+  }
+};
+</script>

package/components/map/FSMapTileLayer.vue

@@ -0,0 +1,50 @@
+<template>
+  <slot />
+</template>
+
+<script lang="ts">
+import { inject, type PropType, onMounted, type Ref, watch } from 'vue';
+
+import type { Map, Layer } from 'leaflet';
+
+import { INJECTION_FSMAP_MAP } from './keys';
+
+export default {
+  name: 'FSMapTileLayer',
+  props: {
+    layer: {
+      type: Object as PropType<Layer>,
+      required: false
+    }
+  },
+  setup(props) {
+    const map = inject<Ref<Map | null>>(INJECTION_FSMAP_MAP);
+
+    const lastLayer = props.layer;
+
+    if(!map) {
+      throw new Error('FSMapTileLayer must be used inside a FSMap component');
+    }
+
+    if(!map.value) {
+      throw new Error('FSMapTileLayer must be used inside a FSMap component with a map');
+    }
+
+    const updateLayer = () => {
+      if (!props.layer || !map.value) {
+        return;
+      }
+
+      if(lastLayer) {
+        map.value.removeLayer(lastLayer);
+      }
+
+      props.layer.addTo(map.value);
+    };
+
+    onMounted(updateLayer);
+
+    watch(() => props.layer, updateLayer);
+  }
+};
+</script>

package/components/map/keys.ts

@@ -0,0 +1,4 @@
+export const INJECTION_FSMAP_FEATUREGROUP = 'featureGroup';
+export const INJECTION_FSMAP_MAP = 'map';
+export const INJECTION_FSMAP_MARKERCLUSTERGROUP = 'markerClusterGroup';
+

package/composables/useAddress.ts

@@ -1,7 +1,7 @@
-import type { Place } from "@dative-gpi/foundation-shared-domain/models";
-import { Address } from "@dative-gpi/foundation-shared-domain/models";
 import _ from "lodash";
 
+import { Address, type Place } from "@dative-gpi/foundation-shared-domain/models";
+
 export const useAddress = () => {
   const enabled = true;
   let initialized = false;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.33",
+  "version": "1.0.35",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.33",
-    "@dative-gpi/foundation-shared-services": "1.0.33"
+    "@dative-gpi/foundation-shared-domain": "1.0.35",
+    "@dative-gpi/foundation-shared-services": "1.0.35"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "df28d1c192793f3ab75ae910d17ea0457bd54c84"
+  "gitHead": "10111fadbf8f2207213a9d5f13ae4c3c4f71f0bc"
 }

package/styles/components/fs_card.scss

@@ -12,7 +12,6 @@
     &-elevation {
         box-shadow: 0px 1px 8px 0px #00000029;
         border-radius: 4px;
-        margin: 4px;
     }
 
     &-background {

package/styles/components/fs_clickable.scss

@@ -42,7 +42,7 @@ a:has(.fs-clickable) {
 }
 
 button:has(.fs-clickable) {
-    position: relative !important;
+    position: relative;
     height: var(--fs-clickable-height);
     width: var(--fs-clickable-width);
 }

package/styles/components/fs_fade_out.scss

@@ -2,8 +2,9 @@
     @extend .fs-hide-y-scrollbar;
     
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    max-height: var(--fs-fade-out-height);
+    max-height: var(--fs-fade-out-max-height);
     padding: var(--fs-fade-out-padding);
+    height: var(--fs-fade-out-height);
     width: var(--fs-fade-out-width);
     flex-direction: column;
     position: relative;