@lightspeed/crane 1.2.2 → 1.2.4

package/template/headers/example-header/ExampleHeader.vue

@@ -28,7 +28,8 @@ import Account from './component/Account.vue';
   justify-content: space-between;
   padding: 5px 10px;
 
-  .custom-header__right{
+  .custom-header__left,
+  .custom-header__right {
     display: flex;
     flex: 0 0 auto;
     gap: 10px;
@@ -40,16 +41,6 @@ import Account from './component/Account.vue';
     order: 3;
     text-align: right;
   }
-
-  .custom-header__left{
-    display: flex;
-    flex: 0 0 auto;
-    gap: 10px;
-    align-items: center;
-    justify-content: flex-end;
-    order: 3;
-    text-align: left;
-  }
 }
 
 .header-content {

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/layouts/catalog/example-catalog/Main.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <slot :name="Slot.PRODUCT_LIST" />
+    <slot :name="Slot.BOTTOM_BAR" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CatalogLayoutSlot as Slot } from '@lightspeed/crane';
+</script>

package/template/layouts/category/example-category/Main.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <slot :name="Slot.CATEGORY_TITLE" />
+    <slot :name="Slot.PRODUCT_LIST" />
+    <slot :name="Slot.BOTTOM_BAR" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CategoryLayoutSlot as Slot } from '@lightspeed/crane';
+</script>

package/template/layouts/product/example-product/Main.vue

@@ -0,0 +1,35 @@
+<template>
+  <div :class="{ 'product-details--top-title-navigation': isProductNameAlwaysFirstOnMobile }">
+    <slot :name="Slot.TOP_BAR" />
+    <div
+      :class="availableProductClasses"
+      itemtype="http://schema.org/Product"
+      :itemscope="showProductDetailsProductPrice"
+    >
+      <slot :name="Slot.GALLERY" />
+      <slot :name="Slot.SIDEBAR" />
+      <slot :name="Slot.DESCRIPTION" />
+      <div class="clearboth" />
+    </div>
+    <slot :name="Slot.REVIEW_LIST" />
+    <slot :name="Slot.RELATED_PRODUCTS" />
+    <slot :name="Slot.BOTTOM_BAR" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { HTMLAttributes } from 'vue';
+import { ProductLayoutSlot as Slot } from '@lightspeed/crane';
+
+interface Props {
+  availableProductClasses?: HTMLAttributes['class'],
+  showProductDetailsProductPrice?: boolean,
+  isProductNameAlwaysFirstOnMobile?: boolean,
+}
+
+withDefaults(defineProps<Props>(), {
+  isProductNameAlwaysFirstOnMobile: false,
+  availableProductClasses: '',
+  showProductDetailsProductPrice: true,
+});
+</script>

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

@@ -2,7 +2,8 @@ export default {
   sections: [
     {
       type: 'default',
-      id: 'product-browser',
+      id: 'catalog',
+      layout_id: 'example-catalog',
     },
   ],
 };

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

@@ -2,7 +2,8 @@ export default {
   sections: [
     {
       type: 'default',
-      id: 'product-browser',
+      id: 'category',
+      layout_id: 'example-category',
     },
   ],
 };

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

@@ -2,7 +2,8 @@ export default {
   sections: [
     {
       type: 'default',
-      id: 'product-browser',
+      id: 'product',
+      layout_id: 'example-product',
     },
   ],
 };

package/types.d.ts

@@ -8,13 +8,14 @@ declare module '*.vue' {
 }
 
 type ActionLinkType
-    = 'SCROLL_TO_TILE'
+  = 'SCROLL_TO_TILE'
     | 'HYPER_LINK'
     | 'MAIL_LINK'
     | 'TEL_LINK'
     | 'GO_TO_STORE'
     | 'GO_TO_STORE_LINK'
