@lightspeed/crane 1.4.2 → 2.0.0

package/template/reference/sections/featured-products/FeaturedProducts.vue

@@ -0,0 +1,65 @@
+<template>
+  <SectionWrapper :style="backgroundStyle">
+    <Title v-if="showTitle" />
+    <div class="products-wrapper">
+      <ProductItem
+        v-for="product in productSelectorContent.products"
+        :key="product.id"
+        :product="product"
+      />
+    </div>
+  </SectionWrapper>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties } from "vue";
+import {
+  Color,
+  useBackgroundElementDesign,
+  useInputboxElementContent,
+  useProductSelectorElementContent,
+  useTextElementDesign,
+} from "@lightspeed/crane-api";
+import { Content, Design } from "./type";
+import SectionWrapper from "../../shared/components/SectionWrapper.vue";
+import Title from "./component/Title.vue";
+import ProductItem from "./component/ProductItem.vue";
+
+
+const titleContent = useInputboxElementContent<Content>("section_title");
+const titleDesign = useTextElementDesign<Design>('section_title');
+
+const productSelectorContent =
+  useProductSelectorElementContent<Content>("featured_products");
+
+const showTitle = computed(() => titleDesign.visible && titleContent.hasContent);
+
+const backgroundDesign = useBackgroundElementDesign<Design>("background");
+const background = computed(() => ({
+  type: backgroundDesign.background?.type,
+  solidColor: backgroundDesign.background?.solid?.color as Color,
+  fromColor: backgroundDesign.background?.gradient?.fromColor as Color,
+  toColor: backgroundDesign.background?.gradient?.toColor as Color,
+}));
+
+const backgroundStyle = computed<CSSProperties>(() => {
+  if (background.value.type === "gradient") {
+    return {
+      "background-image": `linear-gradient(to right, ${background.value.fromColor.hex}, ${background.value.toColor.hex})`,
+    };
+  }
+  return { "background-color": background.value.solidColor.hex };
+});
+</script>
+
+<style lang="scss" scoped>
+.products-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+  max-width: 1440px;
+  margin: 0 auto;
+  width: 100%;
+}
+</style>

package/template/reference/sections/featured-products/assets/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor" d="M19.22 1.735c.528.012.97.42 1.037.933l.009.112.09 4.09a.97.97 0 01-1 1 1.08 1.08 0 01-1.037-.934l-.008-.111-.037-1.684-6.809 6.809c-.438.439-.877.47-1.314.095l-.101-.094c-.438-.437-.469-.876-.093-1.314l.094-.101 6.809-6.809-1.684-.037a1.08 1.08 0 01-1.034-.916l-.01-.128a.969.969 0 01.888-.997l.111-.003 4.09.09zM19 14.5a4.5 4.5 0 01-4.288 4.495L14.5 19h-7a4.5 4.5 0 01-4.495-4.288L3 14.5v-7a4.5 4.5 0 014.288-4.495L7.5 3h2.625a1 1 0 01.117 1.993L10.125 5H7.5a2.5 2.5 0 00-2.495 2.336L5 7.5v7a2.5 2.5 0 002.336 2.495L7.5 17h7a2.5 2.5 0 002.495-2.336L17 14.5v-2.625a1 1 0 011.993-.117l.007.117V14.5z" />
+</svg>

package/template/reference/sections/featured-products/client.ts

@@ -0,0 +1,5 @@
+import { createVueClientApp } from '@lightspeed/crane-api';
+import FeaturedProducts from './FeaturedProducts.vue';
+import { Content, Design } from './type.ts';
+
+export default createVueClientApp<Content, Design>(FeaturedProducts);

package/template/reference/sections/featured-products/component/ProductItem.vue

