@uploadista/vue 0.0.20-beta.5 → 0.0.20-beta.7

package/src/components/flow/FlowError.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useFlowContext } from "./useFlowContext";
+
+const flow = useFlowContext();
+
+/**
+ * Slot props provided to the default slot.
+ */
+export interface FlowErrorSlotProps {
+  /** Error object (null if no error) */
+  error: Error | null;
+  /** Whether there is an error */
+  hasError: boolean;
+  /** Error message */
+  message: string | null;
+  /** Reset the flow */
+  reset: () => void;
+}
+
+const slotProps = computed<FlowErrorSlotProps>(() => ({
+  error: flow.state.value.error,
+  hasError: flow.state.value.status === "error",
+  message: flow.state.value.error?.message ?? null,
+  reset: flow.reset,
+}));
+</script>
+
+<template>
+  <slot v-bind="slotProps">
+    <!-- Default error display -->
+    <div
+      v-if="slotProps.hasError"
+      style="padding: 1rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 0.5rem; color: #dc2626;"
+    >
+      <p style="margin: 0; font-weight: 600;">Error</p>
+      <p style="margin: 0.25rem 0 0; font-size: 0.875rem;">{{ slotProps.message }}</p>
+      <button
+        type="button"
+        @click="slotProps.reset"
+        style="margin-top: 0.75rem; padding: 0.5rem 1rem; background: #dc2626; color: white; border: none; border-radius: 0.375rem; cursor: pointer;"
+      >
+        Try Again
+      </button>
+    </div>
+  </slot>
+</template>

package/src/components/flow/FlowInput.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, provide } from "vue";
+import { useFlowContext, FLOW_INPUT_CONTEXT_KEY, type FlowInputContextValue } from "./useFlowContext";
+
+/**
+ * Props for FlowInput component.
+ */
+export interface FlowInputProps {
+  /** Input node ID */
+  nodeId: string;
+}
+
+const props = defineProps<FlowInputProps>();
+const flow = useFlowContext();
+
+// Find metadata for this input
+const metadata = computed(() =>
+  flow.inputMetadata.value?.find((m) => m.nodeId === props.nodeId)
+);
+
+// Get current value for this input
+const value = computed(() => flow.inputs.value[props.nodeId]);
+
+// Get execution state for this input
+const inputState = computed(() => flow.inputStates.value.get(props.nodeId));
+
+// Create setValue function scoped to this input
+const setValue = (newValue: unknown) => {
+  flow.setInput(props.nodeId, newValue);
+};
+
+// Create a context object with getters that access computed refs
+// This ensures reactivity works while also providing stable function references
+const contextValue: FlowInputContextValue = {
+  get nodeId() {
+    return props.nodeId;
+  },
+  get metadata() {
+    return metadata.value ?? {
+      nodeId: props.nodeId,
+      nodeName: "",
+      nodeDescription: "",
+      required: false,
+    };
+  },
+  get value() {
+    return value.value;
+  },
+  setValue,
+  get state() {
+    return inputState.value;
+  },
+};
+
+// Provide context for child components (FlowInputDropZone, etc.)
+provide(FLOW_INPUT_CONTEXT_KEY, contextValue);
+
+/**
+ * Slot props provided to the default slot.
+ */
+export interface FlowInputSlotProps {
+  /** Input node ID */
+  nodeId: string;
+  /** Input metadata from flow discovery */
+  metadata: FlowInputContextValue["metadata"] | undefined;
+  /** Current value for this input */
+  value: unknown;
+  /** Set the value for this input */
+  setValue: (value: unknown) => void;
+  /** Per-input execution state (if available) */
+  state: FlowInputContextValue["state"];
+}
+
+const slotProps = computed<FlowInputSlotProps>(() => ({
+  nodeId: props.nodeId,
+  metadata: metadata.value,
+  value: value.value,
+  setValue,
+  state: inputState.value,
+}));
+</script>
+
+<template>
+  <!-- Only render if metadata is found -->
+  <slot v-if="metadata" v-bind="slotProps" />
+</template>

