Braks
98a893108c
* docs: Animations * docs: add confetti gun * docs: update basic example on home page * docs(deps): Add stackblitz sdk to deps * chore: update yarn.lock * docs: use vue repl * docs: remove stackblitz sdk * docs: basic repl example * docs: use repl for examples/index.md (basic example) * docs: pass ext to repl * docs: add copy plugin * docs: use import map instead of dynamic imports * docs: use repl for custom node example * docs: hide repl errors * docs: use repl for custom connectionline example * docs: use repl for edges example * docs: exclude repl from ssr * docs: use repl for nested example * docs: use repl for stress example * docs: rename customNode to custom-node * docs: use repl for update-edge example * docs: use repl for update-node example * docs: use repl for validation example * docs: use repl for save-restore example * docs: scale down minimap in repl examples * docs: use repl for dnd example * docs: use repl for empty example * docs: use repl for hidden example * docs: use repl for interaction example * docs: use repl for multi example * docs: add pinia example with stackblitz * docs: update basic example * docs: update examples * docs: remove transition from intro * docs: update features * update: README.md * docs: scope css
65 lines
1.6 KiB
Vue
65 lines
1.6 KiB
Vue
<script setup>
|
|
import { Handle, Position } from '@braks/vue-flow'
|
|
import { computed } from 'vue'
|
|
import { presets } from './presets.js'
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['change'])
|
|
|
|
const targetHandleStyle = { background: '#555' }
|
|
const sourceHandleStyleA = { ...targetHandleStyle, top: '10px' }
|
|
const sourceHandleStyleB = { ...targetHandleStyle, bottom: '10px', top: 'auto' }
|
|
|
|
const onConnect = (params) => console.log('handle onConnect', params)
|
|
|
|
const onSelect = (color) => {
|
|
emit('change', color)
|
|
}
|
|
|
|
const colors = computed(() => {
|
|
return Object.keys(presets).map((color) => {
|
|
return {
|
|
name: color,
|
|
value: presets[color],
|
|
}
|
|
})
|
|
})
|
|
|
|
const selectedColor = computed(() => {
|
|
return colors.value.find((color) => color.value === props.data.color)
|
|
})
|
|
</script>
|
|
|
|
<script>
|
|
export default {
|
|
inheritAttrs: false,
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="selectedColor">
|
|
Select a color
|
|
</div>
|
|
<div
|
|
style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 90%; margin: auto; gap: 3px"
|
|
>
|
|
<template v-for="color of colors" :key="color.name">
|
|
<button
|
|
:title="color.name"
|
|
:style="{ backgroundColor: color.value }"
|
|
style="padding: 3px; width: 25px; height: 25px"
|
|
type="button"
|
|
@click="onSelect(color)"
|
|
></button>
|
|
</template>
|
|
</div>
|
|
<Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
|
|
<Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
|
|
</template>
|