59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import { defineComponent } from 'vue';
|
|
import { ITreeNode } from '../types';
|
|
import { useBlockTree } from '../use-block-tree';
|
|
import { useActivation } from '../use-activation';
|
|
|
|
import { SbContextMenu } from './ContextMenu';
|
|
import { SbButton } from './Button';
|
|
|
|
import './TreeBlockSelect.scss';
|
|
|
|
export const SbTreeBlockSelect = defineComponent({
|
|
name: 'sb-main-menu',
|
|
|
|
setup() {
|
|
const { blockTree } = useBlockTree();
|
|
const {
|
|
activate,
|
|
activeBlockId,
|
|
} = useActivation();
|
|
|
|
const treeToHtml = (tree: ITreeNode, close: Function) => <li
|
|
class={{
|
|
'sb-tree-block-select__block': true,
|
|
'sb-tree-block-select__block_active': activeBlockId.value === tree.id,
|
|
}}
|
|
>
|
|
<button
|
|
class="sb-tree-block-select__block-name"
|
|
onClick={() => {
|
|
activate(tree.id);
|
|
close();
|
|
}}
|
|
onMouseenter={() => activate(tree.id)}
|
|
>{tree.name}</button>
|
|
{tree.children?.length
|
|
? <ul class="sb-tree-block-select__list">
|
|
{tree.children?.map((child: ITreeNode) => treeToHtml(child, close))}
|
|
</ul>
|
|
: null
|
|
}
|
|
</li>;
|
|
|
|
|
|
return () => (
|
|
console.log(blockTree.value) || blockTree.value
|
|
? <SbContextMenu
|
|
class="sb-tree-block-select"
|
|
v-slots={{
|
|
context: ({ toggle }: { toggle: Function }) => <SbButton {...{ onClick: toggle }}>Tree</SbButton>,
|
|
default: ({ close }: { close: Function }) => <ul
|
|
class="sb-tree-block-select__list sb-tree-block-select__list_base"
|
|
>{treeToHtml(blockTree.value as ITreeNode, close)}</ul>,
|
|
}}
|
|
/>
|
|
: ''
|
|
);
|
|
},
|
|
});
|