@lightspeed/crane 3.2.1 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/crane",
-  "version": "3.2.1",
+  "version": "3.4.0",
   "type": "module",
   "bin": "bin/crane.js",
   "main": "./dist/app.mjs",
@@ -58,41 +58,40 @@
     "mock-fs": "^5.5.0",
     "ts-jest": "^29.4.0",
     "ts-node": "^10.9.2",
-    "typescript": "5.9.2",
+    "typescript": "5.9.3",
     "unbuild": "^3.5.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.1.0"
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.4",
-    "@lightspeed/crane-api": "2.2.1",
+    "@lightspeed/crane-api": "2.3.0",
     "@lightspeed/eslint-config-crane": "1.1.3",
     "@types/micromatch": "^4.0.8",
     "@types/prompts": "^2.4.2",
     "@types/ws": "^8.5.3",
     "@vitejs/plugin-vue": "^6.0.1",
     "adm-zip": "^0.5.16",
-    "ajv": "^8.17.1",
-    "ajv-formats": "^3.0.1",
-    "axios": "^1.11.0",
+    "axios": "^1.14.0",
     "axios-concurrency": "^1.0.4",
     "cac": "^6.7.14",
     "cli-progress": "^3.12.0",
     "eslint": "^9.33.0",
     "fs-extra": "^11.3.1",
-    "glob": "^11.1.0",
-    "jsonpath-plus": "^10.3.0",
+    "glob": "^13.0.6",
+    "jsonpath-plus": "^10.4.0",
     "kolorist": "^1.8.0",
+    "micromatch": "^4.0.8",
     "prompts": "^2.4.2",
     "semver": "^7.7.2",
     "terser": "^5.44.0",
     "tinycolor2": "^1.6.0",
-    "typescript": "5.9.2",
+    "typescript": "5.9.3",
     "vite": "^7.1.4",
-    "vite-plugin-checker": "^0.10.3",
+    "vite-plugin-checker": "^0.12.0",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-externals": "^0.6.2",
-    "vite-tsconfig-paths": "^5.1.4",
+    "vite-tsconfig-paths": "^6.1.1",
     "vue": "^3.5.21",
     "vue-tsc": "^3.0.6",
     "ws": "^8.19.0"
@@ -102,10 +101,10 @@
   },
   "overrides": {
     "axios-concurrency": {
-      "axios": "1.11.0"
+      "axios": "1.14.0"
     },
     "magic-string": "0.30.10",
-    "glob": "^11.1.0",
+    "glob": "^13.0.6",
     "stylus": "^0.64.0"
   }
 }

package/template/collections/example-collection/configuration.ts

@@ -1,4 +1,6 @@
-export default {
+import { collection, section } from '@lightspeed/crane-api';
+
+export default collection.configuration({
   metadata: {
     name: 'Example Collection',
     description: 'Example Collection with custom sections, headers, and footers',
@@ -11,11 +13,10 @@ export default {
     },
   },
   sections: [
-    {
-      type: 'custom',
+    section.custom({
       id: 'example-section',
       showcase_id: '1',
       category: 'COLLECTIONS',
-    },
+    }),
   ],
-};
+});

package/template/eslint.config.js

@@ -0,0 +1 @@
+export { default } from '@lightspeed/eslint-config-crane';

package/template/footers/example-footer/component/MadeWith.vue

@@ -1,11 +1,26 @@
 <template>
-  <div>
-    <a :href="madeWith?.url" target="{{ madeWith?.target }}">
-      <span>{{ madeWith?.poweredBy }} &nbsp;</span>
-      <span>
-        <img :src="madeWith?.icon" alt="cart" />
-      </span>
-      <span>{{ madeWith?.company }}</span>
+  <div v-if="madeWith">
+    <a :href="madeWith.url" :target="madeWith.target">
+      <template v-if="isV2">
+        <span>{{ madeWith.poweredBy }}</span>
+        <span
+          v-if="madeWith.iconSvg"
+          v-html="madeWith.iconSvg"
+        />
+        <img
+          v-else-if="madeWith.icon"
+          :src="madeWith.icon"
+          :alt="madeWith.poweredBy"
+        />
+        <span v-if="madeWith.company">{{ madeWith.company }}</span>
+      </template>
+      <template v-else>
+        <span>{{ madeWith.poweredBy }} &nbsp;</span>
+        <span>
+          <img :src="madeWith.icon" alt="cart" />
+        </span>
+        <span>{{ madeWith.company }}</span>
+      </template>
     </a>
   </div>
 </template>
@@ -16,7 +31,8 @@ import { Design } from '../type.ts';
 
 const baseProps = useVueBaseProps<unknown, Design>();
 const siteContent: SiteContent = baseProps.site?.value satisfies SiteContent;
-const madeWith = siteContent.madeWith;
+const isV2 = !!siteContent.madeWithV2;
+const madeWith = siteContent.madeWithV2 ?? siteContent.madeWith;
 </script>
 
 <style scoped>

