From 1dbbf201245fb7b7615c3a6cf67d1d440d361754 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Fri, 5 Sep 2025 01:54:26 +0800
Subject: [PATCH] feat: widget styles for V3 UI (#5320)

* feat: widget input text style

* feat: widget select button style

* feat: the selection style of LGraphNode

* feat(V3 UI style): color picker + file upload + input text + multi select + select + select button + slider + textarea + tree select

* feat: placeholder

* fix: filter multi select options

* fix: direct binding, no transform for select button widget
---
 .../vueNodes/components/LGraphNode.vue        |   6 +-
 .../widgets/components/WidgetColorPicker.vue  |  35 ++++--
 .../widgets/components/WidgetFileUpload.vue   |   1 +
 .../widgets/components/WidgetInputText.vue    |   4 +-
 .../widgets/components/WidgetMultiSelect.vue  |  22 +++-
 .../widgets/components/WidgetSelect.vue       |   4 +-
 .../widgets/components/WidgetSelectButton.vue |  48 ++------
 .../widgets/components/WidgetSlider.vue       |   6 +-
 .../widgets/components/WidgetTextarea.vue     |   7 +-
 .../widgets/components/WidgetTreeSelect.vue   |   4 +-
 .../components/form/FormSelectButton.vue      | 108 ++++++++++++++++++
 .../widgets/components/layout/index.ts        |  14 +++
 .../widgets/composables/useWidgetRenderer.ts  |   7 ++
 13 files changed, 205 insertions(+), 61 deletions(-)
 create mode 100644 src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
 create mode 100644 src/renderer/extensions/vueNodes/widgets/components/layout/index.ts

diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index b527b984e..4ce27f490 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -10,7 +10,8 @@
       cn(
         'bg-white dark-theme:bg-[#15161A]',
         'min-w-[445px]',
-        'lg-node absolute border-2 border-solid rounded-2xl',
+        'lg-node absolute border border-solid rounded-2xl',
+        'outline outline-transparent outline-2 hover:outline-black dark-theme:hover:outline-white',
         {
           'border-blue-500 ring-2 ring-blue-300': selected,
           'border-[#e1ded5] dark-theme:border-[#292A30]': !selected,
@@ -19,8 +20,7 @@
           'border-red-500 bg-red-50': error,
           'will-change-transform': isDragging
         },
-        lodCssClass,
-        'hover:border-green-500'
+        lodCssClass
       )
     "
     :style="[
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
index 16a3dd374..ed5f2b0ec 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
@@ -1,17 +1,24 @@
 <!-- Needs custom color picker for alpha support -->
 <template>
-  <div class="flex flex-col gap-1">
-    <label v-if="widget.name" class="text-sm opacity-80">{{
-      widget.name
-    }}</label>
-    <ColorPicker
-      v-model="localValue"
-      v-bind="filteredProps"
-      :disabled="readonly"
-      inline
-      @update:model-value="onChange"
-    />
-  </div>
+  <WidgetLayoutField :widget="widget">
+    <label
+      :class="
+        cn(WidgetInputBaseClass, 'flex items-center gap-2 w-full px-4 py-2')
+      "
+    >
+      <ColorPicker
+        v-model="localValue"
+        v-bind="filteredProps"
+        :disabled="readonly"
+        class="w-8 h-4 !rounded-full overflow-hidden border-none"
+        :pt="{
+          preview: '!w-full !h-full !border-none'
+        }"
+        @update:model-value="onChange"
+      />
+      <span class="text-xs">#{{ localValue }}</span>
+    </label>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -20,11 +27,15 @@ import { computed } from 'vue'
 
 import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
 import {
   PANEL_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import { WidgetInputBaseClass } from './layout'
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
 const props = defineProps<{
   widget: SimplifiedWidget<string>
   modelValue: string
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
index e918a4302..fd39a9eb0 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
@@ -157,6 +157,7 @@
           <Button
             label="Browse Files"
             size="small"
+            severity="secondary"
             class="text-xs"
             :disabled="readonly"
             @click="triggerFileInput"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
index 542b1163c..a515ec7cd 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
@@ -4,7 +4,7 @@
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
-      class="w-full text-xs"
+      :class="cn(WidgetInputBaseClass, 'w-full text-xs py-2 px-4')"
       size="small"
       @update:model-value="onChange"
     />
@@ -17,11 +17,13 @@ import { computed } from 'vue'
 
 import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
 import {
   INPUT_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import { WidgetInputBaseClass } from './layout'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
 const props = defineProps<{
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
index e62e6c709..c2ee71acf 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
@@ -4,8 +4,9 @@
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
-      class="w-full text-xs"
+      :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
       size="small"
+      display="chip"
       :pt="{
         option: 'text-xs'
       }"
@@ -20,11 +21,13 @@ import { computed } from 'vue'
 
 import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
 import {
   PANEL_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import { WidgetInputBaseClass } from './layout'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
 const props = defineProps<{
@@ -51,7 +54,18 @@ const MULTISELECT_EXCLUDED_PROPS = [
   'overlayStyle'
 ] as const
 
-const filteredProps = computed(() =>
-  filterWidgetProps(props.widget.options, MULTISELECT_EXCLUDED_PROPS)
-)
+const filteredProps = computed(() => {
+  const filtered = filterWidgetProps(
+    props.widget.options,
+    MULTISELECT_EXCLUDED_PROPS
+  )
+
+  // Ensure options array is available for MultiSelect
+  const values = props.widget.options?.values
+  if (values && Array.isArray(values)) {
+    filtered.options = values
+  }
+
+  return filtered
+})
 </script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
index a09a89672..d2021f617 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
@@ -5,7 +5,7 @@
       :options="selectOptions"
       v-bind="filteredProps"
       :disabled="readonly"
-      class="w-full text-xs bg-[#F9F8F4] dark-theme:bg-[#0E0E12] border-[#E1DED5] dark-theme:border-[#15161C] !rounded-lg"
+      :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
       size="small"
       :pt="{
         option: 'text-xs'
@@ -21,11 +21,13 @@ import { computed } from 'vue'
 
 import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
 import {
   PANEL_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import { WidgetInputBaseClass } from './layout'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
 const props = defineProps<{
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue
index f62dcd563..c63edcf60 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue
@@ -1,62 +1,36 @@
 <template>
   <WidgetLayoutField :widget="widget">
-    <SelectButton
+    <FormSelectButton
       v-model="localValue"
-      v-bind="filteredProps"
+      :options="widget.options?.values || []"
       :disabled="readonly"
-      class="w-full text-xs"
-      :pt="{
-        pcToggleButton: {
-          label: 'text-xs'
-        }
-      }"
+      class="w-full"
       @update:model-value="onChange"
     />
   </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
-import SelectButton from 'primevue/selectbutton'
-import { computed } from 'vue'
-
-import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-import {
-  STANDARD_EXCLUDED_PROPS,
-  filterWidgetProps
-} from '@/utils/widgetPropFilter'
 
+import FormSelectButton from './form/FormSelectButton.vue'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
 const props = defineProps<{
-  widget: SimplifiedWidget<any>
-  modelValue: any
+  widget: SimplifiedWidget<string>
+  modelValue: string
   readonly?: boolean
 }>()
 
 const emit = defineEmits<{
-  'update:modelValue': [value: any]
+  'update:modelValue': [value: string]
 }>()
 
 // Use the composable for consistent widget value handling
-const { localValue, onChange } = useWidgetValue({
-  widget: props.widget,
-  modelValue: props.modelValue,
-  defaultValue: null,
+const { localValue, onChange } = useStringWidgetValue(
+  props.widget,
+  props.modelValue,
   emit
-})
-
-const filteredProps = computed(() =>
-  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
 )
 </script>
-
-<style scoped>
-:deep(.p-selectbutton) {
-  border: 1px solid transparent;
-}
-
-:deep(.p-selectbutton:hover) {
-  border-color: currentColor;
-}
-</style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue
index 7a0674ddd..5bb53784f 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue
@@ -1,7 +1,9 @@
 <template>
   <WidgetLayoutField :widget="widget">
     <div
-      class="flex items-center gap-2 w-full rounded-lg pl-4 pr-2 bg-[#F9F8F4] dark-theme:bg-[#0E0E12] border-[#E1DED5] dark-theme:border-[#15161C] border-solid border"
+      :class="
+        cn(WidgetInputBaseClass, 'flex items-center gap-2 w-full pl-4 pr-2')
+      "
     >
       <Slider
         v-model="localValue"
@@ -33,11 +35,13 @@ import { computed, ref, watch } from 'vue'
 
 import { useNumberWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
 import {
   STANDARD_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import { WidgetInputBaseClass } from './layout'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
 const props = defineProps<{
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
index 2b994432d..157da563e 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
@@ -3,7 +3,8 @@
     v-model="localValue"
     v-bind="filteredProps"
     :disabled="readonly"
-    class="w-full text-xs"
+    :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
+    :placeholder="placeholder || widget.name || ''"
     size="small"
     rows="3"
     @update:model-value="onChange"
@@ -16,15 +17,19 @@ import { computed } from 'vue'
 
 import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
 import {
   INPUT_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import { WidgetInputBaseClass } from './layout'
+
 const props = defineProps<{
   widget: SimplifiedWidget<string>
   modelValue: string
   readonly?: boolean
+  placeholder?: string
 }>()
 
 const emit = defineEmits<{
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
index 10b1989d8..81f7a117f 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
@@ -4,7 +4,7 @@
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
-      class="w-full text-xs"
+      :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
       size="small"
       @update:model-value="onChange"
     />
@@ -17,11 +17,13 @@ import { computed } from 'vue'
 
 import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
 import {
   PANEL_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import { WidgetInputBaseClass } from './layout'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
 const props = defineProps<{
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
new file mode 100644
index 000000000..41e5f6efa
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
@@ -0,0 +1,108 @@
+<template>
+  <div
+    :class="
+      cn(
+        WidgetInputBaseClass,
+        'p-1 inline-flex justify-center items-center gap-1'
+      )
+    "
+  >
+    <button
+      v-for="(option, index) in options"
+      :key="getOptionValue(option, index)"
+      :class="
+        cn(
+          'flex-1 h-6 px-5 py-[5px] rounded flex justify-center items-center gap-1 transition-all duration-150 ease-in-out',
+          'bg-transparent border-none',
+          'text-center text-xs font-normal',
+          {
+            'bg-white': isSelected(option) && !disabled,
+            'hover:bg-zinc-200/50': !isSelected(option) && !disabled,
+            'opacity-50 cursor-not-allowed': disabled,
+            'cursor-pointer': !disabled
+          },
+          {
+            'text-neutral-900': isSelected(option) && !disabled,
+            'text-zinc-500': !isSelected(option) || disabled
+          }
+        )
+      "
+      :disabled="disabled"
+      @click="handleSelect(option)"
+    >
+      {{ getOptionLabel(option) }}
+    </button>
+  </div>
+</template>
+
+<script
+  setup
+  lang="ts"
+  generic="T extends string | number | { label: string; value: any }"
+>
+import { cn } from '@/utils/tailwindUtil'
+
+import { WidgetInputBaseClass } from '../layout'
+
+interface Props {
+  modelValue: string | null | undefined
+  options: T[] // Now using generic type instead of any[]
+  optionLabel?: string // PrimeVue compatible prop
+  optionValue?: string // PrimeVue compatible prop
+  disabled?: boolean
+}
+
+interface Emits {
+  'update:modelValue': [value: string]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false
+})
+
+const emit = defineEmits<Emits>()
+
+// handle both string/number arrays and object arrays with PrimeVue compatibility
+const getOptionValue = (option: T, index: number): string => {
+  if (typeof option === 'object' && option !== null) {
+    // Use PrimeVue optionValue prop if provided, otherwise fallback to common fields
+    const valueField = props.optionValue ?? 'value'
+    const value =
+      (option as any)[valueField] ??
+      (option as any).value ??
+      (option as any).name ??
+      (option as any).label ??
+      index
+    return String(value)
+  }
+  return String(option)
+}
+
+// for display with PrimeVue compatibility
+const getOptionLabel = (option: T): string => {
+  if (typeof option === 'object' && option !== null) {
+    // Use PrimeVue optionLabel prop if provided, otherwise fallback to common fields
+    const labelField = props.optionLabel ?? 'label'
+    return (
+      (option as any)[labelField] ??
+      (option as any).label ??
+      (option as any).name ??
+      (option as any).value ??
+      String(option)
+    )
+  }
+  return String(option)
+}
+
+const isSelected = (option: T): boolean => {
+  const optionValue = getOptionValue(option, props.options.indexOf(option))
+  return optionValue === String(props.modelValue ?? '')
+}
+
+const handleSelect = (option: T) => {
+  if (props.disabled) return
+
+  const optionValue = getOptionValue(option, props.options.indexOf(option))
+  emit('update:modelValue', optionValue)
+}
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts b/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
new file mode 100644
index 000000000..5de9f97aa
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
@@ -0,0 +1,14 @@
+export const WidgetInputBaseClass = [
+  // Background
+  'bg-zinc-500/10',
+  // Outline
+  'border-none',
+  'outline',
+  'outline-1',
+  'outline-offset-[-1px]',
+  'outline-zinc-300/10',
+  // Rounded
+  '!rounded-lg',
+  // Hover
+  'hover:outline-blue-500/80'
+].join(' ')
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.ts b/src/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.ts
index 953f93d6b..659500fb6 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.ts
@@ -23,6 +23,12 @@ const TYPE_TO_ENUM_MAP: Record<string, string> = {
   // Selection
   combo: WidgetType.COMBO,
   COMBO: WidgetType.COMBO,
+  selectbutton: WidgetType.SELECTBUTTON,
+  SELECTBUTTON: WidgetType.SELECTBUTTON,
+  multiselect: WidgetType.MULTISELECT,
+  MULTISELECT: WidgetType.MULTISELECT,
+  treeselect: WidgetType.TREESELECT,
+  TREESELECT: WidgetType.TREESELECT,
 
   // Boolean
   toggle: WidgetType.TOGGLESWITCH,
@@ -32,6 +38,7 @@ const TYPE_TO_ENUM_MAP: Record<string, string> = {
   // Multiline text
   multiline: WidgetType.TEXTAREA,
   textarea: WidgetType.TEXTAREA,
+  TEXTAREA: WidgetType.TEXTAREA,
   customtext: WidgetType.TEXTAREA,
   MARKDOWN: WidgetType.MARKDOWN,