@saasmakers/ui 0.1.107 → 0.1.109

package/app/components/bases/BaseAlert.vue

@@ -25,17 +25,20 @@ const { getIcon } = useLayerIcons()
 const isClosed = ref(false)
 
 const buttonColor = computed<BaseColor>(() => {
-  if (props.status === 'error') {
-    return 'red'
+  switch (props.status) {
+    case 'error': {
+      return 'red'
+    }
+    case 'success': {
+      return 'green'
+    }
+    case 'warning': {
+      return 'orange'
+    }
+    default: {
+      return 'indigo'
+    }
   }
-  else if (props.status === 'success') {
-    return 'green'
-  }
-  else if (props.status === 'warning') {
-    return 'orange'
-  }
-
-  return 'indigo'
 })
 
 onBeforeMount(async () => {

package/app/components/bases/BaseAvatar.vue

@@ -31,6 +31,10 @@ const loaded = ref(false)
 
 const { t } = useI18n()
 
+const isClickable = computed(() => {
+  return props.to || props.editable
+})
+
 function onAvatarSelected(event: Event) {
   const file = (event.target as HTMLInputElement).files?.[0]
 
@@ -43,6 +47,10 @@ function onAvatarSelected(event: Event) {
   }
 }
 
+function onBlur() {
+  hovered.value = false
+}
+
 function onClick(event: MouseEvent) {
   emit('click', event)
 
@@ -56,6 +64,16 @@ function onError() {
   loaded.value = true
 }
 
+function onFocus() {
+  hovered.value = true
+}
+
+function onKeyDown(event: KeyboardEvent) {
+  if (isClickable.value) {
+    (event.currentTarget as HTMLElement).click()
+  }
+}
+
 function onLoad() {
   loaded.value = true
 }
@@ -76,6 +94,8 @@ function onMouseLeave() {
     :to="to"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
+    @focusin="onFocus"
+    @focusout="onBlur"
   >
     <div
       :aria-label="editable ? t('edit') : undefined"
@@ -83,10 +103,14 @@ function onMouseLeave() {
       :class="{
         'rounded-full': circular,
         'shadow': shadow,
-        'cursor-pointer': to || editable,
+        'cursor-pointer': isClickable,
       }"
-      :role="editable ? 'button' : undefined"
+      role="button"
+      :aria-disabled="!isClickable"
+      tabindex="0"
       @click="onClick"
+      @keydown.enter="onKeyDown"
+      @keydown.space.prevent="onKeyDown"
     >
       <img
         class="h-full w-full object-cover drag-none"
@@ -97,6 +121,7 @@ function onMouseLeave() {
           'border-3': borderWidth === 3,
           'border-4': borderWidth === 4,
         }"
+        :alt="editable ? t('edit') : ''"
         loading="lazy"
         :src="!error && src ? src : '/images/bases/BaseAvatar/default.svg'"
         @error="onError"
@@ -114,6 +139,7 @@ function onMouseLeave() {
         v-if="editable"
         ref="fileInput"
         accept="image/*"
+        :aria-label="t('edit')"
         class="hidden"
         type="file"
         @change="onAvatarSelected"

package/app/components/bases/BaseCharacter.vue

@@ -15,17 +15,18 @@ const width = computed(() => {
   }
 
   switch (props.character) {
-    case 'nada':
+    case 'nada': {
       return size[props.size] + 4
-
-    case 'power':
+    }
+    case 'power': {
       return size[props.size] + 3
-
-    case 'yoda':
+    }
+    case 'yoda': {
       return size[props.size] + 8
-
-    default:
+    }
+    default: {
       return size[props.size]
+    }
   }
 })
 </script>

package/app/components/bases/BaseChart.vue

@@ -2,7 +2,7 @@
 import { BarChart, LineChart, PieChart } from 'chartist'
 import type { BaseChart } from '../../types/bases'
 
-const props = withDefaults(defineProps<BaseChart>(), {
+const properties = withDefaults(defineProps<BaseChart>(), {
   data: () => ({
     labels: [],
     series: [],
@@ -16,18 +16,12 @@ const chart = ref()
 const root = ref<HTMLDivElement>()
 
 watch(
-  () => props.data,
+  () => properties.data,
   () => {
     if (chart.value) {
-      if (props.type === 'line') {
-        chart.value.update((props.data as ChartistLineChartData), props.options)
-      }
-      else if (props.type === 'bar') {
-        chart.value.update((props.data as ChartistBarChartData), props.options)
-      }
-      else if (props.type === 'pie') {
-        chart.value.update((props.data as ChartistPieChartData), props.options)
-      }
+      const data = properties.data
+
+      return chart.value.update(data, properties.options)
     }
   },
   { deep: true },
@@ -35,14 +29,22 @@ watch(
 
 onMounted(() => {
   if (root.value) {
-    if (props.type === 'line') {
-      chart.value = new LineChart(root.value, (props.data as ChartistLineChartData), props.options)
-    }
-    else if (props.type === 'bar') {
-      chart.value = new BarChart(root.value, (props.data as ChartistBarChartData), props.options)
-    }
-    else if (props.type === 'pie') {
-      chart.value = new PieChart(root.value, (props.data as ChartistPieChartData), props.options)
+    switch (properties.type) {
+      case 'bar': {
+        chart.value = new BarChart(root.value, (properties.data as ChartistBarChartData), properties.options)
+
+        break
+      }
+      case 'line': {
+        chart.value = new LineChart(root.value, (properties.data as ChartistLineChartData), properties.options)
+
+        break
+      }
+      case 'pie': {
+        chart.value = new PieChart(root.value, (properties.data as ChartistPieChartData), properties.options)
+
+        break
+      }
     }
   }
 })

package/app/components/bases/BaseEmoji.vue

@@ -21,6 +21,12 @@ const { urls } = useAppConfig()
 function onClick(event: MouseEvent) {
   emit('click', event, props.emoji)
 }
+
+function onKeyDown(event: KeyboardEvent) {
+  if (props.clickable) {
+    (event.currentTarget as HTMLElement).click()
+  }
+}
 </script>
 
 <template>
@@ -43,11 +49,15 @@ function onClick(event: MouseEvent) {
       'h-16 w-16': size === '3xl' && hasBox,
       'h-18 w-18': size === '4xl' && hasBox,
     }"
+    role="button"
+    tabindex="0"
     @click="onClick"
+    @keydown.enter="onKeyDown"
+    @keydown.space.prevent="onKeyDown"
   >
     <img
       v-if="emoji"
-      class="flex"
+      class="pointer-events-none flex"
       :class="{
         'h-2.5 w-2.5': size === '3xs',
         'h-3 w-3': size === '2xs',
@@ -60,9 +70,9 @@ function onClick(event: MouseEvent) {
         'h-10 w-10': size === '3xl',
         'h-12 w-12': size === '4xl',
       }"
+      :alt="emoji"
       loading="lazy"
       :src="`${urls.storage}/images/emojis/${emoji}.svg`"
-      @click.stop="onClick"
     >
 
     <slot />

package/app/components/bases/BaseHeading.stories.ts

@@ -39,7 +39,7 @@ export default {
 
 export const Default: StoryObj<typeof BaseHeading> = {
   args: { tag: 'h1' } satisfies Partial<BaseHeading>,
-  render: args => ({
+  render: (args) => ({
     components: { BaseHeading },
     setup() {
       return { args }

package/app/components/bases/BaseHeading.vue

@@ -5,6 +5,7 @@ withDefaults(defineProps<BaseHeading>(), {
   alignment: 'left',
   size: 'base',
   tag: 'h1',
+  text: '',
 })
 
 defineSlots<{
@@ -27,6 +28,11 @@ defineSlots<{
       'text-2xl sm:text-4xl': size === 'lg',
     }"
   >
-    <slot />
+    <BaseText
+      v-if="text"
+      :text="text"
+    />
+
+    <slot v-else />
   </component>
 </template>

package/app/components/bases/BaseIcon.vue

@@ -29,40 +29,47 @@ const confirming = ref(false)
 const { t } = useI18n()
 const { getIcon } = useLayerIcons()
 
+const isClickable = computed(() => {
+  return props.clickable || props.to
+})
+
 const statusIcon = computed<string | undefined>(() => {
   switch (props.status) {
-    case 'error':
+    case 'error': {
       return getIcon('closeCircle')
-
-    case 'info':
+    }
+    case 'info': {
       return getIcon('infoCircle')
-
-    case 'success':
+    }
+    case 'success': {
       return getIcon('checkCircle')
-
-    case 'warning':
+    }
+    case 'warning': {
       return getIcon('exclamationCircle')
-
-    default:
-      return undefined
+    }
+    default: {
+      return
+    }
   }
 })
 
 const statusColor = computed<BaseColor | undefined>(() => {
-  if (props.status === 'error') {
-    return 'red'
-  }
-  else if (props.status === 'info') {
-    return 'indigo'
-  }
-  else if (props.status === 'success') {
-    return 'green'
-  }
-  else if (props.status === 'warning') {
-    return 'orange'
-  }
-  else {
-    return undefined
+  switch (props.status) {
+    case 'error': {
+      return 'red'
+    }
+    case 'info': {
+      return 'indigo'
+    }
+    case 'success': {
+      return 'green'
+    }
+    case 'warning': {
+      return 'orange'
+    }
+    default: {
+      return
+    }
   }
 })
 
@@ -91,17 +98,27 @@ function onClick(event: MouseEvent) {
 
   emit('click', event)
 }
+
+function onKeyDown(event: KeyboardEvent) {
+  if (isClickable.value) {
+    (event.currentTarget as HTMLElement).click()
+  }
+}
 </script>
 
 <template>
   <div
     class="flex items-center"
     :class="{
-      'cursor-pointer hover:underline hover:text-gray-900 dark:hover:text-gray-100': clickable || to,
+      'cursor-pointer hover:underline hover:text-gray-900 dark:hover:text-gray-100': isClickable,
       'flex-row': !reverse,
       'flex-row-reverse': reverse,
     }"
+    role="button"
+    tabindex="0"
     @click="onClick"
+    @keydown.enter="onKeyDown"
+    @keydown.space.prevent="onKeyDown"
   >
     <component
       :is="to ? NuxtLinkLocale : 'span'"

package/app/components/bases/BaseMessage.vue

@@ -32,17 +32,15 @@ defineSlots<{
         alignment="center"
         size="sm"
         tag="h1"
-      >
-        <span v-html="title" />
-      </BaseHeading>
+        :text="title"
+      />
 
       <BaseParagraph
         v-if="description"
         alignment="center"
         class="mt-2"
-      >
-        <span v-html="description" />
-      </BaseParagraph>
+        :text="description"
+      />
 
       <div
         v-if="$slots.default"

package/app/components/bases/BaseMetric.vue

@@ -14,17 +14,18 @@ const { getIcon } = useLayerIcons()
 
 const performanceIcon = computed<string | undefined>(() => {
   switch (props.performance) {
-    case 'down':
+    case 'down': {
       return getIcon('arrowDown')
-
-    case 'equal':
+    }
+    case 'equal': {
       return getIcon('arrowRight')
-
-    case 'up':
+    }
+    case 'up': {
       return getIcon('arrowUp')
-
-    default:
-      return undefined
+    }
+    default: {
+      return
+    }
   }
 })
 </script>

package/app/components/bases/BaseOverlay.vue

@@ -4,7 +4,7 @@ import { Motion } from 'motion-v'
 import type { BaseOverlay } from '../../types/bases'
 import useMotion from '../../composables/useMotion'
 
-withDefaults(defineProps<BaseOverlay>(), {
+const props = withDefaults(defineProps<BaseOverlay>(), {
   active: true,
   clickable: true,
   fixed: true,
@@ -25,6 +25,10 @@ defineSlots<{
 const { getIcon } = useLayerIcons()
 const { fadeIn } = useMotion()
 
+const isClickable = computed(() => {
+  return props.clickable || props.hasClose
+})
+
 function onClick(event: MouseEvent) {
   emit('click', event)
 }
@@ -33,6 +37,12 @@ function onClose(event: KeyboardEvent | MouseEvent) {
   emit('close', event)
 }
 
+function onKeyDown(event: KeyboardEvent) {
+  if (isClickable.value) {
+    (event.currentTarget as HTMLElement).click()
+  }
+}
+
 onKeyStroke('Escape', (event) => {
   event.preventDefault()
 
@@ -44,13 +54,18 @@ onKeyStroke('Escape', (event) => {
   <div
     :class="{
       'fixed inset-0': fixed,
-      'cursor-pointer': clickable || hasClose,
+      'cursor-pointer': isClickable,
     }"
+    role="button"
+    tabindex="0"
     @click="onClick"
+    @keydown.enter="onKeyDown"
+    @keydown.space.prevent="onKeyDown"
   >
     <BaseIcon
       v-if="hasClose"
-      class="absolute right-4 top-4 z-50 text-gray-200 dark:text-gray-800"
+      class="pointer-events-auto absolute right-4 top-4 z-50 text-gray-200 dark:text-gray-800"
+      clickable
       :icon="getIcon('close')"
       @click="onClose"
     />

package/app/components/bases/BaseParagraph.stories.ts

@@ -26,7 +26,7 @@ export default {
 
 export const Default: StoryObj<typeof BaseParagraph> = {
   args: {},
-  render: args => ({
+  render: (args) => ({
     components: { BaseParagraph },
     setup() {
       return { args }

package/app/components/bases/BaseParagraph.vue

@@ -4,6 +4,7 @@ import type { BaseParagraph } from '../../types/bases'
 withDefaults(defineProps<BaseParagraph>(), {
   alignment: 'left',
   size: 'base',
+  text: '',
 })
 
 defineSlots<{
@@ -23,6 +24,11 @@ defineSlots<{
       'text-lg sm:text-xl': size === 'lg',
     }"
   >
-    <slot />
+    <BaseText
+      v-if="text"
+      :text="text"
+    />
+
+    <slot v-else />
   </p>
 </template>

package/app/components/bases/BaseQuote.stories.ts

@@ -53,7 +53,7 @@ export default {
 
 export const Default: StoryObj<typeof BaseQuote> = {
   args: {},
-  render: args => ({
+  render: (args) => ({
     components: { BaseQuote },
     setup() {
       return { args }

package/app/components/bases/BaseQuote.vue

@@ -34,31 +34,30 @@ const { getIcon } = useLayerIcons()
 const closed = ref(false)
 
 const finalBackground = computed(() => {
-  if ((props.reverse && props.background !== 'gray-light') || props.background === 'gray') {
-    return 'gray'
-  }
-  else {
-    return props.background
-  }
+  const isBackgroundGray = props.background === 'gray'
+  const isReverseWithNonGrayLight = props.reverse && props.background !== 'gray-light'
+
+  return (isBackgroundGray || isReverseWithNonGrayLight) ? 'gray' : props.background
 })
 
 const finalReverse = computed(() => {
-  return props.reverse !== null ? props.reverse : props.character !== 'julien'
+  return props.reverse === null ? props.character !== 'julien' : props.reverse
 })
 
 onMounted(() => {
-  if (props.hasClose && props.closingId) {
-    closed.value = localStorage.getItem(props.closingId) === 'true'
-  }
-  else {
-    closed.value = false
-  }
+  closed.value = props.hasClose && props.closingId ? localStorage.getItem(props.closingId) === 'true' : false
 })
 
 function onBubbleClick(event: MouseEvent) {
   emit('click', event)
 }
 
+function onBubbleKeyDown(event: KeyboardEvent) {
+  if (props.clickable) {
+    (event.currentTarget as HTMLElement).click()
+  }
+}
+
 function onClose(event: MouseEvent) {
   if (props.closingId) {
     localStorage.setItem(props.closingId, 'true')
@@ -108,7 +107,12 @@ function onClose(event: MouseEvent) {
           'border-green-600 dark:border-green-400 text-green-600 dark:text-green-400': status === 'success',
           'border-orange-600 dark:border-orange-400 text-orange-600 dark:text-orange-400': status === 'warning',
         }"
+        role="button"
+        :aria-disabled="!clickable"
+        tabindex="0"
         @click="onBubbleClick"
+        @keydown.enter="onBubbleKeyDown"
+        @keydown.space.prevent="onBubbleKeyDown"
       >
         <div class="flex items-center">
           <div
@@ -119,10 +123,9 @@ function onClose(event: MouseEvent) {
           </div>
 
           <div class="flex-1">
-            <p
-              v-if="!forceSlot"
-              v-html="translatedContent"
-            />
+            <p v-if="!forceSlot">
+              {{ translatedContent }}
+            </p>
 
             <slot v-else />
           </div>

package/app/components/bases/BaseSpinner.vue

@@ -18,6 +18,12 @@ const emit = defineEmits<{
 function onClick(event: MouseEvent) {
   emit('click', event, props.id)
 }
+
+function onKeyDown(event: KeyboardEvent) {
+  if (props.clickable) {
+    (event.currentTarget as HTMLElement).click()
+  }
+}
 </script>
 
 <template>
@@ -28,7 +34,12 @@ function onClick(event: MouseEvent) {
       'flex-row': !reverse,
       'flex-row-reverse': reverse,
     }"
+    role="button"
+    :aria-disabled="!clickable"
+    tabindex="0"
     @click="onClick"
+    @keydown.enter="onKeyDown"
+    @keydown.space.prevent="onKeyDown"
   >
     <div
       class="relative inline-block cursor-wait flex-initial"
@@ -44,7 +55,6 @@ function onClick(event: MouseEvent) {
         'h-10 w-10': size === '3xl',
         'h-12 w-12': size === '4xl',
       }"
-      @click="onClick"
     >
       <div
         v-for="wave in 2"

package/app/components/bases/BaseTag.vue

@@ -49,7 +49,11 @@ onBeforeMount(() => {
 })
 
 function initializeFormForExistingTag() {
-  form.name = String(props.text)?.substring(1)
+  form.name = String(props.text)?.slice(1)
+}
+
+function onBlur() {
+  hovered.value = false
 }
 
 function onClick(event: MouseEvent) {
@@ -58,6 +62,10 @@ function onClick(event: MouseEvent) {
   }
 }
 
+function onFocus() {
+  hovered.value = true
+}
+
 function onInputBlur(event: FocusEvent) {
   emit('inputBlur', event, form.name.trim(), props.id)
 }
@@ -66,6 +74,12 @@ function onInputSubmit(event: KeyboardEvent) {
   emit('inputSubmit', event, form.name.trim(), props.id)
 }
 
+function onKeyDown(event: KeyboardEvent) {
+  if (props.clickable) {
+    (event.currentTarget as HTMLElement).click()
+  }
+}
+
 function onMouseEnter() {
   hovered.value = true
 }
@@ -82,9 +96,16 @@ function onRemove(event: MouseEvent) {
 <template>
   <span
     class="flex select-none"
+    role="button"
+    :aria-disabled="!clickable"
+    tabindex="0"
     @click.stop="onClick"
+    @keydown.enter.stop="onKeyDown"
+    @keydown.space.prevent.stop="onKeyDown"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
+    @focusin="onFocus"
+    @focusout="onBlur"
   >
     <component
       :is="to ? NuxtLinkLocale : 'span'"