negodesign 0.0.36 → 0.0.38

package/dist/components/core/card/shared/CardDescription.svelte

@@ -36,6 +36,6 @@
   <TruncatableText
     text={content}
     {lines}
-    class="text-justify text-[13px] md:text-[14px] text-gray-800  dark:text-gray-50 mt-3 my-2"
+    class="text-justify text-[13px] md:text-[14px] text-gray-800  dark:text-gray-50 mt-3 my-2 h-[65px] mb-1"
   />
 {/if}

package/dist/components/core/carousel/grid/media/ui/CarouselGridMedia.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import CarouselGridSlot from "../../shared/ui/CarouselGridSlot.svelte";
-  import * as Carousel from "../../../../../ui/carousel/index.js";
   import CarouselHeader from "../../../shared/ui/CarouselHeader.svelte";
+  import NotFoundEmpty from "../../../../panel/NotFoundEmpty.svelte";
+  import * as Carousel from "../../../../../ui/carousel/index.js";
   import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import { t } from "../../../../../../i18n";
   import CardMedia from "../../../../card/media/CardMedia.svelte";
   import type { CarouselGridMediaProps } from "../../../../../../types";
 
@@ -16,34 +18,42 @@
   }: CarouselGridMediaProps = $props();
 
   const responsive = useDevice();
+  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
 </script>
 
 <CarouselHeader {...headerProps}>
