negodesign 0.0.37 → 0.0.39

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 (13) hide show
  1. package/dist/components/core/card/media/01/CardMedia01.svelte +9 -3
  2. package/dist/components/core/card/media/02/CardMedia02.svelte +9 -3
  3. package/dist/components/core/card/shared/CardDescription.svelte +1 -1
  4. package/dist/components/core/card/shared/CardThumbnailVideo.svelte +1 -1
  5. package/dist/components/core/card/types.d.ts +4 -0
  6. package/dist/components/core/carousel/grid/media/types.d.ts +4 -0
  7. package/dist/components/core/carousel/grid/media/ui/CarouselGridMedia.svelte +16 -4
  8. package/dist/components/core/carousel/promotion/types.d.ts +5 -0
  9. package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte +11 -1
  10. package/dist/components/core/panel/CarouselSlot.svelte +10 -5
  11. package/dist/components/pages/product-details/shared/ProductDetailPrice.svelte +1 -1
  12. package/dist/globals.css +23 -14
  13. package/package.json +1 -1
package/dist/components/core/card/media/01/CardMedia01.svelte CHANGED
@@ -23,7 +23,6 @@
23
23
  content,
24
24
  imageUrl,
25
25
  videoUrl,
26
- //videoAction,
27
26
  startNumber,
28
27
  startMax = 5,
29
28
  isImageButtonMaximized = false,
@@ -33,6 +32,8 @@
33
32
  isLoading = false,
34
33
  buttonProfileClass,
35
34
  buttonDetailsClass,
35
+ isDescriptionIcon,
36
+ isDescriptionLabel,
36
37
  onFavoriteClick,
37
38
  onButtonProfile,
38
39
  onButtonDetails,
@@ -75,8 +76,13 @@
75
76
  </div>
76
77
  </div>
77
78
 
78
- <div class="h-15 my-2">
79
- <CardDescription {content} {isLoading} />
79
+ <div class="h-15 my-2 mb-5 md:mb-0">
80
+ <CardDescription
81
+ {content}
82
+ {isLoading}
83
+ {isDescriptionIcon}
84
+ {isDescriptionLabel}
85
+ />
80
86
  </div>
81
87
 
82
88
  <CardTags
package/dist/components/core/card/media/02/CardMedia02.svelte CHANGED
@@ -23,7 +23,6 @@
23
23
  className,
24
24
  imageUrl,
25
25
  videoUrl,
26
- //videoAction,
27
26
  startNumber,
28
27
  startMax = 5,
29
28
  isImageButtonMaximized = false,
@@ -33,6 +32,8 @@
33
32
  isLoading = false,
34
33
  buttonProfileClass,
35
34
  buttonDetailsClass,
35
+ isDescriptionIcon,
36
+ isDescriptionLabel,
36
37
  onFavoriteClick,
37
38
  onButtonProfile,
38
39
  onButtonDetails,
@@ -81,8 +82,13 @@
81
82
  />
82
83
  </div>
83
84
 
84
- <div class="h-15 mb-4">
85
- <CardDescription {content} {isLoading} />
85
+ <div class="h-15 mb-10 md:mb-0">
86
+ <CardDescription
87
+ {content}
88
+ {isLoading}
89
+ {isDescriptionIcon}
90
+ {isDescriptionLabel}
91
+ />
86
92
  </div>
87
93
 
88
94
  <CardThumbnailVideo
package/dist/components/core/card/shared/CardDescription.svelte CHANGED
@@ -36,6 +36,6 @@
36
36
  <TruncatableText
37
37
  text={content}
38
38
  {lines}
39
- class="text-justify text-[13px] md:text-[14px] text-gray-800 dark:text-gray-50 mt-3 my-2"
39
+ class="text-justify text-[13px] md:text-[14px] text-gray-800 dark:text-gray-50 mt-3 my-2 h-[65px] mb-1"
40
40
  />
41
41
  {/if}
