@dative-gpi/foundation-shared-components 1.1.3-sandbox-1 → 1.1.4

package/components/map/FSMapMarker.vue

@@ -48,30 +48,26 @@ export default {
     to: {
       type: Object as PropType<RouteLocation | null>,
       required: false
-    },
-    html: {
-      type: [String, HTMLElement] as PropType<string | HTMLElement>,
-      required: false
     }
   },
   emits: ['click', 'auxclick'],
   setup(props, { emit }) {
     const map = inject<Ref<Map | null>>(MAP);
     const markerClusterGroup = inject<Ref<MarkerClusterGroup | null>>(MARKERCLUSTERGROUP, ref(null));
-
+      
     const { getColors } = useColors();
     const { handleRoutingEvent } = useRouting();
 
-    if (!map) {
+    if(!map) {
       throw new Error('FSMapTileLayer must be used inside a FSMap component');
     }
 
-    if (!map.value) {
+    if(!map.value) {
       throw new Error('FSMapTileLayer must be used inside a FSMap component with a map');
     }
-
+      
     const getMarkerIcon = () => {
-      if (props.variant === 'gps') {
+      if(props.variant === 'gps') {
         const size = 16;
         return divIcon({
           html: gpsMarkerHtml(),
@@ -81,7 +77,7 @@ export default {
         });
       }
 
-      if (props.variant === 'location') {
+      if(props.variant === 'location') {
         const size = 36;
         return divIcon({
           html: locationMarkerHtml(props.icon ?? "mdi-map-marker", getColors(props.color).base, props.label),
@@ -93,7 +89,7 @@ export default {
 
       const size = 16;
       return divIcon({
-        html: props.html ?? pinMarkerHtml(getColors(props.color).base, props.label),
+        html: pinMarkerHtml(getColors(props.color).base, props.label),
         iconSize: [size, size],
         className: props.selected ? 'fs-map-marker fs-map-pin fs-map-pin-selected' : 'fs-map-marker fs-map-pin',
         iconAnchor: [size / 2, size / 2],
@@ -107,11 +103,11 @@ export default {
     });
 
     const onClick = (event: MouseEvent) => {
-      if (props.to) {
+      if(props.to) {
         handleRoutingEvent(event, props.to, true);
         return;
       }
-
+      
       emit('click', {
         ...event,
         latlng: props.latlng
@@ -119,7 +115,7 @@ export default {
     }
 
     const onAuxClick = (event: MouseEvent) => {
-      if (props.to) {
+      if(props.to) {
         handleRoutingEvent(event, props.to);
         return;
       }
@@ -131,19 +127,19 @@ export default {
     }
 
     watch(map, () => {
-      if (!map.value) {
+      if(!map.value) {
         return;
       }
 
-      if (markerClusterGroup && markerClusterGroup.value) {
+      if(markerClusterGroup && markerClusterGroup.value) {
         actualMarker.value.addTo(markerClusterGroup.value);
       } else {
         actualMarker.value.addTo(map.value);
       }
     }, { immediate: true });
 
-    watch([() => props.variant, () => props.color, () => props.selected, () => props.html], () => {
-      if (!actualMarker.value || !map.value) {
+    watch([() => props.variant, () => props.color, () => props.selected], () => {
+      if(!actualMarker.value || !map.value) {
         return;
       }
 
@@ -152,7 +148,7 @@ export default {
     });
 
     watch([() => props.latlng?.lat, () => props.latlng?.lng], () => {
-      if (!actualMarker.value || !map.value || !props.latlng) {
+      if(!actualMarker.value || !map.value || !props.latlng) {
         return;
       }
 
@@ -160,7 +156,7 @@ export default {
     });
 
     watch(markerElement, (newMarkerElement) => {
-      if (!newMarkerElement) {
+      if(!newMarkerElement) {
         return;
       }
 
@@ -169,8 +165,8 @@ export default {
     }, { immediate: true });
 
     onUnmounted(() => {
-      if (actualMarker.value && map.value) {
-        if (markerClusterGroup && markerClusterGroup.value) {
+      if(actualMarker.value && map.value) {
+        if(markerClusterGroup && markerClusterGroup.value) {
           markerClusterGroup.value.removeLayer(actualMarker.value as Marker);
         } else {
           map.value.removeLayer(actualMarker.value as Marker);

package/composables/index.ts

@@ -5,10 +5,8 @@ export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useCountUp";
 export * from "./useDebounce";
-export * from "./useDynamicVNode";
 export * from "./useElementVisibility";
 export * from "./useMapLayers";
-export * from "./useResize";
 export * from "./useRules";
 export * from "./useSlots";
 export * from "./useTables";

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,
-  "version": "1.1.3-sandbox-1",
+  "version": "1.1.4",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,8 +13,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.1.3-sandbox-1",
-    "@dative-gpi/foundation-shared-services": "1.1.3-sandbox-1"
+    "@dative-gpi/foundation-shared-domain": "1.1.4",
+    "@dative-gpi/foundation-shared-services": "1.1.4"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -38,5 +38,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "8857dc338d7d3ec5f09ce9f67b0b359ae25e8e40"
+  "gitHead": "a9b44d2e225cc899966d6ccfa1f0d14df9c50273"
 }

package/styles/components/fs_map.scss

@@ -27,12 +27,18 @@
     transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-  .fs-map-overlay-desktop {
+.fs-map-overlay-desktop {
     position: absolute;
     top: 0;
     left: 0;
     margin: 12px;
     max-height: calc(100% - 24px);
+    display: flex;
+    flex-direction: column;
+
+    .fs-card {
+      min-height: 0;
+    }
   }
 
   .fs-map-layer-button {

package/composables/useDynamicVNode.ts

@@ -1,62 +0,0 @@
-import { h, render, getCurrentInstance, onBeforeUnmount, type Component, type VNode } from "vue";
-
-export function useDynamicVNode<TProps extends Record<string, any>>(component: Component<TProps>) {
-
-  let vnode: VNode | null = null;
-  let container: HTMLElement | null = null;
-  let mountPoint: HTMLElement | null = null;
-
-  const instance = getCurrentInstance();
-  if (!instance) {
-    throw new Error("useDynamicVNode must be used inside setup()");
-  }
-
-  const appContext = instance.appContext;
-
-  const mount = async (props: TProps) => {
-    if (!mountPoint) {
-      throw new Error(`You must call getElement() first to create the mount point`);
-    }
-
-    if (!container) {
-      container = document.createElement("div");
-      mountPoint.appendChild(container);
-    }
-
-    vnode = h(component, props);
-    vnode.appContext = appContext;
-
-    render(vnode, container);
-  };
-
-  const unmount = () => {
-    if (container) {
-      render(null, container);
-      container.remove();
-    }
-    vnode = null;
-    container = null;
-  };
-
-  const getElement = (style?: Partial<CSSStyleDeclaration>): HTMLElement => {
-    if (!mountPoint) {
-      mountPoint = document.createElement("div");
-    }
-    mountPoint = document.createElement("div");
-    Object.assign(mountPoint.style, style ?? {});
-    return mountPoint;
-  };
-
-  const destroy = () => {
-    unmount();
-    mountPoint = null;
-  };
-
-  onBeforeUnmount(destroy);
-
-  return {
-    mount,
-    unmount,
-    getElement
-  };
-}

package/composables/useResize.ts

@@ -1,32 +0,0 @@
-import { onMounted, onBeforeUnmount } from 'vue';
-
-export function useResize(
-  getElement: () => HTMLElement | null | undefined,
-  onResize: () => void
-) {
-  let resizeObserver: ResizeObserver | null = null;
-
-  onMounted(() => {
-    if (typeof ResizeObserver !== 'undefined') {
-      resizeObserver = new ResizeObserver(() => {
-        onResize();
-      });
-      const element = getElement();
-      if (element) {
-        resizeObserver.observe(element);
-      }
-    }
-
-    window.addEventListener('resize', onResize);
-  });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('resize', onResize);
-    resizeObserver?.disconnect();
-    resizeObserver = null;
-  });
-
-  return {
-    resize: onResize
-  };
-}