@saasmakers/ui 2.0.52 → 2.0.54

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 select-none flex-col items-center rounded-lg text-center transition-colors"
     :aria-busy="loading"
     :class="{
       'cursor-not-allowed opacity-50': disabled,

package/app/components/bases/BaseTag.vue

@@ -1,199 +1,24 @@
 <script lang="ts" setup>
-import { NuxtLinkLocale } from '#components'
 import type { BaseTag } from '../../types/bases'
 
-const props = withDefaults(defineProps<BaseTag>(), {
-  active: false,
-  avatar: '',
-  circle: '',
-  clickable: true,
-  color: 'black',
-  draggable: false,
-  editable: false,
-  icon: undefined,
-  iconSize: undefined,
-  id: undefined,
-  isCreation: false,
-  light: true,
-  removable: false,
-  rounded: false,
+withDefaults(defineProps<BaseTag>(), {
+  color: 'gray',
   size: 'base',
   text: '',
-  to: undefined,
-  truncate: false,
 })
-
-const emit = defineEmits<{
-  click: [event: MouseEvent, id?: number | string]
-  close: [event: MouseEvent, id?: number | string]
-  inputBlur: [event: FocusEvent, name: string, id?: number | string]
-  inputSubmit: [event: KeyboardEvent, name: string, id?: number | string]
-  remove: [event: MouseEvent, id?: number | string]
-}>()
-
-defineSlots<{
-  default?: () => VNode[]
-}>()
-
-const hovered = ref(false)
-const form = reactive({ name: '' })
-
-onBeforeMount(() => {
-  if (!props.isCreation) {
-    initializeFormForExistingTag()
-  }
-})
-
-function initializeFormForExistingTag() {
-  form.name = String(props.text)?.slice(1)
-}
-
-function onBlur() {
-  hovered.value = false
-}
-
-function onClick(event: MouseEvent) {
-  if (!props.removable) {
-    emit('click', event, props.id)
-  }
-}
-
-function onFocus() {
-  hovered.value = true
-}
-
-function onInputBlur(event: FocusEvent) {
-  emit('inputBlur', event, form.name.trim(), props.id)
-}
-
-function onInputSubmit(event: KeyboardEvent) {
-  emit('inputSubmit', event, form.name.trim(), props.id)
-}
-
-function onKeyDown(event: KeyboardEvent) {
-  if (props.clickable) {
-    (event.currentTarget as HTMLElement).click()
-  }
-}
-
-function onMouseEnter() {
-  hovered.value = true
-}
-
-function onMouseLeave() {
-  hovered.value = false
-}
-
-function onRemove(event: MouseEvent) {
-  emit('remove', event, props.id)
-}
 </script>
 
 <template>
   <span
-    class="flex select-none"
-    role="button"
-    :aria-disabled="!clickable"
-    tabindex="0"
-    @click.stop="onClick"
-    @keydown.enter.stop="onKeyDown"
-    @keydown.space.prevent.stop="onKeyDown"
-    @mouseenter="onMouseEnter"
-    @mouseleave="onMouseLeave"
-    @focusin="onFocus"
-    @focusout="onBlur"
+    class="pointer-events-none inline-flex rounded font-medium tracking-tight"
+    :class="{
+      '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',
+    }"
   >
-    <component
-      :is="to ? NuxtLinkLocale : 'span'"
-      class="inline-flex items-center border font-medium"
-      :class="{
-        'cursor-pointer': clickable,
-        'rounded-md': !rounded,
-        'rounded-full': rounded,
-        'border-gray-200 dark:border-gray-800 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200': (color === 'black' && light && !active) || removable,
-        'border-gray-900 dark:border-gray-100 bg-gray-900 dark:bg-gray-100 text-white dark:text-black': color === 'black' && (!light || active),
-        'border-gray-700 dark:border-gray-300 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300': color === 'gray' && light && !active,
-        'border-gray-800 dark:border-gray-200 bg-gray-800 dark:bg-gray-200 text-white dark:text-black': color === 'gray' && (!light || active),
-        'border-green-700 dark:border-green-300 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300': color === 'green' && light && !active,
-        'border-green-800 dark:border-green-200 bg-green-800 dark:bg-green-200 text-white dark:text-black': color === 'green' && (!light || active),
-        'border-indigo-700 dark:border-indigo-300 bg-indigo-100 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-300': color === 'indigo' && light && !active,
-        'border-indigo-800 dark:border-indigo-200 bg-indigo-800 dark:bg-indigo-200 text-white dark:text-black': color === 'indigo' && (!light || active),
-        'border-orange-700 dark:border-orange-300 bg-white dark:bg-gray-900 text-orange-700 dark:text-orange-300': color === 'orange' && light && !active,
-        'border-orange-800 dark:border-orange-200 bg-orange-800 dark:bg-orange-200 text-white dark:text-black': color === 'orange' && (!light || active),
-        'border-red-700 dark:border-red-300 bg-white dark:bg-gray-900 text-red-700 dark:text-red-300': color === 'red' && light && !active,
-        'border-red-800 dark:border-red-200 bg-red-800 dark:bg-red-200 text-white dark:text-black': color === 'red' && (!light || active),
-        'border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200': color === 'white' && light && !active,
-        'border-white dark:border-gray-900 text-white dark:text-black': color === 'white' && (!light || active),
-        'border-dashed border-gray-400 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200': color === 'white' && light && !active,
-        'py-0.5 px-1.5': size === 'xs',
-        'py-1.5 px-2.5': size === 'sm',
-        'py-2 px-3': size === 'base',
-      }"
-      :to="to"
-    >
-      <BaseIcon
-        v-if="draggable"
-        class="js-drag-handle mr-2 cursor-move"
-        clickable
-        color="gray"
-        :icon="getLayerIcon('drag')"
-      />
-
-      <span
-        v-if="avatar || circle || icon"
-        class="mr-1 flex items-center text-center"
-        :class="{
-          'h-2.5 w-2.5': size === 'xs' || size === 'sm' || iconSize === 2.5,
-          'h-3 w-3': size === 'base' || iconSize === 3,
-          'h-3.5 w-3.5': iconSize === 3.5,
-          'h-4 w-4': iconSize === 4,
-        }"
-      >
-        <BaseAvatar
-          v-if="avatar"
-          class="h-full w-full"
-          :shadow="false"
-          :src="avatar"
-        />
-
-        <BaseIcon
-          v-else-if="icon"
-          class="h-full w-full"
-          :icon="icon"
-        />
-      </span>
-
-      <span
-        v-if="$slots.default"
-        class="mr-1"
-      >
-        <slot />
-      </span>
-
-      <BaseText
-        v-if="!editable"
-        class="whitespace-nowrap outline-none"
-        :class="{ truncate }"
-        :size="size === 'xs' ? '3xs' : size === 'sm' ? '2xs' : 'xs'"
-        :text="text"
-      />
-
-      <FieldInput
-        v-else
-        v-model="form.name"
-        border="none"
-        class="w-16"
-        size="sm"
-        @blur="onInputBlur"
-        @submit="onInputSubmit"
-      />
-
-      <BaseIcon
-        v-if="removable"
-        class="ml-1.5 text-red-700 dark:text-red-300 hover:text-black dark:hover:text-white"
-        :icon="getLayerIcon('closeCircle')"
-        @click.prevent.stop="onRemove"
-      />
-    </component>
+    <slot>{{ text }}</slot>
   </span>
 </template>