package/dist/components/core/card/shared/CardThumbnailVideo.svelte CHANGED
@@ -27,7 +27,7 @@
27
27
  let {
28
28
  imageUrl,
29
29
  videoUrl,
30
- class: className = "w-64 h-64",
30
+ class: className = "h-32 md:w-64 md:h-64",
31
31
  isImageButtonMaximized = false,
32
32
  isVideoButtonMaximized = false,
33
33
  isLoading = false,
package/dist/components/core/card/types.d.ts CHANGED
@@ -48,6 +48,10 @@ export interface CardMediaProps {
48
48
  isVideoButtonMaximized?: boolean;
49
49
  /** Exibe o botão de maximizar na imagem */
50
50
  isImageButtonMaximized?: boolean;
51
+ /** Exibe ícone antes da descrição */
52
+ isDescriptionIcon?: boolean;
53
+ /** Exibe etiqueta (label) na descrição */
54
+ isDescriptionLabel?: boolean;
51
55
  /** Callback acionado ao clicar no botão de favorito */
52
56
  onFavoriteClick?: (id: string | number) => void;
53
57
  /** Callback acionado ao clicar no botão de perfil */
package/dist/components/core/carousel/grid/media/types.d.ts CHANGED
@@ -12,6 +12,10 @@ export interface CarouselGridMediaProps {
12
12
  slotProps?: CarouselSlotProps;
13
13
  /** Classe CSS adicional para o container do grid */
14
14
  gridClass?: string;
15
+ /** Exibe ícone antes da descrição */
16
+ isDescriptionIcon?: boolean;
17
+ /** Exibe etiqueta (label) na descrição */
18
+ isDescriptionLabel?: boolean;
15
19
  /** Variante visual do card: 1 ou 2 */
16
20
  variant?: 1 | 2;
17
21
  /** Lista de itens de mídia para exibir nos cards */
package/dist/components/core/carousel/grid/media/ui/CarouselGridMedia.svelte CHANGED
@@ -15,6 +15,8 @@
15
15
  items,
16
16
  variant,
17
17
  isLoading = false,
18
+ isDescriptionIcon,
19
+ isDescriptionLabel,
18
20
  }: CarouselGridMediaProps = $props();
19
21
 
20
22
  const responsive = useDevice();
@@ -32,7 +34,7 @@
32
34
  {#if isLoading}
33
35
  {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
34
36
  {#if responsive.isMobile}
35
- <Carousel.Item class="pl-2 basis-auto">
37
+ <Carousel.Item class="pl-2 basis-auto w-[300px]">
36
38
  <CardMedia id={i} {variant} isLoading />
37
39
  </Carousel.Item>
38
40
  {:else}
@@ -44,12 +46,22 @@
44
46
  {:else}
45
47
  {#each items as item, i (`media-${item.id ?? i}`)}
46
48
  {#if responsive.isMobile}
47
- <Carousel.Item class="pl-2 basis-auto">
48
- <CardMedia {...item} {variant} />
49
+ <Carousel.Item class="pl-2 basis-auto w-[300px]">
50
+ <CardMedia
51
+ {...item}
52
+ {variant}
53
+ {isDescriptionIcon}
54
+ {isDescriptionLabel}
55
+ />
49
56
  </Carousel.Item>
50
57
  {:else}
51
58
  <div>
52
- <CardMedia {...item} {variant} />
59
+ <CardMedia
60
+ {...item}
61
+ {variant}
62
+ {isDescriptionIcon}
63
+ {isDescriptionLabel}
64
+ />
53
65
  </div>
54
66
  {/if}
55
67
  {/each}
package/dist/components/core/carousel/promotion/types.d.ts CHANGED
@@ -18,4 +18,9 @@ export interface CarouselPromotionProps {
18
18
  isDescriptionLabel?: boolean;
19
19
  /** Estado de carregamento (skeleton) */
20
20
  isLoading?: boolean;
21
+ onClickBuy?: (id: string | number) => void;
22
+ /** Callback ao clicar no botão carrinho */
23
+ onClickShop?: (id: string | number) => void;
24
+ /** Callback ao clicar no botão favorito */
25
+ onClickFavorite?: (id: string | number) => void;
21
26
  }
package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte CHANGED
@@ -16,6 +16,9 @@
16
16
  isLoading = false,
17
17
  isDescriptionIcon,
18
18
  isDescriptionLabel,
19
+ onClickBuy,
20
+ onClickShop,
21
+ onClickFavorite,
19
22
  }: CarouselPromotionProps = $props();
20
23
 
21
24
  const responsive = useDevice();
@@ -48,7 +51,14 @@
48
51
  {:else}
49
52
  {#each items as item, i (`promotion-${item.id ?? i}`)}
50
53
  <Carousel.Item class="pl-2 w-75 basis-auto">
51
- <CardPromotion {...item} {isDescriptionIcon} {isDescriptionLabel} />
54
+ <CardPromotion
55
+ {...item}
56
+ {isDescriptionIcon}
57
+ {isDescriptionLabel}
58
+ {onClickBuy}
59
+ {onClickShop}
60
+ {onClickFavorite}
61
+ />
52
62
  </Carousel.Item>
53
63
  {/each}
54
64
  {/if}
package/dist/components/core/panel/CarouselSlot.svelte CHANGED
@@ -1,5 +1,6 @@
1
1
  <script lang="ts">
2
2
  import * as Carousel from "../../ui/carousel/index.js";
3
+ import { useDevice } from "../../../hooks/responsive.svelte";
3
4
  import type { CarouselSlotProps } from "./type";
4
5
 
5
6
  const {
@@ -14,7 +15,9 @@
14
15
 
15
16
  const styleTopCenter = "bg-blue-700! text-white! cursor-pointer!";
16
17
  const styleCenter =
17
- "absolute top-1/2 -translate-y-1/2 mt-0.5 mr-0 z-50 bg-blue-700! text-white! cursor-pointer!";
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();
18
21
  </script>
19
22
 
20
23
  <div
@@ -26,7 +29,7 @@
26
29
  >
27
30
  {@render children?.()}
28
31
  </Carousel.Content>
29
- {#if positionButtonPreviousAndNext == "center"}
32
+ {#if positionButtonPreviousAndNext == "center" && !responsive.isMobile}
30
33
  {#if isButtonPreviousAndNext}
31
34
  <Carousel.Previous
32
35
  class={`-left-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
@@ -36,14 +39,16 @@
36
39
  />
37
40
  {/if}
38
41
  {/if}
39
- {#if positionButtonPreviousAndNext == "top_right"}
42
+ {#if positionButtonPreviousAndNext == "top_right" || responsive.isMobile}
40
43
  {#if isButtonPreviousAndNext}
41
- <div class="absolute -top-6 right-10 md:right-10 lg:right-12 z-20">
44
+ <div
45
+ class="absolute -top-16 md:-top-10 right-8 md:right-10 lg:right-12 z-20"
46
+ >
42
47
  <Carousel.Previous
43
48
  class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
44
49
  />
45
50
  <Carousel.Next
46
- class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
51
+ class={`start-0 ${styleTopCenter} ${buttonPreviousAndNextClass}`}
47
52
  />
48
53
  </div>
49
54
  {/if}
package/dist/components/pages/product-details/shared/ProductDetailPrice.svelte CHANGED
@@ -39,6 +39,6 @@
39
39
  <Skeleton class="h-7 w-28 rounded-md" />
40
40
  {:else if formatted || oldPrice}
41
41
  <div class="flex items-end gap-3">
42
- <CardStartPrice newPrice={formatted} oldPrice={oldPrice} />
42
+ <CardStartPrice newPrice={formatted} {oldPrice} />
43
43
  </div>
44
44
  {/if}
package/dist/globals.css CHANGED
@@ -297,12 +297,12 @@
297
297
  .end-2 {
298
298
  inset-inline-end: calc(var(--spacing) * 2);
299
299
  }
300
- .-top-6 {
301
- top: calc(var(--spacing) * -6);
302
- }
303
300
  .-top-12 {
304
301
  top: calc(var(--spacing) * -12);
305
302
  }
303
+ .-top-16 {
304
+ top: calc(var(--spacing) * -16);
305
+ }
306
306
  .top-0 {
307
307
  top: 0px;
308
308
  }
@@ -351,8 +351,8 @@
351
351
  .right-4 {
352
352
  right: calc(var(--spacing) * 4);
353
353
  }
354
- .right-10 {
355
- right: calc(var(--spacing) * 10);
354
+ .right-8 {
355
+ right: calc(var(--spacing) * 8);
356
356
  }
357
357
  .-bottom-12 {
358
358
  bottom: calc(var(--spacing) * -12);
@@ -552,9 +552,6 @@
552
552
  .-mr-2 {
553
553
  margin-right: calc(var(--spacing) * -2);
554
554
  }
555
- .mr-0 {
556
- margin-right: 0px;
557
- }
558
555
  .mr-0\.5 {
559
556
  margin-right: calc(var(--spacing) * 0.5);
560
557
  }
@@ -814,15 +811,15 @@
814
811
  .h-50 {
815
812
  height: calc(var(--spacing) * 50);
816
813
  }
817
- .h-64 {
818
- height: calc(var(--spacing) * 64);
819
- }
820
814
  .h-72 {
821
815
  height: calc(var(--spacing) * 72);
822
816
  }
823
817
  .h-75 {
824
818
  height: calc(var(--spacing) * 75);
825
819
  }
820
+ .h-\[65px\] {
821
+ height: 65px;
822
+ }
826
823
  .h-\[calc\(100\%-1px\)\] {
827
824
  height: calc(100% - 1px);
828
825
  }
@@ -976,9 +973,6 @@
976
973
  .w-56 {
977
974
  width: calc(var(--spacing) * 56);
978
975
  }
979
- .w-64 {
980
- width: calc(var(--spacing) * 64);
981
- }
982
976
  .w-72 {
983
977
  width: calc(var(--spacing) * 72);
984
978
  }
@@ -3977,6 +3971,9 @@
3977
3971
  }
3978
3972
  }
3979
3973
  @media (width >= 48rem) {
3974
+ .md\:-top-10 {
3975
+ top: calc(var(--spacing) * -10);
3976
+ }
3980
3977
  .md\:right-6 {
3981
3978
  right: calc(var(--spacing) * 6);
3982
3979
  }
@@ -3998,9 +3995,15 @@
3998
3995
  .md\:mt-10 {
3999
3996
  margin-top: calc(var(--spacing) * 10);
4000
3997
  }
3998
+ .md\:mr-0 {
3999
+ margin-right: 0px;
4000
+ }
4001
4001
  .md\:-mb-10 {
4002
4002
  margin-bottom: calc(var(--spacing) * -10);
4003
4003
  }
4004
+ .md\:mb-0 {
4005
+ margin-bottom: 0px;
4006
+ }
4004
4007
  .md\:block {
4005
4008
  display: block;
4006
4009
  }
@@ -4028,6 +4031,9 @@
4028
4031
  .md\:h-50 {
4029
4032
  height: calc(var(--spacing) * 50);
4030
4033
  }
4034
+ .md\:h-64 {
4035
+ height: calc(var(--spacing) * 64);
4036
+ }
4031
4037
  .md\:h-100 {
4032
4038
  height: calc(var(--spacing) * 100);
4033
4039
  }
@@ -4061,6 +4067,9 @@
4061
4067
  .md\:w-25 {
4062
4068
  width: calc(var(--spacing) * 25);
4063
4069
  }
4070
+ .md\:w-64 {
4071
+ width: calc(var(--spacing) * 64);
4072
+ }
4064
4073
  .md\:w-225 {
4065
4074
  width: calc(var(--spacing) * 225);
4066
4075
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "negodesign",
3
- "version": "0.0.37",
3
+ "version": "0.0.39",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "sideEffects": [