@saasmakers/ui 2.0.53 → 2.0.55

package/app/components/auth/AuthEmailConnect.vue

@@ -20,6 +20,17 @@ const turnstile = ref<{
   reset: () => void
 }>()
 
+const turnstileConfig = {
+  // Cloudflare Turnstile keeps internal requests in-flight (e.g. clearance redemption). When the
+  // widget errors we swallow it here so it does not surface as an unhandled rejection.
+  options: { 'error-callback': () => true },
+
+  // The wrapper's default 250s auto-reset re-runs the challenge while the user is idle, which aborts
+  // in-flight requests (surfaces as "The operation was cancelled." on WebKit). Disable it and rely
+  // on Turnstile's own refresh-expired handling instead.
+  resetInterval: 1000 * 60 * 60 * 24,
+}
+
 const { t } = useI18n()
 
 const form = reactive({
@@ -87,6 +98,7 @@ async function onLogin() {
 
       if (result.isClosed) {
         emit('accountClosed', result.email ?? '')
+        resetTurnstile()
       }
       else {
         v$.value.$reset()
@@ -95,12 +107,10 @@ async function onLogin() {
   }
   catch (error) {
     console.error(error)
+
+    resetTurnstile()
   }
   finally {
-    form.captchaToken = ''
-
-    turnstile.value?.reset()
-
     loggingWithEmail.value = false
   }
 }
@@ -110,6 +120,12 @@ function onUpdateCurrentWindow(newCurrentWindow: AuthEmailConnectCurrentWindow)
 
   v$.value.$reset()
 }
+
+function resetTurnstile() {
+  form.captchaToken = ''
+
+  turnstile.value?.reset()
+}
 </script>
 
 <template>
@@ -165,6 +181,8 @@ function onUpdateCurrentWindow(newCurrentWindow: AuthEmailConnectCurrentWindow)
       <NuxtTurnstile
         ref="turnstile"
         v-model="form.captchaToken"
+        :options="turnstileConfig.options"
+        :reset-interval="turnstileConfig.resetInterval"
       />
     </div>
 

package/app/components/bases/BaseAction.vue

@@ -44,7 +44,7 @@ function onClick(event: MouseEvent) {
 
 <template>
   <button
-    class="relative flex flex-col items-center rounded-lg text-center transition-colors"
+    class="relative flex flex-col select-none items-center rounded-lg text-center transition-colors"
     :aria-busy="loading"
     :class="{
       'cursor-not-allowed opacity-50': disabled,

package/app/components/bases/BaseCircle.vue

@@ -8,10 +8,10 @@ withDefaults(defineProps<BaseCircle>(), { color: 'indigo' })
   <span
     class="inline-block size-2.5 shrink-0 rounded-full"
     :class="{
-      'bg-red-500': color === 'red',
-      'bg-amber-500': color === 'amber',
-      'bg-indigo-500': color === 'indigo',
-      'bg-green-500': color === 'green',
+      'bg-red-600 dark:bg-red-400': color === 'red',
+      'bg-amber-600 dark:bg-amber-400': color === 'amber',
+      'bg-indigo-600 dark:bg-indigo-400': color === 'indigo',
+      'bg-green-600 dark:bg-green-400': color === 'green',
     }"
   />
 </template>

package/app/components/bases/BaseTag.vue

@@ -15,8 +15,10 @@ withDefaults(defineProps<BaseTag>(), {
       'px-0.5 py-px text-3xs': size === 'xs',
       'px-1 py-px text-3xs': size === 'sm',
       'px-1.5 py-0.5 text-2xs': size === 'base',
-      'bg-orange-100 text-orange-700 dark:bg-orange-950 dark:text-orange-300': color === 'orange',
-      'bg-gray-200 text-gray-600 dark:bg-gray-800 dark:text-gray-400': color === 'gray',
+      'bg-orange-500/15 text-orange-800 dark:text-orange-300': color === 'orange',
+      'bg-indigo-500/15 text-indigo-800 dark:text-indigo-300': color === 'indigo',
+      'bg-green-500/15 text-green-800 dark:text-green-300': color === 'green',
+      'bg-gray-500/20 text-gray-700 dark:text-gray-300': color === 'gray',
     }"
   >
     <slot>{{ text }}</slot>

package/app/components/bases/BaseTags.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { BaseTags } from '../../types/bases'
+
+const props = withDefaults(defineProps<BaseTags>(), {
+  size: 'base',
+  tags: () => [],
+  wrap: false,
+})
+
+const sortedTags = computed(() => {
+  return [...props.tags].toSorted((tagA, tagB) => {
+    return (tagA.order ?? 0) - (tagB.order ?? 0)
+  })
+})
+</script>
+
+<template>
+  <div
+    class="flex items-center"
+    :class="{
+      'flex-wrap gap-1': wrap && size !== 'base',
+      'flex-wrap gap-1.5': wrap && size === 'base',
+      'w-full gap-1 overflow-x-auto': !wrap && size !== 'base',
+      'w-full gap-1.5 overflow-x-auto': !wrap && size === 'base',
+    }"
+  >
+    <BaseTag
+      v-for="(tag, tagIndex) in sortedTags"
+      :key="tag.id ?? tagIndex"
+      :color="tag.color"
+      :size="tag.size ?? size"
+      :text="tag.text"
+    />
+  </div>
+</template>

package/app/types/bases.d.ts

@@ -127,16 +127,6 @@ export interface BaseCircle {
 
 export type BaseCircleColor = 'amber' | 'green' | 'indigo' | 'red'
 
-export interface BaseTag {
-  color?: BaseTagColor
-  size?: BaseTagSize
-  text?: BaseTextText
-}
-
-export type BaseTagColor = 'gray' | 'orange'
-
-export type BaseTagSize = 'base' | 'sm' | 'xs'
-
 export type BaseColor
   = | 'black'
     | 'gray'
@@ -337,6 +327,27 @@ export interface BaseSpinner {
 
 export type BaseStatus = | 'error' | 'info' | 'success' | 'warning'
 
+export interface BaseTag {
+  color?: BaseTagColor
+  size?: BaseTagSize
+  text?: BaseTextText
+}
+
+export type BaseTagColor = 'gray' | 'green' | 'indigo' | 'orange'
+
+export interface BaseTagItem extends BaseTag {
+  id?: number | string
+  order?: number
+}
+
+export interface BaseTags {
+  size?: BaseTagSize
+  tags?: BaseTagItem[]
+  wrap?: boolean
+}
+
+export type BaseTagSize = 'base' | 'sm' | 'xs'
+
 export interface BaseText {
   alignment?: BaseAlignment
   background?: BaseBackground

package/app/types/global.d.ts

@@ -70,6 +70,8 @@ declare global {
   type BaseStatus = import('./bases').BaseStatus
   type BaseTag = import('./bases').BaseTag
   type BaseTagColor = import('./bases').BaseTagColor
+  type BaseTagItem = import('./bases').BaseTagItem
+  type BaseTags = import('./bases').BaseTags
   type BaseTagSize = import('./bases').BaseTagSize
   type BaseText = import('./bases').BaseText
   type BaseTextText = import('./bases').BaseTextText

package/app/utils/auth.ts

@@ -1,3 +1,23 @@
+export function isRequestCancellation(error: unknown): boolean {
+  if (!error || typeof error !== 'object') {
+    return false
+  }
+
+  const candidate = error as {
+    code?: number
+    message?: string
+    name?: string
+  }
+
+  // WebKit (Safari/iOS/WKWebView) rejects aborted requests with NSURLErrorCancelled (-999) and this
+  // exact message when Turnstile's in-flight request is torn down on navigate/unmount after login.
+  return (
+    candidate.name === 'AbortError'
+    || candidate.code === -999
+    || candidate.message === 'The operation was cancelled.'
+  )
+}
+
 export function isSocialLoginCancellation(error: unknown): boolean {
   if (!error || typeof error !== 'object') {
     return false

package/package.json

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