@opensite/ui 0.9.6 → 0.9.7
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/navbar-enterprise-mega.cjs +64 -64
- package/dist/navbar-enterprise-mega.js +64 -64
- package/dist/navbar-mega-menu.cjs +117 -50
- package/dist/navbar-mega-menu.js +117 -50
- package/dist/registry.cjs +181 -114
- package/dist/registry.js +181 -114
- package/package.json +1 -1
package/dist/navbar-mega-menu.js
CHANGED
|
@@ -1216,61 +1216,126 @@ var DesktopMenuItem = ({
|
|
|
1216
1216
|
] }) })
|
|
1217
1217
|
] }, `desktop-menu-item-${index}`);
|
|
1218
1218
|
}
|
|
1219
|
-
if (layout === "simple-grid" && link.links) {
|
|
1219
|
+
if (layout === "simple-grid" && (link.links || link.dropdownGroups)) {
|
|
1220
|
+
const allLinks = link.dropdownGroups ? link.dropdownGroups.flatMap((group) => group.links || []) : link.links || [];
|
|
1220
1221
|
return /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
|
|
1221
1222
|
/* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal hover:bg-muted focus:bg-muted data-[state=open]:bg-muted/50", children: link.label }),
|
|
1222
|
-
/* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[700px] p-6", children:
|
|
1223
|
-
|
|
1224
|
-
{
|
|
1225
|
-
|
|
1226
|
-
className: "
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1223
|
+
/* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[700px] p-6", children: link.dropdownGroups ? (
|
|
1224
|
+
// Render with group headers
|
|
1225
|
+
/* @__PURE__ */ jsx("div", { className: "space-y-6", children: link.dropdownGroups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { children: [
|
|
1226
|
+
group.label && /* @__PURE__ */ jsx("div", { className: "mb-3 text-xs font-medium tracking-wider uppercase text-muted-foreground", children: group.label }),
|
|
1227
|
+
/* @__PURE__ */ jsx("div", { className: "grid auto-rows-fr grid-cols-1 gap-4 sm:grid-cols-2", children: (group.links || []).map((item, itemIndex) => /* @__PURE__ */ jsxs(
|
|
1228
|
+
NavigationMenuLink,
|
|
1229
|
+
{
|
|
1230
|
+
href: getLinkUrl(item),
|
|
1231
|
+
className: "flex w-full flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-muted hover:text-foreground",
|
|
1232
|
+
children: [
|
|
1233
|
+
item.image && /* @__PURE__ */ jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
|
|
1234
|
+
Img,
|
|
1235
|
+
{
|
|
1236
|
+
src: item.image,
|
|
1237
|
+
alt: typeof item.label === "string" ? item.label : "Menu item",
|
|
1238
|
+
className: "h-full w-full object-cover object-center",
|
|
1239
|
+
optixFlowConfig
|
|
1240
|
+
}
|
|
1241
|
+
) }),
|
|
1242
|
+
!item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 20 }) : null }),
|
|
1243
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
|
|
1244
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
|
|
1245
|
+
item.description && /* @__PURE__ */ jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
|
|
1246
|
+
] })
|
|
1247
|
+
]
|
|
1248
|
+
},
|
|
1249
|
+
`grid-item-${groupIndex}-${itemIndex}`
|
|
1250
|
+
)) })
|
|
1251
|
+
] }, `group-${groupIndex}`)) })
|
|
1252
|
+
) : (
|
|
1253
|
+
// Render without groups
|
|
1254
|
+
/* @__PURE__ */ jsx("div", { className: "grid auto-rows-fr grid-cols-1 gap-4 sm:grid-cols-2", children: allLinks.map((item, itemIndex) => /* @__PURE__ */ jsxs(
|
|
1255
|
+
NavigationMenuLink,
|
|
1256
|
+
{
|
|
1257
|
+
href: getLinkUrl(item),
|
|
1258
|
+
className: "flex w-full flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-muted hover:text-foreground",
|
|
1259
|
+
children: [
|
|
1260
|
+
item.image && /* @__PURE__ */ jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
|
|
1261
|
+
Img,
|
|
1262
|
+
{
|
|
1263
|
+
src: item.image,
|
|
1264
|
+
alt: typeof item.label === "string" ? item.label : "Menu item",
|
|
1265
|
+
className: "h-full w-full object-cover object-center",
|
|
1266
|
+
optixFlowConfig
|
|
1267
|
+
}
|
|
1268
|
+
) }),
|
|
1269
|
+
!item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 20 }) : null }),
|
|
1270
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
|
|
1271
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
|
|
1272
|
+
item.description && /* @__PURE__ */ jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
|
|
1273
|
+
] })
|
|
1274
|
+
]
|
|
1275
|
+
},
|
|
1276
|
+
`grid-item-${itemIndex}`
|
|
1277
|
+
)) })
|
|
1278
|
+
) })
|
|
1246
1279
|
] }, `desktop-menu-item-${index}`);
|
|
1247
1280
|
}
|
|
1248
|
-
if (layout === "list-with-icons" && link.links) {
|
|
1281
|
+
if (layout === "list-with-icons" && (link.links || link.dropdownGroups)) {
|
|
1282
|
+
const allLinks = link.dropdownGroups ? link.dropdownGroups.flatMap((group) => group.links || []) : link.links || [];
|
|
1249
1283
|
return /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
|
|
1250
1284
|
/* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal hover:bg-muted focus:bg-muted data-[state=open]:bg-muted/50", children: link.label }),
|
|
1251
|
-
/* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children:
|
|
1252
|
-
|
|
1253
|
-
{
|
|
1254
|
-
|
|
1255
|
-
className: "flex
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1285
|
+
/* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children: link.dropdownGroups ? (
|
|
1286
|
+
// Render with group headers
|
|
1287
|
+
/* @__PURE__ */ jsx("div", { className: "space-y-4", children: link.dropdownGroups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { children: [
|
|
1288
|
+
group.label && /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-medium tracking-wider uppercase text-muted-foreground", children: group.label }),
|
|
1289
|
+
/* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: (group.links || []).map((item, itemIndex) => /* @__PURE__ */ jsx("li", { className: "w-full", children: /* @__PURE__ */ jsxs(
|
|
1290
|
+
NavigationMenuLink,
|
|
1291
|
+
{
|
|
1292
|
+
href: getLinkUrl(item),
|
|
1293
|
+
className: "flex w-full items-start gap-3 rounded-lg p-3 hover:bg-muted",
|
|
1294
|
+
children: [
|
|
1295
|
+
item.image && /* @__PURE__ */ jsx("div", { className: "h-12 w-12 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
|
|
1296
|
+
Img,
|
|
1297
|
+
{
|
|
1298
|
+
src: item.image,
|
|
1299
|
+
alt: typeof item.label === "string" ? item.label : "Menu item",
|
|
1300
|
+
className: "h-full w-full object-cover object-center",
|
|
1301
|
+
optixFlowConfig
|
|
1302
|
+
}
|
|
1303
|
+
) }),
|
|
1304
|
+
!item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
|
|
1305
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
|
|
1306
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
|
|
1307
|
+
item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
|
|
1308
|
+
] })
|
|
1309
|
+
]
|
|
1310
|
+
}
|
|
1311
|
+
) }, `list-item-${groupIndex}-${itemIndex}`)) })
|
|
1312
|
+
] }, `group-${groupIndex}`)) })
|
|
1313
|
+
) : (
|
|
1314
|
+
// Render without groups
|
|
1315
|
+
/* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: allLinks.map((item, itemIndex) => /* @__PURE__ */ jsx("li", { className: "w-full", children: /* @__PURE__ */ jsxs(
|
|
1316
|
+
NavigationMenuLink,
|
|
1317
|
+
{
|
|
1318
|
+
href: getLinkUrl(item),
|
|
1319
|
+
className: "flex w-full items-start gap-3 rounded-lg p-3 hover:bg-muted",
|
|
1320
|
+
children: [
|
|
1321
|
+
item.image && /* @__PURE__ */ jsx("div", { className: "h-12 w-12 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
|
|
1322
|
+
Img,
|
|
1323
|
+
{
|
|
1324
|
+
src: item.image,
|
|
1325
|
+
alt: typeof item.label === "string" ? item.label : "Menu item",
|
|
1326
|
+
className: "h-full w-full object-cover object-center",
|
|
1327
|
+
optixFlowConfig
|
|
1328
|
+
}
|
|
1329
|
+
) }),
|
|
1330
|
+
!item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
|
|
1331
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
|
|
1332
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
|
|
1333
|
+
item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
|
|
1334
|
+
] })
|
|
1335
|
+
]
|
|
1336
|
+
}
|
|
1337
|
+
) }, `list-item-${itemIndex}`)) })
|
|
1338
|
+
) })
|
|
1274
1339
|
] }, `desktop-menu-item-${index}`);
|
|
1275
1340
|
}
|
|
1276
1341
|
if (link.href) {
|
|
@@ -1347,7 +1412,9 @@ var NavbarMegaMenu = ({
|
|
|
1347
1412
|
const [open, setOpen] = useState(false);
|
|
1348
1413
|
const [submenuIndex, setSubmenuIndex] = useState(null);
|
|
1349
1414
|
const activeSubmenu = submenuIndex !== null ? menuLinks?.[submenuIndex] : null;
|
|
1350
|
-
const hasDropdownItems = (link) => Boolean(
|
|
1415
|
+
const hasDropdownItems = (link) => Boolean(
|
|
1416
|
+
link.links && link.links.length > 0 || link.dropdownGroups && link.dropdownGroups.length > 0
|
|
1417
|
+
);
|
|
1351
1418
|
const renderActions = () => {
|
|
1352
1419
|
if (!actions || actions.length === 0) return null;
|
|
1353
1420
|
return actions.map((action, index) => {
|