@saasmakers/ui 2.0.61 → 2.0.63

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/auth/AuthEmailConnect.vue

@@ -215,6 +215,7 @@ function resetTurnstile() {
         full-width
         :loading="forgettingPassword"
         reverse
+        :size="size"
         :text="{
           sm: t('buttons.forgotPassword.sm'),
           base: t('buttons.forgotPassword.base'),

package/app/components/auth/AuthSocialConnect.vue

@@ -141,14 +141,23 @@ function processGoogleCallback(event: MessageEvent) {
     <img
       v-if="provider === 'apple'"
       :alt="t('appleLogo')"
-      class="mr-2.5 w-4.5 dark:invert"
+      class="dark:invert"
+      :class="{
+        'mr-2 w-4': size === 'xs' || size === 'sm',
+        'mr-2.5 w-4.5': size === 'base',
+        'mr-2.5 w-5': size === 'lg',
+      }"
       src="/images/auth/AuthSocialConnect/apple.svg"
     >
 
     <img
       v-else-if="provider === 'google'"
       :alt="t('googleLogo')"
-      class="mr-2.5 w-5"
+      :class="{
+        'mr-2 w-4': size === 'xs' || size === 'sm',
+        'mr-2.5 w-4.5': size === 'base',
+        'mr-2.5 w-5': size === 'lg',
+      }"
       src="/images/auth/AuthSocialConnect/google.svg"
     >
   </BaseButton>

package/app/components/bases/BaseButton.vue

@@ -37,6 +37,23 @@ const hasFixedSize = computed(() => {
   return props.shape === 'square' || props.shape === 'circle'
 })
 
+const contentSize = computed((): BaseSize => {
+  switch (props.size) {
+    case 'lg': {
+      return 'base'
+    }
+    case 'sm': {
+      return 'xs'
+    }
+    case 'xs': {
+      return '2xs'
+    }
+    default: {
+      return 'sm'
+    }
+  }
+})
+
 function onClick(event: MouseEvent) {
   if (!props.loading) {
     if (props.confirmation) {
@@ -69,12 +86,10 @@ function onClick(event: MouseEvent) {
       'shadow-sm': !light,
       'rounded-lg': shape !== 'circle',
       'rounded-full': shape === 'circle',
-      'h-6 w-6': size === '2xs' && hasFixedSize,
       'h-8 w-8': size === 'xs' && hasFixedSize && !confirming,
       'h-10 w-10': size === 'sm' && hasFixedSize && !confirming,
       'h-12 w-12': size === 'base' && hasFixedSize && !confirming,
       'h-14 w-14': size === 'lg' && hasFixedSize && !confirming,
-      'h-16 w-16': size === 'xl' && hasFixedSize && !confirming,
       'border-gray-900 dark:border-gray-100 bg-gray-900 dark:bg-gray-100 text-white dark:text-black': color === 'black' && !light,
       'hover:bg-black dark:hover:bg-white hover:text-white dark:hover:text-black': color === 'black' && !light && !disabled && !loading,
       'border-gray-900 dark:border-gray-100 text-gray-900 dark:text-gray-100': color === 'black' && light,
@@ -98,12 +113,10 @@ function onClick(event: MouseEvent) {
       'border-white dark:border-gray-900 text-white dark:text-black': color === 'white' && light,
       'hover:border-black dark:hover:border-white hover:text-black dark:hover:text-white': color !== 'white' && light && !disabled && !loading,
       'hover:bg-white dark:hover:bg-gray-900 hover:text-gray-800 dark:hover:text-gray-200': color === 'white' && light && !disabled && !loading,
-      'h-6 px-3': size === '2xs' && (!hasFixedSize || confirming),
       'h-8 px-4': size === 'xs' && (!hasFixedSize || confirming),
       'h-10 px-5': size === 'sm' && (!hasFixedSize || confirming),
       'h-12 px-6': size === 'base' && (!hasFixedSize || confirming),
-      'h-13 px-6.5': size === 'lg' && (!hasFixedSize || confirming),
-      'h-14 px-7': size === 'xl' && (!hasFixedSize || confirming),
+      'h-14 px-6.5': size === 'lg' && (!hasFixedSize || confirming),
     }"
     :disabled="disabled"
     :to="to"
@@ -121,7 +134,7 @@ function onClick(event: MouseEvent) {
         :color="iconColor"
         :icon="confirming ? undefined : icon"
         :reverse="reverse"
-        :size="size"
+        :size="contentSize"
         :text="confirming ? t('confirm') : text"
       />
     </span>
@@ -130,7 +143,7 @@ function onClick(event: MouseEvent) {
       v-if="loading"
       class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
       :color="!background ? 'black' : light ? color : color === 'white' ? 'indigo' : 'white'"
-      :size="size"
+      :size="contentSize"
     />
   </component>
 </template>

package/app/components/fields/FieldInput.vue

@@ -67,6 +67,8 @@ function focus() {
 }
 
 function onFieldBlur(event: FocusEvent) {
+  syncModelValueFromTarget(event.target)
+
   if (props.trim) {
     modelValue.value = modelValue.value.toString().trim()
   }
@@ -79,23 +81,12 @@ 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) {
+  syncModelValueFromTarget(event.target)
+
   const value = (event.target as HTMLInputElement).value
 
   if (['Control', 'Escape'].includes(event.key)) {
@@ -138,6 +129,27 @@ function onTogglePasswordVisibility() {
   showPassword.value = !showPassword.value
 }
 
+function syncModelValueFromTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLInputElement)) {
+    return
+  }
+
+  let value = target.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
+}
+
 defineExpose({
   blur,
   focus,

package/app/components/fields/FieldTextarea.vue

@@ -39,12 +39,21 @@ onMounted(() => {
 })
 
 function onFieldBlur(event: FocusEvent) {
+  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/app/types/bases.d.ts

@@ -71,11 +71,9 @@ export interface BaseButton {
 export type BaseButtonShape = 'circle' | 'default' | 'square'
 
 export type BaseButtonSize
-  = | '2xs'
-    | 'base'
+  = | 'base'
     | 'lg'
     | 'sm'
-    | 'xl'
     | 'xs'
 
 export type BaseButtonType = 'button' | 'reset' | 'submit'

package/package.json

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