mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-05 15:40:10 +00:00
2407748425
* [feat] Add enhanced filter UI components with search and clear functionality - Add SearchBox, clear all button, and item count to MultiSelect header - Add 'fit-content' size option to button types for flexible sizing - Update SingleSelect and ModelSelector components for consistency - Add localization strings for item selection and clear all functionality Co-Authored-By: Claude <noreply@anthropic.com> * Update locales [skip ci] --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: github-actions <github-actions@github.com>
34 lines
1.0 KiB
Vue
34 lines
1.0 KiB
Vue
<template>
|
|
<div :class="wrapperStyle">
|
|
<i-lucide:search :class="iconColorStyle" />
|
|
<InputText
|
|
v-model="searchQuery"
|
|
:placeholder="placeHolder || 'Search...'"
|
|
type="text"
|
|
unstyled
|
|
class="w-full p-0 border-none outline-none bg-transparent text-xs text-neutral dark-theme:text-white"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import InputText from 'primevue/inputtext'
|
|
import { computed, defineModel } from 'vue'
|
|
|
|
const { placeHolder, hasBorder = false } = defineProps<{
|
|
placeHolder?: string
|
|
hasBorder?: boolean
|
|
}>()
|
|
const searchQuery = defineModel<string>('')
|
|
|
|
const wrapperStyle = computed(() => {
|
|
return hasBorder
|
|
? 'flex w-full items-center rounded gap-2 bg-white dark-theme:bg-zinc-800 p-1 border border-solid border-zinc-200 dark-theme:border-zinc-700'
|
|
: 'flex w-full items-center rounded px-2 py-1.5 gap-2 bg-white dark-theme:bg-zinc-800'
|
|
})
|
|
|
|
const iconColorStyle = computed(() => {
|
|
return !hasBorder ? 'text-neutral' : 'text-zinc-300 dark-theme:text-zinc-700'
|
|
})
|
|
</script>
|