@saasmakers/ui 2.0.68 → 2.0.69

package/app/components/fields/FieldSelect.vue

@@ -385,11 +385,11 @@ function selectOption(event: MouseEvent, value: string) {
                 :key="option.value"
                 class="flex cursor-pointer items-center outline-none"
                 :class="{
-                  'base-border-b px-3 hover:bg-gray-100 dark:hover:bg-gray-800 last:border-b-0': computedColumns.length < 2,
+                  'base-border-b base-bg-hover px-3 last:border-b-0': computedColumns.length < 2,
                   'h-10': size === 'sm' && computedColumns.length < 2,
                   'h-12': size === 'base' && computedColumns.length < 2,
                   'h-14': size === 'lg' && computedColumns.length < 2,
-                  'px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-800 last:mb-2': computedColumns.length >= 2,
+                  'base-bg-hover px-2 py-1 last:mb-2': computedColumns.length >= 2,
                   'font-medium underline': option.value === selectedOption?.value,
                   'text-gray-900 dark:text-gray-100': option.value === selectedOption?.value,
                   'bg-white dark:bg-gray-900': selectedOption && option.value !== selectedOption.value,

package/app/composables/useChipNavigation.ts

@@ -0,0 +1,178 @@
+export type ChipNavigationDirection = 'down' | 'left' | 'right' | 'up'
+
+export default function useChipNavigation(options: {
+  containerRef: Ref<HTMLElement | undefined>
+  count: MaybeRefOrGetter<number>
+  role?: string
+  shouldIgnoreHorizontal?: (direction: 'left' | 'right') => boolean
+}) {
+  const highlightedIndex = ref(0)
+  const chipRole = options.role ?? 'option'
+
+  const chipCount = computed(() => {
+    return toValue(options.count)
+  })
+
+  watch(chipCount, () => {
+    const lastIndex = Math.max(0, chipCount.value - 1)
+
+    if (highlightedIndex.value > lastIndex) {
+      highlightedIndex.value = lastIndex
+    }
+  })
+
+  function getChipElements() {
+    if (!options.containerRef.value) {
+      return []
+    }
+
+    return Array.from(options.containerRef.value.querySelectorAll<HTMLElement>(`[role="${chipRole}"]`))
+  }
+
+  function getChipRects() {
+    return getChipElements().map((element, index) => ({
+      index,
+      rect: element.getBoundingClientRect(),
+    }))
+  }
+
+  function moveHighlight(direction: ChipNavigationDirection) {
+    const chipRects = getChipRects()
+
+    if (chipRects.length === 0) {
+      return
+    }
+
+    const currentIndex = Math.min(highlightedIndex.value, chipRects.length - 1)
+    const current = chipRects[currentIndex]!
+
+    if (direction === 'left' || direction === 'right') {
+      const sameRowChips = chipRects.filter((chip) => {
+        return Math.abs(chip.rect.top - current.rect.top) <= Math.min(chip.rect.height, current.rect.height) / 2
+      })
+
+      if (direction === 'right') {
+        const rightChips = sameRowChips
+          .filter(chip => chip.rect.left > current.rect.left + 1)
+          .sort((first, second) => first.rect.left - second.rect.left)
+
+        if (rightChips.length > 0) {
+          highlightedIndex.value = rightChips[0]!.index
+        }
+        else {
+          const nextRowChips = chipRects
+            .filter(chip => chip.rect.top > current.rect.bottom - 1)
+            .sort((first, second) => first.rect.top - second.rect.top || first.rect.left - second.rect.left)
+
+          if (nextRowChips.length > 0) {
+            const nextRowTop = nextRowChips[0]!.rect.top
+            const firstInNextRow = nextRowChips.find(chip => Math.abs(chip.rect.top - nextRowTop) <= 4)
+
+            if (firstInNextRow) {
+              highlightedIndex.value = firstInNextRow.index
+            }
+          }
+        }
+      }
+      else {
+        const leftChips = sameRowChips
+          .filter(chip => chip.rect.right < current.rect.right - 1)
+          .sort((first, second) => second.rect.left - first.rect.left)
+
+        if (leftChips.length > 0) {
+          highlightedIndex.value = leftChips[0]!.index
+        }
+        else {
+          const previousRowChips = chipRects
+            .filter(chip => chip.rect.bottom < current.rect.top + 1)
+            .sort((first, second) => second.rect.top - first.rect.top || second.rect.left - first.rect.left)
+
+          if (previousRowChips.length > 0) {
+            const previousRowTop = previousRowChips[0]!.rect.top
+
+            const lastInPreviousRow = previousRowChips
+              .filter(chip => Math.abs(chip.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 rowChips = chipRects.filter((chip) => {
+        if (direction === 'down') {
+          return chip.rect.top > current.rect.top + 1
+        }
+
+        return chip.rect.bottom < current.rect.bottom - 1
+      })
+
+      if (rowChips.length === 0) {
+        return
+      }
+
+      const targetRowTop = direction === 'down'
+        ? Math.min(...rowChips.map(chip => chip.rect.top))
+        : Math.max(...rowChips.map(chip => chip.rect.top))
+
+      const targetRowChips = rowChips.filter(chip => Math.abs(chip.rect.top - targetRowTop) <= 4)
+
+      let closestIndex: number | undefined
+      let closestDistance: number | undefined
+
+      for (const chip of targetRowChips) {
+        const centerX = chip.rect.left + chip.rect.width / 2
+        const distance = Math.abs(centerX - currentCenterX)
+
+        if (closestDistance === undefined || distance < closestDistance) {
+          closestDistance = distance
+          closestIndex = chip.index
+        }
+      }
+
+      if (closestIndex !== undefined) {
+        highlightedIndex.value = closestIndex
+      }
+    }
+
+    nextTick(() => {
+      getChipElements()[highlightedIndex.value]?.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest',
+      })
+    })
+  }
+
+  function onArrowKey(event: KeyboardEvent, direction: ChipNavigationDirection) {
+    if (chipCount.value === 0) {
+      return
+    }
+
+    if ((direction === 'left' || direction === 'right') && options.shouldIgnoreHorizontal?.(direction)) {
+      return
+    }
+
+    event.preventDefault()
+    moveHighlight(direction)
+  }
+
+  function onHighlight(index: number) {
+    highlightedIndex.value = index
+  }
+
+  function resetHighlight(index = 0) {
+    highlightedIndex.value = index
+  }
+
+  return {
+    highlightedIndex,
+    onArrowKey,
+    onHighlight,
+    resetHighlight,
+  }
+}

package/app/composables/useRelativeDate.ts

@@ -0,0 +1,97 @@
+import { getRelativeDateMessage } from '../i18n/relativeDate'
+import { getDayDiff, resolveLocaleCode, startOfLocalDay } from '../utils/dateField'
+
+export default function useRelativeDate(
+  date: MaybeRefOrGetter<Date | null | undefined>,
+  options?: {
+    today?: MaybeRefOrGetter<Date>
+  },
+) {
+  const { locale } = useI18n()
+  const resolvedDate = computed(() => coerceDate(toValue(date)))
+
+  const resolvedToday = computed(() => {
+    const today = coerceDate(toValue(options?.today)) ?? new Date()
+
+    return startOfLocalDay(today)
+  })
+
+  const dayDiff = computed(() => {
+    const currentDate = resolvedDate.value
+
+    if (!currentDate) {
+      return null
+    }
+
+    return getDayDiff(resolvedToday.value, currentDate)
+  })
+
+  const isOverdue = computed(() => {
+    const diff = dayDiff.value
+
+    return diff !== null && diff < 0
+  })
+
+  const relativeLabel = computed(() => {
+    const diff = dayDiff.value
+    const currentDate = resolvedDate.value
+
+    if (diff === null || !currentDate) {
+      return ''
+    }
+
+    if (diff === 0) {
+      return getRelativeDateMessage(locale.value, 'today')
+    }
+
+    if (diff === 1) {
+      return getRelativeDateMessage(locale.value, 'tomorrow')
+    }
+
+    if (diff === -1) {
+      return getRelativeDateMessage(locale.value, 'yesterday')
+    }
+
+    if (diff < -1) {
+      return getRelativeDateMessage(locale.value, 'overdue', Math.abs(diff))
+    }
+
+    if (diff >= 2 && diff <= 6) {
+      return new Intl.DateTimeFormat(resolveLocaleCode(locale.value), { weekday: 'long' }).format(currentDate)
+    }
+
+    return getRelativeDateMessage(locale.value, 'inDays', diff)
+  })
+
+  const absoluteLabel = computed(() => {
+    const currentDate = resolvedDate.value
+
+    if (!currentDate) {
+      return ''
+    }
+
+    return currentDate.toLocaleDateString(resolveLocaleCode(locale.value), {
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+    })
+  })
+
+  return {
+    absoluteLabel,
+    isOverdue,
+    relativeLabel,
+  }
+}
+
+function coerceDate(value: unknown): Date | null {
+  if (!value) {
+    return null
+  }
+
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? null : value
+  }
+
+  return null
+}

package/app/i18n/relativeDate.ts

@@ -0,0 +1,138 @@
+import type { Locale } from '@saasmakers/shared'
+import { resolveLocaleCode } from '../utils/dateField'
+
+export type RelativeDateKey = 'inDays' | 'overdue' | 'today' | 'tomorrow' | 'yesterday'
+
+export interface RelativeDateMessages {
+  inDays: string
+  overdue: string
+  today: string
+  tomorrow: string
+  yesterday: string
+}
+
+export const relativeDateMessages: Record<Locale, RelativeDateMessages> = {
+  de: {
+    inDays: 'In {count} Tag | In {count} Tagen',
+    overdue: 'Überfällig | {count} Tag überfällig | {count} Tage überfällig',
+    today: 'Heute',
+    tomorrow: 'Morgen',
+    yesterday: 'Gestern',
+  },
+  en: {
+    inDays: 'In {count} day | In {count} days',
+    overdue: 'Overdue | {count} day overdue | {count} days overdue',
+    today: 'Today',
+    tomorrow: 'Tomorrow',
+    yesterday: 'Yesterday',
+  },
+  es: {
+    inDays: 'En {count} día | En {count} días',
+    overdue: 'Atrasado | {count} día de retraso | {count} días de retraso',
+    today: 'Hoy',
+    tomorrow: 'Mañana',
+    yesterday: 'Ayer',
+  },
+  fr: {
+    inDays: 'Dans {count} j | Dans {count} j',
+    overdue: 'En retard | En retard de {count} j | En retard de {count} j',
+    today: 'Aujourd\'hui',
+    tomorrow: 'Demain',
+    yesterday: 'Hier',
+  },
+  id: {
+    inDays: 'Dalam {count} hari | Dalam {count} hari',
+    overdue: 'Terlambat | Terlambat {count} hari | Terlambat {count} hari',
+    today: 'Hari ini',
+    tomorrow: 'Besok',
+    yesterday: 'Kemarin',
+  },
+  it: {
+    inDays: 'Tra {count} giorno | Tra {count} giorni',
+    overdue: 'In ritardo | In ritardo di {count} g | In ritardo di {count} g',
+    today: 'Oggi',
+    tomorrow: 'Domani',
+    yesterday: 'Ieri',
+  },
+  ja: {
+    inDays: 'あと{count}日 | あと{count}日',
+    overdue: '期限切れ | {count}日遅れ | {count}日遅れ',
+    today: '今日',
+    tomorrow: '明日',
+    yesterday: '昨日',
+  },
+  ko: {
+    inDays: '{count}일 후 | {count}일 후',
+    overdue: '기한 지남 | {count}일 지남 | {count}일 지남',
+    today: '오늘',
+    tomorrow: '내일',
+    yesterday: '어제',
+  },
+  nl: {
+    inDays: 'Over {count} dag | Over {count} dagen',
+    overdue: 'Te laat | {count} dag te laat | {count} dagen te laat',
+    today: 'Vandaag',
+    tomorrow: 'Morgen',
+    yesterday: 'Gisteren',
+  },
+  pl: {
+    inDays: 'Za {count} dzień | Za {count} dni',
+    overdue: 'Po terminie | {count} dzień po terminie | {count} dni po terminie',
+    today: 'Dziś',
+    tomorrow: 'Jutro',
+    yesterday: 'Wczoraj',
+  },
+  pt: {
+    inDays: 'Daqui a {count} dia | Daqui a {count} dias',
+    overdue: 'Em atraso | {count} dia de atraso | {count} dias de atraso',
+    today: 'Hoje',
+    tomorrow: 'Amanhã',
+    yesterday: 'Ontem',
+  },
+  'pt-BR': {
+    inDays: 'Em {count} dia | Em {count} dias',
+    overdue: 'Atrasado | {count} dia de atraso | {count} dias de atraso',
+    today: 'Hoje',
+    tomorrow: 'Amanhã',
+    yesterday: 'Ontem',
+  },
+  vi: {
+    inDays: 'Trong {count} ngày | Trong {count} ngày',
+    overdue: 'Quá hạn | Quá hạn {count} ngày | Quá hạn {count} ngày',
+    today: 'Hôm nay',
+    tomorrow: 'Ngày mai',
+    yesterday: 'Hôm qua',
+  },
+}
+
+function resolveRelativeDateLocale(localeValue: unknown): Locale {
+  const localeCode = resolveLocaleCode(localeValue)
+
+  if (localeCode in relativeDateMessages) {
+    return localeCode as Locale
+  }
+
+  const languageCode = localeCode.split('-')[0]
+
+  if (languageCode && languageCode in relativeDateMessages) {
+    return languageCode as Locale
+  }
+
+  return 'en'
+}
+
+export function getRelativeDateMessage(localeValue: unknown, key: RelativeDateKey, count?: number) {
+  const messages = relativeDateMessages[resolveRelativeDateLocale(localeValue)]
+  const rawMessage = messages[key]
+
+  if (key === 'today' || key === 'tomorrow' || key === 'yesterday' || count === undefined) {
+    return rawMessage
+  }
+
+  const forms = rawMessage.split('|').map(form => form.trim())
+  const template = forms.length === 1
+    ? forms[0]
+    : count === 1 ? forms[1] ?? forms[0] : forms[2] ?? forms[1] ?? forms[0]
+
+  return template?.replace(/\{count\}/g, String(count)) ?? rawMessage
+}

package/app/types/bases.d.ts

@@ -109,6 +109,32 @@ export type BaseCharacterCharacter
 
 export type BaseCharacterSize = 'base' | 'lg' | 'sm' | 'xs'
 
+export interface BaseChip {
+  active?: boolean
+  activeHighlight?: BaseChipActiveHighlight
+  ariaLabel?: string
+  ariaSelected?: boolean
+  as?: BaseChipAs
+  disabled?: boolean
+  hoverable?: boolean
+  icon?: string
+  iconLeading?: boolean
+  iconSize?: BaseSize
+  id?: string
+  maxWidth?: boolean
+  normalCase?: boolean
+  removable?: boolean
+  role?: string
+  text?: BaseTextText
+  variant?: BaseChipVariant
+}
+
+export type BaseChipActiveHighlight = 'gray' | 'indigo'
+
+export type BaseChipAs = 'button' | 'div'
+
+export type BaseChipVariant = 'dashed' | 'filled' | 'outline'
+
 export interface BaseChart {
   data?: ChartistBarChartData | ChartistLineChartData | ChartistPieChartData
   fullWidth?: boolean

package/app/types/fields.d.ts

@@ -56,6 +56,30 @@ export interface FieldCombobox<Item = Record<string, unknown>> {
   validation?: VuelidateValidation
 }
 
+export interface FieldDate {
+  background?: FieldBackground
+  description?: BaseTextText
+  disabled?: boolean
+  hideError?: boolean
+  label?: BaseTextText
+  labelIcon?: string
+  min?: Date
+  modelValue: Date | null
+  placeholder?: string
+  presets?: FieldDatePreset[]
+  required?: boolean
+  size?: FieldSize
+  validation?: VuelidateValidation
+  weekStartsOn?: number
+}
+
+export interface FieldDatePreset {
+  date: Date
+  id: string
+  label: string
+  sub?: string
+}
+
 export interface FieldDays {
   disabled?: boolean
   modelValue: number[]

package/app/types/global.d.ts

@@ -33,6 +33,10 @@ declare global {
   type BaseCharacter = import('./bases').BaseCharacter
   type BaseCharacterCharacter = import('./bases').BaseCharacterCharacter
   type BaseCharacterSize = import('./bases').BaseCharacterSize
+  type BaseChip = import('./bases').BaseChip
+  type BaseChipActiveHighlight = import('./bases').BaseChipActiveHighlight
+  type BaseChipAs = import('./bases').BaseChipAs
+  type BaseChipVariant = import('./bases').BaseChipVariant
   type BaseChart = import('./bases').BaseChart
   type BaseChartType = import('./bases').BaseChartType
   type BaseCircle = import('./bases').BaseCircle
@@ -96,6 +100,8 @@ declare global {
   type FieldBackground = import('./fields').FieldBackground
   type FieldCheckbox = import('./fields').FieldCheckbox
   type FieldCombobox<Item = Record<string, unknown>> = import('./fields').FieldCombobox<Item>
+  type FieldDate = import('./fields').FieldDate
+  type FieldDatePreset = import('./fields').FieldDatePreset
   type FieldDays = import('./fields').FieldDays
   type FieldEmojis = import('./fields').FieldEmojis
   type FieldInput = import('./fields').FieldInput

package/app/utils/dateField.ts

@@ -0,0 +1,104 @@
+export interface CalendarCell {
+  date: Date
+  inMonth: boolean
+}
+
+export function buildCalendarGrid(params: {
+  viewMonth: Date
+  weekStartsOn?: number
+}): CalendarCell[] {
+  const weekStartsOn = params.weekStartsOn ?? 1
+  const year = params.viewMonth.getFullYear()
+  const month = params.viewMonth.getMonth()
+  const firstOfMonth = new Date(year, month, 1)
+  const firstWeekday = firstOfMonth.getDay()
+  const offset = (firstWeekday - weekStartsOn + 7) % 7
+  const gridStart = new Date(year, month, 1 - offset)
+
+  return Array.from({ length: 42 }, (_, index) => {
+    const date = new Date(gridStart)
+
+    date.setDate(gridStart.getDate() + index)
+
+    return {
+      date,
+      inMonth: date.getMonth() === month,
+    }
+  })
+}
+
+export function formatMonthLabel(date: Date, locale: string) {
+  const formatted = new Intl.DateTimeFormat(locale, {
+    month: 'long',
+    year: 'numeric',
+  }).format(date)
+
+  return formatted.charAt(0).toUpperCase() + formatted.slice(1)
+}
+
+export function formatPresetSub(date: Date, locale: string) {
+  return new Intl.DateTimeFormat(locale, {
+    day: 'numeric',
+    weekday: 'short',
+  }).format(date)
+}
+
+export function getDayDiff(from: Date, to: Date) {
+  const millisecondsPerDay = 86_400_000
+
+  return Math.round((startOfLocalDay(to).getTime() - startOfLocalDay(from).getTime()) / millisecondsPerDay)
+}
+
+export function getNextMonday(from: Date) {
+  const weekday = from.getDay()
+  const daysUntilNextMonday = ((1 - weekday + 7) % 7) || 7
+  const nextMonday = new Date(from)
+
+  nextMonday.setDate(from.getDate() + daysUntilNextMonday)
+
+  return startOfLocalDay(nextMonday)
+}
+
+export function getNextSaturday(from: Date) {
+  const weekday = from.getDay()
+  const daysUntilSaturday = weekday === 0 ? 6 : (6 - weekday + 7) % 7 || 7
+  const nextSaturday = new Date(from)
+
+  nextSaturday.setDate(from.getDate() + daysUntilSaturday)
+
+  return startOfLocalDay(nextSaturday)
+}
+
+export function isBeforeDay(date: Date, min?: Date) {
+  if (!min) {
+    return false
+  }
+
+  return startOfLocalDay(date).getTime() < startOfLocalDay(min).getTime()
+}
+
+export function isSameDay(first: Date, second: Date) {
+  return startOfLocalDay(first).getTime() === startOfLocalDay(second).getTime()
+}
+
+export function resolveLocaleCode(localeValue: unknown): string {
+  if (typeof localeValue === 'string') {
+    return localeValue
+  }
+
+  if (localeValue && typeof localeValue === 'object') {
+    if ('code' in localeValue && typeof localeValue.code === 'string') {
+      return localeValue.code
+    }
+
+    if ('language' in localeValue && typeof localeValue.language === 'string') {
+      return localeValue.language.split('-')[0] ?? 'en'
+    }
+  }
+
+  return 'en'
+}
+
+export function startOfLocalDay(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
+}

package/app/utils/layerIcons.ts

@@ -13,6 +13,7 @@ export const layerIcons = {
   arrowRight: 'solar:alt-arrow-right-bold',
   arrowUp: 'solar:alt-arrow-up-bold',
   back: 'hugeicons:arrow-turn-backward',
+  calendar: 'hugeicons:calendar-03',
   check: 'mdi:check',
   checkCircle: 'hugeicons:checkmark-circle-02',
   chevronLeft: 'hugeicons:arrow-left-01',

package/package.json

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

package/uno.config.ts

@@ -37,6 +37,8 @@ export const shortcuts: Record<string, string> = {
   'base-bg': 'bg-white dark:bg-gray-900',
   'base-box': 'border shadow-sm base-border rounded-lg',
   '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-bg-hover': 'hover:bg-gray-50 dark:hover:bg-white/5',
+  'base-control-hover': 'base-bg-hover hover:text-gray-900 dark:hover:text-gray-100',
   'base-surface': 'border base-border base-bg shadow-sm',
   'field-disabled': 'opacity-50 cursor-not-allowed',
   'field-uppercase': 'uppercase [&_*]:uppercase [&_input::placeholder]:uppercase',