@saasmakers/ui 1.4.49 → 1.4.51

package/app/components/bases/BaseAlert.vue

@@ -115,6 +115,9 @@ async function onClose(event: MouseEvent) {
   "fr": {
     "closeThisMessage": "Fermer ce message"
   },
+  "id": {
+    "closeThisMessage": "Tutup pesan ini"
+  },
   "it": {
     "closeThisMessage": "Chiudi questo messaggio"
   },
@@ -136,9 +139,6 @@ async function onClose(event: MouseEvent) {
   "pt-BR": {
     "closeThisMessage": "Fechar esta mensagem"
   },
-  "id": {
-    "closeThisMessage": "Tutup pesan ini"
-  },
   "vi": {
     "closeThisMessage": "Đóng thông báo này"
   }

package/app/components/bases/BaseAvatar.vue

@@ -172,6 +172,10 @@ function onMouseLeave() {
     "edit": "Modifier",
     "fileSizeTooLarge": "Le fichier est trop grand (max: {maxSizeMb}MB)"
   },
+  "id": {
+    "edit": "Edit",
+    "fileSizeTooLarge": "File terlalu besar (maks.: {maxSizeMb}MB)"
+  },
   "it": {
     "edit": "Modifica",
     "fileSizeTooLarge": "Il file è troppo grande (max: {maxSizeMb}MB)"
@@ -200,10 +204,6 @@ function onMouseLeave() {
     "edit": "Editar",
     "fileSizeTooLarge": "O arquivo é muito grande (máx.: {maxSizeMb}MB)"
   },
-  "id": {
-    "edit": "Edit",
-    "fileSizeTooLarge": "File terlalu besar (maks.: {maxSizeMb}MB)"
-  },
   "vi": {
     "edit": "Chỉnh sửa",
     "fileSizeTooLarge": "Tệp quá lớn (tối đa: {maxSizeMb}MB)"

package/app/components/bases/BaseButton.vue

@@ -150,6 +150,9 @@ function onClick(event: MouseEvent) {
   "fr": {
     "confirm": "Confirmer ?"
   },
+  "id": {
+    "confirm": "Konfirmasi?"
+  },
   "it": {
     "confirm": "Confermare?"
   },
@@ -171,9 +174,6 @@ function onClick(event: MouseEvent) {
   "pt-BR": {
     "confirm": "Confirmar?"
   },
-  "id": {
-    "confirm": "Konfirmasi?"
-  },
   "vi": {
     "confirm": "Xác nhận?"
   }

package/app/components/bases/BaseCard.vue

@@ -17,7 +17,6 @@ const props = withDefaults(defineProps<BaseCard>(), {
   id: undefined,
   image: '',
   isSelected: false,
-  size: 'base',
   title: undefined,
   titleIcon: undefined,
   to: undefined,
@@ -38,7 +37,10 @@ defineSlots<{
 }>()
 
 const { getIcon } = useLayerIcons()
-const hasAvatarBox = computed<boolean>(() => !!(props.avatar || props.emoji || props.icon || props.image))
+
+const hasAvatarBox = computed<boolean>(() => {
+  return !!(props.avatar || props.emoji || props.icon || props.image)
+})
 
 const isClickable = computed(() => {
   return props.to || props.clickable
@@ -57,8 +59,7 @@ function onClick(event: MouseEvent) {
       '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,
       'hover:border-gray-300 dark:hover:border-gray-700': hasBackground && isClickable,
-      'rounded-lg': ['sm'].includes(size) && hasBackground,
-      'rounded-xl': ['base', 'lg'].includes(size) && hasBackground,
+      'rounded-xl': hasBackground,
     }"
     :to="to"
     @click="onClick"
@@ -75,15 +76,11 @@ function onClick(event: MouseEvent) {
 
         <span
           v-if="hasAvatarBox"
-          class="relative z-10 flex items-center justify-center flex-initial"
+          class="relative z-10 h-9 w-9 flex items-center justify-center flex-initial"
           :class="{
             'border shadow-inner': !avatar && !image,
-            'rounded-md': !avatar && !image && size === 'sm',
-            'rounded-lg': !avatar && !image && ['base', 'lg'].includes(size),
+            'rounded-lg': !avatar && !image,
             'border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-900': !avatar && !image,
-            'h-8 w-8': size === 'sm' && !avatar && !image,
-            'h-9 w-9': size === 'base' && !avatar && !image,
-            'h-10 w-10': size === 'lg' && !avatar && !image,
             'mr-2': direction === 'horizontal',
             'mb-1': direction === 'vertical',
           }"
@@ -92,12 +89,7 @@ function onClick(event: MouseEvent) {
 
           <BaseAvatar
             v-if="avatar"
-            class="rounded-lg flex-initial"
-            :class="{
-              'h-8 w-8': size === 'sm',
-              'h-10 w-10': size === 'base',
-              'h-14 w-14': size === 'lg',
-            }"
+            class="h-10 w-10 rounded-lg flex-initial"
             :src="avatar"
           />
 
@@ -117,12 +109,7 @@ function onClick(event: MouseEvent) {
 
           <img
             v-else-if="image"
-            class="flex-initial object-cover shadow-sm drag-none"
-            :class="{
-              'h-7 w-7 rounded-md': size === 'sm',
-              'h-9 w-9 rounded-lg': size === 'base',
-              'h-10 w-10 rounded-lg': size === 'lg',
-            }"
+            class="h-9 w-9 rounded-lg object-cover shadow-sm drag-none flex-initial"
             :alt="title"
             loading="lazy"
             :src="image"
@@ -135,25 +122,19 @@ function onClick(event: MouseEvent) {
       </span>
 
       <div
-        class="flex min-w-0 flex-1 flex-col justify-center leading-snug"
+        class="min-w-0 flex flex-1 flex-col justify-center leading-snug"
         :class="{
           'mr-4': direction === 'horizontal',
           'items-center': direction === 'vertical',
         }"
       >
-        <div
-          class="flex w-full flex-col"
-          :class="{
-            'gap-0': ['sm', 'base'].includes(size),
-            'gap-0.25': size === 'lg',
-          }"
-        >
+        <div class="w-full flex flex-col gap-0">
           <BaseIcon
             v-if="title"
             class="w-full"
             :class="{ 'self-center': !hasAvatarBox }"
             :icon="titleIcon"
-            :size="size"
+            size="base"
             :text="title"
             truncate
           />
@@ -162,7 +143,7 @@ function onClick(event: MouseEvent) {
             v-if="description"
             block
             class="text-gray-600 leading-4 dark:text-gray-400"
-            :size="size === 'lg' ? 'xs' : '2xs'"
+            size="2xs"
             :text="description"
           />
         </div>

package/app/components/bases/BaseDivider.vue

@@ -132,6 +132,11 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
     "next": "Suivant",
     "previous": "Précédent"
   },
+  "id": {
+    "loading": "Memuat…",
+    "next": "Berikutnya",
+    "previous": "Sebelumnya"
+  },
   "it": {
     "loading": "Caricamento…",
     "next": "Successivo",
@@ -167,11 +172,6 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
     "next": "Próximo",
     "previous": "Anterior"
   },
-  "id": {
-    "loading": "Memuat…",
-    "next": "Berikutnya",
-    "previous": "Sebelumnya"
-  },
   "vi": {
     "loading": "Đang tải…",
     "next": "Sau",

package/app/components/bases/BaseIcon.vue

@@ -173,6 +173,9 @@ function onKeyDown(event: KeyboardEvent) {
   "fr": {
     "confirm": "Confirmer ?"
   },
+  "id": {
+    "confirm": "Konfirmasi?"
+  },
   "it": {
     "confirm": "Confermare?"
   },
@@ -194,9 +197,6 @@ function onKeyDown(event: KeyboardEvent) {
   "pt-BR": {
     "confirm": "Confirmar?"
   },
-  "id": {
-    "confirm": "Konfirmasi?"
-  },
   "vi": {
     "confirm": "Xác nhận?"
   }

package/app/components/bases/BaseQuote.vue

@@ -170,6 +170,9 @@ function onClose(event: MouseEvent) {
   "fr": {
     "close": "Fermer"
   },
+  "id": {
+    "close": "Tutup"
+  },
   "it": {
     "close": "Chiudi"
   },
@@ -191,9 +194,6 @@ function onClose(event: MouseEvent) {
   "pt-BR": {
     "close": "Fechar"
   },
-  "id": {
-    "close": "Tutup"
-  },
   "vi": {
     "close": "Đóng"
   }

package/app/components/bases/BaseTags.vue

@@ -241,6 +241,11 @@ function onUpdateTag(event: FocusEvent | KeyboardEvent, name: string, tagId?: nu
     "newTag": "Nouveau tag",
     "showMore": "& {value} autre | & {value} autres"
   },
+  "id": {
+    "cancel": "Batal",
+    "newTag": "Tag baru",
+    "showMore": "& {value} lainnya | & {value} lainnya"
+  },
   "it": {
     "cancel": "Annulla",
     "newTag": "Nuovo tag",
@@ -276,11 +281,6 @@ function onUpdateTag(event: FocusEvent | KeyboardEvent, name: string, tagId?: nu
     "newTag": "Nova tag",
     "showMore": "& {value} outro | & {value} outros"
   },
-  "id": {
-    "cancel": "Batal",
-    "newTag": "Tag baru",
-    "showMore": "& {value} lainnya | & {value} lainnya"
-  },
   "vi": {
     "cancel": "Hủy",
     "newTag": "Thẻ mới",

package/app/components/bases/BaseText.vue

@@ -155,6 +155,9 @@ function onShowMore() {
   "fr": {
     "showMore": "(afficher)"
   },
+  "id": {
+    "showMore": "(tampilkan lebih banyak)"
+  },
   "it": {
     "showMore": "(mostra altro)"
   },
@@ -176,9 +179,6 @@ function onShowMore() {
   "pt-BR": {
     "showMore": "(mostrar mais)"
   },
-  "id": {
-    "showMore": "(tampilkan lebih banyak)"
-  },
   "vi": {
     "showMore": "(xem thêm)"
   }

package/app/components/fields/FieldAvatar.vue

@@ -68,13 +68,13 @@ function onOpenFilePicker() {
       :for-field="id"
       has-margin-bottom
       :icon="labelIcon"
-      :label="props.label || t('label')"
+      :label="label || t('label')"
       :required="required"
       :size="size"
     />
 
     <div
-      :aria-label="loading ? t('actionLoading') : (typeof props.action === 'string' ? props.action : (props.action?.base || t('action')))"
+      :aria-label="loading ? t('actionLoading') : (typeof action === 'string' ? action : (action?.base || t('action')))"
       class="w-full flex items-center gap-2 px-3 normal-case outline-none"
       :class="{
         'cursor-pointer': !disabled && !loading,
@@ -131,7 +131,7 @@ function onOpenFilePicker() {
 
         <BaseText
           class="min-w-0 flex-1 text-gray-900 dark:text-gray-100"
-          :text="loading ? t('actionLoading') : (props.action || t('action'))"
+          :text="loading ? t('actionLoading') : (action || t('action'))"
         />
       </div>
 
@@ -159,81 +159,81 @@ function onOpenFilePicker() {
 <i18n lang="json">
 {
   "de": {
-    "fileSizeTooLarge": "Die Datei ist zu groß (max.: {maxSizeMb}MB)",
     "action": "Foto ändern",
     "actionLoading": "Foto wird aktualisiert...",
+    "fileSizeTooLarge": "Die Datei ist zu groß (max.: {maxSizeMb}MB)",
     "label": "Profilbild"
   },
   "en": {
-    "fileSizeTooLarge": "The file is too large (max: {maxSizeMb}MB)",
     "action": "Change photo",
     "actionLoading": "Updating photo...",
+    "fileSizeTooLarge": "The file is too large (max: {maxSizeMb}MB)",
     "label": "Profile picture"
   },
   "es": {
-    "fileSizeTooLarge": "El archivo es demasiado grande (máx.: {maxSizeMb}MB)",
     "action": "Cambiar foto",
     "actionLoading": "Actualizando foto...",
+    "fileSizeTooLarge": "El archivo es demasiado grande (máx.: {maxSizeMb}MB)",
     "label": "Foto de perfil"
   },
   "fr": {
-    "fileSizeTooLarge": "Le fichier est trop grand (max: {maxSizeMb}MB)",
     "action": "Changer la photo",
     "actionLoading": "Mise a jour de la photo...",
+    "fileSizeTooLarge": "Le fichier est trop grand (max: {maxSizeMb}MB)",
     "label": "Photo de profil"
   },
+  "id": {
+    "action": "Ganti foto",
+    "actionLoading": "Memperbarui foto...",
+    "fileSizeTooLarge": "File terlalu besar (maks.: {maxSizeMb}MB)",
+    "label": "Foto profil"
+  },
   "it": {
-    "fileSizeTooLarge": "Il file è troppo grande (max: {maxSizeMb}MB)",
     "action": "Cambia foto",
     "actionLoading": "Aggiornamento foto...",
+    "fileSizeTooLarge": "Il file è troppo grande (max: {maxSizeMb}MB)",
     "label": "Foto del profilo"
   },
   "ja": {
-    "fileSizeTooLarge": "ファイルが大きすぎます (最大: {maxSizeMb}MB)",
     "action": "写真を変更",
     "actionLoading": "写真を更新中...",
+    "fileSizeTooLarge": "ファイルが大きすぎます (最大: {maxSizeMb}MB)",
     "label": "プロフィール写真"
   },
   "ko": {
-    "fileSizeTooLarge": "파일이 너무 큽니다 (최대: {maxSizeMb}MB)",
     "action": "사진 변경",
     "actionLoading": "사진 업데이트 중...",
+    "fileSizeTooLarge": "파일이 너무 큽니다 (최대: {maxSizeMb}MB)",
     "label": "프로필 사진"
   },
   "nl": {
-    "fileSizeTooLarge": "Het bestand is te groot (max.: {maxSizeMb}MB)",
     "action": "Foto wijzigen",
     "actionLoading": "Foto wordt bijgewerkt...",
+    "fileSizeTooLarge": "Het bestand is te groot (max.: {maxSizeMb}MB)",
     "label": "Profielfoto"
   },
   "pl": {
-    "fileSizeTooLarge": "Plik jest za duży (maks.: {maxSizeMb}MB)",
     "action": "Zmień zdjęcie",
     "actionLoading": "Aktualizowanie zdjęcia...",
+    "fileSizeTooLarge": "Plik jest za duży (maks.: {maxSizeMb}MB)",
     "label": "Zdjęcie profilowe"
   },
   "pt": {
-    "fileSizeTooLarge": "O ficheiro é demasiado grande (máx.: {maxSizeMb}MB)",
     "action": "Alterar foto",
     "actionLoading": "A atualizar foto...",
+    "fileSizeTooLarge": "O ficheiro é demasiado grande (máx.: {maxSizeMb}MB)",
     "label": "Foto de perfil"
   },
   "pt-BR": {
-    "fileSizeTooLarge": "O arquivo é muito grande (máx.: {maxSizeMb}MB)",
     "action": "Alterar foto",
     "actionLoading": "Atualizando foto...",
+    "fileSizeTooLarge": "O arquivo é muito grande (máx.: {maxSizeMb}MB)",
     "label": "Foto de perfil"
   },
-  "id": {
-    "fileSizeTooLarge": "File terlalu besar (maks.: {maxSizeMb}MB)",
-    "action": "Ganti foto",
-    "actionLoading": "Memperbarui foto...",
-    "label": "Foto profil"
-  },
   "vi": {
-    "fileSizeTooLarge": "Tệp quá lớn (tối đa: {maxSizeMb}MB)",
     "action": "Đổi ảnh",
     "actionLoading": "Dang cap nhat anh...",
+    "fileSizeTooLarge": "Tệp quá lớn (tối đa: {maxSizeMb}MB)",
     "label": "Ảnh đại diện"
   }
 }

package/app/components/fields/FieldDays.vue

@@ -125,6 +125,17 @@ function onUpdateDays(event: MouseEvent, day: number) {
       "wednesday": "Mercredi"
     }
   },
+  "id": {
+    "days": {
+      "friday": "Jumat",
+      "monday": "Senin",
+      "saturday": "Sabtu",
+      "sunday": "Minggu",
+      "thursday": "Kamis",
+      "tuesday": "Selasa",
+      "wednesday": "Rabu"
+    }
+  },
   "it": {
     "days": {
       "friday": "Venerdì",
@@ -202,17 +213,6 @@ function onUpdateDays(event: MouseEvent, day: number) {
       "wednesday": "Quarta-feira"
     }
   },
-  "id": {
-    "days": {
-      "friday": "Jumat",
-      "monday": "Senin",
-      "saturday": "Sabtu",
-      "sunday": "Minggu",
-      "thursday": "Kamis",
-      "tuesday": "Selasa",
-      "wednesday": "Rabu"
-    }
-  },
   "vi": {
     "days": {
       "friday": "Thứ Sáu",

package/app/components/fields/FieldEmojis.vue

@@ -163,6 +163,21 @@ function onEmojiClick(event: MouseEvent, emoji?: string) {
     },
     "searchEmoji": "Rechercher un emoji (en anglais)"
   },
+  "id": {
+    "categories": {
+      "activity": "Aktivitas",
+      "diversity": "Warna kulit",
+      "flags": "Bendera",
+      "food": "Makanan & minuman",
+      "nature": "Hewan & alam",
+      "objects": "Benda",
+      "people": "Smiley & orang",
+      "regional": "Regional",
+      "symbol": "Simbol",
+      "travel": "Perjalanan & tempat"
+    },
+    "searchEmoji": "Cari emoji"
+  },
   "it": {
     "categories": {
       "activity": "Attività",
@@ -268,21 +283,6 @@ function onEmojiClick(event: MouseEvent, emoji?: string) {
     },
     "searchEmoji": "Pesquisar um emoji"
   },
-  "id": {
-    "categories": {
-      "activity": "Aktivitas",
-      "diversity": "Warna kulit",
-      "flags": "Bendera",
-      "food": "Makanan & minuman",
-      "nature": "Hewan & alam",
-      "objects": "Benda",
-      "people": "Smiley & orang",
-      "regional": "Regional",
-      "symbol": "Simbol",
-      "travel": "Perjalanan & tempat"
-    },
-    "searchEmoji": "Cari emoji"
-  },
   "vi": {
     "categories": {
       "activity": "Hoạt động",

package/app/components/fields/FieldMessage.vue

@@ -217,6 +217,25 @@ function ruleIsInvalid(rule: unknown) {
     "sameAs": "La valeur ne correspond pas à: {field}",
     "url": "La valeur n'est pas une URL valide"
   },
+  "id": {
+    "alpha": "Nilai hanya menerima huruf",
+    "alphaNum": "Nilai hanya menerima karakter alfanumerik",
+    "between": "Nilai harus antara {min} dan {max}",
+    "decimal": "Nilai hanya menerima bilangan desimal positif dan negatif",
+    "email": "Nilai bukan email yang valid",
+    "integer": "Nilai hanya menerima bilangan bulat positif dan negatif",
+    "invalid": "Nilai tidak valid",
+    "ipAddress": "Nilai hanya menerima alamat IPv4 yang valid",
+    "macAddress": "Nilai hanya menerima alamat MAC yang valid",
+    "maxLength": "Nilai terlalu panjang (maks.: {max})",
+    "maxValue": "Nilai maksimum yang diizinkan: {max}",
+    "minLength": "Nilai terlalu pendek (min.: {min})",
+    "minValue": "Nilai minimum yang diizinkan: {min}",
+    "numeric": "Nilai hanya menerima angka",
+    "required": "Nilai wajib diisi",
+    "sameAs": "Nilai tidak cocok dengan: {field}",
+    "url": "Nilai bukan URL yang valid"
+  },
   "it": {
     "alpha": "Il valore accetta solo caratteri alfabetici",
     "alphaNum": "Il valore accetta solo caratteri alfanumerici",
@@ -350,25 +369,6 @@ function ruleIsInvalid(rule: unknown) {
     "sameAs": "O valor não corresponde a: {field}",
     "url": "O valor não é uma URL válida"
   },
-  "id": {
-    "alpha": "Nilai hanya menerima huruf",
-    "alphaNum": "Nilai hanya menerima karakter alfanumerik",
-    "between": "Nilai harus antara {min} dan {max}",
-    "decimal": "Nilai hanya menerima bilangan desimal positif dan negatif",
-    "email": "Nilai bukan email yang valid",
-    "integer": "Nilai hanya menerima bilangan bulat positif dan negatif",
-    "invalid": "Nilai tidak valid",
-    "ipAddress": "Nilai hanya menerima alamat IPv4 yang valid",
-    "macAddress": "Nilai hanya menerima alamat MAC yang valid",
-    "maxLength": "Nilai terlalu panjang (maks.: {max})",
-    "maxValue": "Nilai maksimum yang diizinkan: {max}",
-    "minLength": "Nilai terlalu pendek (min.: {min})",
-    "minValue": "Nilai minimum yang diizinkan: {min}",
-    "numeric": "Nilai hanya menerima angka",
-    "required": "Nilai wajib diisi",
-    "sameAs": "Nilai tidak cocok dengan: {field}",
-    "url": "Nilai bukan URL yang valid"
-  },
   "vi": {
     "alpha": "Giá trị chỉ chấp nhận chữ cái",
     "alphaNum": "Giá trị chỉ chấp nhận ký tự chữ và số",

package/app/components/fields/FieldSelect.vue

@@ -396,6 +396,10 @@ function selectOption(event: MouseEvent, value: string) {
     "noResults": "Aucun résultat",
     "search": "Rechercher"
   },
+  "id": {
+    "noResults": "Tidak ada hasil",
+    "search": "Cari"
+  },
   "it": {
     "noResults": "Nessun risultato",
     "search": "Cerca"
@@ -424,10 +428,6 @@ function selectOption(event: MouseEvent, value: string) {
     "noResults": "Nenhum resultado",
     "search": "Pesquisar"
   },
-  "id": {
-    "noResults": "Tidak ada hasil",
-    "search": "Cari"
-  },
   "vi": {
     "noResults": "Không có kết quả",
     "search": "Tìm kiếm"

package/app/components/layout/LayoutBottomSheet.vue

@@ -0,0 +1,391 @@
+<script lang="ts" setup>
+import type { LayoutBottomSheet } from '../../types/layout'
+
+withDefaults(defineProps<LayoutBottomSheet>(), { title: undefined })
+
+defineSlots<{
+  default?: () => VNode[]
+}>()
+
+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 drag = reactive({
+  closing: false,
+  isDragging: false,
+  offset: 0,
+  pointerId: undefined as number | undefined,
+  startedFromContent: false,
+  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
+}
+
+function onContentPointerDown(event: PointerEvent) {
+  if (drag.closing) {
+    return
+  }
+
+  if ((contentRef.value?.scrollTop ?? 0) > 0) {
+    return
+  }
+
+  drag.startedFromContent = true
+  drag.pointerId = event.pointerId
+  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
+  }
+
+  drag.startedFromContent = false
+  drag.isDragging = true
+  drag.pointerId = event.pointerId
+  drag.startY = event.clientY
+  drag.offset = 0
+
+  const handle = event.currentTarget as HTMLElement
+
+  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
+  }
+
+  onClose()
+  resetDragState()
+}
+
+function onPointerMove(event: PointerEvent) {
+  if (drag.startedFromContent && !drag.isDragging) {
+    if (event.pointerId !== drag.pointerId) {
+      return
+    }
+
+    if ((contentRef.value?.scrollTop ?? 0) > 0) {
+      resetPendingDrag()
+
+      return
+    }
+
+    const offset = event.clientY - drag.startY
+
+    if (offset < 0) {
+      resetPendingDrag()
+
+      return
+    }
+
+    if (offset < dragMoveThreshold) {
+      return
+    }
+
+    drag.isDragging = true
+    drag.offset = offset
+
+    const handle = event.currentTarget as HTMLElement
+
+    handle.setPointerCapture(event.pointerId)
+
+    return
+  }
+
+  if (!drag.isDragging) {
+    return
+  }
+
+  const offset = event.clientY - drag.startY
+
+  if (drag.startedFromContent && offset < 0) {
+    drag.isDragging = false
+
+    resetPendingDrag()
+
+    drag.offset = 0
+
+    const handle = event.currentTarget as HTMLElement
+
+    if (handle.hasPointerCapture(event.pointerId)) {
+      handle.releasePointerCapture(event.pointerId)
+    }
+
+    return
+  }
+
+  drag.offset = Math.max(0, offset)
+}
+
+function onPointerUp(event: PointerEvent) {
+  if (!drag.isDragging) {
+    resetPendingDrag()
+
+    return
+  }
+
+  drag.isDragging = false
+
+  resetPendingDrag()
+
+  const handle = event.currentTarget as HTMLElement
+
+  handle.releasePointerCapture(event.pointerId)
+
+  if (drag.offset >= closeThreshold.value) {
+    drag.closing = true
+
+    return
+  }
+
+  drag.offset = 0
+}
+
+function resetDragState() {
+  drag.closing = false
+  drag.isDragging = false
+  drag.offset = 0
+  drag.pointerId = undefined
+  drag.startY = 0
+  drag.startedFromContent = false
+}
+
+function resetPendingDrag() {
+  drag.pointerId = undefined
+  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)
+    }
+  }
+
+  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>
+
+<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-bottom-sheet fixed inset-0 z-[60] bg-black/50"
+          :class="{
+            'transition-none motion-reduce:transition-none': drag.isDragging,
+            'transition-opacity duration-200 ease motion-reduce:transition-none motion-reduce:duration-0': !drag.isDragging && (drag.closing || drag.offset > 0),
+          }"
+          :style="{
+            opacity: drag.closing ? 0 : drag.offset > 0 ? Math.max(0, 1 - drag.offset / (panelRef?.offsetHeight ?? 320)) : undefined,
+          }"
+          @click="onClose"
+        />
+      </Transition>
+
+      <Transition
+        enter-active-class="transition-transform duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
+        enter-from-class="translate-y-full motion-reduce:translate-y-0"
+        enter-to-class="translate-y-0"
+        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"
+      >
+        <div
+          v-if="visible"
+          ref="panelRef"
+          :aria-label="title"
+          aria-modal="true"
+          class="layout-bottom-sheet fixed bottom-0 left-0 right-0 z-[60] mx-auto max-h-[85dvh] max-w-screen-md flex flex-col rounded-t-2xl bg-white text-gray-900 shadow-lg safe-bottom dark:bg-gray-900 dark:text-gray-100"
+          :class="{
+            'transition-none motion-reduce:transition-none': drag.isDragging,
+            'transition-transform duration-200 ease motion-reduce:transition-none motion-reduce:duration-0': !drag.isDragging && (drag.closing || drag.offset > 0),
+          }"
+          role="dialog"
+          :style="{
+            transform: drag.closing ? 'translateY(100%)' : drag.offset > 0 ? `translateY(${drag.offset}px)` : undefined,
+          }"
+          tabindex="-1"
+          @transitionend="onPanelTransitionEnd"
+        >
+          <div
+            class="flex shrink-0 cursor-grab touch-none justify-center px-5 pb-2 pt-3 active:cursor-grabbing"
+            @pointercancel="onPointerUp"
+            @pointerdown="onHeaderPointerDown"
+            @pointermove="onPointerMove"
+            @pointerup="onPointerUp"
+          >
+            <div class="h-1.5 w-10 rounded-full bg-gray-300 dark:bg-gray-700" />
+          </div>
+
+          <div
+            ref="contentRef"
+            class="min-h-0 flex-1 overflow-y-auto px-5 pb-4"
+            @pointercancel="onPointerUp"
+            @pointerdown="onContentPointerDown"
+            @pointermove="onPointerMove"
+            @pointerup="onPointerUp"
+          >
+            <slot />
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </ClientOnly>
+</template>

package/app/types/bases.d.ts

@@ -87,7 +87,6 @@ export interface BaseCard {
   id?: number | string
   image?: string
   isSelected?: boolean
-  size?: BaseCardSize
   title?: string
   titleIcon?: string
   to?: RouteLocationNamedI18n
@@ -95,8 +94,6 @@ export interface BaseCard {
 
 export type BaseCardDirection = 'horizontal' | 'vertical'
 
-export type BaseCardSize = 'base' | 'lg' | 'sm'
-
 export interface BaseCharacter {
   character?: BaseCharacterCharacter
   size?: BaseCharacterSize

package/app/types/global.d.ts

@@ -14,7 +14,6 @@ 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
@@ -93,6 +92,9 @@ declare global {
   type FieldTextarea = import('./fields').FieldTextarea
   type FieldTime = import('./fields').FieldTime
 
+  // Layout
+  type LayoutBottomSheet = import('./layout').LayoutBottomSheet
+
   // Project
   type LayerIconIcon = import('../composables/useLayerIcons').LayerIconIcon
   type LayerIconValue = import('../composables/useLayerIcons').LayerIconValue

package/app/types/layout.d.ts

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

package/nuxt.config.ts

@@ -5,9 +5,11 @@ import { defineNuxtConfig } from 'nuxt/config'
 import uno from './uno.config.js'
 
 const currentDir = path.dirname(fileURLToPath(import.meta.url))
+const isPostHogEnabled = process.env.NODE_ENV === 'production' && Boolean(process.env.NUXT_PUBLIC_POSTHOG_KEY)
 
 export default defineNuxtConfig({
   modules: [
+    '@posthog/nuxt',
     '@nuxt/icon',
     '@nuxt/scripts',
     '@nuxtjs/color-mode',
@@ -88,6 +90,20 @@ export default defineNuxtConfig({
     experimental: { typedPages: true },
   },
 
+  posthogConfig: {
+    clientConfig: {
+      capture_pageview: isPostHogEnabled,
+      defaults: '2026-01-30',
+      disable_session_recording: !isPostHogEnabled,
+      opt_out_capturing_by_default: !isPostHogEnabled,
+      person_profiles: 'identified_only',
+      session_recording: { maskAllInputs: true },
+      ui_host: 'https://eu.posthog.com',
+    },
+    host: 'https://eu.i.posthog.com',
+    publicKey: isPostHogEnabled ? process.env.NUXT_PUBLIC_POSTHOG_KEY : '',
+  },
+
   plausible: {
     apiHost: 'https://plausible.saasmakers.dev',
     autoOutboundTracking: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "1.4.49",
+  "version": "1.4.51",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -30,6 +30,7 @@
     "@nuxtjs/robots": "6.1.0",
     "@nuxtjs/sitemap": "8.2.0",
     "@pinia/nuxt": "0.11.3",
+    "@posthog/nuxt": "1.7.76",
     "@unhead/vue": "2.0.19",
     "@unocss/nuxt": "66.7.0",
     "@unocss/reset": "66.7.0",