@total_onion/onion-library 1.0.6 → 1.0.8

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.
Files changed (60) hide show
  1. package/package.json +1 -1
  2. package/update-component.js +2 -1
  3. package/components/block-post-type-filter-grid-v2/group_64690c62487bc.json +0 -4380
  4. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/better-reviews-widget.vue +0 -15
  5. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/buy-now-widget.vue +0 -72
  6. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/cocktail-category.vue +0 -54
  7. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/cocktail-tasting-notes.vue +0 -15
  8. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/divider-widget.vue +0 -11
  9. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/drink-tastes.vue +0 -26
  10. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/featured-post-component.vue +0 -61
  11. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/global-image-widget.vue +0 -23
  12. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/media-widget.vue +0 -23
  13. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/person-email-widget.vue +0 -20
  14. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/person-name-widget.vue +0 -15
  15. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/person-questionaire-widget.vue +0 -17
  16. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/person-rating-widget.vue +0 -25
  17. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-author-widget.vue +0 -15
  18. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-category-widget.vue +0 -20
  19. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-component.vue +0 -130
  20. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-headline-widget.vue +0 -16
  21. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-image-widget.vue +0 -60
  22. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-info-description.vue +0 -14
  23. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-info-subtitle.vue +0 -14
  24. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-link-widget.vue +0 -44
  25. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-publish-widget.vue +0 -44
  26. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-tags-widget.vue +0 -20
  27. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-text-alternative-style.vue +0 -18
  28. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/post-title-widget.vue +0 -20
  29. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/pre-render-posts-html.twig +0 -17
  30. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-abv.vue +0 -18
  31. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-age-statement.vue +0 -17
  32. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-bazaarvoice.vue +0 -15
  33. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-brand.vue +0 -16
  34. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-cask-type.vue +0 -16
  35. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-country.vue +0 -14
  36. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-description.vue +0 -15
  37. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-details-name.vue +0 -18
  38. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-details-price.vue +0 -15
  39. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-finish.vue +0 -15
  40. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-history.vue +0 -16
  41. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-link.vue +0 -15
  42. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-logo-widget.vue +0 -22
  43. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-name.vue +0 -17
  44. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-nose.vue +0 -16
  45. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-price.vue +0 -15
  46. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-slug.vue +0 -14
  47. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-taste.vue +0 -16
  48. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/product-whisky-type.vue +0 -25
  49. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/ptfg-posts.twig +0 -449
  50. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/ptfg-utils.vue +0 -38
  51. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/shopify-add-to-cart.vue +0 -31
  52. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/social-media-item.vue +0 -58
  53. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/spacer-widget.vue +0 -13
  54. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2/text-search.vue +0 -10
  55. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2-extra.scss +0 -6
  56. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2.js +0 -15
  57. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2.php +0 -48
  58. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2.scss +0 -989
  59. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2.twig +0 -150
  60. package/components/block-post-type-filter-grid-v2/post-type-filter-grid-v2.vue +0 -893
