@lightspeed/crane 1.1.3 → 1.2.0

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

@@ -44,17 +44,11 @@ export default {
           settings: {
             stat_value: {
               type: 'INPUTBOX',
-              label: '$label.showcase_2.stat_value_1.label',
-              placeholder: '$label.showcase_2.stat_value_1.placeholder',
               text: '$label.showcase_2.stat_value.default_1.text',
-              title: '$label.showcase_2.stat_value.default_1.text',
             },
             stat_caption: {
               type: 'INPUTBOX',
-              label: '$label.showcase_2.stat_caption_1.label',
-              placeholder: '$label.showcase_2.stat_caption_1.placeholder',
               text: '$label.showcase_2.stat_caption_1.default.text',
-              title: '$label.showcase_2.stat_caption_1.default.text',
             },
           },
         },
@@ -62,14 +56,10 @@ export default {
           settings: {
             stat_value: {
               type: 'INPUTBOX',
-              label: '$label.showcase_2.stat_value_2.label',
-              placeholder: '$label.showcase_2.stat_value_2.placeholder',
               text: '$label.showcase_2.stat_value.default_2.text',
             },
             stat_caption: {
               type: 'INPUTBOX',
-              label: '$label.showcase_2.stat_caption_2.label',
-              placeholder: '$label.showcase_2.stat_caption_2.placeholder',
               text: '$label.showcase_2.stat_caption_2.default.text',
             },
           },
@@ -78,14 +68,10 @@ export default {
           settings: {
             stat_value: {
               type: 'INPUTBOX',
-              label: '$label.showcase_2.stat_value_3.label',
-              placeholder: '$label.showcase_2.stat_value_3.placeholder',
               text: '$label.showcase_2.stat_value.default_3.text',
             },
             stat_caption: {
               type: 'INPUTBOX',
-              label: '$label.showcase_2.stat_caption_3.label',
-              placeholder: '$label.showcase_2.stat_caption_3.placeholder',
               text: '$label.showcase_2.stat_caption_3.default.text',
             },
           },
@@ -94,14 +80,10 @@ export default {
           settings: {
             stat_value: {
               type: 'INPUTBOX',
-              label: '$label.showcase_2.stat_value_4.label',
-              placeholder: '$label.showcase_2.stat_value_4.placeholder',
               text: '$label.showcase_2.stat_value.default_4.text',
             },
             stat_caption: {
               type: 'INPUTBOX',
-              label: '$label.showcase_2.stat_caption_4.label',
-              placeholder: '$label.showcase_2.stat_caption_4.placeholder',
               text: '$label.showcase_2.stat_caption_4.default.text',
             },
           },
@@ -111,6 +93,7 @@ export default {
     button: {
       type: 'BUTTON',
       title: '$label.showcase_2.button_content.title',
+      buttonType: 'HYPER_LINK',
     },
   },
   design: {
@@ -153,7 +136,7 @@ export default {
       font: 'inter',
       appearance: 'OUTLINE',
       size: 'LARGE',
-      style: 'rectangle',
+      shape: 'RECTANGLE',
       color: '#FFFFFF',
     },
   },

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

@@ -25,6 +25,7 @@ export default {
     section_button: {
       type: 'BUTTON',
       title: '$label.showcase_1.section_button.title',
+      buttonType: 'HYPER_LINK',
     },
     slider: {
       type: 'DECK',
@@ -249,7 +250,7 @@ export default {
       font: 'inter',
       appearance: 'SOLID',
       size: 'LARGE',
-      style: 'pill',
+      shape: 'PILL',
       color: '#000000',
     },
     background: {

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

@@ -21,6 +21,7 @@ export default {
     section_button: {
       type: 'BUTTON',
       title: '$label.showcase_2.section_button.title',
+      buttonType: 'HYPER_LINK',
     },
     slider: {
       type: 'DECK',
@@ -245,7 +246,7 @@ export default {
       font: 'inter',
       appearance: 'SOLID',
       size: 'LARGE',
-      style: 'rectangle',
+      shape: 'RECTANGLE',
       color: '#FFFFFF',
     },
     background: {

package/template/sections/example-section/ExampleSection.vue

@@ -6,25 +6,33 @@
     <CustomSectionExampleTitle />
     <div class="example-section__blank_space" />
     <CustomSectionExampleImagesGrid />
+    <div class="custom-block__blank_space" />
+    <Button />
+    <Toggle />
+    <Selectbox />
   </SectionWrapper>
 </template>
 
 <script setup lang="ts">
-import { useBackgroundElementDesign } from '@lightspeed/crane';
+import {
+  useBackgroundElementDesign,
+} from '@lightspeed/crane';
 import { computed } from 'vue';
 import { Design } from './type.ts';
 import CustomSectionExampleTitle from './component/title/Title.vue';
 import CustomSectionExampleImagesGrid from './component/image/ImagesGrid.vue';
 import SectionWrapper from '../../shared/components/SectionWrapper.vue';
+import Selectbox from './component/selectbox/Selectbox.vue';
+import Toggle from './component/toggle/Toggle.vue';
+import Button from './component/button/Button.vue';
 
 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,
+  solidColor: backgroundDesign.background?.solid?.color,
+  fromColor: backgroundDesign.background?.gradient?.fromColor,
+  toColor: backgroundDesign.background?.gradient?.toColor,
 }));
-
 const backgroundStyle = computed(() => {
   if (background.value.type === 'gradient') {
     return { 'background-image': `linear-gradient(to right, ${background.value.fromColor.hex}, ${background.value.toColor.hex})` };

package/template/sections/example-section/assets/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor" d="M19.22 1.735c.528.012.97.42 1.037.933l.009.112.09 4.09a.97.97 0 01-1 1 1.08 1.08 0 01-1.037-.934l-.008-.111-.037-1.684-6.809 6.809c-.438.439-.877.47-1.314.095l-.101-.094c-.438-.437-.469-.876-.093-1.314l.094-.101 6.809-6.809-1.684-.037a1.08 1.08 0 01-1.034-.916l-.01-.128a.969.969 0 01.888-.997l.111-.003 4.09.09zM19 14.5a4.5 4.5 0 01-4.288 4.495L14.5 19h-7a4.5 4.5 0 01-4.495-4.288L3 14.5v-7a4.5 4.5 0 014.288-4.495L7.5 3h2.625a1 1 0 01.117 1.993L10.125 5H7.5a2.5 2.5 0 00-2.495 2.336L5 7.5v7a2.5 2.5 0 002.336 2.495L7.5 17h7a2.5 2.5 0 002.495-2.336L17 14.5v-2.625a1 1 0 011.993-.117l.007.117V14.5z" />
+</svg>

package/template/sections/example-section/component/button/Button.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <button
+      v-if="button?.hasTitle && button?.hasLink"
+      class="pretty-button"
+      type="button"
+      @click="button.performAction"
+    >
+      <div class="button-content">
+        <img :src="arrowIcon" alt="Arrow Icon" width="22" height="22" />
+        <div style="margin-left: 4px">
+          {{ button.title }}
+        </div>
+      </div>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  useButtonElementContent,
+} from '@lightspeed/crane';
+import { Content } from '../../type.ts';
+import arrowIcon from '../../assets/arrow.svg';
+
+const button = useButtonElementContent<Content>('button');
+</script>
+
+<style lang="scss" scoped>
+.button-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.pretty-button {
+  background-color: #FFFFFF;
+  border: 1px solid #222222;
+  border-radius: 8px;
+  box-sizing: border-box;
+  color: #222222;
+  cursor: pointer;
+  display: inline-block;
+  font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  margin: 0;
+  outline: none;
+  padding: 12px 20px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition: box-shadow 0.2s, transform 0.1s ease;
+  user-select: none;
+  -webkit-user-select: none;
+  width: auto;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+  &:hover {
+    background-color: #F7F7F7;
+    border-color: #222222;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+    transform: translateY(-2px);
+  }
+
+  &:active {
+    background-color: #F7F7F7;
+    border-color: #000000;
+    transform: scale(0.96);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  }
+
+  &:focus-visible {
+    box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
+    transition: box-shadow 0.2s;
+  }
+
+  &:disabled {
+    background-color: #FFFFFF;
+    border-color: #DDDDDD;
+    color: #DDDDDD;
+    cursor: not-allowed;
+    opacity: 1;
+    box-shadow: none;
+  }
+}
+</style>

package/template/sections/example-section/component/selectbox/Selectbox.vue

@@ -0,0 +1,45 @@
+<template>
+  <div v-if="selectbox?.hasContent" class="control-item" :style="{ color: textColor }">
+    <div>
+      <h1>Selected: {{ selectbox.value }}</h1>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useBackgroundElementDesign, useSelectboxElementContent } from '@lightspeed/crane';
+import { Content, Design } from '../../type.ts';
+import { isDark } from '../../../../shared/utils.ts';
+
+const selectbox = useSelectboxElementContent<Content>('selectbox');
+const backgroundDesign = useBackgroundElementDesign<Design>('background');
+
+const backgroundColor = computed(() => {
+  const currentColor = backgroundDesign.background?.type === 'solid' ? backgroundDesign.background?.solid?.color?.hex
+    : backgroundDesign.background?.gradient?.fromColor?.hex;
+  return currentColor || '#ffffff';
+});
+
+const textColor = computed(() => (isDark(backgroundColor.value) ? 'white' : 'black'));
+</script>
+
+<style lang="scss" scoped>
+.control-item {
+  margin: 20px 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  label {
+    font-weight: 500;
+  }
+
+  select {
+    padding: 8px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+}
+</style>

package/template/sections/example-section/component/toggle/Toggle.vue

@@ -0,0 +1,110 @@
+<template>
+  <div v-if="toggle?.hasContent" class="control-item" :style="{ color: textColor }">
+    <div>
+      <h1>Toggle is: {{ toggle.value ? 'On' : 'Off' }}</h1>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useBackgroundElementDesign, useToggleElementContent } from '@lightspeed/crane';
+import { Content, Design } from '../../type.ts';
+import { isDark } from '../../../../shared/utils.ts';
+
+const toggle = useToggleElementContent<Content>('toggle');
+const backgroundDesign = useBackgroundElementDesign<Design>('background');
+
+const backgroundColor = computed(() => {
+  const currentColor = backgroundDesign.background?.type === 'solid' ? backgroundDesign.background?.solid?.color?.hex
+    : backgroundDesign.background?.gradient?.fromColor?.hex;
+  return currentColor || '#ffffff';
+});
+
+const textColor = computed(() => (isDark(backgroundColor.value) ? 'white' : 'black'));
+</script>
+
+<style lang="scss" scoped>
+.custom-block {
+  padding: 50px;
+  background-color: #f8f8f8;
+  border-radius: 8px;
+
+  @media screen and (min-width: 700px) {
+    padding: 75px;
+  }
+  @media screen and (min-width: 1200px) {
+    padding: 100px;
+  }
+
+  &__blank_space {
+    height: 40px;
+  }
+}
+
+.control-item {
+  margin: 20px 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  label {
+    font-weight: 500;
+  }
+
+  select {
+    padding: 8px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+
+  input {
+    display: none;
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.4s;
+    border-radius: 20px;
+  }
+
+  input:checked + .slider {
+    background-color: #4caf50;
+  }
+
+  .slider::before {
+    position: absolute;
+    content: "";
+    height: 14px;
+    width: 14px;
+    background-color: white;
+    border-radius: 50%;
+    top: 3px;
+    left: 3px;
+    transition: 0.4s;
+  }
+
+  input:checked + .slider::before {
+    transform: translateX(20px);
+  }
+}
+
+.highlight {
+  color: #4caf50;
+  font-weight: bold;
+}
+</style>

package/template/sections/example-section/settings/content.ts

@@ -63,4 +63,49 @@ export default {
       },
     },
   },
+  button: {
+    type: 'BUTTON',
+    label: '$label.button.label',
+    defaults: {
+      title: '$label.button.defaults.title',
+      buttonType: 'HYPER_LINK',
+      link: 'https://www.example.com',
+    },
+  },
+  toggle: {
+    type: 'TOGGLE',
+    label: '$label.toggle.label',
+    description: '$label.toggle.description',
+    defaults: {
+      enabled: true,
+    },
+  },
+  selectbox: {
+    type: 'SELECTBOX',
+    placeholder: '$label.selectbox.placeholder',
+    label: '$label.selectbox.label',
+    description: '$label.selectbox.description',
+    options: [
+      {
+        value: 'one',
+        label: '$label.selectbox.one.label',
+      },
+      {
+        value: 'two',
+        label: '$label.selectbox.two.label',
+      },
+    ],
+    defaults: {
+      value: 'one',
+    },
+  },
+  info: {
+    type: 'INFO',
+    label: '$label.info.label',
+    description: '$label.info.description',
+    button: {
+      label: '$label.info.button.label',
+      link: 'https://example.com',
+    },
+  },
 } as const;

package/template/sections/example-section/settings/translations.ts

@@ -28,6 +28,21 @@ export default {
     '$label.images.selectbox_option_1.label': 'Content.ts: Image select option 1',
     '$label.images.selectbox_option_2.label': 'Content.ts: Image select option 2',
     '$label.images.button.label': 'Content.ts: Image button label',
+
+    '$label.button.label': 'Content.ts: Button',
+    '$label.button.defaults.title': 'Button Title',
+    '$label.toggle.label': 'Toggle',
+    '$label.toggle.description': 'Enable or disable this feature using the toggle switch',
+
+    '$label.selectbox.placeholder': 'Select an option',
+    '$label.selectbox.label': 'Content.ts: Selectbox',
+    '$label.selectbox.description': 'Content.ts: Select an option from the dropdown to customize your settings',
+    '$label.selectbox.one.label': 'One label',
+    '$label.selectbox.two.label': 'Two label',
+
+    '$label.info.label': 'Content.ts: Info',
+    '$label.info.description': 'Content.ts: This is info section where you can provide some useful tips regarding custom section usage',
+    '$label.info.button.label': 'Content.ts: Learn more',
   },
 
   nl: {
@@ -53,7 +68,23 @@ export default {
     '$label.images.selectbox.label': 'Content.ts: Afbeelding selecteren',
     '$label.images.selectbox_option_1.label': 'Content.ts: Afbeelding selecteren optie 1',
     '$label.images.selectbox_option_2.label': 'Content.ts: Afbeelding selecteren optie 2',
+
     '$label.images.button.label': 'Content.ts: Afbeelding knoplabel',
+    '$label.button.label': 'Content.ts: Knop',
+    '$label.button.defaults.title': 'Knoptitel',
+
+    '$label.toggle.label': 'Schakelaar',
+    '$label.toggle.description': 'Schakel deze functie in of uit met de schakelaar',
+
+    '$label.selectbox.placeholder': 'Selecteer een optie',
+    '$label.selectbox.label': 'Content.ts: Selectievak',
+    '$label.selectbox.description': 'Selecteer een optie uit de dropdown om uw instellingen aan te passen',
+    '$label.selectbox.one.label': 'Eén label',
+    '$label.selectbox.two.label': 'Twee label',
+
+    '$label.info.label': 'Informatie',
+    '$label.info.description': 'Dit is een informatiedeel waar je enkele nuttige tips kunt geven over het gebruik van aangepaste secties',
+    '$label.info.button.label': 'Meer informatie',
   },
 
   fr: {
@@ -80,5 +111,22 @@ export default {
     '$label.images.selectbox_option_1.label': 'Content.ts: Option de sélection de l\'image 1',
     '$label.images.selectbox_option_2.label': 'Content.ts: Option de sélection de l\'image 2',
     '$label.images.button.label': 'Content.ts: Étiquette du bouton de l\'image',
+
+    '$label.button.label': 'Content.ts: Bouton',
+    '$label.button.defaults.title': 'Titre du bouton',
+
+    '$label.toggle.label': 'Basculer',
+    '$label.toggle.description': 'Activez ou désactivez cette fonctionnalité à l\'aide de l\'interrupteur',
+
+    '$label.selectbox.placeholder': 'Sélectionnez une option',
+    '$label.selectbox.label': 'Content.ts: Boîte de sélection',
+    '$label.selectbox.description': 'Sélectionnez une option dans le menu déroulant pour personnaliser vos paramètres',
+    '$label.selectbox.one.label': 'Un label',
+    '$label.selectbox.two.label': 'Deux label',
+
+    '$label.info.label': 'Content.ts: Info',
+    '$label.info.description': 'Content.ts: Ceci est une section d\'information où vous '
+        + 'pouvez fournir des conseils utiles sur l\'utilisation de la section personnalisée',
+    '$label.info.button.label': 'En savoir plus',
   },
 } as const;

package/template/sections/example-section/showcases/1.ts

@@ -170,6 +170,49 @@ export default {
         },
       ],
     },
+    toggle: {
+      type: 'TOGGLE',
+      label: '$label.showcase_1.toggle.label',
+      description: '$label.showcase_1.toggle.description',
+      defaults: {
+        enabled: true,
+      },
+    },
+    selectbox: {
+      type: 'SELECTBOX',
+      placeholder: '$label.showcase_1.selectbox.placeholder',
+      label: '$label.showcase_1.selectbox.label',
+      description: '$label.showcase_1.selectbox.description',
+      options: [
+        {
+          value: 'one',
+          label: '$label.showcase_1.selectbox.one.label',
+        },
+        {
+          value: 'two',
+          label: '$label.showcase_1.selectbox.two.label',
+        },
+      ],
+      defaults: {
+        value: 'one',
+      },
+    },
+    info: {
+      type: 'INFO',
+      text: '$label.showcase_1.info.text',
+      button: {
+        title: '$label.showcase_1.info.button.title',
+        link: 'https://example.com',
+        buttonType: 'HYPER_LINK',
+      },
+    },
+    button: {
+      type: 'BUTTON',
+      label: '$label.showcase_1.button.label',
+      title: '$label.showcase_1.button.defaults.title',
+      buttonType: 'HYPER_LINK',
+      link: 'https://www.example.com',
+    },
   },
   design: {
     section_title: {

package/template/sections/example-section/showcases/2.ts

@@ -149,6 +149,49 @@ export default {
         },
       ],
     },
+    toggle: {
+      type: 'TOGGLE',
+      label: '$label.showcase_2.toggle.label',
+      description: '$label.showcase_2.toggle.description',
+      defaults: {
+        enabled: true,
+      },
+    },
+    selectbox: {
+      type: 'SELECTBOX',
+      placeholder: '$label.showcase_2.selectbox.placeholder',
+      label: '$label.showcase_2.selectbox.label',
+      description: '$label.showcase_2.selectbox.description',
+      options: [
+        {
+          value: 'one',
+          label: '$label.showcase_2.selectbox.one.label',
+        },
+        {
+          value: 'two',
+          label: '$label.showcase_2.selectbox.two.label',
+        },
+      ],
+      defaults: {
+        value: 'one',
+      },
+    },
+    info: {
+      type: 'INFO',
+      text: '$label.showcase_2.info.text',
+      button: {
+        title: '$label.showcase_1.info.button.title',
+        link: 'https://example.com',
+        buttonType: 'HYPER_LINK',
+      },
+    },
+    button: {
+      type: 'BUTTON',
+      label: '$label.showcase_2.button.label',
+      title: '$label.showcase_2.button.defaults.title',
+      buttonType: 'HYPER_LINK',
+      link: 'https://www.example.com',
+    },
   },
   design: {
     section_title: {

package/template/sections/example-section/showcases/3.ts

@@ -166,6 +166,49 @@ export default {
         },
       ],
     },
+    toggle: {
+      type: 'TOGGLE',
+      label: '$label.showcase_3.toggle.label',
+      description: '$label.showcase_3.toggle.description',
+      defaults: {
+        enabled: true,
+      },
+    },
+    selectbox: {
+      type: 'SELECTBOX',
+      placeholder: '$label.showcase_3.selectbox.placeholder',
+      label: '$label.showcase_3.selectbox.label',
+      description: '$label.showcase_3.selectbox.description',
+      options: [
+        {
+          value: 'one',
+          label: '$label.showcase_3.selectbox.one.label',
+        },
+        {
+          value: 'two',
+          label: '$label.showcase_3.selectbox.two.label',
+        },
+      ],
+      defaults: {
+        value: 'one',
+      },
+    },
+    info: {
+      type: 'INFO',
+      text: '$label.showcase_3.info.text',
+      button: {
+        title: '$label.showcase_3.info.button.title',
+        link: 'https://example.com',
+        buttonType: 'HYPER_LINK',
+      },
+    },
+    button: {
+      type: 'BUTTON',
+      label: '$label.showcase_1.button.label',
+      title: '$label.showcase_1.button.defaults.title',
+      buttonType: 'HYPER_LINK',
+      link: 'https://www.example.com',
+    },
   },
   design: {
     section_title: {