package/src/components/flow/FlowInputDropZone.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useDragDrop, type DragDropState } from "../../composables/useDragDrop";
+import { useFlowInputContext } from "./useFlowContext";
+
+/**
+ * Props for FlowInputDropZone component.
+ */
+export interface FlowInputDropZoneProps {
+  /** Accepted file types (e.g., "image/*", ".pdf") */
+  accept?: string;
+  /** Maximum file size in bytes */
+  maxFileSize?: number;
+}
+
+const props = withDefaults(defineProps<FlowInputDropZoneProps>(), {
+  accept: undefined,
+  maxFileSize: undefined,
+});
+
+const input = useFlowInputContext();
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const dragDrop = useDragDrop({
+  onFilesReceived: (files) => {
+    const file = files[0];
+    if (file) {
+      // Set the input value but don't trigger upload yet
+      input.setValue(file);
+    }
+  },
+  accept: props.accept ? props.accept.split(",").map((t) => t.trim()) : undefined,
+  maxFileSize: props.maxFileSize,
+  multiple: false,
+});
+
+const openFilePicker = () => {
+  inputRef.value?.click();
+};
+
+/**
+ * Slot props provided to the default slot.
+ */
+export interface FlowInputDropZoneSlotProps {
+  /** Whether files are being dragged over */
+  isDragging: boolean;
+  /** Whether drag is over the zone */
+  isOver: boolean;
+  /** Current value for this input */
+  value: unknown;
+  /** Per-input progress (if available) */
+  progress: number;
+  /** Per-input status (if available) */
+  status: string;
+  /** Current drag-drop state */
+  dragDropState: DragDropState;
+  /** Open file picker programmatically */
+  openFilePicker: () => void;
+  /** Drag event handlers to spread on the container */
+  dragHandlers: {
+    onDragenter: (e: DragEvent) => void;
+    onDragover: (e: DragEvent) => void;
+    onDragleave: (e: DragEvent) => void;
+    onDrop: (e: DragEvent) => void;
+  };
+  /** Input props for the hidden file input */
+  inputProps: {
+    type: "file";
+    multiple: boolean;
+    accept: string | undefined;
+  };
+  /** Input change handler */
+  onInputChange: (e: Event) => void;
+  /** Ref for the file input element */
+  inputRef: typeof inputRef;
+}
+
+const slotProps = computed<FlowInputDropZoneSlotProps>(() => ({
+  isDragging: dragDrop.state.value.isDragging,
+  isOver: dragDrop.state.value.isOver,
+  value: input.value,
+  progress: input.state?.progress ?? 0,
+  status: input.state?.status ?? "idle",
+  dragDropState: dragDrop.state.value,
+  openFilePicker,
+  dragHandlers: {
+    onDragenter: dragDrop.onDragEnter,
+    onDragover: dragDrop.onDragOver,
+    onDragleave: dragDrop.onDragLeave,
+    onDrop: dragDrop.onDrop,
+  },
+  inputProps: dragDrop.inputProps.value,
+  onInputChange: dragDrop.onInputChange,
+  inputRef,
+}));
+</script>
+
+<template>
+  <slot v-bind="slotProps">
+    <!-- Default content if no slot provided -->
+    <div
+      v-bind="slotProps.dragHandlers"
+      @click="openFilePicker"
+      :style="{
+        border: slotProps.isDragging ? '2px dashed #3b82f6' : '2px dashed #d1d5db',
+        borderRadius: '0.5rem',
+        padding: '2rem',
+        textAlign: 'center',
+        cursor: 'pointer',
+        backgroundColor: slotProps.isOver ? '#eff6ff' : 'transparent',
+        transition: 'all 0.2s ease',
+      }"
+    >
+      <p v-if="slotProps.isDragging">Drop file here...</p>
+      <p v-else-if="slotProps.value instanceof File">
+        Selected: {{ (slotProps.value as File).name }}
+      </p>
+      <p v-else>Drag and drop a file here, or click to select</p>
+    </div>
+    <input
+      ref="inputRef"
+      type="file"
+      :multiple="slotProps.inputProps.multiple"
+      :accept="slotProps.inputProps.accept"
+      @change="slotProps.onInputChange"
+      style="display: none"
+    />
+  </slot>
+</template>

