+
@@ -16,18 +22,18 @@
v-model="baseModels"
:label="$t('assetBrowser.baseModels')"
:options="availableBaseModels"
- :class="selectClasses"
+ class="min-w-32"
data-component-id="asset-filter-base-models"
@update:model-value="handleFilterChange"
/>
-
+
@@ -48,7 +54,6 @@ import type { SelectOption } from '@/components/input/types'
import { t } from '@/i18n'
import { useAssetFilterOptions } from '@/platform/assets/composables/useAssetFilterOptions'
import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { cn } from '@/utils/tailwindUtil'
export interface FilterState {
fileFormats: string[]
@@ -56,35 +61,31 @@ export interface FilterState {
sortBy: string
}
+const SORT_OPTIONS = [
+ { name: t('assetBrowser.sortRecent'), value: 'recent' },
+ { name: t('assetBrowser.sortAZ'), value: 'name-asc' },
+ { name: t('assetBrowser.sortZA'), value: 'name-desc' }
+] as const
+
+type SortOption = (typeof SORT_OPTIONS)[number]['value']
+
+const sortOptions = [...SORT_OPTIONS]
+
const { assets = [] } = defineProps<{
assets?: AssetItem[]
}>()
const fileFormats = ref([])
const baseModels = ref([])
-const sortBy = ref('name-asc')
+const sortBy = ref('recent')
const { availableFileFormats, availableBaseModels } =
useAssetFilterOptions(assets)
-const sortOptions = [
- { name: t('assetBrowser.sortAZ'), value: 'name-asc' },
- { name: t('assetBrowser.sortZA'), value: 'name-desc' },
- { name: t('assetBrowser.sortRecent'), value: 'recent' }
-]
-
const emit = defineEmits<{
filterChange: [filters: FilterState]
}>()
-const containerClasses = cn(
- 'flex gap-4 items-center justify-between',
- 'px-6 pt-2 pb-6'
-)
-const leftSideClasses = cn('flex gap-4 items-center')
-const rightSideClasses = cn('flex items-center')
-const selectClasses = cn('min-w-32')
-
function handleFilterChange() {
emit('filterChange', {
fileFormats: fileFormats.value.map((option: SelectOption) => option.value),
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
index 3af54edb9d..90d2565a60 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
@@ -1,31 +1,37 @@
-
-
+
+
diff --git a/tests-ui/platform/assets/components/AssetFilterBar.test.ts b/tests-ui/platform/assets/components/AssetFilterBar.test.ts
index 8e659d24f3..d9762e9782 100644
--- a/tests-ui/platform/assets/components/AssetFilterBar.test.ts
+++ b/tests-ui/platform/assets/components/AssetFilterBar.test.ts
@@ -75,23 +75,6 @@ function mountAssetFilterBar(props = {}) {
describe('AssetFilterBar', () => {
describe('Filter State Management', () => {
- it('maintains correct initial state', () => {
- // Provide assets with options so filters are visible
- const assets = [
- createAssetWithSpecificExtension('safetensors'),
- createAssetWithSpecificBaseModel('sd15')
- ]
- const wrapper = mountAssetFilterBar({ assets })
-
- // Test initial state through component props
- const multiSelects = wrapper.findAllComponents({ name: 'MultiSelect' })
- const singleSelect = wrapper.findComponent({ name: 'SingleSelect' })
-
- expect(multiSelects[0].props('modelValue')).toEqual([])
- expect(multiSelects[1].props('modelValue')).toEqual([])
- expect(singleSelect.props('modelValue')).toBe('name-asc')
- })
-
it('handles multiple simultaneous filter changes correctly', async () => {
// Provide assets with options so filters are visible
const assets = [