negodesign 0.0.59 → 0.0.60
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/ui/01/Grid01.svelte +28 -28
- package/dist/components/core/grid/ui/02/Grid02.svelte +28 -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 +21 -21
- 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/styles/globals.css +149 -149
- package/package.json +113 -113
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import type { NavMenuLogoProps } from "../../../../../types";
|
|
3
|
-
|
|
4
|
-
let { img, url, label, className, onclick }: NavMenuLogoProps = $props();
|
|
5
|
-
</script>
|
|
6
|
-
|
|
7
|
-
<a href={url} {onclick}>
|
|
8
|
-
{#if img}
|
|
9
|
-
<img src={img} alt="logo of site" class={`max-h-50 ${className}`} />
|
|
10
|
-
{:else if label}
|
|
11
|
-
<span class={className}>{label}</span>
|
|
12
|
-
{/if}
|
|
13
|
-
</a>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { NavMenuLogoProps } from "../../../../../types";
|
|
3
|
+
|
|
4
|
+
let { img, url, label, className, onclick }: NavMenuLogoProps = $props();
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<a href={url} {onclick}>
|
|
8
|
+
{#if img}
|
|
9
|
+
<img src={img} alt="logo of site" class={`max-h-50 ${className}`} />
|
|
10
|
+
{:else if label}
|
|
11
|
+
<span class={className}>{label}</span>
|
|
12
|
+
{/if}
|
|
13
|
+
</a>
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
|
|
3
|
-
import type { NavigationMenuItemProps } from "../../../data/types";
|
|
4
|
-
import { navigationMenuTriggerStyle } from "../../../../../ui/navigation-menu/navigation-menu-trigger.svelte";
|
|
5
|
-
|
|
6
|
-
let { label, href }: NavigationMenuItemProps = $props();
|
|
7
|
-
</script>
|
|
8
|
-
|
|
9
|
-
<NavigationMenu.Item>
|
|
10
|
-
<NavigationMenu.Link>
|
|
11
|
-
{#snippet child()}
|
|
12
|
-
<a {href} class={navigationMenuTriggerStyle()}>{label}</a>
|
|
13
|
-
{/snippet}
|
|
14
|
-
</NavigationMenu.Link>
|
|
15
|
-
</NavigationMenu.Item>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
|
|
3
|
+
import type { NavigationMenuItemProps } from "../../../data/types";
|
|
4
|
+
import { navigationMenuTriggerStyle } from "../../../../../ui/navigation-menu/navigation-menu-trigger.svelte";
|
|
5
|
+
|
|
6
|
+
let { label, href }: NavigationMenuItemProps = $props();
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<NavigationMenu.Item>
|
|
10
|
+
<NavigationMenu.Link>
|
|
11
|
+
{#snippet child()}
|
|
12
|
+
<a {href} class={navigationMenuTriggerStyle()}>{label}</a>
|
|
13
|
+
{/snippet}
|
|
14
|
+
</NavigationMenu.Link>
|
|
15
|
+
</NavigationMenu.Item>
|
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
|
|
3
|
-
import type { NavigationMenuItemCardProps } from "../../../data/types";
|
|
4
|
-
import MenuListItem from "../MenuListItem.svelte";
|
|
5
|
-
|
|
6
|
-
let { label, header, cards: items }: NavigationMenuItemCardProps = $props();
|
|
7
|
-
</script>
|
|
8
|
-
|
|
9
|
-
{#snippet headerSnippet(label: string, description: string)}
|
|
10
|
-
<div class="mt-4 mb-2 text-lg font-medium {header?.labelClass}">{label}</div>
|
|
11
|
-
<p
|
|
12
|
-
class="text-sm leading-tight {header?.descriptionClass ||
|
|
13
|
-
'text-muted-foreground'}"
|
|
14
|
-
>
|
|
15
|
-
{description}
|
|
16
|
-
</p>
|
|
17
|
-
{/snippet}
|
|
18
|
-
|
|
19
|
-
<NavigationMenu.Item>
|
|
20
|
-
<NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
|
|
21
|
-
<NavigationMenu.Content>
|
|
22
|
-
<ul class="grid gap-2 p-2 md:w-100 lg:w-125 lg:grid-cols-[.75fr_1fr]">
|
|
23
|
-
{#if header}
|
|
24
|
-
<li
|
|
25
|
-
class="row-span-3 relative"
|
|
26
|
-
style={header.imgUrl
|
|
27
|
-
? `background-image: url(${header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;`
|
|
28
|
-
: ``}
|
|
29
|
-
>
|
|
30
|
-
<NavigationMenu.Link
|
|
31
|
-
class={`flex h-full w-full flex-col justify-end p-4 md:p-6 ${
|
|
32
|
-
header.imgUrl
|
|
33
|
-
? `no-underline outline-hidden select-none`
|
|
34
|
-
: `bg-linear-to-b from-muted/50 to-muted rounded-md focus:shadow-md`
|
|
35
|
-
}`}
|
|
36
|
-
>
|
|
37
|
-
{#snippet child({ props })}
|
|
38
|
-
{#if header.imgUrl}
|
|
39
|
-
<a
|
|
40
|
-
{...props}
|
|
41
|
-
href={header.href ?? "#"}
|
|
42
|
-
class="bg-transparent absolute left-2 bottom-2"
|
|
43
|
-
>
|
|
44
|
-
{@render headerSnippet(header.label, header.description)}
|
|
45
|
-
</a>
|
|
46
|
-
{:else}
|
|
47
|
-
<a {...props} href={header.href ?? "#"}>
|
|
48
|
-
{@render headerSnippet(header.label, header.description)}
|
|
49
|
-
</a>
|
|
50
|
-
{/if}
|
|
51
|
-
{/snippet}
|
|
52
|
-
</NavigationMenu.Link>
|
|
53
|
-
</li>
|
|
54
|
-
{/if}
|
|
55
|
-
{#if items && items.length > 0}
|
|
56
|
-
{#each items as item, i (i)}
|
|
57
|
-
<MenuListItem {...item} />
|
|
58
|
-
{/each}
|
|
59
|
-
{/if}
|
|
60
|
-
</ul>
|
|
61
|
-
</NavigationMenu.Content>
|
|
62
|
-
</NavigationMenu.Item>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
|
|
3
|
+
import type { NavigationMenuItemCardProps } from "../../../data/types";
|
|
4
|
+
import MenuListItem from "../MenuListItem.svelte";
|
|
5
|
+
|
|
6
|
+
let { label, header, cards: items }: NavigationMenuItemCardProps = $props();
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
{#snippet headerSnippet(label: string, description: string)}
|
|
10
|
+
<div class="mt-4 mb-2 text-lg font-medium {header?.labelClass}">{label}</div>
|
|
11
|
+
<p
|
|
12
|
+
class="text-sm leading-tight {header?.descriptionClass ||
|
|
13
|
+
'text-muted-foreground'}"
|
|
14
|
+
>
|
|
15
|
+
{description}
|
|
16
|
+
</p>
|
|
17
|
+
{/snippet}
|
|
18
|
+
|
|
19
|
+
<NavigationMenu.Item>
|
|
20
|
+
<NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
|
|
21
|
+
<NavigationMenu.Content>
|
|
22
|
+
<ul class="grid gap-2 p-2 md:w-100 lg:w-125 lg:grid-cols-[.75fr_1fr]">
|
|
23
|
+
{#if header}
|
|
24
|
+
<li
|
|
25
|
+
class="row-span-3 relative"
|
|
26
|
+
style={header.imgUrl
|
|
27
|
+
? `background-image: url(${header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;`
|
|
28
|
+
: ``}
|
|
29
|
+
>
|
|
30
|
+
<NavigationMenu.Link
|
|
31
|
+
class={`flex h-full w-full flex-col justify-end p-4 md:p-6 ${
|
|
32
|
+
header.imgUrl
|
|
33
|
+
? `no-underline outline-hidden select-none`
|
|
34
|
+
: `bg-linear-to-b from-muted/50 to-muted rounded-md focus:shadow-md`
|
|
35
|
+
}`}
|
|
36
|
+
>
|
|
37
|
+
{#snippet child({ props })}
|
|
38
|
+
{#if header.imgUrl}
|
|
39
|
+
<a
|
|
40
|
+
{...props}
|
|
41
|
+
href={header.href ?? "#"}
|
|
42
|
+
class="bg-transparent absolute left-2 bottom-2"
|
|
43
|
+
>
|
|
44
|
+
{@render headerSnippet(header.label, header.description)}
|
|
45
|
+
</a>
|
|
46
|
+
{:else}
|
|
47
|
+
<a {...props} href={header.href ?? "#"}>
|
|
48
|
+
{@render headerSnippet(header.label, header.description)}
|
|
49
|
+
</a>
|
|
50
|
+
{/if}
|
|
51
|
+
{/snippet}
|
|
52
|
+
</NavigationMenu.Link>
|
|
53
|
+
</li>
|
|
54
|
+
{/if}
|
|
55
|
+
{#if items && items.length > 0}
|
|
56
|
+
{#each items as item, i (i)}
|
|
57
|
+
<MenuListItem {...item} />
|
|
58
|
+
{/each}
|
|
59
|
+
{/if}
|
|
60
|
+
</ul>
|
|
61
|
+
</NavigationMenu.Content>
|
|
62
|
+
</NavigationMenu.Item>
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
|
|
3
|
-
import type { NavigationMenuItemGridProps } from "../../../data/types";
|
|
4
|
-
import MenuListItem from "../MenuListItem.svelte";
|
|
5
|
-
|
|
6
|
-
let { label, grids: items }: NavigationMenuItemGridProps = $props();
|
|
7
|
-
|
|
8
|
-
const cols = (): string => {
|
|
9
|
-
const len = items?.length ?? 0;
|
|
10
|
-
if (len > 10) return "md:grid-cols-3 lg:grid-cols-4";
|
|
11
|
-
if (len > 5) return "md:grid-cols-3";
|
|
12
|
-
if (len % 3 == 0) return "md:grid-cols-3";
|
|
13
|
-
if (len % 2 == 0) return "md:grid-cols-2";
|
|
14
|
-
return "grid-cols-1";
|
|
15
|
-
};
|
|
16
|
-
</script>
|
|
17
|
-
|
|
18
|
-
<NavigationMenu.Item>
|
|
19
|
-
<NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
|
|
20
|
-
{#if items}
|
|
21
|
-
{@const gridCols = cols()}
|
|
22
|
-
<NavigationMenu.Content>
|
|
23
|
-
<ul
|
|
24
|
-
class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 ${gridCols} lg:min-w-150`}
|
|
25
|
-
>
|
|
26
|
-
{#each items as item, i (i)}
|
|
27
|
-
<MenuListItem {...item} />
|
|
28
|
-
{/each}
|
|
29
|
-
</ul>
|
|
30
|
-
</NavigationMenu.Content>
|
|
31
|
-
{/if}
|
|
32
|
-
</NavigationMenu.Item>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
|
|
3
|
+
import type { NavigationMenuItemGridProps } from "../../../data/types";
|
|
4
|
+
import MenuListItem from "../MenuListItem.svelte";
|
|
5
|
+
|
|
6
|
+
let { label, grids: items }: NavigationMenuItemGridProps = $props();
|
|
7
|
+
|
|
8
|
+
const cols = (): string => {
|
|
9
|
+
const len = items?.length ?? 0;
|
|
10
|
+
if (len > 10) return "md:grid-cols-3 lg:grid-cols-4";
|
|
11
|
+
if (len > 5) return "md:grid-cols-3";
|
|
12
|
+
if (len % 3 == 0) return "md:grid-cols-3";
|
|
13
|
+
if (len % 2 == 0) return "md:grid-cols-2";
|
|
14
|
+
return "grid-cols-1";
|
|
15
|
+
};
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<NavigationMenu.Item>
|
|
19
|
+
<NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
|
|
20
|
+
{#if items}
|
|
21
|
+
{@const gridCols = cols()}
|
|
22
|
+
<NavigationMenu.Content>
|
|
23
|
+
<ul
|
|
24
|
+
class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 ${gridCols} lg:min-w-150`}
|
|
25
|
+
>
|
|
26
|
+
{#each items as item, i (i)}
|
|
27
|
+
<MenuListItem {...item} />
|
|
28
|
+
{/each}
|
|
29
|
+
</ul>
|
|
30
|
+
</NavigationMenu.Content>
|
|
31
|
+
{/if}
|
|
32
|
+
</NavigationMenu.Item>
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
|
|
3
|
-
import type { NavigationMenuItemListProps } from "../../../data/types";
|
|
4
|
-
|
|
5
|
-
let { label, list }: NavigationMenuItemListProps = $props();
|
|
6
|
-
</script>
|
|
7
|
-
|
|
8
|
-
<NavigationMenu.Item class="hidden md:block relative">
|
|
9
|
-
<NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
|
|
10
|
-
<NavigationMenu.Content>
|
|
11
|
-
<ul class="grid w-75 gap-4 p-2">
|
|
12
|
-
{#each list as item, i (i)}
|
|
13
|
-
<li>
|
|
14
|
-
<NavigationMenu.Link href={item.href}>
|
|
15
|
-
<div class="font-medium">{item.title ?? ""}</div>
|
|
16
|
-
<div class="text-muted-foreground">
|
|
17
|
-
{item.content}
|
|
18
|
-
</div>
|
|
19
|
-
</NavigationMenu.Link>
|
|
20
|
-
</li>
|
|
21
|
-
{/each}
|
|
22
|
-
</ul>
|
|
23
|
-
</NavigationMenu.Content>
|
|
24
|
-
</NavigationMenu.Item>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
|
|
3
|
+
import type { NavigationMenuItemListProps } from "../../../data/types";
|
|
4
|
+
|
|
5
|
+
let { label, list }: NavigationMenuItemListProps = $props();
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<NavigationMenu.Item class="hidden md:block relative">
|
|
9
|
+
<NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
|
|
10
|
+
<NavigationMenu.Content>
|
|
11
|
+
<ul class="grid w-75 gap-4 p-2">
|
|
12
|
+
{#each list as item, i (i)}
|
|
13
|
+
<li>
|
|
14
|
+
<NavigationMenu.Link href={item.href}>
|
|
15
|
+
<div class="font-medium">{item.title ?? ""}</div>
|
|
16
|
+
<div class="text-muted-foreground">
|
|
17
|
+
{item.content}
|
|
18
|
+
</div>
|
|
19
|
+
</NavigationMenu.Link>
|
|
20
|
+
</li>
|
|
21
|
+
{/each}
|
|
22
|
+
</ul>
|
|
23
|
+
</NavigationMenu.Content>
|
|
24
|
+
</NavigationMenu.Item>
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
|
|
3
|
-
import type { NavigationMenuItemsProps } from "../../../data/types";
|
|
4
|
-
|
|
5
|
-
let { label, items }: NavigationMenuItemsProps = $props();
|
|
6
|
-
</script>
|
|
7
|
-
|
|
8
|
-
<NavigationMenu.Item class="hidden md:block relative">
|
|
9
|
-
<NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
|
|
10
|
-
<NavigationMenu.Content>
|
|
11
|
-
<ul class="grid min-w-50 gap-4 p-1 md:p-2">
|
|
12
|
-
{#each items as item, i (i)}
|
|
13
|
-
<li>
|
|
14
|
-
<NavigationMenu.Link href={item.href} class="py-1">
|
|
15
|
-
{item.title}
|
|
16
|
-
</NavigationMenu.Link>
|
|
17
|
-
</li>
|
|
18
|
-
{/each}
|
|
19
|
-
</ul>
|
|
20
|
-
</NavigationMenu.Content>
|
|
21
|
-
</NavigationMenu.Item>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
|
|
3
|
+
import type { NavigationMenuItemsProps } from "../../../data/types";
|
|
4
|
+
|
|
5
|
+
let { label, items }: NavigationMenuItemsProps = $props();
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<NavigationMenu.Item class="hidden md:block relative">
|
|
9
|
+
<NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
|
|
10
|
+
<NavigationMenu.Content>
|
|
11
|
+
<ul class="grid min-w-50 gap-4 p-1 md:p-2">
|
|
12
|
+
{#each items as item, i (i)}
|
|
13
|
+
<li>
|
|
14
|
+
<NavigationMenu.Link href={item.href} class="py-1">
|
|
15
|
+
{item.title}
|
|
16
|
+
</NavigationMenu.Link>
|
|
17
|
+
</li>
|
|
18
|
+
{/each}
|
|
19
|
+
</ul>
|
|
20
|
+
</NavigationMenu.Content>
|
|
21
|
+
</NavigationMenu.Item>
|
|
@@ -1,57 +1,57 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import * as Carousel from "../../ui/carousel/index.js";
|
|
3
|
-
import { useDevice } from "../../../hooks/responsive.svelte";
|
|
4
|
-
import type { CarouselSlotProps } from "./type";
|
|
5
|
-
|
|
6
|
-
const {
|
|
7
|
-
positionButtonPreviousAndNext = "center",
|
|
8
|
-
isButtonPreviousAndNext = true,
|
|
9
|
-
buttonPreviousAndNextClass = "",
|
|
10
|
-
isBorderBottom = false,
|
|
11
|
-
containerClass = "w-full",
|
|
12
|
-
plugins = [],
|
|
13
|
-
children,
|
|
14
|
-
}: CarouselSlotProps = $props();
|
|
15
|
-
|
|
16
|
-
const styleTopCenter = "bg-blue-700! text-white! cursor-pointer!";
|
|
17
|
-
const styleCenter =
|
|
18
|
-
"absolute top-1/2 -translate-y-1/2 mt-0.5 md:mr-0 z-50 bg-blue-700! text-white! cursor-pointer!";
|
|
19
|
-
|
|
20
|
-
const responsive = useDevice();
|
|
21
|
-
</script>
|
|
22
|
-
|
|
23
|
-
<div
|
|
24
|
-
class={`relative py-3 px-2 ${isBorderBottom ? "border-b" : ""} ${containerClass}`}
|
|
25
|
-
>
|
|
26
|
-
<Carousel.Root {plugins}>
|
|
27
|
-
<Carousel.Content
|
|
28
|
-
class={positionButtonPreviousAndNext == "top_right" ? "" : "ml-0"}
|
|
29
|
-
>
|
|
30
|
-
{@render children?.()}
|
|
31
|
-
</Carousel.Content>
|
|
32
|
-
{#if positionButtonPreviousAndNext == "center" && !responsive.isMobile}
|
|
33
|
-
{#if isButtonPreviousAndNext}
|
|
34
|
-
<Carousel.Previous
|
|
35
|
-
class={`-left-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
|
|
36
|
-
/>
|
|
37
|
-
<Carousel.Next
|
|
38
|
-
class={`-right-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
|
|
39
|
-
/>
|
|
40
|
-
{/if}
|
|
41
|
-
{/if}
|
|
42
|
-
{#if positionButtonPreviousAndNext == "top_right" || responsive.isMobile}
|
|
43
|
-
{#if isButtonPreviousAndNext}
|
|
44
|
-
<div
|
|
45
|
-
class="absolute -top-5 md:-top-10 right-8 md:right-10 lg:right-12 z-20"
|
|
46
|
-
>
|
|
47
|
-
<Carousel.Previous
|
|
48
|
-
class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
|
|
49
|
-
/>
|
|
50
|
-
<Carousel.Next
|
|
51
|
-
class={`start-0 ${styleTopCenter} ${buttonPreviousAndNextClass}`}
|
|
52
|
-
/>
|
|
53
|
-
</div>
|
|
54
|
-
{/if}
|
|
55
|
-
{/if}
|
|
56
|
-
</Carousel.Root>
|
|
57
|
-
</div>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import * as Carousel from "../../ui/carousel/index.js";
|
|
3
|
+
import { useDevice } from "../../../hooks/responsive.svelte";
|
|
4
|
+
import type { CarouselSlotProps } from "./type";
|
|
5
|
+
|
|
6
|
+
const {
|
|
7
|
+
positionButtonPreviousAndNext = "center",
|
|
8
|
+
isButtonPreviousAndNext = true,
|
|
9
|
+
buttonPreviousAndNextClass = "",
|
|
10
|
+
isBorderBottom = false,
|
|
11
|
+
containerClass = "w-full",
|
|
12
|
+
plugins = [],
|
|
13
|
+
children,
|
|
14
|
+
}: CarouselSlotProps = $props();
|
|
15
|
+
|
|
16
|
+
const styleTopCenter = "bg-blue-700! text-white! cursor-pointer!";
|
|
17
|
+
const styleCenter =
|
|
18
|
+
"absolute top-1/2 -translate-y-1/2 mt-0.5 md:mr-0 z-50 bg-blue-700! text-white! cursor-pointer!";
|
|
19
|
+
|
|
20
|
+
const responsive = useDevice();
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<div
|
|
24
|
+
class={`relative py-3 px-2 ${isBorderBottom ? "border-b" : ""} ${containerClass}`}
|
|
25
|
+
>
|
|
26
|
+
<Carousel.Root {plugins}>
|
|
27
|
+
<Carousel.Content
|
|
28
|
+
class={positionButtonPreviousAndNext == "top_right" ? "" : "ml-0"}
|
|
29
|
+
>
|
|
30
|
+
{@render children?.()}
|
|
31
|
+
</Carousel.Content>
|
|
32
|
+
{#if positionButtonPreviousAndNext == "center" && !responsive.isMobile}
|
|
33
|
+
{#if isButtonPreviousAndNext}
|
|
34
|
+
<Carousel.Previous
|
|
35
|
+
class={`-left-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
|
|
36
|
+
/>
|
|
37
|
+
<Carousel.Next
|
|
38
|
+
class={`-right-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
|
|
39
|
+
/>
|
|
40
|
+
{/if}
|
|
41
|
+
{/if}
|
|
42
|
+
{#if positionButtonPreviousAndNext == "top_right" || responsive.isMobile}
|
|
43
|
+
{#if isButtonPreviousAndNext}
|
|
44
|
+
<div
|
|
45
|
+
class="absolute -top-5 md:-top-10 right-8 md:right-10 lg:right-12 z-20"
|
|
46
|
+
>
|
|
47
|
+
<Carousel.Previous
|
|
48
|
+
class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
|
|
49
|
+
/>
|
|
50
|
+
<Carousel.Next
|
|
51
|
+
class={`start-0 ${styleTopCenter} ${buttonPreviousAndNextClass}`}
|
|
52
|
+
/>
|
|
53
|
+
</div>
|
|
54
|
+
{/if}
|
|
55
|
+
{/if}
|
|
56
|
+
</Carousel.Root>
|
|
57
|
+
</div>
|