negodesign 0.0.27 → 0.0.29

package/dist/components/core/card/profile/02/CardProfile02.svelte

@@ -1,98 +1,114 @@
 <script lang="ts">
-    /**
-     * Card component with a title and content.
-     * @component
-     */
-    import {
-        InformationCircleIcon,
-        UserIcon,
-    } from "@hugeicons/core-free-icons";
-    import { t } from "../../../../../i18n";
-    import type { CardProfileProps } from "../../types";
-    import CardStarRating from "../../shared/CardStarRating.svelte";
-    import CardTags from "../../shared/CardTags.svelte";
-    import CardDescription from "../../shared/CardDescription.svelte";
-    import CardButton from "../../shared/CardButton.svelte";
-    import CardFavorite from "../../shared/CardFavorite.svelte";
-    let {
-        id,
-        tags,
-        logo,
-        title,
-        content,
-        className,
-        startNumber,
-        startMax = 5,
-        isTagBorderBottom = true,
-        isFavorite = false,
-        buttonProfileClass,
-        buttonDetailsClass,
-        onFavoriteClick,
-        onButtonProfile,
-        onButtonDetails,
-    }: CardProfileProps = $props();
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import { InformationCircleIcon, UserIcon } from "@hugeicons/core-free-icons";
+  import { t } from "../../../../../i18n";
+  import type { CardProfileProps } from "../../types";
+  import CardStarRating from "../../shared/CardStarRating.svelte";
+  import CardTags from "../../shared/CardTags.svelte";
+  import CardDescription from "../../shared/CardDescription.svelte";
+  import CardButton from "../../shared/CardButton.svelte";
+  import CardFavorite from "../../shared/CardFavorite.svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  let {
+    id,
+    tags,
+    logo,
+    title,
+    content,
+    className,
+    startNumber,
+    startMax = 5,
+    isTagBorderBottom = true,
+    isFavorite = false,
+    buttonProfileClass,
+    buttonDetailsClass,
+    isLoading = false,
+    onFavoriteClick,
+    onButtonProfile,
+    onButtonDetails,
+  }: CardProfileProps = $props();
 
-    let isShowButtonProfileAndDetails = $derived(
-        onButtonProfile != null && onButtonDetails != null,
-    );
+  let isShowButtonProfileAndDetails = $derived(
+    onButtonProfile != null && onButtonDetails != null,
+  );
 </script>
 
 <article
-    class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3 {className}"
+  class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3 {className}"
 >
