@lightspeed/crane 1.1.2 → 1.2.0

package/template/footers/example-footer/showcases/1.ts

@@ -3,7 +3,7 @@ export default {
   previewImage: {
     set: {
       ORIGINAL: {
-        url: 'example_footer_showcase_1_preview.jpg',
+        url: 'example_footer_showcase_1_preview.png',
       },
     },
   },

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

@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import NavigationMenu from './component/NavigationMenu.vue';
-import LanguageSelector from '../../shared/LanguageSelector.vue';
+import LanguageSelector from '../../shared/components/LanguageSelector.vue';
 import CartIcon from './component/Cart.vue';
 import Logo from './component/Logo.vue';
 import SearchForm from './component/SearchForm.vue';
@@ -27,16 +27,31 @@ import Account from './component/Account.vue';
   display: flex;
   justify-content: space-between;
   padding: 5px 10px;
+
   .custom-header__right{
     display: flex;
     flex: 0 0 auto;
     gap: 10px;
     align-items: center;
-    justify-content: flex-end;
+    justify-content: flex-start;
+  }
+
+  .custom-header__right {
     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 {
   padding: 0 12px;
   height: 48px;

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

@@ -1,6 +1,6 @@
 <template>
-  <div v-if="externalContent?.account">
-    <a :href="externalContent.account?.url" :target="externalContent.account?.target">
+  <div v-if="account">
+    <a :href="account?.url" :target="account?.target">
       <img :src="accountIcon" alt="account icon" />
     </a>
   </div>
@@ -8,12 +8,12 @@
 
 <script setup lang="ts">
 import { useVueBaseProps } from '@lightspeed/crane';
-import { computed } from 'vue';
 import { Design } from '../type.ts';
 import accountIcon from '../assets/account_icon.svg';
 
 const baseProps = useVueBaseProps<unknown, Design>();
-const externalContent: ExternalContentData = computed(() => baseProps.externalContent).value as ExternalContentData;
+const siteContent: SiteContent = baseProps.site.value satisfies SiteContent;
+const account = siteContent.account;
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,47 +1,28 @@
 <template>
   <div class="cart-icon">
-    <a href="/products/cart" role="button">
+    <a :href="cart.url" role="button">
       <img alt="cart" src="../assets/cart.svg">
       <span
-        v-if="cartItemCount > 0"
+        v-if="cart.count > 0"
         class="item-count"
       >
-        {{ cartItemCount > 99 ? '99+' : cartItemCount }}
+        {{ cart.count > 99 ? '99+' : cart.count }}
       </span>
     </a>
   </div>
 </template>
 
-<script setup>
-import Ecommerce from '@ecwid/sdk';
-import { ref } from 'vue';
-
-const cartItemCount = ref(0);
-const ecommerce = new Ecommerce({
-  storeId: window.Ecwid.getOwnerId(),
-});
-
-function setCartItemCount() {
-  ecommerce.cart.get().then((result) => {
-    cartItemCount.value = result?.productsQuantity ?? 0;
-  });
-}
-
-function subscribeOnCartChange() {
-  if (typeof document === 'undefined') {
-    return;
-  }
-
-  document.addEventListener('visibilitychange', () => {
-    if (document.visibilityState !== 'hidden') {
-      setCartItemCount();
-    }
-  }, false);
-
-  setCartItemCount();
-}
-
-subscribeOnCartChange();
+<script setup lang="ts">
+import { useVueBaseProps } from '@lightspeed/crane';
+import { computed } from 'vue';
+import { Design } from '../type.ts';
+
+const baseProps = useVueBaseProps<unknown, Design>();
+const siteContent = computed(() => baseProps.site?.value satisfies SiteContent);
+const cart = computed(() => ({
+  count: siteContent.value?.cart?.count ?? 0,
+  url: siteContent.value?.cart?.url ?? '',
+}));
 </script>
 
 <style scoped>

package/template/headers/example-header/settings/content.ts

@@ -1,9 +1 @@
-export default {
-  menu: {
-    type: 'NAVIGATION_MENU',
-  },
-  logo: {
-    type: 'LOGO',
-    label: '$label.logo.label',
-  },
-} as const;
+export default {} as const;

package/template/headers/example-header/settings/design.ts

@@ -1,23 +1 @@
-export default {
-  logo: {
-    type: 'LOGO',
-    label: '$label.logo.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],
-    defaults: {
-      font: 'global.fontFamily.body',
-      size: 20,
-      bold: true,
-      italic: false,
-      color: '#313131',
-      visible: true,
-      spacing: 2,
-      capitalization: 'all',
-      frame: {
-        visible: true,
-        width: 3,
-        color: '#313131',
-      },
-    },
-  },
-} as const;
+export default {} as const;

package/template/package.json

@@ -7,7 +7,7 @@
     "deploy": "crane build && crane deploy"
   },
   "dependencies": {
-    "@lightspeed/crane": "1.1.2",
+    "@lightspeed/crane": "1.2.0",
     "@lightspeed/eslint-config-crane": "1.0.2",
     "vue": "^3.4.0",
     "@ecwid/sdk": "^0.8.0"

package/template/reference/sections/about-us/AboutUs.vue

@@ -0,0 +1,73 @@
+<template>
+  <SectionWrapper class="about-us-section" :style="backgroundStyle">
+    <div class="about-us-section__wrapper">
+      <Image
+        v-if="isImageVisible"
+        class="about-us-section__image"
+      />
+
+      <div class="about-us-section__content">
+        <Title v-if="isTitleVisible" />
+        <Stats />
+      </div>
+    </div>
+  </SectionWrapper>
+</template>
+
+<script setup lang="ts">
+import { useBackgroundElementDesign } from '@lightspeed/crane';
+import { computed, CSSProperties } from 'vue';
+
+import Image from './component/Image.vue';
+import type { Design } from './type.ts';
+import { useVisibilityProvider } from './util/visibility-provider.ts';
+import Stats from './component/Stats.vue';
+import Title from './component/Title.vue';
+import SectionWrapper from '../../shared/components/SectionWrapper.vue';
+
+const { isImageVisible, isTitleVisible } = useVisibilityProvider();
+
+const backgroundDesign = useBackgroundElementDesign<Design>('background');
+const background = computed(() => ({
+  type: backgroundDesign.background?.type,
+  solidColor: backgroundDesign.background?.solid?.color as Color,
+  fromColor: backgroundDesign.background?.gradient?.fromColor as Color,
+  toColor: backgroundDesign.background?.gradient?.toColor as Color,
+}));
+
+const backgroundStyle = computed<CSSProperties>(() => {
+  if (background.value.type === 'gradient') {
+    return { 'background-image': `linear-gradient(to right, ${background.value.fromColor.hex}, ${background.value.toColor.hex})` };
+  }
+  return { 'background-color': background.value.solidColor.hex };
+});
+</script>
+
+<style lang="scss" scoped>
+.about-us-section {
+  &__wrapper {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 75px;
+
+    @media screen and (min-width: 900px) {
+      grid-template-columns: 1fr 1fr;
+      align-items: center;
+      gap: 100px;
+    }
+  }
+
+  &__image {
+    max-width: 479px;
+    max-height: 610px;
+    margin: 0 auto;
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+  }
+}
+</style>

package/template/reference/sections/about-us/client.ts

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

package/template/reference/sections/about-us/component/Image.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="image-section">
+    <div
+      :class="overlayClass"
+      class="image-section__overlay"
+      :style="overlayStyle"
+    >
+      <img
+        class="image-section__content"
+        :src="imageContent.highResolutionMobileImage"
+        loading="lazy"
+        alt=""
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  useImageElementContent,
+  useImageElementDesign,
+  useLayoutElementDesign,
+} from '@lightspeed/crane';
+import { computed, CSSProperties } from 'vue';
+
+import type { Content, Design } from '../type.ts';
+
+function getColor(color: string) {
+  return `${color}20`;
+}
+
+const imageContent = useImageElementContent<Content>('image');
+const imageDesign = useImageElementDesign<Design>('image');
+const layoutDesign = useLayoutElementDesign();
+
+const overlayConfig = computed(() => ({
+  solidOverlay: getColor((imageDesign.overlay?.solid?.color as Color).raw),
+  gradientOverlay: 'linear-gradient(180deg, '
+      + `${getColor((imageDesign.overlay?.gradient?.fromColor as Color).raw)} 0%, `
+      + `${getColor((imageDesign.overlay?.gradient?.toColor as Color).raw)} 100%)`,
+}));
+
+const overlayClass = computed(() => ([
+  'image-section__overlay',
+  {
+    'image-section__overlay--border-radius': layoutDesign.layout === 'Images_With_Border_Radius',
+  },
+]));
+
+const overlayStyle = computed(() => {
+  const style: CSSProperties = {};
+
+  if (imageDesign.visible && imageDesign.overlay?.type === 'gradient') {
+    style.background = overlayConfig.value.gradientOverlay;
+  }
+  if (imageDesign.visible && imageDesign.overlay?.type === 'solid') {
+    style.background = overlayConfig.value.solidOverlay;
+  }
+
+  return style;
+});
+</script>
+
+<style lang="scss" scoped>
+.image-section {
+  height: 100%;
+  position: relative;
+  width: 100%;
+  display: flex;
+  z-index: 999;
+
+  &__overlay {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    &--border-radius {
+      border-radius: 24px;
+
+      @media screen and (min-width: 900px) {
+        border-radius: 32px;
+      }
+    }
+  }
+
+  &__content {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    z-index: -1;
+  }
+}
+</style>

package/template/reference/sections/about-us/component/Stats.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="stats">
+    <div
+      v-for="stat in stats"
+      :key="stat.value?.value"
+      class="stats__element"
+    >
+      <div
+        v-if="isValueVisible && stat.value?.value"
+        class="stats__number"
+      >
+        {{ stat.value?.value }}
+      </div>
+
+      <div
+        v-if="isCaptionVisible && stat.caption?.value"
+        class="stats__caption"
+      >
+        {{ stat.caption?.value }}
+      </div>
+    </div>
+
+    <Button
+      v-if="isButtonVisible"
+      class="stats__button"
+      :design="buttonDesign"
+      :content="buttonContent"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Card, InputBoxContent, ButtonContent } from '@lightspeed/crane';
+import {
+  useTextElementDesign,
+  EditorTypes,
+  useDeckElementContent,
+  useButtonElementContent,
+  useButtonElementDesign,
+} from '@lightspeed/crane';
+import { computed, CSSProperties } from 'vue';
+
+import type { Content, Design } from '../type.ts';
+import Button from '../../../shared/components/Button.vue';
+import { useVisibilityProvider } from '../util/visibility-provider.ts';
+
+const buttonContent = useButtonElementContent<Content>('button') as ButtonContent;
+const buttonDesign = useButtonElementDesign<Design>('button') as ButtonDesignData;
+
+const { isButtonVisible } = useVisibilityProvider();
+
+const statsDesk = useDeckElementContent<Content>('stats');
+const stats = computed(() => (
+  statsDesk?.cards?.map((card: Card) => ({
+    value: statsDesk.getReactiveRef(card, EditorTypes.INPUTBOX, 'stat_value') as unknown as InputBoxContent | undefined,
+    caption: statsDesk.getReactiveRef(card, EditorTypes.INPUTBOX, 'stat_caption') as unknown as InputBoxContent | undefined,
+  }))
+    .filter((stat) => {
+      const hasValue = stat.value !== undefined && stat.value.hasContent;
+      const hasCaption = stat.caption !== undefined && stat.caption.hasContent;
+      return hasValue || hasCaption;
+    })
+));
+
+const valueDesign = useTextElementDesign<Design>('value');
+const captionDesign = useTextElementDesign<Design>('caption');
+
+const isValueVisible = computed<boolean>(() => valueDesign.visible ?? false);
+const isCaptionVisible = computed<boolean>(() => captionDesign.visible ?? false);
+
+const valueStyle = computed<CSSProperties>(() => ({
+  fontSize: `${valueDesign.size}px`,
+  fontFamily: valueDesign.font,
+  color: (valueDesign.color as Color).hex,
+  fontStyle: valueDesign.italic ? 'italic' : 'normal',
+  fontWeight: valueDesign.bold ? 'bold' : 'normal',
+}));
+
+const captionStyle = computed<CSSProperties>(() => ({
+  fontSize: `${captionDesign.size}px`,
+  fontFamily: captionDesign.font,
+  color: (captionDesign.color as Color).hex,
+  fontStyle: captionDesign.italic ? 'italic' : 'normal',
+  fontWeight: captionDesign.bold ? 'bold' : 'normal',
+}));
+</script>
+
+<style scoped lang="scss">
+.stats {
+  --value-font-size: v-bind(valueStyle.fontSize);
+  --value-font-family: v-bind(valueStyle.fontFamily);
+  --value-color: v-bind(valueStyle.color);
+  --value-font-style: v-bind(valueStyle.fontStyle);
+  --value-font-weight: v-bind(valueStyle.fontWeight);
+  --value-font-modifier: 1;
+
+  --caption-font-size: v-bind(captionStyle.fontSize);
+  --caption-font-family: v-bind(captionStyle.fontFamily);
+  --caption-color: v-bind(captionStyle.color);
+  --caption-font-style: v-bind(captionStyle.fontStyle);
+  --caption-font-weight: v-bind(captionStyle.fontWeight);
+  --caption-font-modifier: 1;
+
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin: 20px 0;
+
+  &__element {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &__button {
+    align-self: start;
+    margin-top: 20px;
+    width: fit-content;
+    max-width: 360px;
+
+    @media screen and (max-width: 700px) {
+      align-self: center;
+    }
+  }
+
+  &__number {
+    --value-font-modifier: 0.8;
+
+    max-width: 100%;
+    margin-bottom: 8px;
+    overflow: hidden;
+    word-wrap: break-word;
+    font-size: var(--value-font-size);
+    font-family: calc(var(--value-font-family) * var(--value-font-modifier));
+    color: var(--value-color);
+    font-style: var(--value-font-style);
+    font-weight: var(--value-font-weight);
+
+    @media screen and (min-width: 700px) {
+      --value-font-modifier: 1;
+    }
+  }
+
+  &__caption {
+    max-width: 100%;
+    overflow: hidden;
+    word-wrap: break-word;
+    font-size: var(--caption-font-size);
+    font-family: calc(var(--caption-font-family) * var(--caption-font-modifier));
+    color: var(--caption-color);
+    font-style: var(--caption-font-style);
+    font-weight: var(--caption-font-weight);
+  }
+}
+</style>

package/template/reference/sections/about-us/component/Title.vue

@@ -0,0 +1,32 @@
+<template>
+  <h1
+    class="section-title"
+    :style="titleStyle"
+  >
+    {{ titleContent.value }}
+  </h1>
+</template>
+
+<script setup lang="ts">
+import { useInputboxElementContent, useTextElementDesign } from '@lightspeed/crane';
+import { computed, CSSProperties } from 'vue';
+
+import type { Content, Design } from '../type.ts';
+
+const titleContent = useInputboxElementContent<Content>('title');
+const titleDesign = useTextElementDesign<Design>('title');
+
+const titleStyle = computed<CSSProperties>(() => ({
+  'font-size': `${titleDesign.size}px`,
+  'font-family': titleDesign.font,
+  color: (titleDesign.color as Color).hex,
+  'font-style': titleDesign.italic ? 'italic' : 'normal',
+  'font-weight': titleDesign.bold ? 'bold' : 'normal',
+}));
+</script>
+
+<style lang="scss" scoped>
+.section-title {
+  margin-bottom: 20px;
+}
+</style>

package/template/reference/sections/about-us/server.ts

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

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

@@ -0,0 +1,64 @@
+const content: ContentEditor = {
+  title: {
+    type: 'INPUTBOX',
+    label: '$label.section_title.label',
+    placeholder: '$label.section_title.placeholder',
+  },
+  stats: {
+    type: 'DECK',
+    label: '$label.stats.deck_title',
+    addButtonLabel: '$label.stats.add_card_button',
+    maxCards: 5,
+    cards: {
+      defaultCardContent: {
+        label: '$label.images.card_title',
+        settings: {
+          stat_value: {
+            type: 'INPUTBOX',
+            label: '$label.stat_value.label',
+            placeholder: '$label.stat_value.placeholder',
+            text: '$label.stat_value.default.text',
+            title: '$label.stat_value.default.text',
+          },
+          stat_caption: {
+            type: 'INPUTBOX',
+            label: '$label.stat_caption.label',
+            placeholder: '$label.stat_caption.placeholder',
+            text: '$label.stat_caption.default.text',
+            title: '$label.stat_caption.default.text',
+          },
+        },
+      },
+    },
+  },
+  button: {
+    type: 'BUTTON',
+    label: '$label.button_content.label',
+    title: '$label.button_content.title',
+  },
+  image: {
+    type: 'IMAGE',
+    label: '$label.image_content.label',
+    defaults: {
+      set: {
+        LOW_RES: {
+          url: 'section_picture.jpg',
+        },
+        MOBILE_WEBP_LOW_RES: {
+          url: 'section_picture.jpg',
+        },
+        MOBILE_WEBP_HI_RES: {
+          url: 'section_picture@2x.jpg',
+        },
+        WEBP_LOW_RES: {
+          url: 'section_picture@2x.jpg',
+        },
+        WEBP_HI_2X_RES: {
+          url: 'section_picture@2x.jpg',
+        },
+      },
+      borderInfo: {},
+    },
+  },
+};
+export default content;