@uploadista/vue 0.0.20-beta.9 → 0.1.0-beta.5

package/src/components/flow/Flow.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
 import type { FlowUploadOptions } from "@uploadista/client-browser";
+import type {
+  FlowUploadState,
+  FlowUploadStatus,
+  InputExecutionState,
+} from "@uploadista/client-core";
 import type { TypedOutput } from "@uploadista/core/flow";
-import { provide, computed, toRefs } from "vue";
-import { useFlow, type UseFlowReturn, type FlowInputMetadata } from "../../composables/useFlow";
-import type { FlowUploadState, FlowUploadStatus, InputExecutionState } from "@uploadista/client-core";
+import { provide } from "vue";
+import {
+  type FlowInputMetadata,
+  type UseFlowReturn,
+  useFlow,
+} from "../../composables/useFlow";
 
 /**
  * Props for the Flow root component.
@@ -27,7 +35,11 @@ const emit = defineEmits<{
   /** Called when flow fails */
   error: [error: Error];
   /** Called on upload progress */
-  progress: [uploadId: string, bytesUploaded: number, totalBytes: number | null];
+  progress: [
+    uploadId: string,
+    bytesUploaded: number,
+    totalBytes: number | null,
+  ];
   /** Called when flow completes with all outputs */
   flowComplete: [outputs: TypedOutput[]];
   /** Called when upload is aborted */

package/src/components/flow/FlowDropZone.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { useDragDrop, type DragDropState } from "../../composables/useDragDrop";
+import { type DragDropState, useDragDrop } from "../../composables/useDragDrop";
 import { useFlowContext } from "./useFlowContext";
 
 /**
@@ -28,7 +28,9 @@ const dragDrop = useDragDrop({
       flow.upload(file);
     }
   },
-  accept: props.accept ? props.accept.split(",").map((t) => t.trim()) : undefined,
+  accept: props.accept
+    ? props.accept.split(",").map((t) => t.trim())
+    : undefined,
   maxFileSize: props.maxFileSize,
   multiple: false,
 });

package/src/components/flow/FlowInput.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { computed, provide } from "vue";
-import { useFlowContext, FLOW_INPUT_CONTEXT_KEY, type FlowInputContextValue } from "./useFlowContext";
+import {
+  FLOW_INPUT_CONTEXT_KEY,
+  type FlowInputContextValue,
+  useFlowContext,
+} from "./useFlowContext";
 
 /**
  * Props for FlowInput component.
@@ -15,7 +19,7 @@ const flow = useFlowContext();
 
 // Find metadata for this input
 const metadata = computed(() =>
-  flow.inputMetadata.value?.find((m) => m.nodeId === props.nodeId)
+  flow.inputMetadata.value?.find((m) => m.nodeId === props.nodeId),
 );
 
 // Get current value for this input
@@ -36,12 +40,14 @@ const contextValue: FlowInputContextValue = {
     return props.nodeId;
   },
   get metadata() {
-    return metadata.value ?? {
-      nodeId: props.nodeId,
-      nodeName: "",
-      nodeDescription: "",
-      required: false,
-    };
+    return (
+      metadata.value ?? {
+        nodeId: props.nodeId,
+        nodeName: "",
+        nodeDescription: "",
+        required: false,
+      }
+    );
   },
   get value() {
     return value.value;

package/src/components/flow/FlowInputDropZone.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { useDragDrop, type DragDropState } from "../../composables/useDragDrop";
+import { type DragDropState, useDragDrop } from "../../composables/useDragDrop";
 import { useFlowInputContext } from "./useFlowContext";
 
 // Helper function to check if value is a File (for template use)
@@ -32,7 +32,9 @@ const dragDrop = useDragDrop({
       input.setValue(file);
     }
   },
-  accept: props.accept ? props.accept.split(",").map((t) => t.trim()) : undefined,
+  accept: props.accept
+    ? props.accept.split(",").map((t) => t.trim())
+    : undefined,
   maxFileSize: props.maxFileSize,
   multiple: false,
 });

package/src/components/flow/FlowInputPreview.vue

@@ -5,7 +5,9 @@ import { useFlowInputContext } from "./useFlowContext";
 const input = useFlowInputContext();
 
 const isFile = computed(() => input.value instanceof File);
-const isUrl = computed(() => typeof input.value === "string" && (input.value as string).length > 0);
+const isUrl = computed(
+  () => typeof input.value === "string" && (input.value as string).length > 0,
+);
 
 const clear = () => {
   input.setValue(undefined);

package/src/components/flow/FlowProgress.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import type { FlowUploadStatus } from "@uploadista/client-core";
+import { computed } from "vue";
 import { useFlowContext } from "./useFlowContext";
 
 const flow = useFlowContext();

package/src/components/flow/FlowStatus.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import type { FlowUploadStatus } from "@uploadista/client-core";
 import type { TypedOutput } from "@uploadista/core/flow";
+import { computed } from "vue";
 import { useFlowContext } from "./useFlowContext";
 
 const flow = useFlowContext();

package/src/components/flow/useFlowContext.ts

@@ -30,11 +30,13 @@ export interface FlowInputContextValue {
   /** Set the value for this input */
   setValue: (value: unknown) => void;
   /** Per-input execution state (if available) */
