<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/Download/polymer-cdn/master/lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="my-tree-select.html">
</head>
<body>
<h1>Hello Plunker!</h1>
<my-tree-select data='[{"label":"item 1","members":[{"label":"item 2","members":[{"label":"3"},{"label":"4"}]}]},{"label":"item 5"}]'></my-tree-select>
</body>
</html>
<script src="https://cdn.rawgit.com/Download/polymer-cdn/master/lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/master/lib/polymer.html">
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/master/lib/paper-menu/paper-menu.html">
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/master/lib/paper-menu/paper-submenu.html">
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/master/lib/paper-item/paper-item.html">
<dom-module id="my-tree-select">
<template>
<style>
:host {
display: block;
}
</style>
<paper-menu class$="{{getClass(submenu)}}">
<template is="dom-repeat" items="[[data]]">
<template is="dom-if" if="[[item.members]]">
<paper-submenu>
<paper-item class="menu-trigger">[[item.label]]</paper-item>
<my-tree-select data="[[item.members]]" submenu="true"></my-tree-select>
</paper-submenu>
</template>
<template is="dom-if" if="![[item.members]]">
<paper-item>[[item.label]]</paper-item>
</template>
</template>
</paper-menu>
</template>
<script>
Polymer({
is: 'my-tree-select',
properties: {
data: {
type: Array,
notify: true,
observer: '_handleData'
}, submenu: {
type: Boolean,
value: false
}
},
_handleData: function(newVal, oldVal) {
console.log(newVal);
}, getClass(submenu) {
return submenu ? 'menu-content' : '';
}
});
</script>
</dom-module>