@saasmakers/ui 0.1.57 → 0.1.59

package/app/app.config.ts

@@ -0,0 +1 @@
+export default defineAppConfig({ urls: { storage: 'https://resilienceclub.s3.fr-par.scw.cloud' } })

package/app/components/bases/BaseChart.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { BaseChart } from '@/types/bases'
+import type { BaseChart } from '../../types/bases'
 import { BarChart, LineChart, PieChart } from 'chartist'
 
 const props = withDefaults(defineProps<BaseChart>(), {

package/app/components/bases/BaseEmoji.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import type { BaseEmoji } from '../../types/bases'
+
+const props = withDefaults(defineProps<BaseEmoji>(), {
+  clickable: true,
+  emoji: undefined,
+  hasBox: false,
+  size: 'base',
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent, emoji?: string]
+}>()
+
+const { urls } = useAppConfig()
+
+function onClick(event: MouseEvent) {
+  emit('click', event, props.emoji)
+}
+</script>
+
+<template>
+  <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,
+
+      'rounded': ['xs'].includes(size) && hasBox,
+      'rounded-md': ['sm', 'base'].includes(size) && hasBox,
+      'rounded-lg': ['lg', 'xl'].includes(size) && hasBox,
+
+      'h-2 w-2': size === '3xs' && hasBox,
+      'h-4 w-4': size === '2xs' && hasBox,
+      'h-5 w-5': size === 'xs' && hasBox,
+      'h-6 w-6': size === 'sm' && hasBox,
+      'h-8.5 w-8.5': size === 'base' && hasBox,
+      'h-10 w-10': size === 'lg' && hasBox,
+      'h-12 w-12': size === 'xl' && hasBox,
+      'h-14 w-14': size === '2xl' && hasBox,
+      'h-16 w-16': size === '3xl' && hasBox,
+      'h-18 w-18': size === '4xl' && hasBox,
+    }"
+    @click="onClick"
+  >
+    <img
+      v-if="emoji"
+      class="flex"
+      :class="{
+        'h-2.5 w-2.5': size === '3xs',
+        'h-3 w-3': size === '2xs',
+        'h-3.5 w-3.5': size === 'xs',
+        'h-4 w-4': size === 'sm',
+        'h-5 w-5': size === 'base',
+        'h-5.5 w-5.5': size === 'lg',
+        'h-6 w-6': size === 'xl',
+        'h-8 w-8': size === '2xl',
+        'h-10 w-10': size === '3xl',
+        'h-12 w-12': size === '4xl',
+      }"
+      loading="lazy"
+      :src="`${urls.storage}/images/emojis/${emoji}.svg`"
+      @click.stop="onClick"
+    >
+  </span>
+</template>

package/app/components/bases/BasePower.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import type { BasePower } from '../../types/bases'
+// import lottie from 'lottie-web'
+
+const props = withDefaults(defineProps<BasePower>(), {
+  animated: false,
+  power: 'welcome',
+  size: 'base',
+})
+
+const animationLoaded = ref(false)
+const animationPlaceholder = ref<HTMLElement>()
+
+onMounted(() => {
+  if (props.animated && ['radar'].includes(props.power) && animationPlaceholder.value) {
+    // lottie.loadAnimation({
+    //   autoplay: true,
+    //   container: animationPlaceholder.value,
+    //   loop: true,
+    //   path: `/animations/bases/BasePower/power-${props.power}.json`,
+    //   renderer: 'svg',
+    // })
+
+    // setTimeout(() => (animationLoaded.value = true), 1 * 1000)
+  }
+})
+</script>
+
+<template>
+  <div
+    class="pointer-events-none select-none"
+    :class="{
+      'h-12 sm:h-16': size === 'xs',
+      'h-16 sm:h-20': size === 'sm',
+      'h-20 sm:h-24': size === 'base',
+      'h-24 sm:h-32': size === 'lg',
+    }"
+  >
+    <img
+      v-show="!animationLoaded"
+      :alt="power"
+      class="h-full w-full"
+      loading="lazy"
+      :src="`/images/bases/BasePower/power-${power}.svg`"
+    >
+
+    <div
+      v-show="animationLoaded"
+      ref="animationPlaceholder"
+      class="h-full w-full"
+    />
+  </div>
+</template>

package/app/types/bases.d.ts

@@ -111,6 +111,13 @@ export type BaseDividerBorderStyle = 'dashed' | 'dotted' | 'solid'
 
 export type BaseDividerSize = 'base' | 'sm'
 
+export interface BaseEmoji {
+  clickable?: boolean
+  emoji?: string
+  hasBox?: boolean
+  size?: BaseSize
+}
+
 export interface BaseHeading {
   alignment?: BaseHeadingAlignment
   size?: BaseHeadingSize
@@ -184,6 +191,49 @@ export type BaseParagraphAlignment = 'center' | 'left' | 'right'
 
 export type BaseParagraphSize = 'base' | 'lg' | 'sm'
 
+export interface BasePower {
+  animated?: boolean
+  power?: BasePowerPower
+  size?: BasePowerSize
+}
+
+export type BasePowerPower
+  = | '401'
+    | '404'
+    | '500'
+    | 'angry'
+    | 'bag'
+    | 'bank'
+    | 'book'
+    | 'browser'
+    | 'chair'
+    | 'christmas'
+    | 'city'
+    | 'city-bis'
+    | 'coffee'
+    | 'computer-book'
+    | 'computer-coffee'
+    | 'dead'
+    | 'easter'
+    | 'hourglass'
+    | 'invite'
+    | 'ko'
+    | 'love'
+    | 'magic'
+    | 'popcorn'
+    | 'radar'
+    | 'rocket'
+    | 'smiling'
+    | 'social-networks'
+    | 'starwars'
+    | 'teach'
+    | 'typewriter'
+    | 'website'
+    | 'welcome'
+    | 'writer'
+
+export type BasePowerSize = 'base' | 'lg' | 'sm' | 'xs'
+
 export interface BaseQuote {
   background?: BaseQuoteBackground
   character?: BaseCharacterCharacter

package/app/types/global.d.ts

@@ -27,6 +27,7 @@ declare global {
   type BaseDivider = Bases.BaseDivider
   type BaseDividerBorderStyle = Bases.BaseDividerBorderStyle
   type BaseDividerSize = Bases.BaseDividerSize
+  type BaseEmoji = Bases.BaseEmoji
   type BaseHeading = Bases.BaseHeading
   type BaseHeadingAlignment = Bases.BaseHeadingAlignment
   type BaseHeadingSize = Bases.BaseHeadingSize

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.57",
+  "version": "0.1.59",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -43,6 +43,7 @@
     "@unocss/reset": "66.5.10",
     "chartist": "1.5.0",
     "floating-vue": "5.2.2",
+    "lottie-web": "5.13.0",
     "motion-v": "1.7.4",
     "numbro": "2.5.0",
     "snarkdown": "2.0.0",