-  state: {
-    status: string;
-    progress: number;
-    error: Error | null;
-  } | undefined;
+  state:
+    | {
+        status: string;
+        progress: number;
+        error: Error | null;
+      }
+    | undefined;
 }
 
 /**

package/src/components/index.ts

@@ -6,8 +6,10 @@
  */
 
 export { default as FlowUploadList } from "./FlowUploadList.vue";
+// Flow compound components
+export * from "./flow";
 export { default as UploadList } from "./UploadList.vue";
 export { default as UploadZone } from "./UploadZone.vue";
 
-// Flow compound components
-export * from "./flow";
+// Upload compound components
+export * from "./upload";

package/src/components/upload/Upload.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import type { UploadFile } from "@uploadista/core/types";
+import { computed, provide } from "vue";
+import {
+  type MultiUploadState,
+  type UploadItem,
+  useMultiUpload,
+} from "../../composables/useMultiUpload";
+import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
+
+/**
+ * Props for the Upload root component.
+ */
+export interface UploadProps {
+  /** Whether to allow multiple file uploads (default: false) */
+  multiple?: boolean;
+  /** Maximum concurrent uploads (default: 3, only used in multi mode) */
+  maxConcurrent?: number;
+  /** Whether to auto-start uploads when files are received (default: true) */
+  autoStart?: boolean;
+  /** Metadata to attach to uploads */
+  metadata?: Record<string, string>;
+}
+
+const props = withDefaults(defineProps<UploadProps>(), {
+  multiple: false,
+  maxConcurrent: 3,
+  autoStart: true,
+});
+
+const emit = defineEmits<{
+  /** Called when a single file upload succeeds (single mode) */
+  success: [result: UploadFile];
+  /** Called when an upload fails */
+  error: [error: Error, item?: UploadItem];
+  /** Called when all uploads complete (multi mode) */
+  complete: [
+    results: { successful: UploadItem[]; failed: UploadItem[]; total: number },
+  ];
+  /** Called when an individual upload starts */
+  uploadStart: [item: UploadItem];
+  /** Called on upload progress */
+  progress: [
+    item: UploadItem,
+    progress: number,
+    bytesUploaded: number,
+    totalBytes: number | null,
+  ];
+}>();
+
+const multiUpload = useMultiUpload({
+  maxConcurrent: props.maxConcurrent,
+  metadata: props.metadata,
+  onUploadStart: (item) => emit("uploadStart", item),
+  onUploadProgress: (item, progress, bytesUploaded, totalBytes) =>
+    emit("progress", item, progress, bytesUploaded, totalBytes),
+  onUploadSuccess: (_item, result) => {
+    // In single mode, call success directly
+    if (!props.multiple) {
+      emit("success", result);
+    }
+  },
+  onUploadError: (item, error) => {
+    emit("error", error, item);
+  },
+  onComplete: (results) => emit("complete", results),
+});
+
+const handleFilesReceived = (files: File[]) => {
+  if (!props.multiple) {
+    // Single mode: clear existing and add new file
+    multiUpload.clearAll();
+  }
+  multiUpload.addFiles(files);
+  if (props.autoStart) {
+    // Use setTimeout to ensure state is updated before starting
+    setTimeout(() => multiUpload.startAll(), 0);
+  }
+};
+
+/**
+ * Context value provided by the Upload component root.
+ * Contains all upload state and actions.
+ */
+export interface UploadContextValue {
+  /** Whether in multi-file mode */
+  mode: "single" | "multi";
+  /** Current multi-upload state (aggregate) */
+  state: MultiUploadState;
+  /** All upload items */
+  items: readonly UploadItem[];
+  /** Whether auto-start is enabled */
+  autoStart: boolean;
+
+  /** Add files to the upload queue */
+  addFiles: (files: File[]) => void;
+  /** Remove an item from the queue */
+  removeItem: (id: string) => void;
+  /** Start all pending uploads */
+  startAll: () => void;
+  /** Abort a specific upload by ID */
+  abortUpload: (id: string) => void;
+  /** Abort all active uploads */
+  abortAll: () => void;
+  /** Retry a specific failed upload by ID */
+  retryUpload: (id: string) => void;
+  /** Retry all failed uploads */
+  retryFailed: () => void;
+  /** Clear all completed uploads */
+  clearCompleted: () => void;
+  /** Clear all items and reset state */
+  clearAll: () => void;
+
+  /** Internal handler for files received from drop zone */
+  handleFilesReceived: (files: File[]) => void;
+}
+
+// Create computed context value that updates reactively
+// Cast items to mutable array for context (the readonly is enforced at the composable level)
+const contextValue = computed<UploadContextValue>(() => ({
+  mode: props.multiple ? "multi" : "single",
+  state: multiUpload.state.value,
+  items: multiUpload.items.value as UploadItem[],
+  autoStart: props.autoStart,
+  addFiles: multiUpload.addFiles,
+  removeItem: multiUpload.removeItem,
+  startAll: multiUpload.startAll,
+  abortUpload: multiUpload.abortUpload,
+  abortAll: multiUpload.abortAll,
+  retryUpload: multiUpload.retryUpload,
+  retryFailed: multiUpload.retryFailed,
+  clearCompleted: multiUpload.clearCompleted,
+  clearAll: multiUpload.clearAll,
+  handleFilesReceived,
+}));
+
+// Provide context for child components
+provide(UPLOAD_CONTEXT_KEY, contextValue);
+
+// Expose to parent via defineExpose for programmatic access
+defineExpose(contextValue);
+</script>
+
+<template>
+  <slot />
+</template>