-  <CarouselGridSlot {slotProps} {gridClass} totalItems={items.length}>
-    {#if isLoading}
-      {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
-        {#if responsive.isMobile}
-          <Carousel.Item class="pl-2 basis-auto">
-            <CardMedia id={i} {variant} isLoading />
-          </Carousel.Item>
-        {:else}
-          <div>
-            <CardMedia id={i} {variant} isLoading />
-          </div>
-        {/if}
-      {/each}
-    {:else}
-      {#each items as item, i (`media-${item.id ?? i}`)}
-        {#if responsive.isMobile}
-          <Carousel.Item class="pl-2 basis-auto">
-            <CardMedia {...item} {variant} />
-          </Carousel.Item>
-        {:else}
-          <div>
-            <CardMedia {...item} {variant} />
-          </div>
-        {/if}
-      {/each}
-    {/if}
-  </CarouselGridSlot>
+  {#if isEmpty}
+    <NotFoundEmpty
+      title={$t("empty.media.title")}
+      description={$t("empty.media.description")}
+    />
+  {:else}
+    <CarouselGridSlot {slotProps} {gridClass} totalItems={items?.length ?? 0}>
+      {#if isLoading}
+        {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
+          {#if responsive.isMobile}
+            <Carousel.Item class="pl-2 basis-auto">
+              <CardMedia id={i} {variant} isLoading />
+            </Carousel.Item>
+          {:else}
+            <div>
+              <CardMedia id={i} {variant} isLoading />
+            </div>
+          {/if}
+        {/each}
+      {:else}
+        {#each items as item, i (`media-${item.id ?? i}`)}
+          {#if responsive.isMobile}
+            <Carousel.Item class="pl-2 basis-auto">
+              <CardMedia {...item} {variant} />
+            </Carousel.Item>
+          {:else}
+            <div>
+              <CardMedia {...item} {variant} />
+            </div>
+          {/if}
+        {/each}
+      {/if}
+    </CarouselGridSlot>
+  {/if}
 </CarouselHeader>

package/dist/components/core/carousel/grid/product/ui/CarouselGridProduct.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import CarouselGridSlot from "../../shared/ui/CarouselGridSlot.svelte";
-  import * as Carousel from "../../../../../ui/carousel/index.js";
   import CarouselHeader from "../../../shared/ui/CarouselHeader.svelte";
+  import NotFoundEmpty from "../../../../panel/NotFoundEmpty.svelte";
+  import * as Carousel from "../../../../../ui/carousel/index.js";
   import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import { t } from "../../../../../../i18n";
   import CardProduct from "../../../../card/product/CardProduct.svelte";
   import type { CarouselGridProductProps } from "../types";
 
@@ -18,44 +20,52 @@
   }: CarouselGridProductProps = $props();
 
   const responsive = useDevice();
+  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
 </script>
 
 <CarouselHeader {...headerProps}>
-  <CarouselGridSlot {slotProps} {gridClass} totalItems={items.length}>
-    {#if isLoading}
-      {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
-        {#if responsive.isMobile}
-          <Carousel.Item class="pl-2 basis-auto">
-            <CardProduct id={i} {variant} isLoading />
-          </Carousel.Item>
-        {:else}
-          <div>
-            <CardProduct id={i} {variant} isLoading />
-          </div>
-        {/if}
-      {/each}
-    {:else}
-      {#each items as item, i (`profile-${item.id ?? i}`)}
-        {#if responsive.isMobile}
-          <Carousel.Item class="pl-2 basis-auto">
-            <CardProduct
-              {...item}
-              {variant}
-              {isDescriptionIcon}
-              {isDescriptionLabel}
-            />
-          </Carousel.Item>
-        {:else}
-          <div>
-            <CardProduct
-              {...item}
-              {variant}
-              {isDescriptionIcon}
-              {isDescriptionLabel}
-            />
-          </div>
-        {/if}
-      {/each}
-    {/if}
-  </CarouselGridSlot>
+  {#if isEmpty}
+    <NotFoundEmpty
+      title={$t("empty.products.title")}
+      description={$t("empty.products.description")}
+    />
+  {:else}
+    <CarouselGridSlot {slotProps} {gridClass} totalItems={items?.length ?? 0}>
+      {#if isLoading}
+        {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
+          {#if responsive.isMobile}
+            <Carousel.Item class="pl-2 basis-auto">
+              <CardProduct id={i} {variant} isLoading />
+            </Carousel.Item>
+          {:else}
+            <div>
+              <CardProduct id={i} {variant} isLoading />
+            </div>
+          {/if}
+        {/each}
+      {:else}
+        {#each items as item, i (`product-${item.id ?? i}`)}
+          {#if responsive.isMobile}
+            <Carousel.Item class="pl-2 basis-auto">
+              <CardProduct
+                {...item}
+                {variant}
+                {isDescriptionIcon}
+                {isDescriptionLabel}
+              />
+            </Carousel.Item>
+          {:else}
+            <div>
+              <CardProduct
+                {...item}
+                {variant}
+                {isDescriptionIcon}
+                {isDescriptionLabel}
+              />
+            </div>
+          {/if}
+        {/each}
+      {/if}
+    </CarouselGridSlot>
+  {/if}
 </CarouselHeader>

package/dist/components/core/carousel/grid/profile/ui/CarouselGridProfile.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import CarouselGridSlot from "../../shared/ui/CarouselGridSlot.svelte";
-  import * as Carousel from "../../../../../ui/carousel/index.js";
   import CarouselHeader from "../../../shared/ui/CarouselHeader.svelte";
+  import NotFoundEmpty from "../../../../panel/NotFoundEmpty.svelte";
+  import * as Carousel from "../../../../../ui/carousel/index.js";
   import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import { t } from "../../../../../../i18n";
   import CardProfile from "../../../../card/profile/CardProfile.svelte";
   import type { CarouselGridProfileProps } from "../../../../../../types";
 
@@ -22,52 +24,60 @@
   }: CarouselGridProfileProps = $props();
 
   const responsive = useDevice();
+  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
 </script>
 
 <CarouselHeader {...headerProps}>
-  <CarouselGridSlot {slotProps} {gridClass} totalItems={items.length}>
-    {#if isLoading}
-      {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
-        {#if responsive.isMobile}
-          <Carousel.Item class="pl-2 basis-auto">
-            <CardProfile id={i} {variant} isLoading />
-          </Carousel.Item>
-        {:else}
-          <div>
-            <CardProfile id={i} {variant} isLoading />
-          </div>
-        {/if}
-      {/each}
-    {:else}
-      {#each items as item, i (`profile-${item.id ?? i}`)}
-        {#if responsive.isMobile}
-          <Carousel.Item class="pl-2 basis-auto">
-            <CardProfile
-              {...item}
-              {variant}
-              {isDescriptionIcon}
-              {isDescriptionLabel}
-              {onEmailClick}
-              {onWhatsappClick}
-              {onButtonProfile}
-              {onFavoriteClick}
-            />
-          </Carousel.Item>
-        {:else}
-          <div>
-            <CardProfile
-              {...item}
-              {variant}
-              {isDescriptionIcon}
-              {isDescriptionLabel}
-              {onEmailClick}
-              {onWhatsappClick}
-              {onButtonProfile}
-              {onFavoriteClick}
-            />
-          </div>
-        {/if}
-      {/each}
-    {/if}
-  </CarouselGridSlot>
+  {#if isEmpty}
+    <NotFoundEmpty
+      title={$t("empty.profiles.title")}
+      description={$t("empty.profiles.description")}
+    />
+  {:else}
+    <CarouselGridSlot {slotProps} {gridClass} totalItems={items?.length ?? 0}>
+      {#if isLoading}
+        {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
+          {#if responsive.isMobile}
+            <Carousel.Item class="pl-2 basis-auto">
+              <CardProfile id={i} {variant} isLoading />
+            </Carousel.Item>
+          {:else}
+            <div>
+              <CardProfile id={i} {variant} isLoading />
+            </div>
+          {/if}
+        {/each}
+      {:else}
+        {#each items as item, i (`profile-${item.id ?? i}`)}
+          {#if responsive.isMobile}
+            <Carousel.Item class="pl-2 basis-auto">
+              <CardProfile
+                {...item}
+                {variant}
+                {isDescriptionIcon}
+                {isDescriptionLabel}
+                {onEmailClick}
+                {onWhatsappClick}
+                {onButtonProfile}
+                {onFavoriteClick}
+              />
+            </Carousel.Item>
+          {:else}
+            <div>
+              <CardProfile
+                {...item}
+                {variant}
+                {isDescriptionIcon}
+                {isDescriptionLabel}
+                {onEmailClick}
+                {onWhatsappClick}
+                {onButtonProfile}
+                {onFavoriteClick}
+              />
+            </div>
+          {/if}
+        {/each}
+      {/if}
+    </CarouselGridSlot>
+  {/if}
 </CarouselHeader>

package/dist/components/core/carousel/grid/promotion/ui/CarouselGridPromotion.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import CarouselGridSlot from "../../shared/ui/CarouselGridSlot.svelte";
-  import * as Carousel from "../../../../../ui/carousel/index.js";
   import CarouselHeader from "../../../shared/ui/CarouselHeader.svelte";
+  import NotFoundEmpty from "../../../../panel/NotFoundEmpty.svelte";
+  import * as Carousel from "../../../../../ui/carousel/index.js";
   import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import { t } from "../../../../../../i18n";
   import CardPromotion from "../../../../card/promotion/CardPromotion.svelte";
   import type { CarouselGridPromotionProps } from "../types";
 
@@ -17,34 +19,50 @@
   }: CarouselGridPromotionProps = $props();
 
   const responsive = useDevice();
+  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
 </script>
 
 <CarouselHeader {...headerProps}>
-  <CarouselGridSlot {slotProps} {gridClass} totalItems={items.length}>
-    {#if isLoading}
-      {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
-        {#if responsive.isMobile}
-          <Carousel.Item class="pl-2 basis-auto">
-            <CardPromotion id={i} isLoading />
-          </Carousel.Item>
-        {:else}
-          <div>
-            <CardPromotion id={i} isLoading />
-          </div>
-        {/if}
-      {/each}
-    {:else}
-      {#each items as item, i (`promotion-${item.id ?? i}`)}
-        {#if responsive.isMobile}
-          <Carousel.Item class="pl-2 basis-auto">
-            <CardPromotion {...item} {isDescriptionIcon} {isDescriptionLabel} />
-          </Carousel.Item>
-        {:else}
-          <div>
-            <CardPromotion {...item} {isDescriptionIcon} {isDescriptionLabel} />
-          </div>
-        {/if}
-      {/each}
-    {/if}
-  </CarouselGridSlot>
+  {#if isEmpty}
+    <NotFoundEmpty
+      title={$t("empty.promotions.title")}
+      description={$t("empty.promotions.description")}
+    />
+  {:else}
+    <CarouselGridSlot {slotProps} {gridClass} totalItems={items?.length ?? 0}>
+      {#if isLoading}
+        {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
+          {#if responsive.isMobile}
+            <Carousel.Item class="pl-2 basis-auto">
+              <CardPromotion id={i} isLoading />
+            </Carousel.Item>
+          {:else}
+            <div>
+              <CardPromotion id={i} isLoading />
+            </div>
+          {/if}
+        {/each}
+      {:else}
+        {#each items as item, i (`promotion-${item.id ?? i}`)}
+          {#if responsive.isMobile}
+            <Carousel.Item class="pl-2 basis-auto">
+              <CardPromotion
+                {...item}
+                {isDescriptionIcon}
+                {isDescriptionLabel}
+              />
+            </Carousel.Item>
+          {:else}
+            <div>
+              <CardPromotion
+                {...item}
+                {isDescriptionIcon}
+                {isDescriptionLabel}
+              />
+            </div>
+          {/if}
+        {/each}
+      {/if}
+    </CarouselGridSlot>
+  {/if}
 </CarouselHeader>

package/dist/components/core/carousel/highlights/ui/CarouselHighlights.svelte

@@ -1,47 +1,57 @@
-<script lang="ts">
-  import CardHighlight from "../../../card/highlight/CardHighlight.svelte";
-  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
-  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
-  import * as Carousel from "../../../../ui/carousel/index.js";
-  import type { CarouselHighlightsProps } from "../types";
-  import { useDevice } from "../../../../../hooks/responsive.svelte";
-  import Autoplay from "embla-carousel-autoplay";
-
-  const {
-    headerProps,
-    slotProps,
-    items,
-    isLoading = false,
-    varient = 1,
-    isDescriptionIcon,
-    isDescriptionLabel,
-  }: CarouselHighlightsProps = $props();
-
-  const responsive = useDevice();
-</script>
-
-<CarouselHeader {...headerProps}>
-  <CarouselSlot
-    {...slotProps}
-    plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
-  >
-    {#if isLoading}
-      {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
-        <Carousel.Item class="pl-2 basis-auto">
-          <CardHighlight id={i} {isLoading} {varient} />
-        </Carousel.Item>
-      {/each}
-    {:else}
-      {#each items as item, i (`highlight-${item.id ?? i}`)}
-        <Carousel.Item class="pl-2 basis-auto">
-          <CardHighlight
-            {...item}
-            {varient}
-            {isDescriptionIcon}
-            {isDescriptionLabel}
-          />
-        </Carousel.Item>
-      {/each}
-    {/if}
-  </CarouselSlot>
-</CarouselHeader>
+<script lang="ts">
+  import CardHighlight from "../../../card/highlight/CardHighlight.svelte";
+  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import NotFoundEmpty from "../../../panel/NotFoundEmpty.svelte";
+  import * as Carousel from "../../../../ui/carousel/index.js";
+  import type { CarouselHighlightsProps } from "../types";
+  import { useDevice } from "../../../../../hooks/responsive.svelte";
+  import { t } from "../../../../../i18n";
+  import Autoplay from "embla-carousel-autoplay";
+
+  const {
+    headerProps,
+    slotProps,
+    items,
+    isLoading = false,
+    varient = 1,
+    isDescriptionIcon,
+    isDescriptionLabel,
+  }: CarouselHighlightsProps = $props();
+
+  const responsive = useDevice();
+  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
+</script>
+
+<CarouselHeader {...headerProps}>
+  {#if isEmpty}
+    <NotFoundEmpty
+      title={$t("empty.highlights.title")}
+      description={$t("empty.highlights.description")}
+    />
+  {:else}
+    <CarouselSlot
+      {...slotProps}
+      plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+    >
+      {#if isLoading}
+        {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
+          <Carousel.Item class="pl-2 basis-auto">
+            <CardHighlight id={i} {isLoading} {varient} />
+          </Carousel.Item>
+        {/each}
+      {:else}
+        {#each items as item, i (`highlight-${item.id ?? i}`)}
+          <Carousel.Item class="pl-2 basis-auto">
+            <CardHighlight
+              {...item}
+              {varient}
+              {isDescriptionIcon}
+              {isDescriptionLabel}
+            />
+          </Carousel.Item>
+        {/each}
+      {/if}
+    </CarouselSlot>
+  {/if}
+</CarouselHeader>

package/dist/components/core/carousel/product/ui/CarouselProduct.svelte

@@ -1,47 +1,57 @@
-<script lang="ts">
-  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
-  import * as Carousel from "../../../../ui/carousel/index.js";
-  import type { CarouselProductProps } from "../types";
-  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
-  import { useDevice } from "../../../../../hooks/responsive.svelte";
-  import Autoplay from "embla-carousel-autoplay";
-  import CardProduct from "../../../card/product/CardProduct.svelte";
-
-  const {
-    headerProps,
-    slotProps,
-    items,
-    isLoading = false,
-    isDescriptionIcon,
-    isDescriptionLabel,
-  }: CarouselProductProps = $props();
-
-  const responsive = useDevice();
-</script>
-
-<CarouselHeader {...headerProps}>
-  <CarouselSlot
-    {...slotProps}
-    containerClass="w-full"
-    plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
-  >
-    {#if isLoading}
-      {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
-        <Carousel.Item class="pl-5 w-75 basis-auto">
-          <CardProduct
-            id={i}
-            {isLoading}
-            {isDescriptionIcon}
-            {isDescriptionLabel}
-          />
-        </Carousel.Item>
-      {/each}
-    {:else}
-      {#each items as item, i (`product-${item.id ?? i}`)}
-        <Carousel.Item class="pl-2 w-75 basis-auto">
-          <CardProduct {...item} {isDescriptionIcon} {isDescriptionLabel} />
-        </Carousel.Item>
-      {/each}
-    {/if}
-  </CarouselSlot>
-</CarouselHeader>
+<script lang="ts">
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import NotFoundEmpty from "../../../panel/NotFoundEmpty.svelte";
+  import * as Carousel from "../../../../ui/carousel/index.js";
+  import type { CarouselProductProps } from "../types";
+  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
+  import { useDevice } from "../../../../../hooks/responsive.svelte";
+  import { t } from "../../../../../i18n";
+  import Autoplay from "embla-carousel-autoplay";
+  import CardProduct from "../../../card/product/CardProduct.svelte";
+
+  const {
+    headerProps,
+    slotProps,
+    items,
+    isLoading = false,
+    isDescriptionIcon,
+    isDescriptionLabel,
+  }: CarouselProductProps = $props();
+
+  const responsive = useDevice();
+  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
+</script>
+
+<CarouselHeader {...headerProps}>
+  {#if isEmpty}
+    <NotFoundEmpty
+      title={$t("empty.products.title")}
+      description={$t("empty.products.description")}
+    />
+  {:else}
+    <CarouselSlot
+      {...slotProps}
+      containerClass="w-full"
+      plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+    >
+      {#if isLoading}
+        {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
+          <Carousel.Item class="pl-5 w-75 basis-auto">
+            <CardProduct
+              id={i}
+              {isLoading}
+              {isDescriptionIcon}
+              {isDescriptionLabel}
+            />
+          </Carousel.Item>
+        {/each}
+      {:else}
+        {#each items as item, i (`product-${item.id ?? i}`)}
+          <Carousel.Item class="pl-2 w-75 basis-auto">
+            <CardProduct {...item} {isDescriptionIcon} {isDescriptionLabel} />
+          </Carousel.Item>
+        {/each}
+      {/if}
+    </CarouselSlot>
+  {/if}
+</CarouselHeader>

package/dist/components/core/carousel/promotion/types.d.ts

@@ -18,4 +18,9 @@ export interface CarouselPromotionProps {
     isDescriptionLabel?: boolean;
     /** Estado de carregamento (skeleton) */
     isLoading?: boolean;
+    onClickBuy?: (id: string | number) => void;
+    /** Callback ao clicar no botão carrinho */
+    onClickShop?: (id: string | number) => void;
+    /** Callback ao clicar no botão favorito */
+    onClickFavorite?: (id: string | number) => void;
 }