@saasmakers/ui 2.0.80 → 2.0.82

package/app/components/layout/LayoutBottomSheet.vue

@@ -18,8 +18,6 @@ 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,
@@ -34,30 +32,6 @@ 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()
@@ -98,12 +72,6 @@ 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
@@ -188,13 +156,6 @@ function onPointerUp(event: PointerEvent) {
   handle.releasePointerCapture(event.pointerId)
 
   if (drag.offset >= closeThreshold.value) {
-    if (isKeyboardOpen.value) {
-      onClose()
-      resetDragState()
-
-      return
-    }
-
     drag.closing = true
 
     return
@@ -219,10 +180,6 @@ function resetPendingDrag() {
 
 watch(visible, (isVisible) => {
   if (!isVisible) {
-    // iOS hides the keyboard before a leave slide would finish.
-    skipLeaveSlide.value = isKeyboardOpen.value
-
-    dismissKeyboard()
     resetDragState()
   }
 })
@@ -240,28 +197,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="onLeaveComplete"
+        @after-leave="onAfterLeave"
       >
         <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 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 safe-bottom dark:bg-gray-900 dark:text-gray-100"
           :class="{
-            'safe-bottom': !isKeyboardOpen,
             'transition-none motion-reduce:transition-none': drag.isDragging,
-            'transition-[bottom,max-height,transform] duration-250 ease-out motion-reduce:transition-none motion-reduce:duration-0': !drag.isDragging,
+            'transition-transform duration-200 ease motion-reduce:transition-none motion-reduce:duration-0': !drag.isDragging && (drag.closing || drag.offset > 0),
           }"
-          :style="panelStyle"
           role="dialog"
+          :style="{
+            transform: drag.closing ? 'translateY(100%)' : drag.offset > 0 ? `translateY(${drag.offset}px)` : undefined,
+          }"
           tabindex="-1"
           @transitionend="onPanelTransitionEnd"
         >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.80",
+  "version": "2.0.82",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -26,7 +26,6 @@
   ],
   "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",

package/app/composables/useKeyboardInset.ts

@@ -1,46 +0,0 @@
-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/app/composables/useKeyboardWarmup.ts

@@ -1,44 +0,0 @@
-// Always-mounted hidden input used to open the mobile keyboard within the user
-// gesture, before any async work (network create) breaks user activation.
-// Kept at module scope so every consumer shares the same singleton input.
-let warmupInput: HTMLInputElement | undefined
-
-export default function useKeyboardWarmup() {
-  const { isDesktopBrowser } = useDevice()
-
-  function ensureWarmupInput() {
-    if (!import.meta.client || warmupInput) {
-      return
-    }
-
-    const input = document.createElement('input')
-
-    input.type = 'text'
-    input.tabIndex = -1
-
-    input.setAttribute('aria-hidden', 'true')
-
-    input.style.cssText = 'position:fixed;top:0;left:0;height:1px;width:1px;opacity:0;pointer-events:none;'
-
-    document.body.appendChild(input)
-
-    warmupInput = input
-  }
-
-  // Must run synchronously inside a user gesture. Focusing a real text input
-  // raises the on-screen keyboard; a later text-to-text focus move (to the
-  // profile name field) keeps it open without needing a fresh gesture.
-  function focusWarmupInput() {
-    if (isDesktopBrowser.value) {
-      return
-    }
-
-    ensureWarmupInput()
-    warmupInput?.focus()
-  }
-
-  return {
-    ensureWarmupInput,
-    focusWarmupInput,
-  }
-}