@lightspeed/crane 1.2.1 → 1.2.3

package/template/headers/example-header/component/CategoriesDropdown.vue

@@ -0,0 +1,165 @@
+<template>
+  <teleport to="body">
+    <div
+      v-if="categories.length > 0"
+      class="categories-dropdown"
+      :style="{ left: offsetLeft }"
+      @mouseleave="emit('hide')"
+      @blur="emit('hide')"
+    >
+      <ul class="category-list">
+        <li 
+          v-if="categoryId === undefined" 
+          class="category-item"
+        >
+          <a
+            :href="getCategoryLink('/products')"
+            class="category-link"
+          >
+            <span>View all</span>
+          </a>
+        </li>
+        <li
+          v-for="category in categories"
+          :key="category.id"
+          class="category-item"
+        >
+          <a
+            :href="getCategoryLink(category.urlPath)"
+            class="category-link"
+          >
+            <span>{{ category.name }}</span>
+            <span v-if="category.hasChildren" class="arrow">▶</span>
+          </a>
+          <ul v-if="category.hasChildren" class="subcategory-list">
+            <li
+              v-for="child in category.children"
+              :key="child.id"
+              class="subcategory-item"
+            >
+              <a
+                :href="getCategoryLink(child.urlPath)"
+                class="subcategory-link"
+              >
+                {{ child.name }}
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useVueBaseProps } from '@lightspeed/crane';
+import { Design } from '../type.ts';
+
+interface Props {
+  element?: HTMLElement;
+  categoryId?: number;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['hide']);
+
+const baseProps = useVueBaseProps<Props, Design>();
+
+const isPreviewMode = computed(() => Boolean(baseProps.site?.value?.isPreviewMode));
+const categoryTree = computed(() => baseProps.category?.value?.categoryTree ?? []);
+const categories = computed(() => categoryTree.value
+  .filter(filterUniqueCategories)
+  .filter((category) => filterByCategoryId(category, props.categoryId))
+  .map((category) => ({
+    ...category,
+    hasChildren: category.children?.length > 0,
+  }))
+);
+const offsetLeft = computed(() => `${props.element?.offsetLeft ?? 0}px`);
+
+function filterUniqueCategories(category: CategoryTree, index: number, categoryTree: CategoryTree[]) {
+  return categoryTree.findIndex((c) => c.id === category.id) === index;
+}
+
+function filterByCategoryId(category: CategoryTree, categoryId?: number) {
+  if (categoryId !== undefined) {
+    return category.id === categoryId;
+  }
+  return true;
+}
+
+const getCategoryLink = (urlPath: string) => {
+  if (isPreviewMode.value) {
+    return undefined;
+  }
+  return urlPath;
+};
+</script>
+
+<style scoped lang="scss">
+.categories-dropdown {
+  position: absolute;
+  top: 48px;
+  left: 12px;
+  background-color: #ffffff;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  min-width: 200px;
+  padding: 8px;
+  z-index: 1000;
+}
+
+.category-list,
+.subcategory-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.category-item,
+.subcategory-item {
+  cursor: pointer;
+  position: relative;
+  margin: 0;
+  padding: 6px 10px;
+}
+
+.category-link,
+.subcategory-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #080d12;
+  text-decoration: none;
+  width: 100%;
+  transition: color 0.35s ease;
+
+  &:hover {
+    color: #0056b3;
+  }
+}
+
+.arrow {
+  margin-left: 8px;
+  font-size: 10px;
+  color: #b7b7b7;
+}
+
+.subcategory-list {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  background-color: #ffffff;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  min-width: 200px;
+  padding: 8px;
+  z-index: 1001;
+}
+
+.category-item:hover > .subcategory-list {
+  display: block;
+}
+</style>

package/template/headers/example-header/component/NavigationMenu.vue

@@ -3,42 +3,109 @@
     v-if="navigationMenu.hasContent"
     role="navigation"
   >
-    <ul>
+    <ul class="navigation-menu">
       <li
         v-for="item in navigationMenu.items"
         :key="item.id"
+        class="menu-item"
+        @mouseenter="onMouseEnter(item, $event)"
+        @mouseleave="onMouseLeave(item)"
+        @focusin="onMouseEnter(item, $event)"
+        @focusout="onMouseLeave(item)"
       >
-        <a @click="item.performAction">
+        <a
+          class="menu-link"
+          @click="item.performAction"
+        >
           {{ item.title }}
         </a>
