@saasmakers/ui 2.1.3 → 2.1.4

package/app/components/fields/FieldInput.vue

@@ -46,6 +46,7 @@ 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 iosUppercaseTyping = computed(() => {
@@ -54,6 +55,10 @@ const iosUppercaseTyping = computed(() => {
   return props.uppercase && isIos.value && isProseField && !props.lowercaseOnly && !props.slugOnly
 })
 
+const hideCssUppercase = computed(() => {
+  return iosUppercaseTyping.value && focused.value
+})
+
 onMounted(() => {
   if (props.autofocus && input.value && isDesktopBrowser.value) {
     input.value.focus()
@@ -73,6 +78,8 @@ function focus() {
 }
 
 function onFieldBlur(event: FocusEvent) {
+  focused.value = false
+
   syncModelValueFromTarget(event.target)
 
   if (props.trim) {
@@ -91,6 +98,8 @@ function onFieldFocus(event: FocusEvent) {
     }
   }
 
+  focused.value = true
+
   emit('focus', event)
 }
 
@@ -211,8 +220,8 @@ defineExpose({
           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 && !iosUppercaseTyping,
-            'placeholder:uppercase': iosUppercaseTyping,
+            'uppercase': uppercase && !hideCssUppercase,
+            'placeholder:uppercase': hideCssUppercase,
             '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/FieldTextarea.vue

@@ -30,12 +30,17 @@ 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 iosUppercaseTyping = computed(() => {
   return props.uppercase && isIos.value
 })
 
+const hideCssUppercase = computed(() => {
+  return iosUppercaseTyping.value && focused.value
+})
+
 onMounted(() => {
   if (props.autofocus && textarea.value && isDesktopBrowser.value) {
     textarea.value.focus()
@@ -43,6 +48,8 @@ onMounted(() => {
 })
 
 function onFieldBlur(event: FocusEvent) {
+  focused.value = false
+
   syncModelValueFromTarget(event.target)
   emit('blur', event, modelValue.value || '')
 }
@@ -52,15 +59,15 @@ function onFieldClick(event: MouseEvent) {
 }
 
 function onFieldFocus() {
-  if (!iosUppercaseTyping.value) {
-    return
-  }
-
-  const uppercased = modelValue.value.toString().toUpperCase()
+  if (iosUppercaseTyping.value) {
+    const uppercased = modelValue.value.toString().toUpperCase()
 
-  if (uppercased !== modelValue.value) {
-    modelValue.value = uppercased
+    if (uppercased !== modelValue.value) {
+      modelValue.value = uppercased
+    }
   }
+
+  focused.value = true
 }
 
 function syncModelValueFromTarget(target: EventTarget | null) {
@@ -96,8 +103,8 @@ function syncModelValueFromTarget(target: EventTarget | null) {
       :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 && !iosUppercaseTyping,
-        'placeholder:uppercase': iosUppercaseTyping,
+        'uppercase': uppercase && !hideCssUppercase,
+        'placeholder:uppercase': hideCssUppercase,
         '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',

package/app/composables/useDevice.ts

@@ -1,6 +1,5 @@
 export default function useDevice() {
   const { isIOS, isNative } = useCapacitor()
-
   const isIos = ref(false)
 
   const isDesktopBrowser = computed(() => {

package/package.json

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