mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-14 01:20:03 +00:00
V2 Node Search (+ hidden Node Library changes) (#8987)
## Summary Redesigned node search with categories ## Changes - **What**: Adds a v2 search component, leaving the existing implementation untouched - It also brings onboard the incomplete node library & preview changes, disabled and behind a hidden setting - **Breaking**: Changes the 'default' value of the node search setting to v2, adding v1 (legacy) as an option ## Screenshots (if applicable) https://github.com/user-attachments/assets/2ab797df-58f0-48e8-8b20-2a1809e3735f ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8987-V2-Node-Search-hidden-Node-Library-changes-30c6d73d36508160902bcb92553f147c) by [Unito](https://www.unito.io) --------- Co-authored-by: Yourz <crazilou@vip.qq.com> Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org>
This commit is contained in:
63
src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue
Normal file
63
src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<TabsContent value="custom" class="flex-1 flex flex-col h-full">
|
||||
<div
|
||||
v-for="(section, index) in sections"
|
||||
:key="section.title ?? index"
|
||||
class="flex-1 overflow-y-auto h-full"
|
||||
>
|
||||
<!-- Section header -->
|
||||
<h3
|
||||
v-if="section.title"
|
||||
class="px-4 py-2 text-xs font-medium tracking-wide text-muted-foreground mb-0"
|
||||
>
|
||||
{{ section.title }}
|
||||
</h3>
|
||||
<!-- Section tree -->
|
||||
<TreeExplorerV2
|
||||
v-model:expanded-keys="expandedKeys"
|
||||
:root="section.root"
|
||||
:show-context-menu="false"
|
||||
@node-click="(node) => emit('nodeClick', node)"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-none py-3 border-t border-border-default text-center">
|
||||
<Button
|
||||
variant="secondary"
|
||||
class="justify-start gap-3"
|
||||
@click="handleOpenManager"
|
||||
>
|
||||
<i class="icon-[lucide--blocks] size-5 text-muted-foreground" />
|
||||
{{ $t('g.manageExtensions') }}
|
||||
</Button>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TabsContent } from 'reka-ui'
|
||||
|
||||
import TreeExplorerV2 from '@/components/common/TreeExplorerV2.vue'
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
|
||||
import type {
|
||||
NodeLibrarySection,
|
||||
RenderedTreeExplorerNode
|
||||
} from '@/types/treeExplorerTypes'
|
||||
import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
|
||||
|
||||
defineProps<{
|
||||
sections: NodeLibrarySection[]
|
||||
}>()
|
||||
|
||||
const expandedKeys = defineModel<string[]>('expandedKeys', { required: true })
|
||||
|
||||
const emit = defineEmits<{
|
||||
nodeClick: [node: RenderedTreeExplorerNode<ComfyNodeDefImpl>]
|
||||
}>()
|
||||
|
||||
const managerState = useManagerState()
|
||||
|
||||
async function handleOpenManager() {
|
||||
await managerState.openManager()
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user