package/app/components/bases/BaseTags.vue

@@ -1,289 +1,35 @@
 <script lang="ts" setup>
 import type { BaseTags } from '../../types/bases'
 
-const props = withDefaults(defineProps<Omit<BaseTags, 'modelValue'>>(), {
-  active: false,
-  clickable: true,
-  draggable: false,
-  editable: false,
-  hasBack: false,
-  hasCreation: false,
-  maxTags: Number.POSITIVE_INFINITY,
-  removable: false,
-  selectable: false,
-  selectableUnique: false,
+const props = withDefaults(defineProps<BaseTags>(), {
   size: 'base',
   tags: () => [],
   wrap: false,
 })
 
-const emit = defineEmits<{
-  attach: [event: MouseEvent, tagId?: number | string]
-  back: [event: MouseEvent]
-  click: [event: MouseEvent]
-  create: [event: FocusEvent | KeyboardEvent, name: string]
-  detach: [event: MouseEvent, tagId?: number | string]
-  remove: [event: MouseEvent, tagId?: number | string]
-  update: [event: FocusEvent | KeyboardEvent, name: string, tagId?: number | string]
-}>()
-
-const modelValue = defineModel<BaseTags['modelValue']>({ default: () => [] })
-const keyForTagCreation = ref(Date.now())
-const keyForTagUpdate = ref(Date.now())
-const root = ref<HTMLDivElement>()
-const showingAllTags = ref(false)
-const showingTagCreationField = ref(false)
-const { t } = useI18n()
-
-const sortedTags = computed({
-  get() {
-    return [...props.tags]
-      .filter((_tag, tagIndex) => tagIndex < props.maxTags || showingAllTags.value)
-      .toSorted((tagA, tagB) => {
-        return (tagA.order ?? 0) < (tagB.order ?? 0) ? -1 : 0
-      })
-  },
-
-  set(tags) {
-    const suiteForTags = tags
-      .map((tag, order) => ({
-        id: tag.id,
-        order,
-      }))
-      .map(tag => ({
-        id: tag.id,
-        order: tag.order,
-      }))
-
-    return suiteForTags
-  },
+const sortedTags = computed(() => {
+  return [...props.tags].toSorted((tagA, tagB) => {
+    return (tagA.order ?? 0) - (tagB.order ?? 0)
+  })
 })
-
-function onCreateTag(event: FocusEvent | KeyboardEvent, name: string) {
-  showingTagCreationField.value = false
-  keyForTagCreation.value = Date.now()
-
-  emit('create', event, name)
-}
-
-function onGoBack(event: MouseEvent) {
-  emit('back', event)
-}
-
-function onRemoveTag(event: MouseEvent, tagId?: number | string) {
-  emit('remove', event, tagId)
-}
-
-function onShowAllTags() {
-  showingAllTags.value = true
-}
-
-function onShowTagField() {
-  if (!showingTagCreationField.value) {
-    showingTagCreationField.value = true
-
-    nextTick(() => {
-      const element = root.value?.querySelector<HTMLInputElement>('input[type="text"]')
-
-      element?.focus()
-    })
-  }
-}
-
-function onTagClick(event: MouseEvent, tagId?: number | string) {
-  if (props.selectable && tagId) {
-    let value = [...modelValue.value]
-
-    if (value.includes(tagId)) {
-      value.splice(value.indexOf(tagId), 1)
-      emit('detach', event, tagId)
-    }
-    else if (props.selectableUnique) {
-      value = [tagId]
-
-      emit('attach', event, tagId)
-    }
-    else {
-      value.push(tagId)
-      emit('attach', event, tagId)
-    }
-
-    modelValue.value = value
-  }
-}
-
-function onUpdateTag(event: FocusEvent | KeyboardEvent, name: string, tagId?: number | string) {
-  if (name) {
-    emit('update', event, name, tagId)
-  }
-
-  else {
-    keyForTagUpdate.value = Date.now()
-  }
-}
 </script>
 
 <template>
   <div
-    ref="root"
     class="flex items-center"
     :class="{
-      'flex-wrap': wrap,
-      'w-full overflow-x-auto': !wrap,
-      '-mt-0.75 -ml-0.75': size === 'sm',
-      '-mt-1 -ml-1': size === 'base',
+      '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-if="hasBack"
-      key="BaseTagToGoBack"
-      :class="{
-        'm-0.75': size === 'sm',
-        'm-1': size === 'base',
-      }"
-      color="indigo"
-      :icon="getLayerIcon('back')"
-      :size="size"
-      :text="t('cancel')"
-      @click="onGoBack"
-    />
-
-    <BaseTag
-      v-if="hasCreation"
-      :key="keyForTagCreation"
-      :class="{
-        'm-0.75': size === 'sm',
-        'm-1': size === 'base',
-      }"
-      color="indigo"
-      :editable="showingTagCreationField"
-      :icon="showingTagCreationField ? getLayerIcon('tags') : getLayerIcon('plus')"
-      is-creation
-      :light="false"
-      :size="size"
-      :text="showingTagCreationField ? '' : t('newTag')"
-      @click="onShowTagField"
-      @input-blur="onCreateTag"
-      @input-submit="onCreateTag"
-    />
-
-    <div class="flex items-center">
-      <span
-        v-for="(tag, tagIndex) in sortedTags"
-        :key="tag.id ? `${tag.id}_${tag.order}_${keyForTagUpdate}` : tagIndex"
-        class="flex flex-wrap items-center"
-        :class="{
-          'm-0.75': size === 'sm',
-          'm-1': size === 'base',
-        }"
-      >
-        <template v-if="tag">
-          <BaseTag
-            :id="tag.id || tagIndex"
-            :key="`${tag.id}_${tagIndex}`"
-            :active="tag.id && modelValue.includes(tag.id) || tag.active"
-            :avatar="tag.avatar"
-            :circle="tag.circle"
-            :clickable="clickable"
-            :color="tag.color"
-            :draggable="draggable"
-            :editable="editable"
-            :icon="tag.icon"
-            :icon-size="tag.iconSize"
-            :light="tag.light"
-            :removable="removable"
-            :size="size"
-            :text="tag.text"
-            :to="tag.to"
-            @click="onTagClick"
-            @input-blur="onUpdateTag"
-            @input-submit="onUpdateTag"
-            @remove="onRemoveTag"
-          />
-        </template>
-      </span>
-    </div>
-
-    <BaseTag
-      v-if="tags.length > maxTags && !showingAllTags"
-      key="showMore"
-      :class="{
-        'm-0.75': size === 'sm',
-        'm-1': size === 'base',
-      }"
-      :size="size"
-      :text="t('showMore', { value: tags.length - maxTags })"
-      @click="onShowAllTags"
+      v-for="(tag, tagIndex) in sortedTags"
+      :key="tag.id ?? tagIndex"
+      :color="tag.color"
+      :size="tag.size ?? size"
+      :text="tag.text"
     />
   </div>
 </template>
