@total_onion/onion-library 1.0.6 → 1.0.8

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

@@ -1,15 +0,0 @@
-<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

@@ -1,72 +0,0 @@
-<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

@@ -1,54 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-<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

@@ -1,61 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-<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

@@ -1,130 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-<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

@@ -1,60 +0,0 @@
-<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>