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

MAppDownloadStack exposes no slots. The stack, its cards and the labels are all rendered from props.

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.