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.
Files changed (136) hide show
  1. package/dist/components/core/banner/AdCardBanner.svelte +74 -74
  2. package/dist/components/core/banner/CtaCardBanner.svelte +118 -118
  3. package/dist/components/core/breadcrumb/breadcrumb-list.svelte +31 -31
  4. package/dist/components/core/button/ButtonBack.svelte +18 -18
  5. package/dist/components/core/button/ButtonLogin.svelte +15 -15
  6. package/dist/components/core/button/ButtonLoginWith.svelte +57 -57
  7. package/dist/components/core/button/ButtonSend.svelte +15 -15
  8. package/dist/components/core/card/highlight/01/CardHighlight01.svelte +103 -103
  9. package/dist/components/core/card/highlight/02/CardHighlight02.svelte +99 -99
  10. package/dist/components/core/card/highlight/CardHighlight.svelte +22 -22
  11. package/dist/components/core/card/media/01/CardMedia01.svelte +133 -133
  12. package/dist/components/core/card/media/02/CardMedia02.svelte +127 -127
  13. package/dist/components/core/card/media/CardMedia.svelte +18 -18
  14. package/dist/components/core/card/product/01/CardProduct01.svelte +136 -136
  15. package/dist/components/core/card/product/02/CardProduct02.svelte +124 -124
  16. package/dist/components/core/card/product/CardProduct.svelte +22 -22
  17. package/dist/components/core/card/profile/01/CardProfile01.svelte +134 -134
  18. package/dist/components/core/card/profile/02/CardProfile02.svelte +132 -132
  19. package/dist/components/core/card/profile/CardProfile.svelte +18 -18
  20. package/dist/components/core/card/promotion/CardPromotion.svelte +139 -139
  21. package/dist/components/core/card/promotion/CardPromotionPrice.svelte +32 -32
  22. package/dist/components/core/card/shared/CardButton.svelte +42 -42
  23. package/dist/components/core/card/shared/CardCart.svelte +36 -36
  24. package/dist/components/core/card/shared/CardDescription.svelte +41 -41
  25. package/dist/components/core/card/shared/CardFavorite.svelte +33 -33
  26. package/dist/components/core/card/shared/CardLogo.svelte +19 -19
  27. package/dist/components/core/card/shared/CardPhoneOrWhatsapp.svelte +45 -45
  28. package/dist/components/core/card/shared/CardStarRating.svelte +24 -24
  29. package/dist/components/core/card/shared/CardTags.svelte +95 -95
  30. package/dist/components/core/card/shared/CardThumbnailVideo.svelte +232 -232
  31. package/dist/components/core/card/shared/CardTitlePrice.svelte +24 -24
  32. package/dist/components/core/card/shared/TruncatableText.svelte +49 -49
  33. package/dist/components/core/carousel/badge/ui/CarouselBadge.svelte +109 -109
  34. package/dist/components/core/carousel/grid/shared/ui/CarouselGridSlot.svelte +38 -38
  35. package/dist/components/core/carousel/hero/ui/CarouselHero.svelte +163 -163
  36. package/dist/components/core/carousel/shared/ui/CarouselHeader.svelte +60 -60
  37. package/dist/components/core/datatable/ui/DataTableActions.svelte +28 -28
  38. package/dist/components/core/datatable/ui/DataTableCheckbox.svelte +22 -22
  39. package/dist/components/core/datatable/ui/DataTableContent.svelte +59 -59
  40. package/dist/components/core/datatable/ui/DataTableCore.svelte +151 -151
  41. package/dist/components/core/datatable/ui/DataTableDragHandle.svelte +8 -8
  42. package/dist/components/core/datatable/ui/DataTableListFilter.svelte +59 -59
  43. package/dist/components/core/datatable/ui/DataTableListPagination.svelte +35 -35
  44. package/dist/components/core/footer/ui/Footer.svelte +18 -18
  45. package/dist/components/core/form/ui/input-base.svelte +81 -81
  46. package/dist/components/core/form/ui/input-email-or-phone.svelte +23 -23
  47. package/dist/components/core/form/ui/input-email.svelte +23 -23
  48. package/dist/components/core/form/ui/input-password-confirm.svelte +23 -23
  49. package/dist/components/core/form/ui/input-password.svelte +23 -23
  50. package/dist/components/core/form/ui/input-phone.svelte +33 -33
  51. package/dist/components/core/form/ui/input-username.svelte +22 -22
  52. package/dist/components/core/grid/ui/01/Grid01.svelte +28 -28
  53. package/dist/components/core/grid/ui/02/Grid02.svelte +28 -28
  54. package/dist/components/core/grid/ui/PanelGrid.svelte +27 -27
  55. package/dist/components/core/grid/ui/SimpleGrid.svelte +35 -35
  56. package/dist/components/core/grid/ui/shared/DescriptionGrid.svelte +23 -23
  57. package/dist/components/core/grid/ui/shared/IconRenderGrid.svelte +21 -21
  58. package/dist/components/core/grid/ui/shared/TitleGrid.svelte +19 -19
  59. package/dist/components/core/hero/SimpleHero.svelte +65 -65
  60. package/dist/components/core/label/LabelOr.svelte +25 -25
  61. package/dist/components/core/link/link-forget-password.svelte +12 -12
  62. package/dist/components/core/link/link-privacy-polity.svelte +12 -12
  63. package/dist/components/core/link/link-terms-of-service.svelte +12 -12
  64. package/dist/components/core/nav/ui/ComplexMenu.svelte +36 -36
  65. package/dist/components/core/nav/ui/Menu.svelte +70 -70
  66. package/dist/components/core/nav/ui/SimpleMenu.svelte +14 -14
  67. package/dist/components/core/nav/ui/mobile/MenuMobile.svelte +54 -54
  68. package/dist/components/core/nav/ui/shared/MenuButton.svelte +51 -51
  69. package/dist/components/core/nav/ui/shared/MenuLinks.svelte +40 -40
  70. package/dist/components/core/nav/ui/shared/MenuListItem.svelte +48 -48
  71. package/dist/components/core/nav/ui/shared/MenuLogo.svelte +13 -13
  72. package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItem.svelte +15 -15
  73. package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemCard.svelte +62 -62
  74. package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemGrid.svelte +32 -32
  75. package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemList.svelte +24 -24
  76. package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItems.svelte +21 -21
  77. package/dist/components/core/panel/CarouselSlot.svelte +57 -57
  78. package/dist/components/core/panel/LeftHero.svelte +117 -117
  79. package/dist/components/core/search/SearchInput.svelte +32 -32
  80. package/dist/components/core/search/shared/SearchInputCore.svelte +66 -66
  81. package/dist/components/core/sidebar/MenuBarSidebar.svelte +70 -70
  82. package/dist/components/core/sidebar/ui/navbar/NavMenuBarSidebar.svelte +97 -97
  83. package/dist/components/core/sidebar/ui/navbar/NavMenuBottomSidebar.svelte +33 -33
  84. package/dist/components/core/sidebar/ui/navbar/NavMenuTopBarSidebar.svelte +103 -103
  85. package/dist/components/core/tabs/ui/tab-underline.svelte +43 -43
  86. package/dist/components/pages/admin/01/ui/AdminContent.svelte +14 -14
  87. package/dist/components/pages/admin/01/ui/AdminPanel.svelte +46 -46
  88. package/dist/components/pages/security/login/01/ui/FormRegister.svelte +28 -28
  89. package/dist/components/pages/security/login/01/ui/LoginCard.svelte +107 -107
  90. package/dist/components/pages/security/login/PageLogin.svelte +22 -22
  91. package/dist/components/ui/badge/badge.svelte +49 -49
  92. package/dist/components/ui/button/button.svelte +82 -82
  93. package/dist/components/ui/chart/chart-container.svelte +80 -80
  94. package/dist/components/ui/chart/chart-style.svelte +37 -37
  95. package/dist/components/ui/chart/chart-tooltip.svelte +184 -184
  96. package/dist/components/ui/checkbox/checkbox.svelte +40 -40
  97. package/dist/components/ui/data-table/flex-render.svelte +40 -40
  98. package/dist/components/ui/drawer/drawer-close.svelte +7 -7
  99. package/dist/components/ui/drawer/drawer-content.svelte +33 -33
  100. package/dist/components/ui/drawer/drawer-description.svelte +17 -17
  101. package/dist/components/ui/drawer/drawer-footer.svelte +20 -20
  102. package/dist/components/ui/drawer/drawer-header.svelte +20 -20
  103. package/dist/components/ui/drawer/drawer-nested.svelte +12 -12
  104. package/dist/components/ui/drawer/drawer-overlay.svelte +17 -17
  105. package/dist/components/ui/drawer/drawer-portal.svelte +7 -7
  106. package/dist/components/ui/drawer/drawer-title.svelte +17 -17
  107. package/dist/components/ui/drawer/drawer-trigger.svelte +7 -7
  108. package/dist/components/ui/drawer/drawer.svelte +12 -12
  109. package/dist/components/ui/select/select-content.svelte +45 -45
  110. package/dist/components/ui/select/select-group-heading.svelte +21 -21
  111. package/dist/components/ui/select/select-group.svelte +17 -17
  112. package/dist/components/ui/select/select-item.svelte +41 -41
  113. package/dist/components/ui/select/select-label.svelte +20 -20
  114. package/dist/components/ui/select/select-portal.svelte +7 -7
  115. package/dist/components/ui/select/select-scroll-down-button.svelte +21 -21
  116. package/dist/components/ui/select/select-scroll-up-button.svelte +21 -21
  117. package/dist/components/ui/select/select-separator.svelte +18 -18
  118. package/dist/components/ui/select/select-trigger.svelte +30 -30
  119. package/dist/components/ui/select/select.svelte +11 -11
  120. package/dist/components/ui/sidebar/sidebar-menu-sub-button.svelte +39 -39
  121. package/dist/components/ui/star-rating/star-rating-star.svelte +41 -41
  122. package/dist/components/ui/star-rating/star-rating.svelte +20 -20
  123. package/dist/components/ui/table/table-body.svelte +15 -15
  124. package/dist/components/ui/table/table-caption.svelte +20 -20
  125. package/dist/components/ui/table/table-cell.svelte +15 -15
  126. package/dist/components/ui/table/table-footer.svelte +20 -20
  127. package/dist/components/ui/table/table-head.svelte +15 -15
  128. package/dist/components/ui/table/table-header.svelte +20 -20
  129. package/dist/components/ui/table/table-row.svelte +15 -15
  130. package/dist/components/ui/table/table.svelte +17 -17
  131. package/dist/components/ui/tabs/tabs-content.svelte +17 -17
  132. package/dist/components/ui/tabs/tabs-list.svelte +40 -40
  133. package/dist/components/ui/tabs/tabs-trigger.svelte +23 -23
  134. package/dist/components/ui/tabs/tabs.svelte +19 -19
  135. package/dist/styles/globals.css +149 -149
  136. 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>