@dative-gpi/foundation-shared-components 1.0.194-sandbox-3 → 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/composables/useResize.ts

@@ -1,35 +1,31 @@
-import { onMounted, onBeforeUnmount, type Ref } from 'vue';
-import type * as echarts from 'echarts';
+import { onMounted, onBeforeUnmount } from 'vue';
 
-export function useResize(chartInstance: Ref<echarts.ECharts | null>) {
+export function useResize(
+  getElement: () => HTMLElement | null | undefined,
+  onResize: () => void
+) {
   let resizeObserver: ResizeObserver | null = null;
 
-  const resizeChart = () => {
-    if (chartInstance.value) {
-      chartInstance.value.resize();
-    }
-  };
-
   onMounted(() => {
     resizeObserver = new ResizeObserver(() => {
-      resizeChart();
+      onResize();
     });
 
-    const chartElement = chartInstance.value?.getDom();
-    if (chartElement) {
-      resizeObserver.observe(chartElement);
+    const element = getElement();
+    if (element) {
+      resizeObserver.observe(element);
     }
 
-    window.addEventListener('resize', resizeChart);
+    window.addEventListener('resize', onResize);
   });
 
   onBeforeUnmount(() => {
-    window.removeEventListener('resize', resizeChart);
+    window.removeEventListener('resize', onResize);
     resizeObserver?.disconnect();
     resizeObserver = null;
   });
 
   return {
-    resizeChart
+    resize: onResize
   };
 }

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,
-  "version": "1.0.194-sandbox-3",
+  "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-3",
-    "@dative-gpi/foundation-shared-services": "1.0.194-sandbox-3"
+    "@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",
@@ -30,7 +30,6 @@
     "@mdi/font": "^7.4.47",
     "blurhash": "2.0.5",
     "color": "^4.2.3",
-    "echarts": "6.0.0",
     "leaflet": "1.9.4",
     "leaflet.markercluster": "1.5.3"
   },
@@ -39,5 +38,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "37b33ba793e53e5fe67567b05fc6be447a0cd022"
+  "gitHead": "479e28515d44e7c9602a4717c8eceb44fed607a1"
 }