mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
fba580dc7d
## Summary Still a work in progress. Buttons with just icons are already in the stories for button. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7598-WIP-Component-Button-Migration-2-IconButton-2cc6d73d365081c09143c63464ac60b7) by [Unito](https://www.unito.io)
132 lines
3.1 KiB
Vue
132 lines
3.1 KiB
Vue
<template>
|
|
<div
|
|
:class="
|
|
cn(
|
|
'relative flex w-full items-center gap-2 bg-comfy-input cursor-text text-comfy-input-foreground',
|
|
customClass,
|
|
wrapperStyle
|
|
)
|
|
"
|
|
>
|
|
<InputText
|
|
ref="inputRef"
|
|
v-model="modelValue"
|
|
:placeholder
|
|
:autofocus
|
|
unstyled
|
|
class="absolute inset-0 size-full pl-11 border-none outline-none bg-transparent text-sm"
|
|
:aria-label="placeholder"
|
|
/>
|
|
<Button
|
|
v-if="filterIcon"
|
|
size="icon"
|
|
variant="textonly"
|
|
class="filter-button absolute right-0 inset-y-0 m-0 p-0"
|
|
@click="$emit('showFilter', $event)"
|
|
>
|
|
<i :class="filterIcon" />
|
|
</Button>
|
|
<InputIcon v-if="!modelValue" :class="icon" />
|
|
<Button
|
|
v-if="modelValue"
|
|
class="clear-button absolute left-0"
|
|
variant="textonly"
|
|
size="icon"
|
|
@click="modelValue = ''"
|
|
>
|
|
<i class="icon-[lucide--x] size-4" />
|
|
</Button>
|
|
</div>
|
|
<div v-if="filters?.length" class="search-filters flex flex-wrap gap-2 pt-2">
|
|
<SearchFilterChip
|
|
v-for="filter in filters"
|
|
:key="filter.id"
|
|
:text="filter.text"
|
|
:badge="filter.badge"
|
|
:badge-class="filter.badgeClass"
|
|
@remove="$emit('removeFilter', filter)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" generic="TFilter extends SearchFilter">
|
|
import { cn } from '@comfyorg/tailwind-utils'
|
|
import { watchDebounced } from '@vueuse/core'
|
|
import InputIcon from 'primevue/inputicon'
|
|
import InputText from 'primevue/inputtext'
|
|
import { computed, ref } from 'vue'
|
|
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
|
|
import type { SearchFilter } from './SearchFilterChip.vue'
|
|
import SearchFilterChip from './SearchFilterChip.vue'
|
|
|
|
const {
|
|
placeholder = 'Search...',
|
|
icon = 'pi pi-search',
|
|
debounceTime = 300,
|
|
filterIcon,
|
|
filters = [],
|
|
autofocus = false,
|
|
showBorder = false,
|
|
size = 'md',
|
|
class: customClass
|
|
} = defineProps<{
|
|
placeholder?: string
|
|
icon?: string
|
|
debounceTime?: number
|
|
filterIcon?: string
|
|
filters?: TFilter[]
|
|
autofocus?: boolean
|
|
showBorder?: boolean
|
|
size?: 'md' | 'lg'
|
|
class?: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'search', value: string, filters: TFilter[]): void
|
|
(e: 'showFilter', event: Event): void
|
|
(e: 'removeFilter', filter: TFilter): void
|
|
}>()
|
|
|
|
const modelValue = defineModel<string>({ required: true })
|
|
|
|
const inputRef = ref()
|
|
|
|
defineExpose({
|
|
focus: () => {
|
|
inputRef.value?.$el?.focus()
|
|
}
|
|
})
|
|
|
|
watchDebounced(
|
|
modelValue,
|
|
(value: string) => {
|
|
emit('search', value, filters)
|
|
},
|
|
{ debounce: debounceTime }
|
|
)
|
|
|
|
const wrapperStyle = computed(() => {
|
|
if (showBorder) {
|
|
return cn('rounded p-2 border border-solid border-border-default')
|
|
}
|
|
|
|
// Size-specific classes matching button sizes for consistency
|
|
const sizeClasses = {
|
|
md: 'h-8 px-2 py-1.5', // Matches button sm size
|
|
lg: 'h-10 px-4 py-2' // Matches button md size
|
|
}[size]
|
|
|
|
return cn('rounded-lg', sizeClasses)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
@reference '../../assets/css/style.css';
|
|
|
|
:deep(.p-inputtext) {
|
|
--p-form-field-padding-x: 0.625rem;
|
|
}
|
|
</style>
|