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

package/src/components/upload/UploadStartAll.vue

@@ -0,0 +1,30 @@
+<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("UploadStartAll must be used within an <Upload> component.");
+}
+
+const idleCount = computed(
+  () =>
+    uploadContext.value.items.filter((item) => item.state.status === "idle")
+      .length,
+);
+
+const isDisabled = computed(
+  () => uploadContext.value.state.isUploading || idleCount.value === 0,
+);
+
+const handleClick = () => {
+  uploadContext.value.startAll();
+};
+</script>
+
+<template>
+  <button type="button" :disabled="isDisabled" @click="handleClick">
+    <slot />
+  </button>
+</template>

package/src/components/upload/UploadStatus.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import type { UploadContextValue } from "./Upload.vue";
+import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
+
+/**
+ * Slot props for UploadStatus component.
+ */
+export interface UploadStatusSlotProps {
+  /** Overall status */
+  status: "idle" | "uploading" | "success" | "error";
+  /** Whether idle (no uploads active or completed) */
+  isIdle: boolean;
+  /** Whether uploading */
+  isUploading: boolean;
+  /** Whether all uploads succeeded */
+  isSuccess: boolean;
+  /** Whether any upload failed */
+  isError: boolean;
+  /** Whether all uploads completed (success or failure) */
+  isComplete: boolean;
+  /** Number of total items */
+  total: number;
+  /** Number of successful uploads */
+  successful: number;
+  /** Number of failed uploads */
+  failed: number;
+  /** Number of currently uploading */
+  uploading: number;
+}
+
+const uploadContext = inject<{ value: UploadContextValue }>(UPLOAD_CONTEXT_KEY);
+if (!uploadContext) {
+  throw new Error("UploadStatus must be used within an <Upload> component.");
+}
+
+const slotProps = computed<UploadStatusSlotProps>(() => {
+  const state = uploadContext.value.state;
+
+  // Derive overall status
+  let status: "idle" | "uploading" | "success" | "error" = "idle";
+  if (state.isUploading) {
+    status = "uploading";
+  } else if (state.isComplete) {
+    status = state.failed > 0 ? "error" : "success";
+  }
+
+  return {
+    status,
+    isIdle: status === "idle",
+    isUploading: state.isUploading,
+    isSuccess: state.isComplete && state.failed === 0,
+    isError: state.failed > 0,
+    isComplete: state.isComplete,
+    total: state.total,
+    successful: state.successful,
+    failed: state.failed,
+    uploading: state.uploading,
+  };
+});
+</script>
+
+<template>
+  <slot v-bind="slotProps" />
+</template>

package/src/components/upload/index.ts

