@lightspeed/crane 2.0.4 → 3.0.0

package/template/reference/templates/reference-template-bike/pages/home.ts

@@ -1,34 +1,30 @@
+import { section } from '@lightspeed/crane-api';
+
 export default {
   sections: [
-    {
-      type: 'custom',
+    section.custom({
       id: 'intro-slider',
       showcase_id: '2',
-    },
-    {
-      type: 'custom',
+    }),
+    section.custom({
       id: 'example-section',
       showcase_id: '3',
-    },
-    {
-      type: 'custom',
+    }),
+    section.custom({
       id: 'tag-lines',
       showcase_id: '2',
-    },
-    {
-      type: 'custom',
+    }),
+    section.custom({
       id: 'about-us',
       showcase_id: '2',
-    },
-    {
-      type: 'custom',
+    }),
+    section.custom({
       id: 'featured-products',
       showcase_id: '1',
-    },
-    {
-      type: 'custom',
+    }),
+    section.custom({
       id: 'trending-categories',
       showcase_id: '1',
-    },
+    }),
   ],
 };

package/template/reference/templates/reference-template-bike/pages/product.ts

@@ -1,10 +1,7 @@
-import { StorePageConfiguration } from '@lightspeed/crane-api';
+import { section } from '@lightspeed/crane-api';
 
 export default {
   sections: [
-    {
-      type: 'store',
-      id: undefined,
-    },
+    section.store({}),
   ],
-} satisfies StorePageConfiguration;
+};

package/template/sections/example-section/ExampleSection.vue

