Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-25 08:49:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: v3 style of node body (#5169)

Browse Source 
* feat: v3 style of node body

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

* fix: review's issues

* fix: review's issue
This commit is contained in:
Rizumu Ayaka
2025-08-23 12:49:13 +08:00
committed by Benjamin Lu
parent 1447b15f4c
commit 57db10f408
23 changed files with 269 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
View File

@@ -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">
@@ -25,6 +22,8 @@ import {
filterWidgetProps
} from '@/utils/widgetPropFilter'
import WidgetLayoutField from './layout/WidgetLayoutField.vue'
const props = defineProps<{
widget: SimplifiedWidget<string>
modelValue: string

11
src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
View File

@@ -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">
@@ -28,6 +25,8 @@ import {
filterWidgetProps
} from '@/utils/widgetPropFilter'
import WidgetLayoutField from './layout/WidgetLayoutField.vue'
const props = defineProps<{
widget: SimplifiedWidget<any[]>
modelValue: any[]

18
src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
View File

@@ -1,24 +1,18 @@
<template>
<div
class="flex items-center justify-between gap-4"
:style="{ height: widgetHeight + 'px' }"
>
<label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
widget.name
}}</label>
<WidgetLayoutField :widget>
<Select
v-model="localValue"
:options="selectOptions"
v-bind="filteredProps"
:disabled="readonly"
class="flex-grow min-w-[8em] max-w-[20em] text-xs"
class="w-full text-xs bg-[#F9F8F4] dark-theme:bg-[#0E0E12] border-[#E1DED5] dark-theme:border-[#15161C] !rounded-lg"
size="small"
:pt="{
option: 'text-xs'
}"
@update:model-value="onChange"
/>
</div>
</WidgetLayoutField>
</template>
<script setup lang="ts">
@@ -26,13 +20,14 @@ import Select from 'primevue/select'
import { computed } from 'vue'
import { useWidgetValue } from '@/composables/graph/useWidgetValue'
import { COMFY_VUE_NODE_DIMENSIONS } from '@/lib/litegraph/src/litegraph'
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
import {
PANEL_EXCLUDED_PROPS,
filterWidgetProps
} from '@/utils/widgetPropFilter'
import WidgetLayoutField from './layout/WidgetLayoutField.vue'
const props = defineProps<{
widget: SimplifiedWidget<string | number | undefined>
modelValue: string | number | undefined
@@ -51,9 +46,6 @@ const { localValue, onChange } = useWidgetValue({
emit
})
// Get widget height from litegraph constants
const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
const filteredProps = computed(() =>
filterWidgetProps(props.widget.options, PANEL_EXCLUDED_PROPS)
)

11
src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue
View File

@@ -1,13 +1,10 @@
<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">
<SelectButton
v-model="localValue"
v-bind="filteredProps"
:disabled="readonly"
class="flex-grow min-w-[8em] max-w-[20em] text-xs"
class="w-full text-xs"
:pt="{
pcToggleButton: {
label: 'text-xs'
@@ -15,7 +12,7 @@
}"
@update:model-value="onChange"
/>
</div>
</WidgetLayoutField>
</template>
<script setup lang="ts">
@@ -29,6 +26,8 @@ import {
filterWidgetProps
} from '@/utils/widgetPropFilter'
import WidgetLayoutField from './layout/WidgetLayoutField.vue'
const props = defineProps<{
widget: SimplifiedWidget<any>
modelValue: any

21
src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue
View File

@@ -1,14 +1,13 @@
<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 rounded-lg pl-4 pr-2 bg-[#F9F8F4] dark-theme:bg-[#0E0E12] border-[#E1DED5] dark-theme:border-[#15161C] border-solid border"
>
<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
@@ -18,13 +17,13 @@
:min="widget.options?.min"
:max="widget.options?.max"
:step="stepValue"
class="w-[4em] text-center text-xs px-0"
class="w-[4em] text-center text-xs px-0 !border-none !shadow-none !bg-transparent"
size="small"
@blur="handleInputBlur"
@keydown="handleInputKeydown"
/>
</div>
</div>
</WidgetLayoutField>
</template>
<script setup lang="ts">
@@ -33,13 +32,14 @@ import Slider from 'primevue/slider'
import { computed, ref, watch } from 'vue'
import { useNumberWidgetValue } from '@/composables/graph/useWidgetValue'
import { COMFY_VUE_NODE_DIMENSIONS } from '@/lib/litegraph/src/litegraph'
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
import {
STANDARD_EXCLUDED_PROPS,
filterWidgetProps
} from '@/utils/widgetPropFilter'
import WidgetLayoutField from './layout/WidgetLayoutField.vue'
const props = defineProps<{
widget: SimplifiedWidget<number>
modelValue: number
@@ -57,9 +57,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)
)

9
src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
View File

@@ -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">
@@ -23,6 +20,8 @@ import {
filterWidgetProps
} from '@/utils/widgetPropFilter'
import WidgetLayoutField from './layout/WidgetLayoutField.vue'
const props = defineProps<{
widget: SimplifiedWidget<boolean>
modelValue: boolean

11
src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
View File

@@ -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">
@@ -25,6 +22,8 @@ import {
filterWidgetProps
} from '@/utils/widgetPropFilter'
import WidgetLayoutField from './layout/WidgetLayoutField.vue'
const props = defineProps<{
widget: SimplifiedWidget<any>
modelValue: any

28
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue Normal file
View File

@@ -0,0 +1,28 @@
<script setup lang="ts">
import { COMFY_VUE_NODE_DIMENSIONS } from '@/lib/litegraph/src/litegraph'
import { SimplifiedWidget } from '@/types/simplifiedWidget'
defineProps<{
widget: Pick<SimplifiedWidget<string | number | undefined>, 'name'>
}>()
// Get widget height from litegraph constants
const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
</script>
<template>
<div
class="flex items-center justify-between gap-2"
:style="{ height: widgetHeight + 'px' }"
>
<p
v-if="widget.name"
class="text-sm text-[#888682] dark-theme:text-[#9FA2BD] font-normal flex-1 truncate w-20"
>
{{ widget.name }}
</p>
<div class="w-75">
<slot />
</div>
</div>
</template>