@saasmakers/ui 1.5.10 → 2.0.1

package/app/components/bases/BaseAlert.vue

@@ -20,7 +20,6 @@ defineSlots<{
 }>()
 
 const { t } = useI18n()
-const { getIcon } = useLayerIcons()
 const isClosed = ref(false)
 
 const buttonColor = computed<BaseColor>(() => {
@@ -89,7 +88,7 @@ async function onClose(event: MouseEvent) {
       <BaseButton
         v-if="isClosable"
         :color="buttonColor"
-        :icon="getIcon('closeCircle')"
+        :icon="getLayerIcon('closeCircle')"
         light
         size="xs"
         :text="t('closeThisMessage')"

package/app/components/bases/BaseCard.vue

@@ -35,8 +35,6 @@ defineSlots<{
   right?: () => VNode[]
 }>()
 
-const { getIcon } = useLayerIcons()
-
 const hasAvatarBox = computed<boolean>(() => {
   return !!(props.avatar || props.emoji || props.icon || props.image)
 })
@@ -199,7 +197,7 @@ function onClick(event: MouseEvent) {
           'text-2xl': size === 'lg',
         }"
         color="green"
-        :icon="getIcon('checkCircle')"
+        :icon="getLayerIcon('checkCircle')"
       />
 
       <BaseIcon
@@ -210,7 +208,7 @@ function onClick(event: MouseEvent) {
           'text-xl': size === 'base',
           'text-2xl': size === 'lg',
         }"
-        :icon="getIcon('chevronRight')"
+        :icon="getLayerIcon('chevronRight')"
       />
 
       <slot name="right" />

package/app/components/bases/BaseDivider.vue

@@ -18,7 +18,6 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const { getIcon } = useLayerIcons()
 
 function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection) {
   if (!props.loading) {
@@ -59,7 +58,7 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
           v-if="navigable && !loading && !hidePrevious"
           class="mr-2 shrink-0 hover:!no-underline"
           clickable
-          :icon="getIcon('chevronLeft')"
+          :icon="getLayerIcon('chevronLeft')"
           size="xs"
           :text="t('previous')"
           @click="onNavigate($event, 'previous')"
@@ -127,7 +126,7 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
           class="ml-2 shrink-0 hover:!no-underline"
           clickable
           reverse
-          :icon="getIcon('chevronRight')"
+          :icon="getLayerIcon('chevronRight')"
           size="xs"
           :text="t('next')"
           @click="onNavigate($event, 'next')"

package/app/components/bases/BaseIcon.vue

@@ -25,7 +25,6 @@ const emit = defineEmits<{
 
 const confirming = ref(false)
 const { t } = useI18n()
-const { getIcon } = useLayerIcons()
 
 const isClickable = computed(() => {
   return props.clickable || props.to || props.confirmation
@@ -34,16 +33,16 @@ const isClickable = computed(() => {
 const statusIcon = computed<string | undefined>(() => {
   switch (props.status) {
     case 'error': {
-      return getIcon('closeCircle')
+      return getLayerIcon('closeCircle')
     }
     case 'info': {
-      return getIcon('infoCircle')
+      return getLayerIcon('infoCircle')
     }
     case 'success': {
-      return getIcon('checkCircle')
+      return getLayerIcon('checkCircle')
     }
     case 'warning': {
-      return getIcon('exclamationCircle')
+      return getLayerIcon('exclamationCircle')
     }
     default: {
       return undefined

package/app/components/bases/BaseMetric.vue

@@ -10,18 +10,16 @@ const props = withDefaults(defineProps<BaseMetric>(), {
   value: undefined,
 })
 
-const { getIcon } = useLayerIcons()
-
 const performanceIcon = computed<string | undefined>(() => {
   switch (props.performance) {
     case 'down': {
-      return getIcon('arrowDown')
+      return getLayerIcon('arrowDown')
     }
     case 'equal': {
-      return getIcon('arrowRight')
+      return getLayerIcon('arrowRight')
     }
     case 'up': {
-      return getIcon('arrowUp')
+      return getLayerIcon('arrowUp')
     }
     default: {
       return undefined
@@ -51,7 +49,7 @@ const performanceIcon = computed<string | undefined>(() => {
         v-if="performanceTooltip"
         v-tooltip="performanceTooltip"
         class="mr-1"
-        :icon="getIcon('infoCircle')"
+        :icon="getLayerIcon('infoCircle')"
       />
 
       <BaseText

package/app/components/bases/BaseOverlay.vue

@@ -2,7 +2,6 @@
 import { onKeyStroke } from '@vueuse/core'
 import { Motion } from 'motion-v'
 import type { BaseOverlay } from '../../types/bases'
-import useMotion from '../../composables/useMotion'
 
 const props = withDefaults(defineProps<BaseOverlay>(), {
   active: true,
@@ -22,9 +21,6 @@ defineSlots<{
   default?: () => VNode[]
 }>()
 
-const { getIcon } = useLayerIcons()
-const { fadeIn } = useMotion()
-
 const isClickable = computed(() => {
   return props.clickable || props.hasClose
 })
@@ -65,7 +61,7 @@ onKeyStroke('Escape', (event) => {
       v-if="hasClose"
       class="pointer-events-auto absolute right-4 top-4 z-50 text-gray-200 dark:text-gray-800"
       clickable
-      :icon="getIcon('close')"
+      :icon="getLayerIcon('close')"
       @click="onClose"
     />
 

package/app/components/bases/BaseQuote.vue

@@ -29,7 +29,6 @@ defineSlots<{
 
 const { locale, t } = useI18n()
 const { translatedContent } = useTranslation(useSlots(), locale)
-const { getIcon } = useLayerIcons()
 const closed = ref(false)
 
 const finalBackground = computed(() => {
@@ -148,7 +147,7 @@ function onClose(event: MouseEvent) {
             'ml-3': size === 'sm',
             'ml-4': size === 'base',
           }"
-          :icon="getIcon('close')"
+          :icon="getLayerIcon('close')"
           @click="onClose"
         />
       </div>

package/app/components/bases/BaseShortcut.vue

@@ -11,8 +11,6 @@ const emit = defineEmits<{
   trigger: [event: KeyboardEvent]
 }>()
 
-const { getIcon } = useLayerIcons()
-
 function isTypingTarget(target: EventTarget | null) {
   const element = target as HTMLElement | null
   const typingTags = ['INPUT', 'SELECT', 'TEXTAREA']
@@ -53,7 +51,7 @@ onKeyStroke(
     <Icon
       v-if="shortcut.toLowerCase() === 'enter'"
       class="size-2"
-      :name="getIcon('enter')"
+      :name="getLayerIcon('enter')"
     />
 
     <template v-else>

package/app/components/bases/BaseTag.vue

@@ -35,7 +35,6 @@ defineSlots<{
   default?: () => VNode[]
 }>()
 
-const { getIcon } = useLayerIcons()
 const hovered = ref(false)
 const form = reactive({ name: '' })
 
@@ -136,7 +135,7 @@ function onRemove(event: MouseEvent) {
         class="js-drag-handle mr-2 cursor-move"
         clickable
         color="gray"
-        :icon="getIcon('drag')"
+        :icon="getLayerIcon('drag')"
       />
 
       <span
@@ -190,7 +189,7 @@ function onRemove(event: MouseEvent) {
       <BaseIcon
         v-if="removable"
         class="ml-1.5 text-red-700 dark:text-red-300 hover:text-black dark:hover:text-white"
-        :icon="getIcon('closeCircle')"
+        :icon="getLayerIcon('closeCircle')"
         @click.prevent.stop="onRemove"
       />
     </component>

package/app/components/bases/BaseTags.vue

@@ -34,7 +34,6 @@ const root = ref<HTMLDivElement>()
 const showingAllTags = ref(false)
 const showingTagCreationField = ref(false)
 const { t } = useI18n()
-const { getIcon } = useLayerIcons()
 
 const sortedTags = computed({
   get() {
@@ -143,7 +142,7 @@ function onUpdateTag(event: FocusEvent | KeyboardEvent, name: string, tagId?: nu
         'm-1': size === 'base',
       }"
       color="indigo"
-      :icon="getIcon('back')"
+      :icon="getLayerIcon('back')"
       :size="size"
       :text="t('cancel')"
       @click="onGoBack"
@@ -158,7 +157,7 @@ function onUpdateTag(event: FocusEvent | KeyboardEvent, name: string, tagId?: nu
       }"
       color="indigo"
       :editable="showingTagCreationField"
-      :icon="showingTagCreationField ? getIcon('tags') : getIcon('plus')"
+      :icon="showingTagCreationField ? getLayerIcon('tags') : getLayerIcon('plus')"
       is-creation
       :light="false"
       :size="size"

package/app/components/bases/BaseToast.vue

@@ -14,8 +14,6 @@ const emit = defineEmits<{
   close: [event: KeyboardEvent | MouseEvent, toast: BaseToast]
 }>()
 
-const { getIcon } = useLayerIcons()
-
 function onAction(event: KeyboardEvent | MouseEvent) {
   if (props.action) {
     emit('action', event, props)
@@ -82,7 +80,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
           'group-hover:text-green-600 dark:group-hover:text-green-400': status === 'success',
           'group-hover:text-orange-600 dark:group-hover:text-orange-400': status === 'warning',
         }"
-        :icon="getIcon('close')"
+        :icon="getLayerIcon('close')"
       />
     </template>
   </div>

package/app/components/fields/FieldEmojis.vue

@@ -10,7 +10,6 @@ const emit = defineEmits<{
 }>()
 
 const { locale, t } = useI18n()
-const { normalizeText } = useLayerUtils()
 const modelValue = defineModel<FieldEmojis['modelValue']>({ default: '' })
 const searchRaw = ref('')
 const searchQuery = refDebounced(searchRaw, 250)

package/app/components/fields/FieldSelect.vue

@@ -31,9 +31,6 @@ const emit = defineEmits<{
   optionClick: [event: MouseEvent, value: string]
 }>()
 
-const { getIcon } = useLayerIcons()
-const { fadeIn } = useMotion()
-const { normalizeText } = useLayerUtils()
 const { t } = useI18n()
 const id = useId()
 const modelValue = defineModel<FieldSelect['modelValue']>({ default: '' })
@@ -264,7 +261,7 @@ function selectOption(event: MouseEvent, value: string) {
             class="ml-2 flex-initial"
             :class="{ 'rotate-180': opened }"
             color="gray"
-            :icon="getIcon('arrowDown')"
+            :icon="getLayerIcon('arrowDown')"
           />
         </div>
 
@@ -320,7 +317,7 @@ function selectOption(event: MouseEvent, value: string) {
               <BaseIcon
                 class="pointer-events-none"
                 color="gray"
-                :icon="getIcon('infoCircle')"
+                :icon="getLayerIcon('infoCircle')"
                 :size="size"
                 :text="t('noResults')"
               />

package/app/components/fields/FieldTime.vue

@@ -19,7 +19,6 @@ const emit = defineEmits<{
   blur: [event: FocusEvent, value: string, name?: string]
 }>()
 
-const { getIcon } = useLayerIcons()
 const id = useId()
 const modelValue = defineModel<FieldTime['modelValue']>({ default: '' })
 const inputRef = ref<HTMLInputElement>()
@@ -75,7 +74,7 @@ function onFieldBlur(event: FocusEvent) {
       @keydown.space.prevent="onContainerKeyDown"
     >
       <BaseIcon
-        :icon="getIcon('clock')"
+        :icon="getLayerIcon('clock')"
         :size="size"
       />
 

package/app/components/layout/LayoutApps.vue

@@ -0,0 +1,152 @@
+<script lang="ts" setup>
+import { getAppStoreUrl, getPlayStoreUrl } from '@saasmakers/apps-helpers'
+import type { LayoutApps } from '../../types/layout'
+
+const props = defineProps<LayoutApps>()
+const { locale, t } = useI18n()
+
+const appStoreUrl = computed(() => {
+  return getAppStoreUrl(props.appStoreId, locale.value)
+})
+
+const playStoreUrl = computed(() => {
+  return getPlayStoreUrl(props.playStoreId, locale.value)
+})
+</script>
+
+<template>
+  <div>
+    <BaseDivider
+      border-style="dashed"
+      class="mb-12 mt-6"
+      :title="t('title')"
+    />
+
+    <div class="flex items-center justify-center gap-3">
+      <a
+        v-if="appStoreUrl"
+        :aria-label="t('appStore')"
+        :href="appStoreUrl"
+        target="_blank"
+      >
+        <img
+          :alt="t('appStore')"
+          class="h-11 sm:h-12"
+          :src="`/images/layout/LayoutApps/appstore-${locale}.svg`"
+        >
+      </a>
+
+      <img
+        v-else
+        v-tooltip="t('comingSoon')"
+        :alt="t('appStore')"
+        class="h-11 sm:h-12"
+        :src="`/images/layout/LayoutApps/appstore-${locale}.svg`"
+      >
+
+      <a
+        v-if="playStoreUrl"
+        :aria-label="t('googlePlay')"
+        :href="playStoreUrl"
+        target="_blank"
+      >
+        <img
+          :alt="t('googlePlay')"
+          class="h-11 sm:h-12"
+          :src="`/images/layout/LayoutApps/googleplay-${locale}.svg`"
+        >
+      </a>
+
+      <img
+        v-else
+        v-tooltip="t('comingSoon')"
+        :alt="t('googlePlay')"
+        class="h-11 sm:h-12"
+        :src="`/images/layout/LayoutApps/googleplay-${locale}.svg`"
+      >
+    </div>
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "de": {
+    "appStore": "Im App Store laden",
+    "comingSoon": "Demnächst",
+    "googlePlay": "Bei Google Play holen",
+    "title": "Probiere unsere Apps aus"
+  },
+  "en": {
+    "appStore": "Download on the App Store",
+    "comingSoon": "Coming soon",
+    "googlePlay": "Get it on Google Play",
+    "title": "Try our applications"
+  },
+  "es": {
+    "appStore": "Descargar en App Store",
+    "comingSoon": "Próximamente",
+    "googlePlay": "Disponible en Google Play",
+    "title": "Prueba nuestras aplicaciones"
+  },
+  "fr": {
+    "appStore": "Télécharger sur l'App Store",
+    "comingSoon": "Bientôt disponible",
+    "googlePlay": "Disponible sur Google Play",
+    "title": "Essayez nos applications"
+  },
+  "id": {
+    "appStore": "Unduh di App Store",
+    "comingSoon": "Segera hadir",
+    "googlePlay": "Dapatkan di Google Play",
+    "title": "Coba aplikasi kami"
+  },
+  "it": {
+    "appStore": "Scarica su App Store",
+    "comingSoon": "In arrivo",
+    "googlePlay": "Disponibile su Google Play",
+    "title": "Prova le nostre app"
+  },
+  "ja": {
+    "appStore": "App Storeでダウンロード",
+    "comingSoon": "近日公開予定",
+    "googlePlay": "Google Playで入手",
+    "title": "アプリケーションを試す"
+  },
+  "ko": {
+    "appStore": "App Store에서 다운로드",
+    "comingSoon": "곧 출시",
+    "googlePlay": "Google Play에서 받기",
+    "title": "앱을 사용해 보세요"
+  },
+  "nl": {
+    "appStore": "Download in de App Store",
+    "comingSoon": "Binnenkort beschikbaar",
+    "googlePlay": "Downloaden via Google Play",
+    "title": "Probeer onze apps"
+  },
+  "pl": {
+    "appStore": "Pobierz w App Store",
+    "comingSoon": "Wkrótce",
+    "googlePlay": "Pobierz z Google Play",
+    "title": "Wypróbuj nasze aplikacje"
+  },
+  "pt": {
+    "appStore": "Descarregar na App Store",
+    "comingSoon": "Em breve",
+    "googlePlay": "Disponível no Google Play",
+    "title": "Experimenta as nossas apps"
+  },
+  "pt-BR": {
+    "appStore": "Baixar na App Store",
+    "comingSoon": "Em breve",
+    "googlePlay": "Disponível no Google Play",
+    "title": "Experimente nossos aplicativos"
+  },
+  "vi": {
+    "appStore": "Tải trên App Store",
+    "comingSoon": "Sắp ra mắt",
+    "googlePlay": "Tải trên Google Play",
+    "title": "Dùng thử ứng dụng của chúng tôi"
+  }
+}
+</i18n>

package/app/components/layout/LayoutToasts.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-const { fadeInUp } = useMotion()
 const toasts = useToasts()
 
 const activeShortcutToastId = computed(() => {

package/app/types/global.d.ts

@@ -96,12 +96,13 @@ declare global {
   type FieldTime = import('./fields').FieldTime
 
   // Layout
+  type LayoutApps = import('./layout').LayoutApps
   type LayoutBottomSheet = import('./layout').LayoutBottomSheet
   type LayoutModal = import('./layout').LayoutModal
 
   // Project
-  type LayerIconIcon = import('../composables/useLayerIcons').LayerIconIcon
-  type LayerIconValue = import('../composables/useLayerIcons').LayerIconValue
+  type LayerIconIcon = import('../utils/layerIcons').LayerIconIcon
+  type LayerIconValue = import('../utils/layerIcons').LayerIconValue
 
   // Navigator
   interface Navigator {

package/app/types/layout.d.ts

@@ -1,3 +1,8 @@
+export interface LayoutApps {
+  appStoreId?: string
+  playStoreId?: string
+}
+
 export interface LayoutBottomSheet {
   title?: string
 }

package/app/utils/animations.ts

@@ -0,0 +1,31 @@
+export const fadeIn = {
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.25 },
+  },
+  initial: { opacity: 0 },
+}
+
+export const fadeInLeft = {
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.25 },
+    x: 0,
+  },
+  initial: {
+    opacity: 0,
+    x: -25,
+  },
+}
+
+export const fadeInUp = {
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.25 },
+    y: 0,
+  },
+  initial: {
+    opacity: 0,
+    y: 25,
+  },
+}

package/app/utils/chartist.ts

@@ -0,0 +1,126 @@
+import type { AreaDrawEvent, BarChartOptions, BarDrawEvent, BaseChart, DrawEvent, LineDrawEvent, Options } from 'chartist'
+import { easings } from 'chartist'
+
+type EasingType = keyof typeof easings | number[]
+
+export function progressiveLinePlugin(params: {
+  animateArea?: boolean
+  delay?: number
+  duration?: number
+  easing?: EasingType
+  stagger?: number
+} = {}) {
+  const animateArea = params.animateArea ?? true
+  const delay = params.delay ?? 0
+  const duration = params.duration ?? 500
+  const easing = params.easing ?? easings.easeOutQuart
+  const stagger = params.stagger ?? 0
+
+  return (chart: BaseChart) => {
+    chart.on('draw', (ctx: DrawEvent) => {
+      const begin = delay + (stagger ? stagger * (ctx.seriesIndex ?? 0) : 0)
+
+      // Animation for line charts
+      if (ctx.type === 'line') {
+        const lineCtx = ctx as LineDrawEvent
+        const node = lineCtx.element.getNode<SVGPathElement>()
+        const length = node.getTotalLength()
+
+        // Set the stroke dasharray and dashoffset
+        lineCtx.element.attr({
+          'stroke-dasharray': `${length}px ${length}px`,
+          'stroke-dashoffset': `${length}px`,
+        })
+
+        // Animate the stroke dashoffset to 0
+        lineCtx.element.animate({
+          'stroke-dashoffset': {
+            begin,
+            dur: duration,
+            easing,
+            fill: 'freeze',
+            from: `${length}px`,
+            to: '0px',
+          },
+        }, false)
+
+        // Clean up the dash attributes after it finishes
+        const total = delay + duration + (stagger ? stagger * (lineCtx.seriesIndex ?? 0) : 0)
+
+        globalThis.setTimeout(() => {
+          lineCtx.element.attr({
+            'stroke-dasharray': undefined,
+            'stroke-dashoffset': undefined,
+          })
+        }, total + 30)
+      }
+
+      // Animation for area charts
+      if (animateArea && ctx.type === 'area') {
+        const areaCtx = ctx as AreaDrawEvent
+
+        areaCtx.element.animate({
+
+          d: {
+            begin,
+            dur: duration,
+            easing,
+            fill: 'freeze',
+            from: areaCtx.path
+              .clone()
+              .scale(1, 0)
+              .translate(0, areaCtx.chartRect.height())
+              .stringify(),
+            to: areaCtx.path.stringify(),
+          },
+        }, false)
+      }
+
+      // Animation for bar charts
+      if (ctx.type === 'bar') {
+        const barCtx = ctx as BarDrawEvent
+
+        // Access private options property via type assertion
+        const chartOptions = (chart as unknown as {
+          options?: Options & Partial<BarChartOptions>
+        }).options
+
+        const horizontal = !!(chartOptions as BarChartOptions | undefined)?.horizontalBars
+
+        // For vertical bars, y1 is baseline, y2 is top. For horizontal, x1 is baseline, x2 is end.
+        const from = horizontal ? barCtx.x1 : barCtx.y1
+        const to = horizontal ? barCtx.x2 : barCtx.y2
+
+        // Start collapsed at baseline
+        if (horizontal) {
+          barCtx.element.attr({ x2: from })
+
+          barCtx.element.animate({
+            x2: {
+              begin,
+              dur: duration,
+              easing,
+              fill: 'freeze',
+              from: String(from),
+              to: String(to),
+            },
+          }, false)
+        }
+        else {
+          barCtx.element.attr({ y2: from })
+
+          barCtx.element.animate({
+            y2: {
+              begin,
+              dur: duration,
+              easing,
+              fill: 'freeze',
+              from: String(from),
+              to: String(to),
+            },
+          }, false)
+        }
+      }
+    })
+  }
+}