@uploadista/vue 0.0.3

package/src/components/FlowUploadList.vue

@@ -0,0 +1,342 @@
+<script setup lang="ts">
+/**
+ * FlowUploadList - Display list of flow uploads with processing status
+ *
+ * Shows the progress and processing status of files being uploaded through flow pipelines.
+ * Supports filtering, sorting, and status-based grouping. Provides flexible slot-based
+ * customization for rendering each flow upload item.
+ *
+ * @component
+ * @example
+ * // Basic flow upload list
+ * <FlowUploadList :uploads="flowUploads" />
+ *
+ * @example
+ * // Custom item rendering with flow status
+ * <FlowUploadList :uploads="flowUploads">
+ *   <template #item="{ item, isSuccess, isError, isUploading }">
+ *     <div class="flow-item">
+ *       <span>{{ item.filename }}</span>
+ *       <progress :value="item.uploadProgress" max="100"></progress>
+ *       <span v-if="isUploading">Processing...</span>
+ *       <span v-else-if="isSuccess">Complete</span>
+ *       <span v-else-if="isError">Failed</span>
+ *     </div>
+ *   </template>
+ * </FlowUploadList>
+ *
+ * @example
+ * // With status grouping
+ * <FlowUploadList :uploads="flowUploads">
+ *   <template #default="{ itemsByStatus }">
+ *     <div v-if="itemsByStatus.uploading.length">
+ *       <h3>Uploading...</h3>
+ *       <div v-for="item of itemsByStatus.uploading" :key="item.id">
+ *         {{ item.filename }}
+ *       </div>
+ *     </div>
+ *   </template>
+ * </FlowUploadList>
+ */
+import type {
+  BrowserUploadInput,
+  FlowUploadItem,
+} from "@uploadista/client-browser";
+import { computed } from "vue";
+import { isBrowserFile } from "../utils";
+
+/**
+ * Props for the FlowUploadList component
+ * @property {FlowUploadItem[]} uploads - Array of flow 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 FlowUploadListProps {
+  /**
+   * Array of flow upload items to display
+   */
+  uploads: FlowUploadItem<BrowserUploadInput>[];
+
+  /**
+   * Optional filter for which items to display
+   */
+  filter?: (item: FlowUploadItem<BrowserUploadInput>) => boolean;
+
+  /**
+   * Optional sorting function for items
+   */
+  sortBy?: (
+    a: FlowUploadItem<BrowserUploadInput>,
+    b: FlowUploadItem<BrowserUploadInput>,
+  ) => number;
+}
+
+const props = defineProps<FlowUploadListProps>();
+
+defineSlots<{
+  item(props: {
+    item: FlowUploadItem<BrowserUploadInput>;
+    index: number;
+    isPending: boolean;
+    isUploading: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    isAborted: boolean;
+    formatFileSize: (bytes: number) => string;
+  }): any;
+  default?(props: {
+    items: FlowUploadItem<BrowserUploadInput>[];
+    itemsByStatus: {
+      pending: FlowUploadItem<BrowserUploadInput>[];
+      uploading: FlowUploadItem<BrowserUploadInput>[];
+      success: FlowUploadItem<BrowserUploadInput>[];
+      error: FlowUploadItem<BrowserUploadInput>[];
+      aborted: FlowUploadItem<BrowserUploadInput>[];
+    };
+  }): 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(() => ({
+  pending: filteredItems.value.filter((item) => item.status === "pending"),
+  uploading: filteredItems.value.filter((item) => item.status === "uploading"),
+  success: filteredItems.value.filter((item) => item.status === "success"),
+  error: filteredItems.value.filter((item) => item.status === "error"),
+  aborted: filteredItems.value.filter((item) => item.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 "pending":
+      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 "pending":
+      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="flow-upload-list">
+    <slot :items="filteredItems" :items-by-status="itemsByStatus">
+      <!-- Default rendering: simple list of flow upload items -->
+      <div
+        v-for="(item, index) in filteredItems"
+        :key="item.id"
+        class="flow-upload-list__item"
+        :class="`flow-upload-list__item--${item.status}`"
+      >
+        <slot
+          name="item"
+          :item="item"
+          :index="index"
+          :is-pending="item.status === 'pending'"
+          :is-uploading="item.status === 'uploading'"
+          :is-success="item.status === 'success'"
+          :is-error="item.status === 'error'"
+          :is-aborted="item.status === 'aborted'"
+          :format-file-size="formatFileSize"
+        >
+          <!-- Default item template -->
+          <div class="flow-upload-list__item-header">
+            <span class="flow-upload-list__item-icon">
+              {{ getStatusIcon(item.status) }}
+            </span>
+            <span class="flow-upload-list__item-name">
+              {{ isBrowserFile(item.file) ? item.file.name : 'File' }}
+            </span>
+            <span
+              class="flow-upload-list__item-status"
+              :style="{ color: getStatusColor(item.status) }"
+            >
+              {{ item.status.toUpperCase() }}
+            </span>
+          </div>
+
+          <div class="flow-upload-list__item-details">
+            <span class="flow-upload-list__item-size">
+              {{ formatFileSize(item.totalBytes) }}
+            </span>
+            <span v-if="item.jobId" class="flow-upload-list__item-job">
+              Job: {{ item.jobId.slice(0, 8) }}...
+            </span>
+          </div>
+
+          <div v-if="item.status === 'uploading'" class="flow-upload-list__item-progress">
+            <div class="flow-upload-list__progress-bar">
+              <div
+                class="flow-upload-list__progress-fill"
+                :style="{ width: `${item.progress}%` }"
+              />
+            </div>
+            <span class="flow-upload-list__progress-text">
+              {{ item.progress }}% • {{ formatFileSize(item.bytesUploaded) }} / {{ formatFileSize(item.totalBytes) }}
+            </span>
+          </div>
+
+          <div v-if="item.status === 'error' && item.error" class="flow-upload-list__item-error">
+            {{ item.error.message }}
+          </div>
+
+          <div v-if="item.status === 'success'" class="flow-upload-list__item-success">
+            Upload complete
+          </div>
+        </slot>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<style scoped>
+.flow-upload-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.flow-upload-list__item {
+  padding: 0.75rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.375rem;
+  background-color: #fff;
+}
+
+.flow-upload-list__item-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.flow-upload-list__item-icon {
+  font-size: 1rem;
+}
+
+.flow-upload-list__item-name {
+  flex: 1;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.flow-upload-list__item-status {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.flow-upload-list__item-details {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.75rem;
+  color: #666;
+  margin-bottom: 0.5rem;
+}
+
+.flow-upload-list__item-size {
+  font-weight: 500;
+}
+
+.flow-upload-list__item-job {
+  color: #999;
+  font-family: monospace;
+}
+
+.flow-upload-list__item-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.flow-upload-list__progress-bar {
+  width: 100%;
+  height: 0.375rem;
+  background-color: #e0e0e0;
+  border-radius: 0.1875rem;
+  overflow: hidden;
+}
+
+.flow-upload-list__progress-fill {
+  height: 100%;
+  background-color: #007bff;
+  transition: width 0.2s ease;
+}
+
+.flow-upload-list__progress-text {
+  font-size: 0.75rem;
+  color: #666;
+}
+
+.flow-upload-list__item-error {
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  background-color: #f8d7da;
+  color: #721c24;
+  font-size: 0.75rem;
+  border-radius: 0.25rem;
+}
+
+.flow-upload-list__item-success {
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  background-color: #d4edda;
+  color: #155724;
+  font-size: 0.75rem;
+  border-radius: 0.25rem;
+}
+</style>

package/src/components/FlowUploadZone.vue

@@ -0,0 +1,305 @@
+<script setup lang="ts">
+/**
+ * FlowUploadZone - Upload zone with flow processing pipeline
+ *
+ * Specialized upload component that uploads files through a flow pipeline for processing.
+ * Supports drag-and-drop and file picker with flow configuration. Emits events for flow
+ * completion, errors, and upload status changes.
+ *
+ * @component
+ * @example
+ * // Upload images through image processing flow
+ * <FlowUploadZone
+ *   :flow-config="{ flowId: 'image-processor' }"
+ *   accept="image/*"
+ *   @upload-complete="handleFlowResult"
+ *   @upload-error="handleError"
+ * />
+ *
+ * @example
+ * // With custom slot content
+ * <FlowUploadZone
+ *   :flow-config="{ flowId: 'image-processor' }"
+ *   @upload-complete="handleResult"
+ * >
+ *   <template #default="{ isDragging, isProcessing, progress }">
+ *     <div :class="{ processing: isProcessing }">
+ *       <p v-if="isProcessing">Processing... {{ progress }}%</p>
+ *       <p v-else-if="isDragging">Drop file here</p>
+ *       <p v-else>Drag file here for processing</p>
+ *     </div>
+ *   </template>
+ * </FlowUploadZone>
+ *
+ * @emits upload-complete - Flow processing completed with results
+ * @emits upload-error - Upload or processing failed
+ * @emits upload-start - File upload started
+ * @emits validation-error - File validation failed
+ */
+import type {
+  FlowUploadConfig,
+  FlowUploadOptions,
+} from "@uploadista/client-browser";
+import { computed, ref } from "vue";
+import { useDragDrop, useFlowUpload } from "../composables";
+
+/**
+ * Props for the FlowUploadZone component
+ * @property {FlowUploadConfig} flowConfig - Flow configuration with flowId
+ * @property {FlowUploadOptions} options - Additional flow upload options
+ * @property {string} accept - Accepted file types (single MIME type or extension string)
+ * @property {boolean} multiple - Allow multiple files (default: false, flow uploads are single-file)
+ * @property {boolean} disabled - Disable the upload zone (default: false)
+ * @property {number} maxFileSize - Maximum file size in bytes
+ */
+export interface FlowUploadZoneProps {
+  /**
+   * Flow configuration
+   */
+  flowConfig: FlowUploadConfig;
+
+  /**
+   * Additional flow upload options
+   */
+  options?: Omit<FlowUploadOptions, "flowConfig">;
+
+  /**
+   * Accepted file types (single MIME type or extension string)
+   */
+  accept?: string;
+
+  /**
+   * Whether to allow multiple files (currently only single file supported for flow uploads)
+   */
+  multiple?: boolean;
+
+  /**
+   * Whether the upload zone is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Maximum file size in bytes
+   */
+  maxFileSize?: number;
+}
+
+const props = withDefaults(defineProps<FlowUploadZoneProps>(), {
+  multiple: false,
+  disabled: false,
+});
+
+// biome-ignore lint/suspicious/noExplicitAny: Flow result can be any type
+const emit = defineEmits<{
+  // biome-ignore lint/suspicious/noExplicitAny: Flow result can be any type
+  "upload-complete": [result: any];
+  "upload-error": [error: Error];
+  "upload-start": [file: File];
+  "validation-error": [errors: string[]];
+}>();
+
+// biome-ignore lint/suspicious/noExplicitAny: Vue slot definition requires any
+defineSlots<{
+  // biome-ignore lint/suspicious/noExplicitAny: Vue slot definition requires any
+  default(props: {
+    isDragging: boolean;
+    isOver: boolean;
+    isUploading: boolean;
+    isProcessing: boolean;
+    progress: number;
+    status: string;
+    errors: string[];
+    openFilePicker: () => void;
+  }): any;
+}>();
+
+// Initialize flow upload
+const flowUpload = useFlowUpload({
+  ...props.options,
+  flowConfig: props.flowConfig,
+  onFlowComplete: (outputs) => {
+    emit("upload-complete", outputs);
+    props.options?.onFlowComplete?.(outputs);
+  },
+  onError: (error) => {
+    emit("upload-error", error);
+    props.options?.onError?.(error);
+  },
+});
+
+// Handle files received from drag-drop or file picker
+const handleFilesReceived = (files: File[]) => {
+  const file = files[0];
+  if (file) {
+    emit("upload-start", file);
+    flowUpload.upload(file);
+  }
+};
+
+// Handle validation errors
+const handleValidationError = (errors: string[]) => {
+  emit("validation-error", errors);
+};
+
+// Initialize drag-drop
+const dragDrop = useDragDrop({
+  accept: props.accept ? [props.accept] : undefined,
+  multiple: props.multiple,
+  maxFileSize: props.maxFileSize,
+  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,
+);
+</script>
+
+<template>
+  <div
+    class="flow-upload-zone"
+    :class="{
+      'flow-upload-zone--active': isActive,
+      'flow-upload-zone--disabled': disabled,
+      'flow-upload-zone--uploading': flowUpload.isUploading.value
+    }"
+    @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="Upload file with flow processing"
+    @keydown.enter="openFilePicker"
+    @keydown.space.prevent="openFilePicker"
+  >
+    <slot
+      :is-dragging="dragDrop.state.value.isDragging"
+      :is-over="dragDrop.state.value.isOver"
+      :is-uploading="flowUpload.isUploading.value"
+      :is-processing="flowUpload.isProcessing.value"
+      :progress="flowUpload.state.value.progress"
+      :status="flowUpload.state.value.status"
+      :errors="[...dragDrop.state.value.errors]"
+      :open-file-picker="openFilePicker"
+    >
+      <!-- Default slot content -->
+      <div class="flow-upload-zone__content">
+        <p v-if="dragDrop.state.value.isDragging">Drop file here...</p>
+        <p v-else-if="flowUpload.isUploading.value">
+          Uploading... {{ flowUpload.state.value.progress }}%
+        </p>
+        <p v-else-if="flowUpload.isProcessing.value">
+          Processing...
+          <span v-if="flowUpload.state.value.currentNodeName">
+            ({{ flowUpload.state.value.currentNodeName }})
+          </span>
+        </p>
+        <p v-else-if="flowUpload.state.value.status === 'success'">Upload complete!</p>
+        <p v-else-if="flowUpload.state.value.status === 'error'" class="flow-upload-zone__error">
+          Error: {{ flowUpload.state.value.error?.message }}
+        </p>
+        <p v-else>Drag a file here or click to select</p>
+
+        <div v-if="flowUpload.isUploading.value" class="flow-upload-zone__progress">
+          <div class="flow-upload-zone__progress-bar">
+            <div
+              class="flow-upload-zone__progress-fill"
+              :style="{ width: `${flowUpload.state.value.progress}%` }"
+            />
+          </div>
+        </div>
+
+        <div v-if="dragDrop.state.value.errors.length > 0" class="flow-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>
+.flow-upload-zone {
+  cursor: pointer;
+  user-select: none;
+}
+
+.flow-upload-zone--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.flow-upload-zone--uploading {
+  pointer-events: none;
+}
+
+.flow-upload-zone__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.flow-upload-zone__error {
+  color: #dc3545;
+}
+
+.flow-upload-zone__progress {
+  width: 100%;
+  max-width: 300px;
+  margin-top: 0.5rem;
+}
+
+.flow-upload-zone__progress-bar {
+  width: 100%;
+  height: 0.5rem;
+  background-color: #e0e0e0;
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.flow-upload-zone__progress-fill {
+  height: 100%;
+  background-color: #007bff;
+  transition: width 0.2s ease;
+}
+
+.flow-upload-zone__errors {
+  margin-top: 0.5rem;
+  color: #dc3545;
+  font-size: 0.875rem;
+}
+
+.flow-upload-zone__errors p {
+  margin: 0.25rem 0;
+}
+</style>