From 2f3b0d8db4c96706347cfc0463fb29ecd485fb9e Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Tue, 24 Jun 2025 12:32:54 -0700
Subject: [PATCH] [feat] Add Vue input widgets

- WidgetInputText: Single-line text input with InputText component
- WidgetTextarea: Multi-line text input with Textarea component
- WidgetSlider: Numeric range input with Slider component
- WidgetToggleSwitch: Boolean toggle with ToggleSwitch component
---
 .../graph/vueWidgets/WidgetInputText.vue      | 30 +++++++++++++++++++
 .../graph/vueWidgets/WidgetSlider.vue         | 30 +++++++++++++++++++
 .../graph/vueWidgets/WidgetTextarea.vue       | 30 +++++++++++++++++++
 .../graph/vueWidgets/WidgetToggleSwitch.vue   | 30 +++++++++++++++++++
 4 files changed, 120 insertions(+)
 create mode 100644 src/components/graph/vueWidgets/WidgetInputText.vue
 create mode 100644 src/components/graph/vueWidgets/WidgetSlider.vue
 create mode 100644 src/components/graph/vueWidgets/WidgetTextarea.vue
 create mode 100644 src/components/graph/vueWidgets/WidgetToggleSwitch.vue

diff --git a/src/components/graph/vueWidgets/WidgetInputText.vue b/src/components/graph/vueWidgets/WidgetInputText.vue
new file mode 100644
index 000000000..462957335
--- /dev/null
+++ b/src/components/graph/vueWidgets/WidgetInputText.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <InputText v-model="value" v-bind="filteredProps" :disabled="readonly" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import InputText from 'primevue/inputtext'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  INPUT_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const value = defineModel<string>({ required: true })
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  readonly?: boolean
+}>()
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
+)
+</script>
diff --git a/src/components/graph/vueWidgets/WidgetSlider.vue b/src/components/graph/vueWidgets/WidgetSlider.vue
new file mode 100644
index 000000000..e7f2ece3e
--- /dev/null
+++ b/src/components/graph/vueWidgets/WidgetSlider.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <Slider v-model="value" v-bind="filteredProps" :disabled="readonly" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Slider from 'primevue/slider'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const value = defineModel<number>({ required: true })
+
+const props = defineProps<{
+  widget: SimplifiedWidget<number>
+  readonly?: boolean
+}>()
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+</script>
diff --git a/src/components/graph/vueWidgets/WidgetTextarea.vue b/src/components/graph/vueWidgets/WidgetTextarea.vue
new file mode 100644
index 000000000..e6ba1730f
--- /dev/null
+++ b/src/components/graph/vueWidgets/WidgetTextarea.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <Textarea v-model="value" v-bind="filteredProps" :disabled="readonly" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Textarea from 'primevue/textarea'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  INPUT_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const value = defineModel<string>({ required: true })
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  readonly?: boolean
+}>()
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
+)
+</script>
diff --git a/src/components/graph/vueWidgets/WidgetToggleSwitch.vue b/src/components/graph/vueWidgets/WidgetToggleSwitch.vue
new file mode 100644
index 000000000..e74203b7c
--- /dev/null
+++ b/src/components/graph/vueWidgets/WidgetToggleSwitch.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <ToggleSwitch v-model="value" v-bind="filteredProps" :disabled="readonly" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ToggleSwitch from 'primevue/toggleswitch'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const value = defineModel<boolean>({ required: true })
+
+const props = defineProps<{
+  widget: SimplifiedWidget<boolean>
+  readonly?: boolean
+}>()
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+</script>