@saasmakers/ui 0.1.38 → 0.1.40

package/app/components/bases/BaseBordered.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import type { BaseBordered } from '../../types/bases'
+
+withDefaults(defineProps<BaseBordered>(), {
+  background: 'white',
+  borderColor: 'gray',
+  hasBorder: true,
+  shadow: false,
+  title: '',
+})
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-center p-4 sm:p-6"
+    :class="{
+      'rounded-xl border pt-0 sm:pt-0': hasBorder,
+      'shadow-sm': shadow,
+
+      'bg-gray-100 dark:bg-gray-900': background === 'gray',
+      'bg-white dark:bg-gray-900': background === 'white',
+
+      'border-black dark:border-white': borderColor === 'black',
+      'border-gray-200 dark:border-gray-800': borderColor === 'gray',
+    }"
+  >
+    <BaseText
+      v-if="title"
+      class="mb-4 inline-block px-3 text-center text-gray-900 -mt-2 sm:px-4 dark:text-gray-100"
+      :class="{
+        'bg-gray-100 dark:bg-gray-900': background === 'gray',
+        'bg-white dark:bg-gray-900': background === 'white',
+      }"
+      size="xs"
+      :text="title"
+      uppercase
+    />
+
+    <div
+      v-if="$slots.default"
+      class="w-full"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/app/components/bases/BaseButton.vue

@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import type { BaseButton } from '../../types/bases'
+import { NuxtLinkLocale } from '#components'
+
+const props = withDefaults(defineProps<BaseButton>(), {
+  background: true,
+  circular: false,
+  color: 'black',
+  confirmation: false,
+  disabled: false,
+  fullWidth: false,
+  icon: undefined,
+  iconColor: undefined,
+  id: undefined,
+  light: false,
+  loading: false,
+  reverse: false,
+  size: 'base',
+  text: '',
+  to: undefined,
+  type: 'button',
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent, id: number | string | undefined]
+  confirm: [event: MouseEvent, id: number | string | undefined]
+}>()
+
+const confirming = ref(false)
+
+const { t } = useI18n()
+
+function onClick(event: MouseEvent) {
+  if (!props.loading) {
+    if (props.confirmation) {
+      if (confirming.value) {
+        emit('confirm', event, props.id)
+      }
+      else {
+        setTimeout(() => (confirming.value = false), 3 * 1000)
+      }
+
+      confirming.value = !confirming.value
+    }
+
+    emit('click', event, props.id)
+  }
+}
+</script>
+
+<template>
+  <component
+    :is="to ? NuxtLinkLocale : 'button'"
+    class="relative inline-block select-none appearance-none border rounded-md focus:outline-none"
+    :class="{
+      'inline-block': !circular,
+      'flex items-center justify-center': circular,
+      'cursor-not-allowed opacity-50': disabled,
+      'cursor-wait': loading,
+      'cursor-pointer': !loading,
+      'w-full': fullWidth,
+      'bg-transparent shadow-none': light,
+      'shadow-sm': !light,
+
+      '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,
+
+      '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,
+      'border-gray-700 dark:border-gray-300 bg-gray-700 dark:bg-gray-300 text-white dark:text-black': color === 'gray' && !light,
+      'hover:bg-gray-800 dark:hover:bg-gray-200': color === 'gray' && !light && !disabled && !loading,
+      'border-gray-700 dark:border-gray-300 text-gray-700 dark:text-gray-300': color === 'gray' && light,
+      'border-green-700 dark:border-green-300 bg-green-700 dark:bg-green-300 text-white dark:text-black': color === 'green' && !light,
+      'hover:bg-green-800 dark:hover:bg-green-200': color === 'green' && !light && !disabled && !loading,
+      'border-green-700 dark:border-green-300 text-green-700 dark:text-green-300': color === 'green' && light,
+      'border-indigo-700 dark:border-indigo-300 bg-indigo-700 dark:bg-indigo-300 text-white dark:text-black': color === 'indigo' && !light,
+      'hover:bg-indigo-800 dark:hover:bg-indigo-200': color === 'indigo' && !light && !disabled && !loading,
+      'border-indigo-700 dark:border-indigo-300 text-indigo-700 dark:text-indigo-300': color === 'indigo' && light,
+      'border-orange-700 dark:border-orange-300 bg-orange-700 dark:bg-orange-300 text-white dark:text-black': color === 'orange' && !light,
+      'hover:bg-orange-800 dark:hover:bg-orange-200': color === 'orange' && !light && !disabled && !loading,
+      'border-orange-700 dark:border-orange-300 text-orange-700 dark:text-orange-300': color === 'orange' && light,
+      'border-red-700 dark:border-red-300 bg-red-700 dark:bg-red-300 text-white dark:text-black': color === 'red' && !light,
+      'hover:bg-red-800 dark:hover:bg-red-200': color === 'red' && !light && !disabled && !loading,
+      'border-red-700 dark:border-red-300 text-red-700 dark:text-red-300': color === 'red' && light,
+      '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: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),
+    }"
+    :disabled="disabled"
+    :to="to"
+    :type="typeof to === 'object' && to ? null : type"
+    @click="onClick"
+  >
+    <span
+      class="h-full flex items-center justify-center"
+      :class="{ 'opacity-0': loading }"
+    >
+      <slot />
+
+      <BaseIcon
+        class="flex-initial"
+        :color="iconColor"
+        :icon="confirming ? undefined : icon"
+        :light="light"
+        :reverse="reverse"
+        :size="size"
+        :text="confirming ? t('globals.confirm') : text"
+      />
+    </span>
+
+    <BaseSpinner
+      v-if="loading"
+      class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
+      :color="!background ? 'black' : light ? color : color === 'white' ? 'indigo' : 'white'"
+      :size="size"
+    />
+  </component>
+</template>

