# grapla-vue

> Grafisk Plattform för FindOuts modell-appar

Latest version **0.0.15** (published 2017-09-01) · 0 weekly downloads

## Install

```sh
npm install grapla-vue
pnpm add grapla-vue
yarn add grapla-vue
bun add grapla-vue
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.15 |
| Published | 2017-09-01 |
| First published | 2017-08-28 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Lee Comstock @ FindOut Technologies |
| Maintainers | leecomstock |

## Links

- npm: https://www.npmjs.com/package/grapla-vue
- Repository: https://github.com/FindOut/grapla-vue
- Homepage: https://github.com/FindOut/grapla-vue#readme
- Issues: https://github.com/FindOut/grapla-vue/issues
- npm.io page: https://npm.io/package/grapla-vue

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.3.3
- [jquery](https://npm.io/package/jquery.md) ^3.2.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.4

## Recent versions

- 0.0.15 (latest) — 2017-09-01
- 0.0.14 — 2017-09-01
- 0.0.13 — 2017-08-31
- 0.0.12 — 2017-08-31
- 0.0.11 — 2017-08-31
- 0.0.10 — 2017-08-31
- 0.0.9 — 2017-08-31
- 0.0.8 — 2017-08-31
- 0.0.7 — 2017-08-29
- 0.0.6 — 2017-08-29
- 0.0.5 — 2017-08-29
- 0.0.4 — 2017-08-29
- 0.0.3 — 2017-08-29
- 0.0.2 — 2017-08-29
- 0.0.1 — 2017-08-28

## README

# grapla-vue

> Grafisk Plattform för FindOuts modell-appar (for Vue.js)

## Install

```bash
npm install grapla-vue --save
```

## Import

```bash
<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:

```bash
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:

```bash
# 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

```bash
# 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>
```

---
_Source: https://npm.io/package/grapla-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._