mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-18 22:10:03 +00:00
[feat] Add Vue action widgets
- WidgetButton: Action button with Button component and callback handling - WidgetFileUpload: File upload interface with FileUpload component
This commit is contained in:
38
src/components/graph/vueWidgets/WidgetButton.vue
Normal file
38
src/components/graph/vueWidgets/WidgetButton.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label v-if="widget.name" class="text-sm opacity-80">{{
|
||||
widget.name
|
||||
}}</label>
|
||||
<Button v-bind="filteredProps" :disabled="readonly" @click="handleClick" />
|
||||
</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>
|
||||
readonly?: boolean
|
||||
}>()
|
||||
|
||||
// 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.readonly && props.widget.callback) {
|
||||
props.widget.callback()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
66
src/components/graph/vueWidgets/WidgetFileUpload.vue
Normal file
66
src/components/graph/vueWidgets/WidgetFileUpload.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label v-if="widget.name" class="text-sm opacity-80">{{
|
||||
widget.name
|
||||
}}</label>
|
||||
<FileUpload
|
||||
v-bind="filteredProps"
|
||||
:disabled="readonly"
|
||||
@upload="handleUpload"
|
||||
@select="handleSelect"
|
||||
@remove="handleRemove"
|
||||
@clear="handleClear"
|
||||
@error="handleError"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import FileUpload from 'primevue/fileupload'
|
||||
import { computed } from 'vue'
|
||||
|
||||
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
|
||||
import {
|
||||
STANDARD_EXCLUDED_PROPS,
|
||||
filterWidgetProps
|
||||
} from '@/utils/widgetPropFilter'
|
||||
|
||||
// FileUpload doesn't have a traditional v-model, it handles files through events
|
||||
const props = defineProps<{
|
||||
widget: SimplifiedWidget<File[] | null>
|
||||
readonly?: boolean
|
||||
}>()
|
||||
|
||||
const filteredProps = computed(() =>
|
||||
filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
|
||||
)
|
||||
|
||||
const handleUpload = (event: any) => {
|
||||
if (!props.readonly && props.widget.callback) {
|
||||
props.widget.callback(event.files)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelect = (event: any) => {
|
||||
if (!props.readonly && props.widget.callback) {
|
||||
props.widget.callback(event.files)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemove = (event: any) => {
|
||||
if (!props.readonly && props.widget.callback) {
|
||||
props.widget.callback(event.files)
|
||||
}
|
||||
}
|
||||
|
||||
const handleClear = () => {
|
||||
if (!props.readonly && props.widget.callback) {
|
||||
props.widget.callback([])
|
||||
}
|
||||
}
|
||||
|
||||
const handleError = (event: any) => {
|
||||
// Could be extended to handle error reporting
|
||||
console.warn('File upload error:', event)
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user