diff --git a/src/types/simplifiedWidget.ts b/src/types/simplifiedWidget.ts new file mode 100644 index 000000000..7c755917d --- /dev/null +++ b/src/types/simplifiedWidget.ts @@ -0,0 +1,27 @@ +/** + * Simplified widget interface for Vue-based node rendering + * Removes all DOM manipulation and positioning concerns + */ + +export interface SimplifiedWidget> { + /** 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 } +} diff --git a/src/utils/widgetPropFilter.ts b/src/utils/widgetPropFilter.ts new file mode 100644 index 000000000..9456da6b9 --- /dev/null +++ b/src/utils/widgetPropFilter.ts @@ -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>( + props: T | undefined, + excludeList: readonly string[] +): Partial { + if (!props) return {} + + const filtered: Record = {} + for (const [key, value] of Object.entries(props)) { + if (!excludeList.includes(key)) { + filtered[key] = value + } + } + return filtered as Partial +}