@@ -1,14 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const gridLayoutString = gridLayoutElement(props);
7
- const textEditorStylesString = textEditorStyles(props);
8
- </script>
9
- <template>
10
- <div :class="`${blockClassname}__post-info-description ${blockClassname}__info-item`"
11
- :style="`${gridLayoutString} ${textEditorStylesString}`">
12
- <p :class="`${element.text_style?.typography_style.slice(2)}`">{{ post.post_data.post_info_description }}</p>
13
- </div>
14
- </template>
@@ -1,14 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const gridLayoutString = gridLayoutElement(props);
7
- const textEditorStylesString = textEditorStyles(props);
8
- </script>
9
- <template>
10
- <div :class="`${blockClassname}__post-info-subtitle ${blockClassname}__info-item`"
11
- :style="`${gridLayoutString} ${textEditorStylesString}`">
12
- <p :class="`${element.text_style?.typography_style.slice(2)}`">{{ post.post_data.post_info_subtitle }}</p>
13
- </div>
14
- </template>
@@ -1,44 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement } from "./ptfg-utils.vue";
3
- const blockClassname = "post-type-filter-grid-v2";
4
- const props = defineProps(["post", "element", "mappedIcons", "ctaStyles", "blockClassname", "options"]);
5
- const postColour = props.post.post_data.post_colour;
6
- const postTextColourStyle = props.post.post_data?.post_text_colour_style?.slice(2);
7
- let ctaStyle = '';
8
- if (typeof props.element.cta_style == 'string') {
9
- ctaStyle = props.element?.cta_style?.replace("__", '');
10
- } else {
11
- ctaStyle = props.element?.cta_style;
12
- }
13
- let postCtaStyle = ctaStyle;
14
- let postCtaStyleValue = '';
15
- let ctaAnimationStyle = '';
16
- if (props.element?.cta_style_select) {
17
- if (props.element?.cta_style_select?.slice(2) == 'post-colour') {
18
- postCtaStyle = 'post-colour';
19
- postCtaStyleValue = `color: ${postColour};--post-text-colour-style: ${postColour};`;
20
- }
21
- if (props.element?.cta_style_select?.slice(2) == 'post-text-colour-style') {
22
- postCtaStyle = 'post-text-colour-style';
23
- postCtaStyleValue = `color: ${postTextColourStyle};--post-text-colour-style: ${postTextColourStyle};`;
24
- }
25
- if (props.ctaStyles) {
26
- ctaAnimationStyle = props.ctaStyles[ctaStyle - 1]?.cta_settings?.cta_animation_style;
27
- }
28
- }
29
- 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'] + '">';
30
- const enableCtaIcon = props.ctaStyles[ctaStyle - 1]?.cta_settings?.include_cta_icon;
31
- const gridLayoutString = gridLayoutElement(props);
32
- </script>
33
- <template>
34
- <div :class="`${blockClassname}__post-link ${blockClassname}__info-item`" :style="`${gridLayoutString}`">
35
- <a :href="post?.link" :style="`${postCtaStyleValue}`"
36
- :class="`${blockClassname}__cta ${blockClassname}__cta-style-${postCtaStyle} cmpl-cta-style-${postCtaStyle} cmpl-cta-animation-style-${ctaAnimationStyle}`"
37
- v-if="element.post_link_text">
38
- <span :class="`${blockClassname}__cta-span`">{{ element.post_link_text }}</span>
39
- <span :class="`${blockClassname}__cta-icon cmpl-cta-icon ${blockClassname}__icon-image`"
40
- v-if="enableCtaIcon" v-html="iconImage">
41
- </span>
42
- </a>
43
- </div>
44
- </template>
@@ -1,44 +0,0 @@
1
- <script setup>
2
- import { computed } from 'vue'
3
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
4
-
5
- const props = defineProps(["post", "element"]);
6
- const blockClassname = "post-type-filter-grid-v2";
7
- const gridLayoutString = gridLayoutElement(props);
8
- const textEditorStylesString = textEditorStyles(props);
9
-
10
- const dateWithoutTime = computed(() => {
11
- if (props.post.post_date) {
12
- const dateArray = props.post.post_date.split(' ');
13
- const dateDMY = dateArray[0].split('-');
14
- const dateObject = new Date(Date.UTC(
15
- parseInt(dateDMY[0]), // year
16
- parseInt(dateDMY[1]) - 1, // month (0-based)
17
- parseInt(dateDMY[2]) // day
18
- ));
19
-
20
- const url = window.location.href;
21
- const parts = url.split("/");
22
- let formattedDate;
23
-
24
- parts.forEach((part) => {
25
- if (part === "en-us") {
26
- formattedDate = new Intl.DateTimeFormat("en-US").format(
27
- dateObject
28
- );
29
- } else {
30
- formattedDate = new Intl.DateTimeFormat("en-GB").format(
31
- dateObject
32
- );
33
- }
34
- });
35
- return formattedDate;
36
- }
37
- });
38
- </script>
39
- <template>
40
- <p :class="`${blockClassname}__post-publish-date ${blockClassname}__info-item ${element.text_style?.typography_style.slice(2)}`"
41
- :style="`${gridLayoutString} ${textEditorStylesString}`">
42
- {{ dateWithoutTime }}
43
- </p>
44
- </template>
@@ -1,20 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element", "ctaStyles"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
-
7
- const gridLayoutString = gridLayoutElement(props);
8
- let ctaStyle = props.element?.cta_style?.replace("__", '');
9
-
10
- </script>
11
- <template>
12
- <div :class="`${blockClassname}__post-tags ${blockClassname}__info-item `"
13
- :style="`${gridLayoutString}`">
14
- <template v-for="(tag, index) in props.post.tags" :key="index">
15
- <div v-html="tag.name"
16
- :class="`${blockClassname}__post-tag ${blockClassname}__cta cmpl-cta-style-${ctaStyle}`">
17
- </div>
18
- </template>
19
- </div>
20
- </template>
@@ -1,18 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element", "ctaIcons", "blockClassname"]);
5
- const blockClassname = props.blockClassname;
6
-
7
- const gridLayoutString = gridLayoutElement(props);
8
-
9
-
10
- </script>
11
- <template>
12
- <div :href="props.post.link" :class="`${blockClassname}__post-text-alternative-style ${blockClassname}__info-item`"
13
- :style="`${gridLayoutString}`">
14
- <h3 :class="`${blockClassname}__post-text-alternative-style-text`"
15
- v-html="post.post_data.post_text_alternative_style">
16
- </h3>
17
- </div>
18
- </template>
@@ -1,20 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element", "ctaIcons", "blockClassname"]);
5
- const blockClassname = props.blockClassname;
6
-
7
- const gridLayoutString = gridLayoutElement(props);
8
- const textEditorStylesString = textEditorStyles(props);
9
-
10
- </script>
11
- <template>
12
- <a :href="props.post.link" :class="`${blockClassname}__post-title ${blockClassname}__info-item`"
13
- :style="`${gridLayoutString}`">
14
- <h3 :class="`${element.text_style?.typography_style.slice(2)}`" :style="`${textEditorStylesString}`"
15
- v-html="post.post_title">
16
- </h3>
17
- <img :class="`${blockClassname}__post-title-icon style-svg`" v-if="element.enable_icon"
18
- :src="ctaIcons.cta_load_more_icon" alt="title icon">
19
- </a>
20
- </template>
@@ -1,17 +0,0 @@
1
- <div class="{{blockClassName}}__no-js-content lazy-fade js-enabled-hide" style="width: 100%; padding: var(--global-inline-spacing)">
2
- <div class="{{blockClassName}}__posts-container" style="width: 100%; display: grid; grid-template-columns: repeat(auto-fill,minmax(250px, 1fr)); gap: 20px;">
3
- {% for post in updatedPosts.posts %}
4
- {% set postImage = get_image(post.post_images.post_image) %}
5
-
6
- <div class="{{blockClassName}}__post-container">
7
- <a href="{{post.link}}"><img class="js-enabled-hide" src="{{postImage.src}}" srcset="{{postImage.srcset}}" alt="{{post.post_images.post_image_alt_text}}" loading='lazy' class=""></a>
8
- {% if post.post_title is not empty %}
9
- <h2 class="">{{post.post_title}}</h2>
10
- {% endif %}
11
- {% if post.post_info_description is not empty %}
12
- <p class="">{{post.post_info_description}}</p>
13
- {% endif %}
14
- </div>
15
- {% endfor %}
16
- </div>
17
- </div>
@@ -1,18 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const gridLayoutString = gridLayoutElement(props);
7
- const textEditorStylesString = textEditorStyles(props);
8
- </script>
9
- <template>
10
- <div :class="`${blockClassname}__product-abv ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
11
- 2
12
- )}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
13
- <h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
14
- <!-- TODO -->
15
- <!-- --text-align: ${element.text_align.slice(2)}; -->
16
- {{ post.post_data.product_abv }}
17
- </div>
18
- </template>
@@ -1,17 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
-
7
- const gridLayoutString = gridLayoutElement(props);
8
- const textEditorStylesString = textEditorStyles(props);
9
- </script>
10
- <template>
11
- <div :class="`${blockClassname}__product-age-statement ${blockClassname}__info-item`" :style="`${gridLayoutString}`"
12
- v-if="post.post_data.product_age_statement">
13
- <h4 :class="`${element.text_style?.typography_style.slice(2)}`" :style="`${textEditorStylesString}`">
14
- {{ post.post_data.product_age_statement }}
15
- </h4>
16
- </div>
17
- </template>
@@ -1,15 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const gridLayoutString = gridLayoutElement(props);
7
- const textEditorStylesString = textEditorStyles(props);
8
- </script>
9
- <template>
10
- <div :class="`${blockClassname}__product-bazaarvoice ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
11
- 2
12
- )}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
13
- {{ post.post_data.product_bazaarvoice }}
14
- </div>
15
- </template>
@@ -1,16 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const gridLayoutString = gridLayoutElement(props);
7
- const textEditorStylesString = textEditorStyles(props);
8
- </script>
9
- <template>
10
- <div :class="`${blockClassname}__brand ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
11
- 2
12
- )}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
13
- <h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
14
- {{ post.post_data.product_details?.brand }}
15
- </div>
16
- </template>
@@ -1,16 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const gridLayoutString = gridLayoutElement(props);
7
- const textEditorStylesString = textEditorStyles(props);
8
- </script>
9
- <template>
10
- <div :class="`${blockClassname}__product-cask-type ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
11
- 2
12
- )}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
13
- <h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
14
- {{ post.post_data.product_cask_type }}
15
- </div>
16
- </template>
@@ -1,14 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
- const props = defineProps(["post", "element"]);
4
- const blockClassname = "post-type-filter-grid-v2";
5
- const gridLayoutString = gridLayoutElement(props);
6
- const textEditorStylesString = textEditorStyles(props);
7
- </script>
8
- <template>
9
- <div :class="`${blockClassname}__product-country ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
10
- 2
11
- )}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
12
- {{ post.post_data.product_country }}
13
- </div>
14
- </template>
@@ -1,15 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const gridLayoutString = gridLayoutElement(props);
7
- const textEditorStylesString = textEditorStyles(props);
8
- </script>
9
- <template>
10
- <div :class="`${blockClassname}__product-details-description ${blockClassname}__info-item ${blockClassname}__post-details-description ${element.text_style?.typography_style.slice(
11
- 2
12
- )}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
13
- {{ post.post_data.product_details?.description }}
14
- </div>
15
- </template>
@@ -1,18 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement } from "./ptfg-utils.vue";
3
- const props = defineProps(["post", "element"]);
4
- const blockClassname = "post-type-filter-grid-v2";
5
- const gridLayoutString = gridLayoutElement(props);
6
- // console.log(JSON.parse(props.post.post_data));
7
-
8
- </script>
9
- <template>
10
- <div :class="`${blockClassname}__product-link ${blockClassname}__info-item ${props.element.text_style?.typography_style.slice(
11
- 2
12
- )}`" :style="`${gridLayoutString}`">
13
- <h4 :class="`${element.text_style?.typography_style.slice(2)}`"
14
- :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}`">
15
- {{ props.post.product_details.productName }}
16
- </h4>
17
- </div>
18
- </template>
@@ -1,15 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const gridLayoutString = gridLayoutElement(props);
7
- const textEditorStylesString = textEditorStyles(props);
8
- </script>
9
- <template>
10
- <div :class="`${blockClassname}__price ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
11
- 2
12
- )}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
13
- <span>{{ post.post_data.product_details?.price }}</span>
14
- </div>
15
- </template>
@@ -1,15 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
- const props = defineProps(["post", "element"]);
4
- const blockClassname = "post-type-filter-grid-v2";
5
- const gridLayoutString = gridLayoutElement(props);
6
- const textEditorStylesString = textEditorStyles(props);
7
- </script>
8
- <template>
9
- <div :class="`${blockClassname}__product-finish ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
10
- 2
11
- )}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
12
- <h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
13
- {{ post.post_data.product_finish }}
14
- </div>
15
- </template>
@@ -1,16 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const gridLayoutString = gridLayoutElement(props);
7
- const textEditorStylesString = textEditorStyles(props);
8
- </script>
9
- <template>
10
- <div :class="`${blockClassname}__product-history ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
11
- 2
12
- )}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
13
- <h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
14
- {{ post.post_data.product_history }}
15
- </div>
16
- </template>
@@ -1,15 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element", "ctaIcons"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const gridLayoutString = gridLayoutElement(props);
7
-
8
- </script>
9
- <template>
10
- <div :class="`${blockClassname}__product-link ${blockClassname}__info-item`" :style="`${gridLayoutString}`">
11
- <a :href="props.post.link" :class="`${blockClassname}__cta cmpl-cta-style-${element.cta_style.slice(
12
- 2
13
- )}`" :style="`${gridLayoutString}`" v-if="element.product_link_text">{{ element.product_link_text }}</a>
14
- </div>
15
- </template>
@@ -1,22 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const imageType = 'image';
7
- let postType = props.post.post_data.post_type;
8
- const gridLayoutString = gridLayoutElement(props);
9
- </script>
10
- <template>
11
- <div :class="`${blockClassname}__media-image-container ${blockClassname}__info-item`" :href="props.post.link"
12
- v-if="element.acf_fc_layout == 'product-logo'" :style="`${gridLayoutString}`">
13
- <img :class="`${blockClassname}__post-image ${blockClassname}__media-${imageType} style-svg`" loading="lazy"
14
- :src="props.post.post_images['post_' + imageType + '_src']"
15
- :width="props.post.post_images['post_' + imageType + '_width']"
16
- :height="props.post.post_images['post_' + imageType + '_height']"
17
- :srcset="props.post.post_images['post_' + imageType + '_srcset']"
18
- sizes="(max-width: 414px) 100px, (max-width: 768px) 150px, (max-width: 1024px) 200px, (max-width: 1440px) 275px, (max-width: 1800px) 300px"
19
- :alt="props.post.post_images['post_' + imageType + '_alt_text']"
20
- :style="`--post-image-width: ${element.post_image_width}%;`" />
21
- </div>
22
- </template>
@@ -1,17 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const gridLayoutString = gridLayoutElement(props);
7
-
8
- </script>
9
- <template>
10
- <div :class="`${blockClassname}__product-link ${blockClassname}__info-item ${props.element.text_style?.typography_style.slice(
11
- 2
12
- )}`" :style="`${gridLayoutString}`">
13
- <h4 :class="`${element.text_style?.typography_style.slice(2)}`"
14
- :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}`">
15
- {{ props.post.post_data?.product_name }}</h4>
16
- </div>
17
- </template>
@@ -1,16 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const gridLayoutString = gridLayoutElement(props);
7
- const textEditorStylesString = textEditorStyles(props);
8
- </script>
9
- <template>
10
- <div :class="`${blockClassname}__product-nose ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
11
- 2
12
- )}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
13
- <h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
14
- {{ props.post.post_data.product_nose }}
15
- </div>
16
- </template>
@@ -1,15 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const gridLayoutString = gridLayoutElement(props);
7
- const textEditorStylesString = textEditorStyles(props);
8
- </script>
9
- <template>
10
- <div :class="`${blockClassname}__price ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
11
- 2
12
- )}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
13
- <span>{{ post.post_data.product_price }}</span>
14
- </div>
15
- </template>
@@ -1,14 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const gridLayoutString = gridLayoutElement(props);
7
- const textEditorStylesString = textEditorStyles(props);
8
- </script>
9
- <template>
10
- <div :class="`${blockClassname}__product-c7-slug ${blockClassname}__info-item`"
11
- :style="`${gridLayoutString} ${textEditorStylesString}`">
12
- <div class="c7-buy-product c7-buy-variant" :data-product-slug="`${props.post.post_data.c7_slug}`"></div>
13
- </div>
14
- </template>
@@ -1,16 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const gridLayoutString = gridLayoutElement(props);
7
- const textEditorStylesString = textEditorStyles(props);
8
- </script>
9
- <template>
10
- <div :class="`${blockClassname}__product-taste ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
11
- 2
12
- )}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
13
- <h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
14
- {{ post.post_data.product_taste }}
15
- </div>
16
- </template>
@@ -1,25 +0,0 @@
1
- <script setup>
2
- import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
3
-
4
- const props = defineProps(["post", "element"]);
5
- const blockClassname = "post-type-filter-grid-v2";
6
- const gridLayoutString = gridLayoutElement(props);
7
- const textEditorStylesString = textEditorStyles(props);
8
-
9
-
10
- </script>
11
- <template>
12
- <div :class="`${blockClassname}__product-whisky-type ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
13
- 2
14
- )}`" :style="`${gridLayoutString} ${textEditorStylesString}`" v-if="post.post_data.product_whisky_type">
15
- <p :class="`${element.text_style?.typography_style.slice(2)}`" :style="`--text-align: ${element.text_style?.text_align.slice(
16
- 2
17
- )}; --text-transform: ${element.text_style?.text_transform.slice(
18
- 2
19
- )}; --font-weight: ${element.text_style.text_font_weight.slice(
20
- 2
21
- )}; --text-colour: ${textColour}`">
22
- {{ post.post_data.product_whisky_type }}
23
- </p>
24
- </div>
25
- </template>