@@ -48,10 +48,8 @@ const backgroundStyle = computed(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.example-section {
-  &__blank_space {
-    height: 40px;
-  }
+<style scoped>
+.example-section__blank_space {
+  height: 40px;
 }
 </style>

package/template/sections/example-section/component/button/Button.vue

@@ -26,7 +26,7 @@ import arrowIcon from '../../assets/arrow.svg';
 const button = useButtonElementContent<Content>('button');
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .button-content {
   display: flex;
   justify-content: center;

package/template/sections/example-section/component/image/Image.vue

@@ -105,60 +105,60 @@ const textStyle = computed(() => ({
 }));
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .image-section {
   height: 100%;
   position: relative;
+}
 
-  &__link {
-    height: 100%;
-    width: 100%;
-    display: flex;
-  }
+.image-section__link {
+  height: 100%;
+  width: 100%;
+  display: flex;
+}
 
-  &__link-wrap {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    position: relative;
-    z-index: 999;
-  }
+.image-section__link-wrap {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  position: relative;
+  z-index: 999;
+}
 
-  &__content {
-    display:block;
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-    z-index: -1;
-  }
+.image-section__content {
+  display: block;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  z-index: -1;
+}
 
-  &__content-block {
-    display: flex;
-    width: 100%;
+.image-section__content-block {
+  display: flex;
+  width: 100%;
+}
 
-    &-position-on {
-      height: 100%;
-    }
+.image-section__content-block-position-on {
+  height: 100%;
+}
 
-    &-position-under {
-      height: calc(100% - 60px);
-    }
-  }
+.image-section__content-block-position-under {
+  height: calc(100% - 60px);
+}
 
-  &__text {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    align-content: center;
-    padding: 16px;
+.image-section__text {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  align-content: center;
+  padding: 16px;
+}
 
-    &-position-on {
-      height: auto;
-    }
+.image-section__text-position-on {
+  height: auto;
+}
 
-    &-position-under {
-      height: 60px;
-    }
-  }
+.image-section__text-position-under {
+  height: 60px;
 }
 </style>

package/template/sections/example-section/component/image/ImagesGrid.vue

@@ -46,46 +46,41 @@ window.addEventListener('resize', onWidthChange);
 const smallWindow = computed(() => windowWidth.value <= 768);
 </script>
 
-<style lang="scss" scoped>
-@mixin image-grid {
+<style scoped>
+/* Base grid styles (previously @mixin image-grid) */
+/* Container only (not .image-grid__content-* cells) */
+[class^="image-grid__"]:not([class*="image-grid__content"]) {
   display: grid;
   grid-gap: 20px;
+
   @media screen and (min-width: 900px) {
     aspect-ratio: 1/0.55;
   }
 }
 
 .image-grid__1 {
-  @include image-grid;
-
-  & {
-    grid-template-columns: [col1-start] 1fr [col1-end];
-    grid-template-rows: [row1-start] 1fr [row1-end];
-  }
+  grid-template-columns: [col1-start] 1fr [col1-end];
+  grid-template-rows: [row1-start] 1fr [row1-end];
 
   @media screen and (max-width: 900px) {
     aspect-ratio: 1;
   }
 
-  .image-grid__content-1 {
+  & .image-grid__content-1 {
     grid-column: col1-start / col1-end;
     grid-row: row1-start / row1-end;
   }
 }
 
 .image-grid__2 {
-  @include image-grid;
-
-  & {
-    grid-template-columns: [col1-start] 11fr  [col2-start] 9fr [col2-end];
-    grid-template-rows: [row1-start] 4.5fr [row2-start] 2.75fr [row2-end];
-  }
+  grid-template-columns: [col1-start] 11fr  [col2-start] 9fr [col2-end];
+  grid-template-rows: [row1-start] 4.5fr [row2-start] 2.75fr [row2-end];
 
   @media screen and (max-width: 900px) {
     aspect-ratio: 4.5/7.25;
   }
 
-  .image-grid__content-1 {
+  & .image-grid__content-1 {
     @media screen and (min-width: 900px) {
       grid-column: col1-start / col2-start;
       grid-row: row1-start / row2-end;
@@ -97,7 +92,7 @@ const smallWindow = computed(() => windowWidth.value <= 768);
     }
   }
 
-  .image-grid__content-2 {
+  & .image-grid__content-2 {
     @media screen and (min-width: 900px) {
       grid-column: col2-start / col2-end;
       grid-row: row1-start / row2-end;
@@ -111,18 +106,14 @@ const smallWindow = computed(() => windowWidth.value <= 768);
 }
 
 .image-grid__3 {
-  @include image-grid;
-
-  & {
-    grid-template-columns: [col1-start] 11fr  [col2-start] 9fr [col2-end];
-    grid-template-rows: [row1-start] 4.5fr [row2-start] 0.5fr [row3-start] 2.25fr [row4-start] 2.75fr [row4-end];
-  }
+  grid-template-columns: [col1-start] 11fr  [col2-start] 9fr [col2-end];
+  grid-template-rows: [row1-start] 4.5fr [row2-start] 0.5fr [row3-start] 2.25fr [row4-start] 2.75fr [row4-end];
 
   @media screen and (max-width: 900px) {
     aspect-ratio: 0.45;
   }
 
-  .image-grid__content-1 {
+  & .image-grid__content-1 {
     @media screen and (min-width: 900px) {
       grid-column: col1-start / col2-start;
       grid-row: row1-start / row4-end;
@@ -134,7 +125,7 @@ const smallWindow = computed(() => windowWidth.value <= 768);
     }
   }
 
-  .image-grid__content-2 {
+  & .image-grid__content-2 {
     @media screen and (min-width: 900px) {
       grid-column: col2-start / col2-end;
       grid-row: row1-start / row3-start;
@@ -146,7 +137,7 @@ const smallWindow = computed(() => windowWidth.value <= 768);
     }
   }
 
-  .image-grid__content-3 {
+  & .image-grid__content-3 {
     @media screen and (min-width: 900px) {
       grid-column: col2-start / col2-end;
       grid-row: row3-start / row4-end;
@@ -160,8 +151,6 @@ const smallWindow = computed(() => windowWidth.value <= 768);
 }
 
 .image-grid__4 {
-  @include image-grid;
-
   @media screen and (min-width: 900px) {
     grid-template-columns: [col1-start] 11fr [col2-start] 4.5fr [col3-start] 4.5fr [col3-end];
     grid-template-rows: [row1-start] 1fr [row2-start] 1fr [row2-end];
@@ -174,7 +163,7 @@ const smallWindow = computed(() => windowWidth.value <= 768);
     aspect-ratio: 0.45;
   }
 
-  .image-grid__content-1 {
+  & .image-grid__content-1 {
     @media screen and (min-width: 900px) {
       grid-column: col1-start / col2-start;
       grid-row: row1-start / row2-end;
@@ -186,7 +175,7 @@ const smallWindow = computed(() => windowWidth.value <= 768);
     }
   }
 
-  .image-grid__content-2 {
+  & .image-grid__content-2 {
     @media screen and (min-width: 900px) {
       grid-column: col2-start / col3-end;
       grid-row: row1-start / row2-start;
@@ -198,7 +187,7 @@ const smallWindow = computed(() => windowWidth.value <= 768);
     }
   }
 
-  .image-grid__content-3 {
+  & .image-grid__content-3 {
     @media screen and (min-width: 900px) {
       grid-column: col2-start / col3-start;
       grid-row: row2-start / row2-end;
@@ -210,7 +199,7 @@ const smallWindow = computed(() => windowWidth.value <= 768);
     }
   }
 
-  .image-grid__content-4 {
+  & .image-grid__content-4 {
     @media screen and (min-width: 900px) {
       grid-column: col3-start / col3-end;
       grid-row: row2-start / row2-end;

package/template/sections/example-section/component/selectbox/Selectbox.vue

@@ -24,7 +24,7 @@ const backgroundColor = computed(() => {
 const textColor = computed(() => (isDark(backgroundColor.value) ? 'white' : 'black'));
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .control-item {
   margin: 20px 0;
   display: flex;

package/template/sections/example-section/component/title/Title.vue

@@ -49,7 +49,7 @@ const descriptionStyle = computed(() => ({
 }));
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .title-section__description {
   max-width: 80%;
 }

package/template/sections/example-section/component/toggle/Toggle.vue

@@ -24,7 +24,7 @@ const backgroundColor = computed(() => {
 const textColor = computed(() => (isDark(backgroundColor.value) ? 'white' : 'black'));
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .custom-block {
   padding: 50px;
   background-color: #f8f8f8;
@@ -36,10 +36,10 @@ const textColor = computed(() => (isDark(backgroundColor.value) ? 'white' : 'bla
   @media screen and (min-width: 1200px) {
     padding: 100px;
   }
+}
 
-  &__blank_space {
-    height: 40px;
-  }
+.custom-block__blank_space {
+  height: 40px;
 }
 
 .control-item {

package/template/sections/example-section/settings/content.ts

@@ -1,20 +1,18 @@
+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',
-  },
-  section_description: {
-    type: 'TEXTAREA',
+  }),
+  section_description: content.textarea({
     label: '$label.section_description.label',
     placeholder: '$label.section_description.placeholder',
-  },
-  divider: {
-    type: 'DIVIDER',
+  }),
+  divider: content.divider({
     label: '$label.divider.label',
-  },
-  images: {
-    type: 'DECK',
+  }),
+  images: content.deck({
     label: '$label.images.deck_title',
     addButtonLabel: '$label.images.add_card_button',
     maxCards: 5,
@@ -22,8 +20,7 @@ export default {
       defaultCardContent: {
         label: '$label.images.card_title',
         settings: {
-          image_content: {
-            type: 'IMAGE',
+          image_content: content.image({
             label: '$label.image_content_1.label',
             defaults: {
               imageData: {
@@ -44,46 +41,41 @@ export default {
                 borderInfo: {},
               },
             },
-          },
-          image_text: {
-            type: 'TEXTAREA',
+          }),
+          image_text: content.textarea({
             label: '$label.image_text_1.label',
             placeholder: '$label.image_text.placeholder',
             defaults: {
               text: '$label.images.default.image_text',
             },
-          },
-          image_link: {
-            type: 'INPUTBOX',
+          }),
+          image_link: content.inputbox({
             label: '$label.image_link_1.label',
             placeholder: '$label.image_link.placeholder',
             defaults: {
               text: '$label.images.default.image_link.text',
             },
-          },
+          }),
         },
       },
     },
-  },
-  button: {
-    type: 'BUTTON',
+  }),
+  button: content.button({
     label: '$label.button.label',
     defaults: {
       title: '$label.button.defaults.title',
       buttonType: 'HYPER_LINK',
       link: 'https://www.example.com',
     },
-  },
-  toggle: {
-    type: 'TOGGLE',
+  }),
+  toggle: content.toggle({
     label: '$label.toggle.label',
     description: '$label.toggle.description',
     defaults: {
       enabled: true,
     },
-  },
-  selectbox: {
-    type: 'SELECTBOX',
+  }),
+  selectbox: content.selectbox({
     placeholder: '$label.selectbox.placeholder',
     label: '$label.selectbox.label',
     description: '$label.selectbox.description',
@@ -100,14 +92,13 @@ export default {
     defaults: {
       value: 'one',
     },
-  },
-  info: {
-    type: 'INFO',
+  }),
+  info: content.info({
     label: '$label.info.label',
     description: '$label.info.description',
     button: {
       label: '$label.info.button.label',
       link: 'https://example.com',
     },
-  },
-} as const;
+  }),
+};

package/template/sections/example-section/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,
     },
-  },
-  section_description: {
-    type: 'TEXT',
+  }),
+  section_description: design.text({
     label: '$label.section_description.label',
     colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
     sizes: [12, 13, 14, 15, 16, 17, 18, 20],
@@ -26,13 +26,11 @@ export default {
       color: '#313131',
       visible: true,
     },
-  },
-  divider: {
-    type: 'DIVIDER',
+  }),
+  divider: design.divider({
     label: '$label.divider.label',
-  },
-  image_text: {
-    type: 'TEXT',
+  }),
+  image_text: design.text({
     label: '$label.image_text.label',
     colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
     sizes: [12, 13, 14, 15, 16, 17, 18, 20],
@@ -44,23 +42,21 @@ export default {
       color: '#FFFFFF',
       visible: true,
     },
-  },
-  image_content: {
-    type: 'IMAGE',
+  }),
+  image_content: design.image({
     label: '$label.image_content.label',
     colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
     defaults: {
       overlay: 'COLOR',
       color: '#333',
     },
-  },
-  background: {
-    type: 'BACKGROUND',
+  }),
+  background: design.background({
     label: '$label.background.label',
     colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
     defaults: {
       style: 'COLOR',
       color: 'global.color.background',
     },
-  },
-} as const;
+  }),
+};

package/template/sections/example-section/settings/layout.ts

@@ -1,22 +1,23 @@
+import { layout } from '@lightspeed/crane-api';
+
 export default [
-  {
+  layout.init({
     layoutId: 'Caption_On_Image',
     selectedContentSettings: [],
     selectedDesignSettings: [],
-  },
-  {
+  }),
+  layout.init({
     layoutId: 'Caption_Under_Image',
     selectedContentSettings: [],
     selectedDesignSettings: [
-      {
+      layout.designOverride.text({
         fieldName: 'section_title',
-      },
-      {
+      }),
+      layout.designOverride.text({
         fieldName: 'section_description',
-      },
-      {
+      }),
+      layout.designOverride.text({
         fieldName: 'image_text',
-        type: 'TEXT',
         defaults: {
           font: 'global.fontFamily.body',
           size: 16,
@@ -25,10 +26,10 @@ export default [
           color: '#000000',
           visible: true,
         },
-      },
-      {
+      }),
+      layout.designOverride.background({
         fieldName: 'background',
-      },
+      }),
     ],
-  },
-] as const;
+  }),
+];

package/template/sections/example-section/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': 'This will be the main title for this section',
@@ -129,4 +131,4 @@ export default {
       + 'pouvez fournir des conseils utiles sur l\'utilisation de la section personnalisée',
     '$label.info.button.label': 'En savoir plus',
   },
-} as const;
+});