@redneckz/wildless-cms-uni-blocks 0.14.454 → 0.14.456

package/bundle/bundle.umd.js

@@ -3506,17 +3506,41 @@
     const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors = [], align = 'text-left', padding, ...rest }) => (jsx(BlockWrapper, { className: style('flex flex-col justify-left', className), defaultPadding: "p-2xl", ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, title: jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: align }), rightImage: image?.src ? (jsx(Img, { className: "flex justify-center align-center mb-xl", image: image })) : null, buttons: renderButtonsSection([button], { buttonClassName: 'w-full self-end' }), children: [colors?.length ? (jsxs("div", { className: "flex text-secondary-text mb-m", children: [jsx("div", { className: "mr-xs", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0426\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null] }) })));
     const renderColorOption = (color, i) => (jsx("figure", { className: `w-6 h-6 ml-s border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
 
+    // TODO: Выпилить экраны, брать напрямую из конфига
+    const screens = {
+        // => @media (min-width: 640px) { ... }
+        sm: '640px',
+        // => @media (min-width: 768px) { ... }
+        md: '768px',
+        // => @media (min-width: 1024px) { ... }
+        lg: '1024px',
+        // => @media (min-width: 1280px) { ... }
+        xl: '1280px',
+    };
+    const useMediaQuery = (screenRange) => {
+        const screenWidth = screens[screenRange];
+        const mq = `(min-width: ${screenWidth})`;
+        return window.matchMedia(mq).matches;
+    };
+
+    const useMobileMode = () => {
+        return !useMediaQuery('md');
+    };
+
     const CarouselLinkButton = JSX(({ icon, ...linkProps }) => {
         const link = useLink();
         const { text, href, target, onClick } = link(linkProps);
-        return text ? (jsx("div", { className: style('h-32 rounded-lg bg-white text-secondary-text flex items-center justify-center'), children: jsx("a", { role: "link", href: href, target: target, onClick: onClick, children: jsxs("div", { className: "flex flex-col items-center gap-4 break-words max-w-[150px]", children: [icon ? (jsx(Img, { className: style(''), image: {
+        const isMobileMode = useMobileMode();
+        const iconSize = isMobileMode ? '30' : '50';
+        const textStyle = 'font-light @lg:font-normal text-primary-text text-center text-xs @lg:text-sm whitespace-wrap';
+        return text ? (jsx("div", { className: style('p-3 rounded-lg bg-white text-secondary-text flex justify-center'), children: jsx("a", { role: "link", href: href, target: target, onClick: onClick, children: jsxs("div", { className: "flex flex-col items-center gap-3 break-words max-w-[150px]", children: [icon ? (jsx(Img, { image: {
                                 ...icon,
                                 iconVersion: icon?.iconVersion,
-                            }, width: "50", height: "50", alt: text })) : null, jsx("div", { className: "text-primary-text text-center text-sm whitespace-wrap min-h-8", children: text })] }) }) })) : null;
+                            }, width: iconSize, height: iconSize, alt: text })) : null, jsx("div", { className: textStyle, children: text })] }) }) })) : null;
     });
 
-    const CarouselLinks = JSX(({ className, additionalDescription, description, links, title, ...rest }) => (jsx(BlockWrapper, { defaultPadding: "p-5xl", className: style('overflow-hidden', className), ...rest, children: jsxs("div", { className: "flex flex-col lg:flex-row gap-4xl justify-between", children: [jsxs("div", { className: "flex-1", children: [jsx(Headline, { isEmbedded: true, title: title, description: description, as: "h1", align: "text-left" }), jsx(Headline, { className: "pt-m", description: additionalDescription, align: "text-left", isEmbedded: true })] }), links?.length ? renderLinks(links) : null] }) })));
-    const renderLinks = (links) => (jsx("div", { className: style('lg:grid-cols-9 lg:[&>*]:col-span-2 lg:[&>*:nth-child(14n+2)]:col-span-3 lg:[&>*:nth-child(7n+5)]:col-span-3', 'lg:[&>*:nth-child(7n+6)]:col-span-3 lg:[&>*:nth-child(7n+7)]:col-span-3 lg:[&>*:nth-child(14n+10)]:col-span-3 lg:w-3/6', 'grid-cols-3 max-lg:[&>*:not(:nth-child(-n+3)):nth-child(4n+3)]:col-span-2 max-lg:[&>*:not(:nth-child(-n+3)):nth-child(4n+4)]:col-span-2', 'grid gap-4'), children: links.map((link, index) => (jsx(CarouselLinkButton, { ...link }, String(index)))) }));
+    const CarouselLinks = JSX(({ className, additionalDescription, description, links, title, ...rest }) => (jsx(BlockWrapper, { defaultPadding: "p-5xl", className: style('overflow-hidden', className), ...rest, children: jsxs("div", { className: "flex flex-col @lg:flex-row gap-5 justify-between", children: [jsxs("div", { className: "flex-1", children: [jsx(Headline, { isEmbedded: true, title: title, description: description, as: "h1", align: "text-left", headlineVersion: "XL" }), jsx(Headline, { className: "pt-m", description: additionalDescription, align: "text-left", isEmbedded: true })] }), links?.length ? renderLinks(links) : null] }) })));
+    const renderLinks = (links) => (jsx("div", { className: style('@lg:grid-cols-9 @lg:[&>*]:col-span-2 @lg:[&>*:nth-child(14n+2)]:col-span-3 @lg:[&>*:nth-child(7n+5)]:col-span-3', '@lg:[&>*:nth-child(7n+6)]:col-span-3 @lg:[&>*:nth-child(7n+7)]:col-span-3 @lg:[&>*:nth-child(14n+10)]:col-span-3 @lg:w-3/6', 'grid-cols-3 max-lg:[&>*:not(:nth-child(-n+3)):nth-child(4n+3)]:col-span-2 max-lg:[&>*:not(:nth-child(-n+3)):nth-child(4n+4)]:col-span-2', 'grid gap-3 @lg:gap-5'), children: links.map((link, index) => (jsx(CarouselLinkButton, { ...link }, String(index)))) }));
 
     const getAspectsWithInclude = (data, include) => data?.map(({ aspectName, params }) => ({
         aspectName,
@@ -6130,7 +6154,7 @@
                         ...rest?.options,
                         slotName,
                         parent: block,
-                        extraProps: { className: key === slotName ? '!block' : 'hidden' }, //? hotfix for https://github.com/redneckz/wcms/issues/1816
+                        extraProps: { className: key === slotName ? '!flex' : 'hidden' }, //? hotfix for https://github.com/redneckz/wcms/issues/1816
                     })) })] }));
     }, {
         slots: ({ tabs }) => tabs?.filter((_) => _.type === 'group').map(getSlotName) || [],
@@ -6571,7 +6595,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.453";
+    const packageVersion = "0.14.455";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;