diff --git a/src/ui/src/builder/BuilderSidebarToolbar.vue b/src/ui/src/builder/BuilderSidebarToolbar.vue index 47bb99bef..4ebf2542b 100644 --- a/src/ui/src/builder/BuilderSidebarToolbar.vue +++ b/src/ui/src/builder/BuilderSidebarToolbar.vue @@ -10,7 +10,7 @@ v-for="(categoryData, category) in categoriesData" :key="category" > -
+
{{ categoryData.icon ?? "question_mark" @@ -70,6 +70,8 @@ const wf = inject(injectionKeys.core); const ssbm = inject(injectionKeys.builderManager); const { removeInsertionCandidacy } = useDragDropComponent(wf); +type CategoryId = "Root" | "Layout" | "Content" | "Input" | "Embed" | "Other"; + type CategoryData = { isVisible?: boolean; isCollapsed?: boolean; @@ -78,7 +80,7 @@ type CategoryData = { const searchQuery = ref(""); -const categoriesData: Ref> = ref({ +const categoriesData: Ref> = ref({ Root: { isVisible: false, }, @@ -104,6 +106,15 @@ const categoriesData: Ref> = ref({ }, }); +function shouldDisplayCategory(categoryId: CategoryId): boolean { + if (categoriesData.value[categoryId]?.isVisible === false) return false; + + return ( + Object.keys(definitionsByDisplayCategory.value[categoryId] ?? {}) + .length > 0 + ); +} + function toggleCollapseCategory(categoryId: string) { const categoryData = categoriesData.value[categoryId]; categoryData.isCollapsed = !categoryData.isCollapsed; @@ -111,9 +122,8 @@ function toggleCollapseCategory(categoryId: string) { const definitionsByDisplayCategory = computed(() => { const types = wf.getSupportedComponentTypes(); - const result: Record< - string, - Record + const result: Partial< + Record> > = {}; types.map((type) => { @@ -142,6 +152,8 @@ const definitionsByDisplayCategory = computed(() => { result[displayCategory][type] = definition; }); + console.log(result); + return result; });