@total_onion/onion-library 2.0.126 → 2.0.128

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-history.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-v3";
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-</script>
-<template>
-	<div :class="`${blockClassname}__product-history ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
-		2
-	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
-		<h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
-		{{ post.post_data.product_history }}
-	</div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-link.vue

@@ -1,15 +0,0 @@
-<script setup>
-import { gridLayoutElement } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element", "ctaIcons"]);
-const blockClassname = "post-type-filter-grid-v3";
-const gridLayoutString = gridLayoutElement(props);
-
-</script>
-<template>
-	<div :class="`${blockClassname}__product-link ${blockClassname}__info-item`" :style="`${gridLayoutString}`">
-		<a :href="props.post.link" :class="`${blockClassname}__cta cmpl-cta-style-${element.cta_style.slice(
-			2
-		)}`" :style="`${gridLayoutString}`" v-if="element.product_link_text">{{ element.product_link_text }}</a>
-	</div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-logo-widget.vue

@@ -1,22 +0,0 @@
-<script setup>
-import { gridLayoutElement } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-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"
-        v-if="element.acf_fc_layout == 'product-logo'" :style="`${gridLayoutString}`">
-        <img :class="`${blockClassname}__post-image ${blockClassname}__media-${imageType} style-svg`" 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-v3/post-type-filter-grid-v3/product-name.vue

@@ -1,17 +0,0 @@
-<script setup>
-import { gridLayoutElement } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-const gridLayoutString = gridLayoutElement(props);
-
-</script>
-<template>
-	<div :class="`${blockClassname}__product-link ${blockClassname}__info-item ${props.element.text_style?.typography_style.slice(
-		2
-	)}`" :style="`${gridLayoutString}`">
-		<h4 :class="`${element.text_style?.typography_style.slice(2)}`"
-			:style="`--text-align: ${props.element.text_style?.text_align.slice(2)}; --text-transform: ${props.element.text_style?.text_transform.slice(2)}; --font-weight: ${props.element.text_style.text_font_weight.slice(2)}; --text-colour: ${textColour}`">
-			{{ props.post.post_data?.product_name }}</h4>
-	</div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-nose.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-v3";
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-</script>
-<template>
-	<div :class="`${blockClassname}__product-nose ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
-		2
-	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
-		<h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
-		{{ props.post.post_data.product_nose }}
-	</div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-price.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-v3";
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-</script>
-<template>
-	<div :class="`${blockClassname}__price ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
-		2
-	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
-		<span>{{ post.post_data.product_price }}</span>
-	</div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-slug.vue

@@ -1,14 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-</script>
-<template>
-	<div :class="`${blockClassname}__product-c7-slug ${blockClassname}__info-item`"
-		:style="`${gridLayoutString} ${textEditorStylesString}`">
-		<div class="c7-buy-product c7-buy-variant" :data-product-slug="`${props.post.post_data.c7_slug}`"></div>
-	</div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-taste.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-v3";
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-</script>
-<template>
-	<div :class="`${blockClassname}__product-taste ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
-		2
-	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
-		<h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
-		{{ post.post_data.product_taste }}
-	</div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-whisky-type.vue

@@ -1,25 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-
-
-</script>
-<template>
-	<div :class="`${blockClassname}__product-whisky-type ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
-		2
-	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`" v-if="post.post_data.product_whisky_type">
-		<p :class="`${element.text_style?.typography_style.slice(2)}`" :style="`--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
-		)}; --text-colour: ${textColour}`">
-			{{ post.post_data.product_whisky_type }}
-		</p>
-	</div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/social-media-item.vue

@@ -1,58 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element", "fields"]);
-const blockClassname = "post-type-filter-grid-v3";
-const imageType = props.element?.image_select?.slice(2);
-const setAsBackgroundImage = props.element?.set_as_background_image;
-let positioningString = '';
-let postImageWidthString = `--post-image-width-mobile: ${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)};
-`;
-    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));`;
-}
-
-const styleString = `
-
---post-image-border-radius: ${props.fields.post_image_border_radius};
-`
-let postType = props.post.post_data.post_type;
-let sizes = "(min-width: 1440px) 50vw, (min-width: 1024px) 50vw, (min-width: 768px) 768px') 100vw";
-
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-
-</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-${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="`${postImageWidthString}`" />
-    </a>
-</template>