@saasmakers/ui 0.1.50 → 0.1.51

package/app/components/bases/BaseAvatar.vue

@@ -0,0 +1,177 @@
+<script lang="ts" setup>
+import { NuxtLinkLocale } from '#components'
+import { numbro } from '../../composables/useUtils'
+
+const props = defineProps({
+  bordered: {
+    default: true,
+    type: Boolean,
+  },
+  borderWidth: {
+    default: 3,
+    type: Number,
+  },
+  circular: {
+    default: true,
+    type: Boolean,
+  },
+  editable: {
+    default: false,
+    type: Boolean,
+  },
+  habitsCompleted: {
+    default: undefined,
+    type: Number,
+  },
+  maxSizeMb: {
+    default: undefined,
+    type: Number,
+  },
+  shadow: {
+    default: true,
+    type: Boolean,
+  },
+  src: {
+    default: undefined,
+    type: String,
+  },
+  to: {
+    default: undefined,
+    type: Object as PropType<RouteLocationNamedI18n>,
+  },
+})
+
+const emit = defineEmits<{
+  avatarSelected: [event: Event, file: File]
+  click: [event: MouseEvent]
+}>()
+
+const { createToast } = useToasts()
+
+const hovered = ref(false)
+const error = ref(false)
+const loaded = ref(false)
+const fileInput = ref<HTMLInputElement>()
+
+const { t } = useI18n()
+
+function onAvatarSelected(event: Event) {
+  const file = (event.target as HTMLInputElement).files?.[0]
+
+  if (file) {
+    if (props.maxSizeMb && file.size > props.maxSizeMb * 1024 * 1024) {
+      return createToast('fileSizeTooLarge', 'error', { maxSizeMb: props.maxSizeMb })
+    }
+
+    emit('avatarSelected', event, file)
+  }
+}
+
+function onClick(event: MouseEvent) {
+  emit('click', event)
+
+  if (props.editable) {
+    fileInput.value?.click()
+  }
+}
+
+function onError() {
+  error.value = true
+  loaded.value = true
+}
+
+function onMouseEnter() {
+  hovered.value = true
+}
+
+function onMouseLeave() {
+  hovered.value = false
+}
+
+function onLoad() {
+  loaded.value = true
+}
+</script>
+
+<template>
+  <component
+    :is="to ? NuxtLinkLocale : 'div'"
+    class="relative flex"
+    :to="to"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <div
+      :aria-label="editable ? t('globals.edit') : undefined"
+      class="relative h-full w-full overflow-hidden"
+      :class="{
+        'rounded-full': circular,
+        'shadow': shadow,
+        'cursor-pointer': to || editable,
+      }"
+      :role="editable ? 'button' : undefined"
+      @click="onClick"
+    >
+      <img
+        class="h-full w-full object-cover drag-none"
+        :class="{
+          'rounded-full': circular,
+          'border-white dark:border-white': bordered,
+          'border-2': borderWidth === 2,
+          'border-3': borderWidth === 3,
+          'border-4': borderWidth === 4,
+        }"
+        loading="lazy"
+        :src="!error && src ? src : '/images/bases/BaseAvatar/default.svg'"
+        @error="onError"
+        @load="onLoad"
+      >
+
+      <BaseText
+        v-if="editable && hovered"
+        class="absolute bottom-0 left-0 right-0 w-full bg-gray-900 text-center text-white dark:bg-gray-900 dark:text-white"
+        size="3xs"
+        :text="t('globals.edit')"
+      />
+
+      <input
+        v-if="editable"
+        ref="fileInput"
+        accept="image/*"
+        class="hidden"
+        type="file"
+        @change="onAvatarSelected"
+      >
+    </div>
+
+    <BaseText
+      v-if="habitsCompleted && (!editable || (editable && !hovered))"
+      v-tooltip="t('habitsCompleted')"
+      class="absolute left-1/2 transform select-none rounded bg-indigo-800 text-center text-white opacity-95 shadow -bottom-0.5 -translate-x-1/2 dark:bg-indigo-200 dark:text-black"
+      :class="{
+        'w-6': habitsCompleted < 100,
+        'w-7': habitsCompleted >= 100 && habitsCompleted < 1000,
+        'w-9': habitsCompleted >= 1000 && habitsCompleted < 10000,
+        'w-10': habitsCompleted >= 10000 && habitsCompleted < 100000,
+        'w-11': habitsCompleted >= 100000 && habitsCompleted < 1000000,
+        'w-13': habitsCompleted >= 1000000,
+      }"
+      size="2xs"
+      :text="numbro(habitsCompleted)"
+    />
+  </component>
+</template>
+
+  <i18n lang="json">
+  {
+    "en": {
+      "habitsCompleted": "Habits completed"
+    },
+    "fr": {
+      "habitsCompleted": "Habitudes accomplies"
+    },
+    "ja": {
+      "habitsCompleted": "習慣を完了しました"
+    }
+  }
+  </i18n>