@@ -0,0 +1,71 @@
+<template>
+  <a
+    v-if="product"
+    :key="product.id"
+    :href="product.url"
+    class="product"
+  >
+    <img v-if="product.fullImageUrl" class="product_image" :src="product.fullImageUrl" :alt="product.name" />
+    <h4 class="product__title">
+      {{ product.name }}
+    </h4>
+    <span class="product__price">{{ product.formattedPrice }}</span>
+  </a>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    product: ProductListComponentItem
+  }
+
+  const { product } = defineProps<Props>();
+
+</script>
+
+<style scoped lang="scss">
+.product {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  flex: 0 0 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-decoration: inherit;
+  transition: transform 0.2s ease;
+
+  @media (max-width: 767px) {
+    width: calc(50% - 6px);
+  }
+
+  @media (min-width: 768px) {
+    width: calc(20% - 9.6px);
+  }
+
+  &:hover {
+    transform: translateY(-4px);
+  }
+}
+
+.product_image {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 3/4;
+  object-fit: cover;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.product__title {
+  font-size: 1rem;
+  font-weight: 300;
+  margin: 0;
+  line-height: 1.4;
+  color: #111;
+}
+
+.product__price {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #111;
+}
+</style>

package/template/reference/sections/featured-products/component/Title.vue

@@ -0,0 +1,31 @@
+<template>
+  <h1
+    :style="titleStyle"
+    class="section-title"
+  >
+    {{ titleContent.value }}
+  </h1>
+</template>
+
+<script setup lang="ts">
+import { useInputboxElementContent, useTextElementDesign } from "@lightspeed/crane-api";
+import { Content, Design } from "../type";
+import { computed } from "vue";
+
+const titleContent = useInputboxElementContent<Content>("section_title");
+const titleDesign = useTextElementDesign<Design>('section_title');
+
+const titleStyle = computed(() => ({
+  fontSize: `${titleDesign.size}px`,
+  fontFamily: titleDesign.font,
+  color: (titleDesign.color as Color).hex,
+  'font-style': titleDesign.italic ? 'italic' : 'normal',
+  'font-weight': titleDesign.bold ? 'bold' : 'normal',
+}));
+</script>
+
+<style scoped lang="scss">
+.section-title {
+  margin-bottom: 1rem;
+}
+</style>

package/template/reference/sections/featured-products/entity/color.ts

@@ -0,0 +1,4 @@
+export enum ColorType {
+  SOLID = 'solid',
+  GRADIENT = 'gradient',
+}

package/template/reference/sections/featured-products/server.ts

@@ -0,0 +1,5 @@
+import { createVueServerApp } from '@lightspeed/crane-api';
+import FeaturedProducts from './FeaturedProducts.vue';
+import { Content, Design } from './type.ts';
+
+export default createVueServerApp<Content, Design>(FeaturedProducts);

package/template/reference/sections/featured-products/settings/content.ts

@@ -0,0 +1,14 @@
+export default {
+  section_title: {
+    type: 'INPUTBOX',
+    label: '$label.section_title.label',
+    placeholder: '$label.section_title.placeholder',
+  },
+  featured_products: {
+    type: 'PRODUCT_SELECTOR',
+    label: '$label.featured_products.label',
+    defaults: {
+      maxProducts: 6,
+    },
+  },
+} as const;

package/template/reference/sections/featured-products/settings/design.ts

@@ -0,0 +1,33 @@
+export default {
+  section_title: {
+    type: 'TEXT',
+    label: '$label.section_title.label',
+    colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
+    sizes: [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60],
+    defaults: {
+      font: 'global.fontFamily.body',
+      size: 40,
+      bold: true,
+      italic: false,
+      color: '#313131',
+      visible: true,
+    },
+  },
+  background: {
+    type: 'BACKGROUND',
+    label: '$label.background.label',
+    colors: [
+      '#FFFFFF66',
+      '#0000004D',
+      '#00000099',
+      '#64C7FF66',
+      '#F9947266',
+      '#C794CD66',
+      '#FFD17466',
+    ],
+    defaults: {
+      style: 'COLOR',
+      color: 'global.color.background',
+    },
+  },
+} as const;

package/template/reference/sections/featured-products/settings/translations.ts

@@ -0,0 +1,24 @@
+export default {
+  en: {
+    '$label.section_title.label': 'Main title',
+    '$label.section_title.placeholder':
+      'This will be the main title for this section',
+    '$label.featured_products.label': 'Trending collections',
+
+    '$label.background.label': 'Background',
+  },
+
+  nl: {
+    '$label.section_title.label': 'Hoofdtitel',
+    '$label.section_title.placeholder':
+      'Dit wordt de hoofdtitel voor deze sectie',
+    '$label.featured_products.label': 'Trending collecties',
+  },
+
+  fr: {
+    '$label.section_title.label': 'Titre principal',
+    '$label.section_title.placeholder':
+      'Ce sera le titre principal de cette section',
+    '$label.featured_products.label': 'Collections tendance',
+  },
+} as const;

package/template/reference/sections/featured-products/showcases/1.ts

@@ -0,0 +1,28 @@
+export default {
+  showcaseId: '1',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'custom_section_showcase_1_preview.png',
+      },
+    },
+  },
+  blockName: '$label.showcase_1.blockName',
+  content: {
+    section_title: {
+      type: 'INPUTBOX',
+      text: '$label.showcase_1.section_title.text',
+    },
+    featured_products: {
+      type: 'PRODUCT_SELECTOR',
+      maxProducts: 6,
+    },
+  },
+  design: {
+    background: {
+      type: 'BACKGROUND',
+      style: 'COLOR',
+      color: 'global.color.background',
+    },
+  },
+} as const;

