Web Component Tree
Lightweight component for displaying hierarchical data < 20k 😎
Compatible with React, Vue, Angular & other frameworks.
Emits selections to parent component
Vue Usage
npm i web-component-tree
<script setup>
import TreeSelect from 'web-component-tree';
const items = [
{ groupLabel: 'Frontend Developer',
children: [
{groupLabel: 'Vue',
children: [ { label:'Options Api', value: 'optionsApi'},
{ label: 'Composition Api', value: 'compositionApi' }]},
{ label: 'React', value: 'react'},
{ label: 'Angular', value: 'angular'}
]},
{ groupLabel: 'Backend Developer',
children: [
{label: 'Bun', value: 'bun' },
{ label: 'Deno', value: 'deno' },
{ label:'Node', value: 'node' }
]},
];
onMounted(() => {
const treeElement = document.querySelector('#tree-select');
treeElement.items = items;
treeElement.selectionsChanged = (selections) => {
console.log(selections);
}
</script>
<template>
<tree-select id="tree-select"/>
</template>
vite config
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.includes('tree-select')
}
}
})
],
Contact
Feel free to ping me 💫
connect@giladshohat.com