From 36955407e73bede410f88bf643bf8927719c035b Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Tue, 1 Jul 2025 13:49:11 -0400 Subject: [PATCH 1/5] [feat] Add WidgetToggleSwitch Vue component - New WidgetToggleSwitch component for boolean values - Added export to vueWidgets index --- .../graph/vueWidgets/WidgetToggleSwitch.vue | 22 ++++++++++++++- src/components/graph/vueWidgets/index.ts | 27 +++++++++++++++++++ 2 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 src/components/graph/vueWidgets/index.ts diff --git a/src/components/graph/vueWidgets/WidgetToggleSwitch.vue b/src/components/graph/vueWidgets/WidgetToggleSwitch.vue index e74203b7c..a0a28bc07 100644 --- a/src/components/graph/vueWidgets/WidgetToggleSwitch.vue +++ b/src/components/graph/vueWidgets/WidgetToggleSwitch.vue @@ -3,7 +3,27 @@ - + diff --git a/src/components/graph/vueWidgets/index.ts b/src/components/graph/vueWidgets/index.ts new file mode 100644 index 000000000..5c7da5382 --- /dev/null +++ b/src/components/graph/vueWidgets/index.ts @@ -0,0 +1,27 @@ +/** + * Central export file for all Vue widget components and utilities + */ + +// Widget Components +export { default as WidgetButton } from './WidgetButton.vue' +export { default as WidgetChart } from './WidgetChart.vue' +export { default as WidgetColorPicker } from './WidgetColorPicker.vue' +export { default as WidgetFileUpload } from './WidgetFileUpload.vue' +export { default as WidgetGalleria } from './WidgetGalleria.vue' +export { default as WidgetImage } from './WidgetImage.vue' +export { default as WidgetImageCompare } from './WidgetImageCompare.vue' +export { default as WidgetInputText } from './WidgetInputText.vue' +export { default as WidgetMultiSelect } from './WidgetMultiSelect.vue' +export { default as WidgetSelect } from './WidgetSelect.vue' +export { default as WidgetSelectButton } from './WidgetSelectButton.vue' +export { default as WidgetSlider } from './WidgetSlider.vue' +export { default as WidgetTextarea } from './WidgetTextarea.vue' +export { default as WidgetToggleSwitch } from './WidgetToggleSwitch.vue' +export { default as WidgetTreeSelect } from './WidgetTreeSelect.vue' + +// Registry and Utilities +export { + WidgetType, + widgetTypeToComponent, + getWidgetComponent +} from './widgetRegistry' From 79b5c75b852ad813a468bb9134ecb5b27b359fa1 Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Tue, 1 Jul 2025 14:06:56 -0400 Subject: [PATCH 2/5] add interface for ToggleSwitchProps --- src/types/widgetPropTypes.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 src/types/widgetPropTypes.ts diff --git a/src/types/widgetPropTypes.ts b/src/types/widgetPropTypes.ts new file mode 100644 index 000000000..b8b0d8a06 --- /dev/null +++ b/src/types/widgetPropTypes.ts @@ -0,0 +1,18 @@ +/** + * Type definitions for widget component props + */ + +export interface ToggleSwitchProps { + modelValue: string | boolean + defaultValue?: string | boolean + name?: string + trueValue?: any + falseValue?: any + invalid?: boolean + disabled?: boolean + readonly?: boolean + tabindex?: number + inputId?: string + ariaLabelledby?: string + ariaLabel?: string +} From 9056a2e89cdccc15ebd3b0ab491472b6ef5f5be6 Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Tue, 1 Jul 2025 14:09:07 -0400 Subject: [PATCH 3/5] add AllowedToggleSwitchProps --- src/types/widgetPropTypes.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/types/widgetPropTypes.ts b/src/types/widgetPropTypes.ts index b8b0d8a06..7c16dbe41 100644 --- a/src/types/widgetPropTypes.ts +++ b/src/types/widgetPropTypes.ts @@ -16,3 +16,23 @@ export interface ToggleSwitchProps { ariaLabelledby?: string ariaLabel?: string } + +/** + * Allowed ToggleSwitch props that can be passed through widget options + * (excludes style-related props that are filtered out) + */ +export type AllowedToggleSwitchProps = Pick< + ToggleSwitchProps, + | 'modelValue' + | 'defaultValue' + | 'name' + | 'trueValue' + | 'falseValue' + | 'invalid' + | 'disabled' + | 'readonly' + | 'tabindex' + | 'inputId' + | 'ariaLabelledby' + | 'ariaLabel' +> From 3ad9c1bd7c6f455b36eb45510100dff5f1ddfdbd Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Tue, 1 Jul 2025 15:13:41 -0400 Subject: [PATCH 4/5] "improve" typings --- .../graph/vueWidgets/WidgetToggleSwitch.vue | 7 +-- src/types/widgetPropTypes.ts | 54 ++++++++----------- 2 files changed, 27 insertions(+), 34 deletions(-) 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 index 7c16dbe41..2118d8c2e 100644 --- a/src/types/widgetPropTypes.ts +++ b/src/types/widgetPropTypes.ts @@ -1,38 +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 */ - -export interface ToggleSwitchProps { - modelValue: string | boolean - defaultValue?: string | boolean - name?: string - trueValue?: any - falseValue?: any - invalid?: boolean - disabled?: boolean - readonly?: boolean - tabindex?: number - inputId?: string - ariaLabelledby?: string - ariaLabel?: string -} +import type { ToggleSwitchProps as PrimeVueToggleSwitchProps } from 'primevue/toggleswitch' /** - * Allowed ToggleSwitch props that can be passed through widget options - * (excludes style-related props that are filtered out) + * 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 AllowedToggleSwitchProps = Pick< - ToggleSwitchProps, - | 'modelValue' - | 'defaultValue' - | 'name' - | 'trueValue' - | 'falseValue' - | 'invalid' - | 'disabled' - | 'readonly' - | 'tabindex' - | 'inputId' - | 'ariaLabelledby' - | 'ariaLabel' +export type WidgetToggleSwitchProps = Omit< + PrimeVueToggleSwitchProps, + | 'style' + | 'class' + | 'inputClass' + | 'inputStyle' + | 'dt' + | 'pt' + | 'ptOptions' + | 'unstyled' > From 4808018b1067ea203bd4f261d96797f7bc0af3ab Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Wed, 2 Jul 2025 01:41:46 -0400 Subject: [PATCH 5/5] remove barrel export --- src/components/graph/vueWidgets/index.ts | 27 ------------------------ 1 file changed, 27 deletions(-) delete mode 100644 src/components/graph/vueWidgets/index.ts diff --git a/src/components/graph/vueWidgets/index.ts b/src/components/graph/vueWidgets/index.ts deleted file mode 100644 index 5c7da5382..000000000 --- a/src/components/graph/vueWidgets/index.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Central export file for all Vue widget components and utilities - */ - -// Widget Components -export { default as WidgetButton } from './WidgetButton.vue' -export { default as WidgetChart } from './WidgetChart.vue' -export { default as WidgetColorPicker } from './WidgetColorPicker.vue' -export { default as WidgetFileUpload } from './WidgetFileUpload.vue' -export { default as WidgetGalleria } from './WidgetGalleria.vue' -export { default as WidgetImage } from './WidgetImage.vue' -export { default as WidgetImageCompare } from './WidgetImageCompare.vue' -export { default as WidgetInputText } from './WidgetInputText.vue' -export { default as WidgetMultiSelect } from './WidgetMultiSelect.vue' -export { default as WidgetSelect } from './WidgetSelect.vue' -export { default as WidgetSelectButton } from './WidgetSelectButton.vue' -export { default as WidgetSlider } from './WidgetSlider.vue' -export { default as WidgetTextarea } from './WidgetTextarea.vue' -export { default as WidgetToggleSwitch } from './WidgetToggleSwitch.vue' -export { default as WidgetTreeSelect } from './WidgetTreeSelect.vue' - -// Registry and Utilities -export { - WidgetType, - widgetTypeToComponent, - getWidgetComponent -} from './widgetRegistry'