+        <span
+          v-if="item.showStoreCategories && isItemWithCategoriesDropdown(item)"
+          class="arrow"
+        >
+          ▶
+        </span>
       </li>
     </ul>
+    <CategoriesDropdown
+      v-if="showCategoriesDropdown"
+      :element="activeItem?.element"
+      :category-id="categoryId"
+      @hide="hideDropdown"
+    />
   </nav>
 </template>
 
 <script setup lang="ts">
+import { ref, computed } from 'vue';
 import { useNavigationMenuElementContent } from '@lightspeed/crane';
+import CategoriesDropdown from './CategoriesDropdown.vue';
+
+interface ActiveItem {
+  actionLink: ActionLink;
+  element?: HTMLElement;
+}
 
 const navigationMenu = useNavigationMenuElementContent();
+const activeItem = ref<ActiveItem | null>();
+
+const showCategoriesDropdown = computed(() => {
+  const item = activeItem.value?.actionLink;
+  if (isItemWithCategoriesDropdown(item)) {
+    return item?.showStoreCategories ?? true;
+  }
+  return false;
+});
+
+const categoryId = computed(() => {
+  const item = activeItem.value?.actionLink;
+  if (item?.type === 'GO_TO_CATEGORY') {
+    return item.categoryId;
+  }
+  return undefined;
+});
+
+function isItemWithCategoriesDropdown(item?: ActionLink) {
+  return item?.type === 'GO_TO_STORE' || item?.type === 'GO_TO_CATEGORY';
+}
+
+function onMouseEnter(item: ActionLink, event: MouseEvent | FocusEvent) {
+  activeItem.value = {
+    actionLink: item,
+    element: event.target as HTMLElement,
+  };
+}
+
+function onMouseLeave(item: ActionLink | null) {
+  if (activeItem.value?.actionLink === item) {
+    activeItem.value = null;
+  }
+}
+
+function hideDropdown() {
+  activeItem.value = null;
+}
 </script>
 
