@saasmakers/ui 0.1.40 → 0.1.42

package/app/components/bases/BaseButton.vue

@@ -15,6 +15,7 @@ const props = withDefaults(defineProps<BaseButton>(), {
   light: false,
   loading: false,
   reverse: false,
+  rounded: 'md',
   size: 'base',
   text: '',
   to: undefined,
@@ -62,6 +63,13 @@ function onClick(event: MouseEvent) {
       'bg-transparent shadow-none': light,
       'shadow-sm': !light,
 
+      'rounded-none': rounded === 'none' && !circular,
+      'rounded-sm': rounded === 'sm' && !circular,
+      'rounded': rounded === 'base' && !circular,
+      'rounded-md': rounded === 'md' && !circular,
+      'rounded-lg': rounded === 'lg' && !circular,
+      'rounded-full': rounded === 'full' || circular,
+
       'h-6 w-6': size === '2xs' && circular,
       'h-8 w-8': size === 'xs' && circular && !confirming,
       'h-10 w-10': size === 'sm' && circular && !confirming,

package/app/components/bases/BaseHeading.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { BaseHeading } from '../../types/bases'
+
+withDefaults(defineProps<BaseHeading>(), {
+  alignment: 'left',
+  size: 'base',
+  tag: 'h1',
+})
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="select-text tracking-tight normal-case"
+    :class="{
+      'justify-start': alignment === 'left',
+      'justify-center text-center': alignment === 'center',
+      'justify-end': alignment === 'right',
+
+      'font-bold': ['xs', 'sm'].includes(size),
+      'font-extrabold': ['base', 'lg', 'xl'].includes(size),
+
+      'text-xl sm:text-2xl': size === 'sm',
+      'text-2xl sm:text-3xl': size === 'base',
+      'text-2xl sm:text-4xl': size === 'lg',
+    }"
+  >
+    <slot />
+  </component>
+</template>

package/app/components/bases/BaseMessage.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import type { BaseMessage } from '../../types/bases'
+
+withDefaults(defineProps<BaseMessage>(), {
+  bordered: false,
+  description: '',
+  legend: '',
+  title: '',
+})
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-center bg-gray-100 text-center text-gray-900 dark:bg-gray-900 dark:text-gray-100"
+    :class="{ 'rounded-lg border border-gray-200 dark:border-gray-800 p-6 sm:p-10': bordered }"
+  >
+    <div
+      v-if="$slots.animation"
+      class="mb-6 w-full"
+    >
+      <slot name="animation" />
+    </div>
+
+    <div>
+      <BaseHeading
+        v-if="title"
+        alignment="center"
+        size="sm"
+        tag="h1"
+      >
+        <span v-html="title" />
+      </BaseHeading>
+
+      <BaseParagraph
+        v-if="description"
+        alignment="center"
+        class="mt-2"
+      >
+        <span v-html="description" />
+      </BaseParagraph>
+
+      <div
+        v-if="$slots.default"
+        class="mt-6 flex flex-col items-center justify-center sm:flex-row sm:items-center"
+      >
+        <slot />
+      </div>
+
+      <BaseText
+        v-if="legend"
+        class="mt-6 text-gray-600 dark:text-gray-400"
+        size="sm"
+        :text="legend"
+      />
+    </div>
+  </div>
+</template>

package/app/components/bases/BaseMetric.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import type { BaseMetric } from '../../types/bases'
+import { getIcon } from '../../composables/useIcons'
+
+const props = withDefaults(defineProps<BaseMetric>(), {
+  alignment: 'left',
+  performance: 'equal',
+  performanceTooltip: '',
+  size: 'base',
+  title: '',
+  value: undefined,
+})
+
+const performanceIcon = computed<string | undefined>(() => {
+  switch (props.performance) {
+    case 'down':
+      return getIcon('arrowDown')
+
+    case 'equal':
+      return getIcon('arrowRight')
+
+    case 'up':
+      return getIcon('arrowUp')
+
+    default:
+      return undefined
+  }
+})
+</script>
+
+<template>
+  <div
+    class="flex flex-col leading-normal"
+    :class="{
+      'items-start': alignment === 'left',
+      'items-center': alignment === 'center',
+      'items-right': alignment === 'right',
+    }"
+  >
+    <BaseText
+      bold
+      class="mb-1"
+      :size="size"
+      :text="`${value}`"
+    />
+
+    <span class="relative flex items-center leading-4">
+      <BaseIcon
+        v-if="performanceTooltip"
+        v-tooltip="performanceTooltip"
+        class="mr-1"
+        :icon="getIcon('infoCircle')"
+      />
+
+      <BaseText
+        class="mr-0.5 text-gray-600 dark:text-gray-400"
+        size="2xs"
+        :text="title"
+      />
+
+      <BaseIcon
+        v-if="performanceIcon"
+        class="absolute right-0 translate-x-4 transform"
+        :class="{
+          '-mt-0.5': performance === 'down',
+          'mt-0.25': performance === 'up',
+        }"
+        :color="performance === 'down' ? 'red' : performance === 'equal' ? 'gray' : 'indigo'"
+        :icon="performanceIcon"
+      />
+    </span>
+  </div>
+</template>

