@fiscozen/composables 0.1.5 → 0.1.7

package/package.json

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

package/src/FzFloating.vue

@@ -9,7 +9,7 @@ const props = withDefaults(defineProps<FzFloatingProps>(), {
 })
 
 const opener = ref(null)
-const content = ref<HTMLElement|null>(null)
+const content = ref<HTMLElement | null>(null)
 
 const slots = useSlots()
 
@@ -38,11 +38,11 @@ watch(
   () => props.isOpen,
   (newVal) => {
     if (!newVal || !content.value) {
-      return;
+      return
     }
-    content.value.style.top = '0px';
-    content.value.style.left = '0px';
-    content.value.style.transform = 'none';
+    content.value.style.top = '0px'
+    content.value.style.left = '0px'
+    content.value.style.transform = 'none'
     floating.setPosition()
   }
 )
@@ -55,8 +55,8 @@ watch(
     </div>
     <div
       ref="content"
-      v-show="!$slots.opener || ($slots.opener && isOpen)"
-      class="bg-core-white absolute p-4 z-10"
+      v-show="$slots.default && (!$slots.opener || ($slots.opener && isOpen))"
+      class="bg-core-white fixed p-4 z-10"
       :class="contentClass"
     >
       <slot :isOpen :floating></slot>

package/src/composables/index.ts

@@ -1 +1,3 @@
 export * from './useFloating'
+export * from './useMediaQuery'
+export * from './useBreakpoints'

package/src/composables/useBreakpoints.ts

@@ -0,0 +1,17 @@
+import { useMediaQuery } from './useMediaQuery'
+
+function useBreakpoints<T extends string>(breakpoints: Record<T, `${number}px`>) {
+  return {
+    isGreater(breakpoint: T) {
+      return useMediaQuery(`(min-width: ${breakpoints[breakpoint]})`)
+    },
+    isSmaller(breakpoint: T) {
+      return useMediaQuery(`(max-width: ${breakpoints[breakpoint]})`)
+    },
+    isInBetween(min: T, max: T) {
+      return useMediaQuery(`(min-width: ${breakpoints[min]}) and (max-width: ${breakpoints[max]})`)
+    }
+  }
+}
+
+export { useBreakpoints }

package/src/composables/useFloating.ts

@@ -5,10 +5,10 @@ import { calcRealPos, getHighestAvailableSpacePos } from '../utils'
 export const useFloating = (
   args: FzUseFloatingArgs
 ): {
-  float: FzRect;
-  rect: Ref<DOMRect | null>;
-  floatObserver: Ref<IntersectionObserver>;
-  setPosition: () => Promise<void>;
+  float: FzRect
+  rect: Ref<DOMRect | null>
+  floatObserver: Ref<IntersectionObserver>
+  setPosition: () => Promise<void>
 } => {
   const safeElementDomRef = ref<HTMLElement | null>(null)
   const safeContainerDomRef = ref<HTMLElement | null>(null)
@@ -31,224 +31,225 @@ export const useFloating = (
 
   const floatObserver = ref(new IntersectionObserver(handleIntersect, options))
 
-  const setPosition = () => nextTick(() => {
-    safeElementDomRef.value =
-      typeof args.element.domRef.value === 'string'
-        ? document.querySelector(args.element.domRef.value)
-        : args.element.domRef.value
-    if (!args.container) {
-      safeContainerDomRef.value = document.body
-    } else {
-      safeContainerDomRef.value =
-        typeof args.container.domRef.value === 'string'
-          ? document.querySelector(args.container.domRef.value)
-          : args.container.domRef.value
-      safeContainerDomRef.value ??= document.body
-    }
+  const setPosition = () =>
+    nextTick(() => {
+      safeElementDomRef.value =
+        typeof args.element.domRef.value === 'string'
+          ? document.querySelector(args.element.domRef.value)
+          : args.element.domRef.value
+      if (!args.container) {
+        safeContainerDomRef.value = document.body
+      } else {
+        safeContainerDomRef.value =
+          typeof args.container.domRef.value === 'string'
+            ? document.querySelector(args.container.domRef.value)
+            : args.container.domRef.value
+        safeContainerDomRef.value ??= document.body
+      }
 
-    if (!safeElementDomRef.value) {
-      throw new Error('missing reference element for floating behavior')
-    }
+      if (!safeElementDomRef.value) {
+        throw new Error('missing reference element for floating behavior')
+      }
 
-    if (args.opener) {
-      safeOpenerDomRef.value =
-        typeof args.opener.domRef.value === 'string'
-          ? document.querySelector(args.opener.domRef.value)
-          : args.opener.domRef.value
-    }
+      if (args.opener) {
+        safeOpenerDomRef.value =
+          typeof args.opener.domRef.value === 'string'
+            ? document.querySelector(args.opener.domRef.value)
+            : args.opener.domRef.value
+      }
 
-    rect.value = safeElementDomRef.value.getBoundingClientRect()
-    const openerRect = safeOpenerDomRef.value?.getBoundingClientRect()
-    const containerRect = safeContainerDomRef.value.getBoundingClientRect()
+      rect.value = safeElementDomRef.value.getBoundingClientRect()
+      const openerRect = safeOpenerDomRef.value?.getBoundingClientRect()
+      const containerRect = safeContainerDomRef.value.getBoundingClientRect()
 
-    // multiple observer calls on same target do not cause multiple registrations
-    floatObserver.value.observe(safeElementDomRef.value)
-    floatObserver.value.observe(safeContainerDomRef.value)
+      // multiple observer calls on same target do not cause multiple registrations
+      floatObserver.value.observe(safeElementDomRef.value)
+      floatObserver.value.observe(safeContainerDomRef.value)
 
-    let position: FzFloatingPosition = args.position ? args.position.value : 'auto'
+      let position: FzFloatingPosition = args.position ? args.position.value : 'auto'
 
-    let translateY = 0
-    let translateX = 0
+      let translateY = 0
+      let translateX = 0
 
-    if (args.opener && safeOpenerDomRef.value && openerRect) {
-      switch (position) {
-        case 'auto':
-          position = getHighestAvailableSpacePos(
-            safeContainerDomRef.value,
-            safeElementDomRef.value,
-            safeOpenerDomRef.value
-          )
-          break
-        case 'auto-start':
-          position = getHighestAvailableSpacePos(
-            safeContainerDomRef.value,
-            safeElementDomRef.value,
-            safeOpenerDomRef.value,
-            'start'
-          )
-          break
-        case 'auto-end':
-          position = getHighestAvailableSpacePos(
-            safeContainerDomRef.value,
-            safeElementDomRef.value,
-            safeOpenerDomRef.value,
-            'end'
-          )
-          break
-        default:
-          break
+      if (args.opener && safeOpenerDomRef.value && openerRect) {
+        switch (position) {
+          case 'auto':
+            position = getHighestAvailableSpacePos(
+              safeContainerDomRef.value,
+              safeElementDomRef.value,
+              safeOpenerDomRef.value
+            )
+            break
+          case 'auto-start':
+            position = getHighestAvailableSpacePos(
+              safeContainerDomRef.value,
+              safeElementDomRef.value,
+              safeOpenerDomRef.value,
+              'start'
+            )
+            break
+          case 'auto-end':
+            position = getHighestAvailableSpacePos(
+              safeContainerDomRef.value,
+              safeElementDomRef.value,
+              safeOpenerDomRef.value,
+              'end'
+            )
+            break
+          default:
+            break
+        }
+        switch (position) {
+          case 'bottom':
+            float.position.y = openerRect.bottom
+            float.position.x = openerRect.left + openerRect.width / 2
+            translateX = -50
+            translateY = 0
+            break
+          case 'bottom-start':
+            float.position.y = openerRect.bottom
+            float.position.x = openerRect.left
+            translateX = 0
+            translateY = 0
+            break
+          case 'bottom-end':
+            float.position.y = openerRect.bottom
+            float.position.x = openerRect.right
+            translateX = -100
+            translateY = 0
+            break
+          case 'left-start':
+            float.position.y = openerRect.top
+            float.position.x = openerRect.left
+            translateX = -100
+            translateY = 0
+            break
+          case 'left':
+            float.position.y = openerRect.top + openerRect.height / 2
+            float.position.x = openerRect.left
+            translateY = -50
+            translateX = -100
+            break
+          case 'left-end':
+            float.position.y = openerRect.bottom
+            float.position.x = openerRect.left
+            translateY = -100
+            translateX = -100
+            break
+          case 'top-start':
+            float.position.y = openerRect.top
+            float.position.x = openerRect.left
+            translateY = -100
+            translateX = 0
+            break
+          case 'top':
+            float.position.y = openerRect.top
+            float.position.x = openerRect.left + openerRect.width / 2
+            translateX = -50
+            translateY = -100
+            break
+          case 'top-end':
+            float.position.y = openerRect.top
+            float.position.x = openerRect.right
+            translateX = -100
+            translateY = -100
+            break
+          case 'right-start':
+            float.position.y = openerRect.top
+            float.position.x = openerRect.right
+            translateX = 0
+            translateY = 0
+            break
+          case 'right':
+            float.position.y = openerRect.top + openerRect.height / 2
+            float.position.x = openerRect.right
+            translateY = -50
+            translateX = 0
+            break
+          case 'right-end':
+            float.position.y = openerRect.bottom
+            float.position.x = openerRect.right
+            translateY = -100
+            translateX = 0
+            break
+          default:
+            break
+        }
+      } else {
+        switch (position) {
+          case 'bottom':
+            float.position.y = containerRect.bottom - rect.value.height
+            float.position.x = containerRect.left + containerRect.width / 2
+            translateX = -50
+            break
+          case 'left-end':
+          case 'bottom-start':
+            float.position.y = containerRect.bottom - rect.value.height
+            float.position.x = containerRect.left
+            break
+          case 'right-end':
+          case 'bottom-end':
+            float.position.y = containerRect.bottom - rect.value.height
+            float.position.x = containerRect.right - rect.value.width
+            break
+          case 'left':
+            float.position.y = containerRect.top + (containerRect.height - rect.value.height) / 2
+            float.position.x = containerRect.left
+            break
+          case 'top-start':
+          case 'left-start':
+            float.position.y = containerRect.top
+            float.position.x = containerRect.left
+            break
+          case 'top':
+            float.position.y = containerRect.top
+            float.position.x = containerRect.left + (containerRect.width - rect.value.width) / 2
+            break
+          case 'top-end':
+          case 'right-start':
+            float.position.y = containerRect.top
+            float.position.x = containerRect.right - rect.value.width
+          case 'right':
+            float.position.y = containerRect.top + (containerRect.height - rect.value.height) / 2
+            float.position.x = containerRect.right - rect.value.width
+            break
+          default:
+            break
+        }
       }
-      switch (position) {
-        case 'bottom':
-          float.position.y = openerRect.bottom
-          float.position.x = openerRect.left + openerRect.width / 2
-          translateX = -50
-          translateY = 0
-          break
-        case 'bottom-start':
-          float.position.y = openerRect.bottom
-          float.position.x = openerRect.left
-          translateX = 0
-          translateY = 0
-          break
-        case 'bottom-end':
-          float.position.y = openerRect.bottom
-          float.position.x = openerRect.right
-          translateX = -100
-          translateY = 0
-          break
-        case 'left-start':
-          float.position.y = openerRect.top
-          float.position.x = openerRect.left
-          translateX = -100
-          translateY = 0
-          break
-        case 'left':
-          float.position.y = openerRect.top + openerRect.height / 2
-          float.position.x = openerRect.left
-          translateY = -50
-          translateX = -100
-          break
-        case 'left-end':
-          float.position.y = openerRect.bottom
-          float.position.x = openerRect.left
-          translateY = -100
-          translateX = -100
-          break
-        case 'top-start':
-          float.position.y = openerRect.top
-          float.position.x = openerRect.left
-          translateY = -100
-          translateX = 0
-          break
-        case 'top':
-          float.position.y = openerRect.top
-          float.position.x = openerRect.left + openerRect.width / 2
-          translateX = -50
-          translateY = -100
-          break
-        case 'top-end':
-          float.position.y = openerRect.top
-          float.position.x = openerRect.right
-          translateX = -100
-          translateY = -100
-          break
-        case 'right-start':
-          float.position.y = openerRect.top
-          float.position.x = openerRect.right
-          translateX = 0
-          translateY = 0
-          break
-        case 'right':
-          float.position.y = openerRect.top + openerRect.height / 2
-          float.position.x = openerRect.right
-          translateY = -50
-          translateX = 0
-          break
-        case 'right-end':
-          float.position.y = openerRect.bottom
-          float.position.x = openerRect.right
-          translateY = -100
-          translateX = 0
-          break
-        default:
-          break
-      }
-    } else {
-      switch (position) {
-        case 'bottom':
-          float.position.y = containerRect.bottom - rect.value.height
-          float.position.x = containerRect.left + containerRect.width / 2
-          translateX = -50
-          break
-        case 'left-end':
-        case 'bottom-start':
-          float.position.y = containerRect.bottom - rect.value.height
-          float.position.x = containerRect.left
-          break
-        case 'right-end':
-        case 'bottom-end':
-          float.position.y = containerRect.bottom - rect.value.height
-          float.position.x = containerRect.right - rect.value.width
-          break
-        case 'left':
-          float.position.y = containerRect.top + (containerRect.height - rect.value.height) / 2
-          float.position.x = containerRect.left
-          break
-        case 'top-start':
-        case 'left-start':
-          float.position.y = containerRect.top
-          float.position.x = containerRect.left
-          break
-        case 'top':
-          float.position.y = containerRect.top
-          float.position.x = containerRect.left + (containerRect.width - rect.value.width) / 2
-          break
-        case 'top-end':
-        case 'right-start':
-          float.position.y = containerRect.top
-          float.position.x = containerRect.right - rect.value.width
-        case 'right':
-          float.position.y = containerRect.top + (containerRect.height - rect.value.height) / 2
-          float.position.x = containerRect.right - rect.value.width
-          break
-        default:
-          break
-      }
-    }
 
-    const realPos = calcRealPos(rect.value, float.position, translateX, translateY)
+      const realPos = calcRealPos(rect.value, float.position, translateX, translateY)
 
-    float.position.x = realPos.x;
-    float.position.y = realPos.y;
+      float.position.x = realPos.x
+      float.position.y = realPos.y
 
-    if (realPos.x < containerRect.left) {
-      float.position.x = containerRect.left;
-      translateX = 0
-    }
+      if (realPos.x < containerRect.left) {
+        float.position.x = containerRect.left
+        translateX = 0
+      }
 
-    if ((realPos.x + rect.value.width) > containerRect.right) {
-      float.position.x = containerRect.right - rect.value.width;
-      translateX = 0
-    }
-    
-    if (realPos.y < containerRect.top) {
-      float.position.y = containerRect.top;
-      translateY = 0
-    }
+      if (realPos.x + rect.value.width > containerRect.right) {
+        float.position.x = containerRect.right - rect.value.width
+        translateX = 0
+      }
 
-    if ((realPos.y + rect.value.height) > containerRect.bottom) {
-      float.position.y = containerRect.bottom - rect.value.height;
-      translateY = 0
-    }
+      if (realPos.y < containerRect.top) {
+        float.position.y = containerRect.top
+        translateY = 0
+      }
 
-    safeElementDomRef.value.style.top = `${float.position.y}px`
-    safeElementDomRef.value.style.left = `${float.position.x}px`
-    safeElementDomRef.value.style.position = 'fixed'
-    safeElementDomRef.value.style.display = 'flex'
+      if (realPos.y + rect.value.height > containerRect.bottom) {
+        float.position.y = containerRect.bottom - rect.value.height
+        translateY = 0
+      }
 
-    rect.value = safeElementDomRef.value.getBoundingClientRect()
-  })
+      safeElementDomRef.value.style.top = `${float.position.y}px`
+      safeElementDomRef.value.style.left = `${float.position.x}px`
+      safeElementDomRef.value.style.position = 'fixed'
+      safeElementDomRef.value.style.display = 'flex'
+
+      rect.value = safeElementDomRef.value.getBoundingClientRect()
+    })
 
   onUnmounted(() => {
     floatObserver.value.disconnect()

package/src/composables/useMediaQuery.ts

@@ -0,0 +1,22 @@
+import { Ref, onMounted, onUnmounted, ref } from 'vue'
+
+function useMediaQuery(mediaQuery: string): Ref<boolean> {
+  const mediaQueryList = window.matchMedia(mediaQuery)
+  const matches = ref(mediaQueryList.matches)
+
+  function handleChange(event: MediaQueryListEvent) {
+    matches.value = event.matches
+  }
+
+  onMounted(() => {
+    mediaQueryList.addEventListener('change', handleChange)
+  })
+
+  onUnmounted(() => {
+    mediaQueryList.removeEventListener('change', handleChange)
+  })
+
+  return matches
+}
+
+export { useMediaQuery }

package/src/utils/index.ts

@@ -20,10 +20,14 @@ export const getHighestAvailableSpacePos = (
   const elRect = el.getBoundingClientRect()
   const openerRect = opener.getBoundingClientRect()
 
-  const spaceLeftNormalized = (openerRect.left - containerRect.left - elRect.width) / containerRect.width
-  const spaceRightNormalized = (containerRect.right - openerRect.right - elRect.width) / containerRect.width
-  const spaceTopNormalized = (openerRect.top - containerRect.top - elRect.height) / containerRect.height
-  const spaceBottomNormalized = (containerRect.bottom - openerRect.bottom - elRect.height) / containerRect.height
+  const spaceLeftNormalized =
+    (openerRect.left - containerRect.left - elRect.width) / containerRect.width
+  const spaceRightNormalized =
+    (containerRect.right - openerRect.right - elRect.width) / containerRect.width
+  const spaceTopNormalized =
+    (openerRect.top - containerRect.top - elRect.height) / containerRect.height
+  const spaceBottomNormalized =
+    (containerRect.bottom - openerRect.bottom - elRect.height) / containerRect.height
 
   const positionList = [
     {
@@ -67,10 +71,14 @@ export const getHighestAvailableSpacePos = (
   return positionRes
 }
 
-
-export const calcRealPos = (rect: DOMRect, pos: FzAbsolutePosition, translateX: number, translateY: number): FzAbsolutePosition => {
+export const calcRealPos = (
+  rect: DOMRect,
+  pos: FzAbsolutePosition,
+  translateX: number,
+  translateY: number
+): FzAbsolutePosition => {
   return {
-    x: pos.x + (rect.width * translateX)/100,
-    y: pos.y + (rect.height * translateY)/100,
+    x: pos.x + (rect.width * translateX) / 100,
+    y: pos.y + (rect.height * translateY) / 100
   }
-}
+}