mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-30 12:59:55 +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>
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import type { CSSProperties } from 'vue'
|
|
|
|
interface GridOptions {
|
|
/** Minimum width for each grid item (default: 15rem) */
|
|
minWidth?: string
|
|
/** Maximum width for each grid item (default: 1fr) */
|
|
maxWidth?: string
|
|
/** Padding around the grid (default: 0) */
|
|
padding?: string
|
|
/** Gap between grid items (default: 1rem) */
|
|
gap?: string
|
|
/** Fixed number of columns (overrides auto-fill with minmax) */
|
|
columns?: number
|
|
}
|
|
|
|
/**
|
|
* Creates CSS grid styles for responsive grid layouts
|
|
* @param options Grid configuration options
|
|
* @returns CSS properties object for grid styling
|
|
*/
|
|
export function createGridStyle(options: GridOptions = {}): CSSProperties {
|
|
const {
|
|
minWidth = '15rem',
|
|
maxWidth = '1fr',
|
|
padding = '0',
|
|
gap = '1rem',
|
|
columns
|
|
} = options
|
|
|
|
// Runtime validation for columns
|
|
if (columns !== undefined && columns < 1) {
|
|
console.warn('createGridStyle: columns must be >= 1, defaulting to 1')
|
|
}
|
|
|
|
const gridTemplateColumns = columns
|
|
? `repeat(${Math.max(1, columns ?? 1)}, 1fr)`
|
|
: `repeat(auto-fill, minmax(${minWidth}, ${maxWidth}))`
|
|
|
|
return {
|
|
display: 'grid',
|
|
gridTemplateColumns,
|
|
padding,
|
|
gap
|
|
}
|
|
}
|