@anker-in/headless-ui 1.1.30 → 1.1.32
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/cjs/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.d.ts +2 -0
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js.map +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -9
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +2 -2
- package/dist/cjs/components/badge.d.ts +5 -2
- package/dist/cjs/components/badge.js +1 -1
- package/dist/cjs/components/badge.js.map +3 -3
- package/dist/cjs/stories/badge.stories.d.ts +66 -1
- package/dist/cjs/stories/badge.stories.js +1 -1
- package/dist/cjs/stories/badge.stories.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.d.ts +2 -0
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js.map +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -9
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +2 -2
- package/dist/esm/components/badge.d.ts +5 -2
- package/dist/esm/components/badge.js +1 -1
- package/dist/esm/components/badge.js.map +3 -3
- package/dist/esm/stories/badge.stories.d.ts +66 -1
- package/dist/esm/stories/badge.stories.js +1 -1
- package/dist/esm/stories/badge.stories.js.map +3 -3
- package/package.json +1 -1
- package/style.css +45 -4
|
@@ -5,6 +5,11 @@ declare const meta: {
|
|
|
5
5
|
component: typeof Badge;
|
|
6
6
|
parameters: {
|
|
7
7
|
layout: string;
|
|
8
|
+
docs: {
|
|
9
|
+
description: {
|
|
10
|
+
component: string;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
8
13
|
};
|
|
9
14
|
tags: string[];
|
|
10
15
|
argTypes: {
|
|
@@ -20,12 +25,72 @@ declare const meta: {
|
|
|
20
25
|
};
|
|
21
26
|
};
|
|
22
27
|
};
|
|
28
|
+
variant: {
|
|
29
|
+
control: {
|
|
30
|
+
type: "select";
|
|
31
|
+
};
|
|
32
|
+
options: string[];
|
|
33
|
+
description: string;
|
|
34
|
+
table: {
|
|
35
|
+
defaultValue: {
|
|
36
|
+
summary: string;
|
|
37
|
+
};
|
|
38
|
+
type: {
|
|
39
|
+
summary: string;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
promotionalType: {
|
|
44
|
+
control: {
|
|
45
|
+
type: "select";
|
|
46
|
+
};
|
|
47
|
+
options: string[];
|
|
48
|
+
description: string;
|
|
49
|
+
table: {
|
|
50
|
+
defaultValue: {
|
|
51
|
+
summary: string;
|
|
52
|
+
};
|
|
53
|
+
type: {
|
|
54
|
+
summary: string;
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
if: {
|
|
58
|
+
arg: string;
|
|
59
|
+
eq: string;
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
children: {
|
|
63
|
+
control: "text";
|
|
64
|
+
description: string;
|
|
65
|
+
table: {
|
|
66
|
+
type: {
|
|
67
|
+
summary: string;
|
|
68
|
+
};
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
className: {
|
|
72
|
+
control: "text";
|
|
73
|
+
description: string;
|
|
74
|
+
table: {
|
|
75
|
+
type: {
|
|
76
|
+
summary: string;
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
};
|
|
23
80
|
};
|
|
24
81
|
args: {
|
|
25
82
|
size: "lg";
|
|
83
|
+
variant: "outline";
|
|
84
|
+
children: string;
|
|
26
85
|
};
|
|
27
86
|
};
|
|
28
87
|
export default meta;
|
|
29
88
|
type Story = StoryObj<typeof meta>;
|
|
30
89
|
export declare const Default: Story;
|
|
31
|
-
export declare const
|
|
90
|
+
export declare const PlaygroundDemo: Story;
|
|
91
|
+
export declare const Variants: Story;
|
|
92
|
+
export declare const Sizes: Story;
|
|
93
|
+
export declare const Promotional: Story;
|
|
94
|
+
export declare const PromotionalExamples: Story;
|
|
95
|
+
export declare const PromotionalTypes: Story;
|
|
96
|
+
export declare const UsageExamples: Story;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var d=(t,e)=>{for(var a in e)r(t,a,{get:e[a],enumerable:!0})},i=(t,e,a,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of y(e))!c.call(t,o)&&o!==a&&r(t,o,{get:()=>e[o],enumerable:!(l=m(e,o))||l.enumerable});return t};var n=t=>i(r({},"__esModule",{value:!0}),t);var B={};d(B,{Default:()=>u,Examples:()=>x,default:()=>f});module.exports=n(B);var p=require("react/jsx-runtime"),s=require("../components/index.js"),b=require("react");const g={title:"Components/Badge",component:s.Badge,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:["sm","lg"],description:"Badge \u5C3A\u5BF8",table:{defaultValue:{summary:"lg"}}}},args:{size:"lg"}};var f=g;const u={args:{children:"New"}},x={render(){return(0,p.jsx)("div",{className:"flex flex-col space-y-4",children:(0,p.jsx)(s.Badge,{children:"New"})})}};
|
|
1
|
+
"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var d=(i,t)=>{for(var r in t)l(i,r,{get:t[r],enumerable:!0})},g=(i,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of n(t))!p.call(i,o)&&o!==r&&l(i,o,{get:()=>t[o],enumerable:!(s=m(t,o))||s.enumerable});return i};var c=i=>g(l({},"__esModule",{value:!0}),i);var w={};d(w,{Default:()=>u,PlaygroundDemo:()=>x,Promotional:()=>B,PromotionalExamples:()=>b,PromotionalTypes:()=>T,Sizes:()=>f,UsageExamples:()=>h,Variants:()=>N,default:()=>y});module.exports=c(w);var e=require("react/jsx-runtime"),a=require("../components/index.js"),z=require("react");const v={title:"Components/Badge",component:a.Badge,parameters:{layout:"centered",docs:{description:{component:"\u5FBD\u7AE0\u7EC4\u4EF6\u7528\u4E8E\u663E\u793A\u72B6\u6001\u3001\u6807\u7B7E\u6216\u8BA1\u6570\u4FE1\u606F\u3002\u652F\u6301\u591A\u79CD\u5C3A\u5BF8\u548C\u6837\u5F0F\u53D8\u4F53\uFF0C\u5305\u62EC\u57FA\u7840\u8F6E\u5ED3\u6837\u5F0F\u3001\u586B\u5145\u6837\u5F0F\u4EE5\u53CA\u591A\u79CD\u4FC3\u9500\u5FBD\u7AE0\u7C7B\u578B\u3002\u4FC3\u9500\u5FBD\u7AE0\u652F\u6301\u56DB\u79CD\u7C7B\u578B\uFF1APlus\u4F1A\u5458\uFF08\u6DF1\u8272\u6E10\u53D8\uFF09\u4F7F\u7528\u7279\u6B8A\u6837\u5F0F\uFF0C\u5176\u4ED6\u7C7B\u578B\uFF08\u666E\u901A\u4F1A\u5458\u3001\u666E\u901A\u6298\u6263\u3001\u9650\u65F6\u6298\u6263\uFF09\u4F7F\u7528\u54C1\u724C\u8272\u586B\u5145\u6837\u5F0F\uFF0C\u6BCF\u79CD\u7C7B\u578B\u90FD\u914D\u6709\u4E13\u5C5E\u56FE\u6807\u3002"}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:["sm","lg"],description:"\u5FBD\u7AE0\u5C3A\u5BF8\uFF1Asm (24px\u9AD8\u5EA6) \u6216 lg (24px\u9AD8\u5EA6\uFF0C\u5927\u5C4F\u5E5528px\u9AD8\u5EA6)",table:{defaultValue:{summary:"lg"}}},variant:{control:{type:"select"},options:["outline","fill","promotional"],description:"\u5FBD\u7AE0\u53D8\u4F53\u6837\u5F0F\uFF1Aoutline (\u8F6E\u5ED3\u6837\u5F0F)\u3001fill (\u586B\u5145\u6837\u5F0F)\u3001promotional (\u4FC3\u9500\u6837\u5F0F\uFF0C\u652F\u6301\u4E0D\u540C\u4FC3\u9500\u7C7B\u578B)",table:{defaultValue:{summary:"outline"},type:{summary:"'outline' | 'fill' | 'promotional'"}}},promotionalType:{control:{type:"select"},options:["plus-member","regular-member","regular-discount","time-limited-discount"],description:"\u4FC3\u9500\u7C7B\u578B\uFF1Aplus-member (Plus\u4F1A\u5458\uFF0C\u6DF1\u8272\u6E10\u53D8) \u4F7F\u7528\u7279\u6B8A\u6837\u5F0F\uFF0C\u5176\u4ED6\u7C7B\u578B\u4F7F\u7528\u54C1\u724C\u8272\u586B\u5145\u6837\u5F0F\uFF0C\u6BCF\u79CD\u7C7B\u578B\u914D\u6709\u4E13\u5C5E\u56FE\u6807",table:{defaultValue:{summary:"undefined"},type:{summary:"'plus-member' | 'regular-member' | 'regular-discount' | 'time-limited-discount'"}},if:{arg:"variant",eq:"promotional"}},children:{control:"text",description:"\u5FBD\u7AE0\u663E\u793A\u7684\u6587\u672C\u5185\u5BB9",table:{type:{summary:"ReactNode"}}},className:{control:"text",description:"\u989D\u5916\u7684CSS\u7C7B\u540D",table:{type:{summary:"string"}}}},args:{size:"lg",variant:"outline",children:"New"}};var y=v;const u={args:{children:"New"}},x={name:"Playground Demo",render(){return(0,e.jsxs)("div",{className:"space-y-8 p-6",children:[(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:"\u57FA\u7840\u5FBD\u7AE0"}),(0,e.jsxs)("div",{className:"flex flex-wrap gap-4 items-center",children:[(0,e.jsx)(a.Badge,{variant:"outline",children:"New"}),(0,e.jsx)(a.Badge,{variant:"outline",children:"20% OFF"}),(0,e.jsx)(a.Badge,{variant:"outline",children:"Limited"}),(0,e.jsx)(a.Badge,{variant:"outline",children:"Hot"})]})]}),(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:"\u586B\u5145\u5FBD\u7AE0"}),(0,e.jsxs)("div",{className:"flex flex-wrap gap-4 items-center",children:[(0,e.jsx)(a.Badge,{variant:"fill",children:"Sale"}),(0,e.jsx)(a.Badge,{variant:"fill",children:"15% OFF"}),(0,e.jsx)(a.Badge,{variant:"fill",children:"Bestseller"}),(0,e.jsx)(a.Badge,{variant:"fill",children:"Free Shipping"})]})]}),(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:"\u4FC3\u9500\u5FBD\u7AE0"}),(0,e.jsxs)("div",{className:"flex flex-wrap gap-4 items-center",children:[(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"plus-member",children:"Plus Member"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"regular-member",children:"VIP Member"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"regular-discount",children:"Premium"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"time-limited-discount",children:"\u4F1A\u5458\u4E13\u4EAB"})]})]}),(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:"\u5C3A\u5BF8\u5BF9\u6BD4"}),(0,e.jsxs)("div",{className:"space-y-3",children:[(0,e.jsxs)("div",{className:"flex gap-4 items-center",children:[(0,e.jsx)("span",{className:"text-sm text-gray-600 w-16",children:"Small:"}),(0,e.jsx)(a.Badge,{size:"sm",variant:"outline",children:"New"}),(0,e.jsx)(a.Badge,{size:"sm",variant:"fill",children:"Sale"}),(0,e.jsx)(a.Badge,{size:"sm",variant:"promotional",promotionalType:"plus-member",children:"Plus"}),(0,e.jsx)(a.Badge,{size:"sm",variant:"promotional",promotionalType:"regular-member",children:"regular"}),(0,e.jsx)(a.Badge,{size:"sm",variant:"promotional",promotionalType:"regular-discount",children:"discount"}),(0,e.jsx)(a.Badge,{size:"sm",variant:"promotional",promotionalType:"time-limited-discount",children:"limited"})]}),(0,e.jsxs)("div",{className:"flex gap-4 items-center",children:[(0,e.jsx)("span",{className:"text-sm text-gray-600 w-16",children:"Large:"}),(0,e.jsx)(a.Badge,{size:"lg",variant:"outline",children:"New"}),(0,e.jsx)(a.Badge,{size:"lg",variant:"fill",children:"Sale"}),(0,e.jsx)(a.Badge,{size:"lg",variant:"promotional",promotionalType:"plus-member",children:"Plus Member"}),(0,e.jsx)(a.Badge,{size:"lg",variant:"promotional",promotionalType:"regular-member",children:"regular Member"}),(0,e.jsx)(a.Badge,{size:"lg",variant:"promotional",promotionalType:"regular-discount",children:"discount"}),(0,e.jsx)(a.Badge,{size:"lg",variant:"promotional",promotionalType:"time-limited-discount",children:"limited"})]})]})]})]})}},N={name:"All Variants",render(){return(0,e.jsxs)("div",{className:"flex gap-4 items-center",children:[(0,e.jsx)(a.Badge,{variant:"outline",children:"OUTLINE"}),(0,e.jsx)(a.Badge,{variant:"fill",children:"FILL"}),(0,e.jsx)(a.Badge,{variant:"promotional",children:"PROMOTIONAL"})]})}},f={name:"Size Variations",render(){return(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsxs)("div",{className:"flex gap-4 items-center",children:[(0,e.jsx)("span",{className:"text-sm text-gray-600 w-16",children:"Small:"}),(0,e.jsx)(a.Badge,{size:"sm",variant:"outline",children:"New"}),(0,e.jsx)(a.Badge,{size:"sm",variant:"fill",children:"Sale"}),(0,e.jsx)(a.Badge,{size:"sm",variant:"promotional",promotionalType:"plus-member",children:"Plus"})]}),(0,e.jsxs)("div",{className:"flex gap-4 items-center",children:[(0,e.jsx)("span",{className:"text-sm text-gray-600 w-16",children:"Large:"}),(0,e.jsx)(a.Badge,{size:"lg",variant:"outline",children:"New"}),(0,e.jsx)(a.Badge,{size:"lg",variant:"fill",children:"Sale"}),(0,e.jsx)(a.Badge,{size:"lg",variant:"promotional",promotionalType:"plus-member",children:"Plus Member"})]})]})}},B={name:"Promotional Badge",args:{variant:"promotional",promotionalType:"plus-member",children:"Plus Member"}},b={name:"Promotional Scenarios",render(){return(0,e.jsxs)("div",{className:"space-y-6 p-6",children:[(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:"\u4F1A\u5458\u7B49\u7EA7\u6807\u8BC6"}),(0,e.jsxs)("div",{className:"flex flex-wrap gap-4 items-center",children:[(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"plus-member",children:"Plus Member"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"regular-member",children:"VIP Member"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"plus-member",children:"Premium User"})]})]}),(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:"\u7279\u6B8A\u6743\u76CA\u6807\u7B7E"}),(0,e.jsxs)("div",{className:"flex flex-wrap gap-4 items-center",children:[(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"regular-member",children:"\u4F1A\u5458\u4E13\u4EAB"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"regular-discount",children:"\u4E13\u5C5E\u4F18\u60E0"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"time-limited-discount",children:"\u65E9\u9E1F\u7279\u60E0"})]})]}),(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:"\u4EA7\u54C1\u6807\u8BC6"}),(0,e.jsxs)("div",{className:"flex flex-wrap gap-4 items-center",children:[(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"regular-discount",children:"\u9650\u91CF\u7248"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"plus-member",children:"\u8054\u540D\u6B3E"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"time-limited-discount",children:"\u72EC\u5BB6"})]})]}),(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:"\u5E26\u88C5\u9970\u56FE\u6807\u6548\u679C"}),(0,e.jsxs)("div",{className:"bg-gray-50 p-4 rounded-lg",children:[(0,e.jsx)("p",{className:"text-sm text-gray-600 mb-4",children:"\u4FC3\u9500\u5FBD\u7AE0\u81EA\u52A8\u5305\u542B\u5DE6\u4FA7\u88C5\u9970\u56FE\u6807\uFF0C\u91C7\u7528\u6E10\u53D8\u80CC\u666F\u8BBE\u8BA1\uFF0C\u6839\u636EpromotionalType\u663E\u793A\u4E0D\u540C\u7684\u989C\u8272\u548C\u56FE\u6807"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"plus-member",children:"Plus Member"})]})]})]})}},T={name:"Promotional Types",render(){return(0,e.jsxs)("div",{className:"space-y-8 p-6",children:[(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:"\u6240\u6709\u4FC3\u9500\u7C7B\u578B"}),(0,e.jsxs)("div",{className:"flex flex-wrap gap-4 items-center",children:[(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"plus-member",children:"Plus\u4E13\u4EAB"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"regular-member",children:"\u4F1A\u5458\u4EF7"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"regular-discount",children:"\u9650\u65F6\u4F18\u60E0"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"time-limited-discount",children:"\u95EA\u8D2D\u4E2D"})]})]}),(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:"Plus\u4F1A\u5458\u4E13\u4EAB\uFF08\u6DF1\u8272\u6E10\u53D8\uFF09"}),(0,e.jsxs)("div",{className:"flex flex-wrap gap-4 items-center",children:[(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"plus-member",children:"Plus\u4E13\u4EAB"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"plus-member",children:"VIP\u7279\u6743"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"plus-member",children:"\u4E13\u5C5E\u6743\u76CA"})]})]}),(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:"\u666E\u901A\u4F1A\u5458\uFF08\u54C1\u724C\u8272\u586B\u5145\uFF09"}),(0,e.jsxs)("div",{className:"flex flex-wrap gap-4 items-center",children:[(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"regular-member",children:"\u4F1A\u5458\u4EF7"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"regular-member",children:"\u4F1A\u5458\u4E13\u5C5E"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"regular-member",children:"Member Only"})]})]}),(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:"\u666E\u901A\u6298\u6263\uFF08\u54C1\u724C\u8272\u586B\u5145\uFF09"}),(0,e.jsxs)("div",{className:"flex flex-wrap gap-4 items-center",children:[(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"regular-discount",children:"\u9650\u65F6\u4F18\u60E0"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"regular-discount",children:"\u7279\u4EF7"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"regular-discount",children:"\u4FC3\u9500\u4E2D"})]})]}),(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:"\u9650\u65F6\u6298\u6263\uFF08\u54C1\u724C\u8272\u586B\u5145\uFF09"}),(0,e.jsxs)("div",{className:"flex flex-wrap gap-4 items-center",children:[(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"time-limited-discount",children:"\u95EA\u8D2D"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"time-limited-discount",children:"\u62A2\u8D2D\u4E2D"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"time-limited-discount",children:"\u9650\u65F6\u79D2\u6740"})]})]}),(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:"\u5411\u540E\u517C\u5BB9\uFF08\u9ED8\u8BA4\u6837\u5F0F\uFF09"}),(0,e.jsxs)("div",{className:"flex flex-wrap gap-4 items-center",children:[(0,e.jsx)(a.Badge,{variant:"promotional",children:"\u4FC3\u9500\u6807\u7B7E"}),(0,e.jsx)("span",{className:"text-sm text-gray-500",children:"\u2190 \u4E0D\u6307\u5B9ApromotionalType\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684regular-discount\u6837\u5F0F"})]})]})]})}},h={name:"Usage Examples",render(){return(0,e.jsxs)("div",{className:"space-y-6 p-6",children:[(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:"\u4EA7\u54C1\u5361\u7247\u4E2D\u7684\u5E94\u7528"}),(0,e.jsxs)("div",{className:"border border-gray-200 rounded-lg p-4 max-w-sm",children:[(0,e.jsxs)("div",{className:"flex gap-2 mb-3",children:[(0,e.jsx)(a.Badge,{size:"sm",variant:"fill",children:"20% OFF"}),(0,e.jsx)(a.Badge,{size:"sm",variant:"outline",children:"New"})]}),(0,e.jsx)("h4",{className:"font-medium text-gray-900 mb-2",children:"AeroFit 2 Earbuds"}),(0,e.jsx)("div",{className:"mb-3",children:(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"plus-member",children:"Plus Member Price"})}),(0,e.jsx)("p",{className:"text-lg font-semibold text-gray-900",children:"$79.99"})]})]}),(0,e.jsxs)("div",{className:"space-y-4",children:[(0,e.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:"\u6DF7\u5408\u4F7F\u7528\u573A\u666F"}),(0,e.jsxs)("div",{className:"space-y-3",children:[(0,e.jsxs)("div",{className:"flex gap-2 items-center",children:[(0,e.jsx)("span",{className:"text-sm text-gray-600 w-20",children:"\u6298\u6263\u6807\u7B7E:"}),(0,e.jsx)(a.Badge,{variant:"fill",children:"25% OFF"}),(0,e.jsx)(a.Badge,{variant:"outline",children:"Limited Time"})]}),(0,e.jsxs)("div",{className:"flex gap-2 items-center",children:[(0,e.jsx)("span",{className:"text-sm text-gray-600 w-20",children:"\u4F1A\u5458\u6807\u8BC6:"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"regular-member",children:"\u4F1A\u5458\u4E13\u4EAB"})]}),(0,e.jsxs)("div",{className:"flex gap-2 items-center",children:[(0,e.jsx)("span",{className:"text-sm text-gray-600 w-20",children:"\u9650\u65F6\u4FC3\u9500:"}),(0,e.jsx)(a.Badge,{variant:"promotional",promotionalType:"time-limited-discount",children:"\u95EA\u8D2D\u4E2D"})]}),(0,e.jsxs)("div",{className:"flex gap-2 items-center",children:[(0,e.jsx)("span",{className:"text-sm text-gray-600 w-20",children:"\u72B6\u6001\u6807\u7B7E:"}),(0,e.jsx)(a.Badge,{variant:"outline",children:"Hot"}),(0,e.jsx)(a.Badge,{variant:"outline",children:"Bestseller"})]})]})]})]})}};
|
|
2
2
|
//# sourceMappingURL=badge.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/badge.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Badge } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Components/Badge',\n component: Badge,\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n options: ['sm', 'lg'],\n description: 'Badge \u5C3A\u5BF8',\n table: {\n defaultValue: { summary: 'lg' },\n },\n },\n },\n args: {\n size: 'lg',\n },\n} satisfies Meta<typeof Badge>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n children: 'New',\n },\n}\n\nexport const Examples: Story = {\n render() {\n return (\n <div className=\"flex flex-col space-y-4\">\n <Badge>New</Badge>\n </div>\n )\n },\n}\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,aAAAC,EAAA,YAAAC,IAAA,eAAAC,
|
|
6
|
-
"names": ["badge_stories_exports", "__export", "Default", "
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Badge } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Components/Badge',\n component: Badge,\n parameters: {\n layout: 'centered',\n docs: {\n description: {\n component:\n '\u5FBD\u7AE0\u7EC4\u4EF6\u7528\u4E8E\u663E\u793A\u72B6\u6001\u3001\u6807\u7B7E\u6216\u8BA1\u6570\u4FE1\u606F\u3002\u652F\u6301\u591A\u79CD\u5C3A\u5BF8\u548C\u6837\u5F0F\u53D8\u4F53\uFF0C\u5305\u62EC\u57FA\u7840\u8F6E\u5ED3\u6837\u5F0F\u3001\u586B\u5145\u6837\u5F0F\u4EE5\u53CA\u591A\u79CD\u4FC3\u9500\u5FBD\u7AE0\u7C7B\u578B\u3002\u4FC3\u9500\u5FBD\u7AE0\u652F\u6301\u56DB\u79CD\u7C7B\u578B\uFF1APlus\u4F1A\u5458\uFF08\u6DF1\u8272\u6E10\u53D8\uFF09\u4F7F\u7528\u7279\u6B8A\u6837\u5F0F\uFF0C\u5176\u4ED6\u7C7B\u578B\uFF08\u666E\u901A\u4F1A\u5458\u3001\u666E\u901A\u6298\u6263\u3001\u9650\u65F6\u6298\u6263\uFF09\u4F7F\u7528\u54C1\u724C\u8272\u586B\u5145\u6837\u5F0F\uFF0C\u6BCF\u79CD\u7C7B\u578B\u90FD\u914D\u6709\u4E13\u5C5E\u56FE\u6807\u3002',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n options: ['sm', 'lg'],\n description: '\u5FBD\u7AE0\u5C3A\u5BF8\uFF1Asm (24px\u9AD8\u5EA6) \u6216 lg (24px\u9AD8\u5EA6\uFF0C\u5927\u5C4F\u5E5528px\u9AD8\u5EA6)',\n table: {\n defaultValue: { summary: 'lg' },\n },\n },\n variant: {\n control: {\n type: 'select',\n },\n options: ['outline', 'fill', 'promotional'],\n description: '\u5FBD\u7AE0\u53D8\u4F53\u6837\u5F0F\uFF1Aoutline (\u8F6E\u5ED3\u6837\u5F0F)\u3001fill (\u586B\u5145\u6837\u5F0F)\u3001promotional (\u4FC3\u9500\u6837\u5F0F\uFF0C\u652F\u6301\u4E0D\u540C\u4FC3\u9500\u7C7B\u578B)',\n table: {\n defaultValue: { summary: 'outline' },\n type: { summary: \"'outline' | 'fill' | 'promotional'\" },\n },\n },\n promotionalType: {\n control: {\n type: 'select',\n },\n options: ['plus-member', 'regular-member', 'regular-discount', 'time-limited-discount'],\n description:\n '\u4FC3\u9500\u7C7B\u578B\uFF1Aplus-member (Plus\u4F1A\u5458\uFF0C\u6DF1\u8272\u6E10\u53D8) \u4F7F\u7528\u7279\u6B8A\u6837\u5F0F\uFF0C\u5176\u4ED6\u7C7B\u578B\u4F7F\u7528\u54C1\u724C\u8272\u586B\u5145\u6837\u5F0F\uFF0C\u6BCF\u79CD\u7C7B\u578B\u914D\u6709\u4E13\u5C5E\u56FE\u6807',\n table: {\n defaultValue: { summary: 'undefined' },\n type: { summary: \"'plus-member' | 'regular-member' | 'regular-discount' | 'time-limited-discount'\" },\n },\n if: { arg: 'variant', eq: 'promotional' },\n },\n children: {\n control: 'text',\n description: '\u5FBD\u7AE0\u663E\u793A\u7684\u6587\u672C\u5185\u5BB9',\n table: {\n type: { summary: 'ReactNode' },\n },\n },\n className: {\n control: 'text',\n description: '\u989D\u5916\u7684CSS\u7C7B\u540D',\n table: {\n type: { summary: 'string' },\n },\n },\n },\n args: {\n size: 'lg',\n variant: 'outline',\n children: 'New',\n },\n} satisfies Meta<typeof Badge>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n children: 'New',\n },\n}\n\nexport const PlaygroundDemo: Story = {\n name: 'Playground Demo',\n render() {\n return (\n <div className=\"space-y-8 p-6\">\n {/* \u57FA\u7840\u793A\u4F8B */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u57FA\u7840\u5FBD\u7AE0</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"outline\">New</Badge>\n <Badge variant=\"outline\">20% OFF</Badge>\n <Badge variant=\"outline\">Limited</Badge>\n <Badge variant=\"outline\">Hot</Badge>\n </div>\n </div>\n\n {/* \u586B\u5145\u6837\u5F0F */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u586B\u5145\u5FBD\u7AE0</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"fill\">Sale</Badge>\n <Badge variant=\"fill\">15% OFF</Badge>\n <Badge variant=\"fill\">Bestseller</Badge>\n <Badge variant=\"fill\">Free Shipping</Badge>\n </div>\n </div>\n\n {/* \u4FC3\u9500\u5FBD\u7AE0 */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u4FC3\u9500\u5FBD\u7AE0</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n Plus Member\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-member\">\n VIP Member\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-discount\">\n Premium\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"time-limited-discount\">\n \u4F1A\u5458\u4E13\u4EAB\n </Badge>\n </div>\n </div>\n\n {/* \u5C3A\u5BF8\u5BF9\u6BD4 */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u5C3A\u5BF8\u5BF9\u6BD4</h3>\n <div className=\"space-y-3\">\n <div className=\"flex gap-4 items-center\">\n <span className=\"text-sm text-gray-600 w-16\">Small:</span>\n <Badge size=\"sm\" variant=\"outline\">\n New\n </Badge>\n <Badge size=\"sm\" variant=\"fill\">\n Sale\n </Badge>\n <Badge size=\"sm\" variant=\"promotional\" promotionalType=\"plus-member\">\n Plus\n </Badge>\n <Badge size=\"sm\" variant=\"promotional\" promotionalType=\"regular-member\">\n regular\n </Badge>\n <Badge size=\"sm\" variant=\"promotional\" promotionalType=\"regular-discount\">\n discount\n </Badge>\n <Badge size=\"sm\" variant=\"promotional\" promotionalType=\"time-limited-discount\">\n limited\n </Badge>\n </div>\n <div className=\"flex gap-4 items-center\">\n <span className=\"text-sm text-gray-600 w-16\">Large:</span>\n <Badge size=\"lg\" variant=\"outline\">\n New\n </Badge>\n <Badge size=\"lg\" variant=\"fill\">\n Sale\n </Badge>\n <Badge size=\"lg\" variant=\"promotional\" promotionalType=\"plus-member\">\n Plus Member\n </Badge>\n <Badge size=\"lg\" variant=\"promotional\" promotionalType=\"regular-member\">\n regular Member\n </Badge>\n <Badge size=\"lg\" variant=\"promotional\" promotionalType=\"regular-discount\">\n discount\n </Badge>\n <Badge size=\"lg\" variant=\"promotional\" promotionalType=\"time-limited-discount\">\n limited\n </Badge>\n </div>\n </div>\n </div>\n </div>\n )\n },\n}\n\nexport const Variants: Story = {\n name: 'All Variants',\n render() {\n return (\n <div className=\"flex gap-4 items-center\">\n <Badge variant=\"outline\">OUTLINE</Badge>\n <Badge variant=\"fill\">FILL</Badge>\n <Badge variant=\"promotional\">PROMOTIONAL</Badge>\n </div>\n )\n },\n}\n\nexport const Sizes: Story = {\n name: 'Size Variations',\n render() {\n return (\n <div className=\"space-y-4\">\n <div className=\"flex gap-4 items-center\">\n <span className=\"text-sm text-gray-600 w-16\">Small:</span>\n <Badge size=\"sm\" variant=\"outline\">\n New\n </Badge>\n <Badge size=\"sm\" variant=\"fill\">\n Sale\n </Badge>\n <Badge size=\"sm\" variant=\"promotional\" promotionalType=\"plus-member\">\n Plus\n </Badge>\n </div>\n <div className=\"flex gap-4 items-center\">\n <span className=\"text-sm text-gray-600 w-16\">Large:</span>\n <Badge size=\"lg\" variant=\"outline\">\n New\n </Badge>\n <Badge size=\"lg\" variant=\"fill\">\n Sale\n </Badge>\n <Badge size=\"lg\" variant=\"promotional\" promotionalType=\"plus-member\">\n Plus Member\n </Badge>\n </div>\n </div>\n )\n },\n}\n\nexport const Promotional: Story = {\n name: 'Promotional Badge',\n args: {\n variant: 'promotional',\n promotionalType: 'plus-member',\n children: 'Plus Member',\n },\n}\n\nexport const PromotionalExamples: Story = {\n name: 'Promotional Scenarios',\n render() {\n return (\n <div className=\"space-y-6 p-6\">\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u4F1A\u5458\u7B49\u7EA7\u6807\u8BC6</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n Plus Member\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-member\">\n VIP Member\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n Premium User\n </Badge>\n </div>\n </div>\n\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u7279\u6B8A\u6743\u76CA\u6807\u7B7E</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"regular-member\">\n \u4F1A\u5458\u4E13\u4EAB\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-discount\">\n \u4E13\u5C5E\u4F18\u60E0\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"time-limited-discount\">\n \u65E9\u9E1F\u7279\u60E0\n </Badge>\n </div>\n </div>\n\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u4EA7\u54C1\u6807\u8BC6</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"regular-discount\">\n \u9650\u91CF\u7248\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n \u8054\u540D\u6B3E\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"time-limited-discount\">\n \u72EC\u5BB6\n </Badge>\n </div>\n </div>\n\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u5E26\u88C5\u9970\u56FE\u6807\u6548\u679C</h3>\n <div className=\"bg-gray-50 p-4 rounded-lg\">\n <p className=\"text-sm text-gray-600 mb-4\">\n \u4FC3\u9500\u5FBD\u7AE0\u81EA\u52A8\u5305\u542B\u5DE6\u4FA7\u88C5\u9970\u56FE\u6807\uFF0C\u91C7\u7528\u6E10\u53D8\u80CC\u666F\u8BBE\u8BA1\uFF0C\u6839\u636EpromotionalType\u663E\u793A\u4E0D\u540C\u7684\u989C\u8272\u548C\u56FE\u6807\n </p>\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n Plus Member\n </Badge>\n </div>\n </div>\n </div>\n )\n },\n}\n\nexport const PromotionalTypes: Story = {\n name: 'Promotional Types',\n render() {\n return (\n <div className=\"space-y-8 p-6\">\n {/* \u6240\u6709\u4FC3\u9500\u7C7B\u578B\u5C55\u793A */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u6240\u6709\u4FC3\u9500\u7C7B\u578B</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n Plus\u4E13\u4EAB\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-member\">\n \u4F1A\u5458\u4EF7\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-discount\">\n \u9650\u65F6\u4F18\u60E0\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"time-limited-discount\">\n \u95EA\u8D2D\u4E2D\n </Badge>\n </div>\n </div>\n\n {/* Plus\u4F1A\u5458\u7C7B\u578B */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">Plus\u4F1A\u5458\u4E13\u4EAB\uFF08\u6DF1\u8272\u6E10\u53D8\uFF09</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n Plus\u4E13\u4EAB\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n VIP\u7279\u6743\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n \u4E13\u5C5E\u6743\u76CA\n </Badge>\n </div>\n </div>\n\n {/* \u666E\u901A\u4F1A\u5458\u7C7B\u578B */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u666E\u901A\u4F1A\u5458\uFF08\u54C1\u724C\u8272\u586B\u5145\uFF09</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"regular-member\">\n \u4F1A\u5458\u4EF7\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-member\">\n \u4F1A\u5458\u4E13\u5C5E\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-member\">\n Member Only\n </Badge>\n </div>\n </div>\n\n {/* \u666E\u901A\u6298\u6263\u7C7B\u578B */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u666E\u901A\u6298\u6263\uFF08\u54C1\u724C\u8272\u586B\u5145\uFF09</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"regular-discount\">\n \u9650\u65F6\u4F18\u60E0\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-discount\">\n \u7279\u4EF7\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"regular-discount\">\n \u4FC3\u9500\u4E2D\n </Badge>\n </div>\n </div>\n\n {/* \u9650\u65F6\u6298\u6263\u7C7B\u578B */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u9650\u65F6\u6298\u6263\uFF08\u54C1\u724C\u8272\u586B\u5145\uFF09</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\" promotionalType=\"time-limited-discount\">\n \u95EA\u8D2D\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"time-limited-discount\">\n \u62A2\u8D2D\u4E2D\n </Badge>\n <Badge variant=\"promotional\" promotionalType=\"time-limited-discount\">\n \u9650\u65F6\u79D2\u6740\n </Badge>\n </div>\n </div>\n\n {/* \u5411\u540E\u517C\u5BB9\u6027\u5C55\u793A */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u5411\u540E\u517C\u5BB9\uFF08\u9ED8\u8BA4\u6837\u5F0F\uFF09</h3>\n <div className=\"flex flex-wrap gap-4 items-center\">\n <Badge variant=\"promotional\">\u4FC3\u9500\u6807\u7B7E</Badge>\n <span className=\"text-sm text-gray-500\">\u2190 \u4E0D\u6307\u5B9ApromotionalType\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684regular-discount\u6837\u5F0F</span>\n </div>\n </div>\n </div>\n )\n },\n}\n\nexport const UsageExamples: Story = {\n name: 'Usage Examples',\n render() {\n return (\n <div className=\"space-y-6 p-6\">\n {/* \u4EA7\u54C1\u5361\u7247\u4E2D\u7684\u5E94\u7528 */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u4EA7\u54C1\u5361\u7247\u4E2D\u7684\u5E94\u7528</h3>\n <div className=\"border border-gray-200 rounded-lg p-4 max-w-sm\">\n <div className=\"flex gap-2 mb-3\">\n <Badge size=\"sm\" variant=\"fill\">\n 20% OFF\n </Badge>\n <Badge size=\"sm\" variant=\"outline\">\n New\n </Badge>\n </div>\n <h4 className=\"font-medium text-gray-900 mb-2\">AeroFit 2 Earbuds</h4>\n <div className=\"mb-3\">\n <Badge variant=\"promotional\" promotionalType=\"plus-member\">\n Plus Member Price\n </Badge>\n </div>\n <p className=\"text-lg font-semibold text-gray-900\">$79.99</p>\n </div>\n </div>\n\n {/* \u4E0D\u540C\u573A\u666F\u7684\u6DF7\u5408\u4F7F\u7528 */}\n <div className=\"space-y-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">\u6DF7\u5408\u4F7F\u7528\u573A\u666F</h3>\n <div className=\"space-y-3\">\n <div className=\"flex gap-2 items-center\">\n <span className=\"text-sm text-gray-600 w-20\">\u6298\u6263\u6807\u7B7E:</span>\n <Badge variant=\"fill\">25% OFF</Badge>\n <Badge variant=\"outline\">Limited Time</Badge>\n </div>\n <div className=\"flex gap-2 items-center\">\n <span className=\"text-sm text-gray-600 w-20\">\u4F1A\u5458\u6807\u8BC6:</span>\n <Badge variant=\"promotional\" promotionalType=\"regular-member\">\n \u4F1A\u5458\u4E13\u4EAB\n </Badge>\n </div>\n <div className=\"flex gap-2 items-center\">\n <span className=\"text-sm text-gray-600 w-20\">\u9650\u65F6\u4FC3\u9500:</span>\n <Badge variant=\"promotional\" promotionalType=\"time-limited-discount\">\n \u95EA\u8D2D\u4E2D\n </Badge>\n </div>\n <div className=\"flex gap-2 items-center\">\n <span className=\"text-sm text-gray-600 w-20\">\u72B6\u6001\u6807\u7B7E:</span>\n <Badge variant=\"outline\">Hot</Badge>\n <Badge variant=\"outline\">Bestseller</Badge>\n </div>\n </div>\n </div>\n </div>\n )\n },\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["badge_stories_exports", "__export", "Default", "PlaygroundDemo", "Promotional", "PromotionalExamples", "PromotionalTypes", "Sizes", "UsageExamples", "Variants", "badge_stories_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react", "meta"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as c,jsxs as de}from"react/jsx-runtime";import X,{useState as B,useEffect as y,useRef as w,useImperativeHandle as Y}from"react";import{cn as ee}from"../../helpers/utils.js";import te from"./tabSwitch.js";import ne from"../Title/index.js";import se from"../SwiperBox/index.js";import{withLayout as ae}from"../../shared/Styles.js";import{gaTrack as E}from"../../shared/track.js";import{useMediaQuery as ie}from"react-responsive";import{useRollout as re}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as oe,ShelfDisplayHorizontalItem as le}from"./shelfDisplayItem.js";const ce="image",me="product_shelf",fe=m=>m==null?"default":String(m).replace(/[^a-zA-Z0-9_-]/g,"")||"default",pe=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,V=X.forwardRef(({key:m,data:f,event:L,buildData:S,breakpoints:N,className:z="",recommendedData:i,target:A="_self",metafields:$,isDisplayGudgments:v=!1,isDisplayBackImage:q=!1},O)=>{const{productsTab:r=[],productsCard:
|
|
1
|
+
"use client";import{jsx as c,jsxs as de}from"react/jsx-runtime";import X,{useState as B,useEffect as y,useRef as w,useImperativeHandle as Y}from"react";import{cn as ee}from"../../helpers/utils.js";import te from"./tabSwitch.js";import ne from"../Title/index.js";import se from"../SwiperBox/index.js";import{withLayout as ae}from"../../shared/Styles.js";import{gaTrack as E}from"../../shared/track.js";import{useMediaQuery as ie}from"react-responsive";import{useRollout as re}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as oe,ShelfDisplayHorizontalItem as le}from"./shelfDisplayItem.js";const ce="image",me="product_shelf",fe=m=>m==null?"default":String(m).replace(/[^a-zA-Z0-9_-]/g,"")||"default",pe=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,V=X.forwardRef(({key:m,data:f,event:L,buildData:S,breakpoints:N,className:z="",recommendedData:i,target:A="_self",metafields:$,isDisplayGudgments:v=!1,isDisplayBackImage:q=!1},O)=>{const{productsTab:r=[],productsCard:k=[],title:T,isShowTab:p=!0,tabShape:K="square",isShowTag:Q=!1,isShowOriginalPrice:W=!0,isShowRecommendedCard:I=!1,...Z}=f,[d,R]=B(""),[s,g]=B([]),D=w(!1),_=w(!1),M=w(null),j=w(pe()),F=ie({query:"(max-width: 768px)"}),[G,P]=re({threshold:0}),u=s?.length<=1&&v,o=!F&&s?.length<=2&&v,b=e=>{switch(e){case 1440:return o?s?.length:4;case 1024:return o?s?.length:3;default:return o?s?.length:2.3}},x=()=>{E({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:i?.map((e,a)=>{const n=e?.variants?.find(t=>t?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:a+1}})}})},l=(e,a)=>{if(a){const h=i?.map?.(n=>({...n,isShowRecommended:!0}));g(h?.length?h||[]:[])}else if(Array.isArray(e)){const n=e?.map?.(t=>{const H=S?.products?.find(U=>U?.handle===t?.handle);if(H)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,custom_primary_link:t?.custom_primary_link||"",custom_secondary_link:t?.custom_secondary_link||"",...H}})?.filter(t=>t);g(n?.length?n||[]:[])}else g([])};Y(O,()=>M.current),y(()=>{P&&i?.length&&!D.current&&(D.current=!0,x())},[P,i]),y(()=>{if(!_.current){if(!_.current&&i?.length&&(_.current=!0),p){const e=r?.find(a=>a?.tab===d)||r?.[0];R(e?.tab||""),l(e?.data||[],e?.isShowRecommendedTab);return}l(k,I)}},[i]),y(()=>{if(p){const e=r?.find(a=>a?.tab===d)||r?.[0];l(e?.data||[],e?.isShowRecommendedTab);return}l(k,I)},[S]);const J=fe(d),C=`${j.current}-${J}`;return de("div",{ref:M,className:ee("shelf-display-wrap w-full",z,{"aiui-dark":f?.theme==="dark"}),children:[T&&c(ne,{data:{title:T}}),p&&c("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:c(te,{value:d,tabs:r,tabShape:K,onTabClick:e=>{if(R(e?.tab),l(e?.data||[],e?.isShowRecommendedTab),!e?.isShowRecommendedTab){E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:ce,component_name:me,component_title:f?.title,component_position:1,navigation:e?.tab}});return}x()}})}),c("div",{ref:G,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:c(se,{data:{list:s,configuration:{...Z,event:L,isShowTag:Q,isShowOriginalPrice:W,target:A,metafields:$,itemLength:s?.length,isDisplayBackImage:q}},id:C,className:`${p?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:o?"flex-1":"",Slide:o?le:oe,breakpoints:N||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:u?1:1.2},768:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:b()},1024:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:b(1024)},1440:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:b(1440)}}},C)})]})});V.displayName="ShelfDisplay";var Te=ae(V);export{Te as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n key,\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isView = useRef<boolean>(false)\n const isRecommend = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceIdRef = useRef<string>(createInstanceId())\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? currentItems?.length : 4\n case 1024:\n return isShowGudgments ? currentItems?.length : 3\n default:\n return isShowGudgments ? currentItems?.length : 2.3\n }\n }\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => {\n return {\n ...item,\n isShowRecommended: true,\n }\n })\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n const isArray = Array.isArray(currentData)\n if (isArray) {\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n setCurrentItems([])\n }\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n useEffect(() => {\n if (isRecommend.current) return\n if (!isRecommend.current && recommendedData?.length) {\n isRecommend.current = true\n }\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n setTabId(currentTab?.tab || '')\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n }, [recommendedData])\n\n useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n return (\n <div\n ref={innerRef}\n className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n >\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n if (!v?.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n return\n }\n gackViewEvent()\n }}\n />\n </div>\n )}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: currentItems,\n configuration: {\n ...other,\n event: event,\n isShowTag,\n isShowOriginalPrice,\n target: target,\n metafields: metafields,\n itemLength: currentItems?.length,\n isDisplayBackImage: isDisplayBackImage,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: isOnce ? 1 : 1.2,\n },\n 768: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(),\n },\n 1024: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1024),\n },\n 1440: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1440),\n },\n }\n }\n />\n </div>\n </div>\n )\n }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n key,\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isView = useRef<boolean>(false)\n const isRecommend = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceIdRef = useRef<string>(createInstanceId())\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? currentItems?.length : 4\n case 1024:\n return isShowGudgments ? currentItems?.length : 3\n default:\n return isShowGudgments ? currentItems?.length : 2.3\n }\n }\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => {\n return {\n ...item,\n isShowRecommended: true,\n }\n })\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n const isArray = Array.isArray(currentData)\n if (isArray) {\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n custom_primary_link: item?.custom_primary_link || '',\n custom_secondary_link: item?.custom_secondary_link || '',\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n setCurrentItems([])\n }\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n useEffect(() => {\n if (isRecommend.current) return\n if (!isRecommend.current && recommendedData?.length) {\n isRecommend.current = true\n }\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n setTabId(currentTab?.tab || '')\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n }, [recommendedData])\n\n useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n return (\n <div\n ref={innerRef}\n className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n >\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n if (!v?.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n return\n }\n gackViewEvent()\n }}\n />\n </div>\n )}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: currentItems,\n configuration: {\n ...other,\n event: event,\n isShowTag,\n isShowOriginalPrice,\n target: target,\n metafields: metafields,\n itemLength: currentItems?.length,\n isDisplayBackImage: isDisplayBackImage,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: isOnce ? 1 : 1.2,\n },\n 768: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(),\n },\n 1024: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1024),\n },\n 1440: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1440),\n },\n }\n }\n />\n </div>\n </div>\n )\n }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "TabSwitch", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "useRollout", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "sanitizeCssSelector", "value", "createInstanceId", "ShelfDisplay", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceIdRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "ShelfDisplay_default"]
|
|
7
7
|
}
|
|
@@ -35,6 +35,8 @@ type EventType = {
|
|
|
35
35
|
secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void;
|
|
36
36
|
};
|
|
37
37
|
export interface ShelfDisplayItem {
|
|
38
|
+
custom_primary_link?: string;
|
|
39
|
+
custom_secondary_link?: string;
|
|
38
40
|
id?: string;
|
|
39
41
|
/** 产品图片*/
|
|
40
42
|
img?: {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import D from"decimal.js";const
|
|
1
|
+
import D from"decimal.js";const p={us:"$",uk:"\xA3",ca:"$",eu:"\u20AC",fr:"\u20AC",de:"\u20AC",nl:"\u20AC",vn:"\u20AB",cl:"$",sg:"$",ae:"AED"},g=e=>({us:"en-US",uk:"en-GB",ca:"en-CA",eu:"en",fr:"fr-FR",au:"en-AU",my:"en-my","eu-es":"de-DE","eu-fr":"de-DE","eu-it":"de-DE","eu-de":"de-DE","eu-en":"en-US","cz-en":"de-DE","ca-fr":"fr-FR",nl:"de-DE",de:"de-DE",vn:"vi-vn",sg:"en-sg","ae-en":"ae-en",plus:"en-us",cl:"es-cl",dk:"en-dk",fi:"en-fi",no:"en-no",is:"en-is",se:"en-se","eu-pl":"pl-PL",es:"es-es",pl:"pl-PL",nz:"en-NZ","sg-en":"en-SG","sa-en":"en-SA","vn-vi":"vi-VN",ie:"en-IE",tw:"zh-TW"})[e]||"";function d({amount:e,currencyCode:r,currencyDisplay:a,locale:i,maximumFractionDigits:n,minimumFractionDigits:u,removeTrailingZeros:c=!1}){const o=i==="nl"?"EUR":r||"USD",s=g(i);if(!s)return null;let t=new Intl.NumberFormat(s,{style:"currency",currency:o,currencyDisplay:a||"symbol",minimumFractionDigits:n===0?0:u,maximumFractionDigits:n})?.format?.(e);return["eu-de","eu-en","de","eu"].includes(i)&&(t=t?.toString()?.replace?.(/[\s]/g,"")),c&&(t=t?.replace?.(/(\.\d*?[1-9])0+\b/,"$1")?.replace?.(/\.0+\b/,"")?.replace?.(/(\,\d*?[1-9])0+\b/,"$1")?.replace?.(/\,0+\b/,"")),t}function S({amount:e,baseAmount:r,currencyCode:a,currencyDisplay:i,locale:n,maximumFractionDigits:u,minimumFractionDigits:c,removeTrailingZeros:o}){if(typeof Intl>"u")return{price:`${p[n]}${e}`,basePrice:`${p[n]}${r}`,discount:`${p[n]}${r-e||0}`};const s=r>e;let l=null;const t=g(n);if(t){const m=new Intl.NumberFormat(t,{style:"percent"});l=s?m.format((r-e)/r):null}let y;if(s){const m=new D(r).sub(e||0).toNumber();y=d({amount:m,currencyDisplay:i,currencyCode:a||"USD",locale:n,maximumFractionDigits:2})}const f=d({amount:e,currencyCode:a,currencyDisplay:i,locale:n,removeTrailingZeros:o}),b=s?d({amount:r,currencyCode:a,currencyDisplay:i,locale:n,maximumFractionDigits:u,minimumFractionDigits:c,removeTrailingZeros:o}):void 0;return{price:f,basePrice:b,discount:l,discountAmount:y}}export{p as PRICE_SYMBOL,d as formatPrice,S as formatVariantPrice,g as languageTerritory};
|
|
2
2
|
//# sourceMappingURL=shelfDisplay.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
|
|
4
|
-
"sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n us: '$',\n uk: '\u00A3',\n ca: '$',\n eu: '\u20AC',\n fr: '\u20AC',\n de: '\u20AC',\n nl: '\u20AC',\n vn: '\u20AB',\n cl: '$',\n sg: '$',\n ae: 'AED',\n} as any\n\nexport const languageTerritory = (locale: string) =>\n // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n ({\n us: 'en-US',\n uk: 'en-GB',\n ca: 'en-CA',\n eu: 'en',\n fr: 'fr-FR',\n au: 'en-AU',\n my: 'en-my',\n 'eu-es': 'de-DE',\n 'eu-fr': 'de-DE',\n 'eu-it': 'de-DE',\n 'eu-de': 'de-DE',\n 'eu-en': 'en-US',\n 'cz-en': 'de-DE',\n 'ca-fr': 'fr-FR',\n nl: 'de-DE',\n de: 'de-DE',\n vn: 'vi-vn',\n sg: 'en-sg',\n 'ae-en': 'ae-en',\n plus: 'en-us',\n cl: 'es-cl',\n dk: 'en-dk',\n fi: 'en-fi',\n no: 'en-no',\n is: 'en-is',\n se: 'en-se',\n 'eu-pl': 'pl-PL',\n es: 'es-es',\n pl: 'pl-PL',\n nz: 'en-NZ',\n 'sg-en': 'en-SG',\n 'sa-en': 'en-SA',\n 'vn-vi': 'vi-VN',\n ie: 'en-IE',\n tw: 'zh-TW',\n })[locale] || ''\n\nexport function formatPrice({\n amount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros = false,\n}: {\n amount: number\n currencyCode: string\n currencyDisplay?: CurrencyDisplayType\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n}) {\n const code = locale === 'nl' ? 'EUR' : currencyCode || 'USD'\n const localeLanguage = languageTerritory(locale)\n if (!localeLanguage) {\n return null\n }\n const formatCurrency = new Intl.NumberFormat(localeLanguage, {\n style: 'currency',\n currency: code,\n currencyDisplay: currencyDisplay || 'symbol',\n minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n maximumFractionDigits,\n })\n\n let formattedValue = formatCurrency?.format?.(amount)\n\n if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n formattedValue = formattedValue?.toString()?.replace?.(/[\\s]/g, '')\n }\n\n if (removeTrailingZeros) {\n formattedValue = formattedValue\n ?.replace?.(/(\\.\\d*?[1-9])0+\\b/, '$1')\n ?.replace?.(/\\.0+\\b/, '')\n ?.replace?.(/(\\,\\d*?[1-9])0+\\b/, '$1')\n ?.replace?.(/\\,0+\\b/, '')\n }\n\n return formattedValue\n}\n\nexport function formatVariantPrice({\n amount,\n baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n}: {\n baseAmount: number\n amount: number\n currencyCode: string\n currencyDisplay?: CurrencyDisplayType\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n}) {\n if (typeof Intl === 'undefined') {\n return {\n price: `${PRICE_SYMBOL[locale]}${amount}`,\n basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n }\n }\n\n const hasDiscount = baseAmount > amount\n let discount = null\n const currentLocale = languageTerritory(locale)\n if (currentLocale) {\n const formatDiscount = new Intl.NumberFormat(currentLocale, {\n style: 'percent',\n })\n discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n }\n // \u6298\u6263\u91D1\u989D\n let discountAmount\n if (hasDiscount) {\n const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n discountAmount = formatPrice({\n amount: savePriceAmount,\n currencyDisplay,\n currencyCode: currencyCode || 'USD',\n locale,\n maximumFractionDigits: 2,\n })\n }\n\n const price = formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n const basePrice = hasDiscount\n ? formatPrice({\n amount: baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n })\n : undefined\n\n return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n}\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n custom_name?: string\n custom_description?: string\n custom_image?: string\n custom_theme?: string\n}\n\nexport type ShelfDisplayType = {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n isShowRecommendedCard?: boolean\n isShowOriginalPrice?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any[]\n productsCard?: any[]\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n data: ShelfDisplayType\n buildData?: {\n categories: any[]\n products: any[]\n }\n recommendedData?: any[]\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n target?: '_self' | '_blank'\n breakpoints?: {\n [key: number]: {\n spaceBetween: number\n freeMode: boolean\n slidesPerView: number\n }\n }\n metafields?: any\n isDisplayGudgments?: boolean\n isDisplayBackImage?: boolean\n}\n"],
|
|
4
|
+
"sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n us: '$',\n uk: '\u00A3',\n ca: '$',\n eu: '\u20AC',\n fr: '\u20AC',\n de: '\u20AC',\n nl: '\u20AC',\n vn: '\u20AB',\n cl: '$',\n sg: '$',\n ae: 'AED',\n} as any\n\nexport const languageTerritory = (locale: string) =>\n // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n ({\n us: 'en-US',\n uk: 'en-GB',\n ca: 'en-CA',\n eu: 'en',\n fr: 'fr-FR',\n au: 'en-AU',\n my: 'en-my',\n 'eu-es': 'de-DE',\n 'eu-fr': 'de-DE',\n 'eu-it': 'de-DE',\n 'eu-de': 'de-DE',\n 'eu-en': 'en-US',\n 'cz-en': 'de-DE',\n 'ca-fr': 'fr-FR',\n nl: 'de-DE',\n de: 'de-DE',\n vn: 'vi-vn',\n sg: 'en-sg',\n 'ae-en': 'ae-en',\n plus: 'en-us',\n cl: 'es-cl',\n dk: 'en-dk',\n fi: 'en-fi',\n no: 'en-no',\n is: 'en-is',\n se: 'en-se',\n 'eu-pl': 'pl-PL',\n es: 'es-es',\n pl: 'pl-PL',\n nz: 'en-NZ',\n 'sg-en': 'en-SG',\n 'sa-en': 'en-SA',\n 'vn-vi': 'vi-VN',\n ie: 'en-IE',\n tw: 'zh-TW',\n })[locale] || ''\n\nexport function formatPrice({\n amount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros = false,\n}: {\n amount: number\n currencyCode: string\n currencyDisplay?: CurrencyDisplayType\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n}) {\n const code = locale === 'nl' ? 'EUR' : currencyCode || 'USD'\n const localeLanguage = languageTerritory(locale)\n if (!localeLanguage) {\n return null\n }\n const formatCurrency = new Intl.NumberFormat(localeLanguage, {\n style: 'currency',\n currency: code,\n currencyDisplay: currencyDisplay || 'symbol',\n minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n maximumFractionDigits,\n })\n\n let formattedValue = formatCurrency?.format?.(amount)\n\n if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n formattedValue = formattedValue?.toString()?.replace?.(/[\\s]/g, '')\n }\n\n if (removeTrailingZeros) {\n formattedValue = formattedValue\n ?.replace?.(/(\\.\\d*?[1-9])0+\\b/, '$1')\n ?.replace?.(/\\.0+\\b/, '')\n ?.replace?.(/(\\,\\d*?[1-9])0+\\b/, '$1')\n ?.replace?.(/\\,0+\\b/, '')\n }\n\n return formattedValue\n}\n\nexport function formatVariantPrice({\n amount,\n baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n}: {\n baseAmount: number\n amount: number\n currencyCode: string\n currencyDisplay?: CurrencyDisplayType\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n}) {\n if (typeof Intl === 'undefined') {\n return {\n price: `${PRICE_SYMBOL[locale]}${amount}`,\n basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n }\n }\n\n const hasDiscount = baseAmount > amount\n let discount = null\n const currentLocale = languageTerritory(locale)\n if (currentLocale) {\n const formatDiscount = new Intl.NumberFormat(currentLocale, {\n style: 'percent',\n })\n discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n }\n // \u6298\u6263\u91D1\u989D\n let discountAmount\n if (hasDiscount) {\n const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n discountAmount = formatPrice({\n amount: savePriceAmount,\n currencyDisplay,\n currencyCode: currencyCode || 'USD',\n locale,\n maximumFractionDigits: 2,\n })\n }\n\n const price = formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n const basePrice = hasDiscount\n ? formatPrice({\n amount: baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n })\n : undefined\n\n return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n}\n\nexport interface ShelfDisplayItem {\n custom_primary_link?: string\n custom_secondary_link?: string\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n custom_name?: string\n custom_description?: string\n custom_image?: string\n custom_theme?: string\n}\n\nexport type ShelfDisplayType = {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n isShowRecommendedCard?: boolean\n isShowOriginalPrice?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any[]\n productsCard?: any[]\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n data: ShelfDisplayType\n buildData?: {\n categories: any[]\n products: any[]\n }\n recommendedData?: any[]\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n target?: '_self' | '_blank'\n breakpoints?: {\n [key: number]: {\n spaceBetween: number\n freeMode: boolean\n slidesPerView: number\n }\n }\n metafields?: any\n isDisplayGudgments?: boolean\n isDisplayBackImage?: boolean\n}\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["Decimal", "PRICE_SYMBOL", "languageTerritory", "locale", "formatPrice", "amount", "currencyCode", "currencyDisplay", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "code", "localeLanguage", "formattedValue", "formatVariantPrice", "baseAmount", "hasDiscount", "discount", "currentLocale", "formatDiscount", "discountAmount", "savePriceAmount", "price", "basePrice"]
|
|
7
7
|
}
|
|
@@ -1,10 +1,2 @@
|
|
|
1
|
-
import{Fragment as se,jsx as s,jsxs as d}from"react/jsx-runtime";import{useAiuiContext as le}from"../AiuiProvider/index.js";import{formatVariantPrice as oe}from"./shelfDisplay.js";import Z from"../../components/picture.js";import ee from"../../components/badge.js";import{cn as h}from"../../helpers/utils.js";import{Text as ie}from"../../components/text.js";import M from"../../components/button.js";import{gaTrack as ae}from"../../shared/track.js";import{trackUrlRef as ne}from"../../shared/trackUrlRef.js";import{Heading as re}from"../../components/heading.js";import{useExposure as ce}from"../../hooks/useExposure.js";import{useRef as pe,useEffect as me,useMemo as R,useState as te}from"react";const V="image",q="product_shelf",G=999999999e-2,de=e=>{const t=e?.sku,v=e?.variants,g=v?.find(w=>w?.sku===t),N=g?.image?.url||v?.[0]?.image?.url||"",$=g?.image?.altText||v?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:N,altText:$}},Ne=({data:e,configuration:t})=>{const{isDisplayBackImage:v=!1,itemShape:g,metafields:N,isTopTag:$=!1,isShowTag:w,isShowOriginalPrice:U,isShowShortTitle:y=!1}=t||{},{locale:b="es",copyWriting:J,currencyDisplay:z}=le(),{discounts:A,discountsCopy:B}=N||{},H=pe(null),[L,a]=te([]),[D,K]=te(""),E=(l,o,c,p)=>t?.event?.primaryButton?.(l,o+1,c,p),Q=(l,o,c,p)=>t?.event?.secondaryButton?.(l,o+1,c,p),n=R(()=>{const l=e?.variants||[];if(l.length)return e?.sku?l?.find?.(o=>o?.sku===e?.sku)||l[0]:l?.[0]},[e?.sku,e?.variants]),m=n?.id?.split?.("/")||[],C=m?.[m?.length-1],I=!n?.availableForSale||n?.price?.amount===G||n?.price===G,u=n?.coupons?.[0],P=!!(U&&u),F=e?.price?.currencyCode||"USD",k=R(()=>oe({locale:b,amount:P?u?.variant_price4wscode:n?.price,baseAmount:P?n?.price:0,currencyCode:F,currencyDisplay:z}),[F,b,P,u?.variant_price4wscode,n]),{price:j,basePrice:X,discount:_,discountAmount:f}=k,{imageUrl:S,altText:T}=de(e),x=e?.custom_name||e?.title,W=y&&n?.metafields?.infos?.page_short_title||x,O=e?.custom_description||e?.description,i=()=>{if(u?.value_type==="fixed_amount"){const l=f||"",o=l.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(o){const[,c,p,ue]=o;let Y=p;return p.endsWith(".00")?Y=p.replace(/\.00$/,""):p.endsWith(",00")&&(Y=p.replace(/,00$/,"")),`${c}${Y}${ue}`}return l}return _||""};me(()=>{let l=[];if(_||f){const c=`${i()} ${A?.off||B?.off||""}`;K(c),l.push(c)}const o=e?.tags?.filter?.(c=>c?.startsWith?.("CLtag"))?.map?.(c=>c?.replace?.("CLtag:",""))?.slice?.(0,_?1:2);a(l.concat(o))},[e?.tags,_,f,A?.off,B?.off]),ce(H,{componentType:V,componentName:q,componentTitle:x,componentDescription:O,position:t?.index+1});const r=()=>d(se,{children:[w&&L?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:L?.map?.((l,o)=>s(ee,{className:"shelf-items-tag",children:l},o))}):null,W?s(re,{as:"h3",title:W||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] line-clamp-2 h-12",html:W||""}):null,O?s(ie,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:O||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:I?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:J?.soldOutText}):d(se,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&j||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&X||""})]})}),d("div",{className:h("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(M,{variant:"secondary",onClick:()=>Q(e,t?.index,t,u),className:`
|
|
2
|
-
${t.direction==="vertical"?"w-full":""}
|
|
3
|
-
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(M,{disabled:I,variant:"primary",onClick:()=>E(e,t?.index,t,u),className:`
|
|
4
|
-
${t.direction==="vertical"?"w-full":""}
|
|
5
|
-
`,children:t?.primaryButton||""}):null]})]});return s("div",{ref:H,className:h("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",g==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:v?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:d("div",{className:"relative inset-0 size-full",children:[s(Z,{source:S,alt:T,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:r()})]})}):d("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[D&&$&&s(ee,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:D||""}),s("div",{className:h("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":x,target:t?.target,href:ne(`${b==="us"||!b?"":`/${b}`}/products/${e?.handle}?variant=${C}`,`${V}_${q}`),onClick:()=>{ae({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:s(Z,{source:S,alt:T,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),r()]})},e?.id||e?.handle)},$e=({data:e,configuration:t})=>{const{itemShape:v,itemLength:g,metafields:N,isShowShortTitle:$}=t||{},{discounts:w,discountsCopy:U}=N||{},{locale:y="us",copyWriting:b,currencyDisplay:J}=le(),[z,A]=te([]),B=pe(null),H=(i,r,l,o)=>t?.event?.primaryButton?.(i,r+1,l,o),L=(i,r,l,o)=>t?.event?.secondaryButton?.(i,r+1,l,o),a=R(()=>{const i=e?.variants||[];if(i.length)return e?.sku&&i.find(r=>r?.sku===e?.sku)||i[0]},[e?.sku,e?.variants]),D=a?.id?.split?.("/")||[],K=D?.[D?.length-1],E=!a?.availableForSale||a?.price?.amount===G||a?.price===G,Q=t?.isShowTag,n=t?.isShowOriginalPrice,m=a?.coupons?.[0],C=!!(n&&m),I=e?.price?.currencyCode||"USD",u=R(()=>oe({locale:y,amount:C?m?.variant_price4wscode:a?.price,baseAmount:C?a?.price:0,currencyCode:I,currencyDisplay:J}),[I,y,C,m?.variant_price4wscode,a]),{price:P,basePrice:F,discount:k,discountAmount:j}=u,{imageUrl:X,altText:_}=de(e),f=e?.custom_name||e?.title,S=$&&a?.metafields?.infos?.page_short_title||f,T=e?.custom_description||e?.description;ce(B,{componentType:V,componentName:q,componentTitle:f,componentDescription:T,position:t?.index+1});const x=()=>g>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},W=()=>g>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col",O=()=>{if(m?.value_type==="fixed_amount"){const i=j||"",r=i.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(r){const[,l,o,c]=r;let p=o;return o.endsWith(".00")?p=o.replace(/\.00$/,""):o.endsWith(",00")&&(p=o.replace(/,00$/,"")),`${l}${p}${c}`}return i}return k||""};return me(()=>{let i=[];if(k||j){const l=`${O()} ${w?.off||U?.off||""}`;i.push(l)}const r=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,k?1:2);A(i.concat(r))},[e?.tags,k,j,w?.off,U?.off]),s("div",{ref:B,className:h(x().wrap,v==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:d("div",{className:h(W(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:h(x().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":f,target:t?.target,href:ne(`${y==="us"||!y?"":`/${y}`}/products/${e?.handle}?variant=${K}`,`${V}_${q}`),onClick:()=>{ae({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:s(Z,{source:X,alt:_,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),d("div",{className:h("flex flex-col items-start justify-center",x().boxItem),children:[Q&&s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:z?.length>0&&z?.map?.((i,r)=>s(ee,{className:"shelf-items-tag",children:i},r))}),S?s(re,{as:"h3",title:S||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",html:S||""}):null,T?s(ie,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:T||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:E?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b?.soldOutText}):d(se,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&P||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&F||""})]})}),d("div",{className:h("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(M,{variant:"secondary",onClick:()=>L(e,t?.index,t,m),className:`
|
|
6
|
-
${t.direction==="vertical"?"w-full":""}
|
|
7
|
-
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(M,{disabled:E,variant:"primary",onClick:()=>H(e,t?.index,t,m),className:`
|
|
8
|
-
${t.direction==="vertical"?"w-full":""}
|
|
9
|
-
`,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{$e as ShelfDisplayHorizontalItem,Ne as ShelfDisplayWrapItem,de as getProductImage};
|
|
1
|
+
import{Fragment as se,jsx as s,jsxs as d}from"react/jsx-runtime";import{useAiuiContext as oe}from"../AiuiProvider/index.js";import{formatVariantPrice as le}from"./shelfDisplay.js";import Z from"../../components/picture.js";import ee from"../../components/badge.js";import{cn as h}from"../../helpers/utils.js";import{Text as ie}from"../../components/text.js";import M from"../../components/button.js";import{gaTrack as ne}from"../../shared/track.js";import{trackUrlRef as ae}from"../../shared/trackUrlRef.js";import{Heading as re}from"../../components/heading.js";import{useExposure as ce}from"../../hooks/useExposure.js";import{useRef as pe,useEffect as me,useMemo as R,useState as te}from"react";const V="image",q="product_shelf",G=999999999e-2,de=e=>{const t=e?.sku,v=e?.variants,y=v?.find(k=>k?.sku===t),N=y?.image?.url||v?.[0]?.image?.url||"",B=y?.image?.altText||v?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:N,altText:B}},Ne=({data:e,configuration:t})=>{const{isDisplayBackImage:v=!1,itemShape:y,metafields:N,isTopTag:B=!1,isShowTag:k,isShowOriginalPrice:U,isShowShortTitle:g=!1}=t||{},{locale:b="es",copyWriting:J,currencyDisplay:z}=oe(),{discounts:A,discountsCopy:$}=N||{},H=pe(null),[L,n]=te([]),[D,K]=te(""),E=(o,l,c,p)=>t?.event?.primaryButton?.(o,l+1,c,p),Q=(o,l,c,p)=>t?.event?.secondaryButton?.(o,l+1,c,p),a=R(()=>{const o=e?.variants||[];if(o.length)return e?.sku?o?.find?.(l=>l?.sku===e?.sku)||o[0]:o?.[0]},[e?.sku,e?.variants]),m=a?.id?.split?.("/")||[],C=m?.[m?.length-1],I=!a?.availableForSale||a?.price?.amount===G||a?.price===G,u=a?.coupons?.[0],P=!!(U&&u),F=e?.price?.currencyCode||"USD",w=R(()=>le({locale:b,amount:P?u?.variant_price4wscode:a?.price,baseAmount:P?a?.price:0,currencyCode:F,currencyDisplay:z}),[F,b,P,u?.variant_price4wscode,a]),{price:j,basePrice:X,discount:_,discountAmount:f}=w,{imageUrl:S,altText:T}=de(e),x=e?.custom_name||e?.title,W=g&&a?.metafields?.infos?.page_short_title||x,O=e?.custom_description||e?.description,i=()=>{if(u?.value_type==="fixed_amount"){const o=f||"",l=o.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(l){const[,c,p,ue]=l;let Y=p;return p.endsWith(".00")?Y=p.replace(/\.00$/,""):p.endsWith(",00")&&(Y=p.replace(/,00$/,"")),`${c}${Y}${ue}`}return o}return _||""};me(()=>{let o=[];if(_||f){const c=`${i()} ${A?.off||$?.off||""}`;K(c),o.push(c)}const l=e?.tags?.filter?.(c=>c?.startsWith?.("CLtag"))?.map?.(c=>c?.replace?.("CLtag:",""))?.slice?.(0,_?1:2);n(o.concat(l))},[e?.tags,_,f,A?.off,$?.off]),ce(H,{componentType:V,componentName:q,componentTitle:x,componentDescription:O,position:t?.index+1});const r=()=>d(se,{children:[k&&L?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:L?.map?.((o,l)=>s(ee,{className:"shelf-items-tag",children:o},l))}):null,W?s(re,{as:"h3",title:W||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] line-clamp-2 h-12",html:W||""}):null,O?s(ie,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:O||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:I?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:J?.soldOutText}):d(se,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&j||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&X||""})]})}),d("div",{className:h("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(M,{variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:()=>!e?.custom_secondary_link&&Q(e,t?.index,t,u),className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?s(M,{disabled:I,variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:()=>!e?.custom_primary_link&&E(e,t?.index,t,u),className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]});return s("div",{ref:H,className:h("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",y==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:v?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:d("div",{className:"relative inset-0 size-full",children:[s(Z,{source:S,alt:T,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:r()})]})}):d("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[D&&B&&s(ee,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:D||""}),s("div",{className:h("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":x,target:t?.target,href:ae(`${b==="us"||!b?"":`/${b}`}/products/${e?.handle}?variant=${C}`,`${V}_${q}`),onClick:()=>{ne({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:s(Z,{source:S,alt:T,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),r()]})},e?.id||e?.handle)},Be=({data:e,configuration:t})=>{const{itemShape:v,itemLength:y,metafields:N,isShowShortTitle:B}=t||{},{discounts:k,discountsCopy:U}=N||{},{locale:g="us",copyWriting:b,currencyDisplay:J}=oe(),[z,A]=te([]),$=pe(null),H=(i,r,o,l)=>t?.event?.primaryButton?.(i,r+1,o,l),L=(i,r,o,l)=>t?.event?.secondaryButton?.(i,r+1,o,l),n=R(()=>{const i=e?.variants||[];if(i.length)return e?.sku&&i.find(r=>r?.sku===e?.sku)||i[0]},[e?.sku,e?.variants]),D=n?.id?.split?.("/")||[],K=D?.[D?.length-1],E=!n?.availableForSale||n?.price?.amount===G||n?.price===G,Q=t?.isShowTag,a=t?.isShowOriginalPrice,m=n?.coupons?.[0],C=!!(a&&m),I=e?.price?.currencyCode||"USD",u=R(()=>le({locale:g,amount:C?m?.variant_price4wscode:n?.price,baseAmount:C?n?.price:0,currencyCode:I,currencyDisplay:J}),[I,g,C,m?.variant_price4wscode,n]),{price:P,basePrice:F,discount:w,discountAmount:j}=u,{imageUrl:X,altText:_}=de(e),f=e?.custom_name||e?.title,S=B&&n?.metafields?.infos?.page_short_title||f,T=e?.custom_description||e?.description;ce($,{componentType:V,componentName:q,componentTitle:f,componentDescription:T,position:t?.index+1});const x=()=>y>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},W=()=>y>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col",O=()=>{if(m?.value_type==="fixed_amount"){const i=j||"",r=i.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(r){const[,o,l,c]=r;let p=l;return l.endsWith(".00")?p=l.replace(/\.00$/,""):l.endsWith(",00")&&(p=l.replace(/,00$/,"")),`${o}${p}${c}`}return i}return w||""};return me(()=>{let i=[];if(w||j){const o=`${O()} ${k?.off||U?.off||""}`;i.push(o)}const r=e?.tags?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,w?1:2);A(i.concat(r))},[e?.tags,w,j,k?.off,U?.off]),s("div",{ref:$,className:h(x().wrap,v==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:d("div",{className:h(W(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:h(x().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":f,target:t?.target,href:ae(`${g==="us"||!g?"":`/${g}`}/products/${e?.handle}?variant=${K}`,`${V}_${q}`),onClick:()=>{ne({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:s(Z,{source:X,alt:_,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),d("div",{className:h("flex flex-col items-start justify-center",x().boxItem),children:[Q&&s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:z?.length>0&&z?.map?.((i,r)=>s(ee,{className:"shelf-items-tag",children:i},r))}),S?s(re,{as:"h3",title:S||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",html:S||""}):null,T?s(ie,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:T||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:E?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b?.soldOutText}):d(se,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&P||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&F||""})]})}),d("div",{className:h("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(M,{variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:()=>!e?.custom_secondary_link&&L(e,t?.index,t,m),className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?s(M,{disabled:E,variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:()=>!e?.custom_primary_link&&H(e,t?.index,t,m),className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{Be as ShelfDisplayHorizontalItem,Ne as ShelfDisplayWrapItem,de as getProductImage};
|
|
10
2
|
//# sourceMappingURL=shelfDisplayItem.js.map
|