@saasmakers/ui 1.4.51 → 1.4.53

package/app/components/bases/BaseBordered.vue

@@ -35,7 +35,6 @@ defineSlots<{
       }"
       size="xs"
       :text="title"
-      uppercase
     />
 
     <div

package/app/components/bases/BaseCard.vue

@@ -10,6 +10,7 @@ const props = withDefaults(defineProps<BaseCard>(), {
   details: '',
   detailsIcon: undefined,
   direction: 'horizontal',
+  disabled: false,
   emoji: undefined,
   hasBackground: true,
   hasChevron: false,
@@ -17,6 +18,7 @@ const props = withDefaults(defineProps<BaseCard>(), {
   id: undefined,
   image: '',
   isSelected: false,
+  size: 'base',
   title: undefined,
   titleIcon: undefined,
   to: undefined,
@@ -43,25 +45,32 @@ const hasAvatarBox = computed<boolean>(() => {
 })
 
 const isClickable = computed(() => {
-  return props.to || props.clickable
+  return !props.disabled && (props.to || props.clickable)
 })
 
 function onClick(event: MouseEvent) {
+  if (props.disabled) {
+    return
+  }
+
   emit('click', event, props.id)
 }
 </script>
 
 <template>
   <component
-    :is="to ? NuxtLinkLocale : 'div'"
+    :is="to && !disabled ? NuxtLinkLocale : 'div'"
     class="group flex flex-col"
     :class="{
       'cursor-pointer': isClickable,
-      'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-1.5 pr-2.5': hasBackground,
+      'pointer-events-none': disabled,
+      'opacity-50': disabled,
+      'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-1.5 pr-2.5': hasBackground && size === 'base',
+      'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-2.5 pr-4': hasBackground && size === 'lg',
       'hover:border-gray-300 dark:hover:border-gray-700': hasBackground && isClickable,
       'rounded-xl': hasBackground,
     }"
-    :to="to"
+    :to="disabled ? undefined : to"
     @click="onClick"
   >
     <div
@@ -76,20 +85,28 @@ function onClick(event: MouseEvent) {
 
         <span
           v-if="hasAvatarBox"
-          class="relative z-10 h-9 w-9 flex items-center justify-center flex-initial"
+          class="relative z-10 flex items-center justify-center flex-initial"
           :class="{
             'border shadow-inner': !avatar && !image,
             'rounded-lg': !avatar && !image,
             'border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-900': !avatar && !image,
-            'mr-2': direction === 'horizontal',
-            'mb-1': direction === 'vertical',
+            'mr-2': direction === 'horizontal' && size === 'base',
+            'mr-3': direction === 'horizontal' && size === 'lg',
+            'mb-1': direction === 'vertical' && size === 'base',
+            'mb-1.5': direction === 'vertical' && size === 'lg',
+            'h-9 w-9': size === 'base',
+            'h-11 w-11': size === 'lg',
           }"
         >
           <slot name="innerBoxLeft" />
 
           <BaseAvatar
             v-if="avatar"
-            class="h-10 w-10 rounded-lg flex-initial"
+            class="rounded-lg flex-initial"
+            :class="{
+              'h-10 w-10': size === 'base',
+              'h-12 w-12': size === 'lg',
+            }"
             :src="avatar"
           />
 
@@ -98,18 +115,26 @@ function onClick(event: MouseEvent) {
             class="m-0.5"
             :emoji="emoji"
             :has-box="false"
+            :size="size === 'lg' ? 'lg' : 'base'"
           />
 
           <BaseIcon
             v-else-if="icon"
-            class="text-lg"
+            :class="{
+              'text-lg': size === 'base',
+              'text-2xl': size === 'lg',
+            }"
             :color="color"
             :icon="icon"
           />
 
           <img
             v-else-if="image"
-            class="h-9 w-9 rounded-lg object-cover shadow-sm drag-none flex-initial"
+            class="rounded-lg object-cover shadow-sm drag-none flex-initial"
+            :class="{
+              'h-9 w-9': size === 'base',
+              'h-11 w-11': size === 'lg',
+            }"
             :alt="title"
             loading="lazy"
             :src="image"
@@ -124,17 +149,24 @@ function onClick(event: MouseEvent) {
       <div
         class="min-w-0 flex flex-1 flex-col justify-center leading-snug"
         :class="{
-          'mr-4': direction === 'horizontal',
+          'mr-4': direction === 'horizontal' && size === 'base',
+          'mr-5': direction === 'horizontal' && size === 'lg',
           'items-center': direction === 'vertical',
         }"
       >
-        <div class="w-full flex flex-col gap-0">
+        <div
+          class="w-full flex flex-col"
+          :class="{
+            'gap-0': size === 'base',
+            'gap-0.5': size === 'lg',
+          }"
+        >
           <BaseIcon
             v-if="title"
             class="w-full"
             :class="{ 'self-center': !hasAvatarBox }"
             :icon="titleIcon"
