@saasmakers/ui 2.0.60 → 2.0.61

package/app/components/bases/BaseRing.vue

@@ -0,0 +1,217 @@
+<script lang="ts" setup>
+import type { BaseRing } from '../../types/bases'
+
+const props = withDefaults(defineProps<BaseRing>(), {
+  clickable: false,
+  completed: 0,
+  dashed: false,
+  format: 'count',
+  size: 'base',
+  total: 0,
+  transitionColors: false,
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const sizes = {
+  base: {
+    inset: 1,
+    size: 28,
+    strokeWidth: 3,
+  },
+  lg: {
+    inset: 0,
+    size: 36,
+    strokeWidth: 4,
+  },
+} as const
+
+const geometry = computed(() => {
+  const { inset, size, strokeWidth } = sizes[props.size]
+  const center = size / 2
+  const radius = center - strokeWidth / 2 - inset
+
+  return {
+    center,
+    circumference: 2 * Math.PI * radius,
+    radius,
+    size,
+    strokeWidth,
+  }
+})
+
+const clampedCompleted = computed(() => {
+  return Math.max(0, Math.min(props.completed, props.total))
+})
+
+const percentage = computed(() => {
+  if (props.total <= 0) {
+    return 0
+  }
+
+  return Math.round((clampedCompleted.value / props.total) * 100)
+})
+
+const centerLabel = computed(() => {
+  if (props.format === 'none' || props.total <= 0) {
+    return undefined
+  }
+
+  if (props.format === 'percent') {
+    return `${percentage.value}%`
+  }
+
+  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) {
+    return 3
+  }
+
+  if (total <= 6) {
+    return 2.5
+  }
+
+  return 2
+}
+
+const ringArcs = computed(() => {
+  const arcs: BaseRingArc[] = []
+  const { circumference } = geometry.value
+  const completed = clampedCompleted.value
+  const { total } = props
+
+  if (total <= 0) {
+    arcs.push({
+      dashArray: props.dashed ? '3 3' : undefined,
+      filled: false,
+    })
+
+    return arcs
+  }
+
+  if (completed === total) {
+    arcs.push({ filled: true })
+
+    return arcs
+  }
+
+  // Beyond 8 steps individual segments become too thin, so we collapse them
+  // into a single continuous progress arc.
+  if (total > 8) {
+    const progressLength = (circumference * completed) / total
+
+    arcs.push(
+      { filled: false },
+      {
+        dashArray: `${progressLength} ${circumference}`,
+        dashOffset: '0',
+        filled: true,
+      },
+    )
+
+    return arcs
+  }
+
+  const gap = gapForTotal(total)
+  const arcPerSegment = circumference / total
+  const segmentLength = Math.max(arcPerSegment - gap, 0)
+
+  for (let index = 0; index < total; index += 1) {
+    arcs.push({
+      dashArray: `${segmentLength} ${circumference - segmentLength}`,
+      dashOffset: `${-index * arcPerSegment}`,
+      filled: index < completed,
+    })
+  }
+
+  return arcs
+})
+
+function onClick(event: MouseEvent) {
+  if (props.clickable) {
+    emit('click', event)
+  }
+}
+</script>
+
+<template>
+  <component
+    :is="clickable ? 'button' : 'div'"
+    class="inline-flex"
+    :aria-expanded="expanded"
+    :aria-label="label"
+    :class="{ 'cursor-pointer': clickable }"
+    :type="clickable ? 'button' : undefined"
+    @click="onClick"
+  >
+    <svg
+      class="size-full"
+      :height="geometry.size"
+      :viewBox="`0 0 ${geometry.size} ${geometry.size}`"
+      :width="geometry.size"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <circle
+        v-for="(arc, index) in ringArcs"
+        :key="index"
+        :class="{
+          'stroke-gray-300 dark:stroke-gray-700': !arc.filled,
+          '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"
+        :stroke-width="geometry.strokeWidth"
+        :transform="`rotate(-90 ${geometry.center} ${geometry.center})`"
+      />
+
+      <text
+        v-if="centerLabel"
+        class="fill-gray-600 font-bold tabular-nums dark:fill-gray-400"
+        :class="{
+          'text-2xs': size === 'base',
+          'text-3xs': size === 'lg',
+        }"
+        dominant-baseline="central"
+        text-anchor="middle"
+        :x="geometry.center"
+        :y="geometry.center"
+      >
+        {{ centerLabel }}
+      </text>
+    </svg>
+  </component>
+</template>

package/app/components/fields/FieldCombobox.vue

@@ -28,17 +28,18 @@ const id = useId()
 const listId = `${id}-list`
 const modelValue = defineModel<Item[]>({ default: () => [] })
 const inputRef = ref<HTMLInputElement>()
+const listRef = ref<HTMLElement>()
 const opened = ref(false)
 const searchRaw = ref('')
 const highlightedIndex = ref(0)
 
 const filteredItems = computed(() => {
-  const selectedKeys = new Set(modelValue.value.map(item => keyOf(item)))
-  const availableItems = props.items.filter(item => !selectedKeys.has(keyOf(item)))
+  const selectedKeys = new Set(modelValue.value.map(item => getItemKey(item)))
+  const availableItems = props.items.filter(item => !selectedKeys.has(getItemKey(item)))
   const searchQuery = normalizeText(searchRaw.value.trim())
 
   return searchQuery
-    ? availableItems.filter(item => normalizeText(labelOf(item)).includes(searchQuery))
+    ? availableItems.filter(item => normalizeText(getItemText(item)).includes(searchQuery))
     : availableItems
 })
 
@@ -48,13 +49,13 @@ const canCreate = computed(() => {
   if (props.allowCreate && trimmed) {
     const normalizedInput = normalizeText(trimmed)
 
-    return !props.items.some(item => normalizeText(labelOf(item)) === normalizedInput)
+    return !props.items.some(item => normalizeText(getItemText(item)) === normalizedInput)
   }
 
   return false
 })
 
-const createIndex = computed(() => {
+const createOptionIndex = computed(() => {
   return canCreate.value ? filteredItems.value.length : -1
 })
 
@@ -70,22 +71,164 @@ watch([filteredItems, canCreate], () => {
   }
 })
 
-function keyOf(item: Item) {
+function getItemKey(item: Item) {
   return typeof props.itemKey === 'function' ? props.itemKey(item) : String(readField(item, props.itemKey))
 }
 
-function labelOf(item: Item) {
+function getItemText(item: Item) {
   return typeof props.itemLabel === 'function'
     ? props.itemLabel(item)
     : String(readField(item, props.itemLabel) ?? '')
 }
 
-function onArrowDown() {
-  highlightedIndex.value = Math.min(highlightedIndex.value + 1, optionsCount.value - 1)
+function getOptionElements() {
+  if (!listRef.value) {
+    return []
+  }
+
+  return Array.from(listRef.value.querySelectorAll<HTMLElement>('[role="option"]'))
 }
 
-function onArrowUp() {
-  highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0)
+function getOptionRects() {
+  return getOptionElements().map((element, index) => ({
+    index,
+    rect: element.getBoundingClientRect(),
+  }))
+}
+
+async function moveHighlight(direction: 'down' | 'left' | 'right' | 'up') {
+  const optionRects = getOptionRects()
+
+  if (optionRects.length === 0) {
+    return
+  }
+
+  const currentIndex = Math.min(highlightedIndex.value, optionRects.length - 1)
+  const current = optionRects[currentIndex]!
+
+  if (direction === 'left' || direction === 'right') {
+    const sameRowOptions = optionRects.filter((option) => {
+      return Math.abs(option.rect.top - current.rect.top) <= Math.min(option.rect.height, current.rect.height) / 2
+    })
+
+    if (direction === 'right') {
+      const rightOptions = sameRowOptions
+        .filter(option => option.rect.left > current.rect.left + 1)
+        .sort((first, second) => first.rect.left - second.rect.left)
+
+      if (rightOptions.length > 0) {
+        highlightedIndex.value = rightOptions[0]!.index
+      }
+      else {
+        const nextRowOptions = optionRects
+          .filter(option => option.rect.top > current.rect.bottom - 1)
+          .sort((first, second) => first.rect.top - second.rect.top || first.rect.left - second.rect.left)
+
+        if (nextRowOptions.length > 0) {
+          const nextRowTop = nextRowOptions[0]!.rect.top
+          const firstInNextRow = nextRowOptions.find(option => Math.abs(option.rect.top - nextRowTop) <= 4)
+
+          if (firstInNextRow) {
+            highlightedIndex.value = firstInNextRow.index
+          }
+        }
+      }
+    }
+    else {
+      const leftOptions = sameRowOptions
+        .filter(option => option.rect.right < current.rect.right - 1)
+        .sort((first, second) => second.rect.left - first.rect.left)
+
+      if (leftOptions.length > 0) {
+        highlightedIndex.value = leftOptions[0]!.index
+      }
+      else {
+        const previousRowOptions = optionRects
+          .filter(option => option.rect.bottom < current.rect.top + 1)
+          .sort((first, second) => second.rect.top - first.rect.top || second.rect.left - first.rect.left)
+
+        if (previousRowOptions.length > 0) {
+          const previousRowTop = previousRowOptions[0]!.rect.top
+
+          const lastInPreviousRow = previousRowOptions
+            .filter(option => Math.abs(option.rect.top - previousRowTop) <= 4)
+            .sort((first, second) => second.rect.left - first.rect.left)[0]
+
+          if (lastInPreviousRow) {
+            highlightedIndex.value = lastInPreviousRow.index
+          }
+        }
+      }
+    }
+  }
+  else {
+    const currentCenterX = current.rect.left + current.rect.width / 2
+
+    const rowOptions = optionRects.filter((option) => {
+      if (direction === 'down') {
+        return option.rect.top > current.rect.top + 1
+      }
+
+      return option.rect.bottom < current.rect.bottom - 1
+    })
+
+    if (rowOptions.length === 0) {
+      return
+    }
+
+    const targetRowTop = direction === 'down'
+      ? Math.min(...rowOptions.map(option => option.rect.top))
+      : Math.max(...rowOptions.map(option => option.rect.top))
+
+    const targetRowOptions = rowOptions.filter(option => Math.abs(option.rect.top - targetRowTop) <= 4)
+
+    let closestIndex: number | undefined
+    let closestDist: number | undefined
+
+    for (const option of targetRowOptions) {
+      const centerX = option.rect.left + option.rect.width / 2
+      const dist = Math.abs(centerX - currentCenterX)
+
+      if (closestDist === undefined || dist < closestDist) {
+        closestDist = dist
+        closestIndex = option.index
+      }
+    }
+
+    if (closestIndex !== undefined) {
+      highlightedIndex.value = closestIndex
+    }
+  }
+
+  await nextTick()
+
+  getOptionElements()[highlightedIndex.value]?.scrollIntoView({
+    block: 'nearest',
+    inline: 'nearest',
+  })
+}
+
+async function onArrowKey(event: KeyboardEvent, direction: 'down' | 'left' | 'right' | 'up') {
+  if (optionsCount.value === 0) {
+    return
+  }
+
+  if (direction === 'left' || direction === 'right') {
+    const input = inputRef.value
+    const cursorAtStart = input ? input.selectionStart === 0 && input.selectionEnd === 0 : true
+
+    const cursorAtEnd = input
+      ? input.selectionStart === input.value.length && input.selectionEnd === input.value.length
+      : true
+
+    if (searchRaw.value.length > 0 && ((direction === 'left' && !cursorAtStart) || (direction === 'right' && !cursorAtEnd))) {
+      return
+    }
+  }
+
+  event.preventDefault()
+
+  await moveHighlight(direction)
 }
 
 function onBackspace() {
@@ -102,7 +245,7 @@ function onClose() {
   }
 }
 
-function onCreate() {
+async function onCreate() {
   const label = searchRaw.value.trim()
 
   if (label) {
@@ -112,13 +255,15 @@ function onCreate() {
     searchRaw.value = ''
     highlightedIndex.value = 0
 
-    nextTick(() => inputRef.value?.focus())
+    await nextTick()
+
+    inputRef.value?.focus()
   }
 }
 
 function onEnter() {
   if (optionsCount.value > 0) {
-    if (highlightedIndex.value === createIndex.value) {
+    if (highlightedIndex.value === createOptionIndex.value) {
       onCreate()
     }
     else {
@@ -135,30 +280,32 @@ function onHighlight(index: number) {
   highlightedIndex.value = index
 }
 
-function onOpen() {
+async function onOpen() {
   if (!props.disabled && !opened.value) {
     opened.value = true
     highlightedIndex.value = 0
 
-    nextTick(() => {
-      inputRef.value?.focus()
-      inputRef.value?.scrollIntoView({ block: 'nearest' })
-    })
+    await nextTick()
+
+    inputRef.value?.focus()
+    inputRef.value?.scrollIntoView({ block: 'nearest' })
   }
 }
 
 function onRemove(item: Item) {
-  const removedKey = keyOf(item)
+  const removedKey = getItemKey(item)
 
-  modelValue.value = modelValue.value.filter(current => keyOf(current) !== removedKey)
+  modelValue.value = modelValue.value.filter(current => getItemKey(current) !== removedKey)
 }
 
-function onSelect(item: Item) {
+async function onSelect(item: Item) {
   modelValue.value = [...modelValue.value, item]
   searchRaw.value = ''
   highlightedIndex.value = 0
 
-  nextTick(() => inputRef.value?.focus())
+  await nextTick()
+
+  inputRef.value?.focus()
 }
 
 function readField(item: Item, field: string) {
@@ -204,26 +351,26 @@ function readField(item: Item, field: string) {
       >
         <button
           v-for="item in modelValue"
-          :key="keyOf(item)"
-          :aria-label="t('remove', { label: labelOf(item) })"
-          class="min-h-8 inline-flex items-center gap-1 border base-border rounded-md bg-gray-100 py-1 pl-2 pr-1.5 text-gray-900 font-medium tracking-tight hover:border-gray-300 dark:bg-gray-800 dark:text-gray-100 dark:hover:border-gray-700"
+          :key="getItemKey(item)"
+          :aria-label="t('remove', { label: getItemText(item) })"
+          class="min-h-8 inline-flex items-center gap-1 border base-border rounded-md bg-gray-100 py-1 pl-2 pr-1.5 text-gray-700 font-normal tracking-tight normal-case transition-colors dark:bg-gray-800 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700"
           type="button"
           @mousedown.prevent
           @click="onRemove(item)"
         >
-          <span class="truncate">{{ labelOf(item) }}</span>
+          <span class="truncate">{{ getItemText(item) }}</span>
 
           <BaseIcon
             color="gray"
             :icon="getLayerIcon('close')"
-            size="2xs"
+            size="xs"
           />
         </button>
 
         <button
           v-if="!opened"
           :aria-label="t('add')"
-          class="min-h-8 inline-flex items-center gap-1 border base-border base-border-hover rounded-md border-dashed py-1 pl-1.5 pr-2 text-gray-600 font-medium tracking-tight dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
+          class="min-h-8 inline-flex items-center gap-1 border base-border base-border-hover rounded-md border-dashed py-1 pl-1.5 pr-2 text-gray-600 font-normal tracking-tight normal-case dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
           :disabled="disabled"
           type="button"
           @click="onOpen"
@@ -241,7 +388,7 @@ function readField(item: Item, field: string) {
           :id="id"
           ref="inputRef"
           v-model="searchRaw"
-          :aria-activedescendant="opened && optionsCount > 0 ? highlightedIndex === createIndex ? `${id}-create` : `${id}-option-${highlightedIndex}` : undefined"
+          :aria-activedescendant="opened && optionsCount > 0 ? highlightedIndex === createOptionIndex ? `${id}-create` : `${id}-option-${highlightedIndex}` : undefined"
           aria-autocomplete="list"
           :aria-controls="optionsCount > 0 ? listId : undefined"
           :aria-expanded="opened"
@@ -252,10 +399,12 @@ function readField(item: Item, field: string) {
           spellcheck="false"
           @blur="onClose"
           @keydown.backspace="onBackspace"
-          @keydown.down.prevent="onArrowDown"
+          @keydown.down="onArrowKey($event, 'down')"
           @keydown.enter.prevent="onEnter"
           @keydown.escape.stop="onClose"
-          @keydown.up.prevent="onArrowUp"
+          @keydown.left="onArrowKey($event, 'left')"
+          @keydown.right="onArrowKey($event, 'right')"
+          @keydown.up="onArrowKey($event, 'up')"
         >
       </div>
 
@@ -265,51 +414,40 @@ function readField(item: Item, field: string) {
       >
         <div
           :id="listId"
-          class="max-h-[150px] overflow-y-auto"
+          ref="listRef"
+          class="max-h-[150px] flex flex-wrap gap-1.5 overflow-y-auto"
           role="listbox"
         >
           <div
             v-for="(item, index) in filteredItems"
             :id="`${id}-option-${index}`"
-            :key="keyOf(item)"
+            :key="getItemKey(item)"
             :aria-selected="index === highlightedIndex"
-            class="flex cursor-pointer items-center rounded-md px-2 font-medium tracking-tight outline-none"
-            :class="{
-              'min-h-8': size === 'sm',
-              'min-h-10': size === 'base',
-              'min-h-12': size === 'lg',
-              'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100': index === highlightedIndex,
-              'text-gray-600 dark:text-gray-400': index !== highlightedIndex,
-            }"
+            class="max-w-full min-h-8 inline-flex cursor-pointer items-center border base-border rounded-md px-2 py-1 text-gray-600 font-normal tracking-tight normal-case outline-none dark:text-gray-400"
+            :class="{ 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300': index === highlightedIndex }"
             role="option"
             @click="onSelect(item)"
             @mousedown.prevent
             @mouseenter="onHighlight(index)"
           >
             <span class="truncate">
-              {{ labelOf(item) }}
+              {{ getItemText(item) }}
             </span>
           </div>
 
           <div
             v-if="canCreate"
             :id="`${id}-create`"
-            :aria-selected="highlightedIndex === createIndex"
-            class="flex cursor-pointer items-center rounded-md px-2 font-medium tracking-tight outline-none"
-            :class="{
-              'min-h-8': size === 'sm',
-              'min-h-10': size === 'base',
-              'min-h-12': size === 'lg',
-              'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100': highlightedIndex === createIndex,
-              'text-gray-600 dark:text-gray-400': highlightedIndex !== createIndex,
-            }"
+            :aria-selected="highlightedIndex === createOptionIndex"
+            class="max-w-full min-h-8 inline-flex cursor-pointer items-center gap-1 border base-border rounded-md border-dashed px-2 py-1 text-gray-600 font-normal tracking-tight normal-case outline-none dark:text-gray-400"
+            :class="{ 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300': highlightedIndex === createOptionIndex }"
             role="option"
             @click="onCreate"
             @mousedown.prevent
-            @mouseenter="onHighlight(createIndex)"
+            @mouseenter="onHighlight(createOptionIndex)"
           >
             <BaseIcon
-              class="mr-1.5 shrink-0"
+              class="shrink-0"
               color="gray"
               :icon="getLayerIcon('plus')"
               size="2xs"

package/app/components/fields/FieldSelect.vue

@@ -113,11 +113,11 @@ const textSize = computed<BaseSize>(() => {
   }
 })
 
-watch(opened, (isOpened) => {
+watch(opened, async (isOpened) => {
   if (isOpened && props.searchable) {
-    nextTick(() => {
-      searchInput.value?.focus()
-    })
+    await nextTick()
+
+    searchInput.value?.focus()
   }
 })
 

package/app/types/bases.d.ts

@@ -299,6 +299,28 @@ export type BaseQuoteBackground = 'gray' | 'gray-light' | 'white'
 
 export type BaseQuoteSize = 'base' | 'sm' | 'xs'
 
+export interface BaseRing {
+  clickable?: boolean
+  completed?: number
+  dashed?: boolean
+  expanded?: boolean
+  format?: BaseRingFormat
+  label?: string
+  size?: BaseRingSize
+  total?: number
+  transitionColors?: boolean
+}
+
+export interface BaseRingArc {
+  dashArray?: string
+  dashOffset?: string
+  filled: boolean
+}
+
+export type BaseRingFormat = 'count' | 'none' | 'percent'
+
+export type BaseRingSize = 'base' | 'lg'
+
 export interface BaseShortcut {
   active?: boolean
   shortcut?: string

package/app/types/global.d.ts

@@ -64,6 +64,10 @@ declare global {
   type BaseQuote = import('./bases').BaseQuote
   type BaseQuoteBackground = import('./bases').BaseQuoteBackground
   type BaseQuoteSize = import('./bases').BaseQuoteSize
+  type BaseRing = import('./bases').BaseRing
+  type BaseRingArc = import('./bases').BaseRingArc
+  type BaseRingFormat = import('./bases').BaseRingFormat
+  type BaseRingSize = import('./bases').BaseRingSize
   type BaseShortcut = import('./bases').BaseShortcut
   type BaseSize = import('./bases').BaseSize
   type BaseSpinner = import('./bases').BaseSpinner

package/package.json

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