Implement widget borders in vue (#7322)

Browse Source

Adds support for displaying the "promoted" and "advanced" border
indicators when in vue mode.

Requires some (hopefully minor and generally beneficial) styling changes
to make sure that the widgets are contained within their border.

Note that the 'advanced' functionality sees minimal use and is likely to
be revamped in the future.

<img width="372" height="417" alt="image"
src="https://github.com/user-attachments/assets/8ea1e66b-2a4e-4a16-996f-289a26e39708"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7322-Implement-widget-borders-in-vue-2c56d73d36508187b881f97e373d433b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

...

This commit is contained in:

AustinMroz

2025-12-10 17:23:59 -08:00

committed by GitHub

parent 62f9e91724

commit 6156e22bac

26 changed files with 47 additions and 17 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

BIN

browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 128 KiB After Width:  |  Height:  |  Size: 129 KiB

BIN

browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 55 KiB After Width:  |  Height:  |  Size: 55 KiB

BIN

browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 37 KiB After Width:  |  Height:  |  Size: 37 KiB

BIN

browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 37 KiB After Width:  |  Height:  |  Size: 37 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 61 KiB After Width:  |  Height:  |  Size: 61 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 60 KiB After Width:  |  Height:  |  Size: 60 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 60 KiB After Width:  |  Height:  |  Size: 60 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 62 KiB After Width:  |  Height:  |  Size: 62 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 63 KiB After Width:  |  Height:  |  Size: 62 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 62 KiB After Width:  |  Height:  |  Size: 62 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 59 KiB After Width:  |  Height:  |  Size: 59 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 58 KiB After Width:  |  Height:  |  Size: 58 KiB

BIN

browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 111 KiB After Width:  |  Height:  |  Size: 111 KiB

BIN

browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 39 KiB After Width:  |  Height:  |  Size: 40 KiB

BIN

browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 122 KiB After Width:  |  Height:  |  Size: 122 KiB

BIN

browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 122 KiB After Width:  |  Height:  |  Size: 122 KiB

BIN

browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 151 KiB After Width:  |  Height:  |  Size: 152 KiB

BIN

browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 144 KiB After Width:  |  Height:  |  Size: 145 KiB

BIN

browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 122 KiB After Width:  |  Height:  |  Size: 122 KiB

BIN

browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 84 KiB After Width:  |  Height:  |  Size: 83 KiB