@saasmakers/ui 2.0.5 → 2.0.7

package/app/components/bases/BaseAction.vue

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import type { BaseAction } from '../../types/bases'
+
+const props = withDefaults(defineProps<BaseAction>(), {
+  active: false,
+  color: 'black',
+  confirmation: false,
+  disabled: false,
+  icon: undefined,
+  loading: false,
+  size: 'base',
+  text: '',
+  variant: 'outline',
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+  confirm: [event: MouseEvent]
+}>()
+
+const confirming = ref(false)
+const { t } = useI18n()
+
+function onClick(event: MouseEvent) {
+  if (props.loading || props.disabled) {
+    return
+  }
+
+  if (props.confirmation) {
+    if (confirming.value) {
+      emit('confirm', event)
+    }
+    else {
+      setTimeout(() => (confirming.value = false), 3 * 1000)
+    }
+
+    confirming.value = !confirming.value
+  }
+  else {
+    emit('click', event)
+  }
+}
+</script>
+
+<template>
+  <button
+    class="relative flex flex-col items-center rounded-lg text-center transition-colors"
+    :aria-busy="loading"
+    :class="{
+      'cursor-not-allowed opacity-50': disabled,
+      'cursor-pointer': !disabled && !loading,
+      'gap-1 p-2': size === 'sm',
+      'gap-1.5 p-3': size === 'base',
+      'gap-2 p-4': size === 'lg',
+      'border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900': variant === 'outline' && !active,
+      'border border-gray-300 bg-gray-100 dark:border-gray-700 dark:bg-gray-800': variant === 'outline' && active,
+      'hover:border-gray-300 dark:hover:border-gray-700': variant === 'outline' && !disabled && !loading,
+      'bg-gray-100 dark:bg-gray-800': variant === 'filled',
+    }"
+    :disabled="disabled || loading"
+    type="button"
+    @click="onClick"
+  >
+    <span
+      class="flex flex-col items-center"
+      :class="{
+        'opacity-0': loading,
+        'gap-1': size === 'sm',
+        'gap-1.5': size === 'base',
+        'gap-2': size === 'lg',
+      }"
+    >
+      <BaseIcon
+        :color="color"
+        :icon="icon"
+        :size="size === 'lg' ? 'xl' : size === 'base' ? 'lg' : 'base'"
+      />
+
+      <BaseText
+        bold
+        class="tracking-tight uppercase"
+        :size="size === 'lg' ? 'xs' : '2xs'"
+        :text="confirming ? t('confirm') : text"
+      />
+    </span>
+
+    <BaseSpinner
+      v-if="loading"
+      class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+      :color="color === 'green' || color === 'orange' || color === 'red' ? color : 'black'"
+      :size="size === 'sm' ? 'xs' : size === 'lg' ? 'base' : 'sm'"
+    />
+  </button>
+</template>
+
+<i18n lang="json">
+{
+  "de": {
+    "confirm": "Bestätigen?"
+  },
+  "en": {
+    "confirm": "Confirm?"
+  },
+  "es": {
+    "confirm": "¿Confirmar?"
+  },
+  "fr": {
+    "confirm": "Confirmer ?"
+  },
+  "id": {
+    "confirm": "Konfirmasi?"
+  },
+  "it": {
+    "confirm": "Confermare?"
+  },
+  "ja": {
+    "confirm": "確認しますか？"
+  },
+  "ko": {
+    "confirm": "확인할까요?"
+  },
+  "nl": {
+    "confirm": "Bevestigen?"
+  },
+  "pl": {
+    "confirm": "Potwierdzić?"
+  },
+  "pt": {
+    "confirm": "Confirmar?"
+  },
+  "pt-BR": {
+    "confirm": "Confirmar?"
+  },
+  "vi": {
+    "confirm": "Xác nhận?"
+  }
+}
+</i18n>

package/app/components/bases/BaseCard.vue

@@ -118,12 +118,9 @@ function onClick(event: MouseEvent) {
 
           <BaseIcon
             v-else-if="icon"
-            :class="{
-              'text-lg': size === 'base',
-              'text-2xl': size === 'lg',
-            }"
             :color="color"
             :icon="icon"
+            :size="size === 'lg' ? '2xl' : 'lg'"
           />
 
           <img
@@ -193,22 +190,17 @@ function onClick(event: MouseEvent) {
           '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',
         }"
         color="green"
         :icon="getLayerIcon('checkCircle')"
+        :size="size === 'lg' ? '2xl' : 'xl'"
       />
 
       <BaseIcon
         v-else-if="orientation === 'horizontal' && (to || hasChevron)"
-        class="self-center text-gray-500 flex-initial dark:text-gray-500"
-        :class="{
-          'group-hover:text-gray-900 dark:group-hover:text-gray-100': isClickable,
-          'text-xl': size === 'base',
-          'text-2xl': size === 'lg',
-        }"
+        class="self-center text-gray-500 flex-initial dark:text-gray-500 group-hover:text-gray-900 dark:group-hover:text-gray-100"
         :icon="getLayerIcon('chevronRight')"
+        :size="size === 'lg' ? '2xl' : 'xl'"
       />
 
       <slot name="right" />