-
-<i18n lang="json">
-{
-  "de": {
-    "cancel": "Abbrechen",
-    "newTag": "Neues Tag",
-    "showMore": "& {value} weiteres | & {value} weitere"
-  },
-  "en": {
-    "cancel": "Cancel",
-    "newTag": "New tag",
-    "showMore": "& {value} other | & {value} others"
-  },
-  "es": {
-    "cancel": "Cancelar",
-    "newTag": "Nueva etiqueta",
-    "showMore": "& {value} otro | & {value} otros"
-  },
-  "fr": {
-    "cancel": "Annuler",
-    "newTag": "Nouveau tag",
-    "showMore": "& {value} autre | & {value} autres"
-  },
-  "id": {
-    "cancel": "Batal",
-    "newTag": "Tag baru",
-    "showMore": "& {value} lainnya | & {value} lainnya"
-  },
-  "it": {
-    "cancel": "Annulla",
-    "newTag": "Nuovo tag",
-    "showMore": "& {value} altro | & {value} altri"
-  },
-  "ja": {
-    "cancel": "キャンセル",
-    "newTag": "新しいタグ",
-    "showMore": "& {value} その他 | & {value} その他"
-  },
-  "ko": {
-    "cancel": "취소",
-    "newTag": "새 태그",
-    "showMore": "& {value}개 더 | & {value}개 더"
-  },
-  "nl": {
-    "cancel": "Annuleren",
-    "newTag": "Nieuwe tag",
-    "showMore": "& {value} andere | & {value} anderen"
-  },
-  "pl": {
-    "cancel": "Anuluj",
-    "newTag": "Nowy tag",
-    "showMore": "& {value} inny | & {value} innych"
-  },
-  "pt": {
-    "cancel": "Cancelar",
-    "newTag": "Nova etiqueta",
-    "showMore": "& {value} outro | & {value} outros"
-  },
-  "pt-BR": {
-    "cancel": "Cancelar",
-    "newTag": "Nova tag",
-    "showMore": "& {value} outro | & {value} outros"
-  },
-  "vi": {
-    "cancel": "Hủy",
-    "newTag": "Thẻ mới",
-    "showMore": "& {value} mục khác | & {value} mục khác"
-  }
-}
-</i18n>

