@veristone/nuxt-v-app 0.1.0

package/app/composables/useVAAnimation.ts

@@ -0,0 +1,324 @@
+/**
+ * useVAAnimation - Animation utilities for Veristone components
+ * Provides stagger delays, scroll reveal, and animated counters
+ */
+
+export interface RevealOptions {
+  threshold?: number
+  rootMargin?: string
+  once?: boolean
+}
+
+export interface CountUpOptions {
+  duration?: number
+  easing?: (t: number) => number
+  separator?: string
+  decimal?: string
+  decimals?: number
+  prefix?: string
+  suffix?: string
+}
+
+export function useVAAnimation() {
+  /**
+   * Calculate stagger delay for list animations
+   * @param index - Item index in the list
+   * @param baseDelay - Base delay in milliseconds (default: 50)
+   * @returns CSS delay string
+   */
+  const staggerDelay = (index: number, baseDelay = 50): string => {
+    return `${index * baseDelay}ms`
+  }
+
+  /**
+   * Generate stagger delay style object for v-bind
+   * @param index - Item index
+   * @param baseDelay - Base delay in ms
+   */
+  const staggerStyle = (index: number, baseDelay = 50) => ({
+    animationDelay: staggerDelay(index, baseDelay)
+  })
+
+  /**
+   * Intersection Observer hook for scroll reveal animations
+   * @param options - Observer options
+   */
+  const useRevealOnScroll = (options: RevealOptions = {}) => {
+    const {
+      threshold = 0.1,
+      rootMargin = '0px 0px -50px 0px',
+      once = true
+    } = options
+
+    const elementRef = shallowRef<HTMLElement | null>(null)
+    const isVisible = ref(false)
+
+    let observer: IntersectionObserver | null = null
+
+    const observe = () => {
+      const el = elementRef.value
+      if (!el || typeof IntersectionObserver === 'undefined') {
+        isVisible.value = true
+        return
+      }
+
+      observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              isVisible.value = true
+              if (once && observer) {
+                observer.disconnect()
+              }
+            } else if (!once) {
+              isVisible.value = false
+            }
+          })
+        },
+        { threshold, rootMargin }
+      )
+
+      observer.observe(el)
+    }
+
+    const unobserve = () => {
+      if (observer) {
+        observer.disconnect()
+        observer = null
+      }
+    }
+
+    onMounted(observe)
+    onUnmounted(unobserve)
+
+    return {
+      elementRef,
+      isVisible
+    }
+  }
+
+  /**
+   * Animated number counter
+   * @param endValue - Target value to count to
+   * @param options - Animation options
+   */
+  const useCountUp = (
+    endValue: Ref<number> | number,
+    options: CountUpOptions = {}
+  ) => {
+    const {
+      duration = 1000,
+      easing = easeOutExpo,
+      separator = ',',
+      decimal = '.',
+      decimals = 0,
+      prefix = '',
+      suffix = ''
+    } = options
+
+    const displayValue = ref('0')
+    const currentValue = ref(0)
+    let animationFrame: number | null = null
+    let startTime: number | null = null
+    let startValue = 0
+
+    const formatNumber = (num: number): string => {
+      const fixed = num.toFixed(decimals)
+      const parts = fixed.split('.')
+      const intPart = parts[0] || '0'
+      const decPart = parts[1]
+
+      const formattedInt = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, separator)
+
+      if (decimals > 0 && decPart) {
+        return `${prefix}${formattedInt}${decimal}${decPart}${suffix}`
+      }
+      return `${prefix}${formattedInt}${suffix}`
+    }
+
+    const animate = (timestamp: number) => {
+      if (!startTime) startTime = timestamp
+
+      const elapsed = timestamp - startTime
+      const progress = Math.min(elapsed / duration, 1)
+      const easedProgress = easing(progress)
+
+      const end = unref(endValue)
+      currentValue.value = startValue + (end - startValue) * easedProgress
+      displayValue.value = formatNumber(currentValue.value)
+
+      if (progress < 1) {
+        animationFrame = requestAnimationFrame(animate)
+      }
+    }
+
+    const start = (from = 0) => {
+      if (animationFrame) {
+        cancelAnimationFrame(animationFrame)
+      }
+      startValue = from
+      startTime = null
+      animationFrame = requestAnimationFrame(animate)
+    }
+
+    const reset = () => {
+      if (animationFrame) {
+        cancelAnimationFrame(animationFrame)
+      }
+      currentValue.value = 0
+      displayValue.value = formatNumber(0)
+    }
+
+    // Watch for value changes
+    if (isRef(endValue)) {
+      watch(endValue, (_newVal, oldVal) => {
+        start(oldVal || 0)
+      })
+    }
+
+    onMounted(() => {
+      start(0)
+    })
+
+    onUnmounted(() => {
+      if (animationFrame) {
+        cancelAnimationFrame(animationFrame)
+      }
+    })
+
+    return {
+      displayValue,
+      currentValue,
+      start,
+      reset
+    }
+  }
+
+  /**
+   * Animate a list of items with staggered entrance
+   * @param items - Reactive array of items
+   * @param delay - Delay between items in ms
+   */
+  const useStaggeredList = <T>(items: Ref<T[]>, delay = 50) => {
+    const visibleItems = shallowRef<T[]>([])
+    let timeouts: ReturnType<typeof setTimeout>[] = []
+
+    const animateIn = () => {
+      // Clear existing timeouts
+      timeouts.forEach(clearTimeout)
+      timeouts = []
+      visibleItems.value = []
+
+      items.value.forEach((item, index) => {
+        const timeout = setTimeout(() => {
+          visibleItems.value = [...visibleItems.value, item]
+        }, index * delay)
+        timeouts.push(timeout)
+      })
+    }
+
+    const animateOut = () => {
+      timeouts.forEach(clearTimeout)
+      timeouts = []
+      visibleItems.value = []
+    }
+
+    watch(items, animateIn, { immediate: true, deep: true })
+
+    onUnmounted(() => {
+      timeouts.forEach(clearTimeout)
+    })
+
+    return {
+      visibleItems,
+      animateIn,
+      animateOut
+    }
+  }
+
+  /**
+   * Typewriter effect for text
+   * @param text - Text to type
+   * @param speed - Characters per second
+   */
+  const useTypewriter = (text: Ref<string> | string, speed = 50) => {
+    const displayText = ref('')
+    let index = 0
+    let interval: ReturnType<typeof setInterval> | null = null
+
+    const start = () => {
+      const fullText = unref(text)
+      index = 0
+      displayText.value = ''
+
+      if (interval) clearInterval(interval)
+
+      interval = setInterval(() => {
+        if (index < fullText.length) {
+          displayText.value += fullText[index]
+          index++
+        } else {
+          if (interval) clearInterval(interval)
+        }
+      }, 1000 / speed)
+    }
+
+    const reset = () => {
+      if (interval) clearInterval(interval)
+      displayText.value = ''
+      index = 0
+    }
+
+    if (isRef(text)) {
+      watch(text, start)
+    }
+
+    onMounted(start)
+    onUnmounted(() => {
+      if (interval) clearInterval(interval)
+    })
+
+    return {
+      displayText,
+      start,
+      reset
+    }
+  }
+
+  return {
+    staggerDelay,
+    staggerStyle,
+    useRevealOnScroll,
+    useCountUp,
+    useStaggeredList,
+    useTypewriter
+  }
+}
+
+// Easing functions
+function easeOutExpo(x: number): number {
+  return x === 1 ? 1 : 1 - Math.pow(2, -10 * x)
+}
+
+function easeOutCubic(x: number): number {
+  return 1 - Math.pow(1 - x, 3)
+}
+
+function easeOutQuart(x: number): number {
+  return 1 - Math.pow(1 - x, 4)
+}
+
+function easeInOutQuad(x: number): number {
+  return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2
+}
+
+// Export easing functions for custom use
+export const easings = {
+  easeOutExpo,
+  easeOutCubic,
+  easeOutQuart,
+  easeInOutQuad
+}
+
+// Default export for convenience
+export default useVAAnimation

