@saasmakers/ui 2.0.69 → 2.0.70

package/app/components/fields/FieldCombobox.vue

@@ -68,6 +68,7 @@ const { highlightedIndex, onArrowKey, onHighlight, resetHighlight } = useChipNav
   shouldIgnoreHorizontal: (direction) => {
     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
@@ -93,10 +94,15 @@ function onBackspace() {
   }
 }
 
+function onChipMouseDown(event: MouseEvent) {
+  event.preventDefault()
+}
+
 function onClose() {
   if (opened.value) {
     opened.value = false
     searchRaw.value = ''
+
     resetHighlight()
   }
 }
@@ -109,6 +115,7 @@ async function onCreate() {
     emit('create', label)
 
     searchRaw.value = ''
+
     resetHighlight()
 
     await nextTick()
@@ -132,13 +139,10 @@ function onEnter() {
   }
 }
 
-function onChipMouseDown(event: MouseEvent) {
-  event.preventDefault()
-}
-
 async function onOpen() {
   if (!props.disabled && !opened.value) {
     opened.value = true
+
     resetHighlight()
 
     await nextTick()
@@ -157,6 +161,7 @@ function onRemove(item: Item) {
 async function onSelect(item: Item) {
   modelValue.value = [...modelValue.value, item]
   searchRaw.value = ''
+
   resetHighlight()
 
   await nextTick()
@@ -208,9 +213,9 @@ function readField(item: Item, field: string) {
         <BaseChip
           v-for="item in modelValue"
           :key="getItemKey(item)"
-          :ariaLabel="t('remove', { label: getItemText(item) })"
-          normal-case
-          removable
+          :aria-label="t('remove', { label: getItemText(item) })"
+
+          removable normal-case
           variant="filled"
           @mousedown="onChipMouseDown"
           @click="onRemove(item)"
@@ -220,7 +225,7 @@ function readField(item: Item, field: string) {
 
         <BaseChip
           v-if="!opened"
-          :ariaLabel="t('add')"
+          :aria-label="t('add')"
           :disabled="disabled"
           :icon="getLayerIcon('plus')"
           icon-leading
@@ -271,7 +276,7 @@ function readField(item: Item, field: string) {
             :id="`${id}-option-${index}`"
             :key="getItemKey(item)"
             :active="index === highlightedIndex"
-            :ariaSelected="index === highlightedIndex"
+            :aria-selected="index === highlightedIndex"
             as="div"
             max-width
             normal-case
@@ -288,7 +293,7 @@ function readField(item: Item, field: string) {
             v-if="canCreate"
             :id="`${id}-create`"
             :active="highlightedIndex === createOptionIndex"
-            :ariaSelected="highlightedIndex === createOptionIndex"
+            :aria-selected="highlightedIndex === createOptionIndex"
             as="div"
             max-width
             :icon="getLayerIcon('plus')"

package/app/components/fields/FieldDate.vue

@@ -175,6 +175,7 @@ watch(opened, (isOpened) => {
 
     nextTick(() => {
       chipListRef.value?.focus()
+
       panelRef.value?.scrollIntoView({
         behavior: prefersReducedMotion.value === 'reduce' ? 'auto' : 'smooth',
         block: 'nearest',
@@ -199,6 +200,14 @@ function closePanel() {
   calendarOpen.value = false
 }
 
+function isDayDisabled(date: Date) {
+  return isBeforeDay(date, props.min)
+}
+
+function isPresetSelected(preset: FieldDatePreset) {
+  return modelValue.value ? isSameDay(preset.date, modelValue.value) : false
+}
+
 function onChipEnter() {
   const index = highlightedIndex.value
 
@@ -242,28 +251,6 @@ function onChipMouseDown(event: MouseEvent) {
   event.preventDefault()
 }
 
-function resolveInitialChipHighlight() {
-  const selectedIndex = computedPresets.value.findIndex(preset => isPresetSelected(preset))
-
-  if (selectedIndex >= 0) {
-    return selectedIndex
-  }
-
-  if (calendarOpen.value) {
-    return chooseChipIndex.value
-  }
-
-  return 0
-}
-
-function isDayDisabled(date: Date) {
-  return isBeforeDay(date, props.min)
-}
-
-function isPresetSelected(preset: FieldDatePreset) {
-  return modelValue.value ? isSameDay(preset.date, modelValue.value) : false
-}
-
 function onClearClick(event: MouseEvent) {
   event.stopPropagation()
 
@@ -272,6 +259,16 @@ function onClearClick(event: MouseEvent) {
   closePanel()
 }
 
+function onCloseCalendar() {
+  calendarOpen.value = false
+
+  resetHighlight(chooseChipIndex.value)
+
+  nextTick(() => {
+    chipListRef.value?.focus()
+  })
+}
+
 function onContainerClick() {
   if (!props.disabled) {
     opened.value = !opened.value
@@ -292,15 +289,6 @@ function onDayClick(date: Date) {
   }
 }
 
-function onCloseCalendar() {
-  calendarOpen.value = false
-  resetHighlight(chooseChipIndex.value)
-
-  nextTick(() => {
-    chipListRef.value?.focus()
-  })
-}
-
 function onDayKeyDown(event: KeyboardEvent, date: Date, index: number) {
   if (event.key === 'Escape') {
     event.preventDefault()
@@ -339,14 +327,6 @@ function onDayKeyDown(event: KeyboardEvent, date: Date, index: number) {
   }
 }
 
-function syncFocusedDayIndex() {
-  const selectedIndex = calendarCells.value.findIndex(cell => modelValue.value && isSameDay(cell.date, modelValue.value))
-
-  focusedDayIndex.value = selectedIndex >= 0
-    ? selectedIndex
-    : calendarCells.value.findIndex(cell => cell.inMonth)
-}
-
 function onNextMonth() {
   viewMonth.value = new Date(viewMonth.value.getFullYear(), viewMonth.value.getMonth() + 1, 1)
 
@@ -358,6 +338,7 @@ function onNextMonth() {
 
 function onOpenCalendar() {
   calendarOpen.value = true
+
   resetHighlight(chooseChipIndex.value)
   syncFocusedDayIndex()
 
@@ -384,11 +365,31 @@ function onPreviousMonth() {
   })
 }
 
+function resolveInitialChipHighlight() {
+  const selectedIndex = computedPresets.value.findIndex(preset => isPresetSelected(preset))
+
+  if (selectedIndex >= 0) {
+    return selectedIndex
+  }
+
+  if (calendarOpen.value) {
+    return chooseChipIndex.value
+  }
+
+  return 0
+}
+
 function selectDate(date: Date) {
   modelValue.value = startOfLocalDay(date)
 
   closePanel()
 }
+
+function syncFocusedDayIndex() {
+  const selectedIndex = calendarCells.value.findIndex(cell => modelValue.value && isSameDay(cell.date, modelValue.value))
+
+  focusedDayIndex.value = selectedIndex >= 0 ? selectedIndex : calendarCells.value.findIndex(cell => cell.inMonth)
+}
 </script>
 
 <template>
@@ -405,7 +406,7 @@ function selectDate(date: Date) {
     />
 
     <div
-      class="field-uppercase select-none overflow-hidden base-box"
+      class="select-none overflow-hidden base-box field-uppercase"
       :class="{
         'field-disabled': disabled,
         'base-border-interactive-focus-within': !disabled,
@@ -438,7 +439,7 @@ function selectDate(date: Date) {
         />
 
         <div
-          class="min-w-0 flex-1 truncate font-medium tracking-tight uppercase leading-normal"
+          class="min-w-0 flex-1 truncate font-medium leading-normal tracking-tight uppercase"
           :class="{
             'pr-2': modelValue,
             'text-xs': size === 'sm',
@@ -466,7 +467,7 @@ function selectDate(date: Date) {
         <button
           v-if="modelValue"
           :aria-label="t('clear')"
-          class="base-control-hover mr-3 inline-flex shrink-0 items-center self-center justify-center rounded-full p-1 text-gray-600 outline-none transition-[transform,colors] hover:scale-105 dark:text-gray-400"
+          class="mr-3 inline-flex shrink-0 items-center self-center justify-center rounded-full base-control-hover p-1 text-gray-600 outline-none transition-[transform,colors] hover:scale-105 dark:text-gray-400"
           type="button"
           @click="onClearClick"
         >
@@ -506,7 +507,7 @@ function selectDate(date: Date) {
               :key="preset.id"
               :active="index === highlightedIndex"
               active-highlight="indigo"
-              :ariaSelected="index === highlightedIndex"
+              :aria-selected="index === highlightedIndex"
               as="div"
               hoverable
               max-width
@@ -516,14 +517,16 @@ function selectDate(date: Date) {
               @mousedown="onChipMouseDown"
               @mouseenter="onHighlight(index)"
             >
-              {{ preset.label }}<template v-if="preset.sub"> · {{ preset.sub }}</template>
+              {{ preset.label }}<template v-if="preset.sub">
+                · {{ preset.sub }}
+              </template>
             </BaseChip>
 
             <BaseChip
               :id="`${id}-preset-${chooseChipIndex}`"
               :active="highlightedIndex === chooseChipIndex"
               active-highlight="indigo"
-              :ariaSelected="highlightedIndex === chooseChipIndex"
+              :aria-selected="highlightedIndex === chooseChipIndex"
               as="div"
               hoverable
               max-width
@@ -544,10 +547,10 @@ function selectDate(date: Date) {
             :aria-label="monthLabel"
             @keydown.escape.prevent="onCloseCalendar"
           >
-            <div class="mb-0.5 grid grid-cols-7 gap-px">
+            <div class="grid grid-cols-7 mb-0.5 gap-px">
               <button
                 :aria-label="t('prevMonth')"
-                class="base-bg-hover min-h-7 min-w-7 inline-flex cursor-pointer items-center justify-center rounded-md outline-none transition-colors"
+                class="min-h-7 min-w-7 inline-flex cursor-pointer items-center justify-center rounded-md base-bg-hover outline-none transition-colors"
                 type="button"
                 @click="onPreviousMonth"
               >
@@ -558,13 +561,13 @@ function selectDate(date: Date) {
                 />
               </button>
 
-              <span class="col-span-5 flex min-h-7 items-center justify-center text-xs text-gray-900 font-bold uppercase dark:text-gray-100">
+              <span class="col-span-5 min-h-7 flex items-center justify-center text-xs text-gray-900 font-bold uppercase dark:text-gray-100">
                 {{ monthLabel }}
               </span>
 
               <button
                 :aria-label="t('nextMonth')"
-                class="base-bg-hover min-h-7 min-w-7 inline-flex cursor-pointer items-center justify-center rounded-md outline-none transition-colors"
+                class="min-h-7 min-w-7 inline-flex cursor-pointer items-center justify-center rounded-md base-bg-hover outline-none transition-colors"
                 type="button"
                 @click="onNextMonth"
               >

package/app/i18n/relativeDate.ts

@@ -1,7 +1,12 @@
 import type { Locale } from '@saasmakers/shared'
 import { resolveLocaleCode } from '../utils/dateField'
 
-export type RelativeDateKey = 'inDays' | 'overdue' | 'today' | 'tomorrow' | 'yesterday'
+export type RelativeDateKey
+  = | 'inDays'
+    | 'overdue'
+    | 'today'
+    | 'tomorrow'
+    | 'yesterday'
 
 export interface RelativeDateMessages {
   inDays: string
@@ -12,77 +17,77 @@ export interface RelativeDateMessages {
 }
 
 export const relativeDateMessages: Record<Locale, RelativeDateMessages> = {
-  de: {
+  '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: {
+  'en': {
     inDays: 'In {count} day | In {count} days',
     overdue: 'Overdue | {count} day overdue | {count} days overdue',
     today: 'Today',
     tomorrow: 'Tomorrow',
     yesterday: 'Yesterday',
   },
-  es: {
+  '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: {
+  '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: {
+  'id': {
     inDays: 'Dalam {count} hari | Dalam {count} hari',
     overdue: 'Terlambat | Terlambat {count} hari | Terlambat {count} hari',
     today: 'Hari ini',
     tomorrow: 'Besok',
     yesterday: 'Kemarin',
   },
-  it: {
+  '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: {
+  'ja': {
     inDays: 'あと{count}日 | あと{count}日',
     overdue: '期限切れ | {count}日遅れ | {count}日遅れ',
     today: '今日',
     tomorrow: '明日',
     yesterday: '昨日',
   },
-  ko: {
+  'ko': {
     inDays: '{count}일 후 | {count}일 후',
     overdue: '기한 지남 | {count}일 지남 | {count}일 지남',
     today: '오늘',
     tomorrow: '내일',
     yesterday: '어제',
   },
-  nl: {
+  '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: {
+  '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: {
+  'pt': {
     inDays: 'Daqui a {count} dia | Daqui a {count} dias',
     overdue: 'Em atraso | {count} dia de atraso | {count} dias de atraso',
     today: 'Hoje',
@@ -96,7 +101,7 @@ export const relativeDateMessages: Record<Locale, RelativeDateMessages> = {
     tomorrow: 'Amanhã',
     yesterday: 'Ontem',
   },
-  vi: {
+  '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',
@@ -105,22 +110,6 @@ export const relativeDateMessages: Record<Locale, RelativeDateMessages> = {
   },
 }
 
-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]
@@ -130,9 +119,26 @@ export function getRelativeDateMessage(localeValue: unknown, key: RelativeDateKe
   }
 
   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
 }
+
+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'
+}

package/app/types/bases.d.ts

@@ -109,6 +109,15 @@ export type BaseCharacterCharacter
 
 export type BaseCharacterSize = 'base' | 'lg' | 'sm' | 'xs'
 
+export interface BaseChart {
+  data?: ChartistBarChartData | ChartistLineChartData | ChartistPieChartData
+  fullWidth?: boolean
+  options?: ChartistOptions
+  type?: BaseChartType
+}
+
+export type BaseChartType = 'bar' | 'line' | 'pie'
+
 export interface BaseChip {
   active?: boolean
   activeHighlight?: BaseChipActiveHighlight
@@ -135,15 +144,6 @@ export type BaseChipAs = 'button' | 'div'
 
 export type BaseChipVariant = 'dashed' | 'filled' | 'outline'
 
-export interface BaseChart {
-  data?: ChartistBarChartData | ChartistLineChartData | ChartistPieChartData
-  fullWidth?: boolean
-  options?: ChartistOptions
-  type?: BaseChartType
-}
-
-export type BaseChartType = 'bar' | 'line' | 'pie'
-
 export interface BaseCircle {
   color?: BaseCircleColor
 }

package/app/types/global.d.ts

@@ -33,12 +33,12 @@ declare global {
   type BaseCharacter = import('./bases').BaseCharacter
   type BaseCharacterCharacter = import('./bases').BaseCharacterCharacter
   type BaseCharacterSize = import('./bases').BaseCharacterSize
+  type BaseChart = import('./bases').BaseChart
+  type BaseChartType = import('./bases').BaseChartType
   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
   type BaseCircleColor = import('./bases').BaseCircleColor
   type BaseColor = import('./bases').BaseColor

package/package.json

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