package/src/components/upload/UploadCancel.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import type { UploadContextValue } from "./Upload.vue";
+import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
+
+const uploadContext = inject<{ value: UploadContextValue }>(UPLOAD_CONTEXT_KEY);
+if (!uploadContext) {
+  throw new Error("UploadCancel must be used within an <Upload> component.");
+}
+
+const isDisabled = computed(() => !uploadContext.value.state.isUploading);
+
+const handleClick = () => {
+  uploadContext.value.abortAll();
+};
+</script>
+
+<template>
+  <button type="button" :disabled="isDisabled" @click="handleClick">
+    <slot />
+  </button>
+</template>

package/src/components/upload/UploadClearCompleted.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import type { UploadContextValue } from "./Upload.vue";
+import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
+
+const uploadContext = inject<{ value: UploadContextValue }>(UPLOAD_CONTEXT_KEY);
+if (!uploadContext) {
+  throw new Error(
+    "UploadClearCompleted must be used within an <Upload> component.",
+  );
+}
+
+const isDisabled = computed(() => uploadContext.value.state.completed === 0);
+
+const handleClick = () => {
+  uploadContext.value.clearCompleted();
+};
+</script>
+
+<template>
+  <button type="button" :disabled="isDisabled" @click="handleClick">
+    <slot />
+  </button>
+</template>

