@@ -3,40 +3,67 @@ import type { GridSchema } from '@object-ui/types';
33import { renderChildren } from '../../lib/utils' ;
44import { cn } from '../../lib/utils' ;
55
6+ // Helper maps to ensure Tailwind classes are scanned and included
7+ const GRID_COLS : Record < number , string > = {
8+ 1 : 'grid-cols-1' , 2 : 'grid-cols-2' , 3 : 'grid-cols-3' , 4 : 'grid-cols-4' ,
9+ 5 : 'grid-cols-5' , 6 : 'grid-cols-6' , 7 : 'grid-cols-7' , 8 : 'grid-cols-8' ,
10+ 9 : 'grid-cols-9' , 10 : 'grid-cols-10' , 11 : 'grid-cols-11' , 12 : 'grid-cols-12'
11+ } ;
12+
13+ const GRID_COLS_SM : Record < number , string > = {
14+ 1 : 'sm:grid-cols-1' , 2 : 'sm:grid-cols-2' , 3 : 'sm:grid-cols-3' , 4 : 'sm:grid-cols-4' ,
15+ 5 : 'sm:grid-cols-5' , 6 : 'sm:grid-cols-6' , 7 : 'sm:grid-cols-7' , 8 : 'sm:grid-cols-8' ,
16+ 9 : 'sm:grid-cols-9' , 10 : 'sm:grid-cols-10' , 11 : 'sm:grid-cols-11' , 12 : 'sm:grid-cols-12'
17+ } ;
18+
19+ const GRID_COLS_MD : Record < number , string > = {
20+ 1 : 'md:grid-cols-1' , 2 : 'md:grid-cols-2' , 3 : 'md:grid-cols-3' , 4 : 'md:grid-cols-4' ,
21+ 5 : 'md:grid-cols-5' , 6 : 'md:grid-cols-6' , 7 : 'md:grid-cols-7' , 8 : 'md:grid-cols-8' ,
22+ 9 : 'md:grid-cols-9' , 10 : 'md:grid-cols-10' , 11 : 'md:grid-cols-11' , 12 : 'md:grid-cols-12'
23+ } ;
24+
25+ const GRID_COLS_LG : Record < number , string > = {
26+ 1 : 'lg:grid-cols-1' , 2 : 'lg:grid-cols-2' , 3 : 'lg:grid-cols-3' , 4 : 'lg:grid-cols-4' ,
27+ 5 : 'lg:grid-cols-5' , 6 : 'lg:grid-cols-6' , 7 : 'lg:grid-cols-7' , 8 : 'lg:grid-cols-8' ,
28+ 9 : 'lg:grid-cols-9' , 10 : 'lg:grid-cols-10' , 11 : 'lg:grid-cols-11' , 12 : 'lg:grid-cols-12'
29+ } ;
30+
31+ const GRID_COLS_XL : Record < number , string > = {
32+ 1 : 'xl:grid-cols-1' , 2 : 'xl:grid-cols-2' , 3 : 'xl:grid-cols-3' , 4 : 'xl:grid-cols-4' ,
33+ 5 : 'xl:grid-cols-5' , 6 : 'xl:grid-cols-6' , 7 : 'xl:grid-cols-7' , 8 : 'xl:grid-cols-8' ,
34+ 9 : 'xl:grid-cols-9' , 10 : 'xl:grid-cols-10' , 11 : 'xl:grid-cols-11' , 12 : 'xl:grid-cols-12'
35+ } ;
36+
37+ const GAPS : Record < number , string > = {
38+ 0 : 'gap-0' , 1 : 'gap-1' , 2 : 'gap-2' , 3 : 'gap-3' , 4 : 'gap-4' ,
39+ 5 : 'gap-5' , 6 : 'gap-6' , 8 : 'gap-8' , 10 : 'gap-10' , 12 : 'gap-12'
40+ } ;
41+
642ComponentRegistry . register ( 'grid' ,
7- ( { schema, className, ...props } : { schema : GridSchema ; className ?: string ; [ key : string ] : any } ) => {
8- const gridCols = schema . columns || 2 ;
9- const gap = schema . gap || 4 ;
43+ ( { schema, className, ...props } : { schema : GridSchema & { smColumns ?: number , mdColumns ?: number , lgColumns ?: number , xlColumns ?: number } ; className ?: string ; [ key : string ] : any } ) => {
44+ // Determine columns configuration
45+ // Supports direct number or responsive object logic if schema allows,
46+ // but here we primarily handle the flat properties supported by the designer inputs
47+ const baseCols = typeof schema . columns === 'number' ? schema . columns : 2 ;
48+ const smCols = schema . smColumns ;
49+ const mdCols = schema . mdColumns ;
50+ const lgCols = schema . lgColumns ;
51+ const xlCols = schema . xlColumns ;
52+
53+ const gap = schema . gap ?? 4 ;
1054
1155 // Generate Tailwind grid classes
1256 const gridClass = cn (
1357 'grid' ,
14- // Grid columns classes
15- gridCols === 1 && 'grid-cols-1' ,
16- gridCols === 2 && 'grid-cols-2' ,
17- gridCols === 3 && 'grid-cols-3' ,
18- gridCols === 4 && 'grid-cols-4' ,
19- gridCols === 5 && 'grid-cols-5' ,
20- gridCols === 6 && 'grid-cols-6' ,
21- gridCols === 7 && 'grid-cols-7' ,
22- gridCols === 8 && 'grid-cols-8' ,
23- gridCols === 9 && 'grid-cols-9' ,
24- gridCols === 10 && 'grid-cols-10' ,
25- gridCols === 11 && 'grid-cols-11' ,
26- gridCols === 12 && 'grid-cols-12' ,
27- // Gap classes
28- gap === 0 && 'gap-0' ,
29- gap === 1 && 'gap-1' ,
30- gap === 2 && 'gap-2' ,
31- gap === 3 && 'gap-3' ,
32- gap === 4 && 'gap-4' ,
33- gap === 5 && 'gap-5' ,
34- gap === 6 && 'gap-6' ,
35- gap === 7 && 'gap-7' ,
36- gap === 8 && 'gap-8' ,
58+ // Base columns
59+ GRID_COLS [ baseCols ] || 'grid-cols-2' ,
3760 // Responsive columns
38- schema . mdColumns && `md:grid-cols-${ schema . mdColumns } ,
39- schema . lgColumns && `lg:grid-cols-${ schema . lgColumns } ,
61+ smCols && GRID_COLS_SM [ smCols ] ,
62+ mdCols && GRID_COLS_MD [ mdCols ] ,
63+ lgCols && GRID_COLS_LG [ lgCols ] ,
64+ xlCols && GRID_COLS_XL [ xlCols ] ,
65+ // Gap
66+ GAPS [ gap ] || 'gap-4' ,
4067 className
4168 ) ;
4269
@@ -67,33 +94,47 @@ ComponentRegistry.register('grid',
6794 {
6895 name : 'columns' ,
6996 type : 'number' ,
70- label : 'Columns' ,
97+ label : 'Base Columns (Mobile) ' ,
7198 defaultValue : 2 ,
72- description : 'Number of columns (1-12)'
99+ description : 'Number of columns on mobile devices'
100+ } ,
101+ {
102+ name : 'smColumns' ,
103+ type : 'number' ,
104+ label : 'SM Columns (Tablet)' ,
105+ description : 'Columns at sm breakpoint (>640px)'
73106 } ,
74107 {
75108 name : 'mdColumns' ,
76109 type : 'number' ,
77- label : 'MD Breakpoint Columns' ,
78- description : 'Columns at md breakpoint (optional )'
110+ label : 'MD Columns (Laptop) ' ,
111+ description : 'Columns at md breakpoint (>768px )'
79112 } ,
80113 {
81114 name : 'lgColumns' ,
82115 type : 'number' ,
83- label : 'LG Breakpoint Columns' ,
84- description : 'Columns at lg breakpoint (optional)'
116+ label : 'LG Columns (Desktop)' ,
117+ description : 'Columns at lg breakpoint (>1024px)'
118+ } ,
119+ {
120+ name : 'xlColumns' ,
121+ type : 'number' ,
122+ label : 'XL Columns (Wide)' ,
123+ description : 'Columns at xl breakpoint (>1280px)'
85124 } ,
86125 {
87126 name : 'gap' ,
88127 type : 'number' ,
89128 label : 'Gap' ,
90129 defaultValue : 4 ,
91- description : 'Gap between items (0-8 )'
130+ description : 'Gap between items (0-12 )'
92131 } ,
93132 { name : 'className' , type : 'string' , label : 'CSS Class' }
94133 ] ,
95134 defaultProps : {
96- columns : 2 ,
135+ columns : 1 ,
136+ mdColumns : 2 ,
137+ lgColumns : 4 ,
97138 gap : 4 ,
98139 children : [
99140 { type : 'card' , title : 'Card 1' , description : 'First card' } ,
0 commit comments