d71de0a92d
* chore(docs): update basic example styles * chore(docs): update confirm delete example styles * chore(docs): update dnd example styles * chore(docs): update hidden example * chore(docs): update update node example * chore(docs): update node toolbar example styles * chore(docs): update transition example styles * chore(docs): cleanup basic example els * chore(docs): cleanup examples
32 lines
763 B
Vue
32 lines
763 B
Vue
<script setup>
|
|
import { Handle, Position, useVueFlow } from '@vue-flow/core'
|
|
import { NodeToolbar } from '@vue-flow/node-toolbar'
|
|
|
|
const props = defineProps(['id', 'data'])
|
|
|
|
const actions = ['👎', '✋', '👍']
|
|
|
|
const { updateNodeData } = useVueFlow()
|
|
</script>
|
|
|
|
<template>
|
|
<NodeToolbar :is-visible="data.toolbarVisible" :position="data.toolbarPosition">
|
|
<button
|
|
v-for="action of actions"
|
|
:key="action"
|
|
type="button"
|
|
:class="{ selected: action === data.action }"
|
|
@click="updateNodeData(props.id, { action })"
|
|
>
|
|
{{ action }}
|
|
</button>
|
|
</NodeToolbar>
|
|
|
|
<div>
|
|
{{ data.label }}
|
|
</div>
|
|
|
|
<Handle type="target" :position="Position.Left" />
|
|
<Handle type="source" :position="Position.Right" />
|
|
</template>
|