@lightspeed/crane 1.1.1 → 1.1.3

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

@@ -0,0 +1,235 @@
+<template>
+  <div class="slider-container">
+    <div class="slider-track" :style="animationStyle">
+      <div
+        v-for="(image, index) in repeatedItems"
+        :key="`${image.text?.value}__${index}`"
+        :class="sliderItemClass"
+      >
+        <img
+          v-if="slideImageDesign.visible && image.content?.hasContent"
+          class="slider-item__image"
+          :src="image.content.highResolutionMobileImage"
+          loading="lazy"
+          :alt="image.text?.value"
+        />
+
+        <div class="slider-item__wrapper">
+          <div
+            v-if="slideTextDesign.visible"
+            class="slider-item__text"
+          >
+            {{ image.text?.value }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  CSSProperties,
+  watch,
+} from 'vue';
+import {
+  useDeckElementContent,
+  EditorTypes,
+  Card,
+  TextAreaContent,
+  ImageContent,
+  useLayoutElementDesign,
+  useImageElementDesign,
+  useTextElementDesign,
+} from '@lightspeed/crane';
+import { Content, Design } from '../type.ts';
+
+type Slide = {
+  text?: TextAreaContent;
+  content?: ImageContent;
+}
+
+const slideImageDesign = useImageElementDesign<Design>('image_content');
+const slideTextDesign = useTextElementDesign<Design>('image_text');
+
+const slideOverlayConfig = computed(() => ({
+  solidOverlay: (slideImageDesign.overlay?.solid?.color as Color).raw,
+  gradientOverlay: 'linear-gradient(180deg, '
+      + `${(slideImageDesign.overlay?.gradient?.fromColor as Color).raw}1A 0%, `
+      + `${(slideImageDesign.overlay?.gradient?.toColor as Color).raw}70 100%)`,
+}));
+
+const slideImageStyles = computed<CSSProperties>(() => {
+  const style: CSSProperties = {};
+
+  if (slideImageDesign.overlay?.type === 'gradient') {
+    style.background = slideOverlayConfig.value.gradientOverlay;
+  }
+  if (slideImageDesign.overlay?.type === 'solid') {
+    style.background = slideOverlayConfig.value.solidOverlay;
+  }
+
+  return style;
+});
+
+const slideTextStyles = computed<CSSProperties>(() => ({
+  fontSize: `${slideTextDesign.size}px`,
+  fontFamily: slideTextDesign.font,
+  color: (slideTextDesign.color as Color).hex,
+  fontStyle: slideTextDesign.italic ? 'italic' : 'normal',
+  fontWeight: slideTextDesign.bold ? 'bold' : 'normal',
+}));
+
+const sliderContent = useDeckElementContent<Content>('slider');
+
+const slides = computed<Slide[]>(() => (
+  (sliderContent?.cards?.map((card: Card) => ({
+    text: sliderContent.getReactiveRef(card, EditorTypes.TEXTAREA, 'image_text') as TextAreaContent | undefined,
+    content: sliderContent.getReactiveRef(card, EditorTypes.IMAGE, 'image_content') as ImageContent | undefined,
+  })) ?? []).filter((image) => (image.content !== undefined && image.content.hasContent))
+));
+
+const layoutDesign = useLayoutElementDesign();
+const sliderItemClass = computed(() => [
+  'slider-item',
+  {
+    'slider-item--with-border-radius': layoutDesign.layout === 'Narrow_Title_And_Images_With_Border_Radius',
+  },
+]);
+
+const windowWidth = ref<number>(typeof window !== 'undefined' ? window.innerWidth : 0);
+
+const repeatedItems = ref<Slide[]>([]);
+
+const isSmallWindow = computed<boolean>(() => windowWidth.value < 800);
+
+const slideWidth = computed<number>(() => (isSmallWindow.value ? 167 : 256));
+const formattedSlideWidth = computed<string>(() => `${slideWidth.value}px`);
+
+const slideGap = computed<number>(() => (isSmallWindow.value ? 20 : 32));
+const formattedSlideGap = computed<string>(() => `${slideGap.value}px`);
+
+const slideSize = computed<number>(() => slideWidth.value + slideGap.value);
+
+function initializeItems(): void {
+  windowWidth.value = window.innerWidth;
+  const minItemsToFillViewport = Math.ceil(windowWidth.value / slideSize.value);
+  const repeats = Math.ceil(minItemsToFillViewport / (slides.value?.length as number)) + 1;
+
+  repeatedItems.value = Array(repeats).fill(slides.value).flat();
+}
+
+const animationStyle = computed<CSSProperties>(() => {
+  const totalWidth = repeatedItems.value.length * slideSize.value;
+
+  return {
+    width: `${totalWidth}px`,
+  };
+});
+
+watch(slides, initializeItems);
+
+onMounted(() => {
+  initializeItems();
+  window.addEventListener('resize', initializeItems);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', initializeItems);
+});
+</script>
+
+<style lang="scss" scoped>
+.slider-container {
+  overflow: hidden;
+  width: 100%;
+  white-space: nowrap;
+  margin-top: 48px;
+
+  --slide-width: v-bind(formattedSlideWidth);
+  --slide-gap: v-bind(formattedSlideGap);
+}
+
+.slider-track {
+  display: flex;
+  align-items: center;
+  animation: scroll 40s linear infinite 1s;
+  -webkit-animation: scroll 40s linear infinite 1s;
+}
+
+.slider-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: var(--slide-width);
+  margin-right: var(--slide-gap);
+  height: 218px;
+
+  flex-shrink: 0;
+  overflow: hidden;
+
+  &--with-border-radius {
+    border-radius: 16px;
+  }
+
+  @media screen and (min-width: 800px) {
+    height: 334px;
+
+    &--with-border-radius {
+      border-radius: 24px;
+    }
+  }
+
+  &__wrapper {
+    --slider-item-background: v-bind(slideImageStyles.background);
+
+    position: absolute;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    bottom: 0;
+    padding: 16px;
+    background: var(--slider-item-background);
+  }
+
+  &__text {
+    --slider-item-text-font-size: v-bind(slideTextStyles.fontSize);
+    --slider-item-text-font-family: v-bind(slideTextStyles.fontFamily);
+    --slider-item-text-color: v-bind(slideTextStyles.color);
+    --slider-item-text-font-style: v-bind(slideTextStyles.fontStyle);
+    --slider-item-text-font-weight: v-bind(slideTextStyles.fontWeight);
+
+    margin: auto 0 0;
+    line-height: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: var(--slider-item-text-font-family);
+    font-size: var(--slider-item-text-font-size);
+    font-style: var(--slider-item-text-font-style);
+    font-weight: var(--slider-item-text-font-weight);
+    color: var(--slider-item-text-color);
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-50%);
+  }
+}
+</style>

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

