@jsswift/ui 1.0.45 → 1.0.46
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/min-ui.js +4 -4
- package/dist/ui.js +10561 -14120
- package/dist/ui.min.js +4 -4
- package/package.json +2 -2
- package/src/01-foundation-helpers.js +0 -402
- package/src/10-primitives-layout.js +14 -1013
- package/src/20-display-content.js +484 -718
- package/src/21-list-content.js +246 -341
- package/src/22-banner-content.js +3 -116
- package/src/23-tooltip.js +276 -326
- package/src/31-form-advanced.js +2638 -3003
- package/src/40-navigation.js +1262 -1454
- package/src/41-tab-panel.js +896 -1090
- package/src/50-feedback.js +999 -1209
- package/src/60-shell-app.js +5 -265
- package/src/61-form-service.js +304 -386
- package/src/70-dialog.js +209 -277
- package/src/71-menu-overlays.js +1175 -1400
- package/src/80-data.js +433 -503
- package/src/modules.json +59 -23
package/src/60-shell-app.js
CHANGED
|
@@ -176,53 +176,7 @@ UI.Header = (...args) => {
|
|
|
176
176
|
setPropertyProps(el, rawProps);
|
|
177
177
|
return el;
|
|
178
178
|
};
|
|
179
|
-
|
|
180
|
-
UI.meta = UI.meta || {};
|
|
181
|
-
UI.meta.Header = {
|
|
182
|
-
signature: "UI.Header(...children) | UI.Header(props, ...children)",
|
|
183
|
-
props: {
|
|
184
|
-
title: "String|Node|Function|Array",
|
|
185
|
-
subtitle: "String|Node|Function|Array",
|
|
186
|
-
eyebrow: "String|Node|Function|Array",
|
|
187
|
-
content: "Node|Function|Array",
|
|
188
|
-
meta: "Node|Function|Array",
|
|
189
|
-
icon: "String|Node|Function|Array",
|
|
190
|
-
left: "Node|Function|Array|false",
|
|
191
|
-
right: "Node|Function|Array",
|
|
192
|
-
actions: "Node|Function|Array",
|
|
193
|
-
drawerOpenIcon: "string|Node",
|
|
194
|
-
drawerCloseIcon: "string|Node",
|
|
195
|
-
drawerStateKey: "string",
|
|
196
|
-
sticky: "boolean",
|
|
197
|
-
stack: "boolean",
|
|
198
|
-
dense: "boolean",
|
|
199
|
-
elevated: "boolean",
|
|
200
|
-
divider: "boolean",
|
|
201
|
-
gap: "string|number",
|
|
202
|
-
minHeight: "string|number",
|
|
203
|
-
slots: "{ left?, start?, right?, end?, center?, body?, icon?, eyebrow?, title?, subtitle?, meta?, content?, actions? }",
|
|
204
|
-
class: "string",
|
|
205
|
-
style: "object"
|
|
206
|
-
},
|
|
207
|
-
slots: {
|
|
208
|
-
left: "Left area, falls back to the drawer toggle",
|
|
209
|
-
start: "Alias/addon for the left area",
|
|
210
|
-
right: "Main right area",
|
|
211
|
-
end: "Alias/addon for the right area",
|
|
212
|
-
center: "Full override for the central body",
|
|
213
|
-
body: "Alias of center",
|
|
214
|
-
icon: "Leading icon",
|
|
215
|
-
eyebrow: "Eyebrow / kicker",
|
|
216
|
-
title: "Title",
|
|
217
|
-
subtitle: "Subtitle",
|
|
218
|
-
meta: "Meta info next to the central content",
|
|
219
|
-
content: "Extra content below the subtitle",
|
|
220
|
-
actions: "Actions grouped in the right area"
|
|
221
|
-
},
|
|
222
|
-
returns: "HTMLDivElement",
|
|
223
|
-
description: "Structured header with start/body/end regions, integrated drawer toggle, metadata, and composable slots."
|
|
224
|
-
};
|
|
225
|
-
}
|
|
179
|
+
|
|
226
180
|
|
|
227
181
|
UI.Drawer = (...args) => {
|
|
228
182
|
const { props: rawProps, children } = JSswift.uiNormalizeArgs(args);
|
|
@@ -722,67 +676,7 @@ UI.Drawer = (...args) => {
|
|
|
722
676
|
syncActiveClasses();
|
|
723
677
|
return drawerEl;
|
|
724
678
|
};
|
|
725
|
-
|
|
726
|
-
UI.meta = UI.meta || {};
|
|
727
|
-
UI.meta.Drawer = {
|
|
728
|
-
signature: "UI.Drawer(props)",
|
|
729
|
-
props: {
|
|
730
|
-
items: "Array",
|
|
731
|
-
header: "Node|Function|Array",
|
|
732
|
-
footer: "Node|Function|Array",
|
|
733
|
-
before: "Node|Function|Array",
|
|
734
|
-
after: "Node|Function|Array",
|
|
735
|
-
title: "String|Node|Function|Array",
|
|
736
|
-
subtitle: "String|Node|Function|Array",
|
|
737
|
-
eyebrow: "String|Node|Function|Array",
|
|
738
|
-
icon: "String|Node|Function|Array",
|
|
739
|
-
content: "Node|Function|Array",
|
|
740
|
-
meta: "Node|Function|Array",
|
|
741
|
-
actions: "Node|Function|Array",
|
|
742
|
-
empty: "Node|Function|Array",
|
|
743
|
-
emptyText: "string",
|
|
744
|
-
stateKey: "string",
|
|
745
|
-
closeOnSelect: "boolean",
|
|
746
|
-
groupOpenIcon: "String|Node|Function|Array",
|
|
747
|
-
groupCloseIcon: "String|Node|Function|Array",
|
|
748
|
-
itemIconSize: "string|number",
|
|
749
|
-
gap: "string|number",
|
|
750
|
-
indent: "string|number",
|
|
751
|
-
padding: "string|number",
|
|
752
|
-
width: "string|number",
|
|
753
|
-
minHeight: "string|number",
|
|
754
|
-
maxHeight: "string|number",
|
|
755
|
-
onSelect: "function(item, ctx, event)",
|
|
756
|
-
sticky: "boolean",
|
|
757
|
-
slots: "{ header?, body?, footer?, before?, after?, empty?, item?, itemLabel?, itemNote?, itemBadge?, itemAside?, itemContent?, group?, groupLabel?, groupNote?, groupBadge?, groupAside?, groupContent?, sectionLabel? }",
|
|
758
|
-
class: "string",
|
|
759
|
-
style: "object"
|
|
760
|
-
},
|
|
761
|
-
slots: {
|
|
762
|
-
header: "Drawer header, full override",
|
|
763
|
-
body: "Full body override",
|
|
764
|
-
footer: "Drawer footer",
|
|
765
|
-
before: "Content before the item list",
|
|
766
|
-
after: "Content after the item list",
|
|
767
|
-
empty: "Empty state when there is no content",
|
|
768
|
-
item: "Full override for a simple item",
|
|
769
|
-
itemLabel: "Item label (ctx: { item, label, note, badge, aside, content })",
|
|
770
|
-
itemNote: "Item note/subtitle",
|
|
771
|
-
itemBadge: "Item badge",
|
|
772
|
-
itemAside: "Item aside/meta",
|
|
773
|
-
itemContent: "Extra item content",
|
|
774
|
-
group: "Full override for a group header (ctx includes toggle/isOpen)",
|
|
775
|
-
groupLabel: "Group label",
|
|
776
|
-
groupNote: "Group note",
|
|
777
|
-
groupBadge: "Group badge",
|
|
778
|
-
groupAside: "Group aside/meta",
|
|
779
|
-
groupContent: "Extra group content",
|
|
780
|
-
sectionLabel: "Label for section/heading items"
|
|
781
|
-
},
|
|
782
|
-
returns: "HTMLDivElement with openDrawer/closeDrawer/toggleDrawer/isDrawerOpen methods",
|
|
783
|
-
description: "Structured, backward-compatible drawer with header/footer, groups, extended slots, empty state, and persistent state."
|
|
784
|
-
};
|
|
785
|
-
}
|
|
679
|
+
|
|
786
680
|
|
|
787
681
|
UI.Page = (...args) => {
|
|
788
682
|
const { props: rawProps, children } = JSswift.uiNormalizeArgs(args);
|
|
@@ -959,52 +853,7 @@ UI.Page = (...args) => {
|
|
|
959
853
|
setPropertyProps(el, rawProps);
|
|
960
854
|
return el;
|
|
961
855
|
};
|
|
962
|
-
|
|
963
|
-
UI.meta = UI.meta || {};
|
|
964
|
-
UI.meta.Page = {
|
|
965
|
-
signature: "UI.Page(...children) | UI.Page(props, ...children)",
|
|
966
|
-
props: {
|
|
967
|
-
hero: "Node|Function|Array",
|
|
968
|
-
icon: "String|Node|Function|Array",
|
|
969
|
-
eyebrow: "String|Node|Function|Array",
|
|
970
|
-
title: "String|Node|Function|Array",
|
|
971
|
-
subtitle: "String|Node|Function|Array",
|
|
972
|
-
header: "String|Node|Function|Array",
|
|
973
|
-
aside: "Node|Function|Array",
|
|
974
|
-
body: "Node|Function|Array",
|
|
975
|
-
footer: "Node|Function|Array",
|
|
976
|
-
actions: "Node|Function|Array",
|
|
977
|
-
dense: "boolean",
|
|
978
|
-
flat: "boolean",
|
|
979
|
-
centered: "boolean",
|
|
980
|
-
narrow: "boolean",
|
|
981
|
-
gap: "string|number",
|
|
982
|
-
padding: "string|number",
|
|
983
|
-
maxWidth: "string|number",
|
|
984
|
-
minHeight: "string|number",
|
|
985
|
-
heroPadding: "string|number",
|
|
986
|
-
headerGap: "string|number",
|
|
987
|
-
slots: "{ hero?, icon?, eyebrow?, title?, subtitle?, header?, aside?, body?, footer?, actions?, default? }",
|
|
988
|
-
class: "string",
|
|
989
|
-
style: "object"
|
|
990
|
-
},
|
|
991
|
-
slots: {
|
|
992
|
-
hero: "Top hero/banner area",
|
|
993
|
-
icon: "Page icon/visual",
|
|
994
|
-
eyebrow: "Eyebrow/kicker content",
|
|
995
|
-
title: "Page title content",
|
|
996
|
-
subtitle: "Page subtitle/description content",
|
|
997
|
-
header: "Header support content under title",
|
|
998
|
-
aside: "Top-right header content",
|
|
999
|
-
body: "Structured body content",
|
|
1000
|
-
footer: "Footer meta/content",
|
|
1001
|
-
actions: "Footer actions content",
|
|
1002
|
-
default: "Fallback body content"
|
|
1003
|
-
},
|
|
1004
|
-
returns: "HTMLDivElement",
|
|
1005
|
-
description: "Structured page container with hero, header, body, footer, and configurable layout."
|
|
1006
|
-
};
|
|
1007
|
-
}
|
|
856
|
+
|
|
1008
857
|
|
|
1009
858
|
UI.AppShell = (...args) => {
|
|
1010
859
|
const { props, children } = JSswift.uiNormalizeArgs(args);
|
|
@@ -1152,53 +1001,7 @@ UI.AppShell = (...args) => {
|
|
|
1152
1001
|
setPropertyProps(root, props);
|
|
1153
1002
|
return root;
|
|
1154
1003
|
};
|
|
1155
|
-
|
|
1156
|
-
UI.meta = UI.meta || {};
|
|
1157
|
-
UI.meta.AppShell = {
|
|
1158
|
-
signature: "UI.AppShell(...children) | UI.AppShell(props, ...children)",
|
|
1159
|
-
props: {
|
|
1160
|
-
header: "Node|Function|Array|false",
|
|
1161
|
-
drawer: "Node|Function|Array|false",
|
|
1162
|
-
page: "Node|Function|Array|false",
|
|
1163
|
-
footer: "Node|Function|Array|false",
|
|
1164
|
-
title: "string|Node|Function|Array",
|
|
1165
|
-
subtitle: "string|Node|Function|Array",
|
|
1166
|
-
left: "Node|Function|Array|false",
|
|
1167
|
-
right: "Node|Function|Array",
|
|
1168
|
-
items: "Array",
|
|
1169
|
-
drawerItems: "Array",
|
|
1170
|
-
drawerHeader: "Node|Function|Array",
|
|
1171
|
-
content: "Node|Function|Array",
|
|
1172
|
-
headerProps: "object",
|
|
1173
|
-
drawerProps: "object",
|
|
1174
|
-
pageProps: "object",
|
|
1175
|
-
footerProps: "object",
|
|
1176
|
-
footerContent: "Node|Function|Array",
|
|
1177
|
-
noDrawer: "boolean",
|
|
1178
|
-
reverse: "boolean",
|
|
1179
|
-
stack: "boolean",
|
|
1180
|
-
flush: "boolean",
|
|
1181
|
-
divider: "boolean",
|
|
1182
|
-
drawerStateKey: "string",
|
|
1183
|
-
stateKey: "string",
|
|
1184
|
-
drawerWidth: "number|string",
|
|
1185
|
-
gap: "number|string",
|
|
1186
|
-
padding: "number|string",
|
|
1187
|
-
slots: "{ header?, drawer?, page?, footer?, default? }",
|
|
1188
|
-
class: "string",
|
|
1189
|
-
style: "object"
|
|
1190
|
-
},
|
|
1191
|
-
slots: {
|
|
1192
|
-
header: "Header content",
|
|
1193
|
-
drawer: "Drawer content",
|
|
1194
|
-
page: "Page content",
|
|
1195
|
-
footer: "Footer content",
|
|
1196
|
-
default: "Fallback page content"
|
|
1197
|
-
},
|
|
1198
|
-
returns: "HTMLDivElement con methods openDrawer/closeDrawer/toggleDrawer/isDrawerOpen",
|
|
1199
|
-
description: "Shell applicazione composabile con shortcut per Header/Drawer/Page/Footer e gestione drawer."
|
|
1200
|
-
};
|
|
1201
|
-
}
|
|
1004
|
+
|
|
1202
1005
|
|
|
1203
1006
|
UI.Parallax = function Parallax(...args) {
|
|
1204
1007
|
const { props: rawProps, children } = JSswift.uiNormalizeArgs(args);
|
|
@@ -1412,70 +1215,7 @@ UI.Parallax = function Parallax(...args) {
|
|
|
1412
1215
|
setPropertyProps(wrap, rawProps);
|
|
1413
1216
|
return wrap;
|
|
1414
1217
|
};
|
|
1415
|
-
|
|
1416
|
-
UI.meta = UI.meta || {};
|
|
1417
|
-
UI.meta.Parallax = {
|
|
1418
|
-
signature: "UI.Parallax(...children) | UI.Parallax(props, ...children)",
|
|
1419
|
-
props: {
|
|
1420
|
-
src: "string",
|
|
1421
|
-
image: "string",
|
|
1422
|
-
background: "string",
|
|
1423
|
-
backgroundContent: "Node|Function|Array",
|
|
1424
|
-
height: "string|number",
|
|
1425
|
-
minHeight: "string|number",
|
|
1426
|
-
speed: "number",
|
|
1427
|
-
maxOffset: "number",
|
|
1428
|
-
startTop: "number",
|
|
1429
|
-
state: "success|warning|danger|info|primary|secondary|dark|light|string",
|
|
1430
|
-
overlay: "string",
|
|
1431
|
-
color: "string",
|
|
1432
|
-
bgPosition: "string",
|
|
1433
|
-
bgSize: "string",
|
|
1434
|
-
bgRepeat: "string",
|
|
1435
|
-
padding: "string|number",
|
|
1436
|
-
gap: "string|number",
|
|
1437
|
-
justify: "string",
|
|
1438
|
-
align: "string",
|
|
1439
|
-
contentMaxWidth: "string|number",
|
|
1440
|
-
disabled: "boolean",
|
|
1441
|
-
badge: "Node|Function|Array",
|
|
1442
|
-
eyebrow: "String|Node|Function|Array",
|
|
1443
|
-
title: "String|Node|Function|Array",
|
|
1444
|
-
subtitle: "String|Node|Function|Array",
|
|
1445
|
-
header: "Node|Function|Array",
|
|
1446
|
-
aside: "Node|Function|Array",
|
|
1447
|
-
media: "Node|Function|Array",
|
|
1448
|
-
content: "Node|Function|Array",
|
|
1449
|
-
footer: "Node|Function|Array",
|
|
1450
|
-
actions: "Node|Function|Array",
|
|
1451
|
-
bgClass: "string",
|
|
1452
|
-
badgeClass: "string",
|
|
1453
|
-
headerClass: "string",
|
|
1454
|
-
bodyClass: "string",
|
|
1455
|
-
footerClass: "string",
|
|
1456
|
-
contentClass: "string",
|
|
1457
|
-
slots: "{ background?, badge?, eyebrow?, title?, subtitle?, header?, aside?, media?, content?, footer?, actions?, default? }",
|
|
1458
|
-
class: "string",
|
|
1459
|
-
style: "object"
|
|
1460
|
-
},
|
|
1461
|
-
slots: {
|
|
1462
|
-
background: "Decorative content inside the background layer",
|
|
1463
|
-
badge: "Meta badge/chip above the main content",
|
|
1464
|
-
eyebrow: "Eyebrow/kicker",
|
|
1465
|
-
title: "Main title",
|
|
1466
|
-
subtitle: "Subtitle or supporting text",
|
|
1467
|
-
header: "Additional header content",
|
|
1468
|
-
aside: "Header side area",
|
|
1469
|
-
media: "Media content or foreground card",
|
|
1470
|
-
content: "Main body",
|
|
1471
|
-
footer: "Informational footer",
|
|
1472
|
-
actions: "Actions area",
|
|
1473
|
-
default: "Fallback body content"
|
|
1474
|
-
},
|
|
1475
|
-
returns: "HTMLDivElement with refresh/update/destroy methods",
|
|
1476
|
-
description: "Standardized parallax hero/section with structured header, body, actions, slots, and minimal refresh API."
|
|
1477
|
-
};
|
|
1478
|
-
}
|
|
1218
|
+
|
|
1479
1219
|
|
|
1480
1220
|
// Example:
|
|
1481
1221
|
// _.Parallax({ src: "/assets/hero.jpg", height: "280px", speed: 0.2 }, _.h2("Hello"));
|