package/app/components/bases/BaseOverlay.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import type { BaseOverlay } from '../../types/bases'
+import { Motion } from 'motion-v'
+import { getIcon } from '../../composables/useIcons'
+import useMotion from '../../composables/useMotion'
+
+withDefaults(defineProps<BaseOverlay>(), {
+  active: true,
+  clickable: true,
+  fixed: true,
+  hasClose: true,
+  opacity: 75,
+  position: 'absolute',
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+  close: [event: MouseEvent]
+}>()
+
+const { fadeIn } = useMotion()
+
+function onClick(event: MouseEvent) {
+  emit('click', event)
+}
+
+function onClose(event: MouseEvent) {
+  emit('close', event)
+}
+</script>
+
+<template>
+  <div
+    v-hotkey="{ esc: onClose }"
+    :class="{
+      'fixed inset-0': fixed,
+      'cursor-pointer': clickable || hasClose,
+    }"
+    @click="onClick"
+  >
+    <BaseIcon
+      v-if="hasClose"
+      class="absolute right-4 top-4 z-50 text-gray-200 dark:text-gray-800"
+      :icon="getIcon('close')"
+      @click="onClose"
+    />
+
+    <div
+      v-if="$slots.default"
+      class="relative z-50 h-full w-full"
+    >
+      <slot />
+    </div>
+
+    <Motion
+      :animate="fadeIn.animate"
+      as="span"
+      class="absolute inset-0 z-40"
+      :initial="fadeIn.initial"
+    >
+      <div
+        class="inset-0 bg-gray-900 dark:bg-gray-100"
+        :class="{
+          'h-0 w-0': !active,
+
+          'opacity-0': opacity === 0,
+          'opacity-25': opacity === 25,
+          'opacity-50': opacity === 50,
+          'opacity-75': opacity === 75,
+          'opacity-95': opacity === 95,
+          'opacity-100': opacity === 100,
+
+          'absolute': position === 'absolute',
+          'fixed': position === 'fixed',
+        }"
+      />
+    </Motion>
+  </div>
+</template>

package/app/components/bases/BaseText.vue

