@uploadista/vue 0.0.20 → 0.1.0-beta.5

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
 

package/src/composables/useDragDrop.test.ts

@@ -0,0 +1,304 @@
+import { describe, expect, it, vi } from "vitest";
+import {
+  createMockDragEvent,
+  createMockFile,
+  createMockInputChangeEvent,
+} from "../__tests__/setup";
+import { useDragDrop } from "./useDragDrop";
+
+describe("useDragDrop", () => {
+  describe("initial state", () => {
+    it("should have correct initial state", () => {
+      const { state } = useDragDrop();
+
+      expect(state.value.isDragging).toBe(false);
+      expect(state.value.isOver).toBe(false);
+      expect(state.value.isValid).toBe(true);
+      expect(state.value.errors).toEqual([]);
+    });
+  });
+
+  describe("drag events", () => {
+    it("should set isDragging and isOver on dragenter", () => {
+      const onDragStateChange = vi.fn();
+      const { state, onDragEnter } = useDragDrop({ onDragStateChange });
+
+      onDragEnter(createMockDragEvent("dragenter"));
+
+      expect(state.value.isDragging).toBe(true);
+      expect(state.value.isOver).toBe(true);
+      expect(onDragStateChange).toHaveBeenCalledWith(true);
+    });
+
+    it("should not trigger multiple times for nested elements", () => {
+      const onDragStateChange = vi.fn();
+      const { state, onDragEnter } = useDragDrop({ onDragStateChange });
+
+      // Multiple dragenter events (simulating nested elements)
+      onDragEnter(createMockDragEvent("dragenter"));
+      onDragEnter(createMockDragEvent("dragenter"));
+      onDragEnter(createMockDragEvent("dragenter"));
+
+      expect(state.value.isDragging).toBe(true);
+      // onDragStateChange should only be called once
+      expect(onDragStateChange).toHaveBeenCalledTimes(1);
+    });
+
+    it("should reset state on dragleave when counter reaches 0", () => {
+      const onDragStateChange = vi.fn();
+      const { state, onDragEnter, onDragLeave } = useDragDrop({
+        onDragStateChange,
+      });
+
+      // Enter twice (nested elements)
+      onDragEnter(createMockDragEvent("dragenter"));
+      onDragEnter(createMockDragEvent("dragenter"));
+
+      // Leave once - should still be dragging
+      onDragLeave(createMockDragEvent("dragleave"));
+      expect(state.value.isDragging).toBe(true);
+
+      // Leave again - now should be reset
+      onDragLeave(createMockDragEvent("dragleave"));
+      expect(state.value.isDragging).toBe(false);
+      expect(state.value.isOver).toBe(false);
+      expect(onDragStateChange).toHaveBeenLastCalledWith(false);
+    });
+
+    it("should set dropEffect on dragover", () => {
+      const { onDragOver } = useDragDrop();
+      const event = createMockDragEvent("dragover");
+
+      onDragOver(event);
+
+      expect(event.dataTransfer?.dropEffect).toBe("copy");
+    });
+  });
+
+  describe("drop handling", () => {
+    it("should process files on drop", () => {
+      const onFilesReceived = vi.fn();
+      const { state, onDragEnter, onDrop } = useDragDrop({ onFilesReceived });
+
+      const file = createMockFile("test.txt", 100, "text/plain");
+
+      onDragEnter(createMockDragEvent("dragenter"));
+      onDrop(createMockDragEvent("drop", [file]));
+
+      expect(state.value.isDragging).toBe(false);
+      expect(state.value.isOver).toBe(false);
+      expect(onFilesReceived).toHaveBeenCalledWith([file]);
+    });
+
+    it("should not call onFilesReceived when no files dropped", () => {
+      const onFilesReceived = vi.fn();
+      const { onDrop } = useDragDrop({ onFilesReceived });
+
+      onDrop(createMockDragEvent("drop", []));
+
+      expect(onFilesReceived).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("file validation", () => {
+    it("should validate file type with extension", () => {
+      const onFilesReceived = vi.fn();
+      const onValidationError = vi.fn();
+      const { state, onDrop } = useDragDrop({
+        accept: [".txt"],
+        onFilesReceived,
+        onValidationError,
+      });
+
+      const validFile = createMockFile("test.txt", 100, "text/plain");
+      onDrop(createMockDragEvent("drop", [validFile]));
+
+      expect(onFilesReceived).toHaveBeenCalledWith([validFile]);
+      expect(onValidationError).not.toHaveBeenCalled();
+      expect(state.value.isValid).toBe(true);
+    });
+
+    it("should reject invalid file types", () => {
+      const onFilesReceived = vi.fn();
+      const onValidationError = vi.fn();
+      const { state, onDrop } = useDragDrop({
+        accept: [".txt"],
+        onFilesReceived,
+        onValidationError,
+      });
+
+      const invalidFile = createMockFile("test.pdf", 100, "application/pdf");
+      onDrop(createMockDragEvent("drop", [invalidFile]));
+
+      expect(onFilesReceived).not.toHaveBeenCalled();
+      expect(onValidationError).toHaveBeenCalled();
+      expect(state.value.isValid).toBe(false);
+      expect(state.value.errors.length).toBeGreaterThan(0);
+    });
+
+    it("should validate file type with MIME wildcard", () => {
+      const onFilesReceived = vi.fn();
+      const { onDrop } = useDragDrop({
+        accept: ["image/*"],
+        onFilesReceived,
+      });
+
+      const jpgFile = createMockFile("photo.jpg", 100, "image/jpeg");
+      const pngFile = createMockFile("photo.png", 100, "image/png");
+
+      onDrop(createMockDragEvent("drop", [jpgFile]));
+      expect(onFilesReceived).toHaveBeenCalledWith([jpgFile]);
+
+      onDrop(createMockDragEvent("drop", [pngFile]));
+      expect(onFilesReceived).toHaveBeenCalledWith([pngFile]);
+    });
+
+    it("should validate max file count", () => {
+      const onValidationError = vi.fn();
+      const { state, onDrop } = useDragDrop({
+        maxFiles: 2,
+        onValidationError,
+      });
+
+      const files = [
+        createMockFile("file1.txt", 100, "text/plain"),
+        createMockFile("file2.txt", 100, "text/plain"),
+        createMockFile("file3.txt", 100, "text/plain"),
+      ];
+
+      onDrop(createMockDragEvent("drop", files));
+
+      expect(onValidationError).toHaveBeenCalled();
+      expect(state.value.errors.some((e) => e.includes("Maximum 2 files"))).toBe(
+        true,
+      );
+    });
+
+    it("should validate max file size", () => {
+      const onValidationError = vi.fn();
+      const { state, onDrop } = useDragDrop({
+        maxFileSize: 1024, // 1KB
+        onValidationError,
+      });
+
+      const largeFile = createMockFile("large.txt", 2048, "text/plain"); // 2KB
+
+      onDrop(createMockDragEvent("drop", [largeFile]));
+
+      expect(onValidationError).toHaveBeenCalled();
+      expect(
+        state.value.errors.some((e) => e.includes("exceeds maximum size")),
+      ).toBe(true);
+    });
+
+    it("should run custom validator", () => {
+      const onValidationError = vi.fn();
+      const customValidator = vi.fn((files: File[]) => {
+        if (files.some((f) => f.name.includes("bad"))) {
+          return ["File name contains 'bad'"];
+        }
+        return null;
+      });
+
+      const { state, onDrop } = useDragDrop({
+        validator: customValidator,
+        onValidationError,
+      });
+
+      const badFile = createMockFile("bad-file.txt", 100, "text/plain");
+      onDrop(createMockDragEvent("drop", [badFile]));
+
+      expect(customValidator).toHaveBeenCalledWith([badFile]);
+      expect(onValidationError).toHaveBeenCalled();
+      expect(state.value.errors).toContain("File name contains 'bad'");
+    });
+  });
+
+  describe("input change handling", () => {
+    it("should process files from input change", () => {
+      const onFilesReceived = vi.fn();
+      const { onInputChange } = useDragDrop({ onFilesReceived });
+
+      const file = createMockFile("test.txt", 100, "text/plain");
+      const event = createMockInputChangeEvent([file]);
+
+      onInputChange(event);
+
+      expect(onFilesReceived).toHaveBeenCalledWith([file]);
+    });
+
+    it("should reset input value after processing", () => {
+      const { onInputChange } = useDragDrop();
+
+      const file = createMockFile("test.txt", 100, "text/plain");
+      const event = createMockInputChangeEvent([file]);
+      const input = event.target as HTMLInputElement;
+
+      onInputChange(event);
+
+      expect(input.value).toBe("");
+    });
+  });
+
+  describe("inputProps", () => {
+    it("should provide correct input props", () => {
+      const { inputProps } = useDragDrop({
+        multiple: true,
+        accept: ["image/*", ".pdf"],
+      });
+
+      expect(inputProps.value.type).toBe("file");
+      expect(inputProps.value.multiple).toBe(true);
+      expect(inputProps.value.accept).toBe("image/*, .pdf");
+    });
+
+    it("should default multiple to true", () => {
+      const { inputProps } = useDragDrop();
+
+      expect(inputProps.value.multiple).toBe(true);
+    });
+
+    it("should handle undefined accept", () => {
+      const { inputProps } = useDragDrop();
+
+      expect(inputProps.value.accept).toBeUndefined();
+    });
+  });
+
+  describe("reset", () => {
+    it("should reset state to initial values", () => {
+      const onValidationError = vi.fn();
+      const { state, onDrop, reset } = useDragDrop({
+        accept: [".txt"],
+        onValidationError,
+      });
+
+      // Trigger validation error
+      const invalidFile = createMockFile("test.pdf", 100, "application/pdf");
+      onDrop(createMockDragEvent("drop", [invalidFile]));
+
+      expect(state.value.isValid).toBe(false);
+      expect(state.value.errors.length).toBeGreaterThan(0);
+
+      // Reset
+      reset();
+
+      expect(state.value.isDragging).toBe(false);
+      expect(state.value.isOver).toBe(false);
+      expect(state.value.isValid).toBe(true);
+      expect(state.value.errors).toEqual([]);
+    });
+  });
+
+  describe("processFiles", () => {
+    it("should allow direct file processing", () => {
+      const onFilesReceived = vi.fn();
+      const { processFiles } = useDragDrop({ onFilesReceived });
+
+      const files = [createMockFile("test.txt", 100, "text/plain")];
+      processFiles(files);
+
+      expect(onFilesReceived).toHaveBeenCalledWith(files);
+    });
+  });
+});

package/src/composables/useFlow.ts

@@ -10,10 +10,10 @@ import {
   computed,
   onMounted,
   onUnmounted,
+  type Ref,
   readonly,
   ref,
   shallowReadonly,
-  type Ref,
 } from "vue";
 import { useFlowManagerContext } from "./useFlowManagerContext";
 import { useUploadistaClient } from "./useUploadistaClient";
@@ -306,7 +306,11 @@ export function useFlow(options: FlowUploadOptions): UseFlowReturn {
         bytesAccepted: number,
         bytesTotal: number | null,
       ) => {
-        optionsRef.value.onChunkComplete?.(chunkSize, bytesAccepted, bytesTotal);
+        optionsRef.value.onChunkComplete?.(
+          chunkSize,
+          bytesAccepted,
+          bytesTotal,
+        );
       },
       onFlowComplete: (outputs: TypedOutput[]) => {
         optionsRef.value.onFlowComplete?.(outputs);

package/src/composables/useFlowManagerContext.ts

@@ -1,4 +1,8 @@
-import type { FlowManager, FlowManagerCallbacks, FlowUploadOptions } from "@uploadista/client-core";
+import type {
+  FlowManager,
+  FlowManagerCallbacks,
+  FlowUploadOptions,
+} from "@uploadista/client-core";
 import { inject } from "vue";
 
 /**

package/src/composables/useUploadEvents.ts

@@ -167,10 +167,7 @@ export function useUploadEvents(options: UseUploadEventsOptions): void {
           break;
         case UploadEventType.UPLOAD_PROGRESS:
           options.onUploadProgress?.({
-            ...(event.data as unknown as Omit<
-              UploadProgressEventData,
-              "flow"
-            >),
+            ...(event.data as unknown as Omit<UploadProgressEventData, "flow">),
             flow: flowContext,
           });
           break;