@@ -0,0 +1,106 @@
+<template>
+  <div :class="titleClass">
+    <h1 v-if="showTitle">
+      {{ titleContent.value }}
+    </h1>
+    <p v-if="showDescription">
+      {{ descriptionContent.value }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties } from 'vue';
+import {
+  useLayoutElementDesign,
+  useTextareaElementContent, useTextareaElementDesign,
+} from '@lightspeed/crane';
+import { Content, Design } from '../type.ts';
+
+const titleContent = useTextareaElementContent<Content>('section_title');
+const descriptionContent = useTextareaElementContent<Content>('section_description');
+
+const titleDesign = useTextareaElementDesign<Design>('section_title');
+const descriptionDesign = useTextareaElementDesign<Design>('section_description');
+
+const showTitle = computed<boolean>(() => titleDesign.visible && titleContent.hasContent);
+const showDescription = computed<boolean>(() => descriptionDesign.visible && descriptionContent.hasContent);
+
+const layoutDesign = useLayoutElementDesign();
+const titleClass = computed(() => [
+  'title',
+  {
+    'title--narrow': layoutDesign.layout === 'Narrow_Title_And_Images_With_Border_Radius',
+  },
+]);
+
+const titleStyle = computed<CSSProperties>(() => ({
+  fontSize: `${titleDesign.size}px`,
+  fontFamily: titleDesign.font,
+  color: (titleDesign.color as Color).hex,
+  fontStyle: titleDesign.italic ? 'italic' : 'normal',
+  fontWeight: titleDesign.bold ? 'bold' : 'normal',
+}));
+
+const descriptionStyle = computed<CSSProperties>(() => ({
+  fontSize: `${descriptionDesign.size}px`,
+  fontFamily: descriptionDesign.font,
+  color: (descriptionDesign.color as Color).hex,
+  fontStyle: descriptionDesign.italic ? 'italic' : 'normal',
+  fontWeight: descriptionDesign.bold ? 'bold' : 'normal',
+}));
+</script>
+
+<style lang="scss" scoped>
+.title {
+  text-align: center;
+  white-space: break-spaces;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  padding: 0 20px;
+
+  &--narrow {
+    max-width: 660px;
+  }
+
+  h1 {
+    --font-size: v-bind(titleStyle.fontSize);
+    --font-family: v-bind(titleStyle.fontFamily);
+    --color: v-bind(titleStyle.color);
+    --font-style: v-bind(titleStyle.fontStyle);
+    --font-weight: v-bind(titleStyle.fontWeight);
+    --font-size-multiplier: 1;
+
+    font-size: calc(var(--font-size) * var(--font-size-multiplier));
+    font-family: var(--font-family);
+    color: var(--color);
+    font-style: var(--font-style);
+    font-weight: var(--font-weight);
+    line-height: 1.3;
+    margin-bottom: 24px;
+
+    @media screen and (max-width: 768px) {
+      --font-size-multiplier: 0.7;
+    }
+  }
+
+  p {
+    --font-size: v-bind(descriptionStyle.fontSize);
+    --font-family: v-bind(descriptionStyle.fontFamily);
+    --color: v-bind(descriptionStyle.color);
+    --font-style: v-bind(descriptionStyle.fontStyle);
+    --font-weight: v-bind(descriptionStyle.fontWeight);
+    --font-size-multiplier: 1;
+
+    font-size: calc(var(--font-size) * var(--font-size-multiplier));
+    font-family: var(--font-family);
+    color: var(--color);
+    font-style: var(--font-style);
+    font-weight: var(--font-weight);
+
+    @media screen and (max-width: 768px) {
+      --font-size-multiplier: 1.25;
+    }
+  }
+}
+</style>

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

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

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

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

