@saasmakers/ui 2.0.72 → 2.0.74

package/app/components/bases/BaseButton.vue

@@ -79,8 +79,8 @@ function onClick(event: MouseEvent) {
       'cursor-wait': loading,
       'cursor-pointer': !loading,
       'w-full': fullWidth,
-      'bg-transparent shadow-none': light,
-      'shadow-sm': !light,
+      'bg-transparent shadow-none': light && color !== 'gray',
+      'shadow-sm': !light || color === 'gray',
       'rounded-lg': shape !== 'circle',
       'rounded-full': shape === 'circle',
       'h-10 w-10': size === 'sm' && hasFixedSize && !confirming,
@@ -91,7 +91,8 @@ function onClick(event: MouseEvent) {
       'border-gray-900 dark:border-gray-100 text-gray-900 dark:text-gray-100': color === 'black' && light,
       'border-gray-800 dark:border-gray-200 bg-gray-800 dark:bg-gray-200 text-white dark:text-black': color === 'gray' && !light,
       'hover:bg-gray-900 dark:hover:bg-gray-100': color === 'gray' && !light && !disabled && !loading,
-      'border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200': color === 'gray' && light,
+      'border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100': color === 'gray' && light,
+      'hover:border-gray-300 dark:hover:border-gray-700': color === 'gray' && light && !disabled && !loading,
       'border-green-800 dark:border-green-200 bg-green-800 dark:bg-green-200 text-white dark:text-black': color === 'green' && !light,
       'hover:bg-green-900 dark:hover:bg-green-100': color === 'green' && !light && !disabled && !loading,
       'border-green-800 dark:border-green-200 text-green-800 dark:text-green-200': color === 'green' && light,
@@ -107,7 +108,7 @@ function onClick(event: MouseEvent) {
       'border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100': color === 'white' && !light,
       'hover:bg-white dark:hover:bg-gray-900': color === 'white' && !light && !disabled && !loading,
       '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:border-black dark:hover:border-white hover:text-black dark:hover:text-white': color !== 'gray' && 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-10 px-5': size === 'sm' && (!hasFixedSize || confirming),
       'h-12 px-6': size === 'base' && (!hasFixedSize || confirming),

package/app/components/layout/LayoutBottomSheet.vue

@@ -1,7 +1,10 @@
 <script lang="ts" setup>
 import type { LayoutBottomSheet } from '../../types/layout'
 
-const props = withDefaults(defineProps<LayoutBottomSheet>(), { 'aria-label': undefined })
+const props = withDefaults(defineProps<LayoutBottomSheet>(), {
+  'aria-label': undefined,
+  'closeOnBackdrop': true,
+})
 
 defineSlots<{
   default?: () => VNode[]
@@ -29,6 +32,12 @@ const closeThreshold = computed(() => {
   return (panelRef.value?.offsetHeight ?? 320) * closeThresholdRatio
 })
 
+function onBackdropClick() {
+  if (props.closeOnBackdrop) {
+    onClose()
+  }
+}
+
 function onClose() {
   visible.value = false
 }
@@ -182,7 +191,7 @@ watch(visible, (isVisible) => {
     :drag-transition="!drag.isDragging && (drag.closing || drag.offset > 0)"
     :opacity="drag.closing ? 0 : drag.offset > 0 ? Math.max(0, 1 - drag.offset / (panelRef?.offsetHeight ?? 320)) : undefined"
     :transitionless="drag.isDragging"
-    @click="onClose"
+    @click="onBackdropClick"
   />
 
   <ClientOnly>

package/app/types/layout.d.ts

@@ -12,6 +12,7 @@ export interface LayoutBackdrop {
 
 export interface LayoutBottomSheet {
   'aria-label'?: string
+  'closeOnBackdrop'?: boolean
 }
 
 export interface LayoutModal {

package/package.json

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