@@ -0,0 +1,98 @@
+/**
+ * Vue 3 Upload Compound Components for Uploadista
+ *
+ * These components provide a composable, headless API for building upload interfaces.
+ * They use Vue's provide/inject for context and scoped slots for complete UI control.
+ *
+ * @example Simple Drop Zone (Single File)
+ * ```vue
+ * <template>
+ *   <Upload @success="handleSuccess">
+ *     <UploadDropZone accept="image/*" v-slot="{ isDragging, dragHandlers, inputProps, onInputChange, openFilePicker }">
+ *       <div v-bind="dragHandlers" @click="openFilePicker">
+ *         <input type="file" v-bind="inputProps" @change="onInputChange" style="display: none" />
+ *         {{ isDragging ? 'Drop here' : 'Drag or click' }}
+ *       </div>
+ *     </UploadDropZone>
+ *     <UploadProgress v-slot="{ progress, isUploading }">
+ *       <progress v-if="isUploading" :value="progress" max="100" />
+ *     </UploadProgress>
+ *   </Upload>
+ * </template>
+ *
+ * <script setup>
+ * import { Upload, UploadDropZone, UploadProgress } from '@uploadista/vue'
+ *
+ * const handleSuccess = (result) => {
+ *   console.log('Upload complete:', result)
+ * }
+ * </script>
+ * ```
+ *
+ * @example Multi-File Upload
+ * ```vue
+ * <template>
+ *   <Upload multiple :max-concurrent="3" @complete="handleComplete">
+ *     <UploadDropZone v-slot="{ dragHandlers, inputProps, onInputChange, openFilePicker }">
+ *       <div v-bind="dragHandlers" @click="openFilePicker">
+ *         <input type="file" v-bind="inputProps" @change="onInputChange" style="display: none" />
+ *         Drop files here
+ *       </div>
+ *     </UploadDropZone>
+ *     <UploadItems v-slot="{ items, isEmpty }">
+ *       <p v-if="isEmpty">No files</p>
+ *       <div v-else v-for="item in items" :key="item.id">
+ *         <UploadItem :id="item.id" v-slot="{ file, state, abort, remove }">
+ *           {{ file.name }}: {{ state.progress }}%
+ *           <button @click="abort">Cancel</button>
+ *           <button @click="remove">Remove</button>
+ *         </UploadItem>
+ *       </div>
+ *     </UploadItems>
+ *     <UploadStartAll>Upload All</UploadStartAll>
+ *     <UploadCancel>Cancel All</UploadCancel>
+ *     <UploadClearCompleted>Clear Completed</UploadClearCompleted>
+ *   </Upload>
+ * </template>
+ * ```
+ */
+
+export type { UploadContextValue, UploadProps } from "./Upload.vue";
+// Root component
+export { default as Upload } from "./Upload.vue";
+// Action components
+export { default as UploadCancel } from "./UploadCancel.vue";
+export { default as UploadClearCompleted } from "./UploadClearCompleted.vue";
+export type {
+  UploadDropZoneProps,
+  UploadDropZoneSlotProps,
+} from "./UploadDropZone.vue";
+// Drop zone
+export { default as UploadDropZone } from "./UploadDropZone.vue";
+export type { UploadErrorSlotProps } from "./UploadError.vue";
+// Error
+export { default as UploadError } from "./UploadError.vue";
+export type { UploadItemProps, UploadItemSlotProps } from "./UploadItem.vue";
+// Item
+export { default as UploadItem } from "./UploadItem.vue";
+export type { UploadItemsSlotProps } from "./UploadItems.vue";
+// Items
+export { default as UploadItems } from "./UploadItems.vue";
+export type { UploadProgressSlotProps } from "./UploadProgress.vue";
+// Progress
+export { default as UploadProgress } from "./UploadProgress.vue";
+export { default as UploadReset } from "./UploadReset.vue";
+export { default as UploadRetry } from "./UploadRetry.vue";
+export { default as UploadStartAll } from "./UploadStartAll.vue";
+export type { UploadStatusSlotProps } from "./UploadStatus.vue";
+// Status
+export { default as UploadStatus } from "./UploadStatus.vue";
+
+// Context hooks
+export {
+  UPLOAD_CONTEXT_KEY,
+  UPLOAD_ITEM_CONTEXT_KEY,
+  type UploadItemContextValue,
+  useUploadContext,
+  useUploadItemContext,
+} from "./useUploadContext";

package/src/components/upload/useUploadContext.ts

@@ -0,0 +1,67 @@
+import { inject } from "vue";
+import type { UploadContextValue } from "./Upload.vue";
+
+/**
+ * Injection key for the Upload context
+ */
+export const UPLOAD_CONTEXT_KEY = "uploadContext";
+
+/**
+ * Injection key for the UploadItem context
+ */
+export const UPLOAD_ITEM_CONTEXT_KEY = "uploadItemContext";
+
+/**
+ * Context value for a specific upload item within an Upload.
+ */
+export interface UploadItemContextValue {
+  /** Item ID */
+  id: string;
+  /** The file being uploaded */
+  file: File | Blob;
+  /** Current upload state */
+  state: {
+    status: string;
+    progress: number;
+    bytesUploaded: number;
+    totalBytes: number | null;
+    error: Error | null;
+    result: unknown;
+  };
+  /** Abort this upload */
+  abort: () => void;
+  /** Retry this upload */
+  retry: () => void;
+  /** Remove this item from the queue */
+  remove: () => void;
+}
+
+/**
+ * Composable to access upload context from within an Upload component.
+ * @throws Error if used outside of an Upload component
+ */
+export function useUploadContext(): UploadContextValue {
+  const context = inject<UploadContextValue>(UPLOAD_CONTEXT_KEY);
+  if (!context) {
+    throw new Error(
+      "useUploadContext must be used within an <Upload> component. " +
+        "Wrap your component tree with <Upload>",
+    );
+  }
+  return context;
+}
+
+/**
+ * Composable to access upload item context from within an UploadItem component.
+ * @throws Error if used outside of an UploadItem component
+ */
+export function useUploadItemContext(): UploadItemContextValue {
+  const context = inject<UploadItemContextValue>(UPLOAD_ITEM_CONTEXT_KEY);
+  if (!context) {
+    throw new Error(
+      "useUploadItemContext must be used within an <UploadItem> component. " +
+        'Wrap your component with <UploadItem id="...">',
+    );
+  }
+  return context;
+}

package/src/composables/eventUtils.test.ts

