negodesign 0.0.43 → 0.0.45
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.
- package/dist/components/pages/product-details/01/ProductDetails01.svelte +6 -2
- package/dist/components/pages/product-details/01/ProductDetails01.svelte.d.ts +3 -1
- package/dist/components/pages/product-details/02/ProductDetails02.svelte +7 -1
- package/dist/components/pages/product-details/02/ProductDetails02.svelte.d.ts +3 -1
- package/dist/components/pages/product-details/03/ProductDetails03.svelte +6 -2
- package/dist/components/pages/product-details/03/ProductDetails03.svelte.d.ts +3 -1
- package/dist/components/pages/product-details/ProductDetails.svelte +31 -5
- package/dist/components/pages/product-details/shared/ProductPromotionDetails.svelte +29 -0
- package/dist/components/pages/product-details/shared/ProductPromotionDetails.svelte.d.ts +8 -0
- package/dist/components/pages/product-details/shared/ProductPurchasePanel.svelte +16 -7
- package/dist/components/pages/product-details/shared/ProductPurchasePanel.svelte.d.ts +3 -1
- package/dist/components/pages/product-details/types.d.ts +16 -0
- package/dist/types/index.d.ts +4 -1
- package/dist/types/index.js +1 -1
- package/package.json +1 -1
|
@@ -20,17 +20,21 @@
|
|
|
20
20
|
import ProductDetailReviews from "../shared/ProductDetailReviews.svelte";
|
|
21
21
|
import ProductDetailTags from "../shared/ProductDetailTags.svelte";
|
|
22
22
|
import ProductPurchasePanel from "../shared/ProductPurchasePanel.svelte";
|
|
23
|
-
import type { ProductDetailsData } from "../types";
|
|
23
|
+
import type { ProductDetailsData, ProductPromotionDetails } from "../types";
|
|
24
24
|
|
|
25
25
|
let {
|
|
26
26
|
data,
|
|
27
27
|
isLoading = false,
|
|
28
|
+
promotions = [],
|
|
29
|
+
showPriceWithPromotions = false,
|
|
28
30
|
onBuy,
|
|
29
31
|
onFavorite,
|
|
30
32
|
onCart,
|
|
31
33
|
}: {
|
|
32
34
|
data: ProductDetailsData;
|
|
33
35
|
isLoading?: boolean;
|
|
36
|
+
promotions?: ProductPromotionDetails[];
|
|
37
|
+
showPriceWithPromotions?: boolean;
|
|
34
38
|
onBuy?: (id: string | number) => void;
|
|
35
39
|
onFavorite?: (id: string | number) => void;
|
|
36
40
|
onCart?: (id: string | number) => void;
|
|
@@ -64,7 +68,7 @@
|
|
|
64
68
|
<ProductDetailFeatures features={data.features} {isLoading} />
|
|
65
69
|
{/if}
|
|
66
70
|
|
|
67
|
-
<ProductPurchasePanel {data} {isLoading} {onBuy} {onFavorite} {onCart} />
|
|
71
|
+
<ProductPurchasePanel {data} {isLoading} {promotions} {showPriceWithPromotions} {onBuy} {onFavorite} {onCart} />
|
|
68
72
|
</div>
|
|
69
73
|
</div>
|
|
70
74
|
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import type { ProductDetailsData } from "../types";
|
|
1
|
+
import type { ProductDetailsData, ProductPromotionDetails } from "../types";
|
|
2
2
|
type $$ComponentProps = {
|
|
3
3
|
data: ProductDetailsData;
|
|
4
4
|
isLoading?: boolean;
|
|
5
|
+
promotions?: ProductPromotionDetails[];
|
|
6
|
+
showPriceWithPromotions?: boolean;
|
|
5
7
|
onBuy?: (id: string | number) => void;
|
|
6
8
|
onFavorite?: (id: string | number) => void;
|
|
7
9
|
onCart?: (id: string | number) => void;
|
|
@@ -20,17 +20,21 @@
|
|
|
20
20
|
import ProductDetailReviews from "../shared/ProductDetailReviews.svelte";
|
|
21
21
|
import ProductDetailTags from "../shared/ProductDetailTags.svelte";
|
|
22
22
|
import ProductPurchasePanel from "../shared/ProductPurchasePanel.svelte";
|
|
23
|
-
import type { ProductDetailsData } from "../types";
|
|
23
|
+
import type { ProductDetailsData, ProductPromotionDetails } from "../types";
|
|
24
24
|
|
|
25
25
|
let {
|
|
26
26
|
data,
|
|
27
27
|
isLoading = false,
|
|
28
|
+
promotions = [],
|
|
29
|
+
showPriceWithPromotions = false,
|
|
28
30
|
onBuy,
|
|
29
31
|
onFavorite,
|
|
30
32
|
onCart,
|
|
31
33
|
}: {
|
|
32
34
|
data: ProductDetailsData;
|
|
33
35
|
isLoading?: boolean;
|
|
36
|
+
promotions?: ProductPromotionDetails[];
|
|
37
|
+
showPriceWithPromotions?: boolean;
|
|
34
38
|
onBuy?: (id: string | number) => void;
|
|
35
39
|
onFavorite?: (id: string | number) => void;
|
|
36
40
|
onCart?: (id: string | number) => void;
|
|
@@ -72,6 +76,8 @@
|
|
|
72
76
|
<ProductPurchasePanel
|
|
73
77
|
{data}
|
|
74
78
|
{isLoading}
|
|
79
|
+
{promotions}
|
|
80
|
+
{showPriceWithPromotions}
|
|
75
81
|
{onBuy}
|
|
76
82
|
{onFavorite}
|
|
77
83
|
{onCart}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import type { ProductDetailsData } from "../types";
|
|
1
|
+
import type { ProductDetailsData, ProductPromotionDetails } from "../types";
|
|
2
2
|
type $$ComponentProps = {
|
|
3
3
|
data: ProductDetailsData;
|
|
4
4
|
isLoading?: boolean;
|
|
5
|
+
promotions?: ProductPromotionDetails[];
|
|
6
|
+
showPriceWithPromotions?: boolean;
|
|
5
7
|
onBuy?: (id: string | number) => void;
|
|
6
8
|
onFavorite?: (id: string | number) => void;
|
|
7
9
|
onCart?: (id: string | number) => void;
|
|
@@ -19,18 +19,22 @@
|
|
|
19
19
|
import ProductDetailTags from "../shared/ProductDetailTags.svelte";
|
|
20
20
|
import ProductDetailTabs from "../shared/ProductDetailTabs.svelte";
|
|
21
21
|
import ProductPurchasePanel from "../shared/ProductPurchasePanel.svelte";
|
|
22
|
-
import type { ProductDetailsData } from "../types";
|
|
22
|
+
import type { ProductDetailsData, ProductPromotionDetails } from "../types";
|
|
23
23
|
import { useDevice } from "../../../../hooks/responsive.svelte";
|
|
24
24
|
|
|
25
25
|
let {
|
|
26
26
|
data,
|
|
27
27
|
isLoading = false,
|
|
28
|
+
promotions = [],
|
|
29
|
+
showPriceWithPromotions = false,
|
|
28
30
|
onBuy,
|
|
29
31
|
onFavorite,
|
|
30
32
|
onCart,
|
|
31
33
|
}: {
|
|
32
34
|
data: ProductDetailsData;
|
|
33
35
|
isLoading?: boolean;
|
|
36
|
+
promotions?: ProductPromotionDetails[];
|
|
37
|
+
showPriceWithPromotions?: boolean;
|
|
34
38
|
onBuy?: (id: string | number) => void;
|
|
35
39
|
onFavorite?: (id: string | number) => void;
|
|
36
40
|
onCart?: (id: string | number) => void;
|
|
@@ -55,7 +59,7 @@
|
|
|
55
59
|
|
|
56
60
|
<ProductDetailTags tags={data.tags} {isLoading} />
|
|
57
61
|
|
|
58
|
-
<ProductPurchasePanel {data} {isLoading} {onBuy} {onFavorite} {onCart} />
|
|
62
|
+
<ProductPurchasePanel {data} {isLoading} {promotions} {showPriceWithPromotions} {onBuy} {onFavorite} {onCart} />
|
|
59
63
|
|
|
60
64
|
{#if !responsive.isMobile}
|
|
61
65
|
{#if data.location}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import type { ProductDetailsData } from "../types";
|
|
1
|
+
import type { ProductDetailsData, ProductPromotionDetails } from "../types";
|
|
2
2
|
type $$ComponentProps = {
|
|
3
3
|
data: ProductDetailsData;
|
|
4
4
|
isLoading?: boolean;
|
|
5
|
+
promotions?: ProductPromotionDetails[];
|
|
6
|
+
showPriceWithPromotions?: boolean;
|
|
5
7
|
onBuy?: (id: string | number) => void;
|
|
6
8
|
onFavorite?: (id: string | number) => void;
|
|
7
9
|
onCart?: (id: string | number) => void;
|
|
@@ -20,13 +20,15 @@
|
|
|
20
20
|
<script lang="ts">
|
|
21
21
|
import type { ProductDetailsProps } from "./types";
|
|
22
22
|
import ProductDetails01 from "./01/ProductDetails01.svelte";
|
|
23
|
-
import
|
|
24
|
-
import
|
|
23
|
+
import ProductDetails02 from "./02/ProductDetails02.svelte";
|
|
24
|
+
import ProductDetails03 from "./03/ProductDetails03.svelte";
|
|
25
25
|
|
|
26
26
|
let {
|
|
27
27
|
varient = 1,
|
|
28
28
|
data,
|
|
29
29
|
isLoading = false,
|
|
30
|
+
promotions = [],
|
|
31
|
+
showPriceWithPromotions = false,
|
|
30
32
|
onBuy,
|
|
31
33
|
onFavorite,
|
|
32
34
|
onCart,
|
|
@@ -34,9 +36,33 @@
|
|
|
34
36
|
</script>
|
|
35
37
|
|
|
36
38
|
{#if varient === 2}
|
|
37
|
-
<
|
|
39
|
+
<ProductDetails02
|
|
40
|
+
{data}
|
|
41
|
+
{isLoading}
|
|
42
|
+
{promotions}
|
|
43
|
+
{showPriceWithPromotions}
|
|
44
|
+
{onBuy}
|
|
45
|
+
{onFavorite}
|
|
46
|
+
{onCart}
|
|
47
|
+
/>
|
|
38
48
|
{:else if varient === 3}
|
|
39
|
-
<
|
|
49
|
+
<ProductDetails03
|
|
50
|
+
{data}
|
|
51
|
+
{isLoading}
|
|
52
|
+
{promotions}
|
|
53
|
+
{showPriceWithPromotions}
|
|
54
|
+
{onBuy}
|
|
55
|
+
{onFavorite}
|
|
56
|
+
{onCart}
|
|
57
|
+
/>
|
|
40
58
|
{:else}
|
|
41
|
-
<ProductDetails01
|
|
59
|
+
<ProductDetails01
|
|
60
|
+
{data}
|
|
61
|
+
{isLoading}
|
|
62
|
+
{promotions}
|
|
63
|
+
{showPriceWithPromotions}
|
|
64
|
+
{onBuy}
|
|
65
|
+
{onFavorite}
|
|
66
|
+
{onCart}
|
|
67
|
+
/>
|
|
42
68
|
{/if}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import CardPromotionPrice from "../../../core/card/promotion/CardPromotionPrice.svelte";
|
|
3
|
+
import Skeleton from "../../../ui/skeleton/skeleton.svelte";
|
|
4
|
+
import type { ProductPromotionDetails } from "../types";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
promotions = [],
|
|
8
|
+
isLoading = false,
|
|
9
|
+
}: {
|
|
10
|
+
promotions?: ProductPromotionDetails[];
|
|
11
|
+
isLoading?: boolean;
|
|
12
|
+
} = $props();
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
{#if isLoading}
|
|
16
|
+
<div class="flex flex-col gap-2">
|
|
17
|
+
<Skeleton class="h-5 w-36 rounded-md" />
|
|
18
|
+
<Skeleton class="h-5 w-28 rounded-md" />
|
|
19
|
+
</div>
|
|
20
|
+
{:else if promotions.length > 0}
|
|
21
|
+
<div class="flex flex-col gap-2">
|
|
22
|
+
<span class="text-sm font-medium text-muted-foreground">Promoções</span>
|
|
23
|
+
{#each promotions as promo (promo.id)}
|
|
24
|
+
<div class="flex items-center gap-2">
|
|
25
|
+
<CardPromotionPrice newPrice={promo.newPrice} oldPrice={promo.oldPrice} />
|
|
26
|
+
</div>
|
|
27
|
+
{/each}
|
|
28
|
+
</div>
|
|
29
|
+
{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ProductPromotionDetails } from "../types";
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
promotions?: ProductPromotionDetails[];
|
|
4
|
+
isLoading?: boolean;
|
|
5
|
+
};
|
|
6
|
+
declare const ProductPromotionDetails: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
7
|
+
type ProductPromotionDetails = ReturnType<typeof ProductPromotionDetails>;
|
|
8
|
+
export default ProductPromotionDetails;
|
|
@@ -14,17 +14,22 @@
|
|
|
14
14
|
import ProductDetailActions from "./ProductDetailActions.svelte";
|
|
15
15
|
import ProductDetailPrice from "./ProductDetailPrice.svelte";
|
|
16
16
|
import ProductDetailRating from "./ProductDetailRating.svelte";
|
|
17
|
-
import
|
|
17
|
+
import ProductPromotionDetails from "./ProductPromotionDetails.svelte";
|
|
18
|
+
import type { ProductDetailsData, ProductPromotionDetails as ProductPromotionDetailsType } from "../types";
|
|
18
19
|
|
|
19
20
|
let {
|
|
20
21
|
data,
|
|
21
22
|
isLoading = false,
|
|
23
|
+
promotions = [],
|
|
24
|
+
showPriceWithPromotions = false,
|
|
22
25
|
onBuy,
|
|
23
26
|
onFavorite,
|
|
24
27
|
onCart,
|
|
25
28
|
}: {
|
|
26
29
|
data: ProductDetailsData;
|
|
27
30
|
isLoading?: boolean;
|
|
31
|
+
promotions?: ProductPromotionDetailsType[];
|
|
32
|
+
showPriceWithPromotions?: boolean;
|
|
28
33
|
onBuy?: (id: string | number) => void;
|
|
29
34
|
onFavorite?: (id: string | number) => void;
|
|
30
35
|
onCart?: (id: string | number) => void;
|
|
@@ -38,12 +43,16 @@
|
|
|
38
43
|
{isLoading}
|
|
39
44
|
/>
|
|
40
45
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
46
|
+
{#if !(showPriceWithPromotions && promotions.length > 0)}
|
|
47
|
+
<ProductDetailPrice
|
|
48
|
+
newPrice={data.newPrice}
|
|
49
|
+
oldPrice={data.oldPrice}
|
|
50
|
+
currency={data.currency}
|
|
51
|
+
{isLoading}
|
|
52
|
+
/>
|
|
53
|
+
{/if}
|
|
54
|
+
|
|
55
|
+
<ProductPromotionDetails {promotions} {isLoading} />
|
|
47
56
|
|
|
48
57
|
<ProductDetailActions
|
|
49
58
|
id={data.id}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import type { ProductDetailsData } from "../types";
|
|
1
|
+
import type { ProductDetailsData, ProductPromotionDetails as ProductPromotionDetailsType } from "../types";
|
|
2
2
|
type $$ComponentProps = {
|
|
3
3
|
data: ProductDetailsData;
|
|
4
4
|
isLoading?: boolean;
|
|
5
|
+
promotions?: ProductPromotionDetailsType[];
|
|
6
|
+
showPriceWithPromotions?: boolean;
|
|
5
7
|
onBuy?: (id: string | number) => void;
|
|
6
8
|
onFavorite?: (id: string | number) => void;
|
|
7
9
|
onCart?: (id: string | number) => void;
|
|
@@ -141,6 +141,11 @@ export interface ProductDetailsData {
|
|
|
141
141
|
* Propriedades do componente principal ProductDetails.
|
|
142
142
|
* Suporta quatro variantes de layout e callbacks de interação.
|
|
143
143
|
*/
|
|
144
|
+
export interface ProductPromotionDetails {
|
|
145
|
+
id: string | number;
|
|
146
|
+
newPrice: string | number;
|
|
147
|
+
oldPrice: string | number;
|
|
148
|
+
}
|
|
144
149
|
export interface ProductDetailsProps {
|
|
145
150
|
/**
|
|
146
151
|
* Variante do layout da página de detalhes.
|
|
@@ -159,6 +164,17 @@ export interface ProductDetailsProps {
|
|
|
159
164
|
* @default false
|
|
160
165
|
*/
|
|
161
166
|
isLoading?: boolean;
|
|
167
|
+
/**
|
|
168
|
+
* Lista de promoções associadas ao produto.
|
|
169
|
+
* Cada promoção contém um preço antigo e novo.
|
|
170
|
+
*/
|
|
171
|
+
promotions?: ProductPromotionDetails[];
|
|
172
|
+
/**
|
|
173
|
+
* Quando true, oculta o preço regular do produto
|
|
174
|
+
* e apresenta apenas os preços das promoções.
|
|
175
|
+
* @default false
|
|
176
|
+
*/
|
|
177
|
+
showPriceWithPromotions?: boolean;
|
|
162
178
|
/**
|
|
163
179
|
* Callback executado quando o utilizador clica no botão de compra.
|
|
164
180
|
* Recebe o id do produto como argumento.
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import NotFoundEmpty from "../components/core/panel/NotFoundEmpty.svelte";
|
|
1
2
|
import type { LoginVariant, LoginRequestDto, LinkProps, PageLoginProps } from "../components/pages/security/login/types";
|
|
2
3
|
import type { ForgetPasswordVariant, ForgetPasswordRequestDto, PageForgetPasswordProps } from "../components/pages/security/forget-password/types";
|
|
3
4
|
import type { ResetPasswordRequestDto, PageResetPasswordProps } from "../components/pages/security/reset-password/types";
|
|
@@ -22,12 +23,14 @@ import type { DataTableItem, DataTableCoreProps } from "../components/core/datat
|
|
|
22
23
|
import type { AdminPanelProps, AdminContentProps } from "../components/pages/admin/01/ui/types";
|
|
23
24
|
import type { ProfileUserProps, ProfileUserData, ProfileUserVariant, ProfileUserAddress, ProfileUserNote, ProfileUserNotificationPref, ProfileUserMarketingPref, ProfileUserExperience } from "../components/pages/profile-user/types";
|
|
24
25
|
import type { ProductDetailsProps, ProductDetailsData, ProductDetailsBreadcrumbItem, ProductDetailsTag, ProductDetailsImage, ProductDetailsLocation, ProductDetailsReview, ProductDetailsTab } from "../components/pages/product-details/types";
|
|
25
|
-
import type { PrivacyPolicyOrTermsOfUseProps,
|
|
26
|
+
import type { PrivacyPolicyOrTermsOfUseProps, DocSection, ContentBlock, BreadcrumbItem, TocItem } from "../components/pages/privacy-policy-or-terms-of-use/types";
|
|
26
27
|
import type { InputLabelProps } from "../components/core/form/data/InputLabel.svelte";
|
|
27
28
|
import type { NegoDesignProps } from "../components/types";
|
|
28
29
|
import type { CarouselGridPromotionProps } from "../components/core/carousel/grid/promotion/types";
|
|
29
30
|
import type { CarouselGridProductProps } from "../components/core/carousel/grid/product/types";
|
|
30
31
|
export type {
|
|
32
|
+
/** @see NotFoundEmpty */
|
|
33
|
+
NotFoundEmpty,
|
|
31
34
|
/** Props de um link individual no menu de navegação. @see NavMenuLinksProps */
|
|
32
35
|
NavMenuLinksProps,
|
|
33
36
|
/** Props do logotipo no NavMenu. @see NavMenuLogoProps */
|
package/dist/types/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
import NotFoundEmpty from "../components/core/panel/NotFoundEmpty.svelte";
|