@lightspeed/crane 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/crane",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "type": "module",
   "bin": "bin/crane.js",
   "main": "./dist/app.mjs",
@@ -32,24 +32,23 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@jest/globals": "^29.7.0",
     "@types/express-fileupload": "^1.5.0",
     "@types/fs-extra": "^11.0.1",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.4.5",
+    "dir-compare": "^5.0.0",
     "express": "^4.19.2",
     "express-fileupload": "^1.5.1",
     "jest": "^29.7.0",
-    "terser": "^5.35.0",
     "ts-jest": "^29.1.5",
     "ts-node": "^10.9.2",
     "typescript": "5.4.5",
     "unbuild": "^2.0.0",
-    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-dts": "^3.4.0",
     "vite-plugin-static-copy": "^0.17.0"
   },
   "dependencies": {
-    "@jest/globals": "^29.7.0",
     "@jridgewell/sourcemap-codec": "^1.4.15",
     "@lightspeed/eslint-config-crane": "1.0.2",
     "@types/prompts": "^2.4.2",
@@ -59,17 +58,19 @@
     "axios": "^1.7.7",
     "axios-concurrency": "^1.0.4",
     "cac": "^6.7.14",
-    "dir-compare": "^5.0.0",
+    "cli-progress": "^3.12.0",
     "eslint": "npm:eslint-customized-for-crane@8.57.0",
     "fs-extra": "^11.1.1",
     "glob": "^9.3.5",
     "kolorist": "^1.8.0",
     "prompts": "^2.4.2",
     "semver": "^7.5.4",
+    "terser": "^5.35.0",
     "tinycolor2": "^1.6.0",
     "typescript": "5.4.5",
     "vite": "^5.3.3",
     "vite-plugin-checker": "^0.6.1",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-externals": "^0.6.2",
     "vite-tsconfig-paths": "^4.2.0",
     "vue": "^3.4.0",

package/template/footers/example-footer/ExampleFooter.vue

@@ -10,6 +10,10 @@
       <div class="custom-footer__blank_space" />
       <LanguageSelector />
     </div>
+    <div>
+      <MadeWith />
+      <div class="custom-block__blank_space" />
+    </div>
   </div>
 </template>
 
@@ -17,8 +21,9 @@
 import { computed } from 'vue';
 import { useBackgroundElementDesign } from '@lightspeed/crane';
 import ReportAbuse from './component/ReportAbuse.vue';
+import MadeWith from './component/MadeWith.vue';
 import { Design } from './type.ts';
-import LanguageSelector from '../../shared/LanguageSelector.vue';
+import LanguageSelector from '../../shared/components/LanguageSelector.vue';
 import LegalLinks from './component/LegalLinks.vue';
 
 const backgroundDesign = useBackgroundElementDesign<Design>('background');

package/template/footers/example-footer/assets/cart.svg

@@ -0,0 +1,19 @@
+<svg
+        width="28"
+        height="28"
+        viewBox="0 0 28 28"
+        xmlns="http://www.w3.org/2000/svg"
+        style="width: 1.1em; height: 1.1em; margin-right: .5em;"
+>
+    <g
+            fill="currentColor"
+            fill-rule="evenodd"
+    >
+        <path
+                d="M21.523 0H6.377C2.89 0 0 2.9 0 6.4v15.3C0 25.2 2.89 28 6.377 28h15.246C25.11 28 28 25.2 28 21.6V6.4C27.9 2.9 25.01 0 21.523 0Zm-4.085 7.5c.697 0 1.295.6 1.295 1.3 0 .7-.598 1.3-1.295 1.3-.698 0-1.296-.6-1.296-1.3 0-.7.598-1.3 1.296-1.3Zm0 3.6c.697 0 1.295.6 1.295 1.3 0 .7-.598 1.3-1.295 1.3-.698 0-1.296-.6-1.296-1.3 0-.7.598-1.3 1.296-1.3ZM13.85 7.5c.697 0 1.295.6 1.295 1.3 0 .7-.598 1.3-1.295 1.3-.698 0-1.296-.6-1.296-1.3 0-.7.598-1.3 1.296-1.3Zm0 3.6c.697 0 1.295.6 1.295 1.3 0 .7-.598 1.3-1.295 1.3-.698 0-1.296-.6-1.296-1.3.1-.7.598-1.3 1.296-1.3Zm-3.488-3.6c.697 0 1.295.6 1.295 1.3 0 .7-.598 1.3-1.295 1.3-.698 0-1.295-.6-1.295-1.3 0-.7.597-1.3 1.295-1.3Zm0 3.6c.697 0 1.295.6 1.295 1.3 0 .7-.598 1.3-1.295 1.3-.698 0-1.295-.6-1.295-1.3 0-.7.597-1.3 1.295-1.3ZM6.975 24.4c-1.295 0-2.391-1.1-2.391-2.4 0-1.3 1.096-2.4 2.391-2.4s2.392 1.1 2.392 2.4c0 1.4-1.097 2.4-2.392 2.4Zm13.85.2c-1.295 0-2.39-1.1-2.39-2.4 0-1.3 1.095-2.4 2.39-2.4 1.296 0 2.392 1.1 2.392 2.4 0 1.3-.996 2.4-2.391 2.4ZM25.11 4.9l-2.49 9.3c-.698 2.5-2.79 4-5.282 4h-1.594c-.498 0-1.296-.3-1.694-.6-.1-.1-.1-.1-.2 0-.298.3-1.096.6-1.693.6h-1.794c-2.491 0-4.384-1.4-5.082-3.8L3.09 7.8c0-.1 0-.3.1-.4.1-.1.199-.2.398-.2h.399c.996 0 1.793.6 2.092 1.6l1.595 4.9c.398 1.3 1.793 2.2 3.188 2.2h.598c.598 0 1.096-.3 1.295-.6.1-.1.3-.2.499-.2h1.395c.199 0 .398.1.498.2.299.3.697.6 1.295.6h.598c1.395 0 2.79-1 3.189-2.4L22.22 6c.299-1 1.195-1.7 2.192-1.7h.498c.1.2.2.4.2.6Z"
+        />
+        <path
+                d="M20.9 21.3c-.5 0-.9.4-.9.9s.4.9.9.9.9-.4.9-.9-.4-.9-.9-.9zM7 21.2c-.5 0-.9.4-.9.9s.4.9.9.9.9-.4.9-.9c-.1-.5-.5-.9-.9-.9z"
+        />
+    </g>
+</svg>

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

@@ -12,8 +12,8 @@ import { useVueBaseProps } from '@lightspeed/crane';
 import { Design } from '../type.ts';
 
 const baseProps = useVueBaseProps<unknown, Design>();
-const externalContent: ExternalContentData = baseProps.externalContent?.value;
-const legalLinks = externalContent.legalLinks ?? [];
+const siteContent: SiteContent = baseProps.site?.value satisfies SiteContent;
+const legalLinks = siteContent.legalPages ?? [];
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <a :href="madeWith?.url" target="{{ madeWith?.target }}">
+      <span>{{ madeWith?.poweredBy }} &nbsp;</span>
+      <span>
+        <img src="../assets/cart.svg" alt="cart" />
+      </span>
+      <span>{{ madeWith?.company }}</span>
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVueBaseProps } from '@lightspeed/crane';
+import { Design } from '../type.ts';
+
+const baseProps = useVueBaseProps<unknown, Design>();
+const siteContent: SiteContent = baseProps.site?.value satisfies SiteContent;
+const madeWith = siteContent.madeWith;
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <a :href="externalContent?.reportAbuse?.url" target="{{ externalContent?.reportAbuse?.target }}}">
-      {{ externalContent?.reportAbuse?.title }}
+    <a :href="reportAbuse?.url" target="{{ reportAbuse?.target }}}">
+      {{ reportAbuse?.title }}
     </a>
   </div>
 </template>
@@ -11,7 +11,8 @@ import { useVueBaseProps } from '@lightspeed/crane';
 import { Design } from '../type.ts';
 
 const baseProps = useVueBaseProps<unknown, Design>();
-const externalContent: ExternalContentData = baseProps.externalContent.value;
+const siteContent: SiteContent = baseProps.site.value satisfies SiteContent;
+const reportAbuse = siteContent.reportAbuse;
 </script>
 
 <style lang="scss" scoped>

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.1.3",
     "@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>