negodesign 0.0.1 → 0.0.2
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/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/carousel/data/CarouselModel.d.ts +2 -1
- 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 +144 -144
- 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/form/ui/input-base.svelte +81 -81
- package/dist/components/core/form/ui/input-email.svelte +22 -22
- package/dist/components/core/form/ui/input-password-confirm.svelte +22 -22
- package/dist/components/core/form/ui/input-password.svelte +22 -22
- package/dist/components/core/form/ui/input-phone.svelte +22 -0
- package/dist/components/core/form/ui/input-phone.svelte.d.ts +4 -0
- package/dist/components/core/form/ui/input-username.svelte +21 -21
- 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/nav-menu-bar.svelte +97 -97
- package/dist/components/core/nav/ui/nav-menu-bottom-bar.svelte +33 -33
- package/dist/components/core/nav/ui/nav-menu-top-bar.svelte +103 -103
- package/dist/components/core/sidebar/menu-bar-sidebar.svelte +62 -62
- package/dist/components/core/tabs/ui/tab-underline.svelte +41 -41
- package/dist/components/pages/admin/ui/admin-content.svelte +13 -13
- package/dist/components/pages/admin/ui/admin-panel.svelte +40 -40
- package/dist/components/pages/login/admin/01/data/page-props.d.ts +10 -0
- package/dist/components/pages/login/admin/01/data/page-props.js +1 -0
- package/dist/components/pages/login/admin/01/ui/AuthCard.svelte +84 -58
- package/dist/components/pages/login/admin/01/ui/AuthCard.svelte.d.ts +11 -17
- package/dist/components/pages/login/admin/01/ui/FormLogin.svelte +25 -5
- package/dist/components/pages/login/admin/01/ui/FormLogin.svelte.d.ts +6 -1
- package/dist/components/pages/login/admin/01/ui/FormLoginEmailPassword.svelte +12 -0
- package/dist/components/pages/login/admin/01/ui/FormLoginEmailPassword.svelte.d.ts +7 -0
- package/dist/components/pages/login/admin/01/ui/FormLoginPhonePassword.svelte +12 -0
- package/dist/components/pages/login/admin/01/ui/FormLoginPhonePassword.svelte.d.ts +7 -0
- package/dist/components/pages/login/admin/01/ui/FormLoginUsernamePassword.svelte +12 -0
- package/dist/components/pages/login/admin/01/ui/FormLoginUsernamePassword.svelte.d.ts +7 -0
- package/dist/components/pages/login/admin/01/ui/FormRegister.svelte +28 -28
- package/dist/components/pages/login/admin/01/ui/LeftHero.svelte +105 -105
- package/dist/components/pages/login/admin/01/ui/PageLogin.svelte +47 -49
- package/dist/components/pages/login/admin/01/ui/PageLogin.svelte.d.ts +14 -17
- package/dist/components/ui/badge/badge.svelte +49 -49
- 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/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/index.js +0 -1
- package/package.json +94 -88
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import type { InputLabelProps } from "../data/InputLabel.svelte";
|
|
3
|
-
import InputBase from "./input-base.svelte";
|
|
4
|
-
import { t } from "../../../../i18n";
|
|
5
|
-
|
|
6
|
-
let {
|
|
7
|
-
label,
|
|
8
|
-
placeholder,
|
|
9
|
-
value = $bindable(""),
|
|
10
|
-
...restProps
|
|
11
|
-
}: InputLabelProps = $props();
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<InputBase
|
|
15
|
-
type="email"
|
|
16
|
-
label={label || $t("input.email.label")}
|
|
17
|
-
placeholder={placeholder || $t("input.email.placeholder")}
|
|
18
|
-
isLabel
|
|
19
|
-
isIcon
|
|
20
|
-
bind:value
|
|
21
|
-
{...restProps}
|
|
22
|
-
/>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { InputLabelProps } from "../data/InputLabel.svelte";
|
|
3
|
+
import InputBase from "./input-base.svelte";
|
|
4
|
+
import { t } from "../../../../i18n";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
label,
|
|
8
|
+
placeholder,
|
|
9
|
+
value = $bindable(""),
|
|
10
|
+
...restProps
|
|
11
|
+
}: InputLabelProps = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<InputBase
|
|
15
|
+
type="email"
|
|
16
|
+
label={label || $t("input.email.label")}
|
|
17
|
+
placeholder={placeholder || $t("input.email.placeholder")}
|
|
18
|
+
isLabel
|
|
19
|
+
isIcon
|
|
20
|
+
bind:value
|
|
21
|
+
{...restProps}
|
|
22
|
+
/>
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import type { InputLabelProps } from "../data/InputLabel.svelte";
|
|
3
|
-
import InputBase from "./input-base.svelte";
|
|
4
|
-
import { t } from "../../../../i18n";
|
|
5
|
-
|
|
6
|
-
let {
|
|
7
|
-
label,
|
|
8
|
-
placeholder,
|
|
9
|
-
value = $bindable(""),
|
|
10
|
-
...restProps
|
|
11
|
-
}: InputLabelProps = $props();
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<InputBase
|
|
15
|
-
type="password"
|
|
16
|
-
label={label || $t("input.password-confirm.label")}
|
|
17
|
-
placeholder={placeholder || $t("input.password-confirm.placeholder")}
|
|
18
|
-
isLabel
|
|
19
|
-
isIcon
|
|
20
|
-
bind:value
|
|
21
|
-
{...restProps}
|
|
22
|
-
/>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { InputLabelProps } from "../data/InputLabel.svelte";
|
|
3
|
+
import InputBase from "./input-base.svelte";
|
|
4
|
+
import { t } from "../../../../i18n";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
label,
|
|
8
|
+
placeholder,
|
|
9
|
+
value = $bindable(""),
|
|
10
|
+
...restProps
|
|
11
|
+
}: InputLabelProps = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<InputBase
|
|
15
|
+
type="password"
|
|
16
|
+
label={label || $t("input.password-confirm.label")}
|
|
17
|
+
placeholder={placeholder || $t("input.password-confirm.placeholder")}
|
|
18
|
+
isLabel
|
|
19
|
+
isIcon
|
|
20
|
+
bind:value
|
|
21
|
+
{...restProps}
|
|
22
|
+
/>
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import type { InputLabelProps } from "../data/InputLabel.svelte";
|
|
3
|
-
import InputBase from "./input-base.svelte";
|
|
4
|
-
import { t } from "../../../../i18n";
|
|
5
|
-
|
|
6
|
-
let {
|
|
7
|
-
label,
|
|
8
|
-
placeholder,
|
|
9
|
-
value = $bindable(""),
|
|
10
|
-
...restProps
|
|
11
|
-
}: InputLabelProps = $props();
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<InputBase
|
|
15
|
-
type="password"
|
|
16
|
-
label={label || $t("input.password.label")}
|
|
17
|
-
placeholder={placeholder || $t("input.password.placeholder")}
|
|
18
|
-
isLabel
|
|
19
|
-
isIcon
|
|
20
|
-
bind:value
|
|
21
|
-
{...restProps}
|
|
22
|
-
/>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { InputLabelProps } from "../data/InputLabel.svelte";
|
|
3
|
+
import InputBase from "./input-base.svelte";
|
|
4
|
+
import { t } from "../../../../i18n";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
label,
|
|
8
|
+
placeholder,
|
|
9
|
+
value = $bindable(""),
|
|
10
|
+
...restProps
|
|
11
|
+
}: InputLabelProps = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<InputBase
|
|
15
|
+
type="password"
|
|
16
|
+
label={label || $t("input.password.label")}
|
|
17
|
+
placeholder={placeholder || $t("input.password.placeholder")}
|
|
18
|
+
isLabel
|
|
19
|
+
isIcon
|
|
20
|
+
bind:value
|
|
21
|
+
{...restProps}
|
|
22
|
+
/>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { InputLabelProps } from "../data/InputLabel.svelte";
|
|
3
|
+
import InputBase from "./input-base.svelte";
|
|
4
|
+
import { t } from "../../../../i18n";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
label,
|
|
8
|
+
placeholder,
|
|
9
|
+
value = $bindable(""),
|
|
10
|
+
...restProps
|
|
11
|
+
}: InputLabelProps = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<InputBase
|
|
15
|
+
type="text"
|
|
16
|
+
label={label || $t("input.phone.label")}
|
|
17
|
+
placeholder={placeholder || $t("input.phone.placeholder")}
|
|
18
|
+
isLabel
|
|
19
|
+
isIcon
|
|
20
|
+
bind:value
|
|
21
|
+
{...restProps}
|
|
22
|
+
/>
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import type { InputLabelProps } from "../data/InputLabel.svelte";
|
|
3
|
-
import InputBase from "./input-base.svelte";
|
|
4
|
-
import { t } from "../../../../i18n";
|
|
5
|
-
|
|
6
|
-
let {
|
|
7
|
-
label,
|
|
8
|
-
placeholder,
|
|
9
|
-
value = $bindable(""),
|
|
10
|
-
...restProps
|
|
11
|
-
}: InputLabelProps = $props();
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<InputBase
|
|
15
|
-
label={label || $t("input.usename.label")}
|
|
16
|
-
placeholder={placeholder || $t("input.username.placeholder")}
|
|
17
|
-
isLabel
|
|
18
|
-
isIcon
|
|
19
|
-
bind:value
|
|
20
|
-
{...restProps}
|
|
21
|
-
/>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { InputLabelProps } from "../data/InputLabel.svelte";
|
|
3
|
+
import InputBase from "./input-base.svelte";
|
|
4
|
+
import { t } from "../../../../i18n";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
label,
|
|
8
|
+
placeholder,
|
|
9
|
+
value = $bindable(""),
|
|
10
|
+
...restProps
|
|
11
|
+
}: InputLabelProps = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<InputBase
|
|
15
|
+
label={label || $t("input.usename.label")}
|
|
16
|
+
placeholder={placeholder || $t("input.username.placeholder")}
|
|
17
|
+
isLabel
|
|
18
|
+
isIcon
|
|
19
|
+
bind:value
|
|
20
|
+
{...restProps}
|
|
21
|
+
/>
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import Separator from "../../ui/separator/separator.svelte";
|
|
3
|
-
import { t } from "../../../i18n";
|
|
4
|
-
|
|
5
|
-
type Props = {
|
|
6
|
-
variant?: "SEPARATOR";
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
let { variant }: Props = $props();
|
|
10
|
-
</script>
|
|
11
|
-
|
|
12
|
-
{#if variant === "SEPARATOR"}
|
|
13
|
-
<div class="relative my-1 text-center">
|
|
14
|
-
<div class="absolute inset-0 flex items-center">
|
|
15
|
-
<Separator />
|
|
16
|
-
</div>
|
|
17
|
-
<span
|
|
18
|
-
class="relative bg-white dark:bg-primary px-4 text-[10px] uppercase text-slate-400 tracking-wider"
|
|
19
|
-
>
|
|
20
|
-
{$t("label.or")}
|
|
21
|
-
</span>
|
|
22
|
-
</div>
|
|
23
|
-
{:else}
|
|
24
|
-
{$t("label.or")}
|
|
25
|
-
{/if}
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import Separator from "../../ui/separator/separator.svelte";
|
|
3
|
+
import { t } from "../../../i18n";
|
|
4
|
+
|
|
5
|
+
type Props = {
|
|
6
|
+
variant?: "SEPARATOR";
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
let { variant }: Props = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
{#if variant === "SEPARATOR"}
|
|
13
|
+
<div class="relative my-1 text-center">
|
|
14
|
+
<div class="absolute inset-0 flex items-center">
|
|
15
|
+
<Separator />
|
|
16
|
+
</div>
|
|
17
|
+
<span
|
|
18
|
+
class="relative bg-white dark:bg-primary px-4 text-[10px] uppercase text-slate-400 tracking-wider"
|
|
19
|
+
>
|
|
20
|
+
{$t("label.or")}
|
|
21
|
+
</span>
|
|
22
|
+
</div>
|
|
23
|
+
{:else}
|
|
24
|
+
{$t("label.or")}
|
|
25
|
+
{/if}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { t } from "../../../i18n";
|
|
3
|
-
import type { HTMLAnchorAttributes } from "svelte/elements";
|
|
4
|
-
|
|
5
|
-
type Props = HTMLAnchorAttributes;
|
|
6
|
-
|
|
7
|
-
let { ...restProps }: Props = $props();
|
|
8
|
-
</script>
|
|
9
|
-
|
|
10
|
-
<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
|
|
11
|
-
{$t("link.forget.password")}!
|
|
12
|
-
</a>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { t } from "../../../i18n";
|
|
3
|
+
import type { HTMLAnchorAttributes } from "svelte/elements";
|
|
4
|
+
|
|
5
|
+
type Props = HTMLAnchorAttributes;
|
|
6
|
+
|
|
7
|
+
let { ...restProps }: Props = $props();
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
|
|
11
|
+
{$t("link.forget.password")}!
|
|
12
|
+
</a>
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { t } from "../../../i18n";
|
|
3
|
-
import type { HTMLAnchorAttributes } from "svelte/elements";
|
|
4
|
-
|
|
5
|
-
type Props = HTMLAnchorAttributes;
|
|
6
|
-
|
|
7
|
-
let { ...restProps }: Props = $props();
|
|
8
|
-
</script>
|
|
9
|
-
|
|
10
|
-
<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
|
|
11
|
-
{$t("link.privacy-policy.label")}
|
|
12
|
-
</a>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { t } from "../../../i18n";
|
|
3
|
+
import type { HTMLAnchorAttributes } from "svelte/elements";
|
|
4
|
+
|
|
5
|
+
type Props = HTMLAnchorAttributes;
|
|
6
|
+
|
|
7
|
+
let { ...restProps }: Props = $props();
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
|
|
11
|
+
{$t("link.privacy-policy.label")}
|
|
12
|
+
</a>
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { t } from "../../../i18n";
|
|
3
|
-
import type { HTMLAnchorAttributes } from "svelte/elements";
|
|
4
|
-
|
|
5
|
-
type Props = HTMLAnchorAttributes;
|
|
6
|
-
|
|
7
|
-
let { ...restProps }: Props = $props();
|
|
8
|
-
</script>
|
|
9
|
-
|
|
10
|
-
<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
|
|
11
|
-
{$t("link.terms-of-service.label")}
|
|
12
|
-
</a>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { t } from "../../../i18n";
|
|
3
|
+
import type { HTMLAnchorAttributes } from "svelte/elements";
|
|
4
|
+
|
|
5
|
+
type Props = HTMLAnchorAttributes;
|
|
6
|
+
|
|
7
|
+
let { ...restProps }: Props = $props();
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
|
|
11
|
+
{$t("link.terms-of-service.label")}
|
|
12
|
+
</a>
|
|
@@ -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
|
-
NavMenuAndSubmenuSidebar,
|
|
9
|
-
NavMenuItem,
|
|
10
|
-
NavMenuSidebar,
|
|
11
|
-
} from "../data/nav-menu-sidebar";
|
|
12
|
-
|
|
13
|
-
let {
|
|
14
|
-
items,
|
|
15
|
-
}: {
|
|
16
|
-
items: NavMenuItem[];
|
|
17
|
-
} = $props();
|
|
18
|
-
|
|
19
|
-
// Chave interna para itens sem group; nunca colide com um nome real
|
|
20
|
-
// porque não é uma string acessível a quem define os itens.
|
|
21
|
-
const UNGROUPED = Symbol("ungrouped");
|
|
22
|
-
|
|
23
|
-
function hasSubmenus(
|
|
24
|
-
item: NavMenuSidebar | NavMenuAndSubmenuSidebar,
|
|
25
|
-
): item is NavMenuAndSubmenuSidebar {
|
|
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
|
+
NavMenuAndSubmenuSidebar,
|
|
9
|
+
NavMenuItem,
|
|
10
|
+
NavMenuSidebar,
|
|
11
|
+
} from "../data/nav-menu-sidebar";
|
|
12
|
+
|
|
13
|
+
let {
|
|
14
|
+
items,
|
|
15
|
+
}: {
|
|
16
|
+
items: NavMenuItem[];
|
|
17
|
+
} = $props();
|
|
18
|
+
|
|
19
|
+
// Chave interna para itens sem group; nunca colide com um nome real
|
|
20
|
+
// porque não é uma string acessível a quem define os itens.
|
|
21
|
+
const UNGROUPED = Symbol("ungrouped");
|
|
22
|
+
|
|
23
|
+
function hasSubmenus(
|
|
24
|
+
item: NavMenuSidebar | NavMenuAndSubmenuSidebar,
|
|
25
|
+
): item is NavMenuAndSubmenuSidebar {
|
|
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 { NavMenuSidebar } from "../data/nav-menu-sidebar";
|
|
6
|
-
import { HugeiconsIcon } from "@hugeicons/svelte";
|
|
7
|
-
|
|
8
|
-
let {
|
|
9
|
-
items,
|
|
10
|
-
...restProps
|
|
11
|
-
}: { items?: NavMenuSidebar[] } & 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 { NavMenuSidebar } from "../data/nav-menu-sidebar";
|
|
6
|
+
import { HugeiconsIcon } from "@hugeicons/svelte";
|
|
7
|
+
|
|
8
|
+
let {
|
|
9
|
+
items,
|
|
10
|
+
...restProps
|
|
11
|
+
}: { items?: NavMenuSidebar[] } & 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>
|