diff --git a/src/components/graph/vueWidgets/WidgetToggleSwitch.vue b/src/components/graph/vueWidgets/WidgetToggleSwitch.vue index a0a28bc07..bf02d3990 100644 --- a/src/components/graph/vueWidgets/WidgetToggleSwitch.vue +++ b/src/components/graph/vueWidgets/WidgetToggleSwitch.vue @@ -32,19 +32,20 @@ import ToggleSwitch from 'primevue/toggleswitch' import { computed } from 'vue' import type { SimplifiedWidget } from '@/types/simplifiedWidget' +import type { WidgetToggleSwitchProps } from '@/types/widgetPropTypes' import { - STANDARD_EXCLUDED_PROPS, + INPUT_EXCLUDED_PROPS, filterWidgetProps } from '@/utils/widgetPropFilter' const value = defineModel({ required: true }) const props = defineProps<{ - widget: SimplifiedWidget + widget: SimplifiedWidget readonly?: boolean }>() const filteredProps = computed(() => - filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS) + filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS) ) diff --git a/src/types/widgetPropTypes.ts b/src/types/widgetPropTypes.ts new file mode 100644 index 000000000..2118d8c2e --- /dev/null +++ b/src/types/widgetPropTypes.ts @@ -0,0 +1,30 @@ +/** + * Type definitions for widget component props + * + * These interfaces define the subset of PrimeVue component props that are exposed + * for the node-based widget system. They exclude props that allow custom styling, + * colors, arbitrary CSS, or could create chaotic interfaces. + * + * Based on the design authority at: + * https://www.figma.com/design/CmhEJxo4oZSuYpqG1Yc39w/Nodes-V3?node-id=441-7806&m=dev + */ +import type { ToggleSwitchProps as PrimeVueToggleSwitchProps } from 'primevue/toggleswitch' + +/** + * Widget ToggleSwitch Component + * Excludes: style, class, inputClass, inputStyle, dt, pt, ptOptions, unstyled + * + * These props are excluded from widget.options to prevent external styling overrides. + * The widget component itself can still use these props internally for consistent styling. + */ +export type WidgetToggleSwitchProps = Omit< + PrimeVueToggleSwitchProps, + | 'style' + | 'class' + | 'inputClass' + | 'inputStyle' + | 'dt' + | 'pt' + | 'ptOptions' + | 'unstyled' +>