@fiscozen/composables 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/composables",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Design System utility composables",
   "main": "src/index.ts",
   "type": "module",

package/src/FzFloating.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref, useSlots, watch, toRef, computed } from 'vue'
 import { useFloating } from './composables'
-import { FzFloatingPosition, FzFloatingProps, FzUseFloatingArgs } from './types'
+import { FzFloatingProps, FzUseFloatingArgs } from './types'
 
 const props = withDefaults(defineProps<FzFloatingProps>(), {
   position: 'auto',
@@ -9,7 +9,7 @@ const props = withDefaults(defineProps<FzFloatingProps>(), {
 })
 
 const opener = ref(null)
-const content = ref(null)
+const content = ref<HTMLElement|null>(null)
 
 const slots = useSlots()
 
@@ -36,7 +36,15 @@ watch(
 )
 watch(
   () => props.isOpen,
-  (newVal) => newVal && floating.setPosition()
+  (newVal) => {
+    if (!newVal || !content.value) {
+      return;
+    }
+    content.value.style.top = '0px';
+    content.value.style.left = '0px';
+    content.value.style.transform = 'none';
+    floating.setPosition()
+  }
 )
 </script>
 
@@ -49,6 +57,7 @@ watch(
       ref="content"
       v-show="!$slots.opener || ($slots.opener && isOpen)"
       class="bg-core-white absolute p-4"
+      :class="contentClass"
     >
       <slot :isOpen :floating></slot>
     </div>

package/src/composables/useFloating.ts

@@ -219,6 +219,9 @@ export const useFloating = (
 
     const realPos = calcRealPos(rect.value, float.position, translateX, translateY)
 
+    float.position.x = realPos.x;
+    float.position.y = realPos.y;
+
     if (realPos.x < containerRect.left) {
       float.position.x = containerRect.left;
       translateX = 0
@@ -241,8 +244,8 @@ export const useFloating = (
 
     safeElementDomRef.value.style.top = `${float.position.y}px`
     safeElementDomRef.value.style.left = `${float.position.x}px`
-    safeElementDomRef.value.style.transform = `translateY(${translateY}%) translateX(${translateX}%)`
     safeElementDomRef.value.style.position = 'absolute'
+    safeElementDomRef.value.style.display = 'flex'
 
     rect.value = safeElementDomRef.value.getBoundingClientRect()
   })

package/src/types.ts

@@ -7,7 +7,8 @@ export type FzFloatingPosition = PositionPrimary | `${PositionPrimary}-${Positio
 export interface FzFloatingProps {
   isOpen: boolean
   position?: FzFloatingPosition
-  container?: string | null
+  container?: string | null,
+  contentClass?: string | string[] | Record<string, boolean>
 }
 
 export interface FzAbsolutePosition {