package/src/components/upload/UploadDropZone.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, inject, ref } from "vue";
+import { type DragDropState, useDragDrop } from "../../composables/useDragDrop";
+import type { UploadContextValue } from "./Upload.vue";
+import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
+
+/**
+ * Props for UploadDropZone component.
+ */
+export interface UploadDropZoneProps {
+  /** Accepted file types (e.g., "image/*", ".pdf") */
+  accept?: string;
+  /** Maximum file size in bytes */
+  maxFileSize?: number;
+  /** Maximum number of files (only in multi mode) */
+  maxFiles?: number;
+}
+
+/**
+ * Slot props for UploadDropZone component.
+ */
+export interface UploadDropZoneSlotProps {
+  /** Whether files are being dragged over */
+  isDragging: boolean;
+  /** Whether drag is over the zone */
+  isOver: boolean;
+  /** Validation errors */
+  errors: readonly string[];
+  /** Drag event handlers to bind to the drop zone element */
+  dragHandlers: {
+    onDragenter: (event: DragEvent) => void;
+    onDragover: (event: DragEvent) => void;
+    onDragleave: (event: DragEvent) => void;
+    onDrop: (event: DragEvent) => void;
+  };
+  /** Input props for the hidden file input */
+  inputProps: {
+    type: "file";
+    multiple: boolean;
+    accept: string | undefined;
+  };
+  /** Handler for input change event */
+  onInputChange: (event: Event) => void;
+  /** Open file picker programmatically */
+  openFilePicker: () => void;
+  /** Current drag-drop state */
+  dragDropState: DragDropState;
+}
+
+const props = defineProps<UploadDropZoneProps>();
+
+const uploadContext = inject<{ value: UploadContextValue }>(UPLOAD_CONTEXT_KEY);
+if (!uploadContext) {
+  throw new Error("UploadDropZone must be used within an <Upload> component.");
+}
+
+const inputRef = ref<HTMLInputElement>();
+
+const dragDrop = useDragDrop({
+  onFilesReceived: (files) => uploadContext.value.handleFilesReceived(files),
+  accept: props.accept
+    ? props.accept.split(",").map((t) => t.trim())
+    : undefined,
+  maxFileSize: props.maxFileSize,
+  maxFiles: uploadContext.value.mode === "multi" ? props.maxFiles : 1,
+  multiple: uploadContext.value.mode === "multi",
+});
+
+const openFilePicker = () => {
+  inputRef.value?.click();
+};
+
+const slotProps = computed<UploadDropZoneSlotProps>(() => ({
+  isDragging: dragDrop.state.value.isDragging,
+  isOver: dragDrop.state.value.isOver,
+  errors: dragDrop.state.value.errors,
+  dragHandlers: {
+    onDragenter: dragDrop.onDragEnter,
+    onDragover: dragDrop.onDragOver,
+    onDragleave: dragDrop.onDragLeave,
+    onDrop: dragDrop.onDrop,
+  },
+  inputProps: dragDrop.inputProps.value,
+  onInputChange: dragDrop.onInputChange,
+  openFilePicker,
+  dragDropState: dragDrop.state.value,
+}));
+
+defineExpose({ inputRef });
+</script>
+
+<template>
+  <slot v-bind="slotProps">
+    <!-- Default slot content if none provided -->
+  </slot>
+</template>

package/src/components/upload/UploadError.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import type { UploadItem } from "../../composables/useMultiUpload";
+import type { UploadContextValue } from "./Upload.vue";
+import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
+
+/**
+ * Slot props for UploadError component.
+ */
+export interface UploadErrorSlotProps {
+  /** Whether there are any errors */
+  hasError: boolean;
+  /** Number of failed uploads */
+  failedCount: number;
+  /** Failed items */
+  failedItems: readonly UploadItem[];
+  /** Reset/clear all errors */
+  reset: () => void;
+}
+
+const uploadContext = inject<{ value: UploadContextValue }>(UPLOAD_CONTEXT_KEY);
+if (!uploadContext) {
+  throw new Error("UploadError must be used within an <Upload> component.");
+}
+
+const slotProps = computed<UploadErrorSlotProps>(() => {
+  const failedItems = uploadContext.value.items.filter((item) =>
+    ["error", "aborted"].includes(item.state.status),
+  );
+
+  return {
+    hasError: failedItems.length > 0,
+    failedCount: failedItems.length,
+    failedItems,
+    reset: uploadContext.value.clearCompleted,
+  };
+});
+</script>
+
+<template>
+  <slot v-bind="slotProps" />
+</template>

