mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
feat: add dynamic icon support for NavItem components (#5285)
* feat: add dynamic icon support for NavItem components - Created NavIcon component with switch-case based icon rendering - Added iconName prop to NavItem and NavItemData interface - Updated LeftSidePanel to pass icon names to nav items - Added sample icons to SampleModelSelector navigation (download, tag, layers, grid) - Uses i-lucide syntax without imports for better tree-shaking 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * test: add Storybook stories for navigation components - Add NavIcon.stories.ts with interactive icon selector and all icons gallery - Add NavItem.stories.ts with text customization and interactive list examples - Add LeftSidePanel.stories.ts with various navigation configurations - Remove old Navigation.stories.ts (replaced with component-specific stories) - Configure slot visibility and hide update:modelValue event in controls * refactor: simplify NavIcon component and improve type definitions * fix: add icon size specification for Lucide icons in Storybook * feature: NavItem story modified * fix: disable knip unresolved imports rule for virtual icon modules Add unresolved: 'off' to knip configuration to ignore virtual module imports from unplugin-icons (~icons/*). These are generated at build time and cannot be resolved statically. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * chore: v-if condition added * chore: knip ignoreUnresolved added based on knip issue PR * refactor: navItem types added & deleting any type on storybook files --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -14,6 +14,7 @@
|
||||
<NavItem
|
||||
v-for="subItem in item.items"
|
||||
:key="subItem.id"
|
||||
:icon="subItem.icon"
|
||||
:active="activeItem === subItem.id"
|
||||
@click="activeItem = subItem.id"
|
||||
>
|
||||
@@ -22,6 +23,7 @@
|
||||
</div>
|
||||
<div v-else class="flex flex-col gap-2">
|
||||
<NavItem
|
||||
:icon="item.icon"
|
||||
:active="activeItem === item.id"
|
||||
@click="activeItem = item.id"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user