andika2r / vue-family-tree

Vue component to display family tree, based on HTML and CSS

Vue component to display family tree.

Installation

npm

npm install vue-family-tree --save

Demo

https://walkerz88.github.io/vue-family-tree/

Usage

<template>
  <div id="app">
    <VueFamilyTree
      :tree="tree"
      @card-click="cardClick"
    />
  </div>
</template>

<script>
import VueFamilyTree from 'vue-family-tree';

export default {
  name: 'App',
  components: {
    VueFamilyTree
  },
  data () {
    return {
      tree: [{
        firstPerson: {
          name: 'John Walker',
          image: 'https://picsum.photos/300/300?random=1'
        },
        secondPerson: {
          name: 'Jannet Grem',
          image: 'https://picsum.photos/300/300?random=2'
        },
        children: [{
          firstPerson: {
            name: 'Katia'
          },
          secondPerson: {
            name: 'Oleg'
          },
          children: [{
            firstPerson: {
              name: 'Gleb'
            },
            secondPerson: {
              name: 'Viktoriya'
            },
            children: [{
              firstPerson: {
                name: 'Rim'
              },
              secondPerson: {
                name: 'Natasha'
              }
            },
            {
              firstPerson: {
                name: 'Leonid'
              }
            }]
          },
          {
            firstPerson: {
              name: 'Olga'
            },
            secondPerson: {
              name: 'Nikita'
            }
          }]
        },
        {
          firstPerson: {
            name: 'Vitia'
          },
          secondPerson: {
            name: 'Dasha'
          }
        },
        {
          firstPerson: {
            name: 'Antonio Wild',
            image: 'https://picsum.photos/300/300?random=3'
          },
          secondPerson: {
            name: 'Olivia Olson'
          },
          children: [{
            firstPerson: {
              name: 'Kristina Wild'
            }
          },
          {
            firstPerson: {
              name: 'Alexey Wild'
            }
          },
          {
            firstPerson: {
              name: 'Viktor Wild'
            }
          }]
        }]
      }]
    }
  },
  methods: {
    cardClick (item) {
      console.log(item);
    }
  }
}
</script>

Props

Prop	Type	Default	Description
tree	Array	[]	JSON of your tree
enable-drag	Boolean	true	Enable or disable drag
wrapper-styles	Object	If enable-drag is true: {position: 'relative', width: '100%', height: '600px'} else null	Wrapper css parameters
drag-cursor	String	grabbing	CSS cursor name when drag is active
mouse-change-diff	Number	2	How many pixels mouse should move, to change cursor and prevent mouse events

Events

Event	Description
card-click	Click on card (You will receive full data from card object)

Slots

Card

Your custom card template. Please use fixed width in your card styles (will be fixed in feature)

<VueFamilyTree :tree="tree">
  <template v-slot:card="{item}">
    {{ item.name }}
  </template>
</VueFamilyTree>