App Download Stack

App Download Stack starts as a collapsed fan of app icons. Clicking expands a selectable grid; you can toggle apps (up to maxPinned-like cap implied by selection), then trigger a download sequence that shows a downloading state with a shine sweep and finally a completion state before auto-resetting. It respects prefers-reduced-motion, supports controlled expanded/selectedApps, and emits lifecycle events.

Usage

Provide apps with id, name, icon (a Nuxt UI icon name). The trigger is a plain button that expands the selector. Use v-model:expanded and v-model:selectedApps to control state, or listen to expand-change, change, download events.

<template>
  <div class="flex h-80 w-full items-center justify-center">
    <MAppDownloadStack
      title="My Apps"
      :apps="apps"
    />
  </div>
</template>

<script setup lang="ts">
const apps = [
  { id: 1, name: 'Safari', icon: 'i-lucide-compass' },
  { id: 2, name: 'Photos', icon: 'i-lucide-image' },
  { id: 3, name: 'Podcasts', icon: 'i-lucide-mic' },
  { id: 4, name: 'Calendar', icon: 'i-lucide-calendar-days' },
]
</script>

Customize

Props

Events

Slots

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.appDownloadStack in app.config.ts.

Accessibility

The collapsed trigger is a plain <button> with aria-label="Expand app selection". When expanded, the header is also a button (collapses on click) and each app tile is a button with :aria-pressed="isSelected(app.id)". Checkmark uses a decorative SVG with <title>Checkmark</title>. The download button is disabled when nothing selected. The stack and downloading icons carry role="img" with the app name as the accessible label; the grid tiles are labelled by their visible text. No ARIA live regions announce download state changes; focus is not managed between states. prefers-reduced-motion replaces all motion with near-zero duration variants (floats/rotations become flat). Layout transitions are disabled when reduced motion is preferred (:layout="!shouldReduceMotion").

Performance

• Icon motion is expressed via variants callbacks (reading custom index) and computed per state; when reduced motion, all variants collapse to rest/flat forms.
• The shine sweep uses useAnimationControls().start() called after nextTick() so the target node exists; sweep runs infinitely during download with linear easing and is stopped on completion.
• Download sequence uses two setTimeouts: one for DOWNLOAD_DURATION_MS (3000) to complete, one RESET_DELAY_MS (1000) to collapse/reset. Timers are cleared on unmount.
• layoutId is only applied when motion is not reduced (prevents layout animation noise under reduced motion).
• Panel transitions use AnimatePresence with scale/opacity; reduced motion uses opacity-only or zero-duration variants.
• No WebGL, heavy loops, or per-frame state churn beyond timers and the small computed maps.