package/app/components/bases/BaseEmoji.vue

@@ -2,6 +2,7 @@
 import type { BaseEmoji } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseEmoji>(), {
+  background: 'gray',
   clickable: true,
   emoji: undefined,
   hasBox: false,
@@ -33,8 +34,11 @@ function onKeyDown(event: KeyboardEvent) {
   <span
     class="flex items-center justify-center transition"
     :class="{
-      'border border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-900 shadow-inner': hasBox,
-      'cursor-pointer hover:border-gray-400 dark:hover:border-gray-600': clickable,
+      'border border-gray-200 dark:border-gray-800': hasBox,
+      'bg-gray-100 dark:bg-gray-900 shadow-inner': hasBox && background === 'gray',
+      'bg-white dark:bg-gray-900 shadow-sm': hasBox && background === 'white',
+      'cursor-pointer hover:border-gray-400 dark:hover:border-gray-600': clickable && (!hasBox || background === 'gray'),
+      'cursor-pointer hover:border-gray-300 focus-visible:border-gray-400 dark:hover:border-gray-700 dark:focus-visible:border-gray-600': clickable && hasBox && background === 'white',
       'rounded': ['xs'].includes(size) && hasBox,
       'rounded-md': ['sm', 'base'].includes(size) && hasBox,
       'rounded-lg': ['lg', 'xl'].includes(size) && hasBox,

package/app/components/bases/BaseIcon.vue

@@ -78,6 +78,10 @@ const finalColor = computed(() => {
   return statusColor.value || props.color
 })
 
+const shouldSizeIcon = computed(() => {
+  return !!props.text || props.size !== 'base'
+})
+
 function onClick(event: MouseEvent) {
   if (props.confirmation) {
     if (confirming.value) {
@@ -122,13 +126,23 @@ function onKeyDown(event: KeyboardEvent) {
       v-if="finalIcon && !loading"
       class="flex items-center justify-center"
       :class="{
+        'text-2xl': shouldSizeIcon && size === '2xl',
+        'text-2xs': shouldSizeIcon && size === '2xs',
+        'text-3xl': shouldSizeIcon && size === '3xl',
+        'text-3xs': shouldSizeIcon && size === '3xs',
+        'text-4xl': shouldSizeIcon && size === '4xl',
+        'text-base': shouldSizeIcon && size === 'base',
+        'text-lg': shouldSizeIcon && size === 'lg',
+        'text-sm': shouldSizeIcon && size === 'sm',
+        'text-xl': shouldSizeIcon && size === 'xl',
+        'text-xs': shouldSizeIcon && size === 'xs',
+        'text-gray-100 dark:text-gray-900': finalColor === 'white',
+        'text-gray-600 dark:text-gray-400': finalColor === 'gray',
         'text-gray-900 dark:text-gray-100': finalColor === 'black',
         'text-green-600 dark:text-green-400': finalColor === 'green',
-        'text-gray-600 dark:text-gray-400': finalColor === 'gray',
         'text-indigo-600 dark:text-indigo-400': finalColor === 'indigo',
         'text-orange-600 dark:text-orange-400': finalColor === 'orange',
         'text-red-600 dark:text-red-400': finalColor === 'red',
-        'text-gray-100 dark:text-gray-900': finalColor === 'white',
       }"
       :to="to"
     >

package/app/components/bases/BaseToast.vue

@@ -37,11 +37,19 @@ function onClose(event: KeyboardEvent | MouseEvent) {
     @keydown.enter="onClose"
     @keydown.space.prevent="onClose"
   >
-    <BaseIcon
-      class="pointer-events-none text-lg flex-initial"
-      :status="status"
-      :text="text"
-    />
+    <div class="pointer-events-none flex items-center flex-initial">
+      <BaseIcon
+        size="lg"
+        :status="status"
+      />
+
+      <BaseText
+        class="ml-2"
+        no-wrap
+        size="base"
+        :text="text"
+      />
+    </div>
 
     <button
       v-if="action"
@@ -73,7 +81,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
       <div class="ml-2 mr-1.5 h-5 border-l border-gray-200 flex-initial dark:border-gray-700" />
 
       <BaseIcon
-        class="text-lg text-gray-400 transition-colors flex-initial dark:text-gray-500"
+        class="text-gray-400 transition-colors flex-initial dark:text-gray-500"
         :class="{
           'group-hover:text-red-600 dark:group-hover:text-red-400': status === 'error',
           'group-hover:text-indigo-600 dark:group-hover:text-indigo-400': status === 'info',
@@ -81,6 +89,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
           'group-hover:text-orange-600 dark:group-hover:text-orange-400': status === 'warning',
         }"
         :icon="getLayerIcon('close')"
+        size="lg"
       />
     </template>
   </div>

package/app/components/fields/FieldDays.vue

@@ -67,10 +67,12 @@ function onUpdateDays(event: MouseEvent, day: number) {
     <BaseText
       v-for="day in daysToDisplay"
       :key="day.value"
-      class="mr-2 h-7 w-7 flex cursor-pointer items-center justify-center border rounded-full shadow-inner last:mr-0"
+      class="mr-2 h-7 w-7 flex items-center justify-center border rounded-full shadow-inner transition-colors last:mr-0"
       :class="{
         'border-indigo-700 dark:border-indigo-300 bg-gray-100 dark:bg-gray-900 text-indigo-700 dark:text-indigo-300': modelValue.includes(day.value),
         'border-red-700 dark:border-red-300 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300': !modelValue.includes(day.value),
+        'cursor-pointer hover:border-indigo-800 hover:text-indigo-800 dark:hover:border-indigo-200 dark:hover:text-indigo-200': modelValue.includes(day.value) && !disabled,
+        'cursor-pointer hover:border-red-800 hover:text-red-800 dark:hover:border-red-200 dark:hover:text-red-200': !modelValue.includes(day.value) && !disabled,
       }"
       size="xs"
       :text="day.label.charAt(0)"

package/app/components/fields/FieldInput.vue

@@ -24,6 +24,7 @@ const props = withDefaults(defineProps<Omit<FieldInput, 'modelValue'>>(), {
   slugOnly: false,
   trim: false,
   type: 'text',
+  uppercase: true,
   validation: undefined,
 })
 
@@ -178,8 +179,9 @@ defineExpose({ focus })
           :id="id"
           ref="input"
           :autocomplete="autocomplete ? 'on' : 'off'"
-          class="h-full w-full appearance-none items-center rounded-lg font-medium tracking-tight uppercase outline-none placeholder-gray-600 dark:placeholder-gray-400"
+          class="h-full w-full appearance-none items-center rounded-lg font-medium tracking-tight outline-none placeholder-gray-600 dark:placeholder-gray-400"
           :class="{
+            'uppercase': uppercase,
             '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,

package/app/components/fields/FieldTextarea.vue

@@ -18,6 +18,7 @@ const props = withDefaults(defineProps<Omit<FieldTextarea, 'modelValue'>>(), {
   resize: false,
   rows: 3,
   size: 'base',
+  uppercase: true,
   validation: undefined,
 })
 
@@ -67,8 +68,9 @@ 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 outline-none dark:text-gray-100 placeholder-gray-600 dark:placeholder-gray-400"
       :class="{
+        'uppercase': uppercase,
         'field-disabled': disabled,
         'focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100': !disabled,
         'p-2.5': padding,

package/app/components/layout/LayoutBottomSheet.vue

@@ -242,7 +242,7 @@ watch(visible, (isVisible) => {
 
           <div
             ref="contentRef"
-            class="min-h-0 flex-1 overflow-y-auto px-6 md:px-8"
+            class="scroll-y-stable min-h-0 flex-1 px-6 pt-2 md:px-8"
             :class="{
               'pb-4': $slots.footer,
               'pb-6': !($slots.footer),

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 app-text shadow-lg outline-none dark:bg-gray-900 dark:text-gray-100"
+            class="scroll-y-stable pointer-events-auto max-h-[85dvh] max-w-md w-full 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

@@ -1,4 +1,18 @@
 // Components
+export interface BaseAction {
+  active?: boolean
+  color?: BaseColor
+  confirmation?: boolean
+  disabled?: boolean
+  icon?: string
+  loading?: boolean
+  size?: BaseSize
+  text?: BaseTextText
+  variant?: BaseActionVariant
+}
+
+export type BaseActionVariant = 'filled' | 'outline'
+
 export interface BaseAlert {
   closingId?: string
   isClosable?: boolean
@@ -151,6 +165,7 @@ export type BaseDividerNavigateDirection = 'next' | 'previous'
 export type BaseDividerSize = 'base' | 'sm'
 
 export interface BaseEmoji {
+  background?: BaseBackground
   clickable?: boolean
   emoji?: string
   hasBox?: boolean

package/app/types/fields.d.ts

@@ -71,6 +71,7 @@ export interface FieldInput {
   slugOnly?: boolean
   trim?: boolean
   type?: FieldInputType
+  uppercase?: boolean
   validation?: VuelidateValidation
 }
 
@@ -204,6 +205,7 @@ export interface FieldTextarea {
   resize?: boolean
   rows?: number
   size?: FieldSize
+  uppercase?: boolean
   validation?: VuelidateValidation
 }
 

package/app/types/global.d.ts

@@ -9,6 +9,8 @@ declare global {
   type AuthSocialConnectSuccess = import('./auth').AuthSocialConnectSuccess
 
   // Bases
+  type BaseAction = import('./bases').BaseAction
+  type BaseActionVariant = import('./bases').BaseActionVariant
   type BaseAlert = import('./bases').BaseAlert
   type BaseAlignment = import('./bases').BaseAlignment
   type BaseAvatar = import('./bases').BaseAvatar

package/package.json

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

package/uno.config.ts

@@ -27,6 +27,7 @@ export const rules: [string, Record<string, string>][] = [
 export const shortcuts: Record<string, string> = {
   'app-text': 'font-bold leading-relaxed tracking-tight uppercase',
   'field-disabled': 'opacity-50 cursor-not-allowed',
+  'scroll-y-stable': 'overflow-y-auto [scrollbar-gutter:stable]',
 }
 
 export const theme = {