mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
13ce23399c
## Summary Fixed design feedback and wired up the filter controls. ## Review Focus Design Feedback: - [4872888](48728881af) - [9a0b63e](9a0b63edce) Filters Hookup: - [07f22f8](07f22f8074) Misc (can focus less on): - claude guidance: [23e6fa9](23e6fa9723) - test helpers: [7801ed9](7801ed9e28) ## Screenshots (if applicable) <img width="1534" height="1175" alt="Screenshot 2025-09-23 at 1 03 12 PM" src="https://github.com/user-attachments/assets/d82088e4-7d72-4c6f-904e-5180774d64a5" /> <img width="1794" height="793" alt="Screenshot 2025-09-23 at 1 03 22 PM" src="https://github.com/user-attachments/assets/56eac2ba-5ecc-4a20-843f-ce683dea668c" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5737-Asset-Browser-Design-Review-Filters-2776d73d3650813e890bd16fa6a0433f) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: GitHub Action <action@github.com>
96 lines
2.6 KiB
Vue
96 lines
2.6 KiB
Vue
<template>
|
|
<BaseModalLayout
|
|
data-component-id="AssetBrowserModal"
|
|
class="size-full max-h-full max-w-full min-w-0"
|
|
:content-title="contentTitle"
|
|
@close="handleClose"
|
|
>
|
|
<template v-if="shouldShowLeftPanel" #leftPanel>
|
|
<LeftSidePanel
|
|
v-model="selectedCategory"
|
|
data-component-id="AssetBrowserModal-LeftSidePanel"
|
|
:nav-items="availableCategories"
|
|
>
|
|
<template #header-icon>
|
|
<div class="icon-[lucide--folder] size-4" />
|
|
</template>
|
|
<template #header-title>{{ $t('assetBrowser.browseAssets') }}</template>
|
|
</LeftSidePanel>
|
|
</template>
|
|
|
|
<template #header>
|
|
<SearchBox
|
|
v-model="searchQuery"
|
|
size="lg"
|
|
:placeholder="$t('assetBrowser.searchAssetsPlaceholder')"
|
|
class="max-w-96"
|
|
/>
|
|
</template>
|
|
|
|
<template #contentFilter>
|
|
<AssetFilterBar :assets="assets" @filter-change="updateFilters" />
|
|
</template>
|
|
|
|
<template #content>
|
|
<AssetGrid
|
|
:assets="filteredAssets"
|
|
@asset-select="handleAssetSelectAndEmit"
|
|
/>
|
|
</template>
|
|
</BaseModalLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, provide } from 'vue'
|
|
|
|
import SearchBox from '@/components/input/SearchBox.vue'
|
|
import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
|
|
import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
|
|
import AssetFilterBar from '@/platform/assets/components/AssetFilterBar.vue'
|
|
import AssetGrid from '@/platform/assets/components/AssetGrid.vue'
|
|
import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
|
|
import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
|
|
import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
|
|
import { OnCloseKey } from '@/types/widgetTypes'
|
|
|
|
const props = defineProps<{
|
|
nodeType?: string
|
|
inputName?: string
|
|
onSelect?: (assetPath: string) => void
|
|
onClose?: () => void
|
|
showLeftPanel?: boolean
|
|
assets?: AssetItem[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'asset-select': [asset: AssetDisplayItem]
|
|
close: []
|
|
}>()
|
|
|
|
provide(OnCloseKey, props.onClose ?? (() => {}))
|
|
|
|
const {
|
|
searchQuery,
|
|
selectedCategory,
|
|
availableCategories,
|
|
contentTitle,
|
|
filteredAssets,
|
|
selectAssetWithCallback,
|
|
updateFilters
|
|
} = useAssetBrowser(props.assets)
|
|
|
|
const shouldShowLeftPanel = computed(() => {
|
|
return props.showLeftPanel ?? true
|
|
})
|
|
|
|
function handleClose() {
|
|
props.onClose?.()
|
|
emit('close')
|
|
}
|
|
|
|
async function handleAssetSelectAndEmit(asset: AssetDisplayItem) {
|
|
emit('asset-select', asset)
|
|
await selectAssetWithCallback(asset.id, props.onSelect)
|
|
}
|
|
</script>
|