0x-lang 0.1.11 → 0.1.12
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.
- package/dist/generators/react.js +25 -16
- package/dist/generators/react.js.map +1 -1
- package/dist/parser.d.ts +1 -1
- package/dist/parser.js +21 -11
- package/dist/parser.js.map +1 -1
- package/package.json +1 -1
package/dist/generators/react.js
CHANGED
|
@@ -793,12 +793,14 @@ function genFor(node, c) {
|
|
|
793
793
|
function genShow(node, c) {
|
|
794
794
|
const cond = genExpr(node.condition, c);
|
|
795
795
|
const body = node.body.map(ch => genUINode(ch, c)).join('\n');
|
|
796
|
-
|
|
796
|
+
const wrapped = node.body.length === 1 ? body : `<>\n${body}\n</>`;
|
|
797
|
+
return `{${cond} && (\n${wrapped}\n)}`;
|
|
797
798
|
}
|
|
798
799
|
function genHide(node, c) {
|
|
799
800
|
const cond = genExpr(node.condition, c);
|
|
800
801
|
const body = node.body.map(ch => genUINode(ch, c)).join('\n');
|
|
801
|
-
|
|
802
|
+
const wrapped = node.body.length === 1 ? body : `<>\n${body}\n</>`;
|
|
803
|
+
return `{!${cond} && (\n${wrapped}\n)}`;
|
|
802
804
|
}
|
|
803
805
|
// ── Statements ──────────────────────────────────────
|
|
804
806
|
function genStatement(stmt, c) {
|
|
@@ -1265,18 +1267,19 @@ function genTableUI(node, c) {
|
|
|
1265
1267
|
}
|
|
1266
1268
|
lines.push(`<table style={{ width: '100%', borderCollapse: 'collapse' }}>`);
|
|
1267
1269
|
// Header
|
|
1270
|
+
const thStyle = `padding: '12px 8px', borderBottom: '2px solid #e2e8f0', textAlign: 'left', fontWeight: 600`;
|
|
1268
1271
|
lines.push(`<thead>`);
|
|
1269
1272
|
lines.push(`<tr>`);
|
|
1270
1273
|
for (const col of node.columns) {
|
|
1271
1274
|
if (col.kind === 'select') {
|
|
1272
|
-
lines.push(`<th style={{
|
|
1275
|
+
lines.push(`<th style={{ ${thStyle} }}><input type="checkbox" /></th>`);
|
|
1273
1276
|
}
|
|
1274
1277
|
else if (col.kind === 'field') {
|
|
1275
|
-
const sortAttr = col.sortable ? ` style={{ cursor: 'pointer',
|
|
1278
|
+
const sortAttr = col.sortable ? ` style={{ cursor: 'pointer', ${thStyle} }}` : ` style={{ ${thStyle} }}`;
|
|
1276
1279
|
lines.push(`<th${sortAttr}>${col.label || col.field}</th>`);
|
|
1277
1280
|
}
|
|
1278
1281
|
else if (col.kind === 'actions') {
|
|
1279
|
-
lines.push(`<th style={{
|
|
1282
|
+
lines.push(`<th style={{ ${thStyle}, textAlign: 'right' }}>Actions</th>`);
|
|
1280
1283
|
}
|
|
1281
1284
|
}
|
|
1282
1285
|
lines.push(`</tr>`);
|
|
@@ -1440,16 +1443,22 @@ function genChartUI(node, c) {
|
|
|
1440
1443
|
lines.push(` {/* Chart: ${node.chartType} - ${node.name} */}`);
|
|
1441
1444
|
lines.push(` {/* Data: ${data}, X: ${x}, Y: ${y} */}`);
|
|
1442
1445
|
if (node.chartType === 'bar') {
|
|
1443
|
-
|
|
1444
|
-
lines.push(`
|
|
1445
|
-
lines.push(` {
|
|
1446
|
-
lines.push(`
|
|
1447
|
-
lines.push(`
|
|
1448
|
-
lines.push(` <
|
|
1449
|
-
lines.push(`
|
|
1446
|
+
c.imports.add('useMemo');
|
|
1447
|
+
lines.push(` {(() => {`);
|
|
1448
|
+
lines.push(` const maxVal = Math.max(...${data}.map(d => d[${y}]));`);
|
|
1449
|
+
lines.push(` return (`);
|
|
1450
|
+
lines.push(` <div style={{ display: 'flex', alignItems: 'flex-end', gap: '4px', height: '100%', padding: '20px 0' }}>`);
|
|
1451
|
+
lines.push(` <span style={{ fontSize: '14px', fontWeight: 'bold', position: 'absolute', top: 0 }}>{${title}}</span>`);
|
|
1452
|
+
lines.push(` {${data}.map((item, i) => (`);
|
|
1453
|
+
lines.push(` <div key={item?.id ?? i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%', justifyContent: 'flex-end' }}>`);
|
|
1454
|
+
lines.push(` <span style={{ fontSize: '12px', marginBottom: '4px' }}>{item[${y}]}</span>`);
|
|
1455
|
+
lines.push(` <div style={{ width: '100%', backgroundColor: ${color ? `item[${color}] || '#3182ce'` : "'#3182ce'"}, height: \`\${(item[${y}] / maxVal) * 100}%\`, borderRadius: '4px 4px 0 0', minHeight: '4px' }} />`);
|
|
1456
|
+
lines.push(` <span style={{ fontSize: '11px', marginTop: '4px', color: '#666' }}>{item[${x}]}</span>`);
|
|
1457
|
+
lines.push(` </div>`);
|
|
1458
|
+
lines.push(` ))}`);
|
|
1450
1459
|
lines.push(` </div>`);
|
|
1451
|
-
lines.push(` ))
|
|
1452
|
-
lines.push(`
|
|
1460
|
+
lines.push(` );`);
|
|
1461
|
+
lines.push(` })()}`);
|
|
1453
1462
|
}
|
|
1454
1463
|
else if (node.chartType === 'pie') {
|
|
1455
1464
|
lines.push(` <div style={{ position: 'relative', width: '200px', height: '200px', margin: '0 auto' }}>`);
|
|
@@ -1457,7 +1466,7 @@ function genChartUI(node, c) {
|
|
|
1457
1466
|
lines.push(` {/* Pie chart - use recharts/chart.js for production */}`);
|
|
1458
1467
|
lines.push(` {${data}.map((item, i) => (`);
|
|
1459
1468
|
lines.push(` <div key={item?.id ?? i} style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '8px' }}>`);
|
|
1460
|
-
lines.push(` <div style={{ width: '12px', height: '12px', borderRadius: '50%', backgroundColor: ['#3182ce','#38a169','#d69e2e','#e53e3e','#805ad5'][i % 5] }} />`);
|
|
1469
|
+
lines.push(` <div style={{ width: '12px', height: '12px', borderRadius: '50%', backgroundColor: ${color ? `item[${color}]` : `['#3182ce','#38a169','#d69e2e','#e53e3e','#805ad5'][i % 5]`} }} />`);
|
|
1461
1470
|
lines.push(` <span>{item[${x}]}: {item[${y}]}</span>`);
|
|
1462
1471
|
lines.push(` </div>`);
|
|
1463
1472
|
lines.push(` ))}`);
|
|
@@ -1766,7 +1775,7 @@ function genMediaUI(node, c) {
|
|
|
1766
1775
|
const src = genExpr(node.src, c);
|
|
1767
1776
|
if (node.mediaType === 'gallery') {
|
|
1768
1777
|
const cols = node.props['cols'] ? genExpr(node.props['cols'], c) : '3';
|
|
1769
|
-
return `<div style={{ display: 'grid', gridTemplateColumns: \`repeat(\${${cols}}, 1fr)\`, gap: '8px' }}>\n {${src}.map((img, i) => <img key={i} src={img} style={{ width: '100%', borderRadius: '8px', objectFit: 'cover' }} />)}\n</div>`;
|
|
1778
|
+
return `<div style={{ display: 'grid', gridTemplateColumns: \`repeat(\${${cols}}, 1fr)\`, gap: '8px' }}>\n {${src}.map((img, i) => <img key={img ?? i} src={img} style={{ width: '100%', borderRadius: '8px', objectFit: 'cover' }} />)}\n</div>`;
|
|
1770
1779
|
}
|
|
1771
1780
|
if (node.mediaType === 'video') {
|
|
1772
1781
|
return `<video src={${src}} controls style={{ width: '100%', borderRadius: '12px' }} />`;
|