@saasmakers/ui 2.1.1 → 2.1.3

package/app/components/fields/FieldInput.vue

@@ -46,7 +46,13 @@ const id = useId()
 const modelValue = defineModel<FieldInput['modelValue']>({ default: '' })
 const input = ref<HTMLInputElement>()
 const showPassword = ref(false)
-const { isDesktopBrowser } = useDevice()
+const { isDesktopBrowser, isIos } = useDevice()
+
+const iosUppercaseTyping = computed(() => {
+  const isProseField = props.type === 'text' || props.type === 'search'
+
+  return props.uppercase && isIos.value && isProseField && !props.lowercaseOnly && !props.slugOnly
+})
 
 onMounted(() => {
   if (props.autofocus && input.value && isDesktopBrowser.value) {
@@ -77,6 +83,14 @@ function onFieldBlur(event: FocusEvent) {
 }
 
 function onFieldFocus(event: FocusEvent) {
+  if (iosUppercaseTyping.value) {
+    const uppercased = modelValue.value.toString().toUpperCase()
+
+    if (uppercased !== modelValue.value) {
+      modelValue.value = uppercased
+    }
+  }
+
   emit('focus', event)
 }
 
@@ -193,10 +207,12 @@ defineExpose({
           :id="id"
           ref="input"
           :autocomplete="autocomplete ? 'on' : 'off'"
+          :autocapitalize="iosUppercaseTyping ? '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,
+            'uppercase': uppercase && !iosUppercaseTyping,
+            'placeholder:uppercase': iosUppercaseTyping,
             '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,

package/app/components/fields/FieldSelect.vue

@@ -26,6 +26,7 @@ const props = withDefaults(defineProps<Omit<FieldSelect, 'modelValue'>>(), {
   searchPlaceholder: '',
   size: 'base',
   square: false,
+  uppercase: true,
   validation: undefined,
 })
 
@@ -331,6 +332,7 @@ function toggle() {
         'cursor-pointer': !disabled,
         'shadow-sm': border === 'full',
         'w-fit': iconOnly || square,
+        'field-uppercase': uppercase,
       }"
     >
       <div
@@ -445,6 +447,7 @@ function toggle() {
               'text-xs': size === 'sm',
               'text-sm': size === 'base',
               'text-base': size === 'lg',
+              'field-uppercase': uppercase,
               'md:min-w-xl p-1 pb-0': isMultiColumn,
             }"
             role="listbox"

package/app/components/fields/FieldTextarea.vue

@@ -30,7 +30,11 @@ const emit = defineEmits<{
 const id = useId()
 const modelValue = defineModel<FieldTextarea['modelValue']>({ default: '' })
 const textarea = ref<HTMLTextAreaElement>()
-const { isDesktopBrowser } = useDevice()
+const { isDesktopBrowser, isIos } = useDevice()
+
+const iosUppercaseTyping = computed(() => {
+  return props.uppercase && isIos.value
+})
 
 onMounted(() => {
   if (props.autofocus && textarea.value && isDesktopBrowser.value) {
@@ -47,6 +51,18 @@ function onFieldClick(event: MouseEvent) {
   emit('click', event, modelValue.value || '')
 }
 
+function onFieldFocus() {
+  if (!iosUppercaseTyping.value) {
+    return
+  }
+
+  const uppercased = modelValue.value.toString().toUpperCase()
+
+  if (uppercased !== modelValue.value) {
+    modelValue.value = uppercased
+  }
+}
+
 function syncModelValueFromTarget(target: EventTarget | null) {
   if (!(target instanceof HTMLTextAreaElement)) {
     return
@@ -77,9 +93,11 @@ function syncModelValueFromTarget(target: EventTarget | null) {
       ref="textarea"
       v-model="modelValue"
       v-bind="{ 'data-enable-grammarly': 'false' }"
+      :autocapitalize="iosUppercaseTyping ? '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,
+        'uppercase': uppercase && !iosUppercaseTyping,
+        'placeholder:uppercase': iosUppercaseTyping,
         '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',
@@ -102,6 +120,7 @@ function syncModelValueFromTarget(target: EventTarget | null) {
       spellcheck="false"
       @blur="onFieldBlur"
       @click="onFieldClick"
+      @focus="onFieldFocus"
     />
 
     <FieldMessage

package/app/composables/useDevice.ts

@@ -1,5 +1,7 @@
 export default function useDevice() {
-  const { isNative } = useCapacitor()
+  const { isIOS, isNative } = useCapacitor()
+
+  const isIos = ref(false)
 
   const isDesktopBrowser = computed(() => {
     if (typeof navigator === 'undefined') {
@@ -18,5 +20,29 @@ export default function useDevice() {
     return !/Android|iPad|iPhone|iPod|Mobile/i.test(navigator.userAgent)
   })
 
-  return { isDesktopBrowser }
+  onMounted(() => {
+    isIos.value = detectIosDevice(isIOS.value)
+  })
+
+  return {
+    isDesktopBrowser,
+    isIos,
+  }
+}
+
+function detectIosDevice(isNativeIos: boolean) {
+  if (isNativeIos) {
+    return true
+  }
+
+  if (typeof navigator === 'undefined') {
+    return false
+  }
+
+  if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
+    return true
+  }
+
+  // iPadOS 13+ uses a Macintosh user agent. Several touch points separate it from a Mac.
+  return navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1
 }

package/app/types/fields.d.ts

@@ -179,6 +179,7 @@ export interface FieldSelect {
   searchPlaceholder?: string
   size?: FieldSize
   square?: boolean
+  uppercase?: boolean
   validation?: VuelidateValidation
 }
 

package/package.json

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