mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-05 07:30:11 +00:00
[feat] Add core Vue widget infrastructure
- SimplifiedWidget interface for Vue-based node widgets - widgetPropFilter utility with component-specific exclusion lists - Removes DOM manipulation and positioning concerns - Provides clean API for value binding and prop filtering
This commit is contained in:
27
src/types/simplifiedWidget.ts
Normal file
27
src/types/simplifiedWidget.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* Simplified widget interface for Vue-based node rendering
|
||||
* Removes all DOM manipulation and positioning concerns
|
||||
*/
|
||||
|
||||
export interface SimplifiedWidget<T = any, O = Record<string, any>> {
|
||||
/** Display name of the widget */
|
||||
name: string
|
||||
|
||||
/** Widget type identifier (e.g., 'STRING', 'INT', 'COMBO') */
|
||||
type: string
|
||||
|
||||
/** Current value of the widget */
|
||||
value: T
|
||||
|
||||
/** Widget options including filtered PrimeVue props */
|
||||
options?: O
|
||||
|
||||
/** Callback fired when value changes */
|
||||
callback?: (value: T) => void
|
||||
|
||||
/** Optional serialization method for custom value handling */
|
||||
serializeValue?: () => any
|
||||
|
||||
/** Optional method to compute widget size requirements */
|
||||
computeSize?: () => { minHeight: number; maxHeight?: number }
|
||||
}
|
||||
76
src/utils/widgetPropFilter.ts
Normal file
76
src/utils/widgetPropFilter.ts
Normal file
@@ -0,0 +1,76 @@
|
||||
/**
|
||||
* Widget prop filtering utilities
|
||||
* Filters out style-related and customization props from PrimeVue components
|
||||
* to maintain consistent widget appearance across the application
|
||||
*/
|
||||
|
||||
// Props to exclude based on the widget interface specifications
|
||||
export const STANDARD_EXCLUDED_PROPS = [
|
||||
'style',
|
||||
'class',
|
||||
'dt',
|
||||
'pt',
|
||||
'ptOptions',
|
||||
'unstyled'
|
||||
] as const
|
||||
|
||||
export const INPUT_EXCLUDED_PROPS = [
|
||||
...STANDARD_EXCLUDED_PROPS,
|
||||
'inputClass',
|
||||
'inputStyle'
|
||||
] as const
|
||||
|
||||
export const PANEL_EXCLUDED_PROPS = [
|
||||
...STANDARD_EXCLUDED_PROPS,
|
||||
'panelClass',
|
||||
'panelStyle',
|
||||
'overlayClass'
|
||||
] as const
|
||||
|
||||
export const IMAGE_EXCLUDED_PROPS = [
|
||||
...STANDARD_EXCLUDED_PROPS,
|
||||
'imageClass',
|
||||
'imageStyle'
|
||||
] as const
|
||||
|
||||
export const GALLERIA_EXCLUDED_PROPS = [
|
||||
...STANDARD_EXCLUDED_PROPS,
|
||||
'thumbnailsPosition',
|
||||
'verticalThumbnailViewPortHeight',
|
||||
'indicatorsPosition',
|
||||
'maskClass',
|
||||
'containerStyle',
|
||||
'containerClass',
|
||||
'galleriaClass'
|
||||
] as const
|
||||
|
||||
export const BADGE_EXCLUDED_PROPS = [
|
||||
...STANDARD_EXCLUDED_PROPS,
|
||||
'badgeClass'
|
||||
] as const
|
||||
|
||||
export const LABEL_EXCLUDED_PROPS = [
|
||||
...PANEL_EXCLUDED_PROPS,
|
||||
'labelStyle'
|
||||
] as const
|
||||
|
||||
/**
|
||||
* Filters widget props by excluding specified properties
|
||||
* @param props - The props object to filter
|
||||
* @param excludeList - List of property names to exclude
|
||||
* @returns Filtered props object
|
||||
*/
|
||||
export function filterWidgetProps<T extends Record<string, any>>(
|
||||
props: T | undefined,
|
||||
excludeList: readonly string[]
|
||||
): Partial<T> {
|
||||
if (!props) return {}
|
||||
|
||||
const filtered: Record<string, any> = {}
|
||||
for (const [key, value] of Object.entries(props)) {
|
||||
if (!excludeList.includes(key)) {
|
||||
filtered[key] = value
|
||||
}
|
||||
}
|
||||
return filtered as Partial<T>
|
||||
}
|
||||
Reference in New Issue
Block a user