@saasmakers/ui 0.1.107 → 0.1.108

package/app/components/bases/BaseTags.vue

@@ -40,10 +40,9 @@ const { getIcon } = useLayerIcons()
 
 const sortedTags = computed({
   get() {
-    return props.tags
-      .slice()
+    return [...props.tags]
       .filter((_tag, tagIndex) => tagIndex < props.maxTags || showingAllTags.value)
-      .sort((tagA, tagB) => {
+      .toSorted((tagA, tagB) => {
         return (tagA.order ?? 0) < (tagB.order ?? 0) ? -1 : 0
       })
   },
@@ -54,7 +53,7 @@ const sortedTags = computed({
         id: tag.id,
         order,
       }))
-      .map(tag => ({
+      .map((tag) => ({
         id: tag.id,
         order: tag.order,
       }))

package/app/components/bases/BaseToast.vue

@@ -19,16 +19,25 @@ function onClose(event: MouseEvent) {
     emit('close', event, props)
   }
 }
+
+function onKeydown(event: KeyboardEvent) {
+  if ((event.key === 'Enter' || event.key === ' ') && props.hasClose) {
+    onClose(event as unknown as MouseEvent)
+  }
+}
 </script>
 
 <template>
   <div
     class="group flex select-none items-center rounded-full bg-gray-900 px-3 py-2 text-base text-white font-normal dark:bg-gray-100 dark:text-black"
     :class="{ 'cursor-pointer': hasClose }"
+    role="button"
+    tabindex="0"
     @click="onClose"
+    @keydown.prevent="onKeydown"
   >
     <BaseIcon
-      class="flex-initial"
+      class="pointer-events-none flex-initial"
       :status="status"
       :text="text"
     />

package/app/components/fields/FieldDays.vue

@@ -49,7 +49,8 @@ function onUpdateDays(event: MouseEvent, day: number) {
 
   if (days.includes(day)) {
     days.splice(days.indexOf(day), 1)
-  } else {
+  }
+  else {
     days.push(day)
   }
 

package/app/components/fields/FieldEmojis.vue

@@ -31,7 +31,7 @@ const emojisFiltered = computed(() => {
         const englishKeywords = (emoji.keywords.en ?? [])
         const allKeywords = [...localizedKeywords, ...englishKeywords]
 
-        return allKeywords.some(keyword => normalizeText(keyword).includes(searchQueryCleaned))
+        return allKeywords.some((keyword) => normalizeText(keyword).includes(searchQueryCleaned))
       })
 
       return {
@@ -39,7 +39,7 @@ const emojisFiltered = computed(() => {
         emojis: filtered,
       }
     })
-    .filter(category => category.emojis.length > 0)
+    .filter((category) => category.emojis.length > 0)
 })
 
 function onEmojiClick(event: MouseEvent, emoji?: string) {
@@ -69,7 +69,7 @@ function onEmojiClick(event: MouseEvent, emoji?: string) {
         :key="category.category"
       >
         <div
-          v-if="category.emojis.length"
+          v-if="category.emojis.length > 0"
           class="mt-4"
         >
           <div class="mb-4">

package/app/components/fields/FieldLabel.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { FieldLabel } from '../../types/fields'
 
-withDefaults(defineProps<FieldLabel>(), {
+const props = withDefaults(defineProps<FieldLabel>(), {
   disabled: false,
   forField: '',
   hasMarginBottom: false,
@@ -19,21 +19,34 @@ const emit = defineEmits<{
   click: [event: MouseEvent]
 }>()
 
+const isClickable = computed(() => {
+  return !props.loading && !props.disabled
+})
+
 function onClick(event: MouseEvent) {
-  emit('click', event)
+  if (isClickable.value) {
+    emit('click', event)
+  }
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    onClick(event as unknown as MouseEvent)
+  }
 }
 </script>
 
 <template>
-  <label
+  <component
+    :is="forField ? 'label' : (isClickable ? 'button' : 'span')"
     class="flex select-none items-center font-semibold tracking-tight"
     :class="{
       'field-disabled': disabled,
-      'cursor-pointer': !loading && !disabled,
+      'cursor-pointer': isClickable,
       'cursor-wait': loading,
       'text-gray-900 dark:text-gray-100': !lineThrough,
       'text-gray-500 dark:text-gray-500 line-through': lineThrough,
-      'hover:text-black dark:hover:text-white': !disabled && !lineThrough && !loading,
+      'hover:text-black dark:hover:text-white': isClickable && !lineThrough,
       'w-0 truncate': truncate,
       'mb-1.5': size === 'xs' && hasMarginBottom,
       'mb-2': size === 'sm' && hasMarginBottom,
@@ -44,8 +57,11 @@ function onClick(event: MouseEvent) {
       'ml-2': size === 'base' && hasMarginLeft,
       'ml-2.5': size === 'lg' && hasMarginLeft,
     }"
-    :for="forField"
-    @click="onClick"
+    :for="forField || undefined"
+    :tabindex="isClickable && !forField ? 0 : undefined"
+    :type="isClickable && !forField ? 'button' : undefined"
+    @click="isClickable ? onClick : undefined"
+    @keydown.prevent="isClickable ? onKeydown : undefined"
   >
     <BaseIcon
       :icon="icon"
@@ -59,5 +75,5 @@ function onClick(event: MouseEvent) {
       :size="size"
       text="*"
     />
-  </label>
+  </component>
 </template>

package/app/components/fields/FieldMessage.vue

@@ -15,105 +15,73 @@ const { t } = useI18n()
 const validationMessage = computed(() => {
   // Available rules
   // https://vuelidate.js.org/#sub-builtin-validators
-  let message = ''
-
   if (props.validation && props.validation.$dirty) {
     // Required, Required If, Required Unless
-    if (props.validation.required === false || props.validation.requiredIf === false || props.validation.requiredUnless === false) {
-      message = t('required')
-    }
-    // Min Length
-    else if (props.validation.minLength === false) {
-      const min = props.validation.$params.minLength.min
-
-      message = t('minLength', { min })
-    }
-    // Max Length
-    else if (props.validation.maxLength === false) {
-      const max = props.validation.$params.maxLength.max
-
-      message = t('maxLength', { max })
-    }
-    // Min Value
-    else if (props.validation.minValue === false) {
-      const min = props.validation.$params.minValue.min
-
-      message = t('minValue', { min })
-    }
-    // Max Value
-    else if (props.validation.maxValue === false) {
-      const max = props.validation.$params.maxValue.max
-
-      message = t('maxValue', { max })
-    }
-    // Between
-    else if (props.validation.between === false) {
-      const min = props.validation.$params.between.min
-      const max = props.validation.$params.between.max
-
-      message = t('between', {
-        max,
-        min,
-      })
-    }
-    // Alpha
-    else if (props.validation.alpha === false) {
-      message = t('alpha')
-    }
-    // Alpha Num
-    else if (props.validation.alphaNum === false) {
-      message = t('alphaNum')
-    }
-    // Numeric
-    else if (props.validation.numeric === false) {
-      message = t('numeric')
-    }
-    // Integer
-    else if (props.validation.integer === false) {
-      message = t('integer')
-    }
-    // Integer
-    else if (props.validation.decimal === false) {
-      message = t('decimal')
-    }
-    // Email
-    else if (props.validation.email === false) {
-      message = t('email')
-    }
-    // IP Address
-    else if (props.validation.ipAddress === false) {
-      message = t('ipAddress')
-    }
-    // Mac Address
-    else if (props.validation.macAddress === false) {
-      message = t('maxAddress')
-    }
-    // Same As
-    else if (props.validation.sameAs === false) {
-      const field = props.validation.$params.sameAs.eq
-
-      message = t('sameAs', { field })
-    }
-    // Url
-    else if (props.validation.url === false) {
-      message = t('url')
-    }
-    // Other rules
-    else if (props.validation.$invalid === true) {
-      message = t('invalid')
+    switch (false) {
+      case props.validation.alpha: {
+        return t('alpha')
+      }
+      case props.validation.alphaNum: {
+        return t('alphaNum')
+      }
+      case props.validation.between: {
+        return t('between', {
+          max: props.validation.$params.between.max,
+          min: props.validation.$params.between.min,
+        })
+      }
+      case props.validation.decimal: {
+        return t('decimal')
+      }
+      case props.validation.email: {
+        return t('email')
+      }
+      case props.validation.integer: {
+        return t('integer')
+      }
+      case props.validation.ipAddress: {
+        return t('ipAddress')
+      }
+      case props.validation.macAddress: {
+        return t('maxAddress')
+      }
+      case props.validation.maxLength: {
+        return t('maxLength', { max: props.validation.$params.maxLength.max })
+      }
+      case props.validation.maxValue: {
+        return t('maxValue', { max: props.validation.$params.maxValue.max })
+      }
+      case props.validation.minLength: {
+        return t('minLength', { min: props.validation.$params.minLength.min })
+      }
+      case props.validation.minValue: {
+        return t('minValue', { min: props.validation.$params.minValue.min })
+      }
+      case props.validation.numeric: {
+        return t('numeric')
+      }
+      case props.validation.required:
+      case props.validation.requiredIf:
+      case props.validation.requiredUnless: {
+        return t('required')
+      }
+      case props.validation.sameAs: {
+        return t('sameAs', { field: props.validation.$params.sameAs.eq })
+      }
+      case props.validation.url: {
+        return t('url')
+      }
+      default: {
+        if (props.validation.$invalid === true) {
+          return t('invalid')
+        }
+      }
     }
   }
-
-  return message
 })
 
 const status = computed(() => {
-  if (validationMessage.value && !props.hideError) {
-    return 'error'
-  }
-  else {
-    return 'default'
-  }
+  return validationMessage.value && !props.hideError ? 'error' : 'default'
 })
 
 const text = computed<BaseTextText>(() => {

package/app/components/fields/FieldSelect.vue

@@ -37,7 +37,7 @@ const modelValue = defineModel<FieldSelect['modelValue']>({ default: '' })
 const opened = ref(false)
 
 const computedColumns = computed(() => {
-  if (props.columns.length) {
+  if (props.columns.length > 0) {
     return props.columns
   }
 
@@ -48,7 +48,7 @@ const computedOptions = computed(() => {
   const options: FieldSelectOption[] = []
 
   // Add index to each option
-  if (props.columns.length) {
+  if (props.columns.length > 0) {
     for (const column of props.columns) {
       for (const columnOption of column.options) {
         options.push(columnOption)
@@ -70,6 +70,12 @@ const selectedOption = computed(() => {
   })
 })
 
+function onBlur() {
+  if (props.openOnHover && !props.disabled) {
+    opened.value = false
+  }
+}
+
 function onClose() {
   reset()
 }
@@ -90,6 +96,12 @@ function onContainerKeypress(event: KeyboardEvent) {
   }
 }
 
+function onFocus() {
+  if (props.openOnHover && !props.disabled) {
+    opened.value = true
+  }
+}
+
 function onLabelClick() {
   if (!props.disabled) {
     opened.value = !opened.value
@@ -111,17 +123,23 @@ function onMouseLeave() {
 function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
   if (!props.disabled) {
     // Check that the option is not currently selected
-    if ((selectedOption.value || {}).value !== option.value) {
-      selectOption(event, option.value)
+    if ((selectedOption.value || {}).value === option.value) {
+      reset()
     }
     else {
-      reset()
+      selectOption(event, option.value)
     }
 
     emit('optionClick', event, option.value)
   }
 }
 
+function onOptionKeydown(event: KeyboardEvent, option: FieldSelectOption) {
+  if ((event.key === 'Enter' || event.key === ' ') && !props.disabled) {
+    onOptionClick(event as unknown as MouseEvent, option)
+  }
+}
+
 function reset() {
   opened.value = false
 }
@@ -155,8 +173,6 @@ function selectOption(event: MouseEvent, value: string) {
         'field-disabled': disabled,
         'cursor-pointer': !disabled,
       }"
-      @mouseenter="onMouseEnter"
-      @mouseleave="onMouseLeave"
     >
       <div
         class="relative"
@@ -177,9 +193,15 @@ function selectOption(event: MouseEvent, value: string) {
             'text-sm h-12': size === 'base',
             'text-base h-14': size === 'lg',
           }"
-          :tabindex="disabled ? -1 : 0"
+          role="button"
+          :aria-disabled="disabled"
+          tabindex="0"
           @click="onContainerClick"
           @keypress.prevent="onContainerKeypress"
+          @mouseenter="onMouseEnter"
+          @mouseleave="onMouseLeave"
+          @focusin="onFocus"
+          @focusout="onBlur"
         >
           <template v-if="selectedOption">
             <BaseIcon
@@ -258,7 +280,10 @@ function selectOption(event: MouseEvent, value: string) {
                   'text-gray-900 dark:text-gray-100': selectedOption && option.value === selectedOption.value,
                   'bg-white dark:bg-gray-900': selectedOption && option.value !== selectedOption.value,
                 }"
+                role="button"
+                tabindex="0"
                 @click="onOptionClick($event, option)"
+                @keydown.prevent="onOptionKeydown($event, option)"
               >
                 <BaseIcon
                   v-if="option.text"

package/app/components/fields/FieldTime.vue

@@ -29,7 +29,14 @@ const inputRef = ref<HTMLInputElement>()
 function onContainerClick() {
   if (!props.disabled && inputRef.value) {
     inputRef.value.focus()
-    inputRef.value.showPicker?.()
+    inputRef.value.showPicker()
+  }
+}
+
+function onContainerKeydown(event: KeyboardEvent) {
+  if ((event.key === 'Enter' || event.key === ' ') && !props.disabled && inputRef.value) {
+    inputRef.value.focus()
+    inputRef.value.showPicker()
   }
 }
 
@@ -63,7 +70,11 @@ function onFieldBlur(event: FocusEvent) {
         'text-sm h-12': size === 'base',
         'text-base h-14': size === 'lg',
       }"
+      role="button"
+      :aria-disabled="disabled"
+      tabindex="0"
       @click="onContainerClick"
+      @keydown.prevent="onContainerKeydown"
     >
       <BaseIcon
         :icon="getIcon('clock')"

package/app/composables/useChartist.ts

@@ -50,7 +50,7 @@ export default function useChartist() {
           // Clean up the dash attributes after it finishes
           const total = delay + duration + (stagger ? stagger * (lineCtx.seriesIndex ?? 0) : 0)
 
-          window.setTimeout(() => {
+          globalThis.setTimeout(() => {
             lineCtx.element.attr({
               'stroke-dasharray': undefined,
               'stroke-dashoffset': undefined,

package/app/composables/useDevice.ts

@@ -1,3 +1,4 @@
+/* eslint-disable n/no-unsupported-features/node-builtins */
 export default function useDevice() {
   const isDesktopBrowser = computed(() => {
     if (typeof navigator === 'undefined') {

package/app/composables/useLayerUtils.ts

@@ -1,24 +1,24 @@
 import numbroLib from 'numbro'
 
-export default function useLayerUtils() {
-  const normalizeText = (text: string) => {
-    return text
-      .toLowerCase()
-      .normalize('NFD')
-      .replace(/[\u0300-\u036F]/g, '')
-  }
-
-  const numbro = (number: '∞' | number | undefined, format?: string) => {
-    if (!number && number !== 0) {
-      return ''
-    }
-    else if (number === '∞' || number % 1 !== 0) {
-      return `${number}`
-    }
+const normalizeText = (text: string) => {
+  return text
+    .toLowerCase()
+    .normalize('NFD')
+    .replaceAll(/[\u0300-\u036F]/g, '')
+}
 
-    return numbroLib(number).format(format || '0,0')
+const numbro = (number: '∞' | number | undefined, format?: string) => {
+  if (!number && number !== 0) {
+    return ''
   }
+  else if (number === '∞' || number % 1 !== 0) {
+    return `${number}`
+  }
+
+  return numbroLib(number).format(format || '0,0')
+}
 
+export default function useLayerUtils() {
   return {
     normalizeText,
     numbro,

package/app/composables/useToasts.ts

@@ -20,7 +20,7 @@ export default function useToast() {
   const createToast = (message: string, status: BaseStatus = 'success', i18nParams?: Record<string, number | string>) => {
     if (import.meta.client) {
       const toast: BaseToast = {
-        id: Math.floor((1 + Math.random()) * 0x10000).toString(16),
+        id: Math.floor((1 + Math.random()) * 0x1_00_00).toString(16),
         status: status || 'success',
         text: message.includes(' ') ? message : nuxtApp.$i18n.t(`toasts.${message}`, i18nParams || {}),
       }

package/app/composables/useTranslation.ts

@@ -35,7 +35,7 @@ export default function useTranslation(slots: SetupContext['slots'], locale: Ref
         const endPosition = content.indexOf(separator, startPosition)
 
         content = content
-          .substring(startPosition, endPosition > 0 ? endPosition : content.length)
+          .slice(startPosition, endPosition > 0 ? endPosition : content.length)
           .trim()
 
         // Markdown parser

package/app/types/bases.d.ts

@@ -141,6 +141,7 @@ export interface BaseHeading {
   alignment?: BaseAlignment
   size?: BaseHeadingSize
   tag?: BaseHeadingTag
+  text?: BaseTextText
 }
 
 export type BaseHeadingSize
@@ -217,6 +218,7 @@ export type BaseOverlayPosition = 'absolute' | 'fixed'
 export interface BaseParagraph {
   alignment?: BaseAlignment
   size?: BaseParagraphSize
+  text?: BaseTextText
 }
 
 export type BaseParagraphSize = 'base' | 'lg' | 'sm'

package/nuxt.config.ts

@@ -1,9 +1,9 @@
-import { dirname, join } from 'node:path'
+import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { defineNuxtConfig } from 'nuxt/config'
-import uno from './uno.config'
+import uno from './uno.config.js'
 
-const currentDir = dirname(fileURLToPath(import.meta.url))
+const currentDir = path.dirname(fileURLToPath(import.meta.url))
 
 export default defineNuxtConfig({
   // --> BUILD <--
@@ -44,9 +44,9 @@ export default defineNuxtConfig({
 
   css: [
     '@unocss/reset/tailwind.css',
-    join(currentDir, './app/assets/styles/chartist.css'),
-    join(currentDir, './app/assets/styles/colors.css'),
-    join(currentDir, './app/assets/styles/v-popper.css'),
+    path.join(currentDir, './app/assets/styles/chartist.css'),
+    path.join(currentDir, './app/assets/styles/colors.css'),
+    path.join(currentDir, './app/assets/styles/v-popper.css'),
   ],
 
   modules: [

package/package.json

@@ -1,30 +1,27 @@
 {
   "name": "@saasmakers/ui",
-  "type": "module",
-  "version": "0.1.107",
+  "version": "0.1.108",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
-  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/saasmakers/saasmakers-turborepo.git",
     "directory": "packages/ui"
   },
+  "license": "MIT",
+  "author": "SaaS Makers",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": "./nuxt.config.ts"
+  },
   "main": "nuxt.config.ts",
   "types": "app/types/global.d.ts",
-  "publishConfig": {
-    "access": "public"
-  },
   "files": [
     "app",
-    "nuxt.config.ts",
     "public",
     "uno.config.ts"
   ],
-  "peerDependencies": {
-    "@saasmakers/shared": "^0.1.13",
-    "nuxt": "4.2.2"
-  },
   "dependencies": {
     "@capacitor/preferences": "8.0.0",
     "@nuxt/icon": "2.1.1",
@@ -58,10 +55,17 @@
   "devDependencies": {
     "nuxt": "4.2.2",
     "typescript": "5.9.3",
-    "@saasmakers/shared": "0.1.13"
+    "@saasmakers/shared": "0.1.15"
+  },
+  "peerDependencies": {
+    "@saasmakers/shared": "^0.1.15",
+    "nuxt": "4.2.2"
+  },
+  "publishConfig": {
+    "access": "public"
   },
   "scripts": {
-    "dev": "storybook dev -p 3103",
+    "dev": "storybook dev -p 3103 --no-open",
     "lint": "eslint .",
     "typecheck": "nuxi typecheck"
   }