@uploadista/vue 0.0.20 → 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,11 +6,10 @@
  */
 
 export { default as FlowUploadList } from "./FlowUploadList.vue";
-export { default as UploadList } from "./UploadList.vue";
-export { default as UploadZone } from "./UploadZone.vue";
-
 // Flow compound components
 export * from "./flow";
+export { default as UploadList } from "./UploadList.vue";
+export { default as UploadZone } from "./UploadZone.vue";
 
 // Upload compound components
 export * from "./upload";

package/src/components/upload/Upload.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import type { UploadFile } from "@uploadista/core/types";
-import { provide, computed } from "vue";
-import { useMultiUpload, type UploadItem, type MultiUploadState } from "../../composables/useMultiUpload";
+import { computed, provide } from "vue";
+import {
+  type MultiUploadState,
+  type UploadItem,
+  useMultiUpload,
+} from "../../composables/useMultiUpload";
 import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
 
 /**
@@ -30,11 +34,18 @@ const emit = defineEmits<{
   /** 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 }];
+  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];
+  progress: [
+    item: UploadItem,
+    progress: number,
+    bytesUploaded: number,
+    totalBytes: number | null,
+  ];
 }>();
 
 const multiUpload = useMultiUpload({
@@ -43,7 +54,7 @@ const multiUpload = useMultiUpload({
   onUploadStart: (item) => emit("uploadStart", item),
   onUploadProgress: (item, progress, bytesUploaded, totalBytes) =>
     emit("progress", item, progress, bytesUploaded, totalBytes),
-  onUploadSuccess: (item, result) => {
+  onUploadSuccess: (_item, result) => {
     // In single mode, call success directly
     if (!props.multiple) {
       emit("success", result);

package/src/components/upload/UploadCancel.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
 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.",
-  );
+  throw new Error("UploadCancel must be used within an <Upload> component.");
 }
 
 const isDisabled = computed(() => !uploadContext.value.state.isUploading);

package/src/components/upload/UploadClearCompleted.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
 import type { UploadContextValue } from "./Upload.vue";
+import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
 
 const uploadContext = inject<{ value: UploadContextValue }>(UPLOAD_CONTEXT_KEY);
 if (!uploadContext) {

package/src/components/upload/UploadDropZone.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed, ref, inject } from "vue";
-import { useDragDrop, type DragDropState } from "../../composables/useDragDrop";
-import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
+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.
@@ -51,16 +51,16 @@ 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.",
-  );
+  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,
+  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",

package/src/components/upload/UploadError.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, inject } from "vue";
 import type { UploadItem } from "../../composables/useMultiUpload";
-import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
 import type { UploadContextValue } from "./Upload.vue";
+import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
 
 /**
  * Slot props for UploadError component.
@@ -20,9 +20,7 @@ export interface UploadErrorSlotProps {
 
 const uploadContext = inject<{ value: UploadContextValue }>(UPLOAD_CONTEXT_KEY);
 if (!uploadContext) {
-  throw new Error(
-    "UploadError must be used within an <Upload> component.",
-  );
+  throw new Error("UploadError must be used within an <Upload> component.");
 }
 
 const slotProps = computed<UploadErrorSlotProps>(() => {

package/src/components/upload/UploadItem.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import { computed, provide, inject } from "vue";
-import { UPLOAD_CONTEXT_KEY, UPLOAD_ITEM_CONTEXT_KEY, type UploadItemContextValue } from "./useUploadContext";
+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.
@@ -20,13 +24,11 @@ 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.",
-  );
+  throw new Error("UploadItem must be used within an <Upload> component.");
 }
 
 const item = computed(() =>
-  uploadContext.value.items.find((i) => i.id === props.id)
+  uploadContext.value.items.find((i) => i.id === props.id),
 );
 
 const itemContext = computed<UploadItemContextValue | null>(() => {

package/src/components/upload/UploadItems.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, inject } from "vue";
 import type { UploadItem } from "../../composables/useMultiUpload";
-import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
 import type { UploadContextValue } from "./Upload.vue";
+import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
 
 /**
  * Slot props for UploadItems component.
@@ -18,9 +18,7 @@ export interface UploadItemsSlotProps {
 
 const uploadContext = inject<{ value: UploadContextValue }>(UPLOAD_CONTEXT_KEY);
 if (!uploadContext) {
-  throw new Error(
-    "UploadItems must be used within an <Upload> component.",
-  );
+  throw new Error("UploadItems must be used within an <Upload> component.");
 }
 
 const slotProps = computed<UploadItemsSlotProps>(() => ({

package/src/components/upload/UploadProgress.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
 import type { UploadContextValue } from "./Upload.vue";
+import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
 
 /**
  * Slot props for UploadProgress component.
@@ -19,9 +19,7 @@ export interface UploadProgressSlotProps {
 
 const uploadContext = inject<{ value: UploadContextValue }>(UPLOAD_CONTEXT_KEY);
 if (!uploadContext) {
-  throw new Error(
-    "UploadProgress must be used within an <Upload> component.",
-  );
+  throw new Error("UploadProgress must be used within an <Upload> component.");
 }
 
 const slotProps = computed<UploadProgressSlotProps>(() => ({

package/src/components/upload/UploadReset.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { inject } from "vue";
-import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
 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.",
-  );
+  throw new Error("UploadReset must be used within an <Upload> component.");
 }
 
 const handleClick = () => {

package/src/components/upload/UploadRetry.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
 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.",
-  );
+  throw new Error("UploadRetry must be used within an <Upload> component.");
 }
 
 const isDisabled = computed(() => uploadContext.value.state.failed === 0);

package/src/components/upload/UploadStartAll.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
 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.",
-  );
+  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 idleCount = computed(
+  () =>
+    uploadContext.value.items.filter((item) => item.state.status === "idle")
+      .length,
 );
 
 const isDisabled = computed(

package/src/components/upload/UploadStatus.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
 import type { UploadContextValue } from "./Upload.vue";
+import { UPLOAD_CONTEXT_KEY } from "./useUploadContext";
 
 /**
  * Slot props for UploadStatus component.
@@ -31,9 +31,7 @@ export interface UploadStatusSlotProps {
 
 const uploadContext = inject<{ value: UploadContextValue }>(UPLOAD_CONTEXT_KEY);
 if (!uploadContext) {
-  throw new Error(
-    "UploadStatus must be used within an <Upload> component.",
-  );
+  throw new Error("UploadStatus must be used within an <Upload> component.");
 }
 
 const slotProps = computed<UploadStatusSlotProps>(() => {

package/src/components/upload/index.ts

@@ -57,46 +57,42 @@
  * ```
  */
 
