mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-27 08:25:50 +00:00
e70ddea684
* feature: size adjust * feature: design adjust * fix: popover width, height added * fix: li style override * refactor: improve component readability and maintainability per PR feedback - Replace CardGridList component with createGridStyle utility function - Add runtime validation for grid column values - Remove !important usage in MultiSelect, use cn() function instead - Extract popover sizing logic into usePopoverSizing composable - Improve class string readability by splitting into logical groups - Use Tailwind size utilities (size-8, size-10) instead of separate width/height - Remove magic numbers in SearchBox, align with button sizes - Rename BaseWidgetLayout to BaseModalLayout for clarity - Enhance SearchBox click area to cover entire component - Refactor long class strings using cn() utility across components * fix: BaseWidgetLayout => BaseModalLayout * fix: CardGrid deleted * fix: unused exported types * Update test expectations [skip ci] * chore: code review * Update test expectations [skip ci] * chore: restore screenshot --------- Co-authored-by: github-actions <github-actions@github.com>
71 lines
1.6 KiB
Vue
71 lines
1.6 KiB
Vue
<template>
|
|
<div :class="wrapperStyle">
|
|
<i-lucide:search :class="iconColorStyle" />
|
|
<InputText
|
|
v-model="searchQuery"
|
|
:placeholder="placeHolder || 'Search...'"
|
|
type="text"
|
|
unstyled
|
|
:class="inputStyle"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import InputText from 'primevue/inputtext'
|
|
import { computed } from 'vue'
|
|
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
const {
|
|
placeHolder,
|
|
showBorder = false,
|
|
size = 'md'
|
|
} = defineProps<{
|
|
placeHolder?: string
|
|
showBorder?: boolean
|
|
size?: 'md' | 'lg'
|
|
}>()
|
|
// defineModel without arguments uses 'modelValue' as the prop name
|
|
const searchQuery = defineModel<string>()
|
|
|
|
const wrapperStyle = computed(() => {
|
|
const baseClasses = [
|
|
'relative flex w-full items-center gap-2',
|
|
'bg-white dark-theme:bg-zinc-800',
|
|
'cursor-text'
|
|
]
|
|
|
|
if (showBorder) {
|
|
return cn(
|
|
...baseClasses,
|
|
'rounded p-2',
|
|
'border border-solid',
|
|
'border-zinc-200 dark-theme:border-zinc-700'
|
|
)
|
|
}
|
|
|
|
// 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(...baseClasses, 'rounded-lg', sizeClasses)
|
|
})
|
|
|
|
const inputStyle = computed(() => {
|
|
return cn(
|
|
'absolute inset-0 w-full h-full pl-11',
|
|
'border-none outline-none bg-transparent',
|
|
'text-sm text-neutral dark-theme:text-white'
|
|
)
|
|
})
|
|
|
|
const iconColorStyle = computed(() => {
|
|
return cn(
|
|
!showBorder ? 'text-neutral' : ['text-zinc-300', 'dark-theme:text-zinc-700']
|
|
)
|
|
})
|
|
</script>
|