@saasmakers/ui 2.0.21 → 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/BaseAvatar.vue

@@ -5,10 +5,10 @@ import type { BaseAvatar } from '../../types/bases'
 const props = withDefaults(defineProps<BaseAvatar>(), {
   bordered: true,
   borderWidth: 3,
-  circular: true,
   editable: false,
   maxSizeMb: undefined,
   shadow: true,
+  shape: 'circle',
   src: undefined,
   to: undefined,
 })
@@ -102,7 +102,8 @@ function onMouseLeave() {
       :aria-label="editable ? t('edit') : undefined"
       class="relative h-full w-full overflow-hidden"
       :class="{
-        'rounded-full': circular,
+        'rounded-full': shape === 'circle',
+        'rounded-lg': shape === 'square',
         'shadow': shadow,
         'cursor-pointer': isClickable,
       }"
@@ -116,7 +117,8 @@ function onMouseLeave() {
       <img
         class="h-full w-full object-cover drag-none"
         :class="{
-          'rounded-full': circular,
+          'rounded-full': shape === 'circle',
+          'rounded-lg': shape === 'square',
           'border-white dark:border-white': bordered,
           'border-2': bordered && borderWidth === 2,
           'border-3': bordered && borderWidth === 3,

package/app/components/bases/BaseButton.vue

@@ -4,7 +4,6 @@ import type { BaseButton } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseButton>(), {
   background: true,
-  circular: false,
   color: 'black',
   confirmation: false,
   disabled: false,
@@ -15,6 +14,7 @@ const props = withDefaults(defineProps<BaseButton>(), {
   light: false,
   loading: false,
   reverse: false,
+  shape: 'default',
   size: 'base',
   text: '',
   to: undefined,
@@ -33,6 +33,10 @@ defineSlots<{
 const confirming = ref(false)
 const { t } = useI18n()
 
+const hasFixedSize = computed(() => {
+  return props.shape === 'square' || props.shape === 'circle'
+})
+
 function onClick(event: MouseEvent) {
   if (!props.loading) {
     if (props.confirmation) {
@@ -56,21 +60,21 @@ function onClick(event: MouseEvent) {
     :is="to ? NuxtLinkLocale : 'button'"
     class="relative inline-block select-none appearance-none border uppercase focus-visible:outline-none"
     :class="{
-      'flex items-center justify-center': circular,
+      'flex items-center justify-center': hasFixedSize,
       'cursor-not-allowed opacity-50': disabled,
       'cursor-wait': loading,
       'cursor-pointer': !loading,
       'w-full': fullWidth,
       'bg-transparent shadow-none': light,
       'shadow-sm': !light,
-      'rounded-lg': !circular,
-      'rounded-full': circular,
-      'h-6 w-6': size === '2xs' && circular,
-      'h-8 w-8': size === 'xs' && circular && !confirming,
-      'h-10 w-10': size === 'sm' && circular && !confirming,
-      'h-12 w-12': size === 'base' && circular && !confirming,
-      'h-14 w-14': size === 'lg' && circular && !confirming,
-      'h-16 w-16': size === 'xl' && circular && !confirming,
+      'rounded-lg': shape !== 'circle',
+      'rounded-full': shape === 'circle',
+      'h-6 w-6': size === '2xs' && hasFixedSize,
+      'h-8 w-8': size === 'xs' && hasFixedSize && !confirming,
+      'h-10 w-10': size === 'sm' && hasFixedSize && !confirming,
+      'h-12 w-12': size === 'base' && hasFixedSize && !confirming,
+      'h-14 w-14': size === 'lg' && hasFixedSize && !confirming,
+      'h-16 w-16': size === 'xl' && hasFixedSize && !confirming,
       'border-gray-900 dark:border-gray-100 bg-gray-900 dark:bg-gray-100 text-white dark:text-black': color === 'black' && !light,
       'hover:bg-black dark:hover:bg-white hover:text-white dark:hover:text-black': color === 'black' && !light && !disabled && !loading,
       'border-gray-900 dark:border-gray-100 text-gray-900 dark:text-gray-100': color === 'black' && light,
@@ -94,12 +98,12 @@ function onClick(event: MouseEvent) {
       'border-white dark:border-gray-900 text-white dark:text-black': color === 'white' && light,
       'hover:border-black dark:hover:border-white hover:text-black dark:hover:text-white': color !== 'white' && light && !disabled && !loading,
       'hover:bg-white dark:hover:bg-gray-900 hover:text-gray-800 dark:hover:text-gray-200': color === 'white' && light && !disabled && !loading,
-      'h-6 px-3': size === '2xs' && (!circular || confirming),
-      'h-8 px-4': size === 'xs' && (!circular || confirming),
-      'h-10 px-5': size === 'sm' && (!circular || confirming),
-      'h-12 px-6': size === 'base' && (!circular || confirming),
-      'h-13 px-6.5': size === 'lg' && (!circular || confirming),
-      'h-14 px-7': size === 'xl' && (!circular || confirming),
+      'h-6 px-3': size === '2xs' && (!hasFixedSize || confirming),
+      'h-8 px-4': size === 'xs' && (!hasFixedSize || confirming),
+      'h-10 px-5': size === 'sm' && (!hasFixedSize || confirming),
+      'h-12 px-6': size === 'base' && (!hasFixedSize || confirming),
+      'h-13 px-6.5': size === 'lg' && (!hasFixedSize || confirming),
+      'h-14 px-7': size === 'xl' && (!hasFixedSize || confirming),
     }"
     :disabled="disabled"
     :to="to"

package/app/components/fields/FieldLabel.vue

@@ -27,6 +27,8 @@ const textSize = computed<BaseSize>(() => {
   switch (props.size) {
     case 'lg':
       return 'base'
+    case 'base':
+      return 'sm'
     case 'sm':
       return 'xs'
     default:

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/bases.d.ts

@@ -24,13 +24,17 @@ export interface BaseAlert {
 // Global types for bases
 export type BaseAlignment = 'center' | 'left' | 'right'
 
+export type BaseButtonShape = 'circle' | 'default' | 'square'
+
+export type BaseAvatarShape = 'circle' | 'square'
+
 export interface BaseAvatar {
   bordered?: boolean
   borderWidth?: number
-  circular?: boolean
   editable?: boolean
   maxSizeMb?: number
   shadow?: boolean
+  shape?: BaseAvatarShape
   src?: string
   to?: RouteLocationNamedI18n
 }
@@ -49,7 +53,6 @@ export type BaseBorderedColor = 'black' | 'gray'
 
 export interface BaseButton {
   background?: boolean
-  circular?: boolean
   color?: BaseColor
   confirmation?: boolean
   disabled?: boolean
@@ -60,6 +63,7 @@ export interface BaseButton {
   light?: boolean
   loading?: boolean
   reverse?: boolean
+  shape?: BaseButtonShape
   size?: BaseButtonSize
   text?: BaseTextText
   to?: RouteLocationNamedI18n

package/app/types/global.d.ts

@@ -66,6 +66,8 @@ declare global {
   type BaseQuoteSize = import('./bases').BaseQuoteSize
   type BaseShortcut = import('./bases').BaseShortcut
   type BaseSize = import('./bases').BaseSize
+  type BaseButtonShape = import('./bases').BaseButtonShape
+  type BaseAvatarShape = import('./bases').BaseAvatarShape
   type BaseSpinner = import('./bases').BaseSpinner
   type BaseStatus = import('./bases').BaseStatus
   type BaseTag = import('./bases').BaseTag

package/package.json

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