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

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>