package/template/layouts/catalog/example-catalog/client.ts

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

package/template/layouts/catalog/example-catalog/settings/design.ts

@@ -1 +1,229 @@
-export default {} as const;
+import { design } from '@lightspeed/crane-api';
+
+export default {
+  storefront_default_settings: design.accordion({
+    items: {
+      catalog_page_settings: {
+        label: '$label.accordion.catalog_page_settings',
+        editors: {
+          categoryViewMode: design.selectbox({
+            label: '$label.category_view.label',
+            description: '$label.category_view.description',
+            options: [
+              { value: 'EXPANDED', label: '$label.category_view.expanded' },
+              { value: 'COLLAPSED', label: '$label.category_view.collapsed' },
+            ],
+            defaults: { value: 'COLLAPSED' },
+          }),
+          productFiltersVisibleOnCatalogPages: design.selectbox({
+            label: '$label.product_filter_placement.label',
+            options: [
+              { value: 'true', label: '$label.product_filter_placement.all_pages' },
+              { value: 'false', label: '$label.product_filter_placement.category_pages' },
+            ],
+            defaults: { value: 'false' },
+          }),
+          productFiltersOrientationPosition: design.selectbox({
+            label: '$label.filter_panel_orientation.label',
+            options: [
+              { value: 'VERTICAL', label: '$label.filter_panel_orientation.vertical' },
+              { value: 'HORIZONTAL', label: '$label.filter_panel_orientation.horizontal' },
+            ],
+            defaults: { value: 'VERTICAL' },
+          }),
+          filterPriority: design.info({
+            label: '$label.filter_priority.label',
+            description: '$label.filter_priority.description',
+            button: {
+              label: '$label.filter_priority.button',
+              link: '#product-filters:mode=sort',
+            },
+          }),
+          catalogPageDivider1: design.divider({
+            label: '$label.divider',
+          }),
+          productFiltersPositionOnCatalogPages: design.selectbox({
+            label: '$label.side_to_show_filters.label',
+            options: [
+              { value: 'RIGHT', label: '$label.side_to_show_filters.right' },
+              { value: 'LEFT', label: '$label.side_to_show_filters.left' },
+            ],
+            defaults: { value: 'RIGHT' },
+          }),
+          productFiltersOpenedByDefaultOnCategoryPage: design.toggle({
+            label: '$label.expand_filter_panel.label',
+            defaults: { enabled: false },
+          }),
+          showSortViewAsOptions: design.toggle({
+            label: '$label.show_sort_by_options.label',
+            defaults: { enabled: true },
+          }),
+          showFooterMenu: design.toggle({
+            label: '$label.show_bottom_navigation_menu.label',
+            defaults: { enabled: true },
+          }),
+          showSigninLink: design.toggle({
+            label: '$label.show_signin_link.label',
+            defaults: { enabled: true },
+          }),
+        },
+      },
+      product_card_settings: {
+        label: '$label.accordion.product_card_settings',
+        editors: {
+          productCardSpacingType: design.selectbox({
+            label: '$label.card_grid_spacing.label',
+            description: '$label.card_grid_spacing.description',
+            options: [
+              { value: 'NONE', label: '$label.card_grid_spacing.none' },
+              { value: 'NARROW', label: '$label.card_grid_spacing.narrow' },
+              { value: 'MEDIUM', label: '$label.card_grid_spacing.medium' },
+              { value: 'WIDE', label: '$label.card_grid_spacing.wide' },
+            ],
+            defaults: { value: 'WIDE' },
+          }),
+          productCardLayout: design.selectbox({
+            label: '$label.content_alignment.label',
+            options: [
+              { value: 'CENTER', label: '$label.content_alignment.center' },
+              { value: 'LEFT', label: '$label.content_alignment.left' },
+              { value: 'JUSTIFY', label: '$label.content_alignment.justify' },
+              { value: 'RIGHT', label: '$label.content_alignment.right' },
+            ],
+            defaults: { value: 'CENTER' },
+          }),
+          imageAspectRatio: design.selectbox({
+            label: '$label.image_proportions.label',
+            options: [
+              { value: 'SQUARE', label: '$label.image_proportions.square_1_1' },
+              { value: 'PORTRAIT_0667', label: '$label.image_proportions.portrait_2_3' },
+              { value: 'PORTRAIT_075', label: '$label.image_proportions.portrait_3_4' },
+              { value: 'LANDSCAPE_1333', label: '$label.image_proportions.landscape_4_3' },
+              { value: 'LANDSCAPE_15', label: '$label.image_proportions.landscape_2_3' },
+            ],
+            defaults: { value: 'PORTRAIT_0667' },
+          }),
+          imageSize: design.selectbox({
+            label: '$label.card_size.label',
+            options: [
+              { value: 'SMALL', label: '$label.card_size.small' },
+              { value: 'MEDIUM', label: '$label.card_size.medium' },
+              { value: 'LARGE', label: '$label.card_size.large' },
+            ],
+            defaults: { value: 'LARGE' },
+          }),
+          productTitleBehavior: design.selectbox({
+            label: '$label.product_name.label',
+            options: [
+              { value: 'SHOW', label: '$label.show' },
+              { value: 'HIDE', label: '$label.do_not_show' },
+              { value: 'SHOW_ON_HOVER', label: '$label.show_on_mouse_hover' },
+            ],
+            defaults: { value: 'SHOW' },
+          }),
+          productSubtitleBehavior: design.selectbox({
+            label: '$label.product_subtitle.label',
+            options: [
+              { value: 'SHOW', label: '$label.show' },
+              { value: 'HIDE', label: '$label.do_not_show' },
+              { value: 'SHOW_ON_HOVER', label: '$label.show_on_mouse_hover' },
+            ],
+            defaults: { value: 'SHOW' },
+          }),
+          productPriceBehavior: design.selectbox({
+            label: '$label.price.label',
+            options: [
+              { value: 'SHOW', label: '$label.show' },
+              { value: 'HIDE', label: '$label.do_not_show' },
+              { value: 'SHOW_ON_HOVER', label: '$label.show_on_mouse_hover' },
+            ],
+            defaults: { value: 'SHOW' },
+          }),
+          productListSwatchesProductOptionBehavior: design.selectbox({
+            label: '$label.color_swatches.label',
+            description: '$label.color_swatches.description',
+            options: [
+              { value: 'SHOW', label: '$label.show' },
+              { value: 'HIDE', label: '$label.do_not_show' },
+            ],
+            defaults: { value: 'HIDE' },
+          }),
+          productSkuBehavior: design.selectbox({
+            label: '$label.sku.label',
+            options: [
+              { value: 'SHOW', label: '$label.show' },
+              { value: 'HIDE', label: '$label.do_not_show' },
+              { value: 'SHOW_ON_HOVER', label: '$label.show_on_mouse_hover' },
+            ],
+            defaults: { value: 'HIDE' },
+          }),
+          productBuyButtonBehavior: design.selectbox({
+            label: '$label.buy_now_button.label',
+            options: [
+              { value: 'SHOW', label: '$label.show' },
+              { value: 'HIDE', label: '$label.do_not_show' },
+              { value: 'SHOW_ON_HOVER', label: '$label.show_on_mouse_hover' },
+            ],
+            defaults: { value: 'HIDE' },
+          }),
+          productRatingSectionBehavior: design.selectbox({
+            label: '$label.product_rating.label',
+            options: [
+              { value: 'SHOW', label: '$label.show' },
+              { value: 'HIDE', label: '$label.do_not_show' },
+              { value: 'SHOW_ON_HOVER', label: '$label.show_on_mouse_hover' },
+            ],
+            defaults: { value: 'SHOW' },
+          }),
+          productRatingViewBehavior: design.selectbox({
+            label: '$label.rating_view.label',
+            options: [
+              { value: '5_STARS_VIEW', label: '$label.rating_view.five_stars' },
+              { value: '1_STAR_VIEW', label: '$label.rating_view.one_star' },
+            ],
+            defaults: { value: '5_STARS_VIEW' },
+          }),
+          showProductRatingAvg: design.toggle({
+            label: '$label.show_average_product_rating.label',
+            defaults: { enabled: true },
+          }),
+          showProductTotalNumberOfReview: design.toggle({
+            label: '$label.show_total_number_of_reviews.label',
+            defaults: { enabled: true },
+          }),
+          productCardDivider1: design.divider({
+            label: '$label.divider',
+          }),
+          showProductFrame: design.toggle({
+            label: '$label.show_product_card_frame.label',
+            defaults: { enabled: false },
+          }),
+          showProductImages: design.toggle({
+            label: '$label.show_main_product_image.label',
+            defaults: { enabled: true },
+          }),
+          showAdditionalImageOnHover: design.toggle({
+            label: '$label.show_additional_image_on_hover.label',
+            defaults: { enabled: false },
+          }),
+        },
+      },
+      categories_settings: {
+        label: '$label.accordion.categories_settings',
+        editors: {
+          categoryTitleBehavior: design.selectbox({
+            label: '$label.name_position.label',
+            options: [
+              { value: 'SHOW_ON_IMAGE', label: '$label.name_position.on_the_image' },
+              { value: 'SHOW_BELOW_IMAGE', label: '$label.name_position.below_the_image' },
+              { value: 'SHOW_ON_HOVER', label: '$label.name_position.on_mouse_hover' },
+              { value: 'HIDE', label: '$label.name_position.hide_category_names' },
+              { value: 'SHOW_TEXT_ONLY', label: '$label.name_position.hide_category_images' },
+            ],
+            defaults: { value: 'SHOW_ON_IMAGE' },
+          }),
+        },
+      },
+    },
+  }),
+};

package/template/layouts/catalog/example-catalog/settings/layout.ts

@@ -0,0 +1 @@
+export default [] as const;