@dative-gpi/foundation-shared-components 1.0.194-sandbox-4 → 1.0.194-sandbox-5

package/components/map/FSMapMarker.vue

@@ -49,7 +49,7 @@ export default {
       required: false
     },
     html: {
-      type: String,
+      type: [String, HTMLElement] as PropType<string | HTMLElement>,
       required: false
     }
   },

package/composables/useDynamicVNode.ts

@@ -1,11 +1,10 @@
-import { uuidv4 } from "@dative-gpi/bones-ui";
-import { h, render, nextTick, getCurrentInstance, onBeforeUnmount, type Component, type VNode } from "vue";
+import { h, render, getCurrentInstance, onBeforeUnmount, type Component, type VNode } from "vue";
 
-export function useDynamicVNode<TProps extends Record<string, any>>(component: Component) {
-  const id = uuidv4();
+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) {
@@ -15,11 +14,8 @@ export function useDynamicVNode<TProps extends Record<string, any>>(component: C
   const appContext = instance.appContext;
 
   const mount = async (props: TProps) => {
-    await nextTick();
-
-    const mountPoint = document.getElementById(id);
     if (!mountPoint) {
-      return;
+      throw new Error(`You must call getElement() first to create the mount point`);
     }
 
     if (!container) {
@@ -36,19 +32,16 @@ export function useDynamicVNode<TProps extends Record<string, any>>(component: C
   const unmount = () => {
     if (container) {
       render(null, container);
+      container.remove();
     }
     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>`;
+  const getElement = (style?: Partial<CSSStyleDeclaration>): HTMLElement => {
+    mountPoint = document.createElement("div");
+    Object.assign(mountPoint.style, style ?? {});
+    return mountPoint;
   };
 
   onBeforeUnmount(unmount);
@@ -56,6 +49,6 @@ export function useDynamicVNode<TProps extends Record<string, any>>(component: C
   return {
     mount,
     unmount,
-    getHtml
+    getElement
   };
 }

package/package.json

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