@saasmakers/ui 1.4.56 → 1.5.1

package/app/components/bases/BaseButton.vue

@@ -55,7 +55,7 @@ function onClick(event: MouseEvent) {
 <template>
   <component
     :is="to ? NuxtLinkLocale : 'button'"
-    class="relative inline-block select-none appearance-none border focus-visible:outline-none"
+    class="relative inline-block select-none appearance-none border uppercase focus-visible:outline-none"
     :class="{
       'flex items-center justify-center': circular,
       'cursor-not-allowed opacity-50': disabled,

package/app/components/bases/BaseCard.vue

@@ -64,6 +64,7 @@ function onClick(event: MouseEvent) {
       'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-4': hasBackground && size === 'lg' && orientation === 'vertical',
       'hover:border-gray-300 dark:hover:border-gray-700': hasBackground && isClickable,
       'rounded-xl': hasBackground,
+      'relative': orientation === 'vertical',
     }"
     :to="disabled ? undefined : to"
     @click="onClick"
@@ -83,8 +84,7 @@ function onClick(event: MouseEvent) {
           class="relative z-10 flex items-center justify-center flex-initial"
           :class="{
             'border shadow-inner': !avatar && !image,
-            'rounded-lg': !avatar && !image && orientation === 'horizontal',
-            'rounded-full': !avatar && !image && orientation === 'vertical',
+            'rounded-lg': !avatar && !image,
             'border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-900': !avatar && !image,
             'mr-2': orientation === 'horizontal' && size === 'base',
             'mr-3': orientation === 'horizontal' && size === 'lg',
@@ -100,10 +100,8 @@ function onClick(event: MouseEvent) {
 
           <BaseAvatar
             v-if="avatar"
-            class="flex-initial"
+            class="rounded-lg flex-initial"
             :class="{
-              'rounded-lg': orientation === 'horizontal',
-              'rounded-full': orientation === 'vertical',
               'h-10 w-10': size === 'base' && orientation === 'horizontal',
               'h-12 w-12': size === 'lg' && orientation === 'horizontal',
               'h-20 w-20': size === 'base' && orientation === 'vertical',
@@ -132,10 +130,8 @@ function onClick(event: MouseEvent) {
 
           <img
             v-else-if="image"
-            class="select-none object-cover shadow-sm transition-[filter] duration-300 drag-none flex-initial"
+            class="select-none rounded-lg object-cover shadow-sm transition-[filter] duration-300 drag-none flex-initial"
             :class="{
-              'rounded-lg': orientation === 'horizontal',
-              'rounded-full': orientation === 'vertical',
               'h-9 w-9': size === 'base' && orientation === 'horizontal',
               'h-11 w-11': size === 'lg' && orientation === 'horizontal',
               'h-20 w-20': size === 'base' && orientation === 'vertical',
@@ -194,8 +190,11 @@ function onClick(event: MouseEvent) {
 
       <BaseIcon
         v-if="isSelected"
-        class="mr-1.5 self-center flex-initial"
+        class="flex-initial"
         :class="{
+          'mr-1.5 self-center': orientation === 'horizontal',
+          'absolute right-2 top-2': orientation === 'vertical' && size === 'base',
+          'absolute right-2.5 top-2.5': orientation === 'vertical' && size === 'lg',
           'text-xl': size === 'base',
           'text-2xl': size === 'lg',
         }"

package/app/components/bases/BaseDivider.vue

@@ -3,8 +3,10 @@ import type { BaseDivider } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseDivider>(), {
   borderStyle: 'solid',
+  color: 'black',
   hideNext: false,
   hidePrevious: false,
+  light: false,
   loading: false,
   navigable: false,
   pill: false,
@@ -12,6 +14,34 @@ const props = withDefaults(defineProps<BaseDivider>(), {
   title: '',
 })
 
+const pillLineBorderClasses = computed(() => {
+  if (!props.pill) {
+    return 'border-gray-300 dark:border-gray-700'
+  }
+
+  if (props.color === 'indigo' && !props.light) {
+    return 'border-indigo-700 dark:border-indigo-300'
+  }
+
+  if (props.color === 'gray' && props.light) {
+    return 'border-gray-300 dark:border-gray-700'
+  }
+
+  return 'border-gray-900 dark:border-gray-300'
+})
+
+const pillClasses = computed(() => {
+  if (props.color === 'indigo' && !props.light) {
+    return 'bg-indigo-800 dark:bg-indigo-200 text-white dark:text-black'
+  }
+
+  if (props.color === 'gray' && props.light) {
+    return 'bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400'
+  }
+
+  return 'bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900'
+})
+
 const emit = defineEmits<{
   navigate: [event: MouseEvent, direction: BaseDividerNavigateDirection]
 }>()
@@ -64,19 +94,21 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
 
         <div
           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,
-          }"
+          :class="[
+            pillLineBorderClasses,
+            {
+              'border-dashed': borderStyle === 'dashed',
+              'border-dotted': borderStyle === 'dotted',
+            },
+          ]"
           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"
+        class="mx-3 rounded-full px-3 py-1 text-xs font-medium tracking-wide"
+        :class="pillClasses"
       >{{ title }}</span>
 
       <BaseText
@@ -89,12 +121,13 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
       <div class="flex items-center">
         <div
           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,
-          }"
+          :class="[
+            pillLineBorderClasses,
+            {
+              'border-dashed': borderStyle === 'dashed',
+              'border-dotted': borderStyle === 'dotted',
+            },
+          ]"
           style="height: 1px"
         />
 

package/app/components/bases/BaseHeading.vue

@@ -16,7 +16,7 @@ defineSlots<{
 <template>
   <component
     :is="tag"
-    class="select-text tracking-tight normal-case"
+    class="select-text tracking-tight"
     :class="{
       'justify-start': alignment === 'left',
       'justify-center text-center': alignment === 'center',

package/app/components/bases/BaseParagraph.vue

@@ -14,7 +14,7 @@ defineSlots<{
 
 <template>
   <p
-    class="select-text font-medium leading-relaxed tracking-tight normal-case"
+    class="select-text font-medium leading-relaxed tracking-tight"
     :class="{
       'text-center': alignment === 'center',
       'text-left': alignment === 'left',

package/app/components/bases/BaseQuote.vue

@@ -88,7 +88,7 @@ function onClose(event: MouseEvent) {
       :size="size"
     />
 
-    <div class="flex flex-1 flex-col font-semibold normal-case">
+    <div class="flex flex-1 flex-col font-semibold">
       <div
         class="rounded-2xl text-left transition duration-300"
         :class="{

package/app/components/bases/BaseShortcut.vue

@@ -48,7 +48,7 @@ onKeyStroke(
 <template>
   <kbd
     class="h-3.5 min-w-3.5 inline-flex items-center justify-center border border-current/50 rounded px-0.5 text-2xs leading-none"
-    :class="{ 'font-mono uppercase': shortcut.toLowerCase() !== 'enter' }"
+    :class="{ 'font-mono': shortcut.toLowerCase() !== 'enter' }"
   >
     <Icon
       v-if="shortcut.toLowerCase() === 'enter'"

package/app/components/bases/BaseTag.vue

@@ -21,7 +21,6 @@ const props = withDefaults(defineProps<BaseTag>(), {
   text: '',
   to: undefined,
   truncate: false,
-  uppercase: true,
 })
 
 const emit = defineEmits<{
@@ -112,7 +111,6 @@ function onRemove(event: MouseEvent) {
         'cursor-pointer': clickable,
         'rounded-md': !rounded,
         'rounded-full': rounded,
-        'uppercase': uppercase,
         'border-gray-200 dark:border-gray-800 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200': (color === 'black' && light && !active) || removable,
         'border-gray-900 dark:border-gray-100 bg-gray-900 dark:bg-gray-100 text-white dark:text-black': color === 'black' && (!light || active),
         'border-gray-700 dark:border-gray-300 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300': color === 'gray' && light && !active,

package/app/components/bases/BaseToast.vue

@@ -31,7 +31,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
 
 <template>
   <div
-    class="group flex select-none items-center border border-gray-200 rounded-full bg-white px-3 py-2 text-base text-gray-800 font-normal uppercase shadow-sm transition-colors dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+    class="group flex select-none items-center border border-gray-200 rounded-full bg-white px-3 py-2 text-base text-gray-800 font-normal shadow-sm transition-colors dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
     :class="{ 'cursor-pointer': hasClose }"
     role="button"
     tabindex="0"
@@ -47,7 +47,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
 
     <button
       v-if="action"
-      class="ml-2 min-h-6 inline-flex items-center justify-center gap-1.25 rounded-md px-2 py-0.5 uppercase transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800"
+      class="ml-2 min-h-6 inline-flex items-center justify-center gap-1.25 rounded-md px-2 py-0.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800"
       :class="{
         'bg-red-100 text-red-700 hover:bg-red-200 focus-visible:ring-red-500 dark:bg-red-400/15 dark:text-red-400 dark:hover:bg-red-400/25': status === 'error',
         'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 focus-visible:ring-indigo-500 dark:bg-indigo-400/15 dark:text-indigo-400 dark:hover:bg-indigo-400/25': status === 'info',

package/app/components/fields/FieldCheckbox.vue

@@ -13,7 +13,6 @@ withDefaults(defineProps<Omit<FieldCheckbox, 'modelValue'>>(), {
   required: false,
   size: 'base',
   truncate: false,
-  uppercase: false,
   validation: undefined,
 })
 

package/app/components/fields/FieldInput.vue

@@ -24,7 +24,6 @@ const props = withDefaults(defineProps<Omit<FieldInput, 'modelValue'>>(), {
   slugOnly: false,
   trim: false,
   type: 'text',
-  uppercase: false,
   validation: undefined,
 })
 
@@ -179,14 +178,12 @@ defineExpose({ focus })
           :id="id"
           ref="input"
           :autocomplete="autocomplete ? 'on' : 'off'"
-          class="h-full w-full appearance-none items-center rounded-lg outline-none placeholder-gray-600 dark:placeholder-gray-400"
+          class="h-full w-full appearance-none items-center rounded-lg font-medium tracking-tight normal-case outline-none placeholder-gray-600 dark:placeholder-gray-400"
           :class="{
             'field-disabled': disabled,
             'focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100': !disabled,
             'text-gray-900 dark:text-gray-100': !lineThrough,
             'text-gray-500 dark:text-gray-500 line-through': lineThrough,
-            'font-medium tracking-tight uppercase': uppercase,
-            'font-normal': !uppercase,
             'text-center': alignment === 'center',
             'text-left': alignment === 'left',
             'text-right': alignment === 'right',

package/app/components/fields/FieldLabel.vue

@@ -37,6 +37,10 @@ const textSize = computed<BaseSize>(() => {
 })
 
 function onClick(event: MouseEvent) {
+  if (!isClickable.value) {
+    return
+  }
+
   emit('click', event)
 }
 
@@ -79,7 +83,7 @@ function onKeyDown(event: KeyboardEvent) {
     :for="forField || undefined"
     :tabindex="isClickable && !forField ? 0 : undefined"
     :type="isClickable && !forField ? 'button' : undefined"
-    @click="isClickable ? onClick : undefined"
+    @click="onClick"
     @keydown="onKeyDown"
   >
     <BaseIcon

package/app/components/fields/FieldSelect.vue

@@ -247,14 +247,14 @@ function selectOption(event: MouseEvent, value: string) {
               :icon="selectedOption.icon"
             />
 
-            <span class="flex-1 truncate font-medium uppercase">
+            <span class="flex-1 truncate font-medium">
               {{ selectedOption.text }}
             </span>
           </template>
 
           <span
             v-else-if="placeholder"
-            class="flex-1 truncate text-gray-600 font-medium uppercase dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-100"
+            class="flex-1 truncate text-gray-600 font-medium dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-100"
           >
             {{ placeholder }}
           </span>

package/app/components/fields/FieldTextarea.vue

@@ -67,7 +67,7 @@ function onFieldClick(event: MouseEvent) {
       ref="textarea"
       v-model="modelValue"
       v-bind="{ 'data-enable-grammarly': 'false' }"
-      class="w-full flex-1 appearance-none rounded-lg text-gray-900 font-medium tracking-tight uppercase outline-none dark:text-gray-100 placeholder-gray-600 dark:placeholder-gray-400"
+      class="w-full flex-1 appearance-none rounded-lg text-gray-900 font-medium tracking-tight normal-case outline-none dark:text-gray-100 placeholder-gray-600 dark:placeholder-gray-400"
       :class="{
         'field-disabled': disabled,
         'focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100': !disabled,

package/app/components/layout/LayoutBottomSheet.vue

@@ -5,6 +5,7 @@ withDefaults(defineProps<LayoutBottomSheet>(), { title: undefined })
 
 defineSlots<{
   default?: () => VNode[]
+  footer?: () => VNode[]
   hero?: () => VNode[]
 }>()
 
@@ -215,7 +216,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 outline-none 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 app-text 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),
@@ -241,7 +242,8 @@ watch(visible, (isVisible) => {
 
           <div
             ref="contentRef"
-            class="min-h-0 flex-1 overflow-y-auto px-5 pb-8"
+            class="min-h-0 flex-1 overflow-y-auto px-5"
+            :class="$slots.footer ? 'pb-4' : 'pb-6'"
             @pointercancel="onPointerUp"
             @pointerdown="onContentPointerDown"
             @pointermove="onPointerMove"
@@ -249,6 +251,13 @@ watch(visible, (isVisible) => {
           >
             <slot />
           </div>
+
+          <div
+            v-if="$slots.footer"
+            class="flex shrink-0 justify-center px-5 pb-6 pt-2"
+          >
+            <slot name="footer" />
+          </div>
         </div>
       </Transition>
     </Teleport>

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 outline-none 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 app-text shadow-lg outline-none dark:bg-gray-900 dark:text-gray-100"
             role="dialog"
             tabindex="-1"
           >

package/app/types/bases.d.ts

@@ -131,8 +131,10 @@ export type BaseColor
 
 export interface BaseDivider {
   borderStyle?: BaseDividerBorderStyle
+  color?: BaseColor
   hideNext?: boolean
   hidePrevious?: boolean
+  light?: boolean
   loading?: boolean
   navigable?: boolean
   pill?: boolean
@@ -346,7 +348,6 @@ export interface BaseTag {
   text: BaseTextText
   to?: RouteLocationNamedI18n
   truncate?: boolean
-  uppercase?: boolean
 }
 
 export interface BaseTags {

package/app/types/fields.d.ts

@@ -34,7 +34,6 @@ export interface FieldCheckbox {
   required?: boolean
   size?: FieldSize
   truncate?: boolean
-  uppercase?: boolean
   validation?: VuelidateValidation
 }
 
@@ -72,7 +71,6 @@ export interface FieldInput {
   slugOnly?: boolean
   trim?: boolean
   type?: FieldInputType
-  uppercase?: boolean
   validation?: VuelidateValidation
 }
 

package/package.json

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

package/uno.config.ts

@@ -24,7 +24,10 @@ export const rules: [string, Record<string, string>][] = [
   ['safe-bottom', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
 ]
 
-export const shortcuts: Record<string, string> = { 'field-disabled': 'opacity-50 cursor-not-allowed' }
+export const shortcuts: Record<string, string> = {
+  'app-text': 'font-bold leading-relaxed tracking-tight uppercase',
+  'field-disabled': 'opacity-50 cursor-not-allowed',
+}
 
 export const theme = {
   container: {