@saasmakers/ui 2.0.61 → 2.0.62

package/app/assets/styles/base.css

@@ -4,6 +4,16 @@ html,
 body {
   scrollbar-gutter: stable;
   touch-action: manipulation;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+input,
+textarea,
+[contenteditable='true'] {
+  -webkit-user-select: text;
+  user-select: text;
 }
 
 /* Theme backgrounds */

package/app/components/fields/FieldInput.vue

@@ -67,6 +67,9 @@ function focus() {
 }
 
 function onFieldBlur(event: FocusEvent) {
+  // iOS keyboard paste can update the DOM without firing `input` before blur
+  syncModelValueFromTarget(event.target)
+
   if (props.trim) {
     modelValue.value = modelValue.value.toString().trim()
   }
@@ -79,23 +82,13 @@ function onFieldFocus(event: FocusEvent) {
 }
 
 function onFieldInput(event: Event) {
-  let value = (event.target as HTMLInputElement).value
-
-  if (props.type === 'number' && props.max && Number.parseInt(value) > props.max) {
-    value = props.max.toString()
-  }
-
-  if (props.slugOnly) {
-    value = value.toString().toLowerCase().replace(/[^a-z0-9_-]/g, '')
-  }
-  else if (props.lowercaseOnly) {
-    value = value.toString().toLowerCase()
-  }
-
-  modelValue.value = value
+  syncModelValueFromTarget(event.target)
 }
 
 function onFieldKeyDown(event: KeyboardEvent) {
+  // iOS keyboard paste can update the DOM without firing `input` before keydown
+  syncModelValueFromTarget(event.target)
+
   const value = (event.target as HTMLInputElement).value
 
   if (['Control', 'Escape'].includes(event.key)) {
@@ -138,6 +131,31 @@ function onTogglePasswordVisibility() {
   showPassword.value = !showPassword.value
 }
 
+function syncModelValueFromTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLInputElement)) {
+    return
+  }
+
+  modelValue.value = transformFieldValue(target.value)
+}
+
+function transformFieldValue(value: string) {
+  let nextValue = value
+
+  if (props.type === 'number' && props.max && Number.parseInt(nextValue) > props.max) {
+    nextValue = props.max.toString()
+  }
+
+  if (props.slugOnly) {
+    nextValue = nextValue.toString().toLowerCase().replace(/[^a-z0-9_-]/g, '')
+  }
+  else if (props.lowercaseOnly) {
+    nextValue = nextValue.toString().toLowerCase()
+  }
+
+  return nextValue
+}
+
 defineExpose({
   blur,
   focus,

package/app/components/fields/FieldTextarea.vue

@@ -39,12 +39,22 @@ onMounted(() => {
 })
 
 function onFieldBlur(event: FocusEvent) {
+  // iOS keyboard paste can update the DOM without syncing v-model before blur
+  syncModelValueFromTarget(event.target)
   emit('blur', event, modelValue.value || '')
 }
 
 function onFieldClick(event: MouseEvent) {
   emit('click', event, modelValue.value || '')
 }
+
+function syncModelValueFromTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLTextAreaElement)) {
+    return
+  }
+
+  modelValue.value = target.value
+}
 </script>
 
 <template>

package/app/composables/useDevice.ts

@@ -1,10 +1,21 @@
 export default function useDevice() {
+  const { isNative } = useCapacitor()
+
   const isDesktopBrowser = computed(() => {
     if (typeof navigator === 'undefined') {
       return true
     }
 
-    return !navigator.userAgentData?.mobile
+    if (isNative.value) {
+      return false
+    }
+
+    // Chromium Client Hints — unavailable on Safari / Firefox / iOS WebKit
+    if (navigator.userAgentData) {
+      return !navigator.userAgentData.mobile
+    }
+
+    return !/Android|iPad|iPhone|iPod|Mobile/i.test(navigator.userAgent)
   })
 
   return { isDesktopBrowser }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.61",
+  "version": "2.0.62",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",