@lightspeed/crane 2.0.5 → 3.0.0

package/template/reference/templates/reference-template-apparel/pages/category.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/reference/templates/reference-template-apparel/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: '1',
-    },
-    {
-      type: 'custom',
+    }),
+    section.custom({
       id: 'tag-lines',
       showcase_id: '1',
-    },
-    {
-      type: 'custom',
+    }),
+    section.custom({
       id: 'about-us',
       showcase_id: '1',
-    },
-    {
-      type: 'custom',
+    }),
+    section.custom({
       id: 'example-section',
       showcase_id: '1',
-    },
-    {
-      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-apparel/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/reference/templates/reference-template-bike/configuration.ts

@@ -1,7 +1,9 @@
-export default {
+import { template, section } from '@lightspeed/crane-api';
+
+export default template.configuration({
   metadata: {
     name: 'Reference Template — Bike',
-    description: 'This is a reference template geared towards bike shops to aid development and act as a starting point for your custom template.',
+    description: 'This is a reference template geared towards bike shop to aid development and act as a starting point for your custom template.',
     preview_url: 'https://reference-template-bike.company.site/',
     cover_image: {
       set: {
@@ -11,12 +13,10 @@ export default {
       },
     },
   },
-  header: {
-    type: 'default',
+  header: section.default({
     id: 'header',
-  },
-  footer: {
-    type: 'default',
+  }),
+  footer: section.default({
     id: 'footer',
-  },
-};
+  }),
+});

package/template/reference/templates/reference-template-bike/pages/catalog.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/reference/templates/reference-template-bike/pages/category.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/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;
+  }),
+};