@@ -0,0 +1,267 @@
+import { describe, expect, it } from "vitest";
+import { isFlowEvent, isUploadEvent } from "./eventUtils";
+
+describe("eventUtils", () => {
+  describe("isFlowEvent", () => {
+    it("should return true for JobStart event", () => {
+      const event = { eventType: "job-start", jobId: "job-1" };
+      expect(isFlowEvent(event)).toBe(true);
+    });
+
+    it("should return true for JobEnd event", () => {
+      const event = { eventType: "job-end", jobId: "job-1" };
+      expect(isFlowEvent(event)).toBe(true);
+    });
+
+    it("should return true for FlowStart event", () => {
+      const event = {
+        eventType: "flow-start",
+        jobId: "job-1",
+        flowId: "flow-1",
+      };
+      expect(isFlowEvent(event)).toBe(true);
+    });
+
+    it("should return true for FlowEnd event", () => {
+      const event = {
+        eventType: "flow-end",
+        jobId: "job-1",
+        flowId: "flow-1",
+      };
+      expect(isFlowEvent(event)).toBe(true);
+    });
+
+    it("should return true for FlowError event", () => {
+      const event = {
+        eventType: "flow-error",
+        jobId: "job-1",
+        flowId: "flow-1",
+        error: "Something went wrong",
+      };
+      expect(isFlowEvent(event)).toBe(true);
+    });
+
+    it("should return true for FlowPause event", () => {
+      const event = {
+        eventType: "flow-pause",
+        jobId: "job-1",
+        flowId: "flow-1",
+      };
+      expect(isFlowEvent(event)).toBe(true);
+    });
+
+    it("should return true for FlowCancel event", () => {
+      const event = {
+        eventType: "flow-cancel",
+        jobId: "job-1",
+        flowId: "flow-1",
+      };
+      expect(isFlowEvent(event)).toBe(true);
+    });
+
+    it("should return true for NodeStart event", () => {
+      const event = {
+        eventType: "node-start",
+        jobId: "job-1",
+        flowId: "flow-1",
+        nodeId: "node-1",
+        nodeName: "input-node",
+        nodeType: "input",
+      };
+      expect(isFlowEvent(event)).toBe(true);
+    });
+
+    it("should return true for NodeEnd event", () => {
+      const event = {
+        eventType: "node-end",
+        jobId: "job-1",
+        flowId: "flow-1",
+        nodeId: "node-1",
+        nodeName: "input-node",
+      };
+      expect(isFlowEvent(event)).toBe(true);
+    });
+
+    it("should return true for NodePause event", () => {
+      const event = {
+        eventType: "node-pause",
+        jobId: "job-1",
+        flowId: "flow-1",
+        nodeId: "node-1",
+        nodeName: "input-node",
+      };
+      expect(isFlowEvent(event)).toBe(true);
+    });
+
+    it("should return true for NodeResume event", () => {
+      const event = {
+        eventType: "node-resume",
+        jobId: "job-1",
+        flowId: "flow-1",
+        nodeId: "node-1",
+        nodeName: "input-node",
+        nodeType: "input",
+      };
+      expect(isFlowEvent(event)).toBe(true);
+    });
+
+    it("should return true for NodeError event", () => {
+      const event = {
+        eventType: "node-error",
+        jobId: "job-1",
+        flowId: "flow-1",
+        nodeId: "node-1",
+        nodeName: "input-node",
+        error: "Node failed",
+      };
+      expect(isFlowEvent(event)).toBe(true);
+    });
+
+    it("should return true for NodeStream event", () => {
+      const event = {
+        eventType: "node-stream",
+        jobId: "job-1",
+        flowId: "flow-1",
+        nodeId: "node-1",
+      };
+      expect(isFlowEvent(event)).toBe(true);
+    });
+
+    it("should return true for NodeResponse event", () => {
+      const event = {
+        eventType: "node-response",
+        jobId: "job-1",
+        flowId: "flow-1",
+        nodeId: "node-1",
+        nodeName: "input-node",
+        data: {},
+      };
+      expect(isFlowEvent(event)).toBe(true);
+    });
+
+    it("should return false for upload events", () => {
+      const event = {
+        type: "upload-started",
+        data: { id: "upload-1" },
+      };
+      expect(isFlowEvent(event)).toBe(false);
+    });
+
+    it("should return false for events without eventType", () => {
+      const event = { type: "unknown" };
+      expect(isFlowEvent(event)).toBe(false);
+    });
+
+    it("should return false for unknown eventType values", () => {
+      const event = { eventType: "unknown-event" };
+      expect(isFlowEvent(event)).toBe(false);
+    });
+  });
+
+  describe("isUploadEvent", () => {
+    it("should return true for UPLOAD_STARTED event", () => {
+      const event = {
+        type: "upload-started",
+        data: { id: "upload-1", name: "test.txt", size: 100 },
+      };
+      expect(isUploadEvent(event)).toBe(true);
+    });
+
+    it("should return true for UPLOAD_PROGRESS event", () => {
+      const event = {
+        type: "upload-progress",
+        data: { id: "upload-1", progress: 50, total: 100 },
+      };
+      expect(isUploadEvent(event)).toBe(true);
+    });
+
+    it("should return true for UPLOAD_COMPLETE event", () => {
+      const event = {
+        type: "upload-complete",
+        data: { id: "upload-1", name: "test.txt", size: 100 },
+      };
+      expect(isUploadEvent(event)).toBe(true);
+    });
+
+    it("should return true for UPLOAD_FAILED event", () => {
+      const event = {
+        type: "upload-failed",
+        data: { id: "upload-1", error: "Upload failed" },
+      };
+      expect(isUploadEvent(event)).toBe(true);
+    });
+
+    it("should return true for UPLOAD_VALIDATION_SUCCESS event", () => {
+      const event = {
+        type: "upload-validation-success",
+        data: { id: "upload-1", validationType: "checksum" },
+      };
+      expect(isUploadEvent(event)).toBe(true);
+    });
+
+    it("should return true for UPLOAD_VALIDATION_FAILED event", () => {
+      const event = {
+        type: "upload-validation-failed",
+        data: {
+          id: "upload-1",
+          reason: "Checksum mismatch",
+          expected: "abc",
+          actual: "def",
+        },
+      };
+      expect(isUploadEvent(event)).toBe(true);
+    });
+
+    it("should return true for UPLOAD_VALIDATION_WARNING event", () => {
+      const event = {
+        type: "upload-validation-warning",
+        data: { id: "upload-1", message: "Warning message" },
+      };
+      expect(isUploadEvent(event)).toBe(true);
+    });
+
+    it("should return false for flow events", () => {
+      const event = {
+        eventType: "flow-start",
+        jobId: "job-1",
+        flowId: "flow-1",
+      };
+      expect(isUploadEvent(event)).toBe(false);
+    });
+
+    it("should return false for events without type", () => {
+      const event = { eventType: "flow-start" };
+      expect(isUploadEvent(event)).toBe(false);
+    });
+
+    it("should return false for unknown type values", () => {
+      const event = { type: "unknown-type" };
+      expect(isUploadEvent(event)).toBe(false);
+    });
+  });
+
+  describe("combined behavior", () => {
+    it("should not classify the same event as both flow and upload", () => {
+      const flowEvent = {
+        eventType: "flow-start",
+        jobId: "job-1",
+        flowId: "flow-1",
+      };
+      const uploadEvent = {
+        type: "upload-started",
+        data: { id: "upload-1" },
+      };
+
+      expect(isFlowEvent(flowEvent)).toBe(true);
+      expect(isUploadEvent(flowEvent)).toBe(false);
+
+      expect(isUploadEvent(uploadEvent)).toBe(true);
+      expect(isFlowEvent(uploadEvent)).toBe(false);
+    });
+
+    it("should return false for empty objects", () => {
+      expect(isFlowEvent({})).toBe(false);
+      expect(isUploadEvent({})).toBe(false);
+    });
+  });
+});

