0.0.15 • Published 7 years ago
grapla-vue v0.0.15
grapla-vue
Grafisk Plattform för FindOuts modell-appar (for Vue.js)
Install
npm install grapla-vue --save
Import
<script>
import grapla from 'grapla-vue'
export default {
components: {
...grapla.components
},
methods: {
...grapla.functions
}
}
</script>
Usage
Supports data-driven creation of elements as well as slots
Example JSON:
data: {
nodes: [
{
id: 0, # all nodes need unique ids if relationships use ids
text: 'element text', # optional text in elements
type: 'Box', # type is necessary when using the dynamicComponent
x: 400, # when using the coordinatesLayout
y: 100, # when using the coordinatesLayout
width: 200, # when using the coordinatesLayout
height: 100, # when using the coordinatesLayout
children: [ # for nested elements
{
id: 1,
type: 'Ball',
},
{
id: 2,
type: 'Ball',
},
]
},
{
id: 3,
type: 'Ball',
x: 200,
y: 300,
width: 100,
height: 100,
}
],
relationships: [
{
from: 1, # will draw a line between two elements based on id
to: 2, # will draw a line between two elements based on id
},
{
from: 0,
to: 3,
},
{
path: 'M200 420,C80 420,80 130,250 130' # will draw a finished path based on string
}
]
}
Example HTML:
# main grapla component
<grapla>
# coordinatesLayout component for absolute positioning child elements
# set x y width and height on child elements
<coordinates-layout :data="{width: 900, height: 600}" slot="layout">
<box :data="{id: 99, text: 'test', x: 300, y: 400, width: 200, height: 100}"></box>
<ball :data="{id: 100, x: 700, y: 300, width: 150, height: 150}"></ball>
<box :data="{id: 101, text: 'test test', x: 300, y: 150, width: 100, height: 200}">
# ball component inside box component
<ball :data="{id: 102}"></ball>
</box>
</coordinates-layout>
# flexWrapLayout component for positioning child elements according to flex-wrap flow
<flex-wrap-layout slot="layout">
# v-for looping out nodes based on data array
# dynamicComponent will create element based on type variable, like 'Box' or 'Ball'
<dynamic-component
v-for="node in data.nodes"
:data="node"
:key="node.id">
# v-for looping out child nodes based on children array
<dynamic-component
v-for="childNode in node.children"
:data="childNode"
:key="childNode.id">
</dynamic-component>
</dynamic-component>
</flex-wrap-layout>
# v-for looping out relationships based on data array
<relationship
v-for="(relationship, index) in data.relationships"
:data="relationship"
:key="index"
slot="rels">
</relationship>
# relationship components that draws a line between two elements based on ids
<relationship :data="{ from: 99, to: 100 }" slot="rels"></relationship>
<relationship :data="{ from: 100, to: 102 }" slot="rels"></relationship>
# relationship component can also take a finished svg path d string
<relationship :data="{ path: 'M200 400,C100 400,100 150,250 150' }" slot="rels"></relationship>
</grapla>
Make sure to set 'slot' attribute on layout and relationship components for grapla to know how to use the component
# main grapla component
<grapla>
# layout components use slot 'layout'
<flex-wrap-layout slot="layout">
<box :data="{id: 0, text: 'a box'}">
<ball :data="{id: 1}"></ball>
</box>
<box :data="{id: 2, text: 'another box'}"></box>
</flex-wrap-layout>
# relationship components use slot 'rels'
<relationship :data="{ from: 0, to: 2 }" slot="rels"></relationship>
</grapla>