@saasmakers/ui 2.0.62 → 2.0.63

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,7 +67,6 @@ function focus() {
 }
 
 function onFieldBlur(event: FocusEvent) {
-  // iOS keyboard paste can update the DOM without firing `input` before blur
   syncModelValueFromTarget(event.target)
 
   if (props.trim) {
@@ -86,7 +85,6 @@ function onFieldInput(event: Event) {
 }
 
 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
@@ -136,24 +134,20 @@ function syncModelValueFromTarget(target: EventTarget | null) {
     return
   }
 
-  modelValue.value = transformFieldValue(target.value)
-}
-
-function transformFieldValue(value: string) {
-  let nextValue = value
+  let value = target.value
 
-  if (props.type === 'number' && props.max && Number.parseInt(nextValue) > props.max) {
-    nextValue = props.max.toString()
+  if (props.type === 'number' && props.max && Number.parseInt(value) > props.max) {
+    value = props.max.toString()
   }
 
   if (props.slugOnly) {
-    nextValue = nextValue.toString().toLowerCase().replace(/[^a-z0-9_-]/g, '')
+    value = value.toString().toLowerCase().replace(/[^a-z0-9_-]/g, '')
   }
   else if (props.lowercaseOnly) {
-    nextValue = nextValue.toString().toLowerCase()
+    value = value.toString().toLowerCase()
   }
 
-  return nextValue
+  modelValue.value = value
 }
 
 defineExpose({

package/app/components/fields/FieldTextarea.vue

@@ -39,7 +39,6 @@ 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 || '')
 }

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.62",
+  "version": "2.0.63",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",