package/app/components/bases/BaseToast.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { BaseToast } from '../../types/bases'
+import { getIcon } from '../../composables/useIcons'
+
+const props = withDefaults(defineProps<BaseToast>(), {
+  hasClose: true,
+  id: '',
+  status: 'info',
+  text: '',
+})
+
+const emit = defineEmits<{
+  close: [event: MouseEvent, toast: BaseToast]
+}>()
+
+function onClose(event: MouseEvent) {
+  if (props.hasClose) {
+    emit('close', event, props)
+  }
+}
+</script>
+
+<template>
+  <div
+    class="group flex select-none items-center rounded-full bg-gray-900 px-3 py-2 text-base text-white font-normal dark:bg-gray-100 dark:text-black"
+    :class="{ 'cursor-pointer': hasClose }"
+    @click="onClose"
+  >
+    <BaseIcon
+      class="flex-initial"
+      :status="status"
+      :text="text"
+    />
+
+    <template v-if="hasClose">
+      <div class="ml-2 mr-1.5 h-5 border-l border-gray-700 flex-initial dark:border-gray-300" />
+
+      <BaseIcon
+        class="text-gray-500 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',
+          'group-hover:text-orange-600 dark:group-hover:text-orange-400': status === 'warning',
+          'group-hover:text-teal-600 dark:group-hover:text-teal-400': status === 'success',
+        }"
+        :icon="getIcon('close')"
+      />
+    </template>
+  </div>
+</template>

package/app/components/layout/LayoutToasts.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+const { fadeInUp } = useMotion()
+const toasts = useToasts()
+
+function onToastClose(_event: MouseEvent, toast: BaseToast) {
+  toasts.closeToast(toast.id)
+}
+</script>
+
+<template>
+  <div class="fixed bottom-0 left-0 right-0 z-10 flex flex-col items-center overflow-hidden safe-bottom">
+    <div class="mb-20 flex flex-col items-center">
+      <Motion
+        v-for="toast in toasts.toasts.value"
+        :key="toast.id"
+        :animate="fadeInUp.animate"
+        class="mb-2 flex-initial last:mb-0"
+        :initial="fadeInUp.initial"
+      >
+        <BaseToast
+          :id="toast.id"
+          :key="toast.id"
+          :status="toast.status"
+          :text="toast.text"
+          @close="onToastClose"
+        />
+      </Motion>
+    </div>
+  </div>
+</template>

package/app/composables/useToasts.ts

@@ -0,0 +1,41 @@
+const toasts = ref<BaseToast[]>([])
+
+export default function useToast() {
+  const nuxtApp = useNuxtApp()
+
+  const clearToasts = () => {
+    if (import.meta.client) {
+      toasts.value = []
+    }
+  }
+
+  const closeToast = (toastId: string) => {
+    if (import.meta.client) {
+      toasts.value = toasts.value.filter((item) => {
+        return item.id !== toastId
+      })
+    }
+  }
+
+  const createToast = (message: string, status: BaseStatus = 'success', i18nParams?: { [key: string]: number | string }) => {
+    if (import.meta.client) {
+      const toast: BaseToast = {
+        id: Math.floor((1 + Math.random()) * 0x10000).toString(16),
+        status: status || 'success',
+        text: message.includes(' ') ? message : nuxtApp.$i18n.t(`toasts.${message}`, i18nParams || {}),
+      }
+
+      toasts.value.push(toast)
+
+      // Remove toast after 5 seconds
+      setTimeout(() => closeToast(toast.id), 5 * 1000)
+    }
+  }
+
+  return {
+    clearToasts,
+    closeToast,
+    createToast,
+    toasts,
+  }
+}

package/app/composables/useUtils.ts

@@ -0,0 +1,12 @@
+import numbroLib from 'numbro'
+
+export function numbro(number: '∞' | number | undefined, format?: string) {
+  if (!number && number !== 0) {
+    return ''
+  }
+  else if (number === '∞' || number % 1 !== 0) {
+    return `${number}`
+  }
+
+  return numbroLib(number).format(format || '0,0')
+}

