From 6e04cb72b08714d15672865a46473ce498772905 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Tue, 24 Jun 2025 12:33:42 -0700
Subject: [PATCH] [feat] Add Vue action widgets

- WidgetButton: Action button with Button component and callback handling
- WidgetFileUpload: File upload interface with FileUpload component
---
 .../graph/vueWidgets/WidgetButton.vue         | 38 +++++++++++
 .../graph/vueWidgets/WidgetFileUpload.vue     | 66 +++++++++++++++++++
 2 files changed, 104 insertions(+)
 create mode 100644 src/components/graph/vueWidgets/WidgetButton.vue
 create mode 100644 src/components/graph/vueWidgets/WidgetFileUpload.vue

diff --git a/src/components/graph/vueWidgets/WidgetButton.vue b/src/components/graph/vueWidgets/WidgetButton.vue
new file mode 100644
index 0000000000..34f7eb51f9
--- /dev/null
+++ b/src/components/graph/vueWidgets/WidgetButton.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <Button v-bind="filteredProps" :disabled="readonly" @click="handleClick" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  BADGE_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+// Button widgets don't have a v-model value, they trigger actions
+const props = defineProps<{
+  widget: SimplifiedWidget<void>
+  readonly?: boolean
+}>()
+
+// Button specific excluded props
+const BUTTON_EXCLUDED_PROPS = [...BADGE_EXCLUDED_PROPS, 'iconClass'] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, BUTTON_EXCLUDED_PROPS)
+)
+
+const handleClick = () => {
+  if (!props.readonly && props.widget.callback) {
+    props.widget.callback()
+  }
+}
+</script>
diff --git a/src/components/graph/vueWidgets/WidgetFileUpload.vue b/src/components/graph/vueWidgets/WidgetFileUpload.vue
new file mode 100644
index 0000000000..b8908c734f
--- /dev/null
+++ b/src/components/graph/vueWidgets/WidgetFileUpload.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <FileUpload
+      v-bind="filteredProps"
+      :disabled="readonly"
+      @upload="handleUpload"
+      @select="handleSelect"
+      @remove="handleRemove"
+      @clear="handleClear"
+      @error="handleError"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import FileUpload from 'primevue/fileupload'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+// FileUpload doesn't have a traditional v-model, it handles files through events
+const props = defineProps<{
+  widget: SimplifiedWidget<File[] | null>
+  readonly?: boolean
+}>()
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+
+const handleUpload = (event: any) => {
+  if (!props.readonly && props.widget.callback) {
+    props.widget.callback(event.files)
+  }
+}
+
+const handleSelect = (event: any) => {
+  if (!props.readonly && props.widget.callback) {
+    props.widget.callback(event.files)
+  }
+}
+
+const handleRemove = (event: any) => {
+  if (!props.readonly && props.widget.callback) {
+    props.widget.callback(event.files)
+  }
+}
+
+const handleClear = () => {
+  if (!props.readonly && props.widget.callback) {
+    props.widget.callback([])
+  }
+}
+
+const handleError = (event: any) => {
+  // Could be extended to handle error reporting
+  console.warn('File upload error:', event)
+}
+</script>