@saasmakers/ui 1.4.55 → 1.4.56

package/app/components/bases/BaseCard.vue

@@ -42,14 +42,10 @@ const hasAvatarBox = computed<boolean>(() => {
 })
 
 const isClickable = computed(() => {
-  return !props.disabled && (props.to || props.clickable)
+  return props.to || props.clickable
 })
 
 function onClick(event: MouseEvent) {
-  if (props.disabled) {
-    return
-  }
-
   emit('click', event, props.id)
 }
 </script>
@@ -61,7 +57,6 @@ function onClick(event: MouseEvent) {
     :class="{
       'cursor-default': !isClickable,
       'cursor-pointer': isClickable,
-      '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' && orientation === 'horizontal',
       'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-2.5 pr-4': hasBackground && size === 'lg' && orientation === 'horizontal',
@@ -137,7 +132,7 @@ function onClick(event: MouseEvent) {
 
           <img
             v-else-if="image"
-            class="object-cover shadow-sm transition-[filter] duration-300 drag-none flex-initial"
+            class="select-none object-cover shadow-sm transition-[filter] duration-300 drag-none flex-initial"
             :class="{
               'rounded-lg': orientation === 'horizontal',
               'rounded-full': orientation === 'vertical',

package/app/components/bases/BaseDivider.vue

@@ -6,8 +6,8 @@ const props = withDefaults(defineProps<BaseDivider>(), {
   hideNext: false,
   hidePrevious: false,
   loading: false,
-  margin: 6,
   navigable: false,
+  pill: false,
   size: 'base',
   title: '',
 })
@@ -28,18 +28,10 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
 
 <template>
   <div
+    class="my-6"
     :class="{
-      'my-3': margin === 3,
-      'my-4': margin === 4,
-      'my-5': margin === 5,
-      'my-6': margin === 6,
-      'my-7': margin === 7,
-      'my-8': margin === 8,
-      'my-10': margin === 10,
-      'my-12': margin === 12,
-      'my-16': margin === 16,
-      'my-20': margin === 20,
-      'mx-auto max-w-xs': size === 'sm',
+      'mx-auto max-w-xs': size === 'sm' && !pill,
+      'mx-auto w-full max-w-sm': pill,
     }"
   >
     <div
@@ -53,7 +45,11 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
 
     <div
       v-else
-      class="grid grid-cols-[1fr_auto_1fr] items-center"
+      class="grid items-center"
+      :class="{
+        'grid-cols-[minmax(1.5rem,1fr)_auto_minmax(1.5rem,1fr)]': pill,
+        'grid-cols-[1fr_auto_1fr]': !pill,
+      }"
     >
       <div class="flex items-center">
         <BaseIcon
@@ -67,17 +63,24 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
         />
 
         <div
-          class="flex-1 border-t border-gray-300 dark:border-gray-700"
+          class="flex-1 border-t"
           :class="{
             'border-dashed': borderStyle === 'dashed',
             'border-dotted': borderStyle === 'dotted',
+            'border-gray-900 dark:border-gray-300': pill,
+            'border-gray-300 dark:border-gray-700': !pill,
           }"
           style="height: 1px"
         />
       </div>
 
+      <span
+        v-if="pill && title && !loading"
+        class="mx-3 rounded-full bg-gray-900 px-3 py-1 text-xs text-white font-medium tracking-wide uppercase dark:bg-gray-100 dark:text-gray-900"
+      >{{ title }}</span>
+
       <BaseText
-        v-if="loading || title"
+        v-else-if="loading || title"
         class="px-4 text-center"
         :size="navigable ? 'xs' : 'sm'"
         :text="loading ? t('loading') : title"
@@ -85,10 +88,12 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
 
       <div class="flex items-center">
         <div
-          class="flex-1 border-t border-gray-300 dark:border-gray-700"
+          class="flex-1 border-t"
           :class="{
             'border-dashed': borderStyle === 'dashed',
             'border-dotted': borderStyle === 'dotted',
+            'border-gray-900 dark:border-gray-300': pill,
+            'border-gray-300 dark:border-gray-700': !pill,
           }"
           style="height: 1px"
         />

package/app/components/layout/LayoutBottomSheet.vue

@@ -5,6 +5,7 @@ withDefaults(defineProps<LayoutBottomSheet>(), { title: undefined })
 
 defineSlots<{
   default?: () => VNode[]
+  hero?: () => VNode[]
 }>()
 
 const closeThresholdRatio = 0.25
@@ -214,7 +215,7 @@ watch(visible, (isVisible) => {
           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="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 outline-none 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),
@@ -236,9 +237,11 @@ watch(visible, (isVisible) => {
             <div class="h-1.5 w-10 rounded-full bg-gray-300 dark:bg-gray-700" />
           </div>
 
+          <slot name="hero" />
+
           <div
             ref="contentRef"
-            class="min-h-0 flex-1 overflow-y-auto px-5 pb-4"
+            class="min-h-0 flex-1 overflow-y-auto px-5 pb-8"
             @pointercancel="onPointerUp"
             @pointerdown="onContentPointerDown"
             @pointermove="onPointerMove"

package/app/components/layout/LayoutModal.vue

@@ -52,7 +52,7 @@ function onClose() {
             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"
+            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 outline-none dark:bg-gray-900 dark:text-gray-100"
             role="dialog"
             tabindex="-1"
           >

package/app/types/bases.d.ts

@@ -134,8 +134,8 @@ export interface BaseDivider {
   hideNext?: boolean
   hidePrevious?: boolean
   loading?: boolean
-  margin?: number
   navigable?: boolean
+  pill?: boolean
   size?: BaseDividerSize
   title?: string
 }

package/package.json

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

package/uno.config.ts

@@ -12,7 +12,9 @@ export const rules: [string, Record<string, string>][] = [
       '-ms-user-drag': 'none',
       '-webkit-tap-highlight-color': 'transparent',
       '-webkit-user-drag': 'none',
+      '-webkit-user-select': 'none',
       'user-drag': 'none',
+      'user-select': 'none',
     },
   ],
   ['flex-initial', { flex: '0 0 auto' }],