@dative-gpi/foundation-shared-components 1.0.193 → 1.0.194-dynamic-v-node

package/components/map/FSMapMarker.vue

@@ -47,26 +47,30 @@ export default {
     to: {
       type: Object as PropType<RouteLocation | null>,
       required: false
+    },
+    html: {
+      type: String,
+      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(),
@@ -76,7 +80,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),
@@ -88,7 +92,7 @@ export default {
 
       const size = 16;
       return divIcon({
-        html: pinMarkerHtml(getColors(props.color).base, props.label),
+        html: props.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],
@@ -102,11 +106,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
@@ -114,7 +118,7 @@ export default {
     }
 
     const onAuxClick = (event: MouseEvent) => {
-      if(props.to) {
+      if (props.to) {
         handleRoutingEvent(event, props.to);
         return;
       }
@@ -126,11 +130,11 @@ 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);
@@ -138,7 +142,7 @@ export default {
     }, { immediate: true });
 
     watch([() => props.variant, () => props.color, () => props.selected], () => {
-      if(!actualMarker.value || !map.value) {
+      if (!actualMarker.value || !map.value) {
         return;
       }
 
@@ -147,7 +151,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;
       }
 
@@ -155,7 +159,7 @@ export default {
     });
 
     watch(markerElement, (newMarkerElement) => {
-      if(!newMarkerElement) {
+      if (!newMarkerElement) {
         return;
       }
 
@@ -164,8 +168,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,6 +5,7 @@ export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useCountUp";
 export * from "./useDebounce";
+export * from "./useDynamicVNode";
 export * from "./useElementVisibility";
 export * from "./useMapLayers";
 export * from "./useRules";

package/composables/useDynamicVNode.ts

@@ -0,0 +1,60 @@
+import { uuidv4 } from "@dative-gpi/bones-ui";
+import { h, render, nextTick, getCurrentInstance, onBeforeUnmount, type Component, type VNode } from "vue";
+
+export function useDynamicVNode<TProps extends Record<string, any>>(component: Component) {
+  const id = uuidv4();
+
+  let vnode: VNode | null = null;
+  let container: 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) => {
+    await nextTick();
+
+    const mountPoint = document.getElementById(id);
+    if (!mountPoint) {
+      return;
+    }
+
+    unmount();
+
+    container = mountPoint;
+
+    vnode = h(component, props);
+    vnode.appContext = appContext;
+
+    render(vnode, container);
+  };
+
+  const unmount = () => {
+    if (container) {
+      render(null, container);
+    }
+    vnode = null;
+    container = null;
+  };
+
+  const sanitizeStyle = (style?: string): string =>
+    style
+      ? style.replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+      : "";
+
+  const getHtml = (style?: string) => {
+    const safeStyle = sanitizeStyle(style);
+    return `<div id="${id}"${safeStyle ? ` style="${safeStyle}"` : ""}></div>`;
+  };
+
+  onBeforeUnmount(unmount);
+
+  return {
+    mount,
+    unmount,
+    getHtml
+  };
+}

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,
-  "version": "1.0.193",
+  "version": "1.0.194-dynamic-v-node",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,8 +13,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.193",
-    "@dative-gpi/foundation-shared-services": "1.0.193"
+    "@dative-gpi/foundation-shared-domain": "1.0.194-dynamic-v-node",
+    "@dative-gpi/foundation-shared-services": "1.0.194-dynamic-v-node"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -38,5 +38,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "201fd5a50b9f1f6ce6622cf989e96979f6e4ff90"
+  "gitHead": "bae28f289de25e748becbaf3e7d5f6c9bdc12934"
 }