Upload

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-uploader> is the SAME shared custom element React and Vue consume.
     Click or drag files onto the zone; it emits a composed `change` event with the File[].
     Feed `items` to render managed file rows/tiles with per-item state + a remove ✕. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/icons.js';       // <aha-icon> glyphs
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-uploader.js'; // <aha-uploader>
</script>

<!-- text mode: a drop zone + managed file rows (done / uploading / error) -->
<aha-uploader id="up" accept="image/*" multiple
  items='[{"name":"cover.png","status":"done"},{"name":"clip.mov","status":"uploading","percent":40},{"name":"bad.zip","status":"error"}]'>
</aha-uploader>

<!-- picture-card mode: thumbnail tiles + a dashed add-box; cap with maxcount -->
<aha-uploader listtype="picture-card" maxcount="4"
  items='[{"name":"a.png","status":"done","thumb":"a.png"}]'>
</aha-uploader>

<script>
  const up = document.getElementById('up');
  up.addEventListener('change', (e) => console.log('files:', e.detail.files.map((f) => f.name)));
  up.addEventListener('remove', (e) => console.log('remove:', e.detail.name, e.detail.index));
</script>

import '@ahaslides-product/design/aha-uploader';   // registers <aha-uploader>
import '@ahaslides-product/design/icons';          // registers <aha-icon> (glyphs)
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper (composed CustomEvents + JSON attrs); React 19 can use the tag directly.
function AhaUploader({ multiple, accept, disabled, listType, maxCount, items, onFiles, onRemove }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    const f = (e) => onFiles?.(e.detail.files);           // composed CustomEvent, File[]
    const r = (e) => onRemove?.(e.detail.name, e.detail.index);
    el.addEventListener('change', f);
    el.addEventListener('remove', r);
    return () => { el.removeEventListener('change', f); el.removeEventListener('remove', r); };
  });
  return (
    <aha-uploader
      ref={ref}
      multiple={multiple || undefined}
      accept={accept}
      disabled={disabled || undefined}
      listtype={listType}                                 // "text" | "picture-card"
      maxcount={maxCount}
      items={items ? JSON.stringify(items) : undefined}   // [{ name, status?, percent?, thumb? }]
    />
  );
}

// usage — a drop zone with managed rows (done / uploading / error) + a remove handler
<AhaUploader
  accept="image/*"
  multiple
  items={[
    { name: 'cover.png', status: 'done' },
    { name: 'clip.mov', status: 'uploading', percent: 40 },
    { name: 'bad.zip', status: 'error' },
  ]}
  onFiles={(files) => setFiles(files)}
  onRemove={(name) => dropFile(name)}
/>

// main.ts — register the element + mark aha-* as custom elements
import '@ahaslides-product/design/aha-uploader';
import '@ahaslides-product/design/icons';           // <aha-icon> glyphs
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue — text mode: a drop zone + managed file rows (done / uploading / error)
<template>
  <aha-uploader
    accept="image/*"
    multiple
    listtype="text"
    :items="JSON.stringify(items)"          // [{ name, status?, percent?, thumb? }]
    @change="onFiles($event.detail.files)"
    @remove="onRemove($event.detail.name, $event.detail.index)"
  />

  <!-- picture-card mode: thumbnail tiles + a dashed add-box, capped at 4 -->
  <aha-uploader listtype="picture-card" maxcount="4" :items="JSON.stringify(tiles)" />
</template>

<script setup>
const items = [
  { name: 'cover.png', status: 'done' },
  { name: 'clip.mov', status: 'uploading', percent: 40 },
  { name: 'bad.zip', status: 'error' },
];
const tiles = [{ name: 'a.png', status: 'done', thumb: 'a.png' }];
</script>