@saasmakers/ui 2.0.59 → 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/bases/BaseTags.vue

@@ -4,7 +4,7 @@ import type { BaseTags } from '../../types/bases'
 const props = withDefaults(defineProps<BaseTags>(), {
   size: 'base',
   tags: () => [],
-  wrap: false,
+  wrap: true,
 })
 
 const sortedTags = computed(() => {

package/app/components/fields/FieldCombobox.vue

@@ -0,0 +1,568 @@
+<script lang="ts" setup generic="Item extends object">
+import type { FieldCombobox } from '../../types/fields'
+
+const props = withDefaults(defineProps<Omit<FieldCombobox<Item>, 'modelValue'>>(), {
+  allowCreate: false,
+  border: 'full',
+  description: '',
+  disabled: false,
+  hideError: false,
+  itemKey: 'id',
+  itemLabel: 'name',
+  items: () => [],
+  label: '',
+  labelIcon: undefined,
+  placeholder: '',
+  required: false,
+  size: 'base',
+  uppercase: true,
+  validation: undefined,
+})
+
+const emit = defineEmits<{
+  create: [label: string]
+}>()
+
+const { t } = useI18n()
+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 => getItemKey(item)))
+  const availableItems = props.items.filter(item => !selectedKeys.has(getItemKey(item)))
+  const searchQuery = normalizeText(searchRaw.value.trim())
+
+  return searchQuery
+    ? availableItems.filter(item => normalizeText(getItemText(item)).includes(searchQuery))
+    : availableItems
+})
+
+const canCreate = computed(() => {
+  const trimmed = searchRaw.value.trim()
+
+  if (props.allowCreate && trimmed) {
+    const normalizedInput = normalizeText(trimmed)
+
+    return !props.items.some(item => normalizeText(getItemText(item)) === normalizedInput)
+  }
+
+  return false
+})
+
+const createOptionIndex = computed(() => {
+  return canCreate.value ? filteredItems.value.length : -1
+})
+
+const optionsCount = computed(() => {
+  return filteredItems.value.length + (canCreate.value ? 1 : 0)
+})
+
+watch([filteredItems, canCreate], () => {
+  const lastIndex = Math.max(0, optionsCount.value - 1)
+
+  if (highlightedIndex.value > lastIndex) {
+    highlightedIndex.value = lastIndex
+  }
+})
+
+function getItemKey(item: Item) {
+  return typeof props.itemKey === 'function' ? props.itemKey(item) : String(readField(item, props.itemKey))
+}
+
+function getItemText(item: Item) {
+  return typeof props.itemLabel === 'function'
+    ? props.itemLabel(item)
+    : String(readField(item, props.itemLabel) ?? '')
+}
+
+function getOptionElements() {
+  if (!listRef.value) {
+    return []
+  }
+
+  return Array.from(listRef.value.querySelectorAll<HTMLElement>('[role="option"]'))
+}
+
+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() {
+  if (searchRaw.value === '' && modelValue.value.length > 0) {
+    modelValue.value = modelValue.value.slice(0, -1)
+  }
+}
+
+function onClose() {
+  if (opened.value) {
+    opened.value = false
+    searchRaw.value = ''
+    highlightedIndex.value = 0
+  }
+}
+
+async function onCreate() {
+  const label = searchRaw.value.trim()
+
+  if (label) {
+    // The parent owns creation (idempotency, colors, sync); we never mutate items ourselves.
+    emit('create', label)
+
+    searchRaw.value = ''
+    highlightedIndex.value = 0
+
+    await nextTick()
+
+    inputRef.value?.focus()
+  }
+}
+
+function onEnter() {
+  if (optionsCount.value > 0) {
+    if (highlightedIndex.value === createOptionIndex.value) {
+      onCreate()
+    }
+    else {
+      const item = filteredItems.value[highlightedIndex.value]
+
+      if (item) {
+        onSelect(item)
+      }
+    }
+  }
+}
+
+function onHighlight(index: number) {
+  highlightedIndex.value = index
+}
+
+async function onOpen() {
+  if (!props.disabled && !opened.value) {
+    opened.value = true
+    highlightedIndex.value = 0
+
+    await nextTick()
+
+    inputRef.value?.focus()
+    inputRef.value?.scrollIntoView({ block: 'nearest' })
+  }
+}
+
+function onRemove(item: Item) {
+  const removedKey = getItemKey(item)
+
+  modelValue.value = modelValue.value.filter(current => getItemKey(current) !== removedKey)
+}
+
+async function onSelect(item: Item) {
+  modelValue.value = [...modelValue.value, item]
+  searchRaw.value = ''
+  highlightedIndex.value = 0
+
+  await nextTick()
+
+  inputRef.value?.focus()
+}
+
+function readField(item: Item, field: string) {
+  return (item as Record<string, unknown>)[field]
+}
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <FieldLabel
+      v-if="label"
+      :disabled="disabled"
+      :for-field="id"
+      has-margin-bottom
+      :icon="labelIcon"
+      :label="label"
+      :required="required"
+      :size="size"
+    />
+
+    <div
+      class="overflow-hidden rounded-lg bg-white dark:bg-gray-900"
+      :class="{
+        'text-xs': size === 'sm',
+        'text-sm': size === 'base',
+        'text-base': size === 'lg',
+        'base-box': border === 'full',
+        'base-border-b': border === 'bottom',
+        'border-0': border === 'none',
+        'base-border-active': opened && border !== 'none',
+        'base-border-interactive-focus-within': !opened && !disabled && border !== 'none',
+        'field-disabled': disabled,
+        'field-uppercase': uppercase,
+      }"
+    >
+      <div
+        class="flex flex-wrap select-none items-center gap-1.5 p-1.5"
+        :class="{
+          'min-h-10': size === 'sm',
+          'min-h-12': size === 'base',
+          'min-h-14': size === 'lg',
+        }"
+      >
+        <button
+          v-for="item in modelValue"
+          :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">{{ getItemText(item) }}</span>
+
+          <BaseIcon
+            color="gray"
+            :icon="getLayerIcon('close')"
+            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-normal tracking-tight normal-case dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+          :disabled="disabled"
+          type="button"
+          @click="onOpen"
+        >
+          <BaseIcon
+            :icon="getLayerIcon('plus')"
+            size="xs"
+          />
+
+          <span>{{ t('add') }}</span>
+        </button>
+
+        <input
+          v-else
+          :id="id"
+          ref="inputRef"
+          v-model="searchRaw"
+          :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"
+          autocomplete="off"
+          class="min-w-[6rem] flex-1 select-text appearance-none bg-transparent px-2 text-gray-900 font-medium tracking-tight outline-none dark:text-gray-100 placeholder-gray-600 dark:placeholder-gray-400"
+          :placeholder="placeholder || (allowCreate ? t('searchOrCreate') : t('search'))"
+          role="combobox"
+          spellcheck="false"
+          @blur="onClose"
+          @keydown.backspace="onBackspace"
+          @keydown.down="onArrowKey($event, 'down')"
+          @keydown.enter.prevent="onEnter"
+          @keydown.escape.stop="onClose"
+          @keydown.left="onArrowKey($event, 'left')"
+          @keydown.right="onArrowKey($event, 'right')"
+          @keydown.up="onArrowKey($event, 'up')"
+        >
+      </div>
+
+      <div
+        v-if="opened && optionsCount > 0"
+        class="select-none border-t base-border px-1.5 pb-1.5 pt-1"
+      >
+        <div
+          :id="listId"
+          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="getItemKey(item)"
+            :aria-selected="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">
+              {{ getItemText(item) }}
+            </span>
+          </div>
+
+          <div
+            v-if="canCreate"
+            :id="`${id}-create`"
+            :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(createOptionIndex)"
+          >
+            <BaseIcon
+              class="shrink-0"
+              color="gray"
+              :icon="getLayerIcon('plus')"
+              size="2xs"
+            />
+
+            <span class="truncate">
+              {{ t('create', { label: searchRaw.trim() }) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <FieldMessage
+      :description="description"
+      :disabled="disabled"
+      :hide-error="hideError"
+      :size="size"
+      :validation="validation"
+    />
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "de": {
+    "add": "Hinzufügen",
+    "create": "„{label}“ erstellen",
+    "remove": "{label} entfernen",
+    "search": "Suchen…",
+    "searchOrCreate": "Suchen oder erstellen…"
+  },
+  "en": {
+    "add": "Add",
+    "create": "Create \"{label}\"",
+    "remove": "Remove {label}",
+    "search": "Search…",
+    "searchOrCreate": "Search or create…"
+  },
+  "es": {
+    "add": "Añadir",
+    "create": "Crear «{label}»",
+    "remove": "Eliminar {label}",
+    "search": "Buscar…",
+    "searchOrCreate": "Buscar o crear…"
+  },
+  "fr": {
+    "add": "Ajouter",
+    "create": "Créer « {label} »",
+    "remove": "Retirer {label}",
+    "search": "Rechercher…",
+    "searchOrCreate": "Rechercher ou créer…"
+  },
+  "id": {
+    "add": "Tambah",
+    "create": "Buat \"{label}\"",
+    "remove": "Hapus {label}",
+    "search": "Cari…",
+    "searchOrCreate": "Cari atau buat…"
+  },
+  "it": {
+    "add": "Aggiungi",
+    "create": "Crea «{label}»",
+    "remove": "Rimuovi {label}",
+    "search": "Cerca…",
+    "searchOrCreate": "Cerca o crea…"
+  },
+  "ja": {
+    "add": "追加",
+    "create": "「{label}」を作成",
+    "remove": "{label} を削除",
+    "search": "検索…",
+    "searchOrCreate": "検索または作成…"
+  },
+  "ko": {
+    "add": "추가",
+    "create": "\"{label}\" 만들기",
+    "remove": "{label} 제거",
+    "search": "검색…",
+    "searchOrCreate": "검색 또는 생성…"
+  },
+  "nl": {
+    "add": "Toevoegen",
+    "create": "\"{label}\" maken",
+    "remove": "{label} verwijderen",
+    "search": "Zoeken…",
+    "searchOrCreate": "Zoeken of maken…"
+  },
+  "pl": {
+    "add": "Dodaj",
+    "create": "Utwórz „{label}”",
+    "remove": "Usuń {label}",
+    "search": "Szukaj…",
+    "searchOrCreate": "Szukaj lub utwórz…"
+  },
+  "pt": {
+    "add": "Adicionar",
+    "create": "Criar «{label}»",
+    "remove": "Remover {label}",
+    "search": "Pesquisar…",
+    "searchOrCreate": "Pesquisar ou criar…"
+  },
+  "pt-BR": {
+    "add": "Adicionar",
+    "create": "Criar \"{label}\"",
+    "remove": "Remover {label}",
+    "search": "Pesquisar…",
+    "searchOrCreate": "Pesquisar ou criar…"
+  },
+  "vi": {
+    "add": "Thêm",
+    "create": "Tạo \"{label}\"",
+    "remove": "Xóa {label}",
+    "search": "Tìm…",
+    "searchOrCreate": "Tìm hoặc tạo…"
+  }
+}
+</i18n>

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
@@ -338,8 +360,6 @@ export interface BaseTag {
 
 export type BaseTagColor = 'gray' | 'green' | 'indigo' | 'orange'
 
-export type BaseTagVariant = 'filled' | 'ghost'
-
 export interface BaseTagItem extends BaseTag {
   id?: number | string
   order?: number
@@ -353,6 +373,8 @@ export interface BaseTags {
 
 export type BaseTagSize = 'base' | 'sm' | 'xs'
 
+export type BaseTagVariant = 'filled' | 'ghost'
+
 export interface BaseText {
   alignment?: BaseAlignment
   background?: BaseBackground

package/app/types/fields.d.ts

@@ -37,6 +37,25 @@ export interface FieldCheckbox {
   validation?: VuelidateValidation
 }
 
+export interface FieldCombobox<Item = Record<string, unknown>> {
+  allowCreate?: boolean
+  border?: FieldInputBorder
+  description?: BaseTextText
+  disabled?: boolean
+  hideError?: boolean
+  itemKey?: ((item: Item) => string) | string
+  itemLabel?: ((item: Item) => string) | string
+  items?: Item[]
+  label?: BaseTextText
+  labelIcon?: string
+  modelValue: Item[]
+  placeholder?: string
+  required?: boolean
+  size?: FieldSize
+  uppercase?: boolean
+  validation?: VuelidateValidation
+}
+
 export interface FieldDays {
   disabled?: boolean
   modelValue: number[]

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
@@ -91,6 +95,7 @@ declare global {
   type FieldAvatar = import('./fields').FieldAvatar
   type FieldBackground = import('./fields').FieldBackground
   type FieldCheckbox = import('./fields').FieldCheckbox
+  type FieldCombobox<Item = Record<string, unknown>> = import('./fields').FieldCombobox<Item>
   type FieldDays = import('./fields').FieldDays
   type FieldEmojis = import('./fields').FieldEmojis
   type FieldInput = import('./fields').FieldInput

package/package.json

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

package/uno.config.ts

@@ -39,6 +39,7 @@ export const shortcuts: Record<string, string> = {
   'base-highlight-indigo': 'border border-indigo-600/35 bg-indigo-600/[0.08] shadow-indigo-600/15 dark:border-indigo-400/35 dark:bg-indigo-400/[0.08] dark:shadow-indigo-400/15',
   'base-surface': 'border base-border base-bg shadow-sm',
   'field-disabled': 'opacity-50 cursor-not-allowed',
+  'field-uppercase': 'uppercase [&_*]:uppercase [&_input::placeholder]:uppercase',
   'scroll-y-stable': 'overflow-y-auto [scrollbar-gutter:stable]',
 }