@lightspeed/crane 2.0.4 → 3.0.0

package/template/reference/sections/about-us/showcases/2.ts

@@ -1,4 +1,10 @@
-export default {
+import {
+  content,
+  design,
+  showcase,
+} from '@lightspeed/crane-api';
+
+export default showcase.init({
   showcaseId: '2',
   previewImage: {
     set: {
@@ -10,12 +16,10 @@ export default {
   layoutId: 'Images_Without_Border_Radius',
   blockName: '$label.showcase_2.blockName',
   content: {
-    title: {
-      type: 'INPUTBOX',
+    title: content.default.inputbox({
       text: '$label.showcase_2.section_title.text',
-    },
-    image: {
-      type: 'IMAGE',
+    }),
+    image: content.default.image({
       imageData: {
         set: {
           MOBILE_WEBP_LOW_RES: {
@@ -33,109 +37,93 @@ export default {
         },
         borderInfo: {},
       },
-    },
-    stats: {
-      type: 'DECK',
+    }),
+    stats: content.default.deck({
       cards: [
         {
           settings: {
-            stat_value: {
-              type: 'INPUTBOX',
+            stat_value: content.default.inputbox({
               text: '$label.showcase_2.stat_value.default_1.text',
-            },
-            stat_caption: {
-              type: 'INPUTBOX',
+            }),
+            stat_caption: content.default.inputbox({
               text: '$label.showcase_2.stat_caption_1.default.text',
-            },
+            }),
           },
         },
         {
           settings: {
-            stat_value: {
-              type: 'INPUTBOX',
+            stat_value: content.default.inputbox({
               text: '$label.showcase_2.stat_value.default_2.text',
-            },
-            stat_caption: {
-              type: 'INPUTBOX',
+            }),
+            stat_caption: content.default.inputbox({
               text: '$label.showcase_2.stat_caption_2.default.text',
-            },
+            }),
           },
         },
         {
           settings: {
-            stat_value: {
-              type: 'INPUTBOX',
+            stat_value: content.default.inputbox({
               text: '$label.showcase_2.stat_value.default_3.text',
-            },
-            stat_caption: {
-              type: 'INPUTBOX',
+            }),
+            stat_caption: content.default.inputbox({
               text: '$label.showcase_2.stat_caption_3.default.text',
-            },
+            }),
           },
         },
         {
           settings: {
-            stat_value: {
-              type: 'INPUTBOX',
+            stat_value: content.default.inputbox({
               text: '$label.showcase_2.stat_value.default_4.text',
-            },
-            stat_caption: {
-              type: 'INPUTBOX',
+            }),
+            stat_caption: content.default.inputbox({
               text: '$label.showcase_2.stat_caption_4.default.text',
-            },
+            }),
           },
         },
       ],
-    },
-    button: {
-      type: 'BUTTON',
+    }),
+    button: content.default.button({
       title: '$label.showcase_2.button_content.title',
       buttonType: 'HYPER_LINK',
       link: 'https://www.example.com',
-    },
+    }),
   },
   design: {
-    image: {
-      type: 'IMAGE',
+    image: design.default.image({
       overlay: 'GRADIENT',
       color: ['#FFFFFF', '#000000'],
-    },
-    title: {
-      type: 'TEXT',
+    }),
+    title: design.default.text({
       font: 'pt_mono',
       size: 48,
       bold: true,
       italic: false,
       color: '#FFFFFF',
-    },
-    caption: {
-      type: 'TEXT',
+    }),
+    caption: design.default.text({
       font: 'inter',
       size: 16,
       bold: true,
       italic: false,
       color: '#FFFFFF',
-    },
-    value: {
-      type: 'TEXT',
+    }),
+    value: design.default.text({
       font: 'pt_mono',
       size: 40,
       bold: true,
       italic: false,
       color: '#878787',
-    },
-    background: {
-      type: 'BACKGROUND',
+    }),
+    background: design.default.background({
       style: 'COLOR',
       color: '#101010',
-    },
-    button: {
-      type: 'BUTTON',
+    }),
+    button: design.default.button({
       font: 'inter',
       appearance: 'OUTLINE',
       size: 'LARGE',
       shape: 'RECTANGLE',
       color: '#FFFFFF',
-    },
+    }),
   },
-} as const;
+});

package/template/reference/sections/about-us/showcases/translations.ts

@@ -1,4 +1,6 @@
-export default {
+import { translation } from '@lightspeed/crane-api';
+
+export default translation.init({
   en: {
     '$label.showcase_1.blockName': 'Reference Section – About us',
 
@@ -256,4 +258,4 @@ export default {
 
     '$label.showcase_2.button_content.title': 'En savoir plus',
   },
-} as const;
+});

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

@@ -2,11 +2,16 @@
   <SectionWrapper :style="backgroundStyle">
     <Title v-if="showTitle" />
     <div class="products-wrapper">
-      <ProductItem
-        v-for="product in productSelectorContent.products"
-        :key="product.id"
-        :product="product"
-      />
+      <template v-if="productSelectorContent.hasContent">
+        <ProductItem
+          v-for="product in productSelectorContent.products"
+          :key="product.id"
+          :product="product"
+        />
+      </template>
+      <template v-else>
+        <ProductPlaceholder />
+      </template>
     </div>
   </SectionWrapper>
 </template>
@@ -24,6 +29,7 @@ import { Content, Design } from "./type";
 import SectionWrapper from "../../shared/components/SectionWrapper.vue";
 import Title from "./component/Title.vue";
 import ProductItem from "./component/ProductItem.vue";
+import ProductPlaceholder from "./component/ProductPlaceholder.vue";
 
 
 const titleContent = useInputboxElementContent<Content>("section_title");
@@ -52,7 +58,7 @@ const backgroundStyle = computed<CSSProperties>(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .products-wrapper {
   display: flex;
   flex-wrap: wrap;

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

@@ -6,6 +6,9 @@
     class="product"
   >
     <img v-if="product.fullImageUrl" class="product_image" :src="product.fullImageUrl" :alt="product.name" />
+    <div v-else class="product__background">
+      <div class="product__background__name">{{ product.name }}</div>
+    </div>
     <h4 class="product__title">
       {{ product.name }}
     </h4>
@@ -22,7 +25,7 @@
 
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .product {
   display: flex;
   flex-direction: column;
@@ -68,4 +71,18 @@
   font-weight: 600;
   color: #111;
 }
+
+.product__background {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: auto;
+  aspect-ratio: 3/4;
+
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.product__background__name {
+  text-align: center;
+}
 </style>

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

@@ -0,0 +1,42 @@
+<template>
+  <div
+    v-for="index in placeholderItemsCount"
+    :key="index"
+    class="placeholder"
+  >
+    <div class="placeholder__image"></div>
+    <p class="placeholder__title">
+      Your product will be shown here
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const placeholderItemsCount = ref(4)
+</script>
+
+
+
+<style scoped>
+.placeholder {
+  display: flex;
+  flex-direction: column;
+}
+
+.placeholder__image {
+  width: unset;
+  min-width: unset;
+  margin: 0;
+  aspect-ratio: 3 / 4;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.placeholder__title {
+  margin-top: 8px;
+  text-align: center;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.4);
+}
+</style>

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

@@ -24,7 +24,7 @@ const titleStyle = computed(() => ({
 }));
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .section-title {
   margin-bottom: 1rem;
 }

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

@@ -1,14 +1,12 @@
+import { content } from '@lightspeed/crane-api';
+
 export default {
-  section_title: {
-    type: 'INPUTBOX',
+  section_title: content.inputbox({
     label: '$label.section_title.label',
     placeholder: '$label.section_title.placeholder',
-  },
-  featured_products: {
-    type: 'PRODUCT_SELECTOR',
+  }),
+  featured_products: content.productSelector({
     label: '$label.featured_products.label',
-    defaults: {
-      maxProducts: 6,
-    },
-  },
-} as const;
+    maxProducts: 6,
+  }),
+};

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

@@ -1,6 +1,7 @@
+import { design } from '@lightspeed/crane-api';
+
 export default {
-  section_title: {
-    type: 'TEXT',
+  section_title: design.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],
@@ -12,9 +13,8 @@ export default {
       color: '#313131',
       visible: true,
     },
-  },
-  background: {
-    type: 'BACKGROUND',
+  }),
+  background: design.background({
     label: '$label.background.label',
     colors: [
       '#FFFFFF66',
@@ -29,5 +29,5 @@ export default {
       style: 'COLOR',
       color: 'global.color.background',
     },
-  },
-} as const;
+  }),
+};

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

@@ -1,4 +1,6 @@
-export default {
+import { translation } from '@lightspeed/crane-api';
+
+export default translation.init({
   en: {
     '$label.section_title.label': 'Main title',
     '$label.section_title.placeholder':
@@ -21,4 +23,4 @@ export default {
       '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

@@ -1,4 +1,6 @@
-export default {
+import { content, design, showcase } from '@lightspeed/crane-api';
+
+export default showcase.init({
   showcaseId: '1',
   previewImage: {
     set: {
@@ -9,20 +11,14 @@ export default {
   },
   blockName: '$label.showcase_1.blockName',
   content: {
-    section_title: {
-      type: 'INPUTBOX',
+    section_title: content.default.inputbox({
       text: '$label.showcase_1.section_title.text',
-    },
-    featured_products: {
-      type: 'PRODUCT_SELECTOR',
-      maxProducts: 6,
-    },
+    }),
   },
   design: {
-    background: {
-      type: 'BACKGROUND',
+    background: design.default.background({
       style: 'COLOR',
       color: 'global.color.background',
-    },
+    }),
   },
-} as const;
+});

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

@@ -1,4 +1,6 @@
-export default {
+import { translation } from '@lightspeed/crane-api';
+
+export default translation.init({
   en: {
     '$label.showcase_1.blockName': 'Reference Section — Featured Products',
     '$label.showcase_1.section_title.text': 'Featured Products',
@@ -13,4 +15,4 @@ export default {
     '$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/intro-slider/IntroSlider.vue

@@ -58,7 +58,7 @@ const buttonContent = useButtonElementContent<Content>('section_button') as Butt
 const buttonDesign = useButtonElementDesign<Design>('section_button') as ButtonDesignData;
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .intro-slider-section {
   min-height: 810px;
   width: 100%;
@@ -67,11 +67,11 @@ const buttonDesign = useButtonElementDesign<Design>('section_button') as ButtonD
   flex-direction: column;
   align-items: center;
   gap: 24px;
+}
 
-  &__button {
-    margin: auto;
-    width: fit-content;
-    max-width: 360px;
-  }
+.intro-slider-section__button {
+  margin: auto;
+  width: fit-content;
+  max-width: 360px;
 }
 </style>

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

@@ -79,7 +79,7 @@ const slideImageStyles = computed<CSSProperties>(() => {
 const slideTextStyles = computed<CSSProperties>(() => ({
   fontSize: `${slideTextDesign.size}px`,
   fontFamily: slideTextDesign.font,
-  color: (slideTextDesign.color as Color).hex,
+  color: (slideTextDesign.color as Color)?.hex,
   fontStyle: slideTextDesign.italic ? 'italic' : 'normal',
   fontWeight: slideTextDesign.bold ? 'bold' : 'normal',
 }));
@@ -149,7 +149,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .slider-container {
   overflow: hidden;
   width: 100%;
@@ -175,58 +175,57 @@ onBeforeUnmount(() => {
   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);
-  }
+.slider-item--with-border-radius {
+  border-radius: 16px;
 
-  &__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);
+  @media screen and (min-width: 800px) {
+    border-radius: 24px;
   }
+}
 
-  &__image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
+.slider-item__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);
+}
+
+.slider-item__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);
+}
+
+.slider-item__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 @keyframes scroll {

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

@@ -37,7 +37,7 @@ const titleClass = computed(() => [
 const titleStyle = computed<CSSProperties>(() => ({
   fontSize: `${titleDesign.size}px`,
   fontFamily: titleDesign.font,
-  color: (titleDesign.color as Color).hex,
+  color: (titleDesign.color as Color)?.hex,
   fontStyle: titleDesign.italic ? 'italic' : 'normal',
   fontWeight: titleDesign.bold ? 'bold' : 'normal',
 }));
@@ -45,13 +45,13 @@ const titleStyle = computed<CSSProperties>(() => ({
 const descriptionStyle = computed<CSSProperties>(() => ({
   fontSize: `${descriptionDesign.size}px`,
   fontFamily: descriptionDesign.font,
-  color: (descriptionDesign.color as Color).hex,
+  color: (descriptionDesign.color as Color)?.hex,
   fontStyle: descriptionDesign.italic ? 'italic' : 'normal',
   fontWeight: descriptionDesign.bold ? 'bold' : 'normal',
 }));
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .title {
   text-align: center;
   white-space: break-spaces;
@@ -59,11 +59,7 @@ const descriptionStyle = computed<CSSProperties>(() => ({
   overflow-wrap: break-word;
   padding: 0 20px;
 
-  &--narrow {
-    max-width: 660px;
-  }
-
-  h1 {
+  & h1 {
     --font-size: v-bind(titleStyle.fontSize);
     --font-family: v-bind(titleStyle.fontFamily);
     --color: v-bind(titleStyle.color);
@@ -84,7 +80,7 @@ const descriptionStyle = computed<CSSProperties>(() => ({
     }
   }
 
-  p {
+  & p {
     --font-size: v-bind(descriptionStyle.fontSize);
     --font-family: v-bind(descriptionStyle.fontFamily);
     --color: v-bind(descriptionStyle.color);
@@ -103,4 +99,8 @@ const descriptionStyle = computed<CSSProperties>(() => ({
     }
   }
 }
+
+.title--narrow {
+  max-width: 660px;
+}
 </style>