feat: v3 style of node body (#5169)

* feat: v3 style of node body

* Update src/renderer/extensions/vueNodes/components/LGraphNode.vue

* fix: review's issues

* fix: review's issue

src/components/graph/vueWidgets/WidgetInputText.vue

@@ -1,17 +1,14 @@
 <template>
-  <div class="flex items-center justify-between gap-4">
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
+  <WidgetLayoutField :widget="widget">
     <InputText
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
-      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      class="w-full text-xs"
       size="small"
       @update:model-value="onChange"
     />
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -19,6 +16,7 @@ import InputText from 'primevue/inputtext'
 import { computed } from 'vue'
 
 import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
+import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   INPUT_EXCLUDED_PROPS,

src/components/graph/vueWidgets/WidgetMultiSelect.vue

@@ -1,20 +1,17 @@
 <template>
-  <div class="flex items-center justify-between gap-4">
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
+  <WidgetLayoutField :widget="widget">
     <MultiSelect
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
-      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      class="w-full text-xs"
       size="small"
       :pt="{
         option: 'text-xs'
       }"
       @update:model-value="onChange"
     />
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -22,6 +19,7 @@ import MultiSelect from 'primevue/multiselect'
 import { computed } from 'vue'
 
 import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   PANEL_EXCLUDED_PROPS,

src/components/graph/vueWidgets/WidgetSlider.vue

@@ -1,14 +1,11 @@
 <template>
-  <div class="flex items-center gap-4" :style="{ height: widgetHeight + 'px' }">
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
-    <div class="flex items-center gap-2 flex-1 justify-end">
+  <WidgetLayoutField :widget="widget">
+    <div class="flex items-center gap-2 w-full">
       <Slider
         v-model="localValue"
         v-bind="filteredProps"
         :disabled="readonly"
-        class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+        class="flex-grow text-xs"
         @update:model-value="onChange"
       />
       <InputText
@@ -24,7 +21,7 @@
         @keydown="handleInputKeydown"
       />
     </div>
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -33,14 +30,13 @@ import Slider from 'primevue/slider'
 import { computed, ref, watch } from 'vue'
 
 import { useNumberWidgetValue } from '@/composables/graph/useWidgetValue'
+import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   STANDARD_EXCLUDED_PROPS,
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-import { COMFY_VUE_NODE_DIMENSIONS } from '../../../lib/litegraph/src/litegraph'
-
 const props = defineProps<{
   widget: SimplifiedWidget<number>
   modelValue: number
@@ -58,9 +54,6 @@ const { localValue, onChange } = useNumberWidgetValue(
   emit
 )
 
-// Get widget height from litegraph constants
-const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
-
 const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
 )

src/components/graph/vueWidgets/WidgetToggleSwitch.vue

@@ -1,15 +1,12 @@
 <template>
-  <div class="flex items-center justify-between gap-4">
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
+  <WidgetLayoutField :widget="widget">
     <ToggleSwitch
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
       @update:model-value="onChange"
     />
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -17,6 +14,7 @@ import ToggleSwitch from 'primevue/toggleswitch'
 import { computed } from 'vue'
 
 import { useBooleanWidgetValue } from '@/composables/graph/useWidgetValue'
+import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   STANDARD_EXCLUDED_PROPS,

src/components/graph/vueWidgets/WidgetTreeSelect.vue

@@ -1,17 +1,14 @@
 <template>
-  <div class="flex items-center justify-between gap-4">
-    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
-      widget.name
-    }}</label>
+  <WidgetLayoutField :widget="widget">
     <TreeSelect
       v-model="localValue"
       v-bind="filteredProps"
       :disabled="readonly"
-      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      class="w-full text-xs"
       size="small"
       @update:model-value="onChange"
     />
-  </div>
+  </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
@@ -19,6 +16,7 @@ import TreeSelect from 'primevue/treeselect'
 import { computed } from 'vue'
 
 import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   PANEL_EXCLUDED_PROPS,