@saasmakers/ui 2.0.78 → 2.0.80

package/app/components/layout/LayoutBottomSheet.vue

@@ -18,6 +18,8 @@ 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 skipLeaveSlide = ref(false)
 
 const drag = reactive({
   closing: false,
@@ -32,6 +34,30 @@ 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 dismissKeyboard() {
+  if (!import.meta.client) {
+    return
+  }
+
+  const activeElement = document.activeElement
+
+  // Blur instead of Keyboard.hide() so focus is cleared too (incl. the warmup input).
+  if (activeElement instanceof HTMLElement && activeElement !== document.body) {
+    activeElement.blur()
+  }
+}
+
 function onBackdropClick() {
   if (props.closeOnBackdrop) {
     onClose()
@@ -72,6 +98,12 @@ function onHeaderPointerDown(event: PointerEvent) {
   handle.setPointerCapture(event.pointerId)
 }
 
+function onLeaveComplete() {
+  skipLeaveSlide.value = false
+
+  onAfterLeave()
+}
+
 function onPanelTransitionEnd(event: TransitionEvent) {
   if (event.propertyName !== 'transform' || !drag.closing) {
     return
@@ -156,6 +188,13 @@ function onPointerUp(event: PointerEvent) {
   handle.releasePointerCapture(event.pointerId)
 
   if (drag.offset >= closeThreshold.value) {
+    if (isKeyboardOpen.value) {
+      onClose()
+      resetDragState()
+
+      return
+    }
+
     drag.closing = true
 
     return
@@ -180,6 +219,10 @@ function resetPendingDrag() {
 
 watch(visible, (isVisible) => {
   if (!isVisible) {
+    // iOS hides the keyboard before a leave slide would finish.
+    skipLeaveSlide.value = isKeyboardOpen.value
+
+    dismissKeyboard()
     resetDragState()
   }
 })
@@ -197,28 +240,28 @@ watch(visible, (isVisible) => {
   <ClientOnly>
     <Teleport to="body">
       <Transition
+        :css="!skipLeaveSlide"
         enter-active-class="transition-transform duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
         enter-from-class="translate-y-full motion-reduce:translate-y-0"
         enter-to-class="translate-y-0"
         leave-active-class="transition-transform duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
         leave-from-class="translate-y-0"
         leave-to-class="translate-y-full motion-reduce:translate-y-0"
-        @after-leave="onAfterLeave"
+        @after-leave="onLeaveComplete"
       >
         <div
           v-if="visible"
           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.78",
+  "version": "2.0.80",
   "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",