Skip to content

Commit 90891cd

Browse files
JustineoJustineo
committed
feat(controls): add slot props, add control-item slot for controls
1 parent f8c11e4 commit 90891cd

File tree

9 files changed

+282
-68
lines changed

9 files changed

+282
-68
lines changed

‎docs/src/guide/components/controls.md‎

Lines changed: 51 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,51 @@ import '@vue-flow/controls/dist/style.css'
3535
</template>
3636
```
3737

38+
You can also customize the controls by using the provided slots and slot props.
39+
40+
```vue
41+
<script setup>
42+
import { VueFlow } from '@vue-flow/core'
43+
import type { ControlType } from '@vue-flow/controls'
44+
import { ControlButton, Controls } from '@vue-flow/controls'
45+
46+
// import default controls styles
47+
import '@vue-flow/controls/dist/style.css'
48+
49+
// import custom tooltip component
50+
import Tooltip from './Tooltip.vue'
51+
52+
const tooltips: Record<ControlType, string> = {
53+
'zoom-in': 'Zoom In',
54+
'zoom-out': 'Zoom Out',
55+
'fit-view': 'Fit View',
56+
'interactive': 'Lock/Unlock Interaction',
57+
}
58+
</script>
59+
60+
<template>
61+
<VueFlow>
62+
<Controls>
63+
<template #control-item="{ control, onClick, icon }">
64+
<Tooltip :text="tooltips[control]">
65+
<ControlButton @click="onClick">
66+
<component :is="icon" />
67+
</ControlButton>
68+
</Tooltip>
69+
</template>
70+
</Controls>
71+
</VueFlow>
72+
</template>
73+
```
3874

3975
## [Props](/typedocs/interfaces/ControlProps)
4076

41-
| Name | Definition | Type | Optional | Default |
42-
|-----------------|----------------------------------------|------------------------------------------------|----------|---------|
43-
| showZoom | Show zoom btn | boolean | true | true |
44-
| showFitView | Show fit-view btn | boolean | true | true |
45-
| showInteractive | Show lock interactive btn | boolean | true | true |
46-
| showZoom | Show zoom button | boolean | true | true |
77+
| Name | Definition | Type | Optional | Default |
78+
|-----------------|----------------------------------------|-------------------------------------------------------|----------|---------|
79+
| showZoom | Show zoom btn | boolean | true | true |
80+
| showFitView | Show fit-view btn | boolean | true | true |
81+
| showInteractive | Show lock interactive btn | boolean | true | true |
82+
| showZoom | Show zoom button | boolean | true | true |
4783
| fitViewParams | Params to use on fit-view button click | [FitViewParams](/typedocs/type-aliases/FitViewParams) | true | - |
4884

4985
## Emits
@@ -59,14 +95,15 @@ import '@vue-flow/controls/dist/style.css'
5995

6096
### Control Buttons
6197

62-
| Name | Definition |
63-
|---------------------|----------------------------|
64-
| top | Slot above default buttons |
65-
| control-zoom-in | Zoom-in btn |
66-
| control-zoom-out | Zoom-out btn |
67-
| control-fit-view | Fit-view btn |
68-
| control-interactive | Interaction btn |
69-
| default | Slot below default buttons |
98+
| Name | Definition | Props |
99+
|---------------------|----------------------------|----------------------------------------------------------------------------------------------------------------------|
100+
| top | Slot above default buttons | [ControlsSlotProps](/typedocs/interfaces/ControlsSlotProps) |
101+
| control-item | Each control btn | [ControlItemSlotProps](/typedocs/interfaces/ControlItemSlotProps) |
102+
| control-zoom-in | Zoom-in btn | { disabled: boolean; zoomIn: () \=> any; icon: Component } |
103+
| control-zoom-out | Zoom-out btn | { disabled: boolean; zoomOut: () \=> any; icon: Component } |
104+
| control-fit-view | Fit-view btn | { fitView: () \=> any; icon: Component } |
105+
| control-interactive | Interaction btn | { interactive: boolean; toggleInteractive: () \=> any; icon: Component; lockIcon: Component; unlockIcon: Component } |
106+
| default | Slot below default buttons | [ControlsSlotProps](/typedocs/interfaces/ControlsSlotProps) |
70107

71108
### Icons
72109

@@ -77,5 +114,3 @@ import '@vue-flow/controls/dist/style.css'
77114
| icon-fit-view | Fit-view icon |
78115
| icon-lock | Interaction locked icon |
79116
| icon-unlock | Interaction unlocked icon |
80-
81-

‎examples/vite/router.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,10 @@ export const routes: RouterOptions['routes'] = [
138138
path: '/confirm-delete',
139139
component: () => import('./src/ConfirmDelete/ConfirmDeleteExample.vue'),
140140
},
141+
{
142+
path: '/controls-slot',
143+
component: () => import('./src/Controls/ControlsSlot.vue'),
144+
},
141145
]
142146

143147
export const router = createRouter({

‎examples/vite/src/Controls/ControlsSlot.vue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script lang="ts" setup>
2+
import type { Node } from '@vue-flow/core'
3+
import { VueFlow } from '@vue-flow/core'
4+
5+
import { Background } from '@vue-flow/background'
6+
import type { ControlType } from '@vue-flow/controls'
7+
import { Controls } from '@vue-flow/controls'
8+
9+
const nodes = ref<Node[]>([
10+
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
11+
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
12+
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
13+
{ id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
14+
])
15+
16+
const tooltips: Record<ControlType, string> = {
17+
'zoom-in': 'Zoom In',
18+
'zoom-out': 'Zoom Out',
19+
'fit-view': 'Fit View',
20+
'interactive': 'Lock/Unlock Interaction',
21+
}
22+
</script>
23+
24+
<template>
25+
<VueFlow :nodes="nodes" fit-view-on-init class="vue-flow-controls-example">
26+
<Background />
27+
<Controls>
28+
<template #control-item="{ control, disabled, onClick, icon }">
29+
<button class="control" :title="tooltips[control]" :disabled="disabled" @click="onClick">
30+
<component :is="icon" class="icon" />
31+
</button>
32+
</template>
33+
34+
<template #control-interactive="{ interactive, toggleInteractive }">
35+
<button class="control" :title="interactive ? 'Lock' : 'Unock'" @click="toggleInteractive">
36+
{{ interactive ? '🔓' : '🔒' }}
37+
</button>
38+
</template>
39+
</Controls>
40+
</VueFlow>
41+
</template>
42+
43+
<style scoped>
44+
.control {
45+
width: 32px;
46+
height: 32px;
47+
display: flex;
48+
align-items: center;
49+
justify-content: center;
50+
border: none;
51+
background: #fafafa;
52+
cursor: pointer;
53+
}
54+
55+
.control:not(:disabled):hover {
56+
background: #eee;
57+
}
58+
59+
.control:disabled {
60+
cursor: not-allowed;
61+
color: #ccc;
62+
}
63+
64+
.icon {
65+
fill: currentColor;
66+
width: 16px;
67+
height: 16px;
68+
}
69+
</style>

‎packages/controls/README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import '@vue-flow/controls/dist/style.css'
2525
2626
import initialElements from './initial-elements'
2727
28-
2928
// some nodes and edges
3029
const elements = ref(initialElements)
3130
</script>

‎packages/controls/package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
"name": "@vue-flow/controls",
33
"version": "1.1.3",
44
"private": false,
5-
"license": "MIT",
65
"author": "Burak Cakmakoglu<[email protected]>",
6+
"license": "MIT",
7+
"homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
78
"repository": {
89
"type": "git",
910
"url": "git+https://github.com/bcakmakoglu/vue-flow/packages/plugins/controls"
1011
},
11-
"homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
1212
"bugs": {
1313
"url": "https://github.com/bcakmakoglu/vue-flow/issues"
1414
},
@@ -28,11 +28,9 @@
2828
"vueflow",
2929
"typescript"
3030
],
31-
"main": "./dist/vue-flow-controls.js",
32-
"module": "./dist/vue-flow-controls.mjs",
33-
"types": "./dist/index.d.ts",
34-
"unpkg": "./dist/vue-flow-controls.iife.js",
35-
"jsdelivr": "./dist/vue-flow-controls.iife.js",
31+
"sideEffects": [
32+
"*.css"
33+
],
3634
"exports": {
3735
".": {
3836
"types": "./dist/index.d.ts",
@@ -41,13 +39,15 @@
4139
},
4240
"./dist/style.css": "./dist/style.css"
4341
},
42+
"main": "./dist/vue-flow-controls.js",
43+
"module": "./dist/vue-flow-controls.mjs",
44+
"unpkg": "./dist/vue-flow-controls.iife.js",
45+
"jsdelivr": "./dist/vue-flow-controls.iife.js",
46+
"types": "./dist/index.d.ts",
4447
"files": [
4548
"dist",
4649
"*.d.ts"
4750
],
48-
"sideEffects": [
49-
"*.css"
50-
],
5151
"scripts": {
5252
"dev": "pnpm types:watch & pnpm build:watch",
5353
"build": "vite build",

0 commit comments

Comments
 (0)