API

{ type: Boolean, default: false }

{ type: String, default: "children" }

{ type: Boolean, default: true }

{ type: Number, default: 20 }

{ type:  "index" | ((stat: Stat<any>, index: number) => any), default: 'index' }

{ type: Boolean, default: false }

{ type: (stat: Stat<any>) => Stat<any> }

{ type: Boolean, default: false }

{ type: String, default: "text" }

{ type: Boolean, default: false }

{ type: Number, default: 20 }

{ type: Boolean, default: false }

{ type: Number, default: 8 }

{ type: Boolean, default: false }

type type = Stat<your_node_type>[]

type type = Stat<your_node_type>[]

type type = Stat<your_node_type>[]

<template>
  <div>
    <Draggable ref="tree" class="mtl-tree" v-model="treeData" treeLine
      ><template #default="{ node, stat }">
        <OpenIcon
          v-if="stat.children.length"
          :open="stat.open"
          class="mtl-mr"
          @click.native="stat.open = !stat.open"
        />
        <input
          class="mtl-checkbox mtl-mr"
          type="checkbox"
          v-model="stat.checked"
        />
        <span class="mtl-ml">{{ node.text }}</span>
      </template></Draggable
    >
    <div class="actions">
      <button @click="addAppendToFirstNode()">add: append to first node</button>
      <button @click="addAfterSecondNode()">add: after second node</button>
      <button @click="addNestedNewNodes()">add: nested new nodes</button>
      <button @click="addMulti()">addMulti</button>
      <br />
      <button @click="batchUpdate()">batchUpdate</button>
      <br />
      <button @click="$refs.tree.closeAll()">closeAll</button>
      <button @click="$refs.tree.openAll()">openAll</button>
      <button
        @click="
          $refs.tree.openNodeAndParents(
            treeData[0].children[0].children[1].children[0]
          )
        "
      >
        openNodeAndParents
      </button>
      <button @click="getChecked()">getChecked</button>
      <button @click="getChecked(true)">getChecked(true)</button>
      <br />
      <button @click="getDataAll()">getData: all</button>
      <button @click="getDataFirstNode()">getData: first node</button>
    </div>
  </div>
</template>

<script>
  import { BaseTree, Draggable, pro, OpenIcon } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'
  import '@he-tree/vue/style/material-design.css'

  export default {
    components: { Draggable, OpenIcon },
    data() {
      return {
        treeData: [
          {
            text: 'Projects',
            children: [
              {
                text: 'Frontend',
                children: [
                  {
                    text: 'Vue',
                    children: [
                      {
                        text: 'Nuxt',
                      },
                    ],
                  },
                  {
                    text: 'React',
                    children: [
                      {
                        text: 'Next',
                      },
                    ],
                  },
                  {
                    text: 'Angular',
                  },
                ],
              },
              {
                text: 'Backend',
              },
            ],
          },
          { text: 'Photos' },
          { text: 'Videos' },
        ],
      }
    },
    methods: {
      notify() {
        alert(`Outputed to browser console, please check`)
      },
      addAppendToFirstNode() {
        this.$refs.tree.add(
          { text: 'new node' },
          this.$refs.tree.rootChildren[0],
          this.$refs.tree.rootChildren[0].children.length
        )
      },
      addAfterSecondNode() {
        this.$refs.tree.add({ text: 'new node' }, null, 2)
      },
      addNestedNewNodes() {
        this.$refs.tree.add(
          { text: 'new parent', children: [{ text: 'new child' }] },
          null,
          2
        )
      },
      addMulti() {
        // nested new nodes supported
        this.$refs.tree.addMulti(
          [{ text: 'addMulti1' }, { text: 'addMulti2' }],
          this.$refs.tree.rootChildren[1],
          0
        )
      },
      batchUpdate() {
        this.$refs.tree.batchUpdate(() => {
          this.addAppendToFirstNode()
          this.addMulti()
        })
      },
      getChecked(withDemi) {
        console.log(this.$refs.tree.getChecked(withDemi))
        this.notify()
      },
      getDataAll() {
        console.log(this.$refs.tree.getData())
        this.notify()
      },
      getDataFirstNode() {
        console.log(
          this.$refs.tree.getData(null, this.$refs.tree.rootChildren[0])
        )
        this.notify()
      },
    },
  }