package/src/components/flow/FlowInputPreview.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from "vue";
+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 clear = () => {
+  input.setValue(undefined);
+};
+
+/**
+ * Slot props provided to the default slot.
+ */
+export interface FlowInputPreviewSlotProps {
+  /** Current value */
+  value: unknown;
+  /** Whether value is a File */
+  isFile: boolean;
+  /** Whether value is a URL string */
+  isUrl: boolean;
+  /** File name (if value is File) */
+  fileName: string | null;
+  /** File size in bytes (if value is File) */
+  fileSize: number | null;
+  /** Clear the input value */
+  clear: () => void;
+}
+
+const slotProps = computed<FlowInputPreviewSlotProps>(() => ({
+  value: input.value,
+  isFile: isFile.value,
+  isUrl: isUrl.value,
+  fileName: isFile.value ? (input.value as File).name : null,
+  fileSize: isFile.value ? (input.value as File).size : null,
+  clear,
+}));
+</script>
+
+<template>
+  <slot v-bind="slotProps">
+    <!-- Default preview content - only render for File or URL values -->
+    <div v-if="slotProps.isFile || slotProps.isUrl" style="display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: #f3f4f6; border-radius: 0.375rem;">
+      <div style="flex: 1; min-width: 0;">
+        <p v-if="slotProps.isFile" style="margin: 0; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+          {{ slotProps.fileName }}
+          <span v-if="slotProps.fileSize" style="color: #6b7280; margin-left: 0.25rem;">
+            ({{ (slotProps.fileSize / 1024).toFixed(1) }} KB)
+          </span>
+        </p>
+        <p v-else-if="slotProps.isUrl" style="margin: 0; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+          {{ slotProps.value }}
+        </p>
+      </div>
+      <button
+        type="button"
+        @click="clear"
+        style="padding: 0.25rem 0.5rem; background: transparent; border: none; cursor: pointer; color: #6b7280;"
+        aria-label="Clear"
+      >
+        &times;
+      </button>
+    </div>
+  </slot>
+</template>

package/src/components/flow/FlowInputUrlField.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useFlowInputContext } from "./useFlowContext";
+
+/**
+ * Props for FlowInputUrlField component.
+ */
+export interface FlowInputUrlFieldProps {
+  /** Placeholder text */
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<FlowInputUrlFieldProps>(), {
+  placeholder: "https://example.com/file",
+});
+
+const input = useFlowInputContext();
+
+// Check if value is a URL string
+const isUrl = computed(() => typeof input.value === "string");
+const urlValue = computed(() => (isUrl.value ? (input.value as string) : ""));
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  input.setValue(target.value);
+};
+</script>
+
+<template>
+  <input
+    type="url"
+    :value="urlValue"
+    @input="handleInput"
+    :placeholder="placeholder"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+// Disable attribute inheritance so we can spread them manually
+export default {
+  inheritAttrs: false,
+};
+</script>

package/src/components/flow/FlowInputs.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { FlowInputMetadata } from "../../composables/useFlow";
+import { useFlowContext } from "./useFlowContext";
+
+const flow = useFlowContext();
+
+/**
+ * Slot props provided to the default slot.
+ */
+export interface FlowInputsSlotProps {
+  /** Discovered input metadata */
+  inputs: FlowInputMetadata[];
+  /** Whether inputs are still being discovered */
+  isLoading: boolean;
+}
+
+const slotProps = computed<FlowInputsSlotProps>(() => ({
+  inputs: flow.inputMetadata.value ?? [],
+  isLoading: flow.isDiscoveringInputs.value,
+}));
+</script>
+
+<template>
+  <slot v-bind="slotProps">
+    <!-- Default loading state if no slot provided -->
+    <div v-if="slotProps.isLoading" style="padding: 1rem; text-align: center;">
+      Discovering flow inputs...
+    </div>
+    <div v-else-if="slotProps.inputs.length === 0" style="padding: 1rem; text-align: center; color: #6b7280;">
+      No inputs found for this flow.
+    </div>
+  </slot>
+</template>