package/app/composables/useVAUtils.ts

@@ -0,0 +1,118 @@
+/**
+ * VA Utility Composable
+ * Common utility functions for the V-App layer
+ */
+export function useVAUtils() {
+  /**
+   * Format a number with thousand separators
+   */
+  const formatNumber = (value: number): string => {
+    return new Intl.NumberFormat().format(value)
+  }
+
+  /**
+   * Format currency
+   */
+  const formatCurrency = (value: number, currency = 'USD'): string => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    }).format(value)
+  }
+
+  /**
+   * Format percentage
+   */
+  const formatPercent = (value: number, decimals = 1): string => {
+    const sign = value >= 0 ? '+' : ''
+    return `${sign}${value.toFixed(decimals)}%`
+  }
+
+  /**
+   * Format relative time (e.g., "2 min ago")
+   */
+  const formatRelativeTime = (date: Date | string): string => {
+    const now = new Date()
+    const then = new Date(date)
+    const diffMs = now.getTime() - then.getTime()
+    const diffMins = Math.floor(diffMs / 60000)
+    const diffHours = Math.floor(diffMs / 3600000)
+    const diffDays = Math.floor(diffMs / 86400000)
+
+    if (diffMins < 1) return 'Just now'
+    if (diffMins < 60) return `${diffMins} min ago`
+    if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`
+    if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`
+    return then.toLocaleDateString()
+  }
+
+  /**
+   * Truncate text with ellipsis
+   */
+  const truncate = (text: string, length: number): string => {
+    if (text.length <= length) return text
+    return text.slice(0, length) + '...'
+  }
+
+  /**
+   * Generate initials from name
+   */
+  const getInitials = (name: string): string => {
+    return name
+      .split(' ')
+      .map(part => part[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2)
+  }
+
+  const debounce = <T extends (...args: unknown[]) => unknown>(
+    fn: T,
+    delay: number
+  ): ((...args: Parameters<T>) => void) => {
+    let timeoutId: ReturnType<typeof setTimeout>
+    return (...args: Parameters<T>) => {
+      clearTimeout(timeoutId)
+      timeoutId = setTimeout(() => fn(...args), delay)
+    }
+  }
+
+  type StatusColor = 'success' | 'warning' | 'error' | 'neutral' | 'info'
+  const statusColorMap: Record<string, StatusColor> = {
+    performing: 'success',
+    current: 'success',
+    default_30: 'warning',
+    default_60: 'warning',
+    default_90: 'error',
+    default_120: 'error',
+    default_maturity: 'error',
+    delinquent: 'error',
+    paid_off: 'neutral',
+    pending: 'warning',
+    approved: 'success',
+    rejected: 'error',
+    expired: 'neutral',
+    paid: 'success',
+    processing: 'info',
+    active: 'success',
+    inactive: 'neutral',
+    draft: 'neutral'
+  }
+
+  const getStatusColor = (status: string): StatusColor => {
+    return statusColorMap[status] || 'neutral'
+  }
+
+  return {
+    formatNumber,
+    formatCurrency,
+    formatPercent,
+    formatRelativeTime,
+    truncate,
+    getInitials,
+    debounce,
+    getStatusColor
+  }
+}