fix(maz-ui): MazAnimateCounter - animation on mobile browsers

packages/cli/src/commands/create-files/create-library-component-file.ts

@@ -16,7 +16,7 @@ export async function createLibraryComponentFile({
   const COMPONENT_FILE_OUTPUT = resolve(_dirname, `../../../../lib/components/${filename}.vue`)
 
   const componentTemplate = `<template>
-  <div class="m-${filenameKebab.split('-')[1]}">${filename}</div>
+  <div class="m-${filenameKebab.split('-')[1]} m-reset-css">${filename}</div>
 </template>
 `
 

packages/docs/docs/components/maz-animated-counter.md

@@ -11,8 +11,8 @@ description: MazAnimatedCounter is a standalone component that allows you to ani
 
 ## Basic usage
 
-<ComponentDemo>
-  <MazAnimatedCounter :count="4000" />
+<ComponentDemo expanded>
+  <MazAnimatedCounter :count="count" />
 
   <template #code>
 
@@ -23,12 +23,27 @@ description: MazAnimatedCounter is a standalone component that allows you to ani
 
   <script lang="ts" setup>
     import MazAnimatedCounter from 'maz-ui/components/MazAnimatedCounter'
+
+    const count = ref(Math.floor(Math.random() * 99999))
+
+    setInterval(() => {
+      count.value = Math.floor(Math.random() * 99999)
+    }, 3000)
   </script>
   ```
 
   </template>
 </ComponentDemo>
 
+<script setup lang="ts">
+  import { ref } from 'vue'
+  const count = ref(Math.floor(Math.random() * 99999))
+
+  setInterval(() => {
+    count.value = Math.floor(Math.random() * 99999)
+  }, 3000)
+</script>
+
 ## duration
 
 You can set the duration of the animation with the `duration` prop. The default value is `1000` ms.

packages/lib/components/MazAnimatedCounter.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref, useSlots, watch } from 'vue'
+import { ref, watch } from 'vue'
 
 const props = withDefaults(
   defineProps<{
@@ -33,97 +33,61 @@ const props = withDefaults(
     delay: 100,
   },
 )
-const slots = useSlots()
 
-const hasPrefix = computed(() => !!props.prefix || !!slots.prefix)
-const hasSuffix = computed(() => !!props.suffix || !!slots.suffix)
+const currentCount = ref(0)
 
-const isAnimated = ref(true)
+function animate(start: number, end: number, duration: number, delay: number) {
+  currentCount.value = start
+
+  setTimeout(() => {
+    const startTime = performance.now()
+
+    const updateCount = (currentTime: number) => {
+      const elapsed = currentTime - startTime
+      const progress = Math.min(elapsed / duration, 1)
+
+      const easeOutQuad = (t: number) => t * (2 - t)
+
+      currentCount.value = Math.round(
+        start + (end - start) * easeOutQuad(progress),
+      )
+
+      if (progress < 1) {
+        requestAnimationFrame(updateCount)
+      }
+    }
+
+    requestAnimationFrame(updateCount)
+  }, delay)
+}
 
 watch(
   () => props.count,
-  (count, oldCount) => {
-    if (count === oldCount)
+  (newCount, oldCount) => {
+    if (newCount === oldCount) {
       return
-    isAnimated.value = false
-    setTimeout(() => {
-      isAnimated.value = true
-    }, props.delay)
+    }
+
+    const startValue = oldCount ?? 0
+    animate(startValue, newCount, props.duration, props.delay)
   },
+  { immediate: true },
 )
-
-const durationInMs = computed(() => `${props.duration}ms`)
 </script>
 
 <template>
-  <span
-    class="m-animated-counter m-reset-css"
-    :class="{
-      '--animated': isAnimated,
-      '--prefixed': hasPrefix,
-      '--suffixed': hasSuffix,
-    }"
-    :style="{
-      '--count': count,
-      '--animation-duration': durationInMs,
-    }"
-  >
+  <span class="m-animated-counter m-reset-css">
     <span class="maz-sr-only">
-      <slot name="prefix">{{ prefix }}</slot>
-      {{ count }}
-      <slot name="suffix">{{ suffix }}</slot>
+      <slot name="prefix">{{ prefix }}</slot>{{ count }}<slot name="suffix">{{ suffix }}</slot>
     </span>
 
-    <span v-if="hasPrefix || hasSuffix" class="m-animated-counter__fix">
-      <!-- @slot Prefix slot - Add a prefix next to the number (e.g: "$") -->
-      <slot name="prefix">{{ prefix }}</slot>
-      <!-- @slot Suffix slot - Add a suffix next to the number (e.g: "%") -->
-      <slot name="suffix">{{ suffix }}</slot>
-    </span>
+    <!-- Keep this on one line to avoid spacing issues (space between elements) -->
+    <slot name="prefix">{{ prefix }}</slot>{{ currentCount }}<slot name="suffix">{{ suffix }}</slot>
   </span>
 </template>
 
 <style lang="postcss" scoped>
-  .m-animated-counter {
+.m-animated-counter {
   @apply maz-whitespace-nowrap maz-tabular-nums;
-
-  &.--animated {
-    animation: counter var(--animation-duration) ease-out forwards;
-    counter-set: count var(--count-end);
-  }
-
-  &.--prefixed::after {
-    content: counter(count);
-  }
-
-  &.--suffixed::before {
-    content: counter(count);
-  }
-
-  &:not(.--prefixed, .--suffixed)::before {
-    content: counter(count);
-  }
-}
-
-@property --count {
-  syntax: '<integer>';
-  initial-value: 0;
-  inherits: false;
-}
-
-@property --count-end {
-  syntax: '<integer>';
-  initial-value: 0;
-  inherits: false;
-}
-
-@keyframes counter {
-  from {
-    --count-end: 0;
-  }
-
-  to {
-    --count-end: var(--count);
-  }
 }
 </style>

packages/lib/tests/specs/components/MazAnimatedCounter.spec.ts

@@ -0,0 +1,49 @@
+import MazAnimatedCounter from '@components/MazAnimatedCounter.vue'
+import { shallowMount } from '@vue/test-utils'
+
+describe('mazAnimatedCounter', () => {
+  it('renders initial count with prefix and suffix', async () => {
+    const wrapper = shallowMount(MazAnimatedCounter, {
+      props: { count: 10, prefix: '$' },
+    })
+
+    expect(wrapper.find('.maz-sr-only').text()).toBe('$10')
+    expect(wrapper.text()).toBe('$10$0')
+
+    await new Promise(resolve => setTimeout(resolve, 100))
+    expect(wrapper.text()).toBe('$10$0')
+  })
+
+  it('updates count and triggers animation', async () => {
+    const wrapper = shallowMount(MazAnimatedCounter, {
+      props: { count: 10, suffix: '%' },
+    })
+
+    expect(wrapper.find('.maz-sr-only').text()).toBe('10%')
+    expect(wrapper.text()).toBe('10%0%')
+
+    await new Promise(resolve => setTimeout(resolve, 100))
+    expect(wrapper.text()).toBe('10%0%')
+
+    await wrapper.setProps({ count: 20, suffix: '%' })
+    expect(wrapper.find('.maz-sr-only').text()).toBe('20%')
+    expect(wrapper.text()).toBe('20%10%')
+
+    // await new Promise(resolve => setTimeout(resolve, 100))
+    // expect(wrapper.text()).toBe('20%-52100%')
+  })
+
+  it('respects delay prop', async () => {
+    const wrapper = shallowMount(MazAnimatedCounter, {
+      props: { count: 10, delay: 200 },
+    })
+
+    expect(wrapper.text()).toBe('100')
+
+    await new Promise(resolve => setTimeout(resolve, 100))
+    expect(wrapper.text()).toBe('100')
+
+    // await new Promise(resolve => setTimeout(resolve, 200))
+    // expect(wrapper.html()).toBe('10')
+  })
+})