-            size="base"
+            :size="size === 'lg' ? 'base' : 'sm'"
             :text="title"
             truncate
           />
@@ -142,8 +174,8 @@ function onClick(event: MouseEvent) {
           <BaseText
             v-if="description"
             block
-            class="text-gray-600 leading-4 dark:text-gray-400"
-            size="2xs"
+            class="text-gray-600 dark:text-gray-400"
+            :size="size === 'lg' ? 'xs' : '2xs'"
             :text="description"
           />
         </div>
@@ -155,7 +187,7 @@ function onClick(event: MouseEvent) {
             v-if="details"
             class="mt-0.5 whitespace-nowrap text-gray-700 font-semibold tracking-tighter dark:text-gray-300"
             :icon="detailsIcon"
-            size="2xs"
+            :size="size === 'lg' ? 'xs' : '2xs'"
             :text="details"
           />
         </div>
@@ -163,14 +195,23 @@ function onClick(event: MouseEvent) {
 
       <BaseIcon
         v-if="isSelected"
-        class="mr-1.5 self-center text-2xl flex-initial"
+        class="mr-1.5 self-center flex-initial"
+        :class="{
+          'text-2xl': size === 'base',
+          'text-3xl': size === 'lg',
+        }"
         color="green"
         :icon="getIcon('checkCircle')"
       />
 
       <BaseIcon
         v-else-if="to || hasChevron"
-        class="self-center text-xl text-gray-500 flex-initial dark:text-gray-500 group-hover:text-gray-900 dark:group-hover:text-gray-100"
+        class="self-center text-gray-500 flex-initial dark:text-gray-500"
+        :class="{
+          'group-hover:text-gray-900 dark:group-hover:text-gray-100': isClickable,
+          'text-xl': size === 'base',
+          'text-2xl': size === 'lg',
+        }"
         :icon="getIcon('chevronRight')"
       />
 

package/app/components/bases/BaseDivider.vue

@@ -63,7 +63,6 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
           :icon="getIcon('chevronLeft')"
           size="xs"
           :text="t('previous')"
-          :uppercase="false"
           @click="onNavigate($event, 'previous')"
         />
 
@@ -102,7 +101,6 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
           :icon="getIcon('chevronRight')"
           size="xs"
           :text="t('next')"
-          :uppercase="false"
           @click="onNavigate($event, 'next')"
         />
       </div>

package/app/components/bases/BaseIcon.vue

@@ -16,7 +16,6 @@ const props = withDefaults(defineProps<BaseIcon>(), {
   to: undefined,
   truncate: false,
   underline: false,
-  uppercase: true,
 })
 
 const emit = defineEmits<{
@@ -154,7 +153,6 @@ function onKeyDown(event: KeyboardEvent) {
       :text="confirming ? t('confirm') : text"
       :truncate="truncate"
       :underline="underline"
-      :uppercase="uppercase"
     />
   </div>
 </template>

package/app/components/bases/BaseSpinner.vue

@@ -8,7 +8,6 @@ const props = withDefaults(defineProps<BaseSpinner>(), {
   reverse: false,
   size: 'base',
   text: '',
-  uppercase: true,
 })
 
 const emit = defineEmits<{
@@ -80,7 +79,6 @@ function onKeyDown(event: KeyboardEvent) {
       :reverse="reverse"
       :size="size"
       :text="text"
-      :uppercase="uppercase"
     />
   </div>
 </template>

package/app/components/bases/BaseText.vue

@@ -16,7 +16,6 @@ const props = withDefaults(defineProps<BaseText>(), {
   to: undefined,
   truncate: false,
   underline: false,
-  uppercase: false,
 })
 
 const emit = defineEmits<{
@@ -81,7 +80,7 @@ function onShowMore() {
       'bg-white dark:bg-gray-900': background === 'white',
       'block': block,
       'font-bold': bold,
-      'font-medium': uppercase || !bold,
+      'font-medium': !bold,
       'ml-0.5': ['3xs'].includes(size) && !reverse && hasMargin,
       'ml-1.5': ['2xs', 'xs', 'sm'].includes(size) && !reverse && hasMargin,
       'ml-2.5': ['xl', '2xl'].includes(size) && !reverse && hasMargin,
@@ -92,23 +91,22 @@ function onShowMore() {
       'mr-2.5': ['xl', '2xl'].includes(size) && reverse && hasMargin,
       'mr-2': ['base', 'lg'].includes(size) && reverse && hasMargin,
       'mr-3': ['3xl', '4xl'].includes(size) && reverse && hasMargin,
-      'text-2xl': (size === '2xl' && !uppercase) || (size === '3xl' && uppercase),
-      'text-2xs': (size === '2xs') || (size === 'xs' && uppercase),
-      'text-3xl': (size === '3xl' && !uppercase) || (size === '4xl' && uppercase),
-      'text-3xs': (size === '3xs') && !uppercase,
-      'text-4xl': size === '4xl' && !uppercase,
-      'text-base': (size === 'base' && !uppercase) || (size === 'lg' && uppercase),
+      'text-2xl': size === '2xl',
+      'text-2xs': size === '2xs',
+      'text-3xl': size === '3xl',
+      'text-3xs': size === '3xs',
+      'text-4xl': size === '4xl',
+      'text-base': size === 'base',
       'text-center': alignment === 'center',
       'text-left': alignment === 'left',
-      'text-lg': (size === 'lg' && !uppercase) || (size === 'xl' && uppercase),
+      'text-lg': size === 'lg',
       'text-right': alignment === 'right',
-      'text-sm': (size === 'sm' && !uppercase) || (size === 'base' && uppercase),
-      'text-xl': (size === 'xl' && !uppercase) || (size === '2xl' && uppercase),
-      'text-xs': (size === 'xs' && !uppercase) || (size === 'sm' && uppercase),
+      'text-sm': size === 'sm',
+      'text-xl': size === 'xl',
+      'text-xs': size === 'xs',
       'truncate': truncate,
       'underline text-indigo-700 dark:text-indigo-300': !!to,
       'underline': underline,
-      'uppercase': uppercase,
       'whitespace-nowrap': noWrap,
     }"
     :to="to"

package/app/components/bases/BaseToast.vue

@@ -31,7 +31,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
 
 <template>
   <div
-    class="group flex select-none items-center border border-gray-200 rounded-full bg-white px-3 py-2 text-base text-gray-800 font-normal shadow-sm transition-colors dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+    class="group flex select-none items-center border border-gray-200 rounded-full bg-white px-3 py-2 text-base text-gray-800 font-normal uppercase shadow-sm transition-colors dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
     :class="{ 'cursor-pointer': hasClose }"
     role="button"
     tabindex="0"
@@ -47,7 +47,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
 
     <button
       v-if="action"
-      class="ml-1.5 min-h-6 inline-flex items-center justify-center gap-1.25 rounded-md px-2 py-0.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800"
+      class="ml-2 min-h-6 inline-flex items-center justify-center gap-1.25 rounded-md px-2 py-0.5 uppercase transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800"
       :class="{
         'bg-red-100 text-red-700 hover:bg-red-200 focus-visible:ring-red-500 dark:bg-red-400/15 dark:text-red-400 dark:hover:bg-red-400/25': status === 'error',
         'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 focus-visible:ring-indigo-500 dark:bg-indigo-400/15 dark:text-indigo-400 dark:hover:bg-indigo-400/25': status === 'info',
@@ -58,12 +58,10 @@ function onClose(event: KeyboardEvent | MouseEvent) {
       @click.stop="onAction"
     >
       <BaseText
-        bold
         class="pointer-events-none leading-none"
         no-wrap
         size="sm"
         :text="action.label"
-        uppercase
       />
 
       <BaseShortcut

package/app/components/fields/FieldLabel.vue

@@ -23,6 +23,19 @@ const isClickable = computed(() => {
   return !props.loading && !props.disabled
 })
 
+const textSize = computed<BaseSize>(() => {
+  switch (props.size) {
+    case 'lg':
+      return 'base'
+    case 'sm':
+      return 'xs'
+    case 'xs':
+      return '2xs'
+    default:
+      return 'sm'
+  }
+})
+
 function onClick(event: MouseEvent) {
   emit('click', event)
 }
@@ -71,14 +84,14 @@ function onKeyDown(event: KeyboardEvent) {
   >
     <BaseIcon
       :icon="icon"
-      :size="size"
+      :size="textSize"
       :text="label"
     />
 
     <BaseText
       v-if="required"
       class="ml-1 text-red-700 dark:text-red-300"
-      :size="size"
+      :size="textSize"
       text="*"
     />
   </component>

package/app/components/fields/FieldMessage.vue

@@ -120,6 +120,19 @@ function ruleIsInvalid(rule: unknown) {
 
   return false
 }
+
+const textSize = computed<BaseSize>(() => {
+  switch (props.size) {
+    case 'lg':
+      return 'sm'
+    case 'sm':
+      return 'xs'
+    case 'xs':
+      return '2xs'
+    default:
+      return 'xs'
+  }
+})
 </script>
 
 <template>
@@ -134,7 +147,7 @@ function ruleIsInvalid(rule: unknown) {
       'mt-3.5': size === 'lg',
     }"
     :color="status === 'error' ? 'red' : 'gray'"
-    size="sm"
+    :size="textSize"
     :text="text"
   />
 </template>

package/app/components/layout/LayoutBottomSheet.vue

@@ -9,11 +9,10 @@ defineSlots<{
 
 const closeThresholdRatio = 0.25
 const dragMoveThreshold = 8
-const focusableSelector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
 const visible = defineModel<boolean>({ default: false })
 const contentRef = ref<HTMLElement>()
-const focusTrigger = ref<HTMLElement>()
 const panelRef = ref<HTMLElement>()
+const { release: onAfterLeave } = useDialog(visible, panelRef, { ignoreClass: 'layout-bottom-sheet' })
 
 const drag = reactive({
   closing: false,
@@ -24,56 +23,10 @@ const drag = reactive({
   startY: 0,
 })
 
-let savedBodyOverflow = ''
-let savedBodyPaddingRight = ''
-
-const fixedElementPadding = new Map<HTMLElement, string>()
-
 const closeThreshold = computed(() => {
   return (panelRef.value?.offsetHeight ?? 320) * closeThresholdRatio
 })
 
-function getFocusableElements(container: HTMLElement) {
-  return Array.from(container.querySelectorAll<HTMLElement>(focusableSelector))
-    .filter((element) => {
-      return element.offsetParent !== null || getComputedStyle(element).position === 'fixed'
-    })
-}
-
-function lockBodyScroll() {
-  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
-
-  savedBodyOverflow = document.body.style.overflow
-  savedBodyPaddingRight = document.body.style.paddingRight
-  document.body.style.overflow = 'hidden'
-
-  if (scrollbarWidth > 0) {
-    document.body.style.paddingRight = `${scrollbarWidth}px`
-
-    for (const element of document.querySelectorAll('body *')) {
-      if (!(element instanceof HTMLElement)) {
-        continue
-      }
-
-      if (element.classList.contains('layout-bottom-sheet')) {
-        continue
-      }
-
-      const { position } = getComputedStyle(element)
-
-      if (position !== 'fixed' && position !== 'sticky') {
-        continue
-      }
-
-      fixedElementPadding.set(element, element.style.paddingRight)
-
-      const currentPadding = Number.parseFloat(getComputedStyle(element).paddingRight) || 0
-
-      element.style.paddingRight = `${currentPadding + scrollbarWidth}px`
-    }
-  }
-}
-
 function onClose() {
   visible.value = false
 }
@@ -92,34 +45,6 @@ function onContentPointerDown(event: PointerEvent) {
   drag.startY = event.clientY
 }
 
-function onFocusTrap(event: KeyboardEvent) {
-  if (event.key !== 'Tab' || !panelRef.value) {
-    return
-  }
-
-  const focusableElements = getFocusableElements(panelRef.value)
-
-  if (focusableElements.length === 0) {
-    event.preventDefault()
-    panelRef.value.focus()
-
-    return
-  }
-
-  const firstElement = focusableElements[0]
-  const lastElement = focusableElements[focusableElements.length - 1]
-  const activeElement = document.activeElement
-
-  if (event.shiftKey && activeElement === firstElement) {
-    event.preventDefault()
-    lastElement.focus()
-  }
-  else if (!event.shiftKey && activeElement === lastElement) {
-    event.preventDefault()
-    firstElement.focus()
-  }
-}
-
 function onHeaderPointerDown(event: PointerEvent) {
   if (drag.closing) {
     return
@@ -136,26 +61,6 @@ function onHeaderPointerDown(event: PointerEvent) {
   handle.setPointerCapture(event.pointerId)
 }
 
-function onKeydown(event: KeyboardEvent) {
-  if (!visible.value) {
-    return
-  }
-
-  if (event.key === 'Escape') {
-    onClose()
-  }
-}
-
-function onPanelAfterLeave() {
-  if (import.meta.client) {
-    unlockBodyScroll()
-    window.removeEventListener('keydown', onFocusTrap)
-    focusTrigger.value?.focus()
-
-    focusTrigger.value = undefined
-  }
-}
-
 function onPanelTransitionEnd(event: TransitionEvent) {
   if (event.propertyName !== 'transform' || !drag.closing) {
     return
@@ -262,53 +167,10 @@ function resetPendingDrag() {
   drag.startedFromContent = false
 }
 
-function unlockBodyScroll() {
-  document.body.style.overflow = savedBodyOverflow
-  document.body.style.paddingRight = savedBodyPaddingRight
-
-  for (const [element, paddingRight] of fixedElementPadding) {
-    element.style.paddingRight = paddingRight
-  }
-
-  fixedElementPadding.clear()
-}
-
-watch(visible, async (isVisible) => {
-  if (import.meta.client && isVisible) {
-    focusTrigger.value = document.activeElement instanceof HTMLElement ? document.activeElement : undefined
-
-    lockBodyScroll()
-
-    await nextTick()
-
-    if (panelRef.value) {
-      const focusableElements = getFocusableElements(panelRef.value)
-
-      if (focusableElements.length > 0) {
-        focusableElements[0].focus()
-      }
-      else {
-        panelRef.value.focus()
-      }
-
-      window.addEventListener('keydown', onFocusTrap)
-    }
-  }
-
+watch(visible, (isVisible) => {
   if (!isVisible) {
     resetDragState()
   }
-}, { immediate: true })
-
-onMounted(() => window.addEventListener('keydown', onKeydown))
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', onKeydown)
-  window.removeEventListener('keydown', onFocusTrap)
-
-  if (import.meta.client) {
-    unlockBodyScroll()
-  }
 })
 </script>
 
@@ -345,7 +207,7 @@ onUnmounted(() => {
         leave-active-class="transition-transform duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
         leave-from-class="translate-y-0"
         leave-to-class="translate-y-full motion-reduce:translate-y-0"
-        @after-leave="onPanelAfterLeave"
+        @after-leave="onAfterLeave"
       >
         <div
           v-if="visible"

package/app/components/layout/LayoutModal.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import type { LayoutModal } from '../../types/layout'
+
+withDefaults(defineProps<LayoutModal>(), { title: undefined })
+
+defineSlots<{
+  default?: () => VNode[]
+}>()
+
+const visible = defineModel<boolean>({ default: false })
+const panelRef = ref<HTMLElement>()
+const { release: onAfterLeave } = useDialog(visible, panelRef, { ignoreClass: 'layout-modal' })
+
+function onClose() {
+  visible.value = false
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-opacity duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
+        enter-from-class="opacity-0 motion-reduce:opacity-100"
+        enter-to-class="opacity-100"
+        leave-active-class="transition-opacity duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0 motion-reduce:opacity-100"
+      >
+        <div
+          v-if="visible"
+          aria-hidden="true"
+          class="layout-modal fixed inset-0 z-[60] bg-black/50"
+          @click="onClose"
+        />
+      </Transition>
+
+      <Transition
+        enter-active-class="transition duration-200 ease motion-reduce:transition-none motion-reduce:duration-0"
+        enter-from-class="opacity-0 scale-95 motion-reduce:scale-100 motion-reduce:opacity-100"
+        enter-to-class="opacity-100 scale-100"
+        leave-active-class="transition duration-200 ease motion-reduce:transition-none motion-reduce:duration-0"
+        leave-from-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 scale-95 motion-reduce:scale-100 motion-reduce:opacity-100"
+        @after-leave="onAfterLeave"
+      >
+        <div
+          v-if="visible"
+          class="layout-modal pointer-events-none fixed inset-0 z-[60] flex items-center justify-center p-4"
+        >
+          <div
+            ref="panelRef"
+            :aria-label="title"
+            aria-modal="true"
+            class="pointer-events-auto max-h-[85dvh] max-w-md w-full overflow-y-auto rounded-2xl bg-white p-5 text-gray-900 shadow-lg dark:bg-gray-900 dark:text-gray-100"
+            role="dialog"
+            tabindex="-1"
+          >
+            <slot />
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </ClientOnly>
+</template>

package/app/composables/useDialog.ts

@@ -0,0 +1,144 @@
+interface UseDialogOptions {
+  ignoreClass: string
+}
+
+export default function useDialog(
+  visible: Ref<boolean>,
+  panelRef: Ref<HTMLElement | undefined>,
+  options: UseDialogOptions,
+) {
+  const focusableSelector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+  const fixedElementPadding = new Map<HTMLElement, string>()
+
+  let savedBodyOverflow = ''
+  let savedBodyPaddingRight = ''
+
+  function getFocusableElements(container: HTMLElement) {
+    return Array.from(container.querySelectorAll<HTMLElement>(focusableSelector))
+      .filter((element) => {
+        return element.offsetParent !== null || getComputedStyle(element).position === 'fixed'
+      })
+  }
+
+  function lockBodyScroll() {
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
+
+    savedBodyOverflow = document.body.style.overflow
+    savedBodyPaddingRight = document.body.style.paddingRight
+    document.body.style.overflow = 'hidden'
+
+    if (scrollbarWidth > 0) {
+      document.body.style.paddingRight = `${scrollbarWidth}px`
+
+      for (const element of document.querySelectorAll('body *')) {
+        if (!(element instanceof HTMLElement)) {
+          continue
+        }
+
+        // Skip the dialog's own teleported elements so they are not padded.
+        if (element.classList.contains(options.ignoreClass)) {
+          continue
+        }
+
+        const { position } = getComputedStyle(element)
+
+        if (position !== 'fixed' && position !== 'sticky') {
+          continue
+        }
+
+        fixedElementPadding.set(element, element.style.paddingRight)
+
+        const currentPadding = Number.parseFloat(getComputedStyle(element).paddingRight) || 0
+
+        element.style.paddingRight = `${currentPadding + scrollbarWidth}px`
+      }
+    }
+  }
+
+  function onFocusTrap(event: KeyboardEvent) {
+    if (event.key !== 'Tab' || !panelRef.value) {
+      return
+    }
+
+    const focusableElements = getFocusableElements(panelRef.value)
+
+    if (focusableElements.length === 0) {
+      event.preventDefault()
+      panelRef.value.focus()
+
+      return
+    }
+
+    const firstElement = focusableElements[0]
+    const lastElement = focusableElements[focusableElements.length - 1]
+    const activeElement = document.activeElement
+
+    if (event.shiftKey && activeElement === firstElement) {
+      event.preventDefault()
+      lastElement.focus()
+    }
+    else if (!event.shiftKey && activeElement === lastElement) {
+      event.preventDefault()
+      firstElement.focus()
+    }
+  }
+
+  function onKeydown(event: KeyboardEvent) {
+    if (visible.value && event.key === 'Escape') {
+      visible.value = false
+    }
+  }
+
+  function unlockBodyScroll() {
+    document.body.style.overflow = savedBodyOverflow
+    document.body.style.paddingRight = savedBodyPaddingRight
+
+    for (const [element, paddingRight] of fixedElementPadding) {
+      element.style.paddingRight = paddingRight
+    }
+
+    fixedElementPadding.clear()
+  }
+
+  // Restores scroll lock and focus trap once the leave transition has finished.
+  function release() {
+    if (import.meta.client) {
+      unlockBodyScroll()
+      window.removeEventListener('keydown', onFocusTrap)
+    }
+  }
+
+  watch(visible, async (isVisible) => {
+    if (import.meta.client && isVisible) {
+      lockBodyScroll()
+
+      await nextTick()
+
+      if (panelRef.value) {
+        const focusableElements = getFocusableElements(panelRef.value)
+
+        if (focusableElements.length > 0) {
+          focusableElements[0].focus()
+        }
+        else {
+          panelRef.value.focus()
+        }
+
+        window.addEventListener('keydown', onFocusTrap)
+      }
+    }
+  }, { immediate: true })
+
+  onMounted(() => window.addEventListener('keydown', onKeydown))
+
+  onUnmounted(() => {
+    window.removeEventListener('keydown', onKeydown)
+    window.removeEventListener('keydown', onFocusTrap)
+
+    if (import.meta.client) {
+      unlockBodyScroll()
+    }
+  })
+
+  return { release }
+}

package/app/types/bases.d.ts

@@ -80,6 +80,7 @@ export interface BaseCard {
   details?: string
   detailsIcon?: string
   direction?: BaseCardDirection
+  disabled?: boolean
   emoji?: string
   hasBackground?: boolean
   hasChevron?: boolean
@@ -87,6 +88,7 @@ export interface BaseCard {
   id?: number | string
   image?: string
   isSelected?: boolean
+  size?: BaseCardSize
   title?: string
   titleIcon?: string
   to?: RouteLocationNamedI18n
@@ -94,6 +96,8 @@ export interface BaseCard {
 
 export type BaseCardDirection = 'horizontal' | 'vertical'
 
+export type BaseCardSize = 'base' | 'lg'
+
 export interface BaseCharacter {
   character?: BaseCharacterCharacter
   size?: BaseCharacterSize
@@ -187,7 +191,6 @@ export interface BaseIcon {
   to?: RouteLocationNamedI18n
   truncate?: boolean
   underline?: boolean
-  uppercase?: boolean
 }
 
 export interface BaseMessage {
@@ -321,7 +324,6 @@ export interface BaseSpinner {
   reverse?: boolean
   size?: BaseSize
   text?: BaseTextText
-  uppercase?: boolean
 }
 
 export type BaseStatus = | 'error' | 'info' | 'success' | 'warning'
@@ -382,7 +384,6 @@ export interface BaseText {
   to?: RouteLocationNamedI18n
   truncate?: boolean
   underline?: boolean
-  uppercase?: boolean
 }
 
 export type BaseTextText = string | {

package/app/types/global.d.ts

@@ -14,6 +14,7 @@ declare global {
   type BaseButtonType = import('./bases').BaseButtonType
   type BaseCard = import('./bases').BaseCard
   type BaseCardDirection = import('./bases').BaseCardDirection
+  type BaseCardSize = import('./bases').BaseCardSize
   type BaseCharacter = import('./bases').BaseCharacter
   type BaseCharacterCharacter = import('./bases').BaseCharacterCharacter
   type BaseCharacterSize = import('./bases').BaseCharacterSize
@@ -94,6 +95,7 @@ declare global {
 
   // Layout
   type LayoutBottomSheet = import('./layout').LayoutBottomSheet
+  type LayoutModal = import('./layout').LayoutModal
 
   // Project
   type LayerIconIcon = import('../composables/useLayerIcons').LayerIconIcon

package/app/types/layout.d.ts

@@ -1,3 +1,7 @@
 export interface LayoutBottomSheet {
   title?: string
 }
+
+export interface LayoutModal {
+  title?: string
+}

package/package.json

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