@procaaso/alphinity-ui-components 1.0.12 → 1.1.1
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/index.cjs +314 -12
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +19 -5
- package/dist/index.d.ts +19 -5
- package/dist/index.js +314 -12
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -1015,9 +1015,14 @@ function DeviceControlPanel({
|
|
|
1015
1015
|
onCustomAction,
|
|
1016
1016
|
onOpenConfig,
|
|
1017
1017
|
showConfigButton = true,
|
|
1018
|
-
|
|
1018
|
+
onUndock,
|
|
1019
|
+
undockIcon = "\u21F1",
|
|
1020
|
+
modeSelectionStyle = "buttons",
|
|
1021
|
+
embedded = false
|
|
1019
1022
|
}) {
|
|
1020
1023
|
const [localParameterValues, setLocalParameterValues] = (0, import_react5.useState)({});
|
|
1024
|
+
const [showModeModal, setShowModeModal] = (0, import_react5.useState)(false);
|
|
1025
|
+
const [pendingMode, setPendingMode] = (0, import_react5.useState)(null);
|
|
1021
1026
|
const [showToast, setShowToast] = (0, import_react5.useState)(true);
|
|
1022
1027
|
(0, import_react5.useEffect)(() => {
|
|
1023
1028
|
if (binding) {
|
|
@@ -1054,7 +1059,8 @@ function DeviceControlPanel({
|
|
|
1054
1059
|
value: Math.round(13 * fontScale),
|
|
1055
1060
|
input: Math.round(14 * fontScale),
|
|
1056
1061
|
button: Math.round(12 * fontScale),
|
|
1057
|
-
status: Math.round(10 * fontScale)
|
|
1062
|
+
status: Math.round(10 * fontScale),
|
|
1063
|
+
description: Math.round(13 * fontScale)
|
|
1058
1064
|
};
|
|
1059
1065
|
const currentModeObj = binding.modes.find((m) => m.value === currentMode);
|
|
1060
1066
|
const activeCapabilities = currentModeObj?.capabilities ?? binding.capabilities ?? {};
|
|
@@ -1090,11 +1096,31 @@ function DeviceControlPanel({
|
|
|
1090
1096
|
const handleParameterInput = (parameterId, value) => {
|
|
1091
1097
|
setLocalParameterValues((prev) => ({ ...prev, [parameterId]: value }));
|
|
1092
1098
|
};
|
|
1093
|
-
const panelStyle = {
|
|
1099
|
+
const panelStyle = embedded ? {
|
|
1100
|
+
// Embedded mode: static positioning for container layouts
|
|
1101
|
+
position: "static",
|
|
1102
|
+
width: "100%",
|
|
1103
|
+
backgroundColor,
|
|
1104
|
+
color: textColor,
|
|
1105
|
+
borderRadius: "8px 8px 0 0",
|
|
1106
|
+
boxShadow: "none",
|
|
1107
|
+
border: `2px solid ${borderColor}`,
|
|
1108
|
+
padding: spacing.padding,
|
|
1109
|
+
maxHeight: maxHeight || "70vh",
|
|
1110
|
+
overflowY: "auto",
|
|
1111
|
+
...binding.display?.style
|
|
1112
|
+
} : {
|
|
1113
|
+
// Fixed mode: traditional overlay positioning
|
|
1094
1114
|
position: "fixed",
|
|
1095
1115
|
...position === "bottom" ? {
|
|
1096
1116
|
bottom: 0,
|
|
1097
|
-
...align === "left" ? { left: 0, right: "auto", width: maxWidth } : align === "right" ? { right: 0, left: "auto", width: maxWidth } : {
|
|
1117
|
+
...align === "left" ? { left: 0, right: "auto", width: maxWidth } : align === "right" ? { right: 0, left: "auto", width: maxWidth } : {
|
|
1118
|
+
left: 0,
|
|
1119
|
+
right: 0,
|
|
1120
|
+
marginLeft: "auto",
|
|
1121
|
+
marginRight: "auto",
|
|
1122
|
+
maxWidth
|
|
1123
|
+
},
|
|
1098
1124
|
animation: "slideUp 0.3s ease-out"
|
|
1099
1125
|
} : {
|
|
1100
1126
|
right: 0,
|
|
@@ -1140,9 +1166,14 @@ function DeviceControlPanel({
|
|
|
1140
1166
|
fontFamily: "Arial, sans-serif",
|
|
1141
1167
|
letterSpacing: "0.5px",
|
|
1142
1168
|
textTransform: "uppercase",
|
|
1143
|
-
color: textColor
|
|
1169
|
+
color: textColor,
|
|
1170
|
+
overflow: "hidden",
|
|
1171
|
+
textOverflow: "ellipsis",
|
|
1172
|
+
whiteSpace: "nowrap",
|
|
1173
|
+
maxWidth: "200px"
|
|
1144
1174
|
},
|
|
1145
|
-
|
|
1175
|
+
title: titleText.length > 25 ? titleText : void 0,
|
|
1176
|
+
children: titleText.length > 25 ? titleText.slice(0, 25) + "..." : titleText
|
|
1146
1177
|
}
|
|
1147
1178
|
),
|
|
1148
1179
|
binding.deviceType && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
@@ -1180,6 +1211,27 @@ function DeviceControlPanel({
|
|
|
1180
1211
|
children: "\u2699"
|
|
1181
1212
|
}
|
|
1182
1213
|
),
|
|
1214
|
+
onUndock && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1215
|
+
"button",
|
|
1216
|
+
{
|
|
1217
|
+
onClick: onUndock,
|
|
1218
|
+
title: "Undock panel",
|
|
1219
|
+
style: {
|
|
1220
|
+
width: touchSize * 0.7,
|
|
1221
|
+
height: touchSize * 0.7,
|
|
1222
|
+
backgroundColor: surfaceColor,
|
|
1223
|
+
color: textColor,
|
|
1224
|
+
border: `2px solid ${borderColor}`,
|
|
1225
|
+
borderRadius: "2px",
|
|
1226
|
+
fontSize: "16px",
|
|
1227
|
+
cursor: "pointer",
|
|
1228
|
+
fontWeight: 600,
|
|
1229
|
+
fontFamily: "Arial, sans-serif",
|
|
1230
|
+
padding: "0"
|
|
1231
|
+
},
|
|
1232
|
+
children: undockIcon
|
|
1233
|
+
}
|
|
1234
|
+
),
|
|
1183
1235
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1184
1236
|
"button",
|
|
1185
1237
|
{
|
|
@@ -1317,7 +1369,206 @@ function DeviceControlPanel({
|
|
|
1317
1369
|
},
|
|
1318
1370
|
children: binding.modes.map((mode) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: mode.value, disabled: mode.enabled === false, children: mode.label }, mode.value))
|
|
1319
1371
|
}
|
|
1320
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime8.
|
|
1372
|
+
) : modeSelectionStyle === "modal" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
|
|
1373
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1374
|
+
"div",
|
|
1375
|
+
{
|
|
1376
|
+
onClick: () => setShowModeModal(true),
|
|
1377
|
+
style: {
|
|
1378
|
+
padding: "12px",
|
|
1379
|
+
backgroundColor: surfaceColor,
|
|
1380
|
+
border: `2px solid ${borderColor}`,
|
|
1381
|
+
borderRadius: "6px",
|
|
1382
|
+
fontSize: `${fontSize.label}px`,
|
|
1383
|
+
fontWeight: 600,
|
|
1384
|
+
fontFamily: "Arial, sans-serif",
|
|
1385
|
+
letterSpacing: "0.5px",
|
|
1386
|
+
textTransform: "uppercase",
|
|
1387
|
+
cursor: "pointer",
|
|
1388
|
+
display: "flex",
|
|
1389
|
+
justifyContent: "space-between",
|
|
1390
|
+
alignItems: "center"
|
|
1391
|
+
},
|
|
1392
|
+
children: [
|
|
1393
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: binding.modes.find((m) => m.value === currentMode)?.label || currentMode }),
|
|
1394
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { fontSize: "20px", marginLeft: "8px" }, children: "\u25BC" })
|
|
1395
|
+
]
|
|
1396
|
+
}
|
|
1397
|
+
),
|
|
1398
|
+
showModeModal && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1399
|
+
"div",
|
|
1400
|
+
{
|
|
1401
|
+
style: {
|
|
1402
|
+
position: "fixed",
|
|
1403
|
+
top: 0,
|
|
1404
|
+
left: 0,
|
|
1405
|
+
right: 0,
|
|
1406
|
+
bottom: 0,
|
|
1407
|
+
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
1408
|
+
display: "flex",
|
|
1409
|
+
alignItems: "center",
|
|
1410
|
+
justifyContent: "center",
|
|
1411
|
+
zIndex: 2e4
|
|
1412
|
+
},
|
|
1413
|
+
onClick: () => {
|
|
1414
|
+
setShowModeModal(false);
|
|
1415
|
+
setPendingMode(null);
|
|
1416
|
+
},
|
|
1417
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1418
|
+
"div",
|
|
1419
|
+
{
|
|
1420
|
+
onClick: (e) => e.stopPropagation(),
|
|
1421
|
+
style: {
|
|
1422
|
+
backgroundColor,
|
|
1423
|
+
borderRadius: "8px",
|
|
1424
|
+
padding: "24px",
|
|
1425
|
+
minWidth: "300px",
|
|
1426
|
+
maxWidth: "400px",
|
|
1427
|
+
border: `2px solid ${borderColor}`
|
|
1428
|
+
},
|
|
1429
|
+
children: [
|
|
1430
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1431
|
+
"h3",
|
|
1432
|
+
{
|
|
1433
|
+
style: {
|
|
1434
|
+
margin: "0 0 4px 0",
|
|
1435
|
+
fontSize: `${fontSize.title}px`,
|
|
1436
|
+
fontWeight: 600,
|
|
1437
|
+
fontFamily: "Arial, sans-serif",
|
|
1438
|
+
color: textColor
|
|
1439
|
+
},
|
|
1440
|
+
children: "Select Mode"
|
|
1441
|
+
}
|
|
1442
|
+
),
|
|
1443
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1444
|
+
"div",
|
|
1445
|
+
{
|
|
1446
|
+
style: {
|
|
1447
|
+
marginBottom: "16px",
|
|
1448
|
+
fontSize: `${fontSize.label}px`,
|
|
1449
|
+
fontWeight: 600,
|
|
1450
|
+
fontFamily: "Arial, sans-serif",
|
|
1451
|
+
color: mutedTextColor,
|
|
1452
|
+
textTransform: "uppercase"
|
|
1453
|
+
},
|
|
1454
|
+
children: binding.display?.title || binding.deviceName || binding.tag || binding.nodeId
|
|
1455
|
+
}
|
|
1456
|
+
),
|
|
1457
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1458
|
+
"select",
|
|
1459
|
+
{
|
|
1460
|
+
value: pendingMode || currentMode,
|
|
1461
|
+
onChange: (e) => setPendingMode(e.target.value),
|
|
1462
|
+
style: {
|
|
1463
|
+
width: "100%",
|
|
1464
|
+
height: `${touchSize}px`,
|
|
1465
|
+
marginBottom: "8px",
|
|
1466
|
+
backgroundColor: surfaceColor,
|
|
1467
|
+
color: textColor,
|
|
1468
|
+
border: `2px solid ${borderColor}`,
|
|
1469
|
+
borderRadius: "6px",
|
|
1470
|
+
fontSize: `${fontSize.label}px`,
|
|
1471
|
+
fontWeight: 600,
|
|
1472
|
+
fontFamily: "Arial, sans-serif",
|
|
1473
|
+
letterSpacing: "0.5px",
|
|
1474
|
+
textTransform: "uppercase",
|
|
1475
|
+
paddingLeft: "12px",
|
|
1476
|
+
paddingRight: "12px",
|
|
1477
|
+
cursor: "pointer"
|
|
1478
|
+
},
|
|
1479
|
+
children: binding.modes.map((mode) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1480
|
+
"option",
|
|
1481
|
+
{
|
|
1482
|
+
value: mode.value,
|
|
1483
|
+
disabled: mode.enabled === false,
|
|
1484
|
+
children: mode.label
|
|
1485
|
+
},
|
|
1486
|
+
mode.value
|
|
1487
|
+
))
|
|
1488
|
+
}
|
|
1489
|
+
),
|
|
1490
|
+
(() => {
|
|
1491
|
+
const selectedMode = binding.modes.find(
|
|
1492
|
+
(m) => m.value === (pendingMode || currentMode)
|
|
1493
|
+
);
|
|
1494
|
+
return selectedMode?.description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1495
|
+
"div",
|
|
1496
|
+
{
|
|
1497
|
+
style: {
|
|
1498
|
+
marginBottom: "16px",
|
|
1499
|
+
padding: "12px",
|
|
1500
|
+
backgroundColor: surfaceColor,
|
|
1501
|
+
border: `1px solid ${borderColor}`,
|
|
1502
|
+
borderRadius: "6px",
|
|
1503
|
+
fontSize: `${fontSize.description}px`,
|
|
1504
|
+
color: mutedTextColor,
|
|
1505
|
+
fontFamily: "Arial, sans-serif",
|
|
1506
|
+
lineHeight: "1.4"
|
|
1507
|
+
},
|
|
1508
|
+
children: selectedMode.description
|
|
1509
|
+
}
|
|
1510
|
+
) : null;
|
|
1511
|
+
})(),
|
|
1512
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [
|
|
1513
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1514
|
+
"button",
|
|
1515
|
+
{
|
|
1516
|
+
onClick: () => {
|
|
1517
|
+
const modeToSend = pendingMode || currentMode || binding.modes[0]?.value;
|
|
1518
|
+
if (modeToSend) {
|
|
1519
|
+
handleModeChange(modeToSend);
|
|
1520
|
+
}
|
|
1521
|
+
setShowModeModal(false);
|
|
1522
|
+
setPendingMode(null);
|
|
1523
|
+
},
|
|
1524
|
+
style: {
|
|
1525
|
+
flex: 1,
|
|
1526
|
+
height: `${touchSize}px`,
|
|
1527
|
+
backgroundColor: "#4ade80",
|
|
1528
|
+
color: "#000000",
|
|
1529
|
+
border: "2px solid #22c55e",
|
|
1530
|
+
borderRadius: "6px",
|
|
1531
|
+
fontSize: `${fontSize.button}px`,
|
|
1532
|
+
fontWeight: 600,
|
|
1533
|
+
fontFamily: "Arial, sans-serif",
|
|
1534
|
+
letterSpacing: "0.5px",
|
|
1535
|
+
textTransform: "uppercase",
|
|
1536
|
+
cursor: "pointer"
|
|
1537
|
+
},
|
|
1538
|
+
children: "Confirm"
|
|
1539
|
+
}
|
|
1540
|
+
),
|
|
1541
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1542
|
+
"button",
|
|
1543
|
+
{
|
|
1544
|
+
onClick: () => {
|
|
1545
|
+
setShowModeModal(false);
|
|
1546
|
+
setPendingMode(null);
|
|
1547
|
+
},
|
|
1548
|
+
style: {
|
|
1549
|
+
flex: 1,
|
|
1550
|
+
height: `${touchSize}px`,
|
|
1551
|
+
backgroundColor: surfaceColor,
|
|
1552
|
+
color: textColor,
|
|
1553
|
+
border: `2px solid ${borderColor}`,
|
|
1554
|
+
borderRadius: "6px",
|
|
1555
|
+
fontSize: `${fontSize.button}px`,
|
|
1556
|
+
fontWeight: 600,
|
|
1557
|
+
fontFamily: "Arial, sans-serif",
|
|
1558
|
+
letterSpacing: "0.5px",
|
|
1559
|
+
textTransform: "uppercase",
|
|
1560
|
+
cursor: "pointer"
|
|
1561
|
+
},
|
|
1562
|
+
children: "Cancel"
|
|
1563
|
+
}
|
|
1564
|
+
)
|
|
1565
|
+
] })
|
|
1566
|
+
]
|
|
1567
|
+
}
|
|
1568
|
+
)
|
|
1569
|
+
}
|
|
1570
|
+
)
|
|
1571
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1321
1572
|
"div",
|
|
1322
1573
|
{
|
|
1323
1574
|
style: {
|
|
@@ -7930,6 +8181,8 @@ var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
|
7930
8181
|
function DeviceConfigPanel({
|
|
7931
8182
|
binding,
|
|
7932
8183
|
onClose,
|
|
8184
|
+
onUndock,
|
|
8185
|
+
undockIcon = "\u21F1",
|
|
7933
8186
|
position = "bottom",
|
|
7934
8187
|
align = "center",
|
|
7935
8188
|
touchOptimized = true,
|
|
@@ -7939,7 +8192,8 @@ function DeviceConfigPanel({
|
|
|
7939
8192
|
maxWidth,
|
|
7940
8193
|
toastDuration = 3e3,
|
|
7941
8194
|
onOpenControls,
|
|
7942
|
-
showControlsButton = true
|
|
8195
|
+
showControlsButton = true,
|
|
8196
|
+
embedded = false
|
|
7943
8197
|
}) {
|
|
7944
8198
|
const [localValues, setLocalValues] = (0, import_react20.useState)(() => {
|
|
7945
8199
|
if (binding) {
|
|
@@ -8306,11 +8560,33 @@ function DeviceConfigPanel({
|
|
|
8306
8560
|
section.id
|
|
8307
8561
|
);
|
|
8308
8562
|
};
|
|
8309
|
-
const panelStyle = {
|
|
8563
|
+
const panelStyle = embedded ? {
|
|
8564
|
+
// Embedded mode: static positioning for container layouts
|
|
8565
|
+
position: "static",
|
|
8566
|
+
width: "100%",
|
|
8567
|
+
backgroundColor,
|
|
8568
|
+
color: textColor,
|
|
8569
|
+
borderRadius: "8px 8px 0 0",
|
|
8570
|
+
boxShadow: "none",
|
|
8571
|
+
border: `2px solid ${borderColor}`,
|
|
8572
|
+
padding: spacing.padding,
|
|
8573
|
+
maxHeight: maxHeight || "70vh",
|
|
8574
|
+
overflowY: "auto",
|
|
8575
|
+
display: "flex",
|
|
8576
|
+
flexDirection: "column",
|
|
8577
|
+
...binding.display?.style
|
|
8578
|
+
} : {
|
|
8579
|
+
// Fixed mode: traditional overlay positioning
|
|
8310
8580
|
position: "fixed",
|
|
8311
8581
|
...position === "bottom" ? {
|
|
8312
8582
|
bottom: 0,
|
|
8313
|
-
...align === "left" ? { left: 0, right: "auto", width: maxWidth } : align === "right" ? { right: 0, left: "auto", width: maxWidth } : {
|
|
8583
|
+
...align === "left" ? { left: 0, right: "auto", width: maxWidth } : align === "right" ? { right: 0, left: "auto", width: maxWidth } : {
|
|
8584
|
+
left: 0,
|
|
8585
|
+
right: 0,
|
|
8586
|
+
marginLeft: "auto",
|
|
8587
|
+
marginRight: "auto",
|
|
8588
|
+
maxWidth
|
|
8589
|
+
},
|
|
8314
8590
|
animation: "slideUp 0.3s ease-out"
|
|
8315
8591
|
} : {
|
|
8316
8592
|
right: 0,
|
|
@@ -8362,9 +8638,14 @@ function DeviceConfigPanel({
|
|
|
8362
8638
|
fontFamily: "Arial, sans-serif",
|
|
8363
8639
|
letterSpacing: "0.5px",
|
|
8364
8640
|
textTransform: "uppercase",
|
|
8365
|
-
color: textColor
|
|
8641
|
+
color: textColor,
|
|
8642
|
+
overflow: "hidden",
|
|
8643
|
+
textOverflow: "ellipsis",
|
|
8644
|
+
whiteSpace: "nowrap",
|
|
8645
|
+
maxWidth: "200px"
|
|
8366
8646
|
},
|
|
8367
|
-
|
|
8647
|
+
title: titleText.length > 25 ? titleText : void 0,
|
|
8648
|
+
children: titleText.length > 25 ? titleText.slice(0, 25) + "..." : titleText
|
|
8368
8649
|
}
|
|
8369
8650
|
),
|
|
8370
8651
|
binding.display?.subtitle && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
@@ -8404,6 +8685,27 @@ function DeviceConfigPanel({
|
|
|
8404
8685
|
children: "CTRL"
|
|
8405
8686
|
}
|
|
8406
8687
|
),
|
|
8688
|
+
onUndock && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
8689
|
+
"button",
|
|
8690
|
+
{
|
|
8691
|
+
onClick: onUndock,
|
|
8692
|
+
title: "Undock panel",
|
|
8693
|
+
style: {
|
|
8694
|
+
width: touchSize * 0.7,
|
|
8695
|
+
height: touchSize * 0.7,
|
|
8696
|
+
backgroundColor: surfaceColor,
|
|
8697
|
+
color: textColor,
|
|
8698
|
+
border: `2px solid ${borderColor}`,
|
|
8699
|
+
borderRadius: "2px",
|
|
8700
|
+
fontSize: "16px",
|
|
8701
|
+
cursor: "pointer",
|
|
8702
|
+
fontWeight: 600,
|
|
8703
|
+
fontFamily: "Arial, sans-serif",
|
|
8704
|
+
padding: "0"
|
|
8705
|
+
},
|
|
8706
|
+
children: undockIcon
|
|
8707
|
+
}
|
|
8708
|
+
),
|
|
8407
8709
|
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
8408
8710
|
"button",
|
|
8409
8711
|
{
|