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

- WidgetSelect: Dropdown selection with Select component
- WidgetMultiSelect: Multiple selection with MultiSelect component
- WidgetSelectButton: Button group selection with SelectButton component
- WidgetTreeSelect: Hierarchical selection with TreeSelect component
---
 .../graph/vueWidgets/WidgetMultiSelect.vue    | 36 ++++++++++++++++++
 .../graph/vueWidgets/WidgetSelect.vue         | 30 +++++++++++++++
 .../graph/vueWidgets/WidgetSelectButton.vue   | 30 +++++++++++++++
 .../graph/vueWidgets/WidgetTreeSelect.vue     | 37 +++++++++++++++++++
 4 files changed, 133 insertions(+)
 create mode 100644 src/components/graph/vueWidgets/WidgetMultiSelect.vue
 create mode 100644 src/components/graph/vueWidgets/WidgetSelect.vue
 create mode 100644 src/components/graph/vueWidgets/WidgetSelectButton.vue
 create mode 100644 src/components/graph/vueWidgets/WidgetTreeSelect.vue

diff --git a/src/components/graph/vueWidgets/WidgetMultiSelect.vue b/src/components/graph/vueWidgets/WidgetMultiSelect.vue
new file mode 100644
index 000000000..5d81776f9
--- /dev/null
+++ b/src/components/graph/vueWidgets/WidgetMultiSelect.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <MultiSelect v-model="value" v-bind="filteredProps" :disabled="readonly" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import MultiSelect from 'primevue/multiselect'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const value = defineModel<any[]>({ required: true })
+
+const props = defineProps<{
+  widget: SimplifiedWidget<any[]>
+  readonly?: boolean
+}>()
+
+// MultiSelect specific excluded props include overlay styles
+const MULTISELECT_EXCLUDED_PROPS = [
+  ...PANEL_EXCLUDED_PROPS,
+  'overlayStyle'
+] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, MULTISELECT_EXCLUDED_PROPS)
+)
+</script>
diff --git a/src/components/graph/vueWidgets/WidgetSelect.vue b/src/components/graph/vueWidgets/WidgetSelect.vue
new file mode 100644
index 000000000..94286b153
--- /dev/null
+++ b/src/components/graph/vueWidgets/WidgetSelect.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>
+    <Select v-model="value" v-bind="filteredProps" :disabled="readonly" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Select from 'primevue/select'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const value = defineModel<any>({ required: true })
+
+const props = defineProps<{
+  widget: SimplifiedWidget<any>
+  readonly?: boolean
+}>()
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, PANEL_EXCLUDED_PROPS)
+)
+</script>
diff --git a/src/components/graph/vueWidgets/WidgetSelectButton.vue b/src/components/graph/vueWidgets/WidgetSelectButton.vue
new file mode 100644
index 000000000..6523bc21c
--- /dev/null
+++ b/src/components/graph/vueWidgets/WidgetSelectButton.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>
+    <SelectButton v-model="value" v-bind="filteredProps" :disabled="readonly" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import SelectButton from 'primevue/selectbutton'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const value = defineModel<any>({ required: true })
+
+const props = defineProps<{
+  widget: SimplifiedWidget<any>
+  readonly?: boolean
+}>()
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+</script>
diff --git a/src/components/graph/vueWidgets/WidgetTreeSelect.vue b/src/components/graph/vueWidgets/WidgetTreeSelect.vue
new file mode 100644
index 000000000..412cda05e
--- /dev/null
+++ b/src/components/graph/vueWidgets/WidgetTreeSelect.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <TreeSelect v-model="value" v-bind="filteredProps" :disabled="readonly" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TreeSelect from 'primevue/treeselect'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const value = defineModel<any>({ required: true })
+
+const props = defineProps<{
+  widget: SimplifiedWidget<any>
+  readonly?: boolean
+}>()
+
+// TreeSelect specific excluded props
+const TREE_SELECT_EXCLUDED_PROPS = [
+  ...PANEL_EXCLUDED_PROPS,
+  'inputClass',
+  'inputStyle'
+] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, TREE_SELECT_EXCLUDED_PROPS)
+)
+</script>