package/app/components/bases/BaseParagraph.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { BaseParagraph } from '../../types/bases'
+
+withDefaults(defineProps<BaseParagraph>(), {
+  alignment: 'left',
+  size: 'base',
+})
+</script>
+
+<template>
+  <p
+    class="select-text font-semibold leading-relaxed tracking-tight normal-case"
+    :class="{
+      'text-center': alignment === 'center',
+      'text-left': alignment === 'left',
+      'text-right': alignment === 'right',
+
+      'text-sm sm:text-base': size === 'sm',
+      'text-base sm:text-lg': size === 'base',
+      'text-lg sm:text-xl': size === 'lg',
+    }"
+  >
+    <slot />
+  </p>
+</template>

package/app/composables/useIcons.ts

@@ -9,6 +9,9 @@
 // -> ./assets/icons
 
 const icons = {
+  arrowDown: 'solar:alt-arrow-down-bold',
+  arrowRight: 'solar:alt-arrow-right-bold',
+  arrowUp: 'solar:alt-arrow-up-bold',
   checkCircle: 'hugeicons:checkmark-circle-02',
   close: 'hugeicons:cancel-01',
   closeCircle: 'hugeicons:cancel-circle',

package/app/types/bases.d.ts

@@ -50,12 +50,15 @@ export interface BaseButton {
   light?: boolean
   loading?: boolean
   reverse?: boolean
+  rounded?: BaseButtonRounded
   size?: BaseButtonSize
   text?: BaseTextText
   to?: RouteLocationNamedI18n
   type?: BaseButtonType
 }
 
+export type BaseButtonRounded = 'base' | 'full' | 'lg' | 'md' | 'none' | 'sm' | 'xl'
+
 export type BaseButtonSize = '2xs' | 'base' | 'lg' | 'sm' | 'xl' | 'xs'
 
 export type BaseButtonType = 'button' | 'reset' | 'submit'
@@ -71,6 +74,18 @@ export type BaseDividerBorderStyle = 'dashed' | 'dotted' | 'solid'
 
 export type BaseDividerSize = 'base' | 'sm'
 
+export interface BaseHeading {
+  alignment?: BaseHeadingAlignment
+  size?: BaseHeadingSize
+  tag?: BaseHeadingTag
+}
+
+export type BaseHeadingAlignment = 'center' | 'left' | 'right'
+
+export type BaseHeadingSize = 'base' | 'lg' | 'sm' | 'xl' | 'xs'
+
+export type BaseHeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
 export interface BaseIcon {
   bold?: boolean
   clickable?: boolean
@@ -88,6 +103,28 @@ export interface BaseIcon {
   uppercase?: boolean
 }
 
+interface BaseMessage {
+  bordered?: boolean
+  description?: string
+  legend?: string
+  title: string
+}
+
+export interface BaseMetric {
+  alignment?: BaseMetricAlignment
+  performance?: BaseMetricPerformance
+  performanceTooltip?: string
+  size?: BaseMetricSize
+  title?: BaseTextText
+  value?: number | string
+}
+
+export type BaseMetricAlignment = 'center' | 'left' | 'right'
+
+export type BaseMetricPerformance = 'down' | 'equal' | 'up'
+
+export type BaseMetricSize = 'base' | 'sm'
+
 export interface BaseOverlay {
   active?: boolean
   clickable?: boolean
@@ -101,6 +138,15 @@ export type BaseOverlayOpacity = 0 | 25 | 50 | 75 | 95 | 100
 
 export type BaseOverlayPosition = 'absolute' | 'fixed'
 
+export interface BaseParagraph {
+  alignment?: BaseParagraphAlignment
+  size?: BaseParagraphSize
+}
+
+export type BaseParagraphAlignment = 'center' | 'left' | 'right'
+
+export type BaseParagraphSize = 'base' | 'lg' | 'sm'
+
 export interface BaseSpinner {
   clickable?: boolean
   color?: BaseColor

package/app/types/global.d.ts

@@ -9,6 +9,7 @@ declare global {
   type BaseBordered = Bases.BaseBordered
   type BaseBorderedColor = Bases.BaseBorderedColor
   type BaseButton = Bases.BaseButton
+  type BaseButtonRounded = Bases.BaseButtonRounded
   type BaseButtonSize = Bases.BaseButtonSize
   type BaseButtonType = Bases.BaseButtonType
   type BaseColor = Bases.BaseColor
@@ -16,9 +17,13 @@ declare global {
   type BaseDividerBorderStyle = Bases.BaseDividerBorderStyle
   type BaseDividerSize = Bases.BaseDividerSize
   type BaseIcon = Bases.BaseIcon
-  type BaseOverlay = Bases.BaseOverlay
-  type BaseOverlayOpacity = Bases.BaseOverlayOpacity
-  type BaseOverlayPosition = Bases.BaseOverlayPosition
+  type BaseHeading = Bases.BaseHeading
+  type BaseHeadingAlignment = Bases.BaseHeadingAlignment
+  type BaseHeadingSize = Bases.BaseHeadingSize
+  type BaseHeadingTag = Bases.BaseHeadingTag
+  type BaseParagraph = Bases.BaseParagraph
+  type BaseParagraphAlignment = Bases.BaseParagraphAlignment
+  type BaseParagraphSize = Bases.BaseParagraphSize
   type BaseSize = Bases.BaseSize
   type BaseSpinner = Bases.BaseSpinner
   type BaseStatus = Bases.BaseStatus

package/package.json

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