package/src/components/flow/FlowProgress.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { FlowUploadStatus } from "@uploadista/client-core";
+import { useFlowContext } from "./useFlowContext";
+
+const flow = useFlowContext();
+
+/**
+ * Slot props provided to the default slot.
+ */
+export interface FlowProgressSlotProps {
+  /** Progress percentage (0-100) */
+  progress: number;
+  /** Bytes uploaded so far */
+  bytesUploaded: number;
+  /** Total bytes to upload (null if unknown) */
+  totalBytes: number | null;
+  /** Current status */
+  status: FlowUploadStatus;
+}
+
+const slotProps = computed<FlowProgressSlotProps>(() => ({
+  progress: flow.state.value.progress,
+  bytesUploaded: flow.state.value.bytesUploaded,
+  totalBytes: flow.state.value.totalBytes,
+  status: flow.state.value.status,
+}));
+</script>
+
+<template>
+  <slot v-bind="slotProps">
+    <!-- Default progress display -->
+    <div v-if="slotProps.status === 'uploading' || slotProps.status === 'processing'" style="width: 100%;">
+      <div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem; font-size: 0.875rem;">
+        <span>{{ slotProps.status === 'uploading' ? 'Uploading' : 'Processing' }}</span>
+        <span>{{ slotProps.progress.toFixed(1) }}%</span>
+      </div>
+      <div style="width: 100%; height: 0.5rem; background: #e5e7eb; border-radius: 0.25rem; overflow: hidden;">
+        <div
+          :style="{
+            width: `${slotProps.progress}%`,
+            height: '100%',
+            background: '#3b82f6',
+            transition: 'width 0.2s ease',
+          }"
+        />
+      </div>
+      <div v-if="slotProps.totalBytes" style="margin-top: 0.25rem; font-size: 0.75rem; color: #6b7280;">
+        {{ (slotProps.bytesUploaded / 1024).toFixed(0) }} KB / {{ (slotProps.totalBytes / 1024).toFixed(0) }} KB
+      </div>
+    </div>
+  </slot>
+</template>

package/src/components/flow/FlowReset.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useFlowContext } from "./useFlowContext";
+
+const flow = useFlowContext();
+
+const handleClick = () => {
+  flow.reset();
+};
+</script>
+
+<template>
+  <button
+    type="button"
+    @click="handleClick"
+    v-bind="$attrs"
+  >
+    <slot>Reset</slot>
+  </button>
+</template>
+
+<script lang="ts">
+// Disable attribute inheritance so we can spread them manually
+export default {
+  inheritAttrs: false,
+};
+</script>

package/src/components/flow/FlowStatus.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { FlowUploadStatus } from "@uploadista/client-core";
+import type { TypedOutput } from "@uploadista/core/flow";
+import { useFlowContext } from "./useFlowContext";
+
+const flow = useFlowContext();
+
+/**
+ * Slot props provided to the default slot.
+ */
+export interface FlowStatusSlotProps {
+  /** Current status */
+  status: FlowUploadStatus;
+  /** Current node being processed (if any) */
+  currentNodeName: string | null;
+  /** Current node type (if any) */
+  currentNodeType: string | null;
+  /** Error (if status is error) */
+  error: Error | null;
+  /** Job ID (if started) */
+  jobId: string | null;
+  /** Whether flow has started */
+  flowStarted: boolean;
+  /** Flow outputs (if completed) */
+  flowOutputs: TypedOutput[] | null;
+}
+
+const slotProps = computed<FlowStatusSlotProps>(() => ({
+  status: flow.state.value.status,
+  currentNodeName: flow.state.value.currentNodeName,
+  currentNodeType: flow.state.value.currentNodeType,
+  error: flow.state.value.error,
+  jobId: flow.state.value.jobId,
+  flowStarted: flow.state.value.flowStarted,
+  flowOutputs: flow.state.value.flowOutputs,
+}));
+</script>
+
+<template>
+  <slot v-bind="slotProps">
+    <!-- Default status display - only show when not idle -->
+    <div v-if="slotProps.status !== 'idle'" style="padding: 0.5rem;">
+      <p style="margin: 0; font-size: 0.875rem; color: #6b7280;">
+        Status: <strong>{{ slotProps.status }}</strong>
+      </p>
+      <p v-if="slotProps.currentNodeName" style="margin: 0.25rem 0 0; font-size: 0.75rem; color: #9ca3af;">
+        Processing: {{ slotProps.currentNodeName }}
+      </p>
+      <p v-if="slotProps.jobId" style="margin: 0.25rem 0 0; font-size: 0.75rem; color: #9ca3af;">
+        Job ID: {{ slotProps.jobId }}
+      </p>
+    </div>
+  </slot>
+</template>

package/src/components/flow/FlowSubmit.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useFlowContext } from "./useFlowContext";
+
+const flow = useFlowContext();
+
+const handleClick = () => {
+  flow.execute();
+};
+</script>
+
+<template>
+  <button
+    type="button"
+    @click="handleClick"
+    :disabled="flow.isUploading.value"
+    v-bind="$attrs"
+  >
+    <slot>Execute</slot>
+  </button>
+</template>
+
+<script lang="ts">
+// Disable attribute inheritance so we can spread them manually
+export default {
+  inheritAttrs: false,
+};
+</script>

