mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-04 15:10:06 +00:00
[feat] Add Vue widget registry system
- Complete widget type enum with all 15 widget types - Component mapping registry for dynamic widget rendering - Helper function for type-safe widget component resolution
This commit is contained in:
80
src/components/graph/vueWidgets/widgetRegistry.ts
Normal file
80
src/components/graph/vueWidgets/widgetRegistry.ts
Normal file
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* Widget type registry and component mapping for Vue-based widgets
|
||||
*/
|
||||
import type { Component } from 'vue'
|
||||
|
||||
// Component imports
|
||||
import WidgetButton from './WidgetButton.vue'
|
||||
import WidgetChart from './WidgetChart.vue'
|
||||
import WidgetColorPicker from './WidgetColorPicker.vue'
|
||||
import WidgetFileUpload from './WidgetFileUpload.vue'
|
||||
import WidgetGalleria from './WidgetGalleria.vue'
|
||||
import WidgetImage from './WidgetImage.vue'
|
||||
import WidgetImageCompare from './WidgetImageCompare.vue'
|
||||
import WidgetInputText from './WidgetInputText.vue'
|
||||
import WidgetMultiSelect from './WidgetMultiSelect.vue'
|
||||
import WidgetSelect from './WidgetSelect.vue'
|
||||
import WidgetSelectButton from './WidgetSelectButton.vue'
|
||||
import WidgetSlider from './WidgetSlider.vue'
|
||||
import WidgetTextarea from './WidgetTextarea.vue'
|
||||
import WidgetToggleSwitch from './WidgetToggleSwitch.vue'
|
||||
import WidgetTreeSelect from './WidgetTreeSelect.vue'
|
||||
|
||||
/**
|
||||
* Enum of all available widget types
|
||||
*/
|
||||
export enum WidgetType {
|
||||
BUTTON = 'BUTTON',
|
||||
STRING = 'STRING',
|
||||
INT = 'INT',
|
||||
FLOAT = 'FLOAT',
|
||||
NUMBER = 'NUMBER',
|
||||
BOOLEAN = 'BOOLEAN',
|
||||
COMBO = 'COMBO',
|
||||
COLOR = 'COLOR',
|
||||
MULTISELECT = 'MULTISELECT',
|
||||
SELECTBUTTON = 'SELECTBUTTON',
|
||||
SLIDER = 'SLIDER',
|
||||
TEXTAREA = 'TEXTAREA',
|
||||
TOGGLESWITCH = 'TOGGLESWITCH',
|
||||
CHART = 'CHART',
|
||||
IMAGE = 'IMAGE',
|
||||
IMAGECOMPARE = 'IMAGECOMPARE',
|
||||
GALLERIA = 'GALLERIA',
|
||||
FILEUPLOAD = 'FILEUPLOAD',
|
||||
TREESELECT = 'TREESELECT'
|
||||
}
|
||||
|
||||
/**
|
||||
* Maps widget types to their corresponding Vue components
|
||||
* Components will be added as they are implemented
|
||||
*/
|
||||
export const widgetTypeToComponent: Record<string, Component> = {
|
||||
// Components will be uncommented as they are implemented
|
||||
[WidgetType.BUTTON]: WidgetButton,
|
||||
[WidgetType.STRING]: WidgetInputText,
|
||||
[WidgetType.INT]: WidgetSlider,
|
||||
[WidgetType.FLOAT]: WidgetSlider,
|
||||
[WidgetType.NUMBER]: WidgetSlider, // For compatibility
|
||||
[WidgetType.BOOLEAN]: WidgetToggleSwitch,
|
||||
[WidgetType.COMBO]: WidgetSelect,
|
||||
[WidgetType.COLOR]: WidgetColorPicker,
|
||||
[WidgetType.MULTISELECT]: WidgetMultiSelect,
|
||||
[WidgetType.SELECTBUTTON]: WidgetSelectButton,
|
||||
[WidgetType.SLIDER]: WidgetSlider,
|
||||
[WidgetType.TEXTAREA]: WidgetTextarea,
|
||||
[WidgetType.TOGGLESWITCH]: WidgetToggleSwitch,
|
||||
[WidgetType.CHART]: WidgetChart,
|
||||
[WidgetType.IMAGE]: WidgetImage,
|
||||
[WidgetType.IMAGECOMPARE]: WidgetImageCompare,
|
||||
[WidgetType.GALLERIA]: WidgetGalleria,
|
||||
[WidgetType.FILEUPLOAD]: WidgetFileUpload,
|
||||
[WidgetType.TREESELECT]: WidgetTreeSelect
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper function to get widget component by type
|
||||
*/
|
||||
export function getWidgetComponent(type: string): Component | undefined {
|
||||
return widgetTypeToComponent[type]
|
||||
}
|
||||
Reference in New Issue
Block a user