mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-10 18:10:08 +00:00
a21c813d11
This pull request introduces improvements to widget customization and UI consistency in the application. The most notable changes are the addition of support for icon classes in widget options, updates to button rendering logic, and enhanced visual consistency for button components. Widget customization enhancements: * Added an optional `iconClass` property to the `IWidgetOptions` interface in `widgets.ts`, allowing widgets to specify custom icons. UI and rendering updates: * Updated `WidgetButton.vue` to render the widget label and, if provided, an icon using the new `iconClass` option. Also standardized button styling and label usage. * Improved button styling in `WidgetRecordAudio.vue` for better visual consistency with other components. <img width="662" height="534" alt="Screenshot 2025-11-25 at 01 36 45" src="https://github.com/user-attachments/assets/43bbe226-07fd-48be-9b98-78b08a726b1b" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6900-Style-button-widgets-2b66d73d3650818ebeadd9315a47ba0f) by [Unito](https://www.unito.io)
45 lines
1.1 KiB
Vue
45 lines
1.1 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-1">
|
|
<Button
|
|
class="text-base-foreground w-full border-0 bg-component-node-widget-background p-2"
|
|
v-bind="filteredProps"
|
|
:aria-label="widget.label"
|
|
size="small"
|
|
:text="true"
|
|
@click="handleClick"
|
|
>
|
|
{{ widget.label ?? widget.name }}
|
|
<i v-if="widget.options?.iconClass" :class="widget.options.iconClass" />
|
|
</Button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Button from 'primevue/button'
|
|
import { computed } from 'vue'
|
|
|
|
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
|
|
import {
|
|
BADGE_EXCLUDED_PROPS,
|
|
filterWidgetProps
|
|
} from '@/utils/widgetPropFilter'
|
|
|
|
// Button widgets don't have a v-model value, they trigger actions
|
|
const props = defineProps<{
|
|
widget: SimplifiedWidget<void>
|
|
}>()
|
|
|
|
// Button specific excluded props
|
|
const BUTTON_EXCLUDED_PROPS = [...BADGE_EXCLUDED_PROPS, 'iconClass'] as const
|
|
|
|
const filteredProps = computed(() =>
|
|
filterWidgetProps(props.widget.options, BUTTON_EXCLUDED_PROPS)
|
|
)
|
|
|
|
const handleClick = () => {
|
|
if (props.widget.callback) {
|
|
props.widget.callback()
|
|
}
|
|
}
|
|
</script>
|