package/src/components/flow/index.ts

@@ -0,0 +1,101 @@
+/**
+ * Vue 3 Flow Compound Components for Uploadista
+ *
+ * These components provide a composable, headless API for building flow upload interfaces.
+ * They use Vue's provide/inject for context and scoped slots for complete UI control.
+ *
+ * @example Simple Drop Zone
+ * ```vue
+ * <template>
+ *   <Flow flowId="image-optimizer" storageId="s3" @success="handleSuccess">
+ *     <FlowDropZone accept="image/*" v-slot="{ isDragging, progress, 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' }}
+ *         <progress v-if="progress > 0" :value="progress" max="100" />
+ *       </div>
+ *     </FlowDropZone>
+ *   </Flow>
+ * </template>
+ *
+ * <script setup>
+ * import { Flow, FlowDropZone } from '@uploadista/vue'
+ *
+ * const handleSuccess = (outputs) => {
+ *   console.log('Upload complete:', outputs)
+ * }
+ * </script>
+ * ```
+ *
+ * @example Multi-Input Flow
+ * ```vue
+ * <template>
+ *   <Flow flowId="video-processor" storageId="s3">
+ *     <FlowInputs v-slot="{ inputs, isLoading }">
+ *       <div v-if="isLoading">Loading...</div>
+ *       <div v-else v-for="input in inputs" :key="input.nodeId">
+ *         <FlowInput :nodeId="input.nodeId" v-slot="{ metadata }">
+ *           <label>{{ metadata.nodeName }}</label>
+ *           <FlowInputDropZone accept="video/*" v-slot="{ dragHandlers, openFilePicker }">
+ *             <div v-bind="dragHandlers" @click="openFilePicker">
+ *               Drop video here
+ *             </div>
+ *           </FlowInputDropZone>
+ *         </FlowInput>
+ *       </div>
+ *     </FlowInputs>
+ *     <FlowSubmit>Process</FlowSubmit>
+ *   </Flow>
+ * </template>
+ * ```
+ */
+
+// Root component
+export { default as Flow } from "./Flow.vue";
+export type { FlowProps, FlowContextValue } from "./Flow.vue";
+
+// Context hooks
+export {
+  useFlowContext,
+  useFlowInputContext,
+  FLOW_CONTEXT_KEY,
+  FLOW_INPUT_CONTEXT_KEY,
+  type FlowInputContextValue,
+} from "./useFlowContext";
+
+// Drop zone
+export { default as FlowDropZone } from "./FlowDropZone.vue";
+export type { FlowDropZoneProps, FlowDropZoneSlotProps } from "./FlowDropZone.vue";
+
+// Input discovery
+export { default as FlowInputs } from "./FlowInputs.vue";
+export type { FlowInputsSlotProps } from "./FlowInputs.vue";
+
+// Input context
+export { default as FlowInput } from "./FlowInput.vue";
+export type { FlowInputProps, FlowInputSlotProps } from "./FlowInput.vue";
+
+// Input primitives
+export { default as FlowInputDropZone } from "./FlowInputDropZone.vue";
+export type { FlowInputDropZoneProps, FlowInputDropZoneSlotProps } from "./FlowInputDropZone.vue";
+
+export { default as FlowInputUrlField } from "./FlowInputUrlField.vue";
+export type { FlowInputUrlFieldProps } from "./FlowInputUrlField.vue";
+
+export { default as FlowInputPreview } from "./FlowInputPreview.vue";
+export type { FlowInputPreviewSlotProps } from "./FlowInputPreview.vue";
+
+// Status primitives
+export { default as FlowProgress } from "./FlowProgress.vue";
+export type { FlowProgressSlotProps } from "./FlowProgress.vue";
+
+export { default as FlowStatus } from "./FlowStatus.vue";
+export type { FlowStatusSlotProps } from "./FlowStatus.vue";
+
+export { default as FlowError } from "./FlowError.vue";
+export type { FlowErrorSlotProps } from "./FlowError.vue";
+
+// Action primitives
+export { default as FlowSubmit } from "./FlowSubmit.vue";
+export { default as FlowCancel } from "./FlowCancel.vue";
+export { default as FlowReset } from "./FlowReset.vue";