negodesign 0.0.60 → 0.0.62
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/components/core/banner/AdCardBanner.svelte +74 -74
- package/dist/components/core/banner/CtaCardBanner.svelte +118 -118
- package/dist/components/core/breadcrumb/breadcrumb-list.svelte +31 -31
- package/dist/components/core/button/ButtonBack.svelte +18 -18
- package/dist/components/core/button/ButtonLogin.svelte +15 -15
- package/dist/components/core/button/ButtonLoginWith.svelte +57 -57
- package/dist/components/core/button/ButtonSend.svelte +15 -15
- package/dist/components/core/card/highlight/01/CardHighlight01.svelte +103 -103
- package/dist/components/core/card/highlight/02/CardHighlight02.svelte +99 -99
- package/dist/components/core/card/highlight/CardHighlight.svelte +22 -22
- package/dist/components/core/card/media/01/CardMedia01.svelte +133 -133
- package/dist/components/core/card/media/02/CardMedia02.svelte +127 -127
- package/dist/components/core/card/media/CardMedia.svelte +18 -18
- package/dist/components/core/card/product/01/CardProduct01.svelte +136 -136
- package/dist/components/core/card/product/02/CardProduct02.svelte +124 -124
- package/dist/components/core/card/product/CardProduct.svelte +22 -22
- package/dist/components/core/card/profile/01/CardProfile01.svelte +134 -134
- package/dist/components/core/card/profile/02/CardProfile02.svelte +132 -132
- package/dist/components/core/card/profile/CardProfile.svelte +18 -18
- package/dist/components/core/card/promotion/CardPromotion.svelte +139 -139
- package/dist/components/core/card/promotion/CardPromotionPrice.svelte +32 -32
- package/dist/components/core/card/shared/CardButton.svelte +42 -42
- package/dist/components/core/card/shared/CardCart.svelte +36 -36
- package/dist/components/core/card/shared/CardDescription.svelte +41 -41
- package/dist/components/core/card/shared/CardFavorite.svelte +33 -33
- package/dist/components/core/card/shared/CardLogo.svelte +19 -19
- package/dist/components/core/card/shared/CardPhoneOrWhatsapp.svelte +45 -45
- package/dist/components/core/card/shared/CardStarRating.svelte +24 -24
- package/dist/components/core/card/shared/CardTags.svelte +95 -95
- package/dist/components/core/card/shared/CardThumbnailVideo.svelte +232 -232
- package/dist/components/core/card/shared/CardTitlePrice.svelte +24 -24
- package/dist/components/core/card/shared/TruncatableText.svelte +49 -49
- package/dist/components/core/carousel/badge/ui/CarouselBadge.svelte +109 -109
- package/dist/components/core/carousel/grid/shared/ui/CarouselGridSlot.svelte +38 -38
- package/dist/components/core/carousel/hero/ui/CarouselHero.svelte +163 -163
- package/dist/components/core/carousel/shared/ui/CarouselHeader.svelte +60 -60
- package/dist/components/core/datatable/ui/DataTableActions.svelte +28 -28
- package/dist/components/core/datatable/ui/DataTableCheckbox.svelte +22 -22
- package/dist/components/core/datatable/ui/DataTableContent.svelte +59 -59
- package/dist/components/core/datatable/ui/DataTableCore.svelte +151 -151
- package/dist/components/core/datatable/ui/DataTableDragHandle.svelte +8 -8
- package/dist/components/core/datatable/ui/DataTableListFilter.svelte +59 -59
- package/dist/components/core/datatable/ui/DataTableListPagination.svelte +35 -35
- package/dist/components/core/footer/ui/Footer.svelte +18 -18
- package/dist/components/core/form/ui/input-base.svelte +81 -81
- package/dist/components/core/form/ui/input-email-or-phone.svelte +23 -23
- package/dist/components/core/form/ui/input-email.svelte +23 -23
- package/dist/components/core/form/ui/input-password-confirm.svelte +23 -23
- package/dist/components/core/form/ui/input-password.svelte +23 -23
- package/dist/components/core/form/ui/input-phone.svelte +33 -33
- package/dist/components/core/form/ui/input-username.svelte +22 -22
- package/dist/components/core/grid/data/types.d.ts +1 -0
- package/dist/components/core/grid/ui/01/Grid01.svelte +29 -28
- package/dist/components/core/grid/ui/02/Grid02.svelte +29 -28
- package/dist/components/core/grid/ui/PanelGrid.svelte +27 -27
- package/dist/components/core/grid/ui/SimpleGrid.svelte +35 -35
- package/dist/components/core/grid/ui/shared/DescriptionGrid.svelte +23 -23
- package/dist/components/core/grid/ui/shared/IconRenderGrid.svelte +23 -21
- package/dist/components/core/grid/ui/shared/IconRenderGrid.svelte.d.ts +1 -0
- package/dist/components/core/grid/ui/shared/TitleGrid.svelte +19 -19
- package/dist/components/core/hero/SimpleHero.svelte +65 -65
- package/dist/components/core/label/LabelOr.svelte +25 -25
- package/dist/components/core/link/link-forget-password.svelte +12 -12
- package/dist/components/core/link/link-privacy-polity.svelte +12 -12
- package/dist/components/core/link/link-terms-of-service.svelte +12 -12
- package/dist/components/core/nav/ui/ComplexMenu.svelte +36 -36
- package/dist/components/core/nav/ui/Menu.svelte +70 -70
- package/dist/components/core/nav/ui/SimpleMenu.svelte +14 -14
- package/dist/components/core/nav/ui/mobile/MenuMobile.svelte +54 -54
- package/dist/components/core/nav/ui/shared/MenuButton.svelte +51 -51
- package/dist/components/core/nav/ui/shared/MenuLinks.svelte +40 -40
- package/dist/components/core/nav/ui/shared/MenuListItem.svelte +48 -48
- package/dist/components/core/nav/ui/shared/MenuLogo.svelte +13 -13
- package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItem.svelte +15 -15
- package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemCard.svelte +62 -62
- package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemGrid.svelte +32 -32
- package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemList.svelte +24 -24
- package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItems.svelte +21 -21
- package/dist/components/core/panel/CarouselSlot.svelte +57 -57
- package/dist/components/core/panel/LeftHero.svelte +117 -117
- package/dist/components/core/search/SearchInput.svelte +32 -32
- package/dist/components/core/search/shared/SearchInputCore.svelte +66 -66
- package/dist/components/core/sidebar/MenuBarSidebar.svelte +70 -70
- package/dist/components/core/sidebar/ui/navbar/NavMenuBarSidebar.svelte +97 -97
- package/dist/components/core/sidebar/ui/navbar/NavMenuBottomSidebar.svelte +33 -33
- package/dist/components/core/sidebar/ui/navbar/NavMenuTopBarSidebar.svelte +103 -103
- package/dist/components/core/tabs/ui/tab-underline.svelte +43 -43
- package/dist/components/pages/admin/01/ui/AdminContent.svelte +14 -14
- package/dist/components/pages/admin/01/ui/AdminPanel.svelte +46 -46
- package/dist/components/pages/security/login/01/ui/FormRegister.svelte +28 -28
- package/dist/components/pages/security/login/01/ui/LoginCard.svelte +107 -107
- package/dist/components/pages/security/login/PageLogin.svelte +22 -22
- package/dist/components/ui/badge/badge.svelte +49 -49
- package/dist/components/ui/button/button.svelte +82 -82
- package/dist/components/ui/chart/chart-container.svelte +80 -80
- package/dist/components/ui/chart/chart-style.svelte +37 -37
- package/dist/components/ui/chart/chart-tooltip.svelte +184 -184
- package/dist/components/ui/checkbox/checkbox.svelte +40 -40
- package/dist/components/ui/data-table/flex-render.svelte +40 -40
- package/dist/components/ui/drawer/drawer-close.svelte +7 -7
- package/dist/components/ui/drawer/drawer-content.svelte +33 -33
- package/dist/components/ui/drawer/drawer-description.svelte +17 -17
- package/dist/components/ui/drawer/drawer-footer.svelte +20 -20
- package/dist/components/ui/drawer/drawer-header.svelte +20 -20
- package/dist/components/ui/drawer/drawer-nested.svelte +12 -12
- package/dist/components/ui/drawer/drawer-overlay.svelte +17 -17
- package/dist/components/ui/drawer/drawer-portal.svelte +7 -7
- package/dist/components/ui/drawer/drawer-title.svelte +17 -17
- package/dist/components/ui/drawer/drawer-trigger.svelte +7 -7
- package/dist/components/ui/drawer/drawer.svelte +12 -12
- package/dist/components/ui/select/select-content.svelte +45 -45
- package/dist/components/ui/select/select-group-heading.svelte +21 -21
- package/dist/components/ui/select/select-group.svelte +17 -17
- package/dist/components/ui/select/select-item.svelte +41 -41
- package/dist/components/ui/select/select-label.svelte +20 -20
- package/dist/components/ui/select/select-portal.svelte +7 -7
- package/dist/components/ui/select/select-scroll-down-button.svelte +21 -21
- package/dist/components/ui/select/select-scroll-up-button.svelte +21 -21
- package/dist/components/ui/select/select-separator.svelte +18 -18
- package/dist/components/ui/select/select-trigger.svelte +30 -30
- package/dist/components/ui/select/select.svelte +11 -11
- package/dist/components/ui/sidebar/sidebar-menu-sub-button.svelte +39 -39
- package/dist/components/ui/star-rating/star-rating-star.svelte +41 -41
- package/dist/components/ui/star-rating/star-rating.svelte +20 -20
- package/dist/components/ui/table/table-body.svelte +15 -15
- package/dist/components/ui/table/table-caption.svelte +20 -20
- package/dist/components/ui/table/table-cell.svelte +15 -15
- package/dist/components/ui/table/table-footer.svelte +20 -20
- package/dist/components/ui/table/table-head.svelte +15 -15
- package/dist/components/ui/table/table-header.svelte +20 -20
- package/dist/components/ui/table/table-row.svelte +15 -15
- package/dist/components/ui/table/table.svelte +17 -17
- package/dist/components/ui/tabs/tabs-content.svelte +17 -17
- package/dist/components/ui/tabs/tabs-list.svelte +40 -40
- package/dist/components/ui/tabs/tabs-trigger.svelte +23 -23
- package/dist/components/ui/tabs/tabs.svelte +19 -19
- package/dist/globals.css +8 -0
- package/dist/styles/globals.css +149 -149
- package/package.json +113 -113
|
@@ -1,97 +1,97 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
3
|
-
import * as Collapsible from "../../../../ui/collapsible/index.js";
|
|
4
|
-
import * as Sidebar from "../../../../ui/sidebar/index.js";
|
|
5
|
-
import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
|
|
6
|
-
import { HugeiconsIcon } from "@hugeicons/svelte";
|
|
7
|
-
import type {
|
|
8
|
-
NavMenuAndSubmenuSidebarProps,
|
|
9
|
-
NavMenuItem,
|
|
10
|
-
NavMenuSidebarProps,
|
|
11
|
-
} from "../../data/nav-menu-sidebar";
|
|
12
|
-
|
|
13
|
-
let {
|
|
14
|
-
items,
|
|
15
|
-
}: {
|
|
16
|
-
items: NavMenuItem[];
|
|
17
|
-
} = $props();
|
|
18
|
-
|
|
19
|
-
// Internal key for items without a group; never collides with a real name
|
|
20
|
-
// because it's not a string accessible to whoever defines the items.
|
|
21
|
-
const UNGROUPED = Symbol("ungrouped");
|
|
22
|
-
|
|
23
|
-
function hasSubmenus(
|
|
24
|
-
item: NavMenuSidebarProps | NavMenuAndSubmenuSidebarProps,
|
|
25
|
-
): item is NavMenuAndSubmenuSidebarProps {
|
|
26
|
-
return "submenus" in item && Array.isArray(item.submenus);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
let groupedItems = $derived(
|
|
30
|
-
Map.groupBy(items, (item) => item.group?.name ?? UNGROUPED),
|
|
31
|
-
);
|
|
32
|
-
</script>
|
|
33
|
-
|
|
34
|
-
{#snippet menuItem(item: NavMenuItem)}
|
|
35
|
-
{#if hasSubmenus(item)}
|
|
36
|
-
<Collapsible.Root open={item.isActive} class="group/collapsible">
|
|
37
|
-
{#snippet child({ props })}
|
|
38
|
-
<Sidebar.MenuItem {...props}>
|
|
39
|
-
<Collapsible.Trigger>
|
|
40
|
-
{#snippet child({ props })}
|
|
41
|
-
<Sidebar.MenuButton {...props} tooltipContent={item.title}>
|
|
42
|
-
{#if item.icon}
|
|
43
|
-
<HugeiconsIcon icon={item.icon} />
|
|
44
|
-
{/if}
|
|
45
|
-
<span>{item.title}</span>
|
|
46
|
-
<ChevronRightIcon
|
|
47
|
-
class="ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
|
|
48
|
-
/>
|
|
49
|
-
</Sidebar.MenuButton>
|
|
50
|
-
{/snippet}
|
|
51
|
-
</Collapsible.Trigger>
|
|
52
|
-
<Collapsible.Content>
|
|
53
|
-
<Sidebar.MenuSub>
|
|
54
|
-
{#each item.submenus ?? [] as subItem (subItem.title)}
|
|
55
|
-
<Sidebar.MenuSubItem>
|
|
56
|
-
<Sidebar.MenuSubButton>
|
|
57
|
-
{#snippet child({ props })}
|
|
58
|
-
<a href={subItem.url} {...props}>
|
|
59
|
-
<span>{subItem.title}</span>
|
|
60
|
-
</a>
|
|
61
|
-
{/snippet}
|
|
62
|
-
</Sidebar.MenuSubButton>
|
|
63
|
-
</Sidebar.MenuSubItem>
|
|
64
|
-
{/each}
|
|
65
|
-
</Sidebar.MenuSub>
|
|
66
|
-
</Collapsible.Content>
|
|
67
|
-
</Sidebar.MenuItem>
|
|
68
|
-
{/snippet}
|
|
69
|
-
</Collapsible.Root>
|
|
70
|
-
{:else}
|
|
71
|
-
<Sidebar.MenuItem>
|
|
72
|
-
<Sidebar.MenuButton>
|
|
73
|
-
{#snippet child({ props })}
|
|
74
|
-
<a href={item.url} {...props}>
|
|
75
|
-
{#if item.icon}
|
|
76
|
-
<HugeiconsIcon icon={item.icon} />
|
|
77
|
-
{/if}
|
|
78
|
-
<span>{item.title}</span>
|
|
79
|
-
</a>
|
|
80
|
-
{/snippet}
|
|
81
|
-
</Sidebar.MenuButton>
|
|
82
|
-
</Sidebar.MenuItem>
|
|
83
|
-
{/if}
|
|
84
|
-
{/snippet}
|
|
85
|
-
|
|
86
|
-
{#each groupedItems as [groupLabel, groupItems] (typeof groupLabel === "string" ? groupLabel : "ungrouped")}
|
|
87
|
-
<Sidebar.Group>
|
|
88
|
-
{#if typeof groupLabel === "string"}
|
|
89
|
-
<Sidebar.GroupLabel>{groupLabel}</Sidebar.GroupLabel>
|
|
90
|
-
{/if}
|
|
91
|
-
<Sidebar.Menu>
|
|
92
|
-
{#each groupItems as item (item.title)}
|
|
93
|
-
{@render menuItem(item)}
|
|
94
|
-
{/each}
|
|
95
|
-
</Sidebar.Menu>
|
|
96
|
-
</Sidebar.Group>
|
|
97
|
-
{/each}
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
3
|
+
import * as Collapsible from "../../../../ui/collapsible/index.js";
|
|
4
|
+
import * as Sidebar from "../../../../ui/sidebar/index.js";
|
|
5
|
+
import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
|
|
6
|
+
import { HugeiconsIcon } from "@hugeicons/svelte";
|
|
7
|
+
import type {
|
|
8
|
+
NavMenuAndSubmenuSidebarProps,
|
|
9
|
+
NavMenuItem,
|
|
10
|
+
NavMenuSidebarProps,
|
|
11
|
+
} from "../../data/nav-menu-sidebar";
|
|
12
|
+
|
|
13
|
+
let {
|
|
14
|
+
items,
|
|
15
|
+
}: {
|
|
16
|
+
items: NavMenuItem[];
|
|
17
|
+
} = $props();
|
|
18
|
+
|
|
19
|
+
// Internal key for items without a group; never collides with a real name
|
|
20
|
+
// because it's not a string accessible to whoever defines the items.
|
|
21
|
+
const UNGROUPED = Symbol("ungrouped");
|
|
22
|
+
|
|
23
|
+
function hasSubmenus(
|
|
24
|
+
item: NavMenuSidebarProps | NavMenuAndSubmenuSidebarProps,
|
|
25
|
+
): item is NavMenuAndSubmenuSidebarProps {
|
|
26
|
+
return "submenus" in item && Array.isArray(item.submenus);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
let groupedItems = $derived(
|
|
30
|
+
Map.groupBy(items, (item) => item.group?.name ?? UNGROUPED),
|
|
31
|
+
);
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
{#snippet menuItem(item: NavMenuItem)}
|
|
35
|
+
{#if hasSubmenus(item)}
|
|
36
|
+
<Collapsible.Root open={item.isActive} class="group/collapsible">
|
|
37
|
+
{#snippet child({ props })}
|
|
38
|
+
<Sidebar.MenuItem {...props}>
|
|
39
|
+
<Collapsible.Trigger>
|
|
40
|
+
{#snippet child({ props })}
|
|
41
|
+
<Sidebar.MenuButton {...props} tooltipContent={item.title}>
|
|
42
|
+
{#if item.icon}
|
|
43
|
+
<HugeiconsIcon icon={item.icon} />
|
|
44
|
+
{/if}
|
|
45
|
+
<span>{item.title}</span>
|
|
46
|
+
<ChevronRightIcon
|
|
47
|
+
class="ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
|
|
48
|
+
/>
|
|
49
|
+
</Sidebar.MenuButton>
|
|
50
|
+
{/snippet}
|
|
51
|
+
</Collapsible.Trigger>
|
|
52
|
+
<Collapsible.Content>
|
|
53
|
+
<Sidebar.MenuSub>
|
|
54
|
+
{#each item.submenus ?? [] as subItem (subItem.title)}
|
|
55
|
+
<Sidebar.MenuSubItem>
|
|
56
|
+
<Sidebar.MenuSubButton>
|
|
57
|
+
{#snippet child({ props })}
|
|
58
|
+
<a href={subItem.url} {...props}>
|
|
59
|
+
<span>{subItem.title}</span>
|
|
60
|
+
</a>
|
|
61
|
+
{/snippet}
|
|
62
|
+
</Sidebar.MenuSubButton>
|
|
63
|
+
</Sidebar.MenuSubItem>
|
|
64
|
+
{/each}
|
|
65
|
+
</Sidebar.MenuSub>
|
|
66
|
+
</Collapsible.Content>
|
|
67
|
+
</Sidebar.MenuItem>
|
|
68
|
+
{/snippet}
|
|
69
|
+
</Collapsible.Root>
|
|
70
|
+
{:else}
|
|
71
|
+
<Sidebar.MenuItem>
|
|
72
|
+
<Sidebar.MenuButton>
|
|
73
|
+
{#snippet child({ props })}
|
|
74
|
+
<a href={item.url} {...props}>
|
|
75
|
+
{#if item.icon}
|
|
76
|
+
<HugeiconsIcon icon={item.icon} />
|
|
77
|
+
{/if}
|
|
78
|
+
<span>{item.title}</span>
|
|
79
|
+
</a>
|
|
80
|
+
{/snippet}
|
|
81
|
+
</Sidebar.MenuButton>
|
|
82
|
+
</Sidebar.MenuItem>
|
|
83
|
+
{/if}
|
|
84
|
+
{/snippet}
|
|
85
|
+
|
|
86
|
+
{#each groupedItems as [groupLabel, groupItems] (typeof groupLabel === "string" ? groupLabel : "ungrouped")}
|
|
87
|
+
<Sidebar.Group>
|
|
88
|
+
{#if typeof groupLabel === "string"}
|
|
89
|
+
<Sidebar.GroupLabel>{groupLabel}</Sidebar.GroupLabel>
|
|
90
|
+
{/if}
|
|
91
|
+
<Sidebar.Menu>
|
|
92
|
+
{#each groupItems as item (item.title)}
|
|
93
|
+
{@render menuItem(item)}
|
|
94
|
+
{/each}
|
|
95
|
+
</Sidebar.Menu>
|
|
96
|
+
</Sidebar.Group>
|
|
97
|
+
{/each}
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import * as Sidebar from "../../../../ui/sidebar/index.js";
|
|
3
|
-
import type { WithoutChildren } from "../../../../../utils.js";
|
|
4
|
-
import type { ComponentProps } from "svelte";
|
|
5
|
-
import type { NavMenuSidebarProps } from "../../data/nav-menu-sidebar";
|
|
6
|
-
import { HugeiconsIcon } from "@hugeicons/svelte";
|
|
7
|
-
|
|
8
|
-
let {
|
|
9
|
-
items,
|
|
10
|
-
...restProps
|
|
11
|
-
}: { items?: NavMenuSidebarProps[] } & WithoutChildren<
|
|
12
|
-
ComponentProps<typeof Sidebar.Group>
|
|
13
|
-
> = $props();
|
|
14
|
-
</script>
|
|
15
|
-
|
|
16
|
-
<Sidebar.Group {...restProps}>
|
|
17
|
-
<Sidebar.GroupContent>
|
|
18
|
-
<Sidebar.Menu>
|
|
19
|
-
{#each items as item (item.title)}
|
|
20
|
-
<Sidebar.MenuItem>
|
|
21
|
-
<Sidebar.MenuButton>
|
|
22
|
-
{#snippet child({ props })}
|
|
23
|
-
<a href={item.url} {...props}>
|
|
24
|
-
<HugeiconsIcon icon={item.icon} size={16} />
|
|
25
|
-
<span>{item.title}</span>
|
|
26
|
-
</a>
|
|
27
|
-
{/snippet}
|
|
28
|
-
</Sidebar.MenuButton>
|
|
29
|
-
</Sidebar.MenuItem>
|
|
30
|
-
{/each}
|
|
31
|
-
</Sidebar.Menu>
|
|
32
|
-
</Sidebar.GroupContent>
|
|
33
|
-
</Sidebar.Group>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import * as Sidebar from "../../../../ui/sidebar/index.js";
|
|
3
|
+
import type { WithoutChildren } from "../../../../../utils.js";
|
|
4
|
+
import type { ComponentProps } from "svelte";
|
|
5
|
+
import type { NavMenuSidebarProps } from "../../data/nav-menu-sidebar";
|
|
6
|
+
import { HugeiconsIcon } from "@hugeicons/svelte";
|
|
7
|
+
|
|
8
|
+
let {
|
|
9
|
+
items,
|
|
10
|
+
...restProps
|
|
11
|
+
}: { items?: NavMenuSidebarProps[] } & WithoutChildren<
|
|
12
|
+
ComponentProps<typeof Sidebar.Group>
|
|
13
|
+
> = $props();
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<Sidebar.Group {...restProps}>
|
|
17
|
+
<Sidebar.GroupContent>
|
|
18
|
+
<Sidebar.Menu>
|
|
19
|
+
{#each items as item (item.title)}
|
|
20
|
+
<Sidebar.MenuItem>
|
|
21
|
+
<Sidebar.MenuButton>
|
|
22
|
+
{#snippet child({ props })}
|
|
23
|
+
<a href={item.url} {...props}>
|
|
24
|
+
<HugeiconsIcon icon={item.icon} size={16} />
|
|
25
|
+
<span>{item.title}</span>
|
|
26
|
+
</a>
|
|
27
|
+
{/snippet}
|
|
28
|
+
</Sidebar.MenuButton>
|
|
29
|
+
</Sidebar.MenuItem>
|
|
30
|
+
{/each}
|
|
31
|
+
</Sidebar.Menu>
|
|
32
|
+
</Sidebar.GroupContent>
|
|
33
|
+
</Sidebar.Group>
|
|
@@ -1,103 +1,103 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import * as DropdownMenu from "../../../../ui/dropdown-menu/index.js";
|
|
3
|
-
import * as Sidebar from "../../../../ui/sidebar/index.js";
|
|
4
|
-
import { useSidebar } from "../../../../ui/sidebar/index.js";
|
|
5
|
-
import type { NavTopBarSidebarItem } from "../../data/nav-top-bar-sidebar";
|
|
6
|
-
import { HugeiconsIcon } from "@hugeicons/svelte";
|
|
7
|
-
import { UnfoldMoreIcon } from "@hugeicons/core-free-icons";
|
|
8
|
-
|
|
9
|
-
// This should be `Component` after @lucide/svelte updates types
|
|
10
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
11
|
-
let { content, dropdownMenu }: NavTopBarSidebarItem = $props();
|
|
12
|
-
const sidebar = useSidebar();
|
|
13
|
-
</script>
|
|
14
|
-
|
|
15
|
-
<Sidebar.Menu>
|
|
16
|
-
<Sidebar.MenuItem>
|
|
17
|
-
<DropdownMenu.Root>
|
|
18
|
-
<DropdownMenu.Trigger>
|
|
19
|
-
{#snippet child({ props })}
|
|
20
|
-
<Sidebar.MenuButton
|
|
21
|
-
{...props}
|
|
22
|
-
size="lg"
|
|
23
|
-
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
|
24
|
-
>
|
|
25
|
-
<div
|
|
26
|
-
class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
|
|
27
|
-
>
|
|
28
|
-
<content.logo class="size-4" />
|
|
29
|
-
</div>
|
|
30
|
-
<div
|
|
31
|
-
class="grid flex-1 text-start text-sm leading-tight"
|
|
32
|
-
>
|
|
33
|
-
<span class="truncate font-medium">
|
|
34
|
-
{content.title}
|
|
35
|
-
</span>
|
|
36
|
-
<span class="truncate text-xs"
|
|
37
|
-
>{content.subtitle}</span
|
|
38
|
-
>
|
|
39
|
-
</div>
|
|
40
|
-
{#if dropdownMenu}
|
|
41
|
-
<HugeiconsIcon
|
|
42
|
-
icon={UnfoldMoreIcon}
|
|
43
|
-
class="ms-auto"
|
|
44
|
-
/>
|
|
45
|
-
{/if}
|
|
46
|
-
</Sidebar.MenuButton>
|
|
47
|
-
{/snippet}
|
|
48
|
-
</DropdownMenu.Trigger>
|
|
49
|
-
{#if dropdownMenu}
|
|
50
|
-
<DropdownMenu.Content
|
|
51
|
-
class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
|
|
52
|
-
align="start"
|
|
53
|
-
side={sidebar.isMobile ? "bottom" : "right"}
|
|
54
|
-
sideOffset={4}
|
|
55
|
-
>
|
|
56
|
-
{#if dropdownMenu.header}
|
|
57
|
-
<DropdownMenu.Label
|
|
58
|
-
class="text-muted-foreground text-xs"
|
|
59
|
-
>
|
|
60
|
-
{#if dropdownMenu.header.icon}
|
|
61
|
-
<dropdownMenu.header.icon
|
|
62
|
-
class="size-3.5 shrink-0"
|
|
63
|
-
/>
|
|
64
|
-
{/if}
|
|
65
|
-
{dropdownMenu.header.text}
|
|
66
|
-
</DropdownMenu.Label>
|
|
67
|
-
{/if}
|
|
68
|
-
{#each dropdownMenu.items as it, index (index)}
|
|
69
|
-
<DropdownMenu.Item
|
|
70
|
-
onSelect={it.onclick}
|
|
71
|
-
class="gap-2 p-2"
|
|
72
|
-
>
|
|
73
|
-
<div
|
|
74
|
-
class="flex size-6 items-center justify-center rounded-md border"
|
|
75
|
-
>
|
|
76
|
-
<it.icon class="size-3.5 shrink-0" />
|
|
77
|
-
</div>
|
|
78
|
-
{it.text}
|
|
79
|
-
<DropdownMenu.Shortcut>
|
|
80
|
-
⌘{index + 1}
|
|
81
|
-
</DropdownMenu.Shortcut>
|
|
82
|
-
</DropdownMenu.Item>
|
|
83
|
-
{/each}
|
|
84
|
-
{#if dropdownMenu.footer}
|
|
85
|
-
<DropdownMenu.Separator />
|
|
86
|
-
<DropdownMenu.Item class="gap-2 p-2">
|
|
87
|
-
<div
|
|
88
|
-
class="flex size-6 items-center justify-center rounded-md border bg-transparent"
|
|
89
|
-
>
|
|
90
|
-
{#if dropdownMenu.footer.icon}
|
|
91
|
-
<dropdownMenu.footer.icon class="size-4" />
|
|
92
|
-
{/if}
|
|
93
|
-
</div>
|
|
94
|
-
<div class="text-muted-foreground font-medium">
|
|
95
|
-
{dropdownMenu.footer.text}
|
|
96
|
-
</div>
|
|
97
|
-
</DropdownMenu.Item>
|
|
98
|
-
{/if}
|
|
99
|
-
</DropdownMenu.Content>
|
|
100
|
-
{/if}
|
|
101
|
-
</DropdownMenu.Root>
|
|
102
|
-
</Sidebar.MenuItem>
|
|
103
|
-
</Sidebar.Menu>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import * as DropdownMenu from "../../../../ui/dropdown-menu/index.js";
|
|
3
|
+
import * as Sidebar from "../../../../ui/sidebar/index.js";
|
|
4
|
+
import { useSidebar } from "../../../../ui/sidebar/index.js";
|
|
5
|
+
import type { NavTopBarSidebarItem } from "../../data/nav-top-bar-sidebar";
|
|
6
|
+
import { HugeiconsIcon } from "@hugeicons/svelte";
|
|
7
|
+
import { UnfoldMoreIcon } from "@hugeicons/core-free-icons";
|
|
8
|
+
|
|
9
|
+
// This should be `Component` after @lucide/svelte updates types
|
|
10
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
11
|
+
let { content, dropdownMenu }: NavTopBarSidebarItem = $props();
|
|
12
|
+
const sidebar = useSidebar();
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<Sidebar.Menu>
|
|
16
|
+
<Sidebar.MenuItem>
|
|
17
|
+
<DropdownMenu.Root>
|
|
18
|
+
<DropdownMenu.Trigger>
|
|
19
|
+
{#snippet child({ props })}
|
|
20
|
+
<Sidebar.MenuButton
|
|
21
|
+
{...props}
|
|
22
|
+
size="lg"
|
|
23
|
+
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
|
24
|
+
>
|
|
25
|
+
<div
|
|
26
|
+
class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
|
|
27
|
+
>
|
|
28
|
+
<content.logo class="size-4" />
|
|
29
|
+
</div>
|
|
30
|
+
<div
|
|
31
|
+
class="grid flex-1 text-start text-sm leading-tight"
|
|
32
|
+
>
|
|
33
|
+
<span class="truncate font-medium">
|
|
34
|
+
{content.title}
|
|
35
|
+
</span>
|
|
36
|
+
<span class="truncate text-xs"
|
|
37
|
+
>{content.subtitle}</span
|
|
38
|
+
>
|
|
39
|
+
</div>
|
|
40
|
+
{#if dropdownMenu}
|
|
41
|
+
<HugeiconsIcon
|
|
42
|
+
icon={UnfoldMoreIcon}
|
|
43
|
+
class="ms-auto"
|
|
44
|
+
/>
|
|
45
|
+
{/if}
|
|
46
|
+
</Sidebar.MenuButton>
|
|
47
|
+
{/snippet}
|
|
48
|
+
</DropdownMenu.Trigger>
|
|
49
|
+
{#if dropdownMenu}
|
|
50
|
+
<DropdownMenu.Content
|
|
51
|
+
class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
|
|
52
|
+
align="start"
|
|
53
|
+
side={sidebar.isMobile ? "bottom" : "right"}
|
|
54
|
+
sideOffset={4}
|
|
55
|
+
>
|
|
56
|
+
{#if dropdownMenu.header}
|
|
57
|
+
<DropdownMenu.Label
|
|
58
|
+
class="text-muted-foreground text-xs"
|
|
59
|
+
>
|
|
60
|
+
{#if dropdownMenu.header.icon}
|
|
61
|
+
<dropdownMenu.header.icon
|
|
62
|
+
class="size-3.5 shrink-0"
|
|
63
|
+
/>
|
|
64
|
+
{/if}
|
|
65
|
+
{dropdownMenu.header.text}
|
|
66
|
+
</DropdownMenu.Label>
|
|
67
|
+
{/if}
|
|
68
|
+
{#each dropdownMenu.items as it, index (index)}
|
|
69
|
+
<DropdownMenu.Item
|
|
70
|
+
onSelect={it.onclick}
|
|
71
|
+
class="gap-2 p-2"
|
|
72
|
+
>
|
|
73
|
+
<div
|
|
74
|
+
class="flex size-6 items-center justify-center rounded-md border"
|
|
75
|
+
>
|
|
76
|
+
<it.icon class="size-3.5 shrink-0" />
|
|
77
|
+
</div>
|
|
78
|
+
{it.text}
|
|
79
|
+
<DropdownMenu.Shortcut>
|
|
80
|
+
⌘{index + 1}
|
|
81
|
+
</DropdownMenu.Shortcut>
|
|
82
|
+
</DropdownMenu.Item>
|
|
83
|
+
{/each}
|
|
84
|
+
{#if dropdownMenu.footer}
|
|
85
|
+
<DropdownMenu.Separator />
|
|
86
|
+
<DropdownMenu.Item class="gap-2 p-2">
|
|
87
|
+
<div
|
|
88
|
+
class="flex size-6 items-center justify-center rounded-md border bg-transparent"
|
|
89
|
+
>
|
|
90
|
+
{#if dropdownMenu.footer.icon}
|
|
91
|
+
<dropdownMenu.footer.icon class="size-4" />
|
|
92
|
+
{/if}
|
|
93
|
+
</div>
|
|
94
|
+
<div class="text-muted-foreground font-medium">
|
|
95
|
+
{dropdownMenu.footer.text}
|
|
96
|
+
</div>
|
|
97
|
+
</DropdownMenu.Item>
|
|
98
|
+
{/if}
|
|
99
|
+
</DropdownMenu.Content>
|
|
100
|
+
{/if}
|
|
101
|
+
</DropdownMenu.Root>
|
|
102
|
+
</Sidebar.MenuItem>
|
|
103
|
+
</Sidebar.Menu>
|
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import * as UnderlineTabs from "../../../ui/underline-tabs";
|
|
3
|
-
import type { TabProps } from "../data/TabModel";
|
|
4
|
-
|
|
5
|
-
type Props = {
|
|
6
|
-
items?: TabProps[];
|
|
7
|
-
className?: string;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
let { items = [], className }: Props = $props();
|
|
11
|
-
|
|
12
|
-
let activeValue = $state<string>("");
|
|
13
|
-
|
|
14
|
-
let currentActiveValue = $derived(
|
|
15
|
-
activeValue || (items.length > 0 ? items[0].item.value : ""),
|
|
16
|
-
);
|
|
17
|
-
|
|
18
|
-
let selected = $derived(
|
|
19
|
-
items.find((it) => it.item.value === currentActiveValue) || items[0],
|
|
20
|
-
);
|
|
21
|
-
</script>
|
|
22
|
-
|
|
23
|
-
{#if items && items.length > 0 && selected}
|
|
24
|
-
<UnderlineTabs.Root
|
|
25
|
-
value={currentActiveValue}
|
|
26
|
-
onValueChange={(val) => (activeValue = val)}
|
|
27
|
-
class="mb-5 {className}"
|
|
28
|
-
>
|
|
29
|
-
<UnderlineTabs.List>
|
|
30
|
-
{#each items as it (it.item.value)}
|
|
31
|
-
<UnderlineTabs.Trigger
|
|
32
|
-
value={it.item.value}
|
|
33
|
-
class="text-lg md:text-base"
|
|
34
|
-
>
|
|
35
|
-
{it.item.label}
|
|
36
|
-
</UnderlineTabs.Trigger>
|
|
37
|
-
{/each}
|
|
38
|
-
</UnderlineTabs.List>
|
|
39
|
-
</UnderlineTabs.Root>
|
|
40
|
-
{#if selected.children}
|
|
41
|
-
{@render selected.children()}
|
|
42
|
-
{/if}
|
|
43
|
-
{/if}
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import * as UnderlineTabs from "../../../ui/underline-tabs";
|
|
3
|
+
import type { TabProps } from "../data/TabModel";
|
|
4
|
+
|
|
5
|
+
type Props = {
|
|
6
|
+
items?: TabProps[];
|
|
7
|
+
className?: string;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
let { items = [], className }: Props = $props();
|
|
11
|
+
|
|
12
|
+
let activeValue = $state<string>("");
|
|
13
|
+
|
|
14
|
+
let currentActiveValue = $derived(
|
|
15
|
+
activeValue || (items.length > 0 ? items[0].item.value : ""),
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
let selected = $derived(
|
|
19
|
+
items.find((it) => it.item.value === currentActiveValue) || items[0],
|
|
20
|
+
);
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
{#if items && items.length > 0 && selected}
|
|
24
|
+
<UnderlineTabs.Root
|
|
25
|
+
value={currentActiveValue}
|
|
26
|
+
onValueChange={(val) => (activeValue = val)}
|
|
27
|
+
class="mb-5 {className}"
|
|
28
|
+
>
|
|
29
|
+
<UnderlineTabs.List>
|
|
30
|
+
{#each items as it (it.item.value)}
|
|
31
|
+
<UnderlineTabs.Trigger
|
|
32
|
+
value={it.item.value}
|
|
33
|
+
class="text-lg md:text-base"
|
|
34
|
+
>
|
|
35
|
+
{it.item.label}
|
|
36
|
+
</UnderlineTabs.Trigger>
|
|
37
|
+
{/each}
|
|
38
|
+
</UnderlineTabs.List>
|
|
39
|
+
</UnderlineTabs.Root>
|
|
40
|
+
{#if selected.children}
|
|
41
|
+
{@render selected.children()}
|
|
42
|
+
{/if}
|
|
43
|
+
{/if}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import type { Snippet } from "svelte";
|
|
3
|
-
|
|
4
|
-
/** Content wrapper for admin pages. */
|
|
5
|
-
type Props = {
|
|
6
|
-
children?: Snippet;
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
let { children }: Props = $props();
|
|
10
|
-
</script>
|
|
11
|
-
|
|
12
|
-
<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
|
|
13
|
-
{@render children?.()}
|
|
14
|
-
</div>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Snippet } from "svelte";
|
|
3
|
+
|
|
4
|
+
/** Content wrapper for admin pages. */
|
|
5
|
+
type Props = {
|
|
6
|
+
children?: Snippet;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
let { children }: Props = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
|
|
13
|
+
{@render children?.()}
|
|
14
|
+
</div>
|