@total_onion/onion-library 1.0.0

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/better-reviews-widget.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+const blockClassname = "post-type-filter-grid-v2";
+
+const props = defineProps(["post", "element"]);
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+
+</script>
+<template>
+	<div :class="`${blockClassname}__better-reviews ${blockClassname}__info-item`"
+		:style="`${gridLayoutString} ${textEditorStylesString}`">
+		<div v-html="props.post.rating"></div>
+	</div>
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/buy-now-widget.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { gridLayoutElement } from "./ptfg-utils.vue";
+const props = defineProps(["post", "element", "ctaIcons", "blockClassname"]);
+
+const gridLayoutString = gridLayoutElement(props);
+
+const blockClassname = props.blockClassname;
+const ctaIcons = props.ctaIcons;
+const element = props.element;
+const ctaStyle = element.cta_style.replace('__', '');
+
+const post = props.post;
+
+const click2buyPimId = post.post_data.click_to_buy_pim_id;
+const debrainId = post.post_data.debrain_pim_id;
+const productDebrainSkuId = post.post_data.debrain_sku_id;
+const directLinkURL = post.product_buynow_direct_link;
+
+const productEANs = post.post_data.mikmak_ean_ids;
+const mikmakDrawerWidgetID = post.mikmak_drawer_widget_ID;
+const relatedProductEANs = post.related_product_eans;
+
+let totalProductEANs = '';
+if (productEANs !== '') {
+    totalProductEANs = productEANs + (relatedProductEANs !== '' ? ',' + relatedProductEANs : '');
+}
+
+</script>
+<template>
+    <div :class="`${blockClassname}__product-buy-now ${blockClassname}__info-item`"
+        :style="`--post-colour: ${postColour}; --post-text-colour-style: ${postTextColourStyle}; ${gridLayoutString}`">
+        <a href="#"
+            :class="`${blockClassname}__cta cmpl-cta-style-${ctaStyle} ${blockClassname}__cta-animation-style-${ctaAnimationStyle} ctb`"
+            v-if="element.buy_now_text && post.post_data.buy_now_option_select.slice(2) == 'ctb'" data-ctbuy
+            :data-ctbuy-variant="click2buyPimId">
+            <span :class="`${blockClassname}__cta-span`">{{ element.buy_now_text }}</span>
+            <span :class="`${blockClassname}__cta-icon`" v-if="element.enable_cta_icon">
+                <img :class="`${blockClassname}__icon-image style-svg`" :src="ctaIcons.cta_link_icon">
+            </span>
+        </a>
+        <a href="#"
+            :class="`dloc-link ${blockClassname}__cta cmpl-cta-style-${ctaStyle} ${blockClassname}__cta-animation-style-${ctaAnimationStyle} wtb`"
+            v-if="element.buy_now_text && post.post_data.buy_now_option_select.slice(2) == 'wtb'" data-ctbuy
+            :data-filter="debrainId" data-action="where-to-buy">
+            <span :class="`${blockClassname}__cta-span`">{{ element.buy_now_text }}</span>
+            <span :class="`${blockClassname}__cta-icon`" v-if="element.enable_cta_icon">
+                <img :class="`${blockClassname}__icon-image style-svg`" :src="ctaIcons.cta_link_icon">
+            </span>
+        </a>
+        <a :href="directLinkURL[0]"
+            :class="`${blockClassname}__cta cmpl-cta-style-${ctaStyle} ${blockClassname}__cta-animation-style-${ctaAnimationStyle} link`"
+            v-if="element.buy_now_text && post.post_data.buy_now_option_select.slice(2) == 'link'"
+            :target="(directLinkURL[2] !== '' ? directLinkURL[2] : '_blank')">
+            <span :class="`${blockClassname}__cta-span`">{{ element.buy_now_text }}</span>
+            <span :class="`${blockClassname}__cta-icon`" v-if="element.enable_cta_icon">
+                <img :class="`${blockClassname}__icon-image style-svg`" :src="ctaIcons.cta_link_icon">
+            </span>
+        </a>
+        <wtb-button v-if="post.post_data.buy_now_option_select.slice(2) == 'wtb-v2' && productDebrainSkuId"
+            :sku="productDebrainSkuId"></wtb-button>
+        <a href="#" :data-mm-wtbid="`${mikmakDrawerWidgetID}`" :data-mm-ids="`${totalProductEANs}`"
+            :data-mm-default-id="`${productEANs}`"
+            :class="`${blockClassname}__cta cmpl-cta-style-${ctaStyle} ${blockClassname}__cta-animation-style-${ctaAnimationStyle} mikmak-buy-now`"
+            v-if="element.buy_now_text && post.post_data.buy_now_option_select.slice(2) == 'mikmak'"
+            :data-filter="debrainId">
+            <span :class="`${blockClassname}__cta-span`">{{ element.buy_now_text }}</span>
+            <span :class="`${blockClassname}__cta-icon`" v-if="element.enable_cta_icon">
+                <img :class="`${blockClassname}__icon-image style-svg`" :src="ctaIcons.cta_link_icon">
+            </span>
+        </a>
+    </div>
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/cocktail-category.vue