package/app/types/bases.d.ts

@@ -35,6 +35,16 @@ export interface BaseAlert {
   text?: BaseTextText
 }
 
+interface BaseAvatar {
+  bordered?: boolean
+  borderWidth?: number
+  circular?: boolean
+  habitsCompleted?: number
+  shadow?: boolean
+  src?: string
+  to?: RouteLocationNamedI18n
+}
+
 export interface BaseBordered {
   background?: BaseBackground
   borderColor?: BaseBorderedColor
@@ -182,3 +192,10 @@ export interface BaseText {
 }
 
 export type BaseTextText = string | { base: string, sm: string }
+
+export interface BaseToast {
+  hasClose?: boolean
+  id: string
+  status?: BaseStatus
+  text: BaseTextText
+}

package/app/types/global.d.ts

@@ -6,6 +6,7 @@ declare global {
 
   // Bases
   type BaseAlert = Bases.BaseAlert
+  type BaseAvatar = Bases.BaseAvatar
   type BaseBackground = Bases.BaseBackground
   type BaseBordered = Bases.BaseBordered
   type BaseBorderedColor = Bases.BaseBorderedColor
@@ -38,6 +39,9 @@ declare global {
   type BaseStatus = Bases.BaseStatus
   type BaseText = Bases.BaseText
   type BaseTextText = Bases.BaseTextText
+  type BaseToast = Bases.BaseToast
+  type BaseToasts = Bases.BaseToasts
+  type BaseToastsAlignment = Bases.BaseToastsAlignment
 }
 
 export * from './bases'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.50",
+  "version": "0.1.51",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -18,6 +18,7 @@
   "files": [
     "app",
     "nuxt.config.ts",
+    "public",
     "uno.config.ts"
   ],
   "scripts": {
@@ -42,6 +43,7 @@
     "@unocss/reset": "66.5.10",
     "floating-vue": "5.2.2",
     "motion-v": "1.7.4",
+    "numbro": "2.5.0",
     "unocss": "66.5.4",
     "vue": "3.5.22",
     "vue-router": "4.6.3"

package/public/images/bases/BaseAvatar/default.svg

@@ -0,0 +1,22 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="200" height="200" fill="#F8FAFC"/>
+  <g clip-path="url(#clip0)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M171.236 99.9916C171.236 73.1755 149.464 51.4038 122.648 51.4038H77.4786C50.6624 51.4038 28.891 73.1755 28.891 99.9916C28.891 126.808 50.6624 148.579 77.4786 148.579H122.648C149.464 148.579 171.236 126.808 171.236 99.9916Z" fill="url(#paint0_radial)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M158.977 107.28C158.977 80.0811 132.65 71.9116 100.695 71.9116C64.5672 71.9116 41.159 79.4983 41.159 107.28C41.159 132.536 67.2716 141.093 100.258 141.093C138.413 141.093 158.977 135.644 158.977 107.28Z" fill="url(#paint1_radial)"/>
+    <path d="M75.8 124.527C81.5881 124.527 86.2802 118.069 86.2802 110.103C86.2802 102.137 81.5881 95.6787 75.8 95.6787C70.012 95.6787 65.3198 102.137 65.3198 110.103C65.3198 118.069 70.012 124.527 75.8 124.527Z" fill="#F9F9F9"/>
+    <path d="M126.74 124.747C132.528 124.747 137.22 118.289 137.22 110.323C137.22 102.356 132.528 95.8984 126.74 95.8984C120.952 95.8984 116.26 102.356 116.26 110.323C116.26 118.289 120.952 124.747 126.74 124.747Z" fill="#F9F9F9"/>
+  </g>
+  <defs>
+    <radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(93.6026 101.03) rotate(-0.40466) scale(149.159 170.801)">
+      <stop stop-color="#FCFCFC"/>
+      <stop offset="1" stop-color="#D4D4D4"/>
+    </radialGradient>
+    <radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(101.232 106.114) rotate(-0.246549) scale(90.3212 53.0581)">
+      <stop stop-color="#2E3748"/>
+      <stop offset="1" stop-color="#030812"/>
+    </radialGradient>
+    <clipPath id="clip0">
+      <rect width="150" height="150" fill="white" transform="translate(25 25)"/>
+    </clipPath>
+  </defs>
+</svg>