-<style lang="scss" scoped>
-ul {
-  gap: 16px;
+<style scoped lang="scss">
+.navigation-menu {
   display: flex;
+  gap: 16px;
   overflow-x: auto;
   white-space: nowrap;
   height: 48px;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
 }
 
-li {
-  list-style: none;
+.menu-item {
+  position: relative;
   display: flex;
   align-items: center;
-  min-width: fit-content;
 }
 
-a {
+.menu-link {
   cursor: pointer;
   font-size: 16px;
   font-weight: 500;
@@ -47,7 +114,13 @@ a {
   transition: color 0.35s ease;
 
   &:hover {
-    color: #0056b3
+    color: #0056b3;
   }
 }
+
+.arrow {
+  margin-left: 8px;
+  font-size: 8px;
+  color: #cacaca;
+}
 </style>

package/template/package.json

@@ -9,15 +9,13 @@
   "dependencies": {
     "@lightspeed/crane": "latest",
     "@lightspeed/eslint-config-crane": "latest",
-    "vue": "^3.4.0"
+    "vue": "^3.4.0",
+    "eslint": "9.22.0"
   },
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
   },
   "overrides": {
-    "eslint": {
-      "file-entry-cache": "8.0.0"
-    },
     "glob": "^9.3.5",
     "stylus": "^0.63.0"
   }

package/template/page-templates/example-template/configuration.ts

@@ -0,0 +1,22 @@
+export default {
+  metadata: {
+    name: 'Example Template :: Standard Preset',
+    description: 'Standard Preset for the Example template',
+    preview_url: 'https://template_preview.company.site',
+    cover_image: {
+      set: {
+        ORIGINAL: {
+          url: 'template_cover_image.png',
+        },
+      },
+    },
+  },
+  header: {
+    type: 'default',
+    id: 'header',
+  },
+  footer: {
+    type: 'default',
+    id: 'footer',
+  },
+};

package/template/page-templates/example-template/pages/catalog.ts

@@ -0,0 +1,8 @@
+export default {
+  sections: [
+    {
+      type: 'default',
+      id: 'product-browser',
+    },
+  ],
+};

package/template/page-templates/example-template/pages/category.ts

@@ -0,0 +1,8 @@
+export default {
+  sections: [
+    {
+      type: 'default',
+      id: 'product-browser',
+    },
+  ],
+};

package/template/page-templates/example-template/pages/home.ts

@@ -0,0 +1,178 @@
+export default {
+  sections: [
+    {
+      type: 'default',
+      id: 'slider',
+      showcase_id: '001',
+    },
+    {
+      type: 'custom',
+      id: 'example-section',
+      showcase_id: '1',
+    },
+    {
+      type: 'custom',
+      id: 'example-section',
+      showcase_overrides: {
+        content: {
+          section_title: {
+            type: 'INPUTBOX',
+            text: '$label.template_standard_showcase_1.section_title.text',
+          },
+
+          images: {
+            type: 'DECK',
+            cards: [
+              {
+                settings: {
+                  image_text: {
+                    type: 'TEXTAREA',
+                    text: '$label.showcase_2.image_text_1.text',
+                  },
+                  image_content: {
+                    type: 'IMAGE',
+                    imageData: {
+                      set: {
+                        MOBILE_WEBP_LOW_RES: {
+                          url: 'new_tshirts_collection_mobile_low.jpeg',
+                        },
+                        MOBILE_WEBP_HI_RES: {
+                          url: 'new_tshirts_collection_mobile_high.jpeg',
+                        },
+                        WEBP_LOW_RES: {
+                          url: 'new_tshirts_collection_pc_low.jpeg',
+                        },
+                        WEBP_HI_2X_RES: {
+                          url: 'new_tshirts_collection_pc_high.jpeg',
+                        },
+                      },
+                      borderInfo: {},
+                    },
+                  },
+                  image_link: {
+                    type: 'INPUTBOX',
+                    text: '$label.showcase_2.image_link_1.text',
+                  },
+                },
+              },
+              {
+                settings: {
+                  image_text: {
+                    type: 'TEXTAREA',
+                    text: '$label.showcase_2.image_text_2.text',
+                  },
+                  image_content: {
+                    type: 'IMAGE',
+                    imageData: {
+                      set: {
+                        MOBILE_WEBP_LOW_RES: {
+                          url: 'autumn_looks_mobile_low.jpeg',
+                        },
+                        MOBILE_WEBP_HI_RES: {
+                          url: 'autumn_looks_mobile_high.jpeg',
+                        },
+                        WEBP_LOW_RES: {
+                          url: 'autumn_looks_pc_low.jpeg',
+                        },
+                        WEBP_HI_2X_RES: {
+                          url: 'autumn_looks_pc_high.jpeg',
+                        },
+                      },
+                      borderInfo: {},
+                    },
+                  },
+                },
+              },
+
+              {
+                settings: {
+                  image_text: {
+                    type: 'TEXTAREA',
+                    text: '$label.showcase_2.image_text_3.text',
+                  },
+                  image_content: {
+                    type: 'IMAGE',
+                    imageData: {
+                      set: {
+                        MOBILE_WEBP_LOW_RES: {
+                          url: 'bianka_wardrobe_mobile_low.jpeg',
+                        },
+                        MOBILE_WEBP_HI_RES: {
+                          url: 'bianka_wardrobe_mobile_high.jpeg',
+                        },
+                        WEBP_LOW_RES: {
+                          url: 'bianka_wardrobe_pc_low.jpeg',
+                        },
+                        WEBP_HI_2X_RES: {
+                          url: 'bianka_wardrobe_pc_high.jpeg',
+                        },
+                      },
+                      borderInfo: {},
+                    },
+                  },
+                },
+              },
+
+              {
+                settings: {
+                  image_text: {
+                    type: 'TEXTAREA',
+                    text: '$label.showcase_2.image_text_4.text',
+                  },
+                  image_content: {
+                    type: 'IMAGE',
+                    imageData: {
+                      set: {
+                        MOBILE_WEBP_LOW_RES: {
+                          url: 'story_of_jane_mobile_low.jpeg',
+                        },
+                        MOBILE_WEBP_HI_RES: {
+                          url: 'story_of_jane_mobile_high.jpeg',
+                        },
+                        WEBP_LOW_RES: {
+                          url: 'story_of_jane_pc_low.jpeg',
+                        },
+                        WEBP_HI_2X_RES: {
+                          url: 'story_of_jane_pc_high.jpeg',
+                        },
+                      },
+                      borderInfo: {},
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        },
+        design: {
+          section_title: {
+            type: 'TEXT',
+            font: 'global.fontFamily.body',
+            size: 42,
+            bold: true,
+            italic: true,
+            color: '#222',
+          },
+          image_text: {
+            type: 'TEXT',
+            size: 22,
+            bold: false,
+            italic: true,
+          },
+          background: {
+            type: 'BACKGROUND',
+            style: 'COLOR',
+            color: 'global.color.background',
+          },
+          image_content: {
+            type: 'IMAGE',
+            overlay: 'GRADIENT',
+            color: ['#FFFFFF', '#CCCCCC'],
+          },
+        },
+        layoutId: 'Caption_Under_Image',
+        blockName: '$label.showcase_2.blockName',
+      },
+    },
+  ],
+};

package/template/page-templates/example-template/pages/product.ts

@@ -0,0 +1,8 @@
+export default {
+  sections: [
+    {
+      type: 'default',
+      id: 'product-browser',
+    },
+  ],
+};

package/template/reference/sections/about-us/settings/content.ts

@@ -41,20 +41,17 @@ const content: ContentEditor = {
     label: '$label.image_content.label',
     defaults: {
       set: {
-        LOW_RES: {
-          url: 'section_picture.jpg',
-        },
         MOBILE_WEBP_LOW_RES: {
-          url: 'section_picture.jpg',
+          url: 'our_company_in_numbers.jpg',
         },
         MOBILE_WEBP_HI_RES: {
-          url: 'section_picture@2x.jpg',
+          url: 'our_company_in_numbers.jpg',
         },
         WEBP_LOW_RES: {
-          url: 'section_picture@2x.jpg',
+          url: 'our_company_in_numbers.jpg',
         },
         WEBP_HI_2X_RES: {
-          url: 'section_picture@2x.jpg',
+          url: 'our_company_in_numbers.jpg',
         },
       },
       borderInfo: {},

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

@@ -18,9 +18,6 @@ export default {
       type: 'IMAGE',
       imageData: {
         set: {
-          LOW_RES: {
-            url: 'our_company_in_numbers.jpg',
-          },
           MOBILE_WEBP_LOW_RES: {
             url: 'our_company_in_numbers.jpg',
           },

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

@@ -18,9 +18,6 @@ export default {
       type: 'IMAGE',
       imageData: {
         set: {
-          LOW_RES: {
-            url: 'our_team.jpg',
-          },
           MOBILE_WEBP_LOW_RES: {
             url: 'our_team.jpg',
           },

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

@@ -35,6 +35,7 @@ export default {
           image_text: {
             type: 'TEXTAREA',
             label: '$label.slide_text.label',
+            placeholder: '$label.slide_text.label',
           },
         },
       },

package/template/reference/sections/intro-slider/showcases/1.ts

@@ -40,9 +40,6 @@ export default {
               type: 'IMAGE',
               imageData: {
                 set: {
-                  LOW_RES: {
-                    url: 'category_1.jpg',
-                  },
                   MOBILE_WEBP_LOW_RES: {
                     url: 'category_1.jpg',
                   },
@@ -71,9 +68,6 @@ export default {
               type: 'IMAGE',
               imageData: {
                 set: {
-                  LOW_RES: {
-                    url: 'category_2.jpg',
-                  },
                   MOBILE_WEBP_LOW_RES: {
                     url: 'category_2.jpg',
                   },
@@ -102,9 +96,6 @@ export default {
               type: 'IMAGE',
               imageData: {
                 set: {
-                  LOW_RES: {
-                    url: 'category_3.jpg',
-                  },
                   MOBILE_WEBP_LOW_RES: {
                     url: 'category_3.jpg',
                   },
@@ -133,9 +124,6 @@ export default {
               type: 'IMAGE',
               imageData: {
                 set: {
-                  LOW_RES: {
-                    url: 'category_4.jpg',
-                  },
                   MOBILE_WEBP_LOW_RES: {
                     url: 'category_4.jpg',
                   },
@@ -165,9 +153,6 @@ export default {
               type: 'IMAGE',
               imageData: {
                 set: {
-                  LOW_RES: {
-                    url: 'category_5.jpg',
-                  },
                   MOBILE_WEBP_LOW_RES: {
                     url: 'category_5.jpg',
                   },
@@ -196,9 +181,6 @@ export default {
               type: 'IMAGE',
               imageData: {
                 set: {
-                  LOW_RES: {
-                    url: 'category_6.png',
-                  },
                   MOBILE_WEBP_LOW_RES: {
                     url: 'category_6.jpg',
                   },