@saasmakers/ui 2.0.62 → 2.0.64

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 === '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 === '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/BaseAlert.vue

@@ -90,7 +90,7 @@ async function onClose(event: MouseEvent) {
         :color="buttonColor"
         :icon="getLayerIcon('closeCircle')"
         light
-        size="xs"
+        size="sm"
         :text="t('closeThisMessage')"
         @click="onClose"
       />

package/app/components/bases/BaseButton.vue

@@ -37,6 +37,20 @@ 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'
+    }
+    default: {
+      return 'sm'
+    }
+  }
+})
+
 function onClick(event: MouseEvent) {
   if (!props.loading) {
     if (props.confirmation) {
@@ -69,12 +83,9 @@ 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 +109,9 @@ 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 +129,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 +138,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/bases/BaseRing.vue

@@ -6,6 +6,7 @@ const props = withDefaults(defineProps<BaseRing>(), {
   completed: 0,
   dashed: false,
   format: 'count',
+  revealLabelOnHover: false,
   size: 'base',
   total: 0,
   transitionColors: false,
@@ -18,7 +19,7 @@ const emit = defineEmits<{
 const sizes = {
   base: {
     inset: 1,
-    size: 28,
+    size: 30,
     strokeWidth: 3,
   },
   lg: {
@@ -26,6 +27,11 @@ const sizes = {
     size: 36,
     strokeWidth: 4,
   },
+  sm: {
+    inset: 1,
+    size: 24,
+    strokeWidth: 2.5,
+  },
 } as const
 
 const geometry = computed(() => {
@@ -66,28 +72,6 @@ const centerLabel = computed(() => {
   return String(clampedCompleted.value)
 })
 
-const progressColor = computed(() => {
-  const progressPercentage = percentage.value
-
-  if (progressPercentage === 100) {
-    return 'var(--indigo-800)'
-  }
-
-  if (progressPercentage >= 75) {
-    return 'var(--indigo-700)'
-  }
-
-  if (progressPercentage >= 50) {
-    return 'var(--indigo-500)'
-  }
-
-  if (progressPercentage >= 25) {
-    return 'var(--indigo-400)'
-  }
-
-  return 'var(--indigo-300)'
-})
-
 // Visual gap (in viewBox units) between segments, widened for fewer steps.
 function gapForTotal(total: number) {
   if (total <= 4) {
@@ -164,7 +148,7 @@ function onClick(event: MouseEvent) {
 <template>
   <component
     :is="clickable ? 'button' : 'div'"
-    class="inline-flex"
+    class="group inline-flex"
     :aria-expanded="expanded"
     :aria-label="label"
     :class="{ 'cursor-pointer': clickable }"
@@ -183,14 +167,17 @@ function onClick(event: MouseEvent) {
         v-for="(arc, index) in ringArcs"
         :key="index"
         :class="{
-          'stroke-gray-300 dark:stroke-gray-700': !arc.filled,
+          'stroke-gray-200 dark:stroke-gray-800': !arc.filled,
+          'stroke-indigo-400 dark:stroke-indigo-600': arc.filled && percentage < 25,
+          'stroke-indigo-500 dark:stroke-indigo-500': arc.filled && percentage >= 25 && percentage < 50,
+          'stroke-indigo-600 dark:stroke-indigo-400': arc.filled && percentage >= 50 && percentage < 75,
+          'stroke-indigo-700 dark:stroke-indigo-300': arc.filled && percentage >= 75,
           'transition-[stroke] duration-150 motion-reduce:transition-none': transitionColors,
         }"
         :cx="geometry.center"
         :cy="geometry.center"
         fill="none"
         :r="geometry.radius"
-        :stroke="arc.filled ? progressColor : undefined"
         :stroke-dasharray="arc.dashArray"
         :stroke-dashoffset="arc.dashOffset"
         stroke-linecap="butt"
@@ -202,8 +189,10 @@ function onClick(event: MouseEvent) {
         v-if="centerLabel"
         class="fill-gray-600 font-bold tabular-nums dark:fill-gray-400"
         :class="{
-          'text-2xs': size === 'base',
+          'text-2xs': size === 'base' || size === 'sm',
           'text-3xs': size === 'lg',
+          'opacity-0 transition-opacity duration-150 motion-reduce:transition-none group-hover:opacity-100 group-focus-visible:opacity-100': revealLabelOnHover && !expanded,
+          'opacity-100': !revealLabelOnHover || expanded,
         }"
         dominant-baseline="central"
         text-anchor="middle"

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,12 +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'
 
@@ -306,6 +303,7 @@ export interface BaseRing {
   expanded?: boolean
   format?: BaseRingFormat
   label?: string
+  revealLabelOnHover?: boolean
   size?: BaseRingSize
   total?: number
   transitionColors?: boolean
@@ -319,7 +317,7 @@ export interface BaseRingArc {
 
 export type BaseRingFormat = 'count' | 'none' | 'percent'
 
-export type BaseRingSize = 'base' | 'lg'
+export type BaseRingSize = 'base' | 'lg' | 'sm'
 
 export interface BaseShortcut {
   active?: boolean

package/package.json

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