@fiscozen/composables 0.1.39-next.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/composables",
-  "version": "0.1.39-next.0",
+  "version": "1.0.0",
   "description": "Design System utility composables",
   "main": "src/index.ts",
   "type": "module",
@@ -28,9 +28,9 @@
     "vite": "^5.0.10",
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
-    "@fiscozen/eslint-config": "^0.1.0",
     "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0"
+    "@fiscozen/tsconfig": "^0.1.0",
+    "@fiscozen/eslint-config": "^0.1.0"
   },
   "license": "ISC",
   "scripts": {

package/src/FzFloating.vue

@@ -1,5 +1,32 @@
 <script lang="ts" setup>
-import { ref, useSlots, watch, toRef, computed, onBeforeUnmount, toRefs, defineExpose } from 'vue'
+/**
+ * FzFloating Component
+ * 
+ * A floating container that positions itself relative to an opener element.
+ * Supports automatic repositioning on scroll, resize, and content changes.
+ * 
+ * ## Features
+ * - 12 positioning options (top/bottom/left/right with start/center/end alignment)
+ * - Auto-positioning based on available viewport space  
+ * - Reactive repositioning via ResizeObserver
+ * - Teleport support for z-index stacking context issues
+ * - Automatic margin based on resolved position direction
+ * 
+ * ## Slots
+ * - `opener`: The element that triggers/anchors the floating content
+ * - `default`: The floating content to display
+ * 
+ * ## Example
+ * ```vue
+ * <FzFloating position="bottom-start" :isOpen="showMenu">
+ *   <template #opener>
+ *     <button @click="showMenu = !showMenu">Menu</button>
+ *   </template>
+ *   <div>Menu content here</div>
+ * </FzFloating>
+ * ```
+ */
+import { ref, useSlots, watch, toRef, computed, onBeforeUnmount, onMounted, toRefs } from 'vue'
 import { useFloating } from './composables'
 import { FzFloatingProps, FzUseFloatingArgs } from './types'
 import { useMediaQuery } from './composables'
@@ -21,6 +48,11 @@ const slots = useSlots()
 const xs = useMediaQuery(`(max-width: ${breakpoints.xs})`)
 
 let scheduledAnimationFrame = false
+let isMounted = false
+
+// Observers for reactive repositioning
+let resizeObserver: ResizeObserver | null = null
+let openerResizeObserver: ResizeObserver | null = null
 
 const useFloatingOpts: FzUseFloatingArgs = {
   position: props.position,
@@ -52,17 +84,72 @@ if (slots.opener) {
 const floating = useFloating(dynamicOpts)
 
 const setPositionWhenOpen = () => {
-  if (scheduledAnimationFrame) {
+  if (scheduledAnimationFrame || !isMounted) {
     return
   }
 
   scheduledAnimationFrame = true
   requestAnimationFrame(() => {
-    props.isOpen && floating.setPosition()
+    if (isMounted && props.isOpen) {
+      floating.setPosition()
+    }
     scheduledAnimationFrame = false
   })
 }
 
+onMounted(() => {
+  isMounted = true
+})
+
+// Scroll handler that catches scroll events on any scrollable parent
+const handleScroll = () => {
+  setPositionWhenOpen()
+}
+
+// Window resize handler
+const handleResize = () => {
+  setPositionWhenOpen()
+}
+
+// Setup all event listeners and observers
+const setupEventListeners = () => {
+  // Window scroll and resize
+  window.addEventListener('scroll', handleScroll, true) // capture phase for nested scrollables
+  window.addEventListener('resize', handleResize)
+
+  // ResizeObserver for floating content (handles content size changes)
+  if (content.value && !resizeObserver) {
+    resizeObserver = new ResizeObserver(() => {
+      setPositionWhenOpen()
+    })
+    resizeObserver.observe(content.value)
+  }
+
+  // ResizeObserver for opener (handles opener size/position changes)
+  if (opener.value && !openerResizeObserver) {
+    openerResizeObserver = new ResizeObserver(() => {
+      setPositionWhenOpen()
+    })
+    openerResizeObserver.observe(opener.value)
+  }
+}
+
+// Cleanup all event listeners and observers
+const cleanupEventListeners = () => {
+  window.removeEventListener('scroll', handleScroll, true)
+  window.removeEventListener('resize', handleResize)
+
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+    resizeObserver = null
+  }
+
+  if (openerResizeObserver) {
+    openerResizeObserver.disconnect()
+    openerResizeObserver = null
+  }
+}
+
 watch(
   () => props.position,
   () => setPositionWhenOpen()
@@ -70,11 +157,13 @@ watch(
 watch(
   () => props.isOpen,
   (newVal) => {
-    if (!newVal || !content.value) {
-      window.removeEventListener('scroll', setPositionWhenOpen)
+    if (!newVal || !content.value || !isMounted) {
+      cleanupEventListeners()
       return
     }
-    window.addEventListener('scroll', setPositionWhenOpen)
+    
+    setupEventListeners()
+    
     const openerRect = opener.value?.getBoundingClientRect()
     // CRITICAL: Set position fixed immediately to prevent layout shift
     content.value.style.position = 'fixed'
@@ -98,8 +187,26 @@ watch(
     }
   }
 )
+
 onBeforeUnmount(() => {
-  window.removeEventListener('scroll', setPositionWhenOpen)
+  isMounted = false
+  cleanupEventListeners()
+})
+
+// Helper function to get margin class from position
+const getMarginClassForPosition = (position: string): string => {
+  if (position.startsWith('bottom')) return 'mt-4' // margin-top only
+  if (position.startsWith('top')) return 'mb-4'    // margin-bottom only
+  if (position.startsWith('left')) return 'mr-4'   // margin-right only
+  if (position.startsWith('right')) return 'ml-4'  // margin-left only
+  return 'mt-4' // default fallback
+}
+
+// Computed margin class based on resolved position
+// Uses actualPosition for auto positions, falls back to props.position for explicit
+const resolvedMarginClass = computed(() => {
+  const effectivePosition = floating.actualPosition?.value ?? props.position
+  return getMarginClassForPosition(effectivePosition)
 })
 
 const contentClass = computed(() => {
@@ -107,7 +214,7 @@ const contentClass = computed(() => {
     return props.contentClass
   }
 
-  return ['bg-core-white fixed p-4', props.contentClass]
+  return ['bg-core-white fixed', resolvedMarginClass.value, props.contentClass]
 })
 
 defineExpose({