98 lines
2.4 KiB
Svelte
98 lines
2.4 KiB
Svelte
<script>
|
|
import { goto } from "@sveltech/routify"
|
|
import { store, currentAssetName } from "builderStore"
|
|
import components from "./temporaryPanelStructure.js"
|
|
import { DropdownMenu } from "@budibase/bbui"
|
|
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
|
|
|
|
const categories = components.categories
|
|
let selectedIndex
|
|
let anchors = []
|
|
let popover
|
|
$: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
|
|
|
|
const close = () => {
|
|
popover.hide()
|
|
}
|
|
|
|
const onCategoryChosen = (category, idx) => {
|
|
if (category.isCategory) {
|
|
selectedIndex = idx
|
|
popover.show()
|
|
} else {
|
|
onComponentChosen(category)
|
|
}
|
|
}
|
|
|
|
const onComponentChosen = component => {
|
|
store.actions.components.create(component._component, component.presetProps)
|
|
const path = store.actions.components.findRoute($store.currentComponentInfo)
|
|
$goto(`./:page/:screen/${path}`)
|
|
close()
|
|
}
|
|
</script>
|
|
|
|
<div class="container">
|
|
{#each categories as category, idx}
|
|
<div
|
|
bind:this={anchors[idx]}
|
|
class="category"
|
|
on:click={() => onCategoryChosen(category, idx)}
|
|
class:active={idx === selectedIndex}>
|
|
{#if category.icon}<i class={category.icon} />{/if}
|
|
<span>{category.name}</span>
|
|
{#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<DropdownMenu
|
|
on:close={() => (selectedIndex = null)}
|
|
bind:this={popover}
|
|
{anchor}
|
|
align="left">
|
|
<DropdownContainer>
|
|
{#each categories[selectedIndex].children as item}
|
|
{#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
|
|
<DropdownItem
|
|
icon={item.icon}
|
|
title={item.name}
|
|
on:click={() => onComponentChosen(item)} />
|
|
{/if}
|
|
{/each}
|
|
</DropdownContainer>
|
|
</DropdownMenu>
|
|
|
|
<style>
|
|
.container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
min-height: 24px;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-l);
|
|
}
|
|
|
|
.category {
|
|
color: var(--grey-7);
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
.category span {
|
|
font-weight: 500;
|
|
user-select: none;
|
|
}
|
|
.category.active,
|
|
.category:hover {
|
|
color: var(--ink);
|
|
}
|
|
.category i:not(:last-child) {
|
|
font-size: 16px;
|
|
}
|
|
</style>
|