From f4cfc50ff6653e822a6375a02c3cb1957fc55f55 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Thu, 11 Sep 2025 15:11:10 +0200 Subject: [PATCH 1/2] fix(core): remove node border styles from required styles (#1954) * fix(core): remove node border styles from required styles Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * chore(changeset): add Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --------- Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- .changeset/cyan-pandas-enjoy.md | 5 ++ packages/core/src/style.css | 133 ++++++++++++---------------- packages/core/src/theme-default.css | 39 ++++---- 3 files changed, 87 insertions(+), 90 deletions(-) create mode 100644 .changeset/cyan-pandas-enjoy.md diff --git a/.changeset/cyan-pandas-enjoy.md b/.changeset/cyan-pandas-enjoy.md new file mode 100644 index 000000000..03a008edf --- /dev/null +++ b/.changeset/cyan-pandas-enjoy.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": patch +--- + +Remove border related styles from the required styles and move them into the default theme stylesheet diff --git a/packages/core/src/style.css b/packages/core/src/style.css index f2512de47..2cc7351cd 100644 --- a/packages/core/src/style.css +++ b/packages/core/src/style.css @@ -19,12 +19,12 @@ z-index: 1; &.draggable { - cursor: grab; - } + cursor: grab; + } &.selection { - cursor: pointer; - } + cursor: pointer; + } &.dragging { cursor: grabbing; @@ -76,38 +76,38 @@ cursor: pointer; &.animated path { - stroke-dasharray: 5; - animation: dashdraw 0.5s linear infinite; - } + stroke-dasharray: 5; + animation: dashdraw 0.5s linear infinite; + } &.animated path.vue-flow__edge-interaction { - stroke-dasharray: none; - animation: none; - } + stroke-dasharray: none; + animation: none; + } &.inactive { - pointer-events: none; - } + pointer-events: none; + } &.selected, &:focus, &:focus-visible { - outline: none; - } + outline: none; + } &.selected .vue-flow__edge-path, &:focus .vue-flow__edge-path, &:focus-visible .vue-flow__edge-path { - stroke: #555; - } + stroke: #555; + } &-textwrapper { - pointer-events: all; - } + pointer-events: all; + } &-textbg { - fill: white; - } + fill: white; + } &-text { pointer-events: none; @@ -119,9 +119,9 @@ pointer-events: none; .animated { - stroke-dasharray: 5; - animation: dashdraw 0.5s linear infinite; - } + stroke-dasharray: 5; + animation: dashdraw 0.5s linear infinite; + } } .vue-flow__connectionline { @@ -133,21 +133,6 @@ transform-origin: 0 0; } -.vue-flow__node-default, -.vue-flow__node-input, -.vue-flow__node-output { - border-width: 1px; - border-style: solid; - border-color: #bbb; - - &.selected, - &:focus, - &:focus-visible { - outline: none; - border: 1px solid #555; - } -} - .vue-flow__node { position: absolute; user-select: none; @@ -172,14 +157,14 @@ pointer-events: none; &-rect { - position: absolute; - pointer-events: all; - cursor: grab; + position: absolute; + pointer-events: all; + cursor: grab; &.dragging { - cursor: grabbing; - } - } + cursor: grabbing; + } + } } .vue-flow__handle { @@ -189,33 +174,33 @@ min-height: 5px; &.connectable { - pointer-events: all; - cursor: crosshair; - } + pointer-events: all; + cursor: crosshair; + } &-bottom { - left: 50%; - bottom: 0; - transform: translate(-50%, 50%); - } + left: 50%; + bottom: 0; + transform: translate(-50%, 50%); + } &-top { - left: 50%; - top: 0; - transform: translate(-50%, -50%); - } + left: 50%; + top: 0; + transform: translate(-50%, -50%); + } &-left { - top: 50%; - left: 0; - transform: translate(-50%, -50%); - } + top: 50%; + left: 0; + transform: translate(-50%, -50%); + } &-right { - top: 50%; - right: 0; - transform: translate(50%, -50%); - } + top: 50%; + right: 0; + transform: translate(50%, -50%); + } } .vue-flow__edgeupdater { @@ -229,25 +214,25 @@ margin: 15px; &.top { - top: 0; - } + top: 0; + } &.bottom { - bottom: 0; - } + bottom: 0; + } &.left { - left: 0; - } + left: 0; + } &.right { - right: 0; - } + right: 0; + } &.center { - left: 50%; - transform: translateX(-50%); - } + left: 50%; + transform: translateX(-50%); + } } @keyframes dashdraw { diff --git a/packages/core/src/theme-default.css b/packages/core/src/theme-default.css index a6f634f0f..63afbee5e 100644 --- a/packages/core/src/theme-default.css +++ b/packages/core/src/theme-default.css @@ -1,7 +1,7 @@ :root { --vf-node-bg: #fff; --vf-node-text: #222; - --vf-connection-path: #b1b1b7; + --vf-connection-path: #b1b1b7; --vf-handle: #555; } @@ -32,8 +32,8 @@ .vue-flow__node.selectable { &:focus, &:focus-visible { - outline: none; - } + outline: none; + } } .vue-flow__node-default, @@ -52,8 +52,15 @@ &.selected, &.selected:hover { - box-shadow: 0 0 0 0.5px var(--vf-box-shadow); - } + box-shadow: 0 0 0 0.5px var(--vf-box-shadow); + } + + &.selected, + &:focus, + &:focus-visible { + outline: none; + border: 1px solid #555; + } .vue-flow__handle { background: var(--vf-handle); @@ -79,9 +86,9 @@ &.selected, &:focus, &:focus-visible { - outline: none; - border: 1px solid var(--vf-node-color, #0041d0); - } + outline: none; + border: 1px solid var(--vf-node-color, #0041d0); + } } .vue-flow__node-default { @@ -94,9 +101,9 @@ &.selected, &:focus, &:focus-visible { - outline: none; - border: 1px solid var(--vf-node-color, #1a192b); - } + outline: none; + border: 1px solid var(--vf-node-color, #1a192b); + } } .vue-flow__node-output { @@ -109,9 +116,9 @@ &.selected, &:focus, &:focus-visible { - outline: none; - border: 1px solid var(--vf-node-color, #ff0072); - } + outline: none; + border: 1px solid var(--vf-node-color, #ff0072); + } } .vue-flow__nodesselection-rect, @@ -121,8 +128,8 @@ &:focus, &:focus-visible { - outline: none; - } + outline: none; + } } .vue-flow__handle { From b413e252d46cd692340d646f5d58812a59c63904 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 11 Sep 2025 13:11:38 +0000 Subject: [PATCH 2/2] chore: bump versions --- .changeset/cyan-pandas-enjoy.md | 5 ----- packages/core/CHANGELOG.md | 6 ++++++ packages/core/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/cyan-pandas-enjoy.md diff --git a/.changeset/cyan-pandas-enjoy.md b/.changeset/cyan-pandas-enjoy.md deleted file mode 100644 index 03a008edf..000000000 --- a/.changeset/cyan-pandas-enjoy.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@vue-flow/core": patch ---- - -Remove border related styles from the required styles and move them into the default theme stylesheet diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 56cfbffc6..ad086b976 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,11 @@ # @vue-flow/core +## 1.46.4 + +### Patch Changes + +- [#1954](https://github.com/bcakmakoglu/vue-flow/pull/1954) [`f4cfc50`](https://github.com/bcakmakoglu/vue-flow/commit/f4cfc50ff6653e822a6375a02c3cb1957fc55f55) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Remove border related styles from the required styles and move them into the default theme stylesheet + ## 1.46.3 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index 2daa2533d..a10a42ec9 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@vue-flow/core", - "version": "1.46.3", + "version": "1.46.4", "private": false, "license": "MIT", "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",