@bagelink/vue 1.10.27 → 1.10.31

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.10.27",
+  "version": "1.10.31",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",
@@ -90,7 +90,7 @@
     "signature_pad": "^5.0.9",
     "vue-i18n": "^11.2.8",
     "vue-toastification": "^2.0.0-rc.5",
-    "@bagelink/utils": "1.10.27"
+    "@bagelink/utils": "1.10.31"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

package/src/composables/index.ts

@@ -9,6 +9,7 @@ export { useDevice } from './useDevice'
 export { useExcel } from './useExcel'
 export { useLocalStore } from './useLocalStore'
 export { usePolling } from './usePolling'
+export { useResizeObserver } from './useResizeObserver'
 export { useTheme } from './useTheme'
 interface UseBglSchemaParamsT<T> {
 	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>

package/src/composables/useResizeObserver.ts

@@ -0,0 +1,34 @@
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+export function useResizeObserver(elementRef: Ref<HTMLElement | undefined>) {
+	const width = ref(0)
+	const height = ref(0)
+	let resizeObserver: ResizeObserver | null = null
+
+	onMounted(() => {
+		if (elementRef.value) {
+			resizeObserver = new ResizeObserver((entries) => {
+				for (const entry of entries) {
+					width.value = entry.contentRect.width
+					height.value = entry.contentRect.height
+				}
+			})
+			resizeObserver.observe(elementRef.value)
+			width.value = elementRef.value.clientWidth
+			height.value = elementRef.value.clientHeight
+		}
+	})
+
+	onUnmounted(() => {
+		if (resizeObserver) {
+			resizeObserver.disconnect()
+			resizeObserver = null
+		}
+	})
+
+	return {
+		width,
+		height
+	}
+}