package/template/reference/sections/featured-products/showcases/translations.ts

@@ -0,0 +1,16 @@
+export default {
+  en: {
+    '$label.showcase_1.blockName': 'Reference Section — Featured Products',
+    '$label.showcase_1.section_title.text': 'Featured Products',
+  },
+
+  nl: {
+    '$label.showcase_1.blockName': 'Referentiesectie — Aanbevolen producten',
+    '$label.showcase_1.section_title.text': 'Aanbevolen producten',
+  },
+
+  fr: {
+    '$label.showcase_1.blockName': 'Section de référence — Produits phares',
+    '$label.showcase_1.section_title.text': 'Produits phares',
+  },
+} as const;

package/template/reference/sections/featured-products/type.ts

@@ -0,0 +1,5 @@
+import ContentSettings from './settings/content.ts';
+import DesignSettings from './settings/design.ts';
+
+export type Content = InferContentType<typeof ContentSettings>;
+export type Design = InferDesignType<typeof DesignSettings>;

package/template/reference/sections/intro-slider/IntroSlider.vue

@@ -27,7 +27,7 @@ import {
   useButtonElementContent,
   useButtonElementDesign,
   ButtonContent,
-} from '@lightspeed/crane';
+} from '@lightspeed/crane-api';
 import { computed } from 'vue';
 import { Content, Design } from './type.ts';
 import Slider from './component/Slider.vue';

package/template/reference/sections/intro-slider/client.ts

@@ -1,4 +1,4 @@
-import { createVueClientApp } from '@lightspeed/crane';
+import { createVueClientApp } from '@lightspeed/crane-api';
 import ExampleSection from './IntroSlider.vue';
 import { Content, Design } from './type.ts';
 

package/template/reference/sections/intro-slider/component/Slider.vue

@@ -45,7 +45,7 @@ import {
   useLayoutElementDesign,
   useImageElementDesign,
   useTextElementDesign,
-} from '@lightspeed/crane';
+} from '@lightspeed/crane-api';
 import { Content, Design } from '../type.ts';
 
 type Slide = {
@@ -117,8 +117,14 @@ const slideSize = computed<number>(() => slideWidth.value + slideGap.value);
 
 function initializeItems(): void {
   windowWidth.value = window.innerWidth;
+
+  if (!slides.value || slides.value.length === 0) {
+    repeatedItems.value = [];
+    return;
+  }
+
   const minItemsToFillViewport = Math.ceil(windowWidth.value / slideSize.value);
-  const repeats = Math.ceil(minItemsToFillViewport / (slides.value?.length as number)) + 1;
+  const repeats = Math.ceil(minItemsToFillViewport / slides.value.length) + 1;
 
   repeatedItems.value = Array(repeats).fill(slides.value).flat();
 }

package/template/reference/sections/intro-slider/component/Title.vue

@@ -14,7 +14,7 @@ import { computed, CSSProperties } from 'vue';
 import {
   useLayoutElementDesign,
   useTextareaElementContent, useTextareaElementDesign,
-} from '@lightspeed/crane';
+} from '@lightspeed/crane-api';
 import { Content, Design } from '../type.ts';
 
 const titleContent = useTextareaElementContent<Content>('section_title');

package/template/reference/sections/intro-slider/entity/color.ts

@@ -1,4 +1,4 @@
 export enum ColorType {
-    SOLID = 'solid',
-    GRADIENT = 'gradient',
+  SOLID = 'solid',
+  GRADIENT = 'gradient',
 }

package/template/reference/sections/intro-slider/server.ts

@@ -1,4 +1,4 @@
-import { createVueServerApp } from '@lightspeed/crane';
+import { createVueServerApp } from '@lightspeed/crane-api';
 import ExampleSection from './IntroSlider.vue';
 import { Content, Design } from './type.ts';
 

package/template/reference/sections/tag-lines/TagLines.vue

@@ -52,7 +52,7 @@ import {
   useImageElementContent,
   useTextElementDesign,
   useInputboxElementContent,
-} from '@lightspeed/crane';
+} from '@lightspeed/crane-api';
 import { computed } from 'vue';
 import { Content, Design } from './type.ts';
 import Tagline from '../../shared/components/Tagline.vue';