</script>
<style scoped>
  .actions {
    margin-top: 10px;
    border-top: 1px solid #ccc;
    padding-top: 10px;
  }
  button {
    border: 1px solid #ccc;
    padding: 2px 5px;
    border-radius: 5px;
    margin-right: 8px;
    margin-bottom: 5px;
    font-size: small;
  }
</style>

(nodeData: unknown, parent?: Stat<unknown> | null | undefined, index?: number | null | undefined): void;

(
  dataArr: any[],
  parent?: Stat<any> | null,
  startIndex?: number | null
): void;

(task: () => any): void;

(): void

(withDemi?: boolean | undefined): Stat<unknown>[]

(filter?: ((data: never) => never) | undefined, root?: Stat<never> | undefined): never[];

(): HTMLElement;

(stat: Stat<never>): Stat<never>[];

(nodeData: unknown): Stat<unknown>

(withDemi?: boolean | undefined): Stat<unknown>[]

(nodeData: unknown): boolean

(statOrNodeData: Stat<unknown>|unknown): boolean;

(stat: Stat<unknown>, opt?: {
    withSelf: boolean;
} | undefined): Generator<Stat<unknown>, void, unknown>;

for (const parentStat of tree.iterateParent(nodeStat, { withSelf: false })) {
  //
}

(stat: Stat<unknown>, parent: Stat<unknown> | null, index: number): boolean;

(): void

(nodeDataOrStat): void

(stat: Stat<unknown>): boolean;

(dataArr: any[]): boolean;

(): void

(stat: Stat<any>) : void | Promise<void>

{
  type: Boolean
}

{
  type: Boolean
}

{ type: Boolean, default: true }

{ type: Number, default: 0 }

(stat: Stat<any>) : boolean | null

(stat: Stat<any>) : boolean | null

(event: DragEvent) : any

{ type: Boolean, default: false }

{
  type: Number
}

(event: DragEvent) : boolean

"mouse" | "default" | ((dragElement: HTMLElement) : Point)

boolean | () : boolean

{
  type: [String, Array]
} // string | string[]

(el: HTMLElement): Stat<any> | null

(node: Stat<any>): boolean

(node: Stat<any>): boolean

(event: DragEvent) => void

{
  [x: string]: any // You can add any other keys to a stat.
  data: T // Node data.
  open: boolean // Is opened.
  parent: Stat<T> | null // Parent stat.
  children: Stat<T>[] // Children stats.
  level: number // Level start from 1.
  isStat: boolean // Detect if is stat object.
  hidden: boolean // If hidden.
  checked: boolean | 0 // If checked. 0 mean just some children checked.
  draggable: boolean | null // null means inherit parent.
  droppable: boolean | null // null means inherit parent.
  style: any // Customize node style. Vue's style format.
  class: any // Customize node class name. Vue's class format.
}

// vue3
import { dragContext } from '@he-tree/vue'
// vue2
import { dragContext } from '@he-tree/vue/vue2'

<template>
  <Draggable ref="tree" v-model="treeData" :eachDroppable="eachDroppable" />
</template>

<script>
  import { Draggable, dragContext } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'

  export default {
    components: { Draggable },
    data() {
      return {
        treeData: [
          { text: '1' },
          { text: '2' },
          { text: '3' },
          { text: '4' },
          { text: '5' },
          { text: '6' },
        ],
      }
    },
    methods: {
      eachDroppable(targetStat) {
        const isOdd = (n) => parseInt(n) % 2 === 1
        return (
          isOdd(targetStat.data.text) === isOdd(dragContext.dragNode.data.text)
        )
      },
    },
  }
</script>

{
  tree: DraggableTreeType; // Draggable component instance.
  dragNode: Stat<any>; // The dragging node.
  parent: Stat<any> | null; // Parent of dragging node.
  siblings: Stat<any>[]; // Siblings of dragging node.
  indexBeforeDrop: number; // Index of dragging node before drop.
}