@delmaredigital/payload-puck 0.6.27 → 0.6.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
13
13
|
* Width distribution supports equal columns or fr ratios (e.g. 2:1, 1:2, 1:1:2)
|
|
14
14
|
* for asymmetric layouts.
|
|
15
15
|
*/ import { useId } from 'react';
|
|
16
|
-
import {
|
|
16
|
+
import { dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
|
|
17
17
|
import { AnimatedWrapper } from '../AnimatedWrapper.js';
|
|
18
18
|
import { createPaddingField } from '../../fields/PaddingField.js';
|
|
19
19
|
import { createBorderField } from '../../fields/BorderField.js';
|
|
@@ -221,15 +221,16 @@ export const ColumnsConfig = {
|
|
|
221
221
|
const dimensionsResult = responsiveValueToCSS(dimensions, dimensionsValueToCSS, contentClass);
|
|
222
222
|
const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
|
|
223
223
|
if (visibilityCSS) mediaQueries.push(visibilityCSS);
|
|
224
|
-
const contentClasses = cn('flex flex-col w-full', 'md:grid', contentClass);
|
|
225
|
-
const contentStyles = {
|
|
226
|
-
gap,
|
|
227
|
-
...dimensionsResult.baseStyles
|
|
228
|
-
};
|
|
229
224
|
if (dimensionsResult.mediaQueryCSS) mediaQueries.push(dimensionsResult.mediaQueryCSS);
|
|
225
|
+
// Self-contained CSS grid — does NOT depend on the consumer's Tailwind
|
|
226
|
+
// generating utility classes. Single column on mobile (stacked); switches to
|
|
227
|
+
// the multi-column template at >=768px via the scoped media query below.
|
|
230
228
|
const colsTemplate = resolveColumnsTemplate(safeCount, distribution);
|
|
231
229
|
const gridStyles = {
|
|
232
|
-
|
|
230
|
+
display: 'grid',
|
|
231
|
+
gridTemplateColumns: '1fr',
|
|
232
|
+
gap,
|
|
233
|
+
...dimensionsResult.baseStyles,
|
|
233
234
|
'--cols-template': colsTemplate
|
|
234
235
|
};
|
|
235
236
|
const slots = [
|
|
@@ -250,7 +251,7 @@ export const ColumnsConfig = {
|
|
|
250
251
|
style: wrapperStyles,
|
|
251
252
|
children: [
|
|
252
253
|
/*#__PURE__*/ _jsx("div", {
|
|
253
|
-
className:
|
|
254
|
+
className: contentClass,
|
|
254
255
|
style: gridStyles,
|
|
255
256
|
children: slots.slice(0, safeCount).map((Slot, i)=>{
|
|
256
257
|
const ColumnSlot = Slot;
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
* This is the server-safe variant (slots only, no editor fields). For the full
|
|
15
15
|
* editor version with fields, use Columns.tsx
|
|
16
16
|
*/ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
|
-
import {
|
|
17
|
+
import { dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
|
|
18
18
|
import { AnimatedWrapper } from '../AnimatedWrapper.js';
|
|
19
19
|
/** Maximum number of column slots the component declares. */ export const MAX_COLUMNS = 4;
|
|
20
20
|
const defaultProps = {
|
|
@@ -101,18 +101,17 @@ export const ColumnsConfig = {
|
|
|
101
101
|
// Visibility media queries
|
|
102
102
|
const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
|
|
103
103
|
if (visibilityCSS) mediaQueries.push(visibilityCSS);
|
|
104
|
-
// Tailwind: flex column on mobile, grid on md+
|
|
105
|
-
const contentClasses = cn('flex flex-col w-full', 'md:grid', contentClass);
|
|
106
|
-
const contentStyles = {
|
|
107
|
-
gap,
|
|
108
|
-
...dimensionsResult.baseStyles
|
|
109
|
-
};
|
|
110
104
|
if (dimensionsResult.mediaQueryCSS) mediaQueries.push(dimensionsResult.mediaQueryCSS);
|
|
111
|
-
//
|
|
112
|
-
//
|
|
105
|
+
// Self-contained CSS grid — does NOT depend on the consumer's Tailwind
|
|
106
|
+
// generating utility classes. Single column on mobile (stacked); switches to
|
|
107
|
+
// the multi-column template at >=768px via the scoped media query below.
|
|
108
|
+
// grid-template-columns is dynamic, so drive it from a CSS var.
|
|
113
109
|
const colsTemplate = resolveColumnsTemplate(safeCount, distribution);
|
|
114
110
|
const gridStyles = {
|
|
115
|
-
|
|
111
|
+
display: 'grid',
|
|
112
|
+
gridTemplateColumns: '1fr',
|
|
113
|
+
gap,
|
|
114
|
+
...dimensionsResult.baseStyles,
|
|
116
115
|
'--cols-template': colsTemplate
|
|
117
116
|
};
|
|
118
117
|
const slots = [
|
|
@@ -133,7 +132,7 @@ export const ColumnsConfig = {
|
|
|
133
132
|
style: wrapperStyles,
|
|
134
133
|
children: [
|
|
135
134
|
/*#__PURE__*/ _jsx("div", {
|
|
136
|
-
className:
|
|
135
|
+
className: contentClass,
|
|
137
136
|
style: gridStyles,
|
|
138
137
|
children: slots.slice(0, safeCount).map((Slot, i)=>{
|
|
139
138
|
const ColumnSlot = Slot;
|
|
@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
14
14
|
* - gap: Different gap at different breakpoints
|
|
15
15
|
* - visibility: Show/hide at different breakpoints
|
|
16
16
|
*/ import { useId } from 'react';
|
|
17
|
-
import {
|
|
17
|
+
import { dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
|
|
18
18
|
import { AnimatedWrapper } from '../AnimatedWrapper.js';
|
|
19
19
|
import { createPaddingField } from '../../fields/PaddingField.js';
|
|
20
20
|
import { createBorderField } from '../../fields/BorderField.js';
|
|
@@ -176,19 +176,18 @@ export const GridConfig = {
|
|
|
176
176
|
if (visibilityCSS) {
|
|
177
177
|
mediaQueries.push(visibilityCSS);
|
|
178
178
|
}
|
|
179
|
-
// Tailwind classes for responsive grid: flex column on mobile, grid on md+
|
|
180
|
-
const contentClasses = cn('flex flex-col w-full', 'md:grid', contentClass);
|
|
181
|
-
// Dynamic styles that need inline (user-controlled values: gap, columns)
|
|
182
|
-
const contentStyles = {
|
|
183
|
-
gap,
|
|
184
|
-
...dimensionsResult.baseStyles
|
|
185
|
-
};
|
|
186
179
|
if (dimensionsResult.mediaQueryCSS) {
|
|
187
180
|
mediaQueries.push(dimensionsResult.mediaQueryCSS);
|
|
188
181
|
}
|
|
189
|
-
//
|
|
182
|
+
// Self-contained CSS grid — does NOT depend on the consumer's Tailwind
|
|
183
|
+
// generating utility classes. Single column on mobile (children stacked);
|
|
184
|
+
// switches to the multi-column track at >=768px via the scoped media query.
|
|
185
|
+
// grid-template-columns is dynamic, so drive the column count from a CSS var.
|
|
190
186
|
const gridStyles = {
|
|
191
|
-
|
|
187
|
+
display: 'grid',
|
|
188
|
+
gridTemplateColumns: '1fr',
|
|
189
|
+
gap,
|
|
190
|
+
...dimensionsResult.baseStyles,
|
|
192
191
|
'--grid-cols': numColumns
|
|
193
192
|
};
|
|
194
193
|
// Combine all media queries
|
|
@@ -204,13 +203,13 @@ export const GridConfig = {
|
|
|
204
203
|
style: wrapperStyles,
|
|
205
204
|
children: [
|
|
206
205
|
/*#__PURE__*/ _jsx(Content, {
|
|
207
|
-
className:
|
|
206
|
+
className: contentClass,
|
|
208
207
|
style: gridStyles
|
|
209
208
|
}),
|
|
210
209
|
/*#__PURE__*/ _jsx("style", {
|
|
211
210
|
children: `
|
|
212
211
|
@media (min-width: 768px) {
|
|
213
|
-
|
|
212
|
+
.${contentClass} {
|
|
214
213
|
grid-template-columns: repeat(var(--grid-cols), 1fr);
|
|
215
214
|
}
|
|
216
215
|
}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
* - margin: Different margins at different breakpoints
|
|
15
15
|
* - visibility: Show/hide at different breakpoints
|
|
16
16
|
*/ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
|
-
import {
|
|
17
|
+
import { dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
|
|
18
18
|
import { AnimatedWrapper } from '../AnimatedWrapper.js';
|
|
19
19
|
// Simple ID generator for server-side rendering
|
|
20
20
|
let idCounter = 0;
|
|
@@ -85,19 +85,18 @@ export const GridConfig = {
|
|
|
85
85
|
if (visibilityCSS) {
|
|
86
86
|
mediaQueries.push(visibilityCSS);
|
|
87
87
|
}
|
|
88
|
-
// Tailwind classes for responsive grid: flex column on mobile, grid on md+
|
|
89
|
-
const contentClasses = cn('flex flex-col w-full', 'md:grid', contentClass);
|
|
90
|
-
// Dynamic styles that need inline (user-controlled values: gap, columns)
|
|
91
|
-
const contentStyles = {
|
|
92
|
-
gap,
|
|
93
|
-
...dimensionsResult.baseStyles
|
|
94
|
-
};
|
|
95
88
|
if (dimensionsResult.mediaQueryCSS) {
|
|
96
89
|
mediaQueries.push(dimensionsResult.mediaQueryCSS);
|
|
97
90
|
}
|
|
98
|
-
//
|
|
91
|
+
// Self-contained CSS grid — does NOT depend on the consumer's Tailwind
|
|
92
|
+
// generating utility classes. Single column on mobile (children stacked);
|
|
93
|
+
// switches to the multi-column track at >=768px via the scoped media query.
|
|
94
|
+
// grid-template-columns is dynamic, so drive the column count from a CSS var.
|
|
99
95
|
const gridStyles = {
|
|
100
|
-
|
|
96
|
+
display: 'grid',
|
|
97
|
+
gridTemplateColumns: '1fr',
|
|
98
|
+
gap,
|
|
99
|
+
...dimensionsResult.baseStyles,
|
|
101
100
|
'--grid-cols': numColumns
|
|
102
101
|
};
|
|
103
102
|
// Combine all media queries
|
|
@@ -115,13 +114,13 @@ export const GridConfig = {
|
|
|
115
114
|
style: wrapperStyles,
|
|
116
115
|
children: [
|
|
117
116
|
/*#__PURE__*/ _jsx(ContentSlot, {
|
|
118
|
-
className:
|
|
117
|
+
className: contentClass,
|
|
119
118
|
style: gridStyles
|
|
120
119
|
}),
|
|
121
120
|
/*#__PURE__*/ _jsx("style", {
|
|
122
121
|
children: `
|
|
123
122
|
@media (min-width: 768px) {
|
|
124
|
-
|
|
123
|
+
.${contentClass} {
|
|
125
124
|
grid-template-columns: repeat(var(--grid-cols), 1fr);
|
|
126
125
|
}
|
|
127
126
|
}
|
package/dist/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const VERSION = "0.6.
|
|
1
|
+
export declare const VERSION = "0.6.28";
|
package/dist/version.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
// Auto-generated by scripts/generate-version.js - do not edit manually
|
|
2
|
-
export const VERSION = '0.6.
|
|
2
|
+
export const VERSION = '0.6.28';
|