@saasmakers/ui 2.0.77 → 2.0.79

package/app/components/layout/LayoutBottomSheet.vue

@@ -18,6 +18,7 @@ const visible = defineModel<boolean>({ default: false })
 const contentRef = ref<HTMLElement>()
 const panelRef = ref<HTMLElement>()
 const { release: onAfterLeave } = useDialog(visible, panelRef)
+const { isKeyboardOpen, keyboardInset } = useKeyboardInset()
 
 const drag = reactive({
   closing: false,
@@ -32,6 +33,17 @@ const closeThreshold = computed(() => {
   return (panelRef.value?.offsetHeight ?? 320) * closeThresholdRatio
 })
 
+// Use `bottom` (not transform) so keyboard lift does not fight drag-to-dismiss.
+const panelStyle = computed(() => {
+  return {
+    bottom: `${keyboardInset.value}px`,
+    maxHeight: isKeyboardOpen.value
+      ? `calc(100dvh - ${keyboardInset.value}px - env(safe-area-inset-top))`
+      : undefined,
+    transform: drag.closing ? 'translateY(100%)' : drag.offset > 0 ? `translateY(${drag.offset}px)` : undefined,
+  }
+})
+
 function onBackdropClick() {
   if (props.closeOnBackdrop) {
     onClose()
@@ -210,15 +222,14 @@ watch(visible, (isVisible) => {
           ref="panelRef"
           :aria-label="props['aria-label']"
           aria-modal="true"
-          class="layout-bottom-sheet fixed bottom-0 left-0 right-0 z-[60] mx-auto max-h-[85dvh] max-w-screen-md flex flex-col rounded-t-2xl bg-white text-gray-900 app-text shadow-lg outline-none safe-bottom dark:bg-gray-900 dark:text-gray-100"
+          class="layout-bottom-sheet fixed bottom-0 left-0 right-0 z-[60] mx-auto max-h-[85dvh] max-w-screen-md flex flex-col rounded-t-2xl bg-white text-gray-900 app-text shadow-lg outline-none dark:bg-gray-900 dark:text-gray-100"
           :class="{
+            'safe-bottom': !isKeyboardOpen,
             'transition-none motion-reduce:transition-none': drag.isDragging,
-            'transition-transform duration-200 ease motion-reduce:transition-none motion-reduce:duration-0': !drag.isDragging && (drag.closing || drag.offset > 0),
+            'transition-[bottom,max-height,transform] duration-250 ease-out motion-reduce:transition-none motion-reduce:duration-0': !drag.isDragging,
           }"
+          :style="panelStyle"
           role="dialog"
-          :style="{
-            transform: drag.closing ? 'translateY(100%)' : drag.offset > 0 ? `translateY(${drag.offset}px)` : undefined,
-          }"
           tabindex="-1"
           @transitionend="onPanelTransitionEnd"
         >

package/app/composables/useKeyboardInset.ts

@@ -0,0 +1,46 @@
+import type { PluginListenerHandle } from '@capacitor/core'
+import { Keyboard } from '@capacitor/keyboard'
+
+// Tracks the on-screen keyboard height on iOS Capacitor only.
+// With Keyboard.resize = 'none', the WebView does not shrink; consumers shift
+// fixed UI (e.g. bottom sheets) with this inset so it moves with the keyboard
+// animation instead of jumping after it finishes. Android keeps soft-input
+// resize, so applying the inset there would double-offset.
+export default function useKeyboardInset() {
+  const { isIOS, isPluginAvailable } = useCapacitor()
+  const keyboardInset = ref(0)
+
+  const isKeyboardOpen = computed(() => {
+    return keyboardInset.value > 0
+  })
+
+  const listenerHandles: PluginListenerHandle[] = []
+
+  onMounted(async () => {
+    if (!import.meta.client || !isIOS.value || !isPluginAvailable('Keyboard')) {
+      return
+    }
+
+    listenerHandles.push(
+      await Keyboard.addListener('keyboardWillShow', (info) => {
+        keyboardInset.value = info.keyboardHeight
+      }),
+      await Keyboard.addListener('keyboardWillHide', () => {
+        keyboardInset.value = 0
+      }),
+    )
+  })
+
+  onBeforeUnmount(() => {
+    for (const handle of listenerHandles) {
+      void handle.remove()
+    }
+
+    listenerHandles.length = 0
+  })
+
+  return {
+    isKeyboardOpen,
+    keyboardInset,
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.77",
+  "version": "2.0.79",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -26,6 +26,7 @@
   ],
   "dependencies": {
     "@capacitor/core": "8.4.0",
+    "@capacitor/keyboard": "8.0.6",
     "@capacitor/preferences": "8.0.1",
     "@capgo/capacitor-social-login": "8.3.22",
     "@nuxt/icon": "2.2.3",