@saasmakers/ui 2.0.58 → 2.0.60

package/app/components/bases/BaseTag.vue

@@ -31,16 +31,16 @@ function onClick(event: MouseEvent) {
       '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-transparent text-gray-900 dark:text-gray-100': variant === 'ghost' && !active,
-      'hover:bg-gray-500/10': variant === 'ghost' && !active && clickable,
-      'bg-transparent text-indigo-800 dark:text-indigo-300': variant === 'ghost' && active && color === 'indigo',
-      'bg-transparent text-orange-800 dark:text-orange-300': variant === 'ghost' && active && color === 'orange',
-      'bg-transparent text-green-800 dark:text-green-300': variant === 'ghost' && active && color === 'green',
+      'bg-transparent text-gray-900 dark:text-gray-100': variant === 'ghost' && !active && color === 'gray',
+      'hover:bg-gray-500/10': variant === 'ghost' && !active && color === 'gray' && clickable,
+      'bg-transparent text-indigo-800 dark:text-indigo-300': variant === 'ghost' && color === 'indigo',
+      'bg-transparent text-orange-800 dark:text-orange-300': variant === 'ghost' && color === 'orange',
+      'bg-transparent text-green-800 dark:text-green-300': variant === 'ghost' && color === 'green',
       'bg-transparent text-gray-700 dark:text-gray-300': variant === 'ghost' && active && color === 'gray',
-      'bg-orange-500/15 text-orange-800 dark:text-orange-300': variant === 'filled' && color === 'orange' && (!clickable || active),
-      'bg-indigo-500/15 text-indigo-800 dark:text-indigo-300': variant === 'filled' && color === 'indigo' && (!clickable || active),
-      'bg-green-500/15 text-green-800 dark:text-green-300': variant === 'filled' && color === 'green' && (!clickable || active),
-      'bg-gray-500/20 text-gray-700 dark:text-gray-300': variant === 'filled' && (color === 'gray' || (clickable && !active)),
+      'bg-orange-500/15 text-orange-800 dark:text-orange-300': variant === 'filled' && color === 'orange',
+      'bg-indigo-500/15 text-indigo-800 dark:text-indigo-300': variant === 'filled' && color === 'indigo',
+      'bg-green-500/15 text-green-800 dark:text-green-300': variant === 'filled' && color === 'green',
+      'bg-gray-500/20 text-gray-700 dark:text-gray-300': variant === 'filled' && color === 'gray',
     }"
     :type="clickable ? 'button' : undefined"
     @click="onClick"

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,430 @@
+<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 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 searchQuery = normalizeText(searchRaw.value.trim())
+
+  return searchQuery
+    ? availableItems.filter(item => normalizeText(labelOf(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(labelOf(item)) === normalizedInput)
+  }
+
+  return false
+})
+
+const createIndex = 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 keyOf(item: Item) {
+  return typeof props.itemKey === 'function' ? props.itemKey(item) : String(readField(item, props.itemKey))
+}
+
+function labelOf(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 onArrowUp() {
+  highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0)
+}
+
+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
+  }
+}
+
+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
+
+    nextTick(() => inputRef.value?.focus())
+  }
+}
+
+function onEnter() {
+  if (optionsCount.value > 0) {
+    if (highlightedIndex.value === createIndex.value) {
+      onCreate()
+    }
+    else {
+      const item = filteredItems.value[highlightedIndex.value]
+
+      if (item) {
+        onSelect(item)
+      }
+    }
+  }
+}
+
+function onHighlight(index: number) {
+  highlightedIndex.value = index
+}
+
+function onOpen() {
+  if (!props.disabled && !opened.value) {
+    opened.value = true
+    highlightedIndex.value = 0
+
+    nextTick(() => {
+      inputRef.value?.focus()
+      inputRef.value?.scrollIntoView({ block: 'nearest' })
+    })
+  }
+}
+
+function onRemove(item: Item) {
+  const removedKey = keyOf(item)
+
+  modelValue.value = modelValue.value.filter(current => keyOf(current) !== removedKey)
+}
+
+function onSelect(item: Item) {
+  modelValue.value = [...modelValue.value, item]
+  searchRaw.value = ''
+  highlightedIndex.value = 0
+
+  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="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"
+          type="button"
+          @mousedown.prevent
+          @click="onRemove(item)"
+        >
+          <span class="truncate">{{ labelOf(item) }}</span>
+
+          <BaseIcon
+            color="gray"
+            :icon="getLayerIcon('close')"
+            size="2xs"
+          />
+        </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"
+          :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 === createIndex ? `${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.prevent="onArrowDown"
+          @keydown.enter.prevent="onEnter"
+          @keydown.escape.stop="onClose"
+          @keydown.up.prevent="onArrowUp"
+        >
+      </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"
+          class="max-h-[150px] overflow-y-auto"
+          role="listbox"
+        >
+          <div
+            v-for="(item, index) in filteredItems"
+            :id="`${id}-option-${index}`"
+            :key="keyOf(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,
+            }"
+            role="option"
+            @click="onSelect(item)"
+            @mousedown.prevent
+            @mouseenter="onHighlight(index)"
+          >
+            <span class="truncate">
+              {{ labelOf(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,
+            }"
+            role="option"
+            @click="onCreate"
+            @mousedown.prevent
+            @mouseenter="onHighlight(createIndex)"
+          >
+            <BaseIcon
+              class="mr-1.5 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/types/bases.d.ts

@@ -338,8 +338,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 +351,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

@@ -91,6 +91,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.58",
+  "version": "2.0.60",
   "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]',
 }