-    <div class="flex flex-col justify-center items-center w-full relative">
-        <div class="flex flex-col justify-start gap-2">
-            <div class="flex justify-center items-center">
-                {#if logo}
-                    <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
-                {/if}
-            </div>
-            <div class="flex flex-col justify-center items-center">
-                {#if title}
-                    <div class="text-center font-bold text-lg">{title}</div>
-                {/if}
-                {#if startNumber}
-                    <CardStarRating {startNumber} {startMax} />
-                {/if}
-            </div>
-        </div>
-        <div class="flex justify-end items-center absolute top-0 right-0">
-            <CardFavorite
-                {id}
-                {isFavorite}
-                onFavoriteClick={() => onFavoriteClick!(id)}
-            />
-        </div>
-    </div>
+  <div class="flex flex-col justify-center items-center w-full relative">
+    <div class="flex flex-col justify-start gap-2">
+      <div class="flex justify-center items-center">
+        {#if isLoading}
+          <Skeleton class="w-12 h-12 rounded-lg bg-gray-400 mt-0.5" />
+        {:else if logo}
+          <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
+        {/if}
+      </div>
+      <div class="flex flex-col justify-center items-center">
+        {#if title}
+          <div class="text-center font-bold text-lg">{title}</div>
+        {:else if isLoading}
+          <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+        {/if}
 
-    <div class="h-15 mb-8">
-        <CardDescription {content} />
+        {#if startNumber}
+          <CardStarRating {startNumber} {startMax} {isLoading} />
+        {:else if isLoading}
+          <Skeleton class="w-20 h-4 rounded-lg bg-gray-300 mt-0.5" />
+        {/if}
+      </div>
+    </div>
+    <div class="flex justify-end items-center absolute top-0 right-0">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        onFavoriteClick={() => onFavoriteClick!(id)}
+        {isLoading}
+      />
     </div>
+  </div>
 
-    <CardTags className="my-4" tags={tags ?? []} {isTagBorderBottom} />
+  <div class="h-15 mb-8">
+    <CardDescription {content} {isLoading} />
+  </div>
 
-    {#if onButtonProfile || onButtonDetails}
-        <div class="flex justify-center items-center gap-2 mt-4 w-full">
-            {#if onButtonProfile}
-                <CardButton
-                    {id}
-                    icon={UserIcon}
-                    className={buttonProfileClass}
-                    text={$t("label.view.profile")}
-                    onClick={onButtonProfile}
-                    isFlex={isShowButtonProfileAndDetails}
-                />
-            {/if}
-            {#if onButtonDetails}
-                <CardButton
-                    {id}
-                    icon={InformationCircleIcon}
-                    className={buttonDetailsClass}
-                    text={$t("label.more.details")}
-                    onClick={onButtonDetails}
-                    isFlex={isShowButtonProfileAndDetails}
-                />
-            {/if}
-        </div>
-    {/if}
+  <CardTags
+    className="my-4"
+    tags={tags ?? []}
+    {isTagBorderBottom}
+    {isLoading}
+  />
+
+  {#if onButtonProfile || onButtonDetails}
+    <div class="flex justify-center items-center gap-2 mt-4 w-full">
+      {#if onButtonProfile}
+        <CardButton
+          {id}
+          icon={UserIcon}
+          className={buttonProfileClass}
+          text={$t("label.view.profile")}
+          onClick={onButtonProfile}
+          isFlex={isShowButtonProfileAndDetails}
+        />
+      {:else if isLoading}
+        <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+      {/if}
+      {#if onButtonDetails}
+        <CardButton
+          {id}
+          icon={InformationCircleIcon}
+          className={buttonDetailsClass}
+          text={$t("label.more.details")}
+          onClick={onButtonDetails}
+          isFlex={isShowButtonProfileAndDetails}
+        />
+      {:else if isLoading}
+        <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+      {/if}
+    </div>
+  {/if}
 </article>

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

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

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

@@ -1,6 +1,7 @@
 import type { CardProfileProps } from "../types";
 type Props = {
     variant?: 1 | 2;
+    isLoading?: boolean;
 };
 type $$ComponentProps = CardProfileProps & Props;
 declare const CardProfile: import("svelte").Component<$$ComponentProps, {}, "">;

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

@@ -7,6 +7,9 @@
   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
@@ -40,7 +43,23 @@
       {#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" />
+        <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>
 
@@ -56,13 +75,15 @@
 
     {#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"
+        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-25 lg:h-45 w-full object-cover object-center"
+        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>
@@ -87,9 +108,11 @@
       <CardDescription {content} {isDescriptionIcon} {isDescriptionLabel} />
     </div>
 
-    <div class="w-full mb-3">
-      <CardTags {tags} />
-    </div>
+    {#if tags && tags.length > 0}
+      <div class="w-full mb-2">
+        <CardTags {tags} />
+      </div>
+    {/if}
 
     <div class="flex justify-start gap-2 w-full">
       {#if isLoading}
@@ -104,7 +127,7 @@
     {#if isLoading}
       <Skeleton class="h-9 w-full rounded-md" />
     {:else}
-      <Button onclick={() => onClickBuy!(id)} class="w-full">
+      <Button onclick={() => onClickBuy!(id)} class="w-full bottom-0">
         {buttonBuyText || $t("label.buy")}
       </Button>
     {/if}

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

@@ -1,30 +1,39 @@
 <script lang="ts">
-    import { Button } from "../../../ui/button/index.js";
-    import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
+  import { Button } from "../../../ui/button/index.js";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  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;
-    };
+  type CardButtonProps = {
+    id: string | number;
+    icon: IconSvgElement;
+    isFlex?: boolean;
+    className?: string;
+    text: string;
+    isLoading?: boolean;
+    onClick: (id: string | number) => void;
+  };
 
-    let { 
-        id, 
-        icon, 
-        isFlex, 
-        className, 
-        text, 
-        onClick 
-    }: CardButtonProps = $props();
+  let {
+    id,
+    icon,
+    isFlex,
+    className,
+    text,
+    isLoading,
+    onClick,
+  }: CardButtonProps = $props();
 </script>
 
-<Button
+{#if isLoading}
+  <Skeleton
+    class="w-full h-7.5 rounded-lg bg-gray-500/80 dark:bg-gray-500/30"
+  />
+{:else}
+  <Button
     class="{isFlex ? 'flex-1' : ''} {className}"
     onclick={() => onClick(id)}
->
+  >
     <HugeiconsIcon {icon} />
     <span>{text}</span>
-</Button>
+  </Button>
+{/if}

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

@@ -5,6 +5,7 @@ type CardButtonProps = {
     isFlex?: boolean;
     className?: string;
     text: string;
+    isLoading?: boolean;
     onClick: (id: string | number) => void;
 };
 declare const CardButton: import("svelte").Component<CardButtonProps, {}, "">;

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";
+  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;
-    };
+  type CardDescriptionProps = {
+    content?: string;
+    isLoading?: boolean;
+    isDescriptionIcon?: boolean;
+    isDescriptionLabel?: boolean;
+  };
 
-    let {
-        content,
-        isLoading = false,
-        isDescriptionIcon = true,
-        isDescriptionLabel = true,
-    }: CardDescriptionProps = $props();
+  let {
+    content,
+    isLoading = false,
+    isDescriptionIcon = true,
+    isDescriptionLabel = true,
+  }: CardDescriptionProps = $props();
 </script>
 
 {#if isLoading}
-    <Skeleton class="w-full h-5" />
+  <Skeleton class="w-full h-full bg-gray-500/89" />
 {: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 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}11
+      <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/CardStarRating.svelte

@@ -1,20 +1,24 @@
 <script lang="ts">
-    import * as StarRating from "../../../ui/star-rating";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import * as StarRating from "../../../ui/star-rating";
 
-    type Props = {
-        startNumber: number;
-        startMax: number;
-    };
+  type Props = {
+    startNumber: number;
+    startMax: number;
+    isLoading?: boolean;
+  };
 
-    let { startNumber, startMax }: Props = $props();
+  let { startNumber, startMax, isLoading }: 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 isLoading}
+  <Skeleton class="w-12 h-6 rounded-lg bg-gray-300/90" />
+{:else 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}

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

@@ -1,6 +1,7 @@
 type Props = {
     startNumber: number;
     startMax: number;
+    isLoading?: boolean;
 };
 declare const CardStarRating: import("svelte").Component<Props, {}, "">;
 type CardStarRating = ReturnType<typeof CardStarRating>;

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

@@ -1,34 +1,32 @@
 <script lang="ts">
-    import StartBg from "../../../../assets/start.png";
+  import StartBg from "../../../../assets/start.png";
 
-    type Props = {
-        newPrice?: string | number;
-        oldPrice?: string | number;
-        type?: "start" | "normal";
-    };
+  type Props = {
+    newPrice?: string | number;
+    oldPrice?: string | number;
+    type?: "start" | "normal";
+  };
 
-    let { newPrice, oldPrice, type = "normal" }: Props = $props();
+  let { newPrice, oldPrice, type = "normal" }: Props = $props();
 </script>
 
-<div class="relative min-w-25 md:min-w-32">
-    {#if type == "start"}
-        <img
-            src={StartBg}
-            alt=""
-            class="shadow rounded-tl-lg rounded-bl-lg md:w-20 md:h-20 lg:w-32 lg:h-24 absolute"
-        />
-    {/if}
-    {#if newPrice && oldPrice}
-        <div class="z-20 flex justify-center items-center">
-            <div class="font-extrabold md:text-3xl lg:text-4xl">{newPrice}</div>
-            <div class="mx-2">/</div>
-            <div
-                class="font-semibold line-through text-red-600 text-[10px] md:text-xl"
-            >
-                {oldPrice}
-            </div>
-        </div>
-    {:else}
-        <div class="z-20 font-bold">{newPrice}</div>
-    {/if}
+<div class="relative min-w-25 md:min-w-32 ml-0 pl-0">
+  {#if type == "start"}
+    <img
+      src={StartBg}
+      alt=""
+      class="shadow rounded-tl-lg rounded-bl-lg md:w-20 md:h-20 lg:w-32 lg:h-24 absolute"
+    />
+  {/if}
+  {#if newPrice && oldPrice}
+    <div class="z-20 flex justify-center items-center">
+      <div class="font-extrabold text-lg">{newPrice}</div>
+      <div class="mx-2">/</div>
+      <div class="font-semibold line-through text-red-600 text-[10px]">
+        {oldPrice}
+      </div>
+    </div>
+  {:else}
+    <div class="z-20 font-bold">{newPrice}</div>
+  {/if}
 </div>