package/src/composables/eventUtils.ts

@@ -1,11 +1,11 @@
-import type { UploadistaEvent } from "@uploadista/client-browser";
 import { EventType, type FlowEvent } from "@uploadista/core/flow";
-import { UploadEventType, type UploadEvent } from "@uploadista/core/types";
+import { type UploadEvent, UploadEventType } from "@uploadista/core/types";
 
 /**
  * Type guard to check if an event is a flow event
  */
-export function isFlowEvent(event: UploadistaEvent): event is FlowEvent {
+export function isFlowEvent(event: unknown): event is FlowEvent {
+  if (typeof event !== "object" || event === null) return false;
   if (!("eventType" in event)) return false;
   const e = event as { eventType: unknown };
   return (
@@ -29,7 +29,8 @@ export function isFlowEvent(event: UploadistaEvent): event is FlowEvent {
 /**
  * Type guard to check if an event is an upload event
  */
-export function isUploadEvent(event: UploadistaEvent): event is UploadEvent {
+export function isUploadEvent(event: unknown): event is UploadEvent {
+  if (typeof event !== "object" || event === null) return false;
   if (!("type" in event)) return false;
   const e = event as { type: unknown };
   return (

package/src/composables/index.ts

@@ -1,6 +1,5 @@
 // Event composables
 export { isFlowEvent, isUploadEvent } from "./eventUtils";
-export { useUploadistaEvents } from "./useUploadistaEvents";
 export type { UseFlowEventsOptions } from "./useFlowEvents";
 export { useFlowEvents } from "./useFlowEvents";
 export type {
@@ -13,6 +12,7 @@ export type {
   UseUploadEventsOptions,
 } from "./useUploadEvents";
 export { useUploadEvents } from "./useUploadEvents";
+export { useUploadistaEvents } from "./useUploadistaEvents";
 
 // Plugin