@saasmakers/ui 2.1.4 → 2.1.6

package/app/components/fields/FieldInput.vue

@@ -46,17 +46,15 @@ const id = useId()
 const modelValue = defineModel<FieldInput['modelValue']>({ default: '' })
 const input = ref<HTMLInputElement>()
 const showPassword = ref(false)
-const focused = ref(false)
-const { isDesktopBrowser, isIos } = useDevice()
+const { isDesktopBrowser } = useDevice()
 
-const iosUppercaseTyping = computed(() => {
-  const isProseField = props.type === 'text' || props.type === 'search'
+const { isActiveOnIos, isTypingOnIos, onBlur: onIosUppercaseBlur, onCompositionEnd: onIosUppercaseCompositionEnd, onFocus: onIosUppercaseFocus, onInput: onIosUppercaseInput } = useIosUppercase({
+  enabled: () => {
+    const isProseField = props.type === 'text' || props.type === 'search'
 
-  return props.uppercase && isIos.value && isProseField && !props.lowercaseOnly && !props.slugOnly
-})
-
-const hideCssUppercase = computed(() => {
-  return iosUppercaseTyping.value && focused.value
+    return props.uppercase && isProseField && !props.lowercaseOnly && !props.slugOnly
+  },
+  modelValue,
 })
 
 onMounted(() => {
@@ -78,8 +76,7 @@ function focus() {
 }
 
 function onFieldBlur(event: FocusEvent) {
-  focused.value = false
-
+  onIosUppercaseBlur()
   syncModelValueFromTarget(event.target)
 
   if (props.trim) {
@@ -90,20 +87,12 @@ function onFieldBlur(event: FocusEvent) {
 }
 
 function onFieldFocus(event: FocusEvent) {
-  if (iosUppercaseTyping.value) {
-    const uppercased = modelValue.value.toString().toUpperCase()
-
-    if (uppercased !== modelValue.value) {
-      modelValue.value = uppercased
-    }
-  }
-
-  focused.value = true
-
+  onIosUppercaseFocus()
   emit('focus', event)
 }
 
 function onFieldInput(event: Event) {
+  onIosUppercaseInput(event)
   syncModelValueFromTarget(event.target)
 }
 
@@ -216,12 +205,12 @@ defineExpose({
           :id="id"
           ref="input"
           :autocomplete="autocomplete ? 'on' : 'off'"
-          :autocapitalize="iosUppercaseTyping ? 'characters' : undefined"
+          :autocapitalize="isActiveOnIos ? 'characters' : undefined"
           v-bind="autofocus ? { 'data-autofocus': '' } : {}"
           class="h-full w-full appearance-none items-center rounded-lg font-medium tracking-tight outline-none placeholder-gray-600 dark:placeholder-gray-400"
           :class="{
-            'uppercase': uppercase && !hideCssUppercase,
-            'placeholder:uppercase': hideCssUppercase,
+            'uppercase': uppercase && !isTypingOnIos,
+            'placeholder:uppercase': isTypingOnIos,
             'field-disabled': disabled,
             'focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100': !disabled,
             'text-gray-900 dark:text-gray-100': !lineThrough,
@@ -256,6 +245,7 @@ defineExpose({
           :type="type === 'password' && showPassword ? 'text' : type"
           :value="modelValue"
           @blur="onFieldBlur"
+          @compositionend="onIosUppercaseCompositionEnd"
           @focus="onFieldFocus"
           @input="onFieldInput"
           @keydown="onFieldKeyDown"

package/app/components/fields/FieldTextarea.vue

@@ -30,15 +30,11 @@ const emit = defineEmits<{
 const id = useId()
 const modelValue = defineModel<FieldTextarea['modelValue']>({ default: '' })
 const textarea = ref<HTMLTextAreaElement>()
-const focused = ref(false)
-const { isDesktopBrowser, isIos } = useDevice()
+const { isDesktopBrowser } = useDevice()
 
-const iosUppercaseTyping = computed(() => {
-  return props.uppercase && isIos.value
-})
-
-const hideCssUppercase = computed(() => {
-  return iosUppercaseTyping.value && focused.value
+const { isActiveOnIos, isTypingOnIos, onBlur: onIosUppercaseBlur, onCompositionEnd: onIosUppercaseCompositionEnd, onFocus: onIosUppercaseFocus, onInput: onIosUppercaseInput } = useIosUppercase({
+  enabled: () => props.uppercase,
+  modelValue,
 })
 
 onMounted(() => {
@@ -48,8 +44,7 @@ onMounted(() => {
 })
 
 function onFieldBlur(event: FocusEvent) {
-  focused.value = false
-
+  onIosUppercaseBlur()
   syncModelValueFromTarget(event.target)
   emit('blur', event, modelValue.value || '')
 }
@@ -58,18 +53,6 @@ function onFieldClick(event: MouseEvent) {
   emit('click', event, modelValue.value || '')
 }
 
-function onFieldFocus() {
-  if (iosUppercaseTyping.value) {
-    const uppercased = modelValue.value.toString().toUpperCase()
-
-    if (uppercased !== modelValue.value) {
-      modelValue.value = uppercased
-    }
-  }
-
-  focused.value = true
-}
-
 function syncModelValueFromTarget(target: EventTarget | null) {
   if (!(target instanceof HTMLTextAreaElement)) {
     return
@@ -100,11 +83,11 @@ function syncModelValueFromTarget(target: EventTarget | null) {
       ref="textarea"
       v-model="modelValue"
       v-bind="{ 'data-enable-grammarly': 'false' }"
-      :autocapitalize="iosUppercaseTyping ? 'characters' : undefined"
+      :autocapitalize="isActiveOnIos ? 'characters' : undefined"
       class="w-full flex-1 appearance-none rounded-lg text-gray-900 font-medium tracking-tight outline-none dark:text-gray-100 placeholder-gray-600 dark:placeholder-gray-400"
       :class="{
-        'uppercase': uppercase && !hideCssUppercase,
-        'placeholder:uppercase': hideCssUppercase,
+        'uppercase': uppercase && !isTypingOnIos,
+        'placeholder:uppercase': isTypingOnIos,
         'field-disabled': disabled,
         'focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100': !disabled,
         'px-sm py-2.5': padding && size === 'sm',
@@ -127,7 +110,9 @@ function syncModelValueFromTarget(target: EventTarget | null) {
       spellcheck="false"
       @blur="onFieldBlur"
       @click="onFieldClick"
-      @focus="onFieldFocus"
+      @compositionend="onIosUppercaseCompositionEnd"
+      @focus="onIosUppercaseFocus"
+      @input="onIosUppercaseInput"
     />
 
     <FieldMessage

package/app/composables/useDevice.ts

@@ -1,6 +1,6 @@
 export default function useDevice() {
   const { isIOS, isNative } = useCapacitor()
-  const isIos = ref(false)
+  const isIosDevice = ref(false)
 
   const isDesktopBrowser = computed(() => {
     if (typeof navigator === 'undefined') {
@@ -20,24 +20,16 @@ export default function useDevice() {
   })
 
   onMounted(() => {
-    isIos.value = detectIosDevice(isIOS.value)
+    isIosDevice.value = isIOS.value || isIosBrowser()
   })
 
   return {
     isDesktopBrowser,
-    isIos,
+    isIosDevice,
   }
 }
 
-function detectIosDevice(isNativeIos: boolean) {
-  if (isNativeIos) {
-    return true
-  }
-
-  if (typeof navigator === 'undefined') {
-    return false
-  }
-
+function isIosBrowser() {
   if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
     return true
   }

package/app/composables/useIosUppercase.ts

@@ -0,0 +1,75 @@
+// iOS WebKit drops keyboard suggestions while `text-transform: uppercase` is active,
+// so the transform is lifted during typing and the value itself is uppercased instead.
+export default function useIosUppercase(options: {
+  enabled: MaybeRefOrGetter<boolean>
+  modelValue: Ref<string>
+}) {
+  const { isIosDevice } = useDevice()
+  const isFocused = ref(false)
+
+  const isActiveOnIos = computed(() => {
+    return toValue(options.enabled) && isIosDevice.value
+  })
+
+  const isTypingOnIos = computed(() => {
+    return isActiveOnIos.value && isFocused.value
+  })
+
+  function onFocus() {
+    if (isActiveOnIos.value) {
+      options.modelValue.value = options.modelValue.value.toUpperCase()
+    }
+
+    isFocused.value = true
+  }
+
+  function onBlur() {
+    isFocused.value = false
+  }
+
+  function onInput(event: Event) {
+    // Rewriting the value mid-composition breaks IME and accent input.
+    if (event instanceof InputEvent && event.isComposing) {
+      return
+    }
+
+    forceUppercase(event.target)
+  }
+
+  function onCompositionEnd(event: CompositionEvent) {
+    forceUppercase(event.target)
+  }
+
+  function forceUppercase(target: EventTarget | null) {
+    if (!isActiveOnIos.value) {
+      return
+    }
+
+    if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) {
+      return
+    }
+
+    const uppercased = target.value.toUpperCase()
+
+    if (uppercased === target.value) {
+      return
+    }
+
+    const { selectionEnd, selectionStart } = target
+
+    target.value = uppercased
+
+    target.setSelectionRange(selectionStart ?? uppercased.length, selectionEnd ?? uppercased.length)
+
+    options.modelValue.value = uppercased
+  }
+
+  return {
+    isActiveOnIos,
+    isTypingOnIos,
+    onBlur,
+    onCompositionEnd,
+    onFocus,
+    onInput,
+  }
+}

package/package.json

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