package/src/components/upload/UploadItem.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed, inject, provide } from "vue";
+import type { UploadContextValue } from "./Upload.vue";
+import {
+  UPLOAD_CONTEXT_KEY,
+  UPLOAD_ITEM_CONTEXT_KEY,
+  type UploadItemContextValue,
+} from "./useUploadContext";
+
+/**
+ * Props for UploadItem component.
+ */
+export interface UploadItemProps {
+  /** Item ID */
+  id: string;
+}
+
+/**
+ * Slot props for UploadItem component.
+ */
+export interface UploadItemSlotProps extends UploadItemContextValue {}
+
+const props = defineProps<UploadItemProps>();
+
+const uploadContext = inject<{ value: UploadContextValue }>(UPLOAD_CONTEXT_KEY);
+if (!uploadContext) {
+  throw new Error("UploadItem must be used within an <Upload> component.");
+}
+
+const item = computed(() =>
+  uploadContext.value.items.find((i) => i.id === props.id),
+);
+
+const itemContext = computed<UploadItemContextValue | null>(() => {
+  const currentItem = item.value;
+  if (!currentItem) return null;
+
+  return {
+    id: props.id,
+    file: currentItem.file,
+    state: currentItem.state,
+    abort: () => uploadContext.value.abortUpload(props.id),
+    retry: () => uploadContext.value.retryUpload(props.id),
+    remove: () => uploadContext.value.removeItem(props.id),
+  };
+});
+
+// Provide item context for nested components
+provide(UPLOAD_ITEM_CONTEXT_KEY, itemContext);
+</script>
+
+<template>
+  <slot v-if="itemContext" v-bind="itemContext" />
+</template>

package/src/components/upload/UploadItems.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import type { UploadItem } from "../../composables/useMultiUpload";
+import type { UploadContextValue } from "./Upload.vue";
+import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
+
+/**
+ * Slot props for UploadItems component.
+ */
+export interface UploadItemsSlotProps {
+  /** All upload items */
+  items: readonly UploadItem[];
+  /** Whether there are any items */
+  hasItems: boolean;
+  /** Whether items array is empty */
+  isEmpty: boolean;
+}
+
+const uploadContext = inject<{ value: UploadContextValue }>(UPLOAD_CONTEXT_KEY);
+if (!uploadContext) {
+  throw new Error("UploadItems must be used within an <Upload> component.");
+}
+
+const slotProps = computed<UploadItemsSlotProps>(() => ({
+  items: uploadContext.value.items,
+  hasItems: uploadContext.value.items.length > 0,
+  isEmpty: uploadContext.value.items.length === 0,
+}));
+</script>
+
+<template>
+  <slot v-bind="slotProps" />
+</template>

package/src/components/upload/UploadProgress.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import type { UploadContextValue } from "./Upload.vue";
+import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
+
+/**
+ * Slot props for UploadProgress component.
+ */
+export interface UploadProgressSlotProps {
+  /** Progress percentage (0-100) */
+  progress: number;
+  /** Bytes uploaded so far */
+  bytesUploaded: number;
+  /** Total bytes to upload */
+  totalBytes: number;
+  /** Whether any uploads are active */
+  isUploading: boolean;
+}
+
+const uploadContext = inject<{ value: UploadContextValue }>(UPLOAD_CONTEXT_KEY);
+if (!uploadContext) {
+  throw new Error("UploadProgress must be used within an <Upload> component.");
+}
+
+const slotProps = computed<UploadProgressSlotProps>(() => ({
+  progress: uploadContext.value.state.progress,
+  bytesUploaded: uploadContext.value.state.totalBytesUploaded,
+  totalBytes: uploadContext.value.state.totalBytes,
+  isUploading: uploadContext.value.state.isUploading,
+}));
+</script>
+
+<template>
+  <slot v-bind="slotProps" />
+</template>

package/src/components/upload/UploadReset.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import type { UploadContextValue } from "./Upload.vue";
+import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
+
+const uploadContext = inject<{ value: UploadContextValue }>(UPLOAD_CONTEXT_KEY);
+if (!uploadContext) {
+  throw new Error("UploadReset must be used within an <Upload> component.");
+}
+
+const handleClick = () => {
+  uploadContext.value.clearAll();
+};
+</script>
+
+<template>
+  <button type="button" @click="handleClick">
+    <slot />
+  </button>
+</template>

package/src/components/upload/UploadRetry.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import type { UploadContextValue } from "./Upload.vue";
+import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
+
+const uploadContext = inject<{ value: UploadContextValue }>(UPLOAD_CONTEXT_KEY);
+if (!uploadContext) {
+  throw new Error("UploadRetry must be used within an <Upload> component.");
+}
+
+const isDisabled = computed(() => uploadContext.value.state.failed === 0);
+
+const handleClick = () => {
+  uploadContext.value.retryFailed();
+};
+</script>
+
+<template>
+  <button type="button" :disabled="isDisabled" @click="handleClick">
+    <slot />
+  </button>
+</template>