<!DOCTYPE html>
<html lang="en" data-monster-theme-name="mytheme">
<head>
<meta charset="utf-8">
<title>TreeMenu | Web Components</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="importmap">
{
"imports": {
"@schukai/monster/": "https://cdn.skypack.dev/@schukai/monster/",
"@schukai/component-form/": "https://cdn.skypack.dev/@schukai/component-form/"
}
}
</script>
</head>
<body>
<h1 tabindex="0">TreeMenu</h1>
<div>
<div class="row">
<div class="sub" id="container" style="width:170px;height:300px">
</div>
</div>
</div>
<script type="module">
import {Updater} from "https://cdn.skypack.dev/@schukai/monster/source/dom/updater.mjs";
import {TreeMenu} from "../../../../application/source/tree-menu.mjs"
import {RestAPI} from "https://cdn.skypack.dev/@schukai/monster/source/data/datasource/restapi.js";
const datasource = new RestAPI({
url: 'https://monsterjs.org/assets/14-forms-treeselect-data.json?filter=${filter}'
}, {
url: 'https://httpbin.org/post'
});
const treeMenu = document.createElement('monster-tree-menu');
treeMenu.setOption('mapping.selector', 'dataset.*');
treeMenu.setOption('mapping.labelTemplate', '${localeLabel | index:en}');
treeMenu.setOption('mapping.valueTemplate', '${cid | tostring }');
treeMenu.setOption('mapping.parentTemplate', 'parentCID');
treeMenu.setOption('mapping.idTemplate', 'cid');
treeMenu.setOption('datasource', datasource);
// treeMenu.addEventListener('monster-change', (e) => console.log('1', e))
// treeMenu.addEventListener('monster-changed', (e) => console.log('2', e))
document.getElementById('container').appendChild(treeMenu);
</script>
</body>
</html>