@dative-gpi/foundation-shared-components 1.1.7 → 1.1.9-sandbox-1

package/components/FSGroupingChip.vue

@@ -54,7 +54,6 @@ export default defineComponent({
     FSText,
     FSRow
   },
-  inheritAttrs: false,
   props: {
     label: {
       type: String as PropType<string>,

package/components/map/FSMapMarker.vue

@@ -48,26 +48,30 @@ 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(),
@@ -77,7 +81,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),
@@ -89,7 +93,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],
@@ -103,11 +107,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
@@ -115,7 +119,7 @@ export default {
     }
 
     const onAuxClick = (event: MouseEvent) => {
-      if(props.to) {
+      if (props.to) {
         handleRoutingEvent(event, props.to);
         return;
       }
@@ -127,19 +131,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], () => {
-      if(!actualMarker.value || !map.value) {
+    watch([() => props.variant, () => props.color, () => props.selected, () => props.html], () => {
+      if (!actualMarker.value || !map.value) {
         return;
       }
 
@@ -148,7 +152,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;
       }
 
@@ -156,7 +160,7 @@ export default {
     });
 
     watch(markerElement, (newMarkerElement) => {
-      if(!newMarkerElement) {
+      if (!newMarkerElement) {
         return;
       }
 
@@ -165,8 +169,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/components/tiles/FSSubgroupingTileUI.vue

@@ -6,6 +6,34 @@
     <template
       #append-info
     >
+      <FSRow
+        v-if="$props.groupingLabel && $props.groupingIcon"
+        align="center-left"
+        :wrap="false"
+      >
+        <FSColor
+          height="24px"
+          :color="$props.groupingColor"
+          :border="false"
+          variant="standard"
+        >
+          <FSRow
+            align="center-center"
+            width="24px"
+          >
+            <FSIcon
+              size="16px"
+            >
+              {{ $props.groupingIcon }}
+            </FSIcon>
+          </FSRow>
+        </FSColor>
+        <FSSpan
+          font="text-overline"
+        >
+          {{ $props.groupingLabel }}
+        </FSSpan>
+      </FSRow>
       <FSEntityCountBadge
         :label="$tr('ui.common.devices', 'Devices')"
         :count="$props.deviceOrganisationsCount ?? 0"
@@ -16,20 +44,43 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSEntityCountBadge from "./FSEntityCountBadge.vue";
 import FSSimpleTileUI from './FSSimpleTileUI.vue';
+import FSColor from "../FSColor.vue";
+import FSIcon from "../FSIcon.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSSubgroupingTileUI",
   components: {
+    FSEntityCountBadge,
     FSSimpleTileUI,
-    FSEntityCountBadge
+    FSColor,
+    FSIcon,
+    FSSpan,
+    FSRow
   },
   props: {
+    groupingLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    groupingIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    groupingColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
     deviceOrganisationsCount: {
       type: Number,
       required: false,

package/composables/index.ts

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

package/composables/useDomRenderer.ts

@@ -0,0 +1,89 @@
+import { h, render, getCurrentInstance, onBeforeUnmount, toValue, type Component, type MaybeRefOrGetter, watch } from "vue";
+
+interface RenderHandle {
+  unmount: () => void;
+  getElement: (style?: Partial<CSSStyleDeclaration>) => HTMLElement;
+}
+
+interface Subscriber {
+  container: HTMLElement | null;
+  mountPoint: HTMLElement;
+  stopWatching: (() => void) | null;
+}
+
+export function useDomRenderer<TProps extends Record<string, any>>(component: Component<TProps>) {
+
+  const instance = getCurrentInstance();
+  if (!instance) {
+    throw new Error("useDomRenderer must be used inside setup()");
+  }
+
+  const appContext = instance.appContext;
+  const subscribers = new Map<symbol, Subscriber>();
+
+  const mount = (getProps: MaybeRefOrGetter<TProps>, style?: Partial<CSSStyleDeclaration>): RenderHandle => {
+    const id = Symbol();
+    const mountPoint = document.createElement("div");
+    Object.assign(mountPoint.style, style ?? {});
+
+    const container = document.createElement("div");
+    mountPoint.appendChild(container);
+
+    const stopWatching = watch(
+      getProps,
+      () => {
+        const vnode = h(component, toValue(getProps));
+        vnode.appContext = appContext;
+        render(vnode, container);
+      },
+      { immediate: true }
+    );
+
+    subscribers.set(id, { container, mountPoint, stopWatching });
+
+    const unmount = () => {
+      const subscriber = subscribers.get(id);
+      if (!subscriber) {
+        return;
+      }
+
+      if (subscriber.stopWatching) {
+        subscriber.stopWatching();
+      }
+      render(null, subscriber.container!);
+      subscriber.container!.remove();
+      subscriber.mountPoint.remove();
+      subscribers.delete(id);
+    };
+
+    const getElement = (newStyle?: Partial<CSSStyleDeclaration>): HTMLElement => {
+      const subscriber = subscribers.get(id);
+      if (!subscriber) {
+        throw new Error("This render handle has already been unmounted");
+      }
+      Object.assign(subscriber.mountPoint.style, newStyle ?? {});
+      return subscriber.mountPoint;
+    };
+
+    return { unmount, getElement };
+  };
+
+  const unmountAll = () => {
+    for (const [id, subscriber] of subscribers) {
+      if (subscriber.stopWatching) {
+        subscriber.stopWatching();
+      }
+      render(null, subscriber.container!);
+      subscriber.container!.remove();
+      subscriber.mountPoint.remove();
+      subscribers.delete(id);
+    }
+  };
+
+  onBeforeUnmount(unmountAll);
+
+  return {
+    mount,
+    unmountAll,
+  };
+}

package/composables/useResize.ts

@@ -0,0 +1,28 @@
+import { watch } from 'vue';
+
+export function useResize(
+  getElement: () => HTMLElement | null | undefined,
+  onResize: () => void
+) {
+  let resizeObserver: ResizeObserver | null = null;
+
+  watch(
+    () => getElement(),
+    (newElement, _, onCleanup) => {
+      if (newElement && typeof ResizeObserver !== 'undefined') {
+        resizeObserver = new ResizeObserver(() => {
+          onResize();
+        });
+        resizeObserver.observe(newElement);
+
+        onCleanup(() => {
+          resizeObserver?.disconnect();
+          resizeObserver = null;
+        });
+      }
+    },
+    { immediate: true }
+  );
+
+  return {};
+}

package/package.json

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