@tapcart/mobile-components 0.5.0 → 0.5.2
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.
|
@@ -57,6 +57,9 @@ type TapcartImageBaseProps = {
|
|
|
57
57
|
/** An optional prop to set styles for the image wrapper
|
|
58
58
|
*/
|
|
59
59
|
imageWrapperStyles?: any;
|
|
60
|
+
/** An optional prop to set image radius
|
|
61
|
+
*/
|
|
62
|
+
imageRadius?: number;
|
|
60
63
|
};
|
|
61
64
|
/**
|
|
62
65
|
* Tapcart’s Image component is a wrapper around the HTML image element.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../components/ui/image.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAkC1D,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,gBAAgB,EAAE,MAAM,CAAA;CACzB,CAAA;AAUD,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE,YAAY,KAAK,MAAM,CAAA;AAKrD,KAAK,IAAI,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAI1D,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAChE,qBAAqB,CAAA;AAEvB,KAAK,qBAAqB,GAAG;IAC3B;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,EAAE;QAAE,iBAAiB,EAAE,IAAI,CAAA;KAAE,CAAC,CAAA;IAC1D;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qFAAqF;IACrF,aAAa,CAAC,EAAE,aAAa,CAAA;IAE7B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,CAAA;IAExE;OACG;IACH,kBAAkB,CAAC,EAAE,GAAG,CAAA;
|
|
1
|
+
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../components/ui/image.tsx"],"names":[],"mappings":"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"}
|
|
@@ -65,13 +65,13 @@ function ImagePreload({ imgAttributes }) {
|
|
|
65
65
|
* {@link https://shopify.dev/docs/api/hydrogen-react/components/image}
|
|
66
66
|
*/
|
|
67
67
|
export const Image = React.forwardRef((_a, ref) => {
|
|
68
|
-
var _b;
|
|
69
|
-
var { alt, aspectRatio, crop = "center", data, decoding = "async", height = "auto", loader = shopifyLoader, loading = "lazy", sizes, src, imageWrapperStyles, srcSetOptions = {
|
|
68
|
+
var _b, _c;
|
|
69
|
+
var { alt, aspectRatio, crop = "center", data, decoding = "async", height = "auto", loader = shopifyLoader, loading = "lazy", sizes, src, imageWrapperStyles, imageRadius, srcSetOptions = {
|
|
70
70
|
intervals: 15,
|
|
71
71
|
startingWidth: 100,
|
|
72
72
|
incrementSize: 100,
|
|
73
73
|
placeholderWidth: 100,
|
|
74
|
-
}, width = "100%", objectFit = "cover" } = _a, passthroughProps = __rest(_a, ["alt", "aspectRatio", "crop", "data", "decoding", "height", "loader", "loading", "sizes", "src", "imageWrapperStyles", "srcSetOptions", "width", "objectFit"]);
|
|
74
|
+
}, width = "100%", objectFit = "cover" } = _a, passthroughProps = __rest(_a, ["alt", "aspectRatio", "crop", "data", "decoding", "height", "loader", "loading", "sizes", "src", "imageWrapperStyles", "imageRadius", "srcSetOptions", "width", "objectFit"]);
|
|
75
75
|
/*
|
|
76
76
|
* Gets normalized values for width, height from data prop
|
|
77
77
|
*/
|
|
@@ -173,7 +173,8 @@ export const Image = React.forwardRef((_a, ref) => {
|
|
|
173
173
|
maxHeight: "100%",
|
|
174
174
|
height: "100%",
|
|
175
175
|
width: "100%",
|
|
176
|
-
|
|
176
|
+
borderRadius: `${imageRadius}px`,
|
|
177
|
+
} }))) : (_jsx("div", { className: "w-full h-full bg-stateColors-skeleton", style: Object.assign({ aspectRatio: aspectRatio && aspectRatio !== "auto" ? (_c = normalizedProps.aspectRatio) === null || _c === void 0 ? void 0 : _c.replace(":", "/") : "2/3" }, imageWrapperStyles) })) }))] }));
|
|
177
178
|
});
|
|
178
179
|
/**
|
|
179
180
|
* The shopifyLoader function is a simple utility function that takes a src, width,
|
|
@@ -134,7 +134,7 @@ const productCardFavoriteVariants = cva("absolute ", {
|
|
|
134
134
|
},
|
|
135
135
|
});
|
|
136
136
|
const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFavoriteClick, onQuickAdd, openProduct, className, }) => {
|
|
137
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
|
|
137
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19;
|
|
138
138
|
const { variants, images, title, tags } = product;
|
|
139
139
|
// Select the variant that has the lowest price that is available or just the lowest price if none are available
|
|
140
140
|
let searchVariants = variants.filter((variant) => variant.available);
|
|
@@ -233,16 +233,17 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
|
|
|
233
233
|
}, {
|
|
234
234
|
"text-center": ((_3 = config.productTitle) === null || _3 === void 0 ? void 0 : _3.textAlignment) === "center",
|
|
235
235
|
}, {
|
|
236
|
-
"line-clamp-2
|
|
237
|
-
|
|
236
|
+
"line-clamp-2": (_4 = config.productTitle) === null || _4 === void 0 ? void 0 : _4.wrapText,
|
|
237
|
+
"line-clamp-1": !((_5 = config.productTitle) === null || _5 === void 0 ? void 0 : _5.wrapText),
|
|
238
|
+
}, "text-textColors-productTitle"), style: { fontSize: (_6 = config.productTitle) === null || _6 === void 0 ? void 0 : _6.fontSize } }, { children: title })) }))), _jsxs("div", Object.assign({ className: cn("flex flex-row w-full gap-2 mt-1 justify-end", { "justify-start": ((_7 = config.price) === null || _7 === void 0 ? void 0 : _7.textAlignment) === "left" }, { "justify-end": ((_8 = config.price) === null || _8 === void 0 ? void 0 : _8.textAlignment) === "right" }, { "justify-center": ((_9 = config.price) === null || _9 === void 0 ? void 0 : _9.textAlignment) === "center" }) }, { children: [((_10 = config.price) === null || _10 === void 0 ? void 0 : _10.enabled) && (_jsx(Price, { price: parseFloat(variant.price.amount), isSale: !!variant.compareAtPrice &&
|
|
238
239
|
variant.compareAtPrice &&
|
|
239
|
-
parseFloat((
|
|
240
|
+
parseFloat((_11 = variant.compareAtPrice) === null || _11 === void 0 ? void 0 : _11.amount) >
|
|
240
241
|
parseFloat(variant.price.amount), compareAtPrice: variant.compareAtPrice &&
|
|
241
|
-
parseFloat((
|
|
242
|
+
parseFloat((_12 = variant.compareAtPrice) === null || _12 === void 0 ? void 0 : _12.amount), currency: tapcartData.currency.code, locale: tapcartData.currency.locale, fontSize: (_13 = config.price) === null || _13 === void 0 ? void 0 : _13.fontSize })), ((_14 = config.favoritesIcon) === null || _14 === void 0 ? void 0 : _14.enabled) &&
|
|
242
243
|
config.favoritesIcon.layoutType === "below-image-on-right" && (_jsx("div", Object.assign({ className: "w-8 h-8 flex items-center justify-center" }, { children: _jsx(Favorite, { selected: favorited, onClick: (e) => {
|
|
243
244
|
onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
|
|
244
|
-
}, size: "small", icon: ((
|
|
245
|
-
? (
|
|
246
|
-
: undefined, cornerRadius: (
|
|
245
|
+
}, size: "small", icon: ((_16 = (_15 = config.favoritesIcon) === null || _15 === void 0 ? void 0 : _15.icon) === null || _16 === void 0 ? void 0 : _16.type) === "internal"
|
|
246
|
+
? (_18 = (_17 = config.favoritesIcon) === null || _17 === void 0 ? void 0 : _17.icon) === null || _18 === void 0 ? void 0 : _18.url
|
|
247
|
+
: undefined, cornerRadius: (_19 = config.favoritesIcon) === null || _19 === void 0 ? void 0 : _19.cornerRadius }) })))] }))] }))] })) })));
|
|
247
248
|
};
|
|
248
249
|
export { ProductCard };
|
package/dist/styles.css
CHANGED
|
@@ -824,6 +824,12 @@ video {
|
|
|
824
824
|
.mt-auto {
|
|
825
825
|
margin-top: auto;
|
|
826
826
|
}
|
|
827
|
+
.line-clamp-1 {
|
|
828
|
+
overflow: hidden;
|
|
829
|
+
display: -webkit-box;
|
|
830
|
+
-webkit-box-orient: vertical;
|
|
831
|
+
-webkit-line-clamp: 1;
|
|
832
|
+
}
|
|
827
833
|
.line-clamp-2 {
|
|
828
834
|
overflow: hidden;
|
|
829
835
|
display: -webkit-box;
|
|
@@ -1043,6 +1049,9 @@ video {
|
|
|
1043
1049
|
--tw-rotate: 90deg;
|
|
1044
1050
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1045
1051
|
}
|
|
1052
|
+
.transform {
|
|
1053
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1054
|
+
}
|
|
1046
1055
|
@keyframes pulse {
|
|
1047
1056
|
|
|
1048
1057
|
50% {
|