ezfw-core 1.0.56 → 1.0.57
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.
|
@@ -20,7 +20,11 @@ const BOOLEAN_ATTRS = new Set([
|
|
|
20
20
|
const SKIP_ATTRS = new Set([
|
|
21
21
|
'eztype', 'items', 'template', 'props', 'bind', 'controller',
|
|
22
22
|
'load', 'state', 'island', 'static', 'onMount', 'onVisible',
|
|
23
|
-
'onDestroy', 'css', '_ezAfterRender', '_styleModule', 'attr',
|
|
23
|
+
'onDestroy', 'css', '_ezAfterRender', '_styleModule', 'attr',
|
|
24
|
+
// Ez shortcuts (converted to styles)
|
|
25
|
+
'layout', 'flex', 'gap', 'bg',
|
|
26
|
+
'px', 'py', 'pt', 'pb', 'pl', 'pr',
|
|
27
|
+
'mx', 'my', 'mt', 'mb', 'ml', 'mr'
|
|
24
28
|
]);
|
|
25
29
|
// Event attributes to skip in static render
|
|
26
30
|
const EVENT_ATTRS = new Set([
|
|
@@ -228,9 +232,48 @@ export class StaticHtmlRenderer {
|
|
|
228
232
|
parts.push(`class="${this.escapeAttr(classes)}"`);
|
|
229
233
|
}
|
|
230
234
|
}
|
|
235
|
+
// Convert Ez shortcuts to CSS styles
|
|
236
|
+
const shortcutStyles = {};
|
|
237
|
+
// Layout shortcuts
|
|
238
|
+
if (config.layout === 'hbox') {
|
|
239
|
+
shortcutStyles.display = 'flex';
|
|
240
|
+
shortcutStyles.flexDirection = 'row';
|
|
241
|
+
} else if (config.layout === 'vbox') {
|
|
242
|
+
shortcutStyles.display = 'flex';
|
|
243
|
+
shortcutStyles.flexDirection = 'column';
|
|
244
|
+
}
|
|
245
|
+
// Flex shortcut
|
|
246
|
+
if (config.flex !== undefined) {
|
|
247
|
+
shortcutStyles.flex = String(config.flex);
|
|
248
|
+
}
|
|
249
|
+
// Gap shortcut (in rem)
|
|
250
|
+
if (config.gap !== undefined) {
|
|
251
|
+
shortcutStyles.gap = typeof config.gap === 'number' ? `${config.gap * 0.5}rem` : config.gap;
|
|
252
|
+
}
|
|
253
|
+
// Background shortcut
|
|
254
|
+
if (config.bg !== undefined) {
|
|
255
|
+
shortcutStyles.background = String(config.bg);
|
|
256
|
+
}
|
|
257
|
+
// Padding shortcuts (in rem)
|
|
258
|
+
const toRem = (v) => typeof v === 'number' ? `${v * 0.5}rem` : String(v);
|
|
259
|
+
if (config.px !== undefined) { shortcutStyles.paddingLeft = toRem(config.px); shortcutStyles.paddingRight = toRem(config.px); }
|
|
260
|
+
if (config.py !== undefined) { shortcutStyles.paddingTop = toRem(config.py); shortcutStyles.paddingBottom = toRem(config.py); }
|
|
261
|
+
if (config.pt !== undefined) { shortcutStyles.paddingTop = toRem(config.pt); }
|
|
262
|
+
if (config.pb !== undefined) { shortcutStyles.paddingBottom = toRem(config.pb); }
|
|
263
|
+
if (config.pl !== undefined) { shortcutStyles.paddingLeft = toRem(config.pl); }
|
|
264
|
+
if (config.pr !== undefined) { shortcutStyles.paddingRight = toRem(config.pr); }
|
|
265
|
+
// Margin shortcuts (in rem)
|
|
266
|
+
if (config.mx !== undefined) { shortcutStyles.marginLeft = toRem(config.mx); shortcutStyles.marginRight = toRem(config.mx); }
|
|
267
|
+
if (config.my !== undefined) { shortcutStyles.marginTop = toRem(config.my); shortcutStyles.marginBottom = toRem(config.my); }
|
|
268
|
+
if (config.mt !== undefined) { shortcutStyles.marginTop = toRem(config.mt); }
|
|
269
|
+
if (config.mb !== undefined) { shortcutStyles.marginBottom = toRem(config.mb); }
|
|
270
|
+
if (config.ml !== undefined) { shortcutStyles.marginLeft = toRem(config.ml); }
|
|
271
|
+
if (config.mr !== undefined) { shortcutStyles.marginRight = toRem(config.mr); }
|
|
272
|
+
// Merge shortcut styles with explicit styles (explicit wins)
|
|
273
|
+
const mergedStyles = { ...shortcutStyles, ...(config.style || {}) };
|
|
231
274
|
// Handle style
|
|
232
|
-
if (
|
|
233
|
-
const styleStr = Object.entries(
|
|
275
|
+
if (Object.keys(mergedStyles).length > 0) {
|
|
276
|
+
const styleStr = Object.entries(mergedStyles)
|
|
234
277
|
.map(([key, value]) => {
|
|
235
278
|
// Convert camelCase to kebab-case
|
|
236
279
|
const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
|
|
@@ -74,7 +74,11 @@ const BOOLEAN_ATTRS = new Set([
|
|
|
74
74
|
const SKIP_ATTRS = new Set([
|
|
75
75
|
'eztype', 'items', 'template', 'props', 'bind', 'controller',
|
|
76
76
|
'load', 'state', 'island', 'static', 'onMount', 'onVisible',
|
|
77
|
-
'onDestroy', 'css', '_ezAfterRender', '_styleModule', 'attr',
|
|
77
|
+
'onDestroy', 'css', '_ezAfterRender', '_styleModule', 'attr',
|
|
78
|
+
// Ez shortcuts (converted to styles)
|
|
79
|
+
'layout', 'flex', 'gap', 'bg',
|
|
80
|
+
'px', 'py', 'pt', 'pb', 'pl', 'pr',
|
|
81
|
+
'mx', 'my', 'mt', 'mb', 'ml', 'mr'
|
|
78
82
|
]);
|
|
79
83
|
|
|
80
84
|
// Event attributes to skip in static render
|
|
@@ -342,9 +346,56 @@ export class StaticHtmlRenderer {
|
|
|
342
346
|
}
|
|
343
347
|
}
|
|
344
348
|
|
|
349
|
+
// Convert Ez shortcuts to CSS styles
|
|
350
|
+
const shortcutStyles: Record<string, string> = {};
|
|
351
|
+
|
|
352
|
+
// Layout shortcuts
|
|
353
|
+
if (config.layout === 'hbox') {
|
|
354
|
+
shortcutStyles.display = 'flex';
|
|
355
|
+
shortcutStyles.flexDirection = 'row';
|
|
356
|
+
} else if (config.layout === 'vbox') {
|
|
357
|
+
shortcutStyles.display = 'flex';
|
|
358
|
+
shortcutStyles.flexDirection = 'column';
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
// Flex shortcut
|
|
362
|
+
if (config.flex !== undefined) {
|
|
363
|
+
shortcutStyles.flex = String(config.flex);
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
// Gap shortcut (in rem)
|
|
367
|
+
if (config.gap !== undefined) {
|
|
368
|
+
shortcutStyles.gap = typeof config.gap === 'number' ? `${config.gap * 0.5}rem` : config.gap;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
// Background shortcut
|
|
372
|
+
if (config.bg !== undefined) {
|
|
373
|
+
shortcutStyles.background = String(config.bg);
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
// Padding shortcuts (in rem)
|
|
377
|
+
const toRem = (v: unknown) => typeof v === 'number' ? `${v * 0.5}rem` : String(v);
|
|
378
|
+
if (config.px !== undefined) { shortcutStyles.paddingLeft = toRem(config.px); shortcutStyles.paddingRight = toRem(config.px); }
|
|
379
|
+
if (config.py !== undefined) { shortcutStyles.paddingTop = toRem(config.py); shortcutStyles.paddingBottom = toRem(config.py); }
|
|
380
|
+
if (config.pt !== undefined) { shortcutStyles.paddingTop = toRem(config.pt); }
|
|
381
|
+
if (config.pb !== undefined) { shortcutStyles.paddingBottom = toRem(config.pb); }
|
|
382
|
+
if (config.pl !== undefined) { shortcutStyles.paddingLeft = toRem(config.pl); }
|
|
383
|
+
if (config.pr !== undefined) { shortcutStyles.paddingRight = toRem(config.pr); }
|
|
384
|
+
|
|
385
|
+
// Margin shortcuts (in rem)
|
|
386
|
+
if (config.mx !== undefined) { shortcutStyles.marginLeft = toRem(config.mx); shortcutStyles.marginRight = toRem(config.mx); }
|
|
387
|
+
if (config.my !== undefined) { shortcutStyles.marginTop = toRem(config.my); shortcutStyles.marginBottom = toRem(config.my); }
|
|
388
|
+
if (config.mt !== undefined) { shortcutStyles.marginTop = toRem(config.mt); }
|
|
389
|
+
if (config.mb !== undefined) { shortcutStyles.marginBottom = toRem(config.mb); }
|
|
390
|
+
if (config.ml !== undefined) { shortcutStyles.marginLeft = toRem(config.ml); }
|
|
391
|
+
if (config.mr !== undefined) { shortcutStyles.marginRight = toRem(config.mr); }
|
|
392
|
+
|
|
393
|
+
// Merge shortcut styles with explicit styles (explicit wins)
|
|
394
|
+
const mergedStyles = { ...shortcutStyles, ...(config.style as Record<string, string> || {}) };
|
|
395
|
+
|
|
345
396
|
// Handle style
|
|
346
|
-
if (
|
|
347
|
-
const styleStr = Object.entries(
|
|
397
|
+
if (Object.keys(mergedStyles).length > 0) {
|
|
398
|
+
const styleStr = Object.entries(mergedStyles)
|
|
348
399
|
.map(([key, value]) => {
|
|
349
400
|
// Convert camelCase to kebab-case
|
|
350
401
|
const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
|