negodesign 0.0.26 → 0.0.28

package/dist/components/core/card/highlight/02/CardHighlight02.svelte

@@ -1,93 +1,108 @@
-<script lang="ts">
-  import Button from "../../../../ui/button/button.svelte";
-  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
-  import { t } from "../../../../../i18n";
-  import CardDescription from "../../shared/CardDescription.svelte";
-  import CardFavorite from "../../shared/CardFavorite.svelte";
-  import CardTags from "../../shared/CardTags.svelte";
-  /**
-   * Card component with a title and content.
-   * @component
-   */
-  import type { CardHighlightProps } from "../../types";
-
-  let {
-    id,
-    logo,
-    tags,
-    title,
-    content,
-    imageUrl,
-    isLoading = false,
-    isFavorite = false,
-    isDescriptionIcon,
-    isDescriptionLabel,
-    buttonText,
-    onClickBtn,
-    onClickFavorite,
-  }: CardHighlightProps = $props();
-</script>
-
-<article
-  class="flex flex-col gap-1 bg-white dark:bg-background p-3 rounded-lg shadow border"
->
-  <aside class="relative rounded-lg border h-50">
-    <div class="left-1 z-2 flex gap-1 w-50">
-      {#if isLoading}
-        <Skeleton class="w-hull h-full rounded-lg" />
-      {:else if logo}
-        <img src={logo} alt={title} class="rounded-lg" />
-      {/if}
-    </div>
-
-    <div class="absolute top-3 right-1">
-      <CardFavorite
-        {id}
-        {isFavorite}
-        {isLoading}
-        onFavoriteClick={() => onClickFavorite?.(id)}
-      />
-    </div>
-
-    {#if isLoading}
-      <Skeleton class="rounded-lg w-full h-full object-cover object-center" />
-    {:else if imageUrl}
-      <img
-        src={imageUrl}
-        alt={imageUrl}
-        class="rounded-lg w-full h-full object-cover object-center"
-      />
-    {/if}
-    <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
-  </aside>
-  <div class="px-2">
-    <div class="rounded-md">
-      {#if isLoading}
-        <Skeleton class="h-4 w-30 rounded-lg" />
-      {:else if title}
-        <div class="font-semibold my-2">{title}</div>
-      {/if}
-    </div>
-
-    <div class="w-75 my-2">
-      <CardDescription
-        {content}
-        {isLoading}
-        {isDescriptionIcon}
-        {isDescriptionLabel}
-      />
-    </div>
-
-    <div class="my-2">
-      <CardTags {tags} {isLoading} />
-    </div>
-
-    {#if isLoading}
-      <Skeleton class="h-10 w-full rounded-md mt-2 md:mt-3" />
-    {:else}
-      <Button onclick={() => onClickBtn!(id)} class="mt-2 md:mt-3 md:min-w-32">
-        {buttonText || $t("label.buy")}
-      </Button>
-    {/if}
-  </div>
-</article>
+<script lang="ts">
+  import Button from "../../../../ui/button/button.svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import { t } from "../../../../../i18n";
+  import CardDescription from "../../shared/CardDescription.svelte";
+  import CardFavorite from "../../shared/CardFavorite.svelte";
+  import CardTags from "../../shared/CardTags.svelte";
+  import ImgPlaceholderCompany from "../../../../../assets/placeholder-company.png";
+  import ImgPlaceholder from "../../../../../assets/placeholder-image.png";
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardHighlightProps } from "../../types";
+
+  let {
+    id,
+    logo,
+    tags,
+    title,
+    content,
+    imageUrl,
+    isLoading = false,
+    isFavorite = false,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    buttonText,
+    onClickBtn,
+    onClickFavorite,
+  }: CardHighlightProps = $props();
+</script>
+
+<article
+  class="flex flex-col gap-1 bg-white dark:bg-background p-3 rounded-lg shadow border"
+>
+  <aside class="relative rounded-lg border h-36">
+    <div class="absolute top-3 left-1 z-2 flex gap-1">
+      {#if isLoading}
+        <Skeleton class="w-full h-full rounded-lg" />
+      {:else if logo}
+        <img
+          src={logo}
+          alt={logo}
+          class="rounded-lg w-8 h-8 object-cover object-center"
+          onerror={(e) =>
+            ((e.target as HTMLImageElement).src = ImgPlaceholderCompany)}
+        />
+      {:else}
+        <img
+          src={ImgPlaceholderCompany}
+          alt={logo}
+          class="rounded-lg w-8 h-8 object-cover object-center"
+        />
+      {/if}
+    </div>
+
+    <div class="absolute top-3 right-1 z-2">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        {isLoading}
+        onFavoriteClick={() => onClickFavorite?.(id)}
+      />
+    </div>
+
+    {#if isLoading}
+      <Skeleton class="rounded-lg w-full h-full object-cover object-center" />
+    {:else if imageUrl}
+      <img
+        src={imageUrl}
+        alt={imageUrl}
+        class="rounded-lg w-full h-full object-cover object-center"
+        onerror={(e) => ((e.target as HTMLImageElement).src = ImgPlaceholder)}
+      />
+    {/if}
+    <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
+  </aside>
+  <div class="px-2 w-55">
+    <div class="rounded-md">
+      {#if isLoading}
+        <Skeleton class="h-4 w-30 rounded-lg" />
+      {:else if title}
+        <div class="font-semibold my-2">{title}</div>
+      {/if}
+    </div>
+
+    <div class="my-2">
+      <CardDescription
+        {content}
+        {isLoading}
+        {isDescriptionIcon}
+        {isDescriptionLabel}
+      />
+    </div>
+
+    <div class="my-2">
+      <CardTags {tags} {isLoading} />
+    </div>
+
+    {#if isLoading}
+      <Skeleton class="h-10 w-full rounded-md mt-2 md:mt-3" />
+    {:else}
+      <Button onclick={() => onClickBtn!(id)} class="mt-2 md:mt-3 md:min-w-32">
+        {buttonText || $t("label.buy")}
+      </Button>
+    {/if}
+  </div>
+</article>

package/dist/components/core/card/highlight/CardHighlight.svelte

@@ -1,22 +1,22 @@
-<script lang="ts">
-  /**
-   * Card component with a title and content.
-   * @component
-   */
-  import type { CardHighlightProps } from "../types";
-  import CardHighlight01 from "./01/CardHighlight01.svelte";
-  import CardHighlight02 from "./02/CardHighlight02.svelte";
-
-  let {
-    varient = 1,
-    ...restProps
-  }: CardHighlightProps & {
-    varient?: 1 | 2;
-  } = $props();
-</script>
-
-{#if varient == 2}
-  <CardHighlight02 {...restProps} />
-{:else}
-  <CardHighlight01 {...restProps} />
-{/if}
+<script lang="ts">
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardHighlightProps } from "../types";
+  import CardHighlight01 from "./01/CardHighlight01.svelte";
+  import CardHighlight02 from "./02/CardHighlight02.svelte";
+
+  let {
+    varient = 1,
+    ...restProps
+  }: CardHighlightProps & {
+    varient?: 1 | 2;
+  } = $props();
+</script>
+
+{#if varient == 2}
+  <CardHighlight02 {...restProps} />
+{:else}
+  <CardHighlight01 {...restProps} />
+{/if}

package/dist/components/core/card/highlight/data.js

@@ -14,7 +14,8 @@ const items = [
     },
     {
         id: 2,
-        imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        //imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        imageUrl: undefined,
         title: 'Miramar Suites',
         content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum",
         tags: [
@@ -23,6 +24,7 @@ const items = [
             { icon: NecklaceIcon, text: 'Rua 19', },
         ]
     },
+    /*
     {
         id: 3,
         imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
@@ -58,5 +60,6 @@ const items = [
             { icon: NecklaceIcon, text: 'Rua 19', },
         ]
     },
+    */
 ];
 export default items;

package/dist/components/core/card/media/01/CardMedia01.svelte

@@ -1,111 +1,111 @@
-<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 { CardMediaProps } from "../../types";
-    import CardStarRating from "../../shared/CardStarRating.svelte";
-    import CardDescription from "../../shared/CardDescription.svelte";
-    import CardTags from "../../shared/CardTags.svelte";
-    import CardThumbnailVideo from "../../shared/CardThumbnailVideo.svelte";
-    import CardButton from "../../shared/CardButton.svelte";
-    import CardFavorite from "../../shared/CardFavorite.svelte";
-
-    let {
-        id,
-        tags,
-        logo,
-        title,
-        content,
-        imageUrl,
-        videoUrl,
-        //videoAction,
-        startNumber,
-        startMax = 5,
-        isImageButtonMaximized = false,
-        isVideoButtonMaximized = false,
-        isTagBorderBottom = false,
-        isFavorite = false,
-        buttonProfileClass,
-        buttonDetailsClass,
-        onFavoriteClick,
-        onButtonProfile,
-        onButtonDetails,
-    }: CardMediaProps = $props();
-
-    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"
->
-    <div class="flex justify-between items-center w-full mb-4">
-        <div class="flex 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-col">
-                {#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">
-            <CardFavorite
-                {id}
-                {isFavorite}
-                onFavoriteClick={() => onFavoriteClick!(id)}
-            />
-        </div>
-    </div>
-
-    <div class="h-15 my-2">
-        <CardDescription {content} />
-    </div>
-
-    <CardTags className="my-6" tags={tags ?? []} {isTagBorderBottom} />
-
-    <CardThumbnailVideo
-        {imageUrl}
-        {videoUrl}
-        {isImageButtonMaximized}
-        {isVideoButtonMaximized}
-    />
-
-    {#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}
-</article>
+<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 { CardMediaProps } from "../../types";
+    import CardStarRating from "../../shared/CardStarRating.svelte";
+    import CardDescription from "../../shared/CardDescription.svelte";
+    import CardTags from "../../shared/CardTags.svelte";
+    import CardThumbnailVideo from "../../shared/CardThumbnailVideo.svelte";
+    import CardButton from "../../shared/CardButton.svelte";
+    import CardFavorite from "../../shared/CardFavorite.svelte";
+
+    let {
+        id,
+        tags,
+        logo,
+        title,
+        content,
+        imageUrl,
+        videoUrl,
+        //videoAction,
+        startNumber,
+        startMax = 5,
+        isImageButtonMaximized = false,
+        isVideoButtonMaximized = false,
+        isTagBorderBottom = false,
+        isFavorite = false,
+        buttonProfileClass,
+        buttonDetailsClass,
+        onFavoriteClick,
+        onButtonProfile,
+        onButtonDetails,
+    }: CardMediaProps = $props();
+
+    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"
+>
+    <div class="flex justify-between items-center w-full mb-4">
+        <div class="flex 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-col">
+                {#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">
+            <CardFavorite
+                {id}
+                {isFavorite}
+                onFavoriteClick={() => onFavoriteClick!(id)}
+            />
+        </div>
+    </div>
+
+    <div class="h-15 my-2">
+        <CardDescription {content} />
+    </div>
+
+    <CardTags className="my-6" tags={tags ?? []} {isTagBorderBottom} />
+
+    <CardThumbnailVideo
+        {imageUrl}
+        {videoUrl}
+        {isImageButtonMaximized}
+        {isVideoButtonMaximized}
+    />
+
+    {#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}
+</article>