package/template/reference/sections/tag-lines/client.ts

@@ -1,4 +1,4 @@
-import { createVueClientApp } from '@lightspeed/crane';
+import { createVueClientApp } from '@lightspeed/crane-api';
 import ExampleSection from './TagLines.vue';
 import { Content, Design } from './type.ts';
 

package/template/reference/sections/tag-lines/component/SectionImage.vue

@@ -28,7 +28,7 @@
 import {
   ImageContent,
   useLayoutElementDesign,
-} from '@lightspeed/crane';
+} from '@lightspeed/crane-api';
 import { computed } from 'vue';
 import { Highlight } from '../composables/highlighted-text-image-list.ts';
 

package/template/reference/sections/tag-lines/component/Title.vue

@@ -9,7 +9,7 @@ import { computed, CSSProperties } from 'vue';
 import {
   useInputboxElementContent,
   useTextElementDesign,
-} from '@lightspeed/crane';
+} from '@lightspeed/crane-api';
 import { Content, Design } from '../type.ts';
 
 const titleContent = useInputboxElementContent<Content>('section_title');

package/template/reference/sections/tag-lines/composables/highlighted-text-image-list.ts

@@ -5,14 +5,14 @@ import {
   TextAreaContent,
   useDeckElementContent,
   useTextElementDesign,
-} from '@lightspeed/crane';
+} from '@lightspeed/crane-api';
 import { Content, Design } from '../type.ts';
 
 export type Highlight = {
   text?: TextAreaContent;
   image?: ImageContent;
   design: TextDesignData;
-}
+};
 
 export function useHighlightedTextElementList() {
   const design = computed<TextDesignData[]>(() => [

package/template/reference/sections/tag-lines/server.ts

@@ -1,4 +1,4 @@
-import { createVueServerApp } from '@lightspeed/crane';
+import { createVueServerApp } from '@lightspeed/crane-api';
 import ExampleSection from './TagLines.vue';
 import { Content, Design } from './type.ts';
 

package/template/reference/sections/trending-categories/TrendingCategories.vue

@@ -0,0 +1,70 @@
+<template>
+  <SectionWrapper :style="backgroundStyle">
+    <Title v-if="showTitle" />
+    <div
+      v-if="categorySelectorContent.hasContent"
+      class="categories-wrapper"
+    >
+      <CategoryItem v-for="category in categorySelectorContent.categories" :key="category.id" :category="category" />
+    </div>
+  </SectionWrapper>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties } from "vue";
+import {
+  Color,
+  useBackgroundElementDesign,
+  useCategorySelectorElementContent,
+  useInputboxElementContent,
+  useTextElementDesign
+} from "@lightspeed/crane-api";
+
+import { Content, Design } from "./type";
+import SectionWrapper from "../../shared/components/SectionWrapper.vue";
+import Title from "./component/Title.vue";
+import CategoryItem from "./component/CategoryItem.vue";
+
+
+const titleContent = useInputboxElementContent<Content>("section_title");
+const titleDesign = useTextElementDesign<Design>('section_title');
+
+
+const categorySelectorContent = useCategorySelectorElementContent<Content>(
+  "trending_categories",
+);
+
+const showTitle = computed(() => titleDesign.visible && titleContent.hasContent);
+
+const backgroundDesign = useBackgroundElementDesign<Design>("background");
+const background = computed(() => ({
+  type: backgroundDesign.background?.type,
+  solidColor: backgroundDesign.background?.solid?.color as Color,
+  fromColor: backgroundDesign.background?.gradient?.fromColor as Color,
+  toColor: backgroundDesign.background?.gradient?.toColor as Color,
+}));
+
+const backgroundStyle = computed<CSSProperties>(() => {
+  if (background.value.type === "gradient") {
+    return {
+      "background-image": `linear-gradient(to right, ${background.value.fromColor.hex}, ${background.value.toColor.hex})`,
+    };
+  }
+  return { "background-color": background.value.solidColor.hex };
+});
+</script>
+
+<style lang="scss" scoped>
+.categories-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+  margin: 0 auto;
+  gap: 12px;
+
+  @media (min-width: 768px) {
+    max-width: 1440px;
+  }
+}
+</style>

package/template/reference/sections/trending-categories/assets/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor" d="M19.22 1.735c.528.012.97.42 1.037.933l.009.112.09 4.09a.97.97 0 01-1 1 1.08 1.08 0 01-1.037-.934l-.008-.111-.037-1.684-6.809 6.809c-.438.439-.877.47-1.314.095l-.101-.094c-.438-.437-.469-.876-.093-1.314l.094-.101 6.809-6.809-1.684-.037a1.08 1.08 0 01-1.034-.916l-.01-.128a.969.969 0 01.888-.997l.111-.003 4.09.09zM19 14.5a4.5 4.5 0 01-4.288 4.495L14.5 19h-7a4.5 4.5 0 01-4.495-4.288L3 14.5v-7a4.5 4.5 0 014.288-4.495L7.5 3h2.625a1 1 0 01.117 1.993L10.125 5H7.5a2.5 2.5 0 00-2.495 2.336L5 7.5v7a2.5 2.5 0 002.336 2.495L7.5 17h7a2.5 2.5 0 002.495-2.336L17 14.5v-2.625a1 1 0 011.993-.117l.007.117V14.5z" />
+</svg>

package/template/reference/sections/trending-categories/client.ts

@@ -0,0 +1,5 @@
+import { createVueClientApp } from '@lightspeed/crane-api';
+import TrendingCategories from './TrendingCategories.vue';
+import { Content, Design } from './type.ts';
+
+export default createVueClientApp<Content, Design>(TrendingCategories);

package/template/reference/sections/trending-categories/component/CategoryItem.vue

@@ -0,0 +1,62 @@
+<template>
+  <a
+    v-if="category"
+    :key="category.id"
+    :href="category.url"
+    class="category"
+  >
+    <img v-if="category.imageUrl" class="category_image" :src="category.imageUrl" :alt="category.name" />
+    <h4 class="category__title">{{ category.name }}</h4>
+  </a>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    category: CategoryListComponentItem
+  }
+
+  const { category } = defineProps<Props>()
+</script>
+
+<style scoped lang="scss">
+.category {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  flex: 0 0 auto;
+  min-width: 0;
+  overflow: hidden;
+
+  @media (max-width: 767px) {
+    width: calc(50% - 6px);
+  }
+
+  @media (min-width: 768px) {
+    width: calc(20% - 9.6px);
+  }
+}
+
+.category_image {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 3/4;
+  object-fit: cover;
+  display: block;
+  margin-bottom: 4px;
+  transition: transform 0.3s ease;
+
+  .category:hover & {
+    transform: scale(1.05);
+  }
+}
+
+.category__title {
+  font-size: 1rem;
+  font-weight: 300;
+  margin: 0;
+  padding: 24px 6px 0 6px;
+  line-height: 1.4;
+  color: #111;
+  text-align: center;
+}
+</style>