package/app/types/bases.d.ts

@@ -328,41 +328,21 @@ export interface BaseSpinner {
 export type BaseStatus = | 'error' | 'info' | 'success' | 'warning'
 
 export interface BaseTag {
-  active?: boolean
-  avatar?: string
-  circle?: string
-  clickable?: boolean
-  color?: BaseColor
-  draggable?: boolean
-  editable?: boolean
-  icon?: string
-  iconSize?: number
-  id?: number
-  isCreation?: boolean
-  light?: boolean
-  order?: number
-  removable?: boolean
-  rounded?: boolean
+  color?: BaseTagColor
   size?: BaseTagSize
-  text: BaseTextText
-  to?: RouteLocationNamedI18n
-  truncate?: boolean
+  text?: BaseTextText
+}
+
+export type BaseTagColor = 'gray' | 'orange'
+
+export interface BaseTagItem extends BaseTag {
+  id?: number | string
+  order?: number
 }
 
 export interface BaseTags {
-  active?: boolean
-  clickable?: boolean
-  draggable?: boolean
-  editable?: boolean
-  hasBack?: boolean
-  hasCreation?: boolean
-  maxTags?: number
-  modelValue: (number | string)[]
-  removable?: boolean
-  selectable?: boolean
-  selectableUnique?: boolean
   size?: BaseTagSize
-  tags: BaseTag[]
+  tags?: BaseTagItem[]
   wrap?: boolean
 }
 

package/app/types/global.d.ts

@@ -69,6 +69,8 @@ declare global {
   type BaseSpinner = import('./bases').BaseSpinner
   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

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