@@ -0,0 +1,54 @@
+<script setup>
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v2";
+const textColourType = props.element?.text_style?.text_colour.slice(2);
+let textColour = textColourType;
+
+if (textColourType == "post_text_colour_style") {
+	textColour = props.post.post_data?.post_text_colour_style?.slice(2);
+}
+if (textColourType == "post_colour") {
+	textColour = props.post.post_data?.post_colour;
+}
+</script>
+<template>
+	<div
+		:class="`${blockClassname}__cocktail-category ${blockClassname}__info-item`"
+		:style="`--grid-column-start-mobile: ${
+			element.grid_layout_element?.grid_column_start_mobile
+		}; --grid-column-span-mobile: ${
+			element.grid_layout_element?.grid_column_span_mobile
+		}; --grid-row-start-mobile: ${
+			element.grid_layout_element?.grid_row_start_mobile
+		}; --grid-row-span-mobile: ${
+			element.grid_layout_element?.grid_row_span_mobile
+		}; --grid-column-start: ${
+			element.grid_layout_element?.grid_column_start
+		}; --grid-column-span: ${
+			element.grid_layout_element?.grid_column_span
+		}; --grid-row-start: ${
+			element.grid_layout_element?.grid_row_start
+		}; --grid-row-span: ${
+			element.grid_layout_element?.grid_row_span
+		}; --grid-horizontal-placement: ${element.grid_layout_element?.grid_horizontal_placement.slice(
+			2
+		)}; --grid-vertical-placement: ${element.grid_layout_element?.grid_vertical_placement.slice(
+			2
+		)}; --text-align: ${element.text_style?.text_align.slice(
+			2
+		)}; --text-transform: ${element.text_style?.text_transform.slice(
+			2
+		)}; --font-weight: ${element.text_style.text_font_weight.slice(
+			2
+		)}; --font-style: ${element.text_style.font_style.slice(
+			2
+		)}; --text-colour: ${textColour}`"
+	>
+		<p
+			v-html="post.cocktail_category"
+			:class="`${blockClassname}__cocktail-category--item ${element.text_style?.typography_style.slice(
+				2
+			)}`"
+		></p>
+	</div>
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/cocktail-tasting-notes.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+const props = defineProps(["post", "element"]);
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+
+const blockClassname = "post-type-filter-grid-v2";
+const element = props.element;
+</script>
+<template>
+	<div :class="`${blockClassname}__cocktail-tasting-notes ${blockClassname}__info-item`"
+		:style="`${gridLayoutString} ${textEditorStylesString}`">
+		<div v-html="props.post.post_data?.cocktail_tasting_notes"></div>
+	</div>
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/divider-widget.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { gridLayoutElement } from "./ptfg-utils.vue";
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v2";
+const gridLayoutString = gridLayoutElement(props);
+
+</script>
+<template>
+    <div :class="`${blockClassname}__post-divider ${blockClassname}__info-item`" :style="`${gridLayoutString}`">
+    </div>
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/drink-tastes.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+const props = defineProps(["post", "element"]);
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+const blockClassname = "post-type-filter-grid-v2";
+const textColourType = props.element?.text_style?.text_colour.slice(2);
+let textColour = textColourType;
+
+if (textColourType == "post_text_colour_style") {
+	textColour = props.post.post_data?.post_text_colour_style?.slice(2);
+}
+if (textColourType == "post_colour") {
+	textColour = props.post.post_data?.post_colour;
+}
+</script>
+<template>
+	<div :class="`${blockClassname}__drink-tastes ${blockClassname}__info-item`"
+		:style="`${gridLayoutString} ${textEditorStylesString}`">
+		<template v-for="(category, index) in props.post.categories" :key="index">
+			<div v-if="category.taxonomy === 'taste'" v-html="category.name" :class="`${blockClassname}__drink-taste--item ${element.text_style?.typography_style.slice(
+				2
+			)}`"></div>
+		</template>
+	</div>
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/featured-post-component.vue

@@ -0,0 +1,61 @@
+<script setup>
+const props = defineProps(["featuredpost", "fields", "mappedIcons", "ctaStyles"]);
+
+const blockClassname = "post-type-filter-grid-v2";
+let sizes = "(min-width: 1440px) 50vw, (min-width: 1024px) 50vw, (min-width: 768px) 768px') 100vw";
+const post = props.featuredpost.post;
+
+const iconImage = props.mappedIcons['cta_link_icon']['type'] == 'image/svg+xml' ? props.mappedIcons['cta_link_icon']['image'] : '<img src="' + props.mappedIcons['cta_link_icon']['image'] + '">';
+// const enableCtaIcon = props.ctaStyles[ctaStyle - 1]?.cta_settings?.include_cta_icon;
+let ctaAnimationStyle = '1';
+if (props.element?.cta_style_select) {
+    if (props.element?.cta_style_select?.slice(2) == 'post-colour') {
+        postCtaStyle = 'post-colour';
+        postCtaStyleValue = `color: ${postColour};--post-text-colour-style: ${postColour};`;
+    }
+    if (props.element?.cta_style_select?.slice(2) == 'post-text-colour-style') {
+        postCtaStyle = 'post-text-colour-style';
+        postCtaStyleValue = `color: ${postTextColourStyle};--post-text-colour-style: ${postTextColourStyle};`;
+    }
+    if (props.ctaStyles) {
+        ctaAnimationStyle = props.ctaStyles[ctaStyle - 1]?.cta_settings?.cta_animation_style;
+    }
+}
+
+</script>
+<template>
+	<a :class="`${blockClassname}__featured-post-container-link`" :href="featuredpost.post_link" :aria-label="post.post_title">
+		<div :class="`${blockClassname}__featured-post-image-container`">
+			<picture>
+				<source media="(min-width: 1024px)" :srcset="props.featuredpost.post_image_src" width="1" height="1" />
+				<source :srcset="props.featuredpost.post_image_src_mobile" width="16" height="9"/>
+				<img v-if="props.featuredpost.post_image_src" :class="`${blockClassname}__featured-post-image`"
+					loading="lazy" :src="props.featuredpost.post_image_src" :width="props.featuredpost.post_image_width"
+					:height="props.featuredpost.post_image_height" :srcset="props.post_image_srcset" :sizes="sizes"
+					:alt="props.post_image_alt" />
+			</picture>
+			<div v-if="featuredpost.post_category" :class="`${blockClassname}__featured-post-category`">
+				<template v-for="(category, index) in featuredpost.post_category" :key="index">
+					<p v-if="featuredpost.post_category != 'translation_priority'" v-html="category.name"
+						:class="`${blockClassname}__featured-post-category--item`">
+					</p>
+				</template>
+			</div>
+		</div>
+		<div :class="`${blockClassname}__featured-post-content-container`">
+			<h2 v-if="post.post_title" :class="`${blockClassname}__featured-post-title`">{{ post.post_title }}</h2>
+			<p v-if="featuredpost.post_info_subtitle" :class="`${blockClassname}__featured-post-subtitle`">{{
+		featuredpost.post_info_subtitle }}</p>
+			<p v-if="featuredpost.post_info_description" :class="`${blockClassname}__featured-post-description`">{{
+		featuredpost.post_info_description }}</p>
+			<a v-if="featuredpost.post_link"
+				:class="`${blockClassname}__featured-post-link ${blockClassname}__cta cmpl-cta-style-${fields.featured_post_button_style} cmpl-cta-animation-style-${ctaAnimationStyle}`"
+				:href="featuredpost.post_link">
+					<span :class="`${blockClassname}__cta-span`">Read more</span>
+					<span :class="`${blockClassname}__cta-icon cmpl-cta-icon ${blockClassname}__icon-image`"
+                v-html="iconImage">
+            </span>
+			</a>
+		</div>
+	</a>
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/global-image-widget.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { gridLayoutElement } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element", "fields", "globalImages"]);
+const blockClassname = "post-type-filter-grid-v2";
+const imageSelect = props.element.image_select?.slice(2);
+let globalImage = '';
+if (props.globalImages[imageSelect]) {
+    globalImage = props.globalImages[imageSelect]['global_image'];
+}
+let globalImageWidthString = `--global-image-width-mobile: ${props.element.global_image_width}%; --global-image-width-desktop: ${props.element.global_image_width}%;`;
+const globalImageStyles = `--global-image-z-index: ${props.element.global_image_zindex}; --global-image-position: ${props.element.global_image_position.replace('__', '')}; --global-image-fit-style: ${props.element.global_image_fit_style.replace('__', '')}; --global-image-max-width-desktop: ${props.element.global_image_max_width_desktop}%; --global-image-max-width-mobile: ${props.element.global_image_max_width_mobile}%;`
+let sizes = "(min-width: 1440px) 50vw, (min-width: 1024px) 50vw, (min-width: 768px) 768px') 100vw";
+
+const gridLayoutString = gridLayoutElement(props);
+
+</script>
+<template>
+    <img v-if="globalImage.url"
+        :class="`${blockClassname}__info-item ${blockClassname}__global-image  ${blockClassname}__global-image--1`"
+        loading="lazy" :src="globalImage.url" :width="globalImage.width" :height="globalImage.height" :sizes=sizes
+        :alt="globalImage.alt" :style="`${gridLayoutString} ${globalImageStyles}`" />
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/media-widget.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { gridLayoutElement } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element", "fields"]);
+const blockClassname = "post-type-filter-grid-v2";
+const imageType = 'image';
+let postType = props.post.post_data.post_type;
+const gridLayoutString = gridLayoutElement(props);
+
+</script>
+<template>
+    <div :class="`${blockClassname}__media-image-container ${blockClassname}__info-item`" :href="props.post.link"
+        :style="`${gridLayoutString}`">
+        <img :class="`${blockClassname}__post-image ${blockClassname}__media-${imageType}`" loading="lazy"
+            :src="props.post.post_images['post_' + imageType + '_src']"
+            :width="props.post.post_images['post_' + imageType + '_width']"
+            :height="props.post.post_images['post_' + imageType + '_height']"
+            :srcset="props.post.post_images['post_' + imageType + '_srcset']"
+            sizes="(max-width: 414px) 100px, (max-width: 768px) 150px, (max-width: 1024px) 200px, (max-width: 1440px) 275px, (max-width: 1800px) 300px"
+            :alt="props.post.post_images['post_' + imageType + '_alt_text']"
+            :style="`--post-image-width: ${element.post_image_width}%;`" />
+    </div>
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/person-email-widget.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element", "ctaIcons"]);
+const blockClassname = "post-type-filter-grid-v2";
+
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+
+</script>
+<template>
+    <a :href="`mailto:${post.post_data.person_email}`"
+        :class="`${blockClassname}__person-email ${blockClassname}__info-item ${element.text_style?.typography_style.slice(2)}`"
+        :style="`${gridLayoutString} ${textEditorStylesString}`">
+        <img v-if="element.enable_icon" :class="`${blockClassname}__person-email-icon style-svg`"
+            :src="props.ctaIcons.cta_email_icon">
+        {{ element.display_email_as_person_name ? post.post_data.person_name : post.post_data.person_email.toLowerCase()
+        }}
+    </a>
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/person-name-widget.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v2";
+
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+</script>
+<template>
+    <p :class="`${blockClassname}__person-name ${blockClassname}__info-item ${element.text_style?.typography_style.slice(2)}`"
+        :style="`${gridLayoutString} ${textEditorStylesString}`">
+        {{ post.post_data.person_name }}
+    </p>
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/person-questionaire-widget.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element", "ctaIcons"]);
+const blockClassname = "post-type-filter-grid-v2";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+
+</script>
+<template>
+    <div v-for="questions in props.post_data.person_questionaire"
+        :class="`${blockClassname}__person-email ${blockClassname}__info-item ${element.text_style?.typography_style.slice(2)}`"
+        :style="`${gridLayoutString} ${textEditorStylesString}`">
+        <img :class="`${blockClassname}__person-email-icon`" :src="props.ctaIcons.cta_email_icon">
+        {{ post.post_data.person_email }}
+    </div>
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/person-rating-widget.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { gridLayoutElement } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v2";
+const gridLayoutString = gridLayoutElement(props);
+
+</script>
+<template>
+    <div :class="`${blockClassname}__person-rating ${blockClassname}__info-item`" :style="`${gridLayoutString}`">
+        <div :class="`${blockClassname}__person-rating-star-container`" :key="index">
+            <svg :class="`${blockClassname}__person-rating-star`" v-for="index in Number(post.post_data.star_rating)"
+                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19.02">
+                <defs></defs>
+                <g id="a" />
+                <g id="b">
+                    <g id="c">
+                        <polygon class="d"
+                            points="10 15.77 3.82 19.02 5 12.14 0 7.27 6.91 6.26 10 0 13.09 6.26 20 7.27 15 12.14 16.18 19.02 10 15.77" />
+                    </g>
+                </g>
+            </svg>
+        </div>
+    </div>
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-author-widget.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { gridLayoutElement } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v2";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+
+</script>
+<template>
+    <p :class="`${blockClassname}__post-author ${blockClassname}__info-item ${element.text_style?.typography_style.slice(2)}`"
+        :style="`${gridLayoutString} ${textEditorStylesString}`">
+        {{ post.author_display_name }}
+    </p>
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-category-widget.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v2";
+
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+
+</script>
+<template>
+    <div :class="`${blockClassname}__post-category ${blockClassname}__info-item`"
+        :style="`${gridLayoutString} ${textEditorStylesString}`">
+        <template v-for="(category, index) in props.post.categories" :key="index">
+            <p v-if="category.taxonomy != 'translation_priority'" v-html="category.name"
+                :class="`${blockClassname}__post-category--item ${element.text_style?.typography_style.slice(2)}`">
+            </p>
+        </template>
+    </div>
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-component.vue

@@ -0,0 +1,130 @@
+<script setup>
+import PostAuthor from "./post-author-widget.vue";
+import PostImage from "./post-image-widget.vue";
+import GlobalImage from "./global-image-widget.vue";
+import PostCategories from "./post-category-widget.vue";
+import PostTags from "./post-tags-widget.vue";
+import Divider from "./divider-widget.vue";
+import PostHeadline from "./post-headline-widget.vue";
+import PostLink from "./post-link-widget.vue";
+import PostPublishDate from "./post-publish-widget.vue";
+import PostTitle from "./post-title-widget.vue";
+import SpacerV2 from "./spacer-widget.vue";
+import PostInfoDescription from "./post-info-description.vue";
+import PostInfoSubtitle from "./post-info-subtitle.vue";
+import PostTextAlternativeStyle from "./post-text-alternative-style.vue";
+import MediaImage from "./media-widget.vue";
+import BetterReviews from "./better-reviews-widget.vue";
+import ProductDetailsDescription from "./product-description.vue";
+import ProductDetailsName from "./product-details-name.vue";
+import ProductDetailsBrand from "./product-brand.vue";
+import ProductAbv from "./product-abv.vue";
+import ProductAgeStatement from "./product-age-statement.vue";
+import ProductBazaarvoice from "./product-bazaarvoice.vue";
+import ProductCaskType from "./product-cask-type.vue";
+import ProductCountry from "./product-country.vue";
+import ProductFinish from "./product-finish.vue";
+import ProductHistory from "./product-history.vue";
+import ProductLink from "./product-link.vue";
+import ProductDetailsPrice from "./product-details-price.vue";
+import ProductPrice from "./product-price.vue";
+import ProductNose from "./product-nose.vue";
+import ProductName from "./product-name.vue";
+import ProductSlug from "./product-slug.vue";
+import ProductTaste from "./product-taste.vue";
+import ProductWhiskyType from "./product-whisky-type.vue";
+import PersonName from "./person-name-widget.vue";
+import PersonEmail from "./person-email-widget.vue";
+import PersonRating from "./person-rating-widget.vue";
+import SocialMediaItem from "./social-media-item.vue";
+import BuyNow from "./buy-now-widget.vue";
+import DrinkTastes from "./drink-tastes.vue";
+import CocktailTastingNotes from "./cocktail-tasting-notes.vue";
+import CocktailCategories from "./cocktail-category.vue";
+import ShopifyAddToCart from "./shopify-add-to-cart.vue";
+const widgetComponents = {
+	PostAuthor,
+	PostImage,
+	PostCategories,
+	PostTags,
+	Divider,
+	PostHeadline,
+	PostLink,
+	PostPublishDate,
+	PostTitle,
+	SpacerV2,
+	PostInfoDescription,
+	PostTextAlternativeStyle,
+	MediaImage,
+	GlobalImage,
+	BetterReviews,
+	ProductDetailsDescription,
+	ProductDetailsBrand,
+	ProductDetailsName,
+	ProductDetailsPrice,
+	ProductPrice,
+	ProductAbv,
+	ProductAgeStatement,
+	ProductBazaarvoice,
+	ProductCaskType,
+	ProductCountry,
+	ProductFinish,
+	ProductHistory,
+	ProductLink,
+	ProductNose,
+	ProductName,
+	ProductSlug,
+	ProductTaste,
+	ProductWhiskyType,
+	PersonEmail,
+	PersonName,
+	PersonRating,
+	SocialMediaItem,
+	BuyNow,
+	CocktailTastingNotes,
+	CocktailCategories,
+	DrinkTastes,
+	PostInfoSubtitle,
+	ShopifyAddToCart,
+};
+const widgetNames = [];
+const props = defineProps([
+	"postDataConfig",
+	"post",
+	"ctaIcons",
+	"mappedIcons",
+	"ctaStyles",
+	"globalImages",
+	"gradientOverlayColour",
+	"fields",
+	"options",
+	"imageSizesAttribute"
+]);
+props.postDataConfig?.forEach((widget) => {
+	let nameArr = widget.acf_fc_layout.split("_");
+	let name = "";
+	nameArr.forEach((part) => {
+		const caps = part.charAt(0).toUpperCase() + part.slice(1);
+		name += caps;
+	});
+	widgetNames.push(name);
+});
+
+const blockClassname = "post-type-filter-grid-v2";
+</script>
+
+<template>
+	<div :class="`${blockClassname}__overlay ${blockClassname}__overlay--gradient-overlay-top`"
+		v-if="fields.enable_gradient_overlay"
+		:style="`--gradient-colour: ${props.gradientOverlayColour}; --gradient-origin: 180deg; --gradient-amount: ${fields.gradient_overlay_amount}%; --gradient-zindex: 5; --gradient-spread: ${fields.gradient_overlay_spread}%; --gradient-opacity: ${fields.gradient_overlay_opacity};--gradient-overlay-row-end: ${fields.gradient_overlay_row_end}; --gradient-overlay-row-start: ${fields.gradient_overlay_row_start};`">
+	</div>
+	<a v-if="fields.enable_post_cover_link" :href="post.link" target="_self"
+		:class="`${blockClassname}__post-cover-link`, fields.enable_post_cover_link_hover_effect ? 'post-cover-link-hover-effect' : ''"
+		:aria-label="post.title"></a>
+	<template v-for="(widget, index) in widgetNames" :key="index">
+		<component :is="widgetComponents[widget]" :post="props.post" :fields="fields" :options="options"
+			:element="props.postDataConfig[index]" :blockClassname="blockClassname" :ctaIcons="ctaIcons"
+			:ctaStyles="ctaStyles" :mappedIcons="mappedIcons" :globalImages="globalImages"
+			:imageSizesAttribute="props.imageSizesAttribute" />
+	</template>
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-headline-widget.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v2";
+
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+
+</script>
+<template>
+    <h3 :class="`${blockClassname}__post-headline ${blockClassname}__info-item ${element.text_style?.typography_style.slice(2)}`"
+        :style="`${gridLayoutString} ${textEditorStylesString}`">
+        {{ element.headline_text }}
+    </h3>
+</template>

package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-image-widget.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { gridLayoutElement } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element", "fields", "imageSizesAttribute"]);
+const blockClassname = "post-type-filter-grid-v2";
+const imageType = props.element?.image_select?.slice(2);
+const imageTypeSecondary = 'image_alt';
+const setAsBackgroundImage = props.element?.set_as_background_image;
+let positioningString = '';
+let postImageWidthString = `--post-image-width-mobile: ${props.element.post_image_width_mobile || props.element.post_image_width}%; --post-image-width-portrait: ${props.element.post_image_width_portrait || props.element.post_image_width}%; --post-image-width-desktop: ${props.element.post_image_width}%;`;
+if (imageType === 'image_accent') {
+    const elementPositioning = props.element?.post_image_positioning.element_positioning;
+    positioningString = `
+--element-rotation-desktop: ${elementPositioning.desktop_positioning.element_rotation_desktop}deg;
+--element-rotation-mobile: ${elementPositioning.desktop_positioning.element_rotation_desktop}deg;
+--element-z-index: ${elementPositioning.element_z_index};
+--element-horizontal-offset-mobile: ${elementPositioning.mobile_positioning.horizontal_offset}%;
+--element-vertical-offset-mobile: ${elementPositioning.mobile_positioning.vertical_offset}%;
+--element-horizontal-offset-desktop: ${elementPositioning.desktop_positioning.horizontal_offset}%;
+--element-vertical-offset-desktop: ${elementPositioning.desktop_positioning.vertical_offset}%;
+--mobile-horizontal-placement: ${elementPositioning.mobile_positioning.horizontal_snap?.slice(2)};
+--mobile-vertical-placement: ${elementPositioning.mobile_positioning.vertical_snap?.slice(2)};
+--desktop-horizontal-placement: ${elementPositioning.desktop_positioning.horizontal_snap?.slice(2)};
+--desktop-vertical-placement: ${elementPositioning.desktop_positioning.vertical_snap?.slice(2)};
+--element-position: ${elementPositioning.element_position};
+
+`;
+    postImageWidthString = `--post-image-width-mobile: calc( ${props.element.post_image_width_mobile_px} / var(--mobile-design-reference) * var(--screen-width-mobile)); --post-image-width-desktop: calc(${props.element.post_image_width_desktop_px} / var(--desktop-design-reference) * var(--screen-width-desktop));`;
+}
+console.log(props.imageSizesAttribute);
+
+
+const gridLayoutString = gridLayoutElement(props);
+
+const styleString = `--post-image-border-radius: ${props.fields.post_image_border_radius};`
+let postType = props.post.post_data.post_type;
+let sizes = props.imageSizesAttribute || "(min-width: 1440px) 50vw, (min-width: 1024px) 50vw, (min-width: 768px) 768px') 100vw";
+
+</script>
+<template>
+    <a :class="`${blockClassname}__post-image-container-link ${blockClassname}__info-item ${blockClassname}__post-image-container--${imageType} ${blockClassname}__post-image-container-link--${props.fields.show_alt_image_on_hover ? 'show-alt-image-on-hover' : 'no-hover'} ${setAsBackgroundImage ? blockClassname + '__post-image-container-link--set-as-background-image' : ''}`"
+        :href="props.post.link" :aria-label="props.post.post_title" :style="`${gridLayoutString}`">
+        <img v-if="props.post.post_images['post_' + imageType + '_src']"
+            :class="`${blockClassname}__post-image ${blockClassname}__post-${imageType} ${blockClassname}__post-image--${imageType}`"
+            loading="lazy" :src="props.post.post_images['post_' + imageType + '_src']"
+            :width="props.post.post_images['post_' + imageType + '_width']"
+            :height="props.post.post_images['post_' + imageType + '_height']"
+            :srcset="props.post.post_images['post_' + imageType + '_srcset']" :sizes=sizes
+            :alt="props.post.post_images['post_' + imageType + '_alt_text']"
+            :style="`${styleString} ${positioningString} ${postImageWidthString}`" />
+        <img v-if="props.fields.show_alt_image_on_hover"
+            :class="`${blockClassname}__post-image--secondary ${blockClassname}__post-${imageTypeSecondary}`"
+            loading="lazy" :src="props.post.post_images['post_' + imageTypeSecondary + '_src']"
+            :width="props.post.post_images['post_' + imageTypeSecondary + '_width']"
+            :height="props.post.post_images['post_' + imageTypeSecondary + '_height']"
+            :srcset="props.post.post_images['post_' + imageTypeSecondary + '_srcset']" :sizes=sizes
+            :alt="props.post.post_images['post_' + imageTypeSecondary + '_alt_text']"
+            :style="`${postImageWidthString}`" />
+    </a>
+</template>