Merge pull request #689 from Dative-GPI/features/add-use-resize-composable

feat: add useResize composable for responsive HTMLElement resizing

Author: Axlrbs

package-lock.json

@@ -7,6 +7,7 @@ export * from "./useCountUp";
 export * from "./useDebounce";
 export * from "./useElementVisibility";
 export * from "./useMapLayers";
+export * from "./useResize";
 export * from "./useRules";
 export * from "./useSlots";
 export * from "./useTables";

src/shared/foundation-shared-components/composables/index.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 {};
+}

src/shared/foundation-shared-components/composables/useResize.ts

@@ -1,6 +1,6 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
-  "repository" : {
+  "repository": {
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,