@@ -3,7 +3,7 @@ import type { BaseText } from '../../types/bases'
 import { NuxtLinkLocale } from '#components'
 
 const props = withDefaults(defineProps<BaseText>(), {
-  background: '',
+  background: undefined,
   bold: false,
   hasMargin: false,
   maxCharacters: 0,

package/app/composables/useIcons.ts

@@ -10,6 +10,7 @@
 
 const icons = {
   checkCircle: 'hugeicons:checkmark-circle-02',
+  close: 'hugeicons:cancel-01',
   closeCircle: 'hugeicons:cancel-circle',
   default: 'hugeicons:help-circle',
   exclamationCircle: 'hugeicons:alert-circle',

package/app/composables/useMotion.ts

@@ -0,0 +1,39 @@
+export default function useMotion() {
+  const fadeIn = {
+    animate: {
+      opacity: 1,
+      transition: { duration: 0.25 },
+    },
+    initial: { opacity: 0 },
+  }
+
+  const fadeInLeft = {
+    animate: {
+      opacity: 1,
+      transition: { duration: 0.25 },
+      x: 0,
+    },
+    initial: {
+      opacity: 0,
+      x: -25,
+    },
+  }
+
+  const fadeInUp = {
+    animate: {
+      opacity: 1,
+      transition: { duration: 0.25 },
+      y: 0,
+    },
+    initial: {
+      opacity: 0,
+      y: 25,
+    },
+  }
+
+  return {
+    fadeIn,
+    fadeInLeft,
+    fadeInUp,
+  }
+}

package/app/types/bases.d.ts

@@ -1,3 +1,5 @@
+export type BaseBackground = 'gray' | 'white'
+
 export type BaseColor
   = | 'black'
     | 'gray'
@@ -25,6 +27,39 @@ export type BaseStatus
     | 'success'
     | 'warning'
 
+export interface BaseBordered {
+  background?: BaseBackground
+  borderColor?: BaseBorderedColor
+  hasBorder?: boolean
+  shadow?: boolean
+  title: string
+}
+
+export type BaseBorderedColor = 'black' | 'gray'
+
+export interface BaseButton {
+  background?: boolean
+  circular?: boolean
+  color?: BaseColor
+  confirmation?: boolean
+  disabled?: boolean
+  fullWidth?: boolean
+  icon?: string
+  iconColor?: BaseColor
+  id?: number | string
+  light?: boolean
+  loading?: boolean
+  reverse?: boolean
+  size?: BaseButtonSize
+  text?: BaseTextText
+  to?: RouteLocationNamedI18n
+  type?: BaseButtonType
+}
+
+export type BaseButtonSize = '2xs' | 'base' | 'lg' | 'sm' | 'xl' | 'xs'
+
+export type BaseButtonType = 'button' | 'reset' | 'submit'
+
 export interface BaseDivider {
   borderStyle?: BaseDividerBorderStyle
   margin?: number
@@ -53,6 +88,19 @@ export interface BaseIcon {
   uppercase?: boolean
 }
 
+export interface BaseOverlay {
+  active?: boolean
+  clickable?: boolean
+  fixed?: boolean
+  hasClose?: boolean
+  opacity?: BaseOverlayOpacity
+  position?: BaseOverlayPosition
+}
+
+export type BaseOverlayOpacity = 0 | 25 | 50 | 75 | 95 | 100
+
+export type BaseOverlayPosition = 'absolute' | 'fixed'
+
 export interface BaseSpinner {
   clickable?: boolean
   color?: BaseColor
@@ -79,6 +127,4 @@ export interface BaseText {
   uppercase?: boolean
 }
 
-export type BaseTextBackground = '' | 'gray' | 'white'
-
 export type BaseTextText = string | { base: string, sm: string }

package/app/types/global.d.ts

@@ -5,16 +5,24 @@ declare global {
   type RouteLocationNamedI18n = import('vue-router').RouteLocationNamedI18n
 
   // Bases
+  type BaseBackground = Bases.BaseBackground
+  type BaseBordered = Bases.BaseBordered
+  type BaseBorderedColor = Bases.BaseBorderedColor
+  type BaseButton = Bases.BaseButton
+  type BaseButtonSize = Bases.BaseButtonSize
+  type BaseButtonType = Bases.BaseButtonType
   type BaseColor = Bases.BaseColor
-  type BaseSize = Bases.BaseSize
-  type BaseStatus = Bases.BaseStatus
   type BaseDivider = Bases.BaseDivider
   type BaseDividerBorderStyle = Bases.BaseDividerBorderStyle
   type BaseDividerSize = Bases.BaseDividerSize
-  type BaseSpinner = Bases.BaseSpinner
   type BaseIcon = Bases.BaseIcon
+  type BaseOverlay = Bases.BaseOverlay
+  type BaseOverlayOpacity = Bases.BaseOverlayOpacity
+  type BaseOverlayPosition = Bases.BaseOverlayPosition
+  type BaseSize = Bases.BaseSize
+  type BaseSpinner = Bases.BaseSpinner
+  type BaseStatus = Bases.BaseStatus
   type BaseText = Bases.BaseText
-  type BaseTextBackground = Bases.BaseTextBackground
   type BaseTextText = Bases.BaseTextText
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",