-    | 'GO_TO_PAGE';
+    | 'GO_TO_PAGE'
+    | 'GO_TO_CATEGORY';
 
 interface ButtonContentData {
   readonly title: string;
@@ -56,7 +57,7 @@ interface ToggleContentData {
 interface ActionLink {
   id: string;
   title?: string;
-  type?: string;
+  type?: ActionLinkType;
   link?: string;
   email?: string;
   phone?: string;
@@ -77,24 +78,24 @@ type LogoType = 'TEXT' | 'IMAGE';
 interface LogoContentData {
   readonly type: LogoType;
   readonly text: string;
-  readonly image: ImageContentData
+  readonly image: ImageContentData;
 }
 
 type GlobalColorsString =
-    'global.color.title' |
-    'global.color.body' |
-    'global.color.button' |
-    'global.color.link' |
-    'global.color.background';
+  'global.color.title' |
+  'global.color.body' |
+  'global.color.button' |
+  'global.color.link' |
+  'global.color.background';
 
 type GlobalFontsString =
-    'global.fontFamily.title' |
-    'global.fontFamily.body';
+  'global.fontFamily.title' |
+  'global.fontFamily.body';
 
 type GlobalTextSizeString =
-    'global.textSize.title' |
-    'global.textSize.subtitle' |
-    'global.textSize.body';
+  'global.textSize.title' |
+  'global.textSize.subtitle' |
+  'global.textSize.body';
 
 interface HSLColor {
   h: number;
@@ -140,9 +141,9 @@ interface TextareaDesignData extends TextDesignData {
 }
 
 type CapitalizationType =
-    'none'
-    | 'all'
-    | 'small';
+  'none'
+  | 'all'
+  | 'small';
 
 interface Frame {
   visible: boolean;
@@ -163,19 +164,19 @@ interface LogoDesignData {
 }
 
 type ButtonAppearance =
-    'solid-button'
-    | 'outline-button'
-    | 'text-link';
+  'solid-button'
+  | 'outline-button'
+  | 'text-link';
 
 type ButtonSize =
-    'small'
-    | 'medium'
-    | 'large';
+  'small'
+  | 'medium'
+  | 'large';
 
 type ButtonStyle =
-    'round-corner'
-    | 'rectangle'
-    | 'pill';
+  'round-corner'
+  | 'rectangle'
+  | 'pill';
 
 interface ButtonDesignData {
   appearance: ButtonAppearance | undefined;
@@ -187,9 +188,9 @@ interface ButtonDesignData {
 }
 
 type OverlayType =
-    'solid'
-    | 'gradient'
-    | 'none';
+  'solid'
+  | 'gradient'
+  | 'none';
 
 interface Overlay {
   type: OverlayType | undefined;
@@ -211,8 +212,8 @@ interface ToggleDesignData {
 }
 
 type BackgroundType =
-    'solid'
-    | 'gradient';
+  'solid'
+  | 'gradient';
 
 interface Background {
   type: BackgroundType | undefined;
@@ -295,8 +296,33 @@ interface SiteContent {
   readonly legalPages?: LegalPage[];
 }
 
+interface CategoryListComponentItem {
+  readonly id: number;
+  readonly name: string;
+  readonly url: string;
+  readonly imageUrl?: string;
+  readonly thumbnailImageUrl?: string;
+  readonly imageBorderInfo?: ImageBorderInfo;
+  readonly alt?: string;
+}
+
+interface CategoryTree {
+  readonly id: number;
+  readonly name: string;
+  readonly nameTranslated: Record<string, string>;
+  readonly urlPath: string;
+  readonly enabled: boolean;
+  readonly children: CategoryTree[];
+}
+
+interface Category {
+  readonly categories?: CategoryListComponentItem[];
+  readonly categoryTree?: CategoryTree[];
+}
+
 interface ExternalContentData {
-    readonly site?: SiteContent;
+  readonly site?: SiteContent;
+  readonly category?: Category;
 }
 
 interface ButtonContentEditor {
@@ -344,19 +370,19 @@ interface LogoContentEditor {
 }
 
 type ContentEditor =
-    TextContentEditor
-    | MultilineTextContentEditor
-    | ButtonContentEditor
-    | ImageContentEditor
-    | ToggleContentEditor
-    | SelectboxContentEditor
-    | MenuContentEditor
-    | NavigationMenuContentEditor
-    | LogoContentEditor;
+  TextContentEditor
+  | MultilineTextContentEditor
+  | ButtonContentEditor
+  | ImageContentEditor
+  | ToggleContentEditor
+  | SelectboxContentEditor
+  | MenuContentEditor
+  | NavigationMenuContentEditor
+  | LogoContentEditor;
 
 type InferContentType<T extends Record<string, ContentEditor>> = {
   readonly [P in keyof T]: MapEditorContentTypes[T[P]['type']]
-}
+};
 
 type MapEditorDesignTypes = {
   readonly TEXT: string;
@@ -418,8 +444,8 @@ interface LogoDesignEditor {
 }
 
 interface DividerDesignEditor {
-    readonly type: 'DIVIDER';
-    readonly label: string | Record<string, string>;
+  readonly type: 'DIVIDER';
+  readonly label: string | Record<string, string>;
 }
 
 type DesignEditor =
@@ -435,6 +461,6 @@ type DesignEditor =
 
 type InferDesignType<T extends Record<string, DesignEditor>> = {
   readonly [P in keyof T]: MapEditorDesignTypes[T[P]['type']]
-}
+};
 
 type SettingsEditor = DesignEditor | ContentEditor;