negodesign 0.0.26 → 0.0.28

package/dist/components/core/card/profile/CardProfile.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-    import type { CardProfileProps } from "../types";
-    import CardProfile01 from "./01/CardProfile01.svelte";
-    import CardProfile02 from "./02/CardProfile02.svelte";
-
-    type Props = {
-        variant?: 1 | 2;
-    };
-
-    let { variant, ...restProps }: CardProfileProps & Props = $props();
-</script>
-
-{#if variant === 2}
-  <CardProfile02 {...restProps} />
-{:else}
-  <CardProfile01 {...restProps} />
-{/if}
+<script lang="ts">
+    import type { CardProfileProps } from "../types";
+    import CardProfile01 from "./01/CardProfile01.svelte";
+    import CardProfile02 from "./02/CardProfile02.svelte";
+
+    type Props = {
+        variant?: 1 | 2;
+    };
+
+    let { variant, ...restProps }: CardProfileProps & Props = $props();
+</script>
+
+{#if variant === 2}
+  <CardProfile02 {...restProps} />
+{:else}
+  <CardProfile01 {...restProps} />
+{/if}

package/dist/components/core/card/promotion/CardPromotion.svelte

@@ -1,112 +1,133 @@
-<script lang="ts">
-  import Button from "../../../ui/button/button.svelte";
-  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
-  import { t } from "../../../../i18n";
-  import CardCart from "../shared/CardCart.svelte";
-  import CardDescription from "../shared/CardDescription.svelte";
-  import CardFavorite from "../shared/CardFavorite.svelte";
-  import CardStartPrice from "../shared/CardStartPrice.svelte";
-  import CardTags from "../shared/CardTags.svelte";
-  /**
-   * Card component with a title and content.
-   * @component
-   */
-  import type { CardPromotionProps } from "../types";
-
-  let {
-    id,
-    tags,
-    logo,
-    title,
-    imageUrl,
-    isFavorite = false,
-    isCart = false,
-    isLoading = false,
-    newPrice,
-    oldPrice,
-    content,
-    buttonBuyText,
-    isDescriptionIcon,
-    isDescriptionLabel,
-    onClickBuy,
-    onClickShop,
-    onClickFavorite,
-  }: CardPromotionProps = $props();
-</script>
-
-<article class="relative rounded-lg border">
-  <aside class="relative w-full">
-    <div class="absolute top-1 left-1 z-2 gap-1 p-2">
-      {#if isLoading}
-        <Skeleton class="h-5 w-20 rounded-full bg-black/20" />
-      {:else if logo}
-        <img src={logo} width={30} height={30} alt={title} class="rounded-lg" />
-      {/if}
-    </div>
-
-    <div class="absolute top-1 right-1 z-2 flex items-center gap-1 p-2">
-      <CardFavorite
-        {id}
-        {isFavorite}
-        {isLoading}
-        onFavoriteClick={onClickFavorite}
-      />
-      <CardCart {id} {isCart} {isLoading} onCartClick={onClickShop} />
-    </div>
-
-    {#if isLoading}
-      <Skeleton
-        class="rounded-lg md:h-25 md:w-25 lg:h-45 lg:w-45 object-cover object-center bg-black/15"
-      />
-    {:else if imageUrl}
-      <img
-        src={imageUrl}
-        alt={imageUrl}
-        class="rounded-tr-lg rounded-tl-lg h-25 lg:h-45 w-full object-cover object-center"
-      />
-    {/if}
-    <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
-  </aside>
-
-  <aside
-    class="bottom-1 inset-x-0 flex flex-col items-center justify-center gap-0.5 m-auto max-w-11/12 p-1 rounded-md"
-  >
-    <div class="flex justify-between w-full items-center mb-1">
-      {#if title}
-        {#if isLoading}
-          <Skeleton class="h-4 w-30 rounded-lg" />
-        {:else}
-          <div class="font-semibold line-clamp-1 flex-nowrap">
-            {title}
-          </div>
-        {/if}
-      {/if}
-    </div>
-
-    <div>
-      <CardDescription {content} {isDescriptionIcon} {isDescriptionLabel} />
-    </div>
-
-    <div class="w-full mb-3">
-      <CardTags {tags} />
-    </div>
-
-    <div class="flex justify-start gap-2 w-full">
-      {#if isLoading}
-        <Skeleton class="h-5 bg-black/10 w-25 my-2 mr-2" />
-      {:else if newPrice || oldPrice}
-        <div>
-          <CardStartPrice {newPrice} {oldPrice} />
-        </div>
-      {/if}
-    </div>
-
-    {#if isLoading}
-      <Skeleton class="h-9 w-full rounded-md" />
-    {:else}
-      <Button onclick={() => onClickBuy!(id)} class="w-full">
-        {buttonBuyText || $t("label.buy")}
-      </Button>
-    {/if}
-  </aside>
-</article>
+<script lang="ts">
+  import Button from "../../../ui/button/button.svelte";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import { t } from "../../../../i18n";
+  import CardCart from "../shared/CardCart.svelte";
+  import CardDescription from "../shared/CardDescription.svelte";
+  import CardFavorite from "../shared/CardFavorite.svelte";
+  import CardStartPrice from "../shared/CardStartPrice.svelte";
+  import CardTags from "../shared/CardTags.svelte";
+  import ImgPlaceHolderGallery from "../../../../assets/placeholder-image.png";
+  import ImgPlaceholderCompany from "../../../../assets/placeholder-company.png";
+
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardPromotionProps } from "../types";
+
+  let {
+    id,
+    tags,
+    logo,
+    title,
+    imageUrl,
+    isFavorite = false,
+    isCart = false,
+    isLoading = false,
+    newPrice,
+    oldPrice,
+    content,
+    buttonBuyText,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    onClickBuy,
+    onClickShop,
+    onClickFavorite,
+  }: CardPromotionProps = $props();
+</script>
+
+<article class="relative rounded-lg border">
+  <aside class="relative w-full">
+    <div class="absolute top-1 left-1 z-2 gap-1 p-2">
+      {#if isLoading}
+        <Skeleton class="h-5 w-20 rounded-full bg-black/20" />
+      {:else if logo}
+        <img
+          src={logo}
+          width={30}
+          height={30}
+          alt={title}
+          onerror={(e) =>
+            ((e.target as HTMLImageElement).src = ImgPlaceholderCompany)}
+          class="rounded-lg"
+        />
+      {:else}
+        <img
+          src={ImgPlaceholderCompany}
+          width={30}
+          height={30}
+          alt={title}
+          class="rounded-lg"
+        />
+      {/if}
+    </div>
+
+    <div class="absolute top-1 right-1 z-2 flex items-center gap-1 p-2">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        {isLoading}
+        onFavoriteClick={onClickFavorite}
+      />
+      <CardCart {id} {isCart} {isLoading} onCartClick={onClickShop} />
+    </div>
+
+    {#if isLoading}
+      <Skeleton
+        class="rounded-lg h-30 w-full object-cover object-center bg-black/15"
+      />
+    {:else if imageUrl}
+      <img
+        src={imageUrl}
+        alt={imageUrl}
+        class="rounded-tr-lg rounded-tl-lg h-36 w-full object-cover object-center"
+        onerror={(e) =>
+          ((e.target as HTMLImageElement).src = ImgPlaceHolderGallery)}
+      />
+    {/if}
+    <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
+  </aside>
+
+  <aside
+    class="bottom-1 inset-x-0 flex flex-col items-center justify-center gap-0.5 m-auto max-w-11/12 p-1 rounded-md"
+  >
+    <div class="flex justify-between w-full items-center mb-1">
+      {#if title}
+        {#if isLoading}
+          <Skeleton class="h-4 w-30 rounded-lg" />
+        {:else}
+          <div class="font-semibold line-clamp-1 flex-nowrap">
+            {title}
+          </div>
+        {/if}
+      {/if}
+    </div>
+
+    <div>
+      <CardDescription {content} {isDescriptionIcon} {isDescriptionLabel} />
+    </div>
+
+    <div class="w-full mb-2">
+      <CardTags {tags} />
+    </div>
+
+    <div class="flex justify-start gap-2 w-full">
+      {#if isLoading}
+        <Skeleton class="h-5 bg-black/10 w-25 my-2 mr-2" />
+      {:else if newPrice || oldPrice}
+        <div>
+          <CardStartPrice {newPrice} {oldPrice} />
+        </div>
+      {/if}
+    </div>
+
+    {#if isLoading}
+      <Skeleton class="h-9 w-full rounded-md" />
+    {:else}
+      <Button onclick={() => onClickBuy!(id)} class="w-full">
+        {buttonBuyText || $t("label.buy")}
+      </Button>
+    {/if}
+  </aside>
+</article>

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

@@ -1,30 +1,30 @@
-<script lang="ts">
-    import { Button } from "../../../ui/button/index.js";
-    import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
-
-    type CardButtonProps = {
-        id: string | number;
-        icon: IconSvgElement;
-        isFlex?: boolean;
-        className?: string;
-        text: string;
-        onClick: (id: string | number) => void;
-    };
-
-    let { 
-        id, 
-        icon, 
-        isFlex, 
-        className, 
-        text, 
-        onClick 
-    }: CardButtonProps = $props();
-</script>
-
-<Button
-    class="{isFlex ? 'flex-1' : ''} {className}"
-    onclick={() => onClick(id)}
->
-    <HugeiconsIcon {icon} />
-    <span>{text}</span>
-</Button>
+<script lang="ts">
+    import { Button } from "../../../ui/button/index.js";
+    import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
+
+    type CardButtonProps = {
+        id: string | number;
+        icon: IconSvgElement;
+        isFlex?: boolean;
+        className?: string;
+        text: string;
+        onClick: (id: string | number) => void;
+    };
+
+    let { 
+        id, 
+        icon, 
+        isFlex, 
+        className, 
+        text, 
+        onClick 
+    }: CardButtonProps = $props();
+</script>
+
+<Button
+    class="{isFlex ? 'flex-1' : ''} {className}"
+    onclick={() => onClick(id)}
+>
+    <HugeiconsIcon {icon} />
+    <span>{text}</span>
+</Button>

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

@@ -1,36 +1,36 @@
-<script lang="ts">
-  import { Button } from "../../../ui/button/index.js";
-  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
-  import {
-    ShoppingCartAdd01Icon,
-    ShoppingCartRemove01Icon,
-  } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  type Props = {
-    id: string | number;
-    isCart: boolean;
-    isLoading?: boolean;
-    onCartClick?: (id: string | number) => void;
-  };
-
-  let { id, isCart, isLoading = false, onCartClick }: Props = $props();
-</script>
-
-{#if isLoading}
-  <Skeleton class="w-8 h-8 rounded-full" />
-{:else if isCart}
-  <Button
-    class="w-8 h-8 rounded-full bg-[#1d63be]"
-    onclick={() => onCartClick!(id)}
-  >
-    <HugeiconsIcon icon={ShoppingCartRemove01Icon} />
-  </Button>
-{:else}
-  <Button
-    class="w-8 h-8 rounded-full bg-[#808080]"
-    onclick={() => onCartClick!(id)}
-  >
-    <HugeiconsIcon icon={ShoppingCartAdd01Icon} />
-  </Button>
-{/if}
+<script lang="ts">
+  import { Button } from "../../../ui/button/index.js";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import {
+    ShoppingCartAdd01Icon,
+    ShoppingCartRemove01Icon,
+  } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  type Props = {
+    id: string | number;
+    isCart: boolean;
+    isLoading?: boolean;
+    onCartClick?: (id: string | number) => void;
+  };
+
+  let { id, isCart, isLoading = false, onCartClick }: Props = $props();
+</script>
+
+{#if isLoading}
+  <Skeleton class="w-8 h-8 rounded-full" />
+{:else if isCart}
+  <Button
+    class="w-8 h-8 rounded-full bg-[#1d63be]"
+    onclick={() => onCartClick!(id)}
+  >
+    <HugeiconsIcon icon={ShoppingCartRemove01Icon} />
+  </Button>
+{:else}
+  <Button
+    class="w-8 h-8 rounded-full bg-[#808080]"
+    onclick={() => onCartClick!(id)}
+  >
+    <HugeiconsIcon icon={ShoppingCartAdd01Icon} />
+  </Button>
+{/if}

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

@@ -1,38 +1,38 @@
-<script lang="ts">
-    import { Message01Icon } from "@hugeicons/core-free-icons";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-    import TruncatableText from "./TruncatableText.svelte";
-    import { t } from "../../../../i18n";
-    import Skeleton from "../../../ui/skeleton/skeleton.svelte";
-
-    type CardDescriptionProps = {
-        content?: string;
-        isLoading?: boolean;
-        isDescriptionIcon?: boolean;
-        isDescriptionLabel?: boolean;
-    };
-
-    let {
-        content,
-        isLoading = false,
-        isDescriptionIcon = true,
-        isDescriptionLabel = true,
-    }: CardDescriptionProps = $props();
-</script>
-
-{#if isLoading}
-    <Skeleton class="w-full h-5" />
-{:else if content}
-    {#if isDescriptionLabel}
-        <div class="mb-1 text-[14px] md:text-[15px] flex items-center gap-1">
-            {#if isDescriptionIcon}
-                <HugeiconsIcon icon={Message01Icon} class="h-4 w-4" />
-            {/if}
-            <div>{$t("label.description")}</div>
-        </div>
-    {/if}
-    <TruncatableText
-        text={content}
-        class="text-justify text-[13px] md:text-[14px] text-gray-800  dark:text-gray-50 mt-3 my-4"
-    />
-{/if}
+<script lang="ts">
+    import { Message01Icon } from "@hugeicons/core-free-icons";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import TruncatableText from "./TruncatableText.svelte";
+    import { t } from "../../../../i18n";
+    import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+
+    type CardDescriptionProps = {
+        content?: string;
+        isLoading?: boolean;
+        isDescriptionIcon?: boolean;
+        isDescriptionLabel?: boolean;
+    };
+
+    let {
+        content,
+        isLoading = false,
+        isDescriptionIcon = true,
+        isDescriptionLabel = true,
+    }: CardDescriptionProps = $props();
+</script>
+
+{#if isLoading}
+    <Skeleton class="w-full h-5" />
+{:else if content}
+    {#if isDescriptionLabel}
+        <div class="mb-1 text-[14px] md:text-[15px] flex items-center gap-1">
+            {#if isDescriptionIcon}
+                <HugeiconsIcon icon={Message01Icon} class="h-4 w-4" />
+            {/if}
+            <div>{$t("label.description")}</div>
+        </div>
+    {/if}
+    <TruncatableText
+        text={content}
+        class="text-justify text-[13px] md:text-[14px] text-gray-800  dark:text-gray-50 mt-3 my-4"
+    />
+{/if}

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

@@ -1,33 +1,33 @@
-<script lang="ts">
-  import { Button } from "../../../ui/button/index.js";
-  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
-  import { HeartAddIcon, HeartRemoveIcon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  type Props = {
-    id: string | number;
-    isFavorite: boolean;
-    isLoading?: boolean;
-    onFavoriteClick?: (id: string | number) => void;
-  };
-
-  let { id, isFavorite, isLoading = false, onFavoriteClick }: Props = $props();
-</script>
-
-{#if isLoading}
-  <Skeleton class="w-8 h-8 rounded-full" />
-{:else if isFavorite}
-  <Button
-    class="w-8 h-8 rounded-full bg-[#ce2356]"
-    onclick={() => onFavoriteClick!(id)}
-  >
-    <HugeiconsIcon icon={HeartRemoveIcon} />
-  </Button>
-{:else}
-  <Button
-    class="w-8 h-8 rounded-full bg-[#808080]"
-    onclick={() => onFavoriteClick!(id)}
-  >
-    <HugeiconsIcon icon={HeartAddIcon} />
-  </Button>
-{/if}
+<script lang="ts">
+  import { Button } from "../../../ui/button/index.js";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import { HeartAddIcon, HeartRemoveIcon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  type Props = {
+    id: string | number;
+    isFavorite: boolean;
+    isLoading?: boolean;
+    onFavoriteClick?: (id: string | number) => void;
+  };
+
+  let { id, isFavorite, isLoading = false, onFavoriteClick }: Props = $props();
+</script>
+
+{#if isLoading}
+  <Skeleton class="w-8 h-8 rounded-full" />
+{:else if isFavorite}
+  <Button
+    class="w-8 h-8 rounded-full bg-[#ce2356]"
+    onclick={() => onFavoriteClick!(id)}
+  >
+    <HugeiconsIcon icon={HeartRemoveIcon} />
+  </Button>
+{:else}
+  <Button
+    class="w-8 h-8 rounded-full bg-[#808080]"
+    onclick={() => onFavoriteClick!(id)}
+  >
+    <HugeiconsIcon icon={HeartAddIcon} />
+  </Button>
+{/if}

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

@@ -1,20 +1,20 @@
-<script lang="ts">
-    import * as StarRating from "../../../ui/star-rating";
-
-    type Props = {
-        startNumber: number;
-        startMax: number;
-    };
-
-    let { startNumber, startMax }: Props = $props();
-</script>
-
-{#if startNumber}
-    <StarRating.Root max={startMax} value={startNumber} class="size-15 h-auto">
-        {#snippet children({ items })}
-            {#each items as item (item.index)}
-                <StarRating.Star {...item} class="py-0! my-0!" />
-            {/each}
-        {/snippet}
-    </StarRating.Root>
-{/if}
+<script lang="ts">
+    import * as StarRating from "../../../ui/star-rating";
+
+    type Props = {
+        startNumber: number;
+        startMax: number;
+    };
+
+    let { startNumber, startMax }: Props = $props();
+</script>
+
+{#if startNumber}
+    <StarRating.Root max={startMax} value={startNumber} class="size-15 h-auto">
+        {#snippet children({ items })}
+            {#each items as item (item.index)}
+                <StarRating.Star {...item} class="py-0! my-0!" />
+            {/each}
+        {/snippet}
+    </StarRating.Root>
+{/if}