package/template/reference/sections/trending-categories/component/Title.vue

@@ -0,0 +1,32 @@
+<template>
+  <h1
+    :style="titleStyle"
+    class="section-title"
+  >
+    {{ titleContent.value }}
+  </h1>
+</template>
+
+<script setup lang="ts">
+import { useInputboxElementContent, useTextElementDesign } from "@lightspeed/crane-api";
+import { Content, Design } from "../type";
+import { computed } from "vue";
+
+const titleContent = useInputboxElementContent<Content>("section_title");
+const titleDesign = useTextElementDesign<Design>('section_title');
+
+const titleStyle = computed(() => ({
+  fontSize: `${titleDesign.size}px`,
+  fontFamily: titleDesign.font,
+  color: (titleDesign.color as Color).hex,
+  'font-style': titleDesign.italic ? 'italic' : 'normal',
+  'font-weight': titleDesign.bold ? 'bold' : 'normal',
+}));
+</script>
+
+<style scoped lang="scss">
+.section-title {
+  margin-bottom: 1rem;
+  text-align: center;
+}
+</style>

package/template/reference/sections/trending-categories/entity/color.ts

@@ -0,0 +1,4 @@
+export enum ColorType {
+  SOLID = 'solid',
+  GRADIENT = 'gradient',
+}

package/template/reference/sections/trending-categories/server.ts

@@ -0,0 +1,5 @@
+import { createVueServerApp } from '@lightspeed/crane-api';
+import TrendingCategories from './TrendingCategories.vue';
+import { Content, Design } from './type.ts';
+
+export default createVueServerApp<Content, Design>(TrendingCategories);

package/template/reference/sections/trending-categories/settings/content.ts

@@ -0,0 +1,14 @@
+export default {
+  section_title: {
+    type: 'INPUTBOX',
+    label: '$label.section_title.label',
+    placeholder: '$label.section_title.placeholder',
+  },
+  trending_categories: {
+    type: 'CATEGORY_SELECTOR',
+    label: '$label.trending_categories.label',
+    defaults: {
+      maxCategories: 4,
+    },
+  },
+} as const;