@uploadista/vue 0.0.3

package/src/components/UploadList.vue

@@ -0,0 +1,303 @@
+<script setup lang="ts">
+/**
+ * UploadList - Display a list of uploads with customizable status grouping and sorting
+ *
+ * Shows the progress and status of multiple file uploads. Supports filtering, sorting,
+ * and status-based grouping. Provides flexible slot-based customization for rendering each item.
+ *
+ * @component
+ * @example
+ * // Basic upload list
+ * <UploadList :uploads="uploads" />
+ *
+ * @example
+ * // Custom item rendering with status indicators
+ * <UploadList :uploads="uploads">
+ *   <template #item="{ item, isSuccess, isError }">
+ *     <div class="upload-item">
+ *       <span>{{ item.filename }}</span>
+ *       <progress :value="item.progress" max="100"></progress>
+ *       <span :class="{ success: isSuccess, error: isError }">
+ *         {{ item.state.status }}
+ *       </span>
+ *     </div>
+ *   </template>
+ * </UploadList>
+ *
+ * @example
+ * // With filtering and sorting
+ * <UploadList
+ *   :uploads="uploads"
+ *   :filter="item => item.state.status === 'success'"
+ *   :sort-by="(a, b) => a.uploadedAt - b.uploadedAt"
+ * />
+ */
+import { computed } from "vue";
+import type { UploadItem } from "../composables";
+import { isBrowserFile } from "../utils";
+
+/**
+ * Props for the UploadList component
+ * @property {UploadItem[]} uploads - Array of upload items to display
+ * @property {Function} filter - Optional filter for which items to display
+ * @property {Function} sortBy - Optional sorting function for items (a, b) => number
+ */
+export interface UploadListProps {
+  /**
+   * Array of upload items to display
+   */
+  uploads: UploadItem[];
+
+  /**
+   * Optional filter for which items to display
+   */
+  filter?: (item: UploadItem) => boolean;
+
+  /**
+   * Optional sorting function for items
+   */
+  sortBy?: (a: UploadItem, b: UploadItem) => number;
+}
+
+const props = defineProps<UploadListProps>();
+
+defineSlots<{
+  item(props: {
+    item: UploadItem;
+    index: number;
+    isUploading: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    formatFileSize: (bytes: number) => string;
+  }): any;
+  default?(props: {
+    items: UploadItem[];
+    itemsByStatus: {
+      idle: UploadItem[];
+      uploading: UploadItem[];
+      success: UploadItem[];
+      error: UploadItem[];
+      aborted: UploadItem[];
+    };
+  }): any;
+}>();
+
+// Apply filtering and sorting
+const filteredItems = computed(() => {
+  let items = props.uploads;
+
+  if (props.filter) {
+    items = items.filter(props.filter);
+  }
+
+  if (props.sortBy) {
+    items = [...items].sort(props.sortBy);
+  }
+
+  return items;
+});
+
+// Group items by status
+// biome-ignore lint/correctness/noUnusedVariables: Used in slot templates
+const itemsByStatus = computed(() => ({
+  idle: filteredItems.value.filter((item) => item.state.status === "idle"),
+  uploading: filteredItems.value.filter(
+    (item) => item.state.status === "uploading",
+  ),
+  success: filteredItems.value.filter(
+    (item) => item.state.status === "success",
+  ),
+  error: filteredItems.value.filter((item) => item.state.status === "error"),
+  aborted: filteredItems.value.filter(
+    (item) => item.state.status === "aborted",
+  ),
+}));
+
+// Helper function to format file sizes
+// biome-ignore lint/correctness/noUnusedVariables: Used in slot templates
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
+};
+
+// Helper function to get status icon
+// biome-ignore lint/correctness/noUnusedVariables: Used in slot templates
+const getStatusIcon = (status: string): string => {
+  switch (status) {
+    case "idle":
+      return "⏳";
+    case "uploading":
+      return "📤";
+    case "success":
+      return "✅";
+    case "error":
+      return "❌";
+    case "aborted":
+      return "⏹️";
+    default:
+      return "❓";
+  }
+};
+
+// Helper function to get status color
+// biome-ignore lint/correctness/noUnusedVariables: Used in slot templates
+const getStatusColor = (status: string): string => {
+  switch (status) {
+    case "idle":
+      return "#6c757d";
+    case "uploading":
+      return "#007bff";
+    case "success":
+      return "#28a745";
+    case "error":
+      return "#dc3545";
+    case "aborted":
+      return "#6c757d";
+    default:
+      return "#6c757d";
+  }
+};
+</script>
+
+<template>
+  <div class="upload-list">
+    <slot :items="filteredItems" :items-by-status="itemsByStatus">
+      <!-- Default rendering: simple list of upload items -->
+      <div
+        v-for="(item, index) in filteredItems"
+        :key="item.id"
+        class="upload-list__item"
+        :class="`upload-list__item--${item.state.status}`"
+      >
+        <slot
+          name="item"
+          :item="item"
+          :index="index"
+          :is-uploading="item.state.status === 'uploading'"
+          :is-success="item.state.status === 'success'"
+          :is-error="item.state.status === 'error'"
+          :format-file-size="formatFileSize"
+        >
+          <!-- Default item template -->
+          <div class="upload-list__item-header">
+            <span class="upload-list__item-icon">
+              {{ getStatusIcon(item.state.status) }}
+            </span>
+            <span class="upload-list__item-name">
+              {{ isBrowserFile(item.file) ? item.file.name : 'File' }}
+            </span>
+            <span
+              class="upload-list__item-status"
+              :style="{ color: getStatusColor(item.state.status) }"
+            >
+              {{ item.state.status.toUpperCase() }}
+            </span>
+          </div>
+
+          <div v-if="item.state.totalBytes" class="upload-list__item-size">
+            {{ formatFileSize(item.state.totalBytes) }}
+          </div>
+
+          <div v-if="item.state.status === 'uploading'" class="upload-list__item-progress">
+            <div class="upload-list__progress-bar">
+              <div
+                class="upload-list__progress-fill"
+                :style="{ width: `${item.state.progress}%` }"
+              />
+            </div>
+            <span class="upload-list__progress-text">{{ item.state.progress }}%</span>
+          </div>
+
+          <div v-if="item.state.status === 'error' && item.state.error" class="upload-list__item-error">
+            {{ item.state.error.message }}
+          </div>
+        </slot>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<style scoped>
+.upload-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.upload-list__item {
+  padding: 0.75rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.375rem;
+  background-color: #fff;
+}
+
+.upload-list__item-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.upload-list__item-icon {
+  font-size: 1rem;
+}
+
+.upload-list__item-name {
+  flex: 1;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.upload-list__item-status {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.upload-list__item-size {
+  font-size: 0.75rem;
+  color: #666;
+  margin-bottom: 0.5rem;
+}
+
+.upload-list__item-progress {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.upload-list__progress-bar {
+  flex: 1;
+  height: 0.375rem;
+  background-color: #e0e0e0;
+  border-radius: 0.1875rem;
+  overflow: hidden;
+}
+
+.upload-list__progress-fill {
+  height: 100%;
+  background-color: #007bff;
+  transition: width 0.2s ease;
+}
+
+.upload-list__progress-text {
+  font-size: 0.75rem;
+  color: #666;
+  min-width: 3rem;
+  text-align: right;
+}
+
+.upload-list__item-error {
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  background-color: #f8d7da;
+  color: #721c24;
+  font-size: 0.75rem;
+  border-radius: 0.25rem;
+}
+</style>

package/src/components/UploadZone.vue

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+/**
+ * UploadZone - A flexible file upload component with drag-and-drop support
+ *
+ * Provides a drag-and-drop zone and file picker for uploading files. Supports both single
+ * and multiple file uploads with validation. Emits events for file selection and upload events.
+ *
+ * @component
+ * @example
+ * // Basic single file upload
+ * <UploadZone @file-select="handleFiles" />
+ *
+ * @example
+ * // Multiple files with validation
+ * <UploadZone
+ *   multiple
+ *   accept={["image/*"]}
+ *   :max-file-size="10 * 1024 * 1024"
+ *   @file-select="handleFiles"
+ *   @validation-error="handleErrors"
+ * >
+ *   <template #default="{ isDragging, errors, openFilePicker }">
+ *     <div :class="{ dragging: isDragging }" @click="openFilePicker">
+ *       <p>{{ isDragging ? 'Drop files here' : 'Click or drag files here' }}</p>
+ *       <div v-if="errors.length">
+ *         <p v-for="error in errors" :key="error">{{ error }}</p>
+ *       </div>
+ *     </div>
+ *   </template>
+ * </UploadZone>
+ *
+ * @emits file-select - When files are selected/dropped
+ * @emits upload-start - When upload begins
+ * @emits validation-error - When validation fails
+ */
+import type { UploadOptions } from "@uploadista/client-browser";
+import { computed, ref } from "vue";
+import type { MultiUploadOptions } from "../composables";
+import { useDragDrop, useMultiUpload, useUpload } from "../composables";
+
+/**
+ * Props for the UploadZone component
+ * @property {string[]} accept - Accepted file types (MIME types or file extensions)
+ * @property {boolean} multiple - Whether to allow multiple files (default: true)
+ * @property {boolean} disabled - Whether the upload zone is disabled (default: false)
+ * @property {number} maxFileSize - Maximum file size in bytes
+ * @property {Function} validator - Custom validation function for files
+ * @property {MultiUploadOptions} multiUploadOptions - Multi-upload options (only used when multiple=true)
+ * @property {UploadOptions} uploadOptions - Single upload options (only used when multiple=false)
+ */
+export interface UploadZoneProps {
+  /**
+   * Accepted file types (MIME types or file extensions)
+   */
+  accept?: string[];
+
+  /**
+   * Whether to allow multiple files
+   */
+  multiple?: boolean;
+
+  /**
+   * Whether the upload zone is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Maximum file size in bytes
+   */
+  maxFileSize?: number;
+
+  /**
+   * Custom validation function for files
+   */
+  validator?: (files: File[]) => string[] | null;
+
+  /**
+   * Multi-upload options (only used when multiple=true)
+   */
+  multiUploadOptions?: MultiUploadOptions;
+
+  /**
+   * Single upload options (only used when multiple=false)
+   */
+  uploadOptions?: UploadOptions;
+}
+
+const props = withDefaults(defineProps<UploadZoneProps>(), {
+  multiple: true,
+  disabled: false,
+});
+
+const emit = defineEmits<{
+  "file-select": [files: File[]];
+  "upload-start": [files: File[]];
+  "validation-error": [errors: string[]];
+}>();
+
+defineSlots<{
+  // biome-ignore lint/suspicious/noExplicitAny: Vue slot definition requires any
+  default(props: {
+    isDragging: boolean;
+    isOver: boolean;
+    isUploading: boolean;
+    errors: string[];
+    openFilePicker: () => void;
+  }): any;
+}>();
+
+// Initialize upload composables
+const singleUpload = props.multiple
+  ? null
+  : useUpload(props.uploadOptions || {});
+const multiUpload = props.multiple
+  ? useMultiUpload(props.multiUploadOptions || {})
+  : null;
+
+// Handle files received from drag-drop or file picker
+const handleFilesReceived = (files: File[]) => {
+  emit("file-select", files);
+  emit("upload-start", files);
+
+  if (props.multiple && multiUpload) {
+    multiUpload.addFiles(files);
+    setTimeout(() => multiUpload.startAll(), 0);
+  } else if (!props.multiple && singleUpload && files[0]) {
+    singleUpload.upload(files[0]);
+  }
+};
+
+// Handle validation errors
+const handleValidationError = (errors: string[]) => {
+  emit("validation-error", errors);
+};
+
+// Initialize drag-drop
+const dragDrop = useDragDrop({
+  accept: props.accept,
+  multiple: props.multiple,
+  maxFileSize: props.maxFileSize,
+  validator: props.validator,
+  onFilesReceived: handleFilesReceived,
+  onValidationError: handleValidationError,
+});
+
+// File input ref
+const fileInputRef = ref<HTMLInputElement>();
+
+// Open file picker
+// biome-ignore lint/correctness/noUnusedVariables: Used in slot templates
+const openFilePicker = () => {
+  if (!props.disabled) {
+    fileInputRef.value?.click();
+  }
+};
+
+// Computed states
+// biome-ignore lint/correctness/noUnusedVariables: Used in slot templates
+const isActive = computed(
+  () => dragDrop.state.value.isDragging || dragDrop.state.value.isOver,
+);
+
+// biome-ignore lint/correctness/noUnusedVariables: Used in slot templates
+const isUploading = computed(() => {
+  if (props.multiple && multiUpload) {
+    return multiUpload.state.value.isUploading;
+  } else if (!props.multiple && singleUpload) {
+    return singleUpload.state.value.status === "uploading";
+  }
+  return false;
+});
+</script>
+
+<template>
+  <div
+    class="upload-zone"
+    :class="{ 'upload-zone--active': isActive, 'upload-zone--disabled': disabled }"
+    @dragenter="!disabled && dragDrop.onDragEnter"
+    @dragover="!disabled && dragDrop.onDragOver"
+    @dragleave="!disabled && dragDrop.onDragLeave"
+    @drop="!disabled && dragDrop.onDrop"
+    @click="openFilePicker"
+    role="button"
+    :tabindex="disabled ? -1 : 0"
+    :aria-disabled="disabled"
+    :aria-label="multiple ? 'Upload multiple files' : 'Upload a file'"
+    @keydown.enter="openFilePicker"
+    @keydown.space.prevent="openFilePicker"
+  >
+    <slot
+      :is-dragging="dragDrop.state.value.isDragging"
+      :is-over="dragDrop.state.value.isOver"
+      :is-uploading="isUploading"
+      :errors="[...dragDrop.state.value.errors]"
+      :open-file-picker="openFilePicker"
+    >
+      <!-- Default slot content -->
+      <div class="upload-zone__content">
+        <p v-if="dragDrop.state.value.isDragging">
+          {{ multiple ? 'Drop files here...' : 'Drop file here...' }}
+        </p>
+        <p v-else>
+          {{ multiple ? 'Drag files here or click to select' : 'Drag a file here or click to select' }}
+        </p>
+
+        <div v-if="dragDrop.state.value.errors.length > 0" class="upload-zone__errors">
+          <p v-for="(error, index) in dragDrop.state.value.errors" :key="index">
+            {{ error }}
+          </p>
+        </div>
+      </div>
+    </slot>
+
+    <input
+      ref="fileInputRef"
+      type="file"
+      :multiple="dragDrop.inputProps.value.multiple"
+      :accept="dragDrop.inputProps.value.accept"
+      :disabled="disabled"
+      @change="dragDrop.onInputChange"
+      style="display: none"
+      aria-hidden="true"
+    />
+  </div>
+</template>
+
+<style scoped>
+.upload-zone {
+  cursor: pointer;
+  user-select: none;
+}
+
+.upload-zone--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.upload-zone__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-zone__errors {
+  margin-top: 0.5rem;
+  color: #dc3545;
+  font-size: 0.875rem;
+}
+
+.upload-zone__errors p {
+  margin: 0.25rem 0;
+}
+</style>

package/src/components/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Vue 3 Components for Uploadista
+ *
+ * These components provide ready-to-use UI elements for file uploads and flow processing.
+ * They integrate with the Uploadista composables and are designed to be flexible and customizable.
+ */
+
+export { default as FlowUploadList } from "./FlowUploadList.vue";
+export { default as FlowUploadZone } from "./FlowUploadZone.vue";
+export { default as UploadList } from "./UploadList.vue";
+export { default as UploadZone } from "./UploadZone.vue";

package/src/composables/index.ts

@@ -0,0 +1,44 @@
+// Plugin
+
+export type { UploadistaPluginOptions } from "./plugin";
+export { createUploadistaPlugin, UPLOADISTA_CLIENT_KEY } from "./plugin";
+export type {
+  DragDropOptions,
+  DragDropState,
+} from "./useDragDrop";
+// Drag and drop composable
+export { useDragDrop } from "./useDragDrop";
+
+export type {
+  FlowUploadState,
+  FlowUploadStatus,
+} from "./useFlowUpload";
+// Flow upload composables
+export { useFlowUpload } from "./useFlowUpload";
+export { useMultiFlowUpload } from "./useMultiFlowUpload";
+export type {
+  MultiUploadOptions,
+  MultiUploadState,
+  UploadItem,
+} from "./useMultiUpload";
+export { useMultiUpload } from "./useMultiUpload";
+export type {
+  ChunkMetrics,
+  PerformanceInsights,
+  UploadInput,
+  UploadMetrics,
+  UploadSessionMetrics,
+  UploadState,
+  UploadStatus,
+} from "./useUpload";
+// Upload composables
+export { useUpload } from "./useUpload";
+export type { UseUploadistaClientReturn } from "./useUploadistaClient";
+// Core client composable
+export { useUploadistaClient } from "./useUploadistaClient";
+export type {
+  FileUploadMetrics,
+  UseUploadMetricsOptions,
+} from "./useUploadMetrics";
+// Metrics composable
+export { useUploadMetrics } from "./useUploadMetrics";

package/src/composables/plugin.ts

@@ -0,0 +1,76 @@
+import {
+  createUploadistaClient,
+  type UploadistaClientOptions,
+  type UploadistaEvent,
+} from "@uploadista/client-browser";
+import type { App, InjectionKey, Ref } from "vue";
+import { ref } from "vue";
+
+export interface UploadistaPluginOptions extends UploadistaClientOptions {
+  /**
+   * Global event handler for all upload and flow events from this client
+   */
+  onEvent?: UploadistaClientOptions["onEvent"];
+}
+
+export const UPLOADISTA_CLIENT_KEY: InjectionKey<
+  ReturnType<typeof createUploadistaClient>
+> = Symbol("uploadista-client");
+
+export const UPLOADISTA_EVENT_SUBSCRIBERS_KEY: InjectionKey<
+  Ref<Set<(event: UploadistaEvent) => void>>
+> = Symbol("uploadista-event-subscribers");
+
+/**
+ * Vue plugin for providing Uploadista client instance globally.
+ * Uses Vue's provide/inject pattern to make the client available
+ * throughout the component tree.
+ *
+ * @param options - Uploadista client configuration options
+ * @returns Vue plugin object
+ *
+ * @example
+ * ```typescript
+ * import { createApp } from 'vue';
+ * import { createUploadistaPlugin } from '@uploadista/vue';
+ * import App from './App.vue';
+ *
+ * const app = createApp(App);
+ *
+ * app.use(createUploadistaPlugin({
+ *   baseUrl: 'https://api.example.com',
+ *   storageId: 'my-storage',
+ *   chunkSize: 1024 * 1024, // 1MB
+ *   storeFingerprintForResuming: true,
+ *   onEvent: (event) => {
+ *     console.log('Upload event:', event);
+ *   }
+ * }));
+ *
+ * app.mount('#app');
+ * ```
+ */
+export function createUploadistaPlugin(options: UploadistaPluginOptions) {
+  return {
+    install(app: App) {
+      // Create a shared set of event subscribers
+      const eventSubscribers = ref(new Set<(event: UploadistaEvent) => void>());
+
+      const client = createUploadistaClient({
+        ...options,
+        onEvent: (event) => {
+          // Dispatch to all subscribers registered via subscribeToEvents
+          eventSubscribers.value.forEach((subscriber) => {
+            subscriber(event);
+          });
+
+          // Call the original onEvent handler if provided
+          options.onEvent?.(event);
+        },
+      });
+
+      app.provide(UPLOADISTA_CLIENT_KEY, client);
+      app.provide(UPLOADISTA_EVENT_SUBSCRIBERS_KEY, eventSubscribers);
+    },
+  };
+}