@saasmakers/ui 2.0.22 → 2.0.23

package/app/components/bases/BaseAction.vue

@@ -77,7 +77,6 @@ function onClick(event: MouseEvent) {
       />
 
       <BaseText
-        bold
         class="tracking-tight uppercase"
         :size="size === 'lg' ? 'xs' : '2xs'"
         :text="confirming ? t('confirm') : text"

package/app/components/bases/BaseButton.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import { NuxtLinkLocale } from '#components'
-import type { BaseButton, BaseButtonShape } from '../../types/bases'
-
-const fixedSizeButtonShapes = ['square', 'circle'] satisfies BaseButtonShape[]
+import type { BaseButton } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseButton>(), {
   background: true,
@@ -36,7 +34,7 @@ const confirming = ref(false)
 const { t } = useI18n()
 
 const hasFixedSize = computed(() => {
-  return fixedSizeButtonShapes.includes(props.shape)
+  return props.shape === 'square' || props.shape === 'circle'
 })
 
 function onClick(event: MouseEvent) {

package/app/components/fields/FieldAvatar.vue

@@ -128,7 +128,7 @@ function onOpenFilePicker() {
 
         <BaseText
           class="min-w-0 flex-1 text-gray-900 dark:text-gray-100"
-          :size="({ base: 'sm', lg: 'base', sm: 'xs', xs: '2xs' } as const)[size]"
+          :size="({ base: 'sm', lg: 'base', sm: 'xs' } as const)[size]"
           :text="loading ? t('actionLoading') : (action || t('action'))"
         />
       </div>

package/app/components/fields/FieldInput.vue

@@ -166,7 +166,6 @@ defineExpose({ blur, focus })
     <div
       class="flex items-center"
       :class="{
-        'h-8': size === 'xs',
         'h-10': size === 'sm',
         'h-12': size === 'base',
         'h-14': size === 'lg',
@@ -200,7 +199,6 @@ defineExpose({ blur, focus })
             'px-10': border === 'bottom' && type !== 'password',
             'border-0 p-0': border === 'none' && type !== 'password',
             'border-0 pr-9': border === 'none' && type === 'password',
-            'text-2xs': size === 'xs',
             'text-xs': size === 'sm',
             'text-sm': size === 'base',
             'text-base': size === 'lg',

package/app/components/fields/FieldLabel.vue

@@ -27,10 +27,10 @@ const textSize = computed<BaseSize>(() => {
   switch (props.size) {
     case 'lg':
       return 'base'
+    case 'base':
+      return 'sm'
     case 'sm':
       return 'xs'
-    case 'xs':
-      return '2xs'
     default:
       return 'sm'
   }
@@ -71,11 +71,9 @@ function onKeyDown(event: KeyboardEvent) {
       'text-gray-500 dark:text-gray-500 line-through': lineThrough,
       'hover:text-black dark:hover:text-white': isClickable && !lineThrough,
       'w-0 truncate': truncate,
-      'mb-1.5': size === 'xs' && hasMarginBottom,
       'mb-2': size === 'sm' && hasMarginBottom,
       'mb-2.5': size === 'base' && hasMarginBottom,
       'mb-3': size === 'lg' && hasMarginBottom,
-      'ml-1': size === 'xs' && hasMarginLeft,
       'ml-1.5': size === 'sm' && hasMarginLeft,
       'ml-2': size === 'base' && hasMarginLeft,
       'ml-2.5': size === 'lg' && hasMarginLeft,

package/app/components/layout/LayoutBottomSheet.vue

@@ -14,7 +14,7 @@ const dragMoveThreshold = 8
 const visible = defineModel<boolean>({ default: false })
 const contentRef = ref<HTMLElement>()
 const panelRef = ref<HTMLElement>()
-const { release: onAfterLeave } = useDialog(visible, panelRef, { ignoreClass: 'layout-bottom-sheet' })
+const { release: onAfterLeave } = useDialog(visible, panelRef)
 
 const drag = reactive({
   closing: false,

package/app/composables/useDialog.ts

@@ -1,17 +1,10 @@
-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 = ''
+  let savedRootOverflow = ''
 
   function getFocusableElements(container: HTMLElement) {
     return Array.from(container.querySelectorAll<HTMLElement>(focusableSelector))
@@ -20,39 +13,12 @@ export default function useDialog(
       })
   }
 
+  // Rely on the global `scrollbar-gutter: stable` (html/body) to keep the gutter
+  // reserved while the scroll container is locked, so no manual padding
+  // compensation is needed and no horizontal layout shift occurs.
   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`
-      }
-    }
+    savedRootOverflow = document.documentElement.style.overflow
+    document.documentElement.style.overflow = 'hidden'
   }
 
   function onFocusTrap(event: KeyboardEvent) {
@@ -90,14 +56,7 @@ export default function useDialog(
   }
 
   function unlockBodyScroll() {
-    document.body.style.overflow = savedBodyOverflow
-    document.body.style.paddingRight = savedBodyPaddingRight
-
-    for (const [element, paddingRight] of fixedElementPadding) {
-      element.style.paddingRight = paddingRight
-    }
-
-    fixedElementPadding.clear()
+    document.documentElement.style.overflow = savedRootOverflow
   }
 
   // Restores scroll lock and focus trap once the leave transition has finished.

package/app/types/fields.d.ts

@@ -155,7 +155,7 @@ export interface FieldSelectOption {
   value: string
 }
 
-export type FieldSize = 'base' | 'lg' | 'sm' | 'xs'
+export type FieldSize = 'base' | 'lg' | 'sm'
 
 export type FieldStatus
   = | 'default'

package/package.json

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