+export type { UploadContextValue, UploadProps } from "./Upload.vue";
 // Root component
 export { default as Upload } from "./Upload.vue";
-export type { UploadProps, UploadContextValue } 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 { UploadDropZoneProps, UploadDropZoneSlotProps } from "./UploadDropZone.vue";
-
-// Items
-export { default as UploadItems } from "./UploadItems.vue";
-export type { UploadItemsSlotProps } from "./UploadItems.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 { UploadItemProps, UploadItemSlotProps } 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 type { UploadProgressSlotProps } from "./UploadProgress.vue";
-
-// Status
-export { default as UploadStatus } from "./UploadStatus.vue";
-export type { UploadStatusSlotProps } from "./UploadStatus.vue";
-
-// Error
-export { default as UploadError } from "./UploadError.vue";
-export type { UploadErrorSlotProps } from "./UploadError.vue";
-
-// Action components
-export { default as UploadCancel } from "./UploadCancel.vue";
-export { default as UploadRetry } from "./UploadRetry.vue";
 export { default as UploadReset } from "./UploadReset.vue";
+export { default as UploadRetry } from "./UploadRetry.vue";
 export { default as UploadStartAll } from "./UploadStartAll.vue";
-export { default as UploadClearCompleted } from "./UploadClearCompleted.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,
-  type UploadItemContextValue,
 } from "./useUploadContext";