package/template/reference/sections/intro-slider/settings/content.ts

@@ -0,0 +1,43 @@
+export default {
+  section_title: {
+    type: 'TEXTAREA',
+    label: '$label.section_title.label',
+    placeholder: '$label.section_title.placeholder',
+  },
+  section_description: {
+    type: 'TEXTAREA',
+    label: '$label.section_description.label',
+    placeholder: '$label.section_description.placeholder',
+  },
+  section_tagline: {
+    type: 'INPUTBOX',
+    label: '$label.section_tagline.label',
+    placeholder: '$label.section_tagline.placeholder',
+  },
+  section_button: {
+    type: 'BUTTON',
+    label: '$label.section_button.label',
+    title: '$label.section_button.title',
+  },
+  slider: {
+    type: 'DECK',
+    label: '$label.slider.title',
+    addButtonLabel: '$label.slider.add_slide',
+    maxCards: 6,
+    cards: {
+      defaultCardContent: {
+        label: '$label.slider.slide_title',
+        settings: {
+          image_content: {
+            type: 'IMAGE',
+            label: '$label.slide_content.label',
+          },
+          image_text: {
+            type: 'TEXTAREA',
+            label: '$label.slide_text.label',
+          },
+        },
+      },
+    },
+  },
+} as const;

package/template/reference/sections/intro-slider/settings/design.ts

@@ -0,0 +1,88 @@
+export default {
+  section_title: {
+    type: 'TEXT',
+    label: '$label.section_title.label',
+    colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
+    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: 'noto_serif',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#000000',
+      visible: true,
+    },
+  },
+  section_description: {
+    type: 'TEXT',
+    label: '$label.section_description.label',
+    colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
+    sizes: [12, 13, 14, 15, 16, 17, 18, 20],
+    defaults: {
+      font: 'inter',
+      size: 16,
+      bold: true,
+      italic: false,
+      color: '#000000',
+      visible: true,
+    },
+  },
+  section_tagline: {
+    type: 'TEXT',
+    label: '$label.section_tagline.label',
+    colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
+    sizes: [12, 13, 14, 15, 16, 17, 18, 20],
+    defaults: {
+      font: 'noto_serif',
+      size: 16,
+      bold: false,
+      italic: false,
+      color: '#C8D9FF',
+      visible: true,
+    },
+  },
+  section_button: {
+    type: 'BUTTON',
+    label: '$label.section_button.label',
+    colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
+    defaults: {
+      appearance: 'SOLID',
+      size: 'MEDIUM',
+      style: 'pill',
+      color: '#000000',
+      visible: true,
+    },
+  },
+  background: {
+    type: 'BACKGROUND',
+    label: '$label.background.label',
+    colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
+    defaults: {
+      style: 'COLOR',
+      color: '#F4EFE3',
+    },
+  },
+  image_text: {
+    type: 'TEXT',
+    label: '$label.section_image_text.label',
+    colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
+    sizes: [16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28],
+    defaults: {
+      font: 'noto_serif',
+      size: 24,
+      bold: true,
+      italic: false,
+      color: '#FFFFFF',
+      visible: true,
+    },
+  },
+  image_content: {
+    type: 'IMAGE',
+    label: '$label.section_image.label',
+    colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
+    defaults: {
+      overlay: 'GRADIENT',
+      color: ['#000000', '#000000'],
+    },
+  },
+} as const;

