From 17d9a49610246f4a3d57e713ae06737c1f1a7229 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 5 Nov 2023 14:29:59 +0100
Subject: [PATCH] docs: add copy icon overrides
---
docs/src/.vitepress/theme/style.css | 9 +++
docs/src/guide/theming.md | 111 ++++++++++++++++------------
2 files changed, 73 insertions(+), 47 deletions(-)
diff --git a/docs/src/.vitepress/theme/style.css b/docs/src/.vitepress/theme/style.css
index 8eb8c3c8..78a990d0 100644
--- a/docs/src/.vitepress/theme/style.css
+++ b/docs/src/.vitepress/theme/style.css
@@ -131,6 +131,15 @@
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
}
+:root {
+ --vp-icon-copy: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxnIGZpbGw9InJnYmEoMTI4LDEyOCwxMjgsMSkiPjxwYXRoIGQ9Ik00IDEuNUgzYTIgMiAwIDAgMC0yIDJWMTRhMiAyIDAgMCAwIDIgMmgxMGEyIDIgMCAwIDAgMi0yVjMuNWEyIDIgMCAwIDAtMi0yaC0xdjFoMWExIDEgMCAwIDEgMSAxVjE0YTEgMSAwIDAgMS0xIDFIM2ExIDEgMCAwIDEtMS0xVjMuNWExIDEgMCAwIDEgMS0xaDF2LTF6Ii8+PHBhdGggZD0iTTkuNSAxYS41LjUgMCAwIDEgLjUuNXYxYS41LjUgMCAwIDEtLjUuNWgtM2EuNS41IDAgMCAxLS41LS41di0xYS41LjUgMCAwIDEgLjUtLjVoM3ptLTMtMUExLjUgMS41IDAgMCAwIDUgMS41djFBMS41IDEuNSAwIDAgMCA2LjUgNGgzQTEuNSAxLjUgMCAwIDAgMTEgMi41di0xQTEuNSAxLjUgMCAwIDAgOS41IDBoLTN6Ii8+PC9nPjwvc3ZnPg== ");
+ --vp-icon-copied: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxnIGZpbGw9InJnYmEoMTI4LDEyOCwxMjgsMSkiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjg1NCA3LjE0NmEuNS41IDAgMCAxIDAgLjcwOGwtMyAzYS41LjUgMCAwIDEtLjcwOCAwbC0xLjUtMS41YS41LjUgMCAxIDEgLjcwOC0uNzA4TDcuNSA5Ljc5M2wyLjY0Ni0yLjY0N2EuNS41IDAgMCAxIC43MDggMHoiLz48cGF0aCBkPSJNNCAxLjVIM2EyIDIgMCAwIDAtMiAyVjE0YTIgMiAwIDAgMCAyIDJoMTBhMiAyIDAgMCAwIDItMlYzLjVhMiAyIDAgMCAwLTItMmgtMXYxaDFhMSAxIDAgMCAxIDEgMVYxNGExIDEgMCAwIDEtMSAxSDNhMSAxIDAgMCAxLTEtMVYzLjVhMSAxIDAgMCAxIDEtMWgxdi0xeiIvPjxwYXRoIGQ9Ik05LjUgMWEuNS41IDAgMCAxIC41LjV2MWEuNS41IDAgMCAxLS41LjVoLTNhLjUuNSAwIDAgMS0uNS0uNXYtMWEuNS41IDAgMCAxIC41LS41aDN6bS0zLTFBMS41IDEuNSAwIDAgMCA1IDEuNXYxQTEuNSAxLjUgMCAwIDAgNi41IDRoM0ExLjUgMS41IDAgMCAwIDExIDIuNXYtMUExLjUgMS41IDAgMCAwIDkuNSAwaC0zeiIvPjwvZz48L3N2Zz4=");
+}
+
+.copy {
+ color: rgba(128,128,128,1)
+}
+
/**
* Component: Algolia
* -------------------------------------------------------------------------- */
diff --git a/docs/src/guide/theming.md b/docs/src/guide/theming.md
index 4a50719e..8f2f3247 100644
--- a/docs/src/guide/theming.md
+++ b/docs/src/guide/theming.md
@@ -86,15 +86,11 @@ Below are a couple of examples on how you can do this:
Directly styling the Vue Flow component:
-```vue{5-6,8-9}
+```html{4-5}
class="my-diagram-class"
-
-
:style="{ background: 'red' }"
/>
@@ -159,19 +155,29 @@ These alterations can be implemented either on a global scale or to individual e
}
```
-```js{2-3} []
+```js{6-7} []
const elements = ref([
- /* Overriding the `--vf-node-color` variable to change node border, box-shadow and handle color */
- { id: '1', label: 'Node 1', position: { x: 100, y: 100 }, style: { '--vf-node-color': 'blue' } },
+ {
+ id: '1',
+ label: 'Node 1',
+ position: { x: 100, y: 100 },
+ /* Overriding the `--vf-node-color` variable to change node border, box-shadow and handle color */
+ style: { '--vf-node-color': 'blue' }
+ },
])
```
-```ts{4-5} []
+```ts{8-9} []
import type { Elements } from '@vue-flow/core';
const elements = ref([
- /* Overriding the `--vf-node-color` variable to change node border, box-shadow and handle color */
- { id: '1', label: 'Node 1', position: { x: 100, y: 100 }, style: { '--vf-node-color': 'blue' } },
+ {
+ id: '1',
+ label: 'Node 1',
+ position: { x: 100, y: 100 },
+ /* Overriding the `--vf-node-color` variable to change node border, box-shadow and handle color */
+ style: { '--vf-node-color': 'blue' }
+ },
])
```
@@ -192,40 +198,51 @@ Here's a concise list of CSS variables you can consider, along with their effect
## CSS Class Names
-Here you'll find a handy reference guide of class names and their respective containers:
+Here you'll find a handy reference guide of class names and their respective elements:
-| Name | Container |
-|-------------------------------|---------------------------------------------------|
-| .vue-flow | The outer container |
-| .vue-flow__container | Wrapper for container elements |
-| .vue-flow__viewport | The inner container |
-| .vue-flow__transformationpane | Pane for movements like zooming and panning |
-| .vue-flow__selectionpane | Pane for handling user selection |
-| .vue-flow__selection | Defines current user selection box |
-| .vue-flow__edges | Wrapper rendering edges |
-| .vue-flow__edge | Wrapper around each edge element |
-| .vue-flow__edge-{type} | Edge type (either custom or default) |
-| .vue-flow__edge .selected | Defines the currently selected edge(s) |
-| .vue-flow__edge .animated | Defines an animated edge |
-| .vue-flow__edge-path | SVG path for edge elements |
-| .vue-flow__edge-text | Wrapper around edge label |
-| .vue-flow__edge-textbg | Background wrapper around edge label |
-| .vue-flow__connectionline | Container for the connection line elements |
-| .vue-flow__connection | Individual connection line element |
-| .vue-flow__connection-path | SVG path for connection line |
-| .vue-flow__nodes | Rendering wrapper around nodes |
-| .vue-flow__node | Wrapper around each node element |
-| .vue-flow__node .selected | Defines the currently selected node(s) |
-| .vue-flow__node-{type} | Node type (either custom or default) |
-| .vue-flow__nodesselection | Defines selection rectangle for nodes |
-| .vue-flow__handle | Wrapper around node handle elements |
-| .vue-flow__handle-bottom | Defines a handle at bottom |
-| .vue-flow__handle-top | Defines a handle at top |
-| .vue-flow__handle-left | Defines a handle at left |
-| .vue-flow__handle-right | Defines a handle at right |
-| .vue-flow__handle-connecting | Connection line is over the handle |
-| .vue-flow__handle-valid | Connection line over handle with valid connection |
-| .vue-flow__background | Background component |
-| .vue-flow__minimap | MiniMap component |
-| .vue-flow__controls | Controls component |
-
+#### Containers
+| Name | Container |
+| --------------------- | ----------------------------------------- |
+| .vue-flow | The outer container |
+| .vue-flow__container | Wrapper for container elements |
+| .vue-flow__viewport | The inner container |
+| .vue-flow__background | Background component |
+| .vue-flow__minimap | MiniMap component |
+| .vue-flow__controls | Controls component |
+
+#### Edges
+| Name | Description |
+| ------------------------- | ------------------------------------------------- |
+| .vue-flow__edges | Wrapper rendering edges |
+| .vue-flow__edge | Wrapper around each edge element |
+| .vue-flow__selectionpane | Pane for handling user selection |
+| .vue-flow__selection | Defines current user selection box |
+| .vue-flow__edge-{type} | Edge type (either custom or default) |
+| .vue-flow__edge .selected | Defines the currently selected edge(s) |
+| .vue-flow__edge .animated | Defines an animated edge |
+| .vue-flow__edge-path | SVG path for edge elements |
+| .vue-flow__edge-text | Wrapper around edge label |
+| .vue-flow__edge-textbg | Background wrapper around edge label |
+| .vue-flow__connectionline | Container for the connection line elements |
+| .vue-flow__connection | Individual connection line element |
+| .vue-flow__connection-path| SVG path for connection line |
+
+#### Nodes
+| Name | Description |
+| --------------------- | ----------------------------------------- |
+| .vue-flow__nodes | Rendering wrapper around nodes |
+| .vue-flow__node | Wrapper around each node element |
+| .vue-flow__node .selected | Defines the currently selected node(s) |
+| .vue-flow__node-{type} | Node type (either custom or default) |
+| .vue-flow__nodesselection | Defines selection rectangle for nodes |
+
+#### Node Handles
+| Name | Description |
+| ------------------------- | ----------------------------------------- |
+| .vue-flow__handle | Wrapper around node handle elements |
+| .vue-flow__handle-bottom | Defines a handle at bottom |
+| .vue-flow__handle-top | Defines a handle at top |
+| .vue-flow__handle-left | Defines a handle at left |
+| .vue-flow__handle-right | Defines a handle at right |
+| .vue-flow__handle-connecting | Connection line is over the handle |
+| .vue-flow__handle-valid | Connection line over handle with valid connection |