package/template/reference/sections/intro-slider/settings/layout.ts

@@ -0,0 +1,12 @@
+export default [
+  {
+    layoutId: 'Narrow_Title_And_Images_With_Border_Radius',
+    selectedContentSettings: [],
+    selectedDesignSettings: [],
+  },
+  {
+    layoutId: 'Wide_Title_And_Images_Without_Border_Radius',
+    selectedContentSettings: [],
+    selectedDesignSettings: [],
+  },
+];

package/template/reference/sections/intro-slider/settings/translations.ts

@@ -0,0 +1,53 @@
+export default {
+  en: {
+    '$label.section_title.label': 'Main title',
+    '$label.section_title.placeholder': 'This will be the main title for this section',
+    '$label.section_description.label': 'Description',
+    '$label.section_description.placeholder': 'This description will be displayed below the title',
+    '$label.section_tagline.label': 'Tagline',
+    '$label.section_tagline.placeholder': 'This label will be displayed above the title',
+    '$label.section_button.label': 'Button',
+    '$label.section_image_text.label': 'Image title',
+    '$label.section_image.label': 'Image',
+
+    '$label.slider.title': 'Slider',
+    '$label.slider.slide_title': 'Slide',
+    '$label.slider.add_slide': 'Add slide',
+    '$label.slide_text.label': 'Text on a slide',
+    '$label.slide_content.label': 'Slide image',
+
+    '$label.background.label': 'Background',
+  },
+
+  nl: {
+    '$label.showcase_1.blockName': 'Hoe we werken',
+    '$label.showcase_1.section_tagline.text': 'Seizoensgebonden',
+    '$label.showcase_1.section_title.text': 'De herfst is hier:',
+    '$label.showcase_1.highlighted_text_1.text': 'trui weer',
+    '$label.showcase_1.highlighted_text_2.text': 'shop chelsea boots',
+    '$label.showcase_1.highlighted_text_3.text': 'ontdek onze vakantiecadeaugids',
+
+    '$label.showcase_2.blockName': 'Hoe we werken',
+    '$label.showcase_2.section_tagline.text': 'Onze fietsen',
+    '$label.showcase_2.section_title.text': 'Wat we verkopen:',
+    '$label.showcase_2.highlighted_text_1.text': 'mountain- en racefietsen',
+    '$label.showcase_2.highlighted_text_2.text': 'hybride fietsen',
+    '$label.showcase_2.highlighted_text_3.text': 'vouwfietsen',
+  },
+
+  fr: {
+    '$label.showcase_1.blockName': 'Comment nous travaillons',
+    '$label.showcase_1.section_tagline.text': 'Saisonnier',
+    '$label.showcase_1.section_title.text': 'L\'automne est là:',
+    '$label.showcase_1.highlighted_text_1.text': 'temps des pulls',
+    '$label.showcase_1.highlighted_text_2.text': 'achetez des bottes chelsea',
+    '$label.showcase_1.highlighted_text_3.text': 'découvrez notre guide des cadeaux de vacances',
+
+    '$label.showcase_2.blockName': 'Comment nous travaillons',
+    '$label.showcase_2.section_tagline.text': 'Nos vélos',
+    '$label.showcase_2.section_title.text': 'Ce que nous vendons:',
+    '$label.showcase_2.highlighted_text_1.text': 'vélos de montagne et de route',
+    '$label.showcase_2.highlighted_text_2.text': 'vélos hybrides',
+    '$label.showcase_2.highlighted_text_3.text': 'vélos pliants',
+  },
+} as const;