@lightspeed/crane 1.1.2 → 1.2.0

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: {
@@ -36,17 +51,82 @@ export default {
     '$label.section_description.label': 'Lange beschrijving',
     '$label.section_description.placeholder': 'Deze beschrijving wordt onder de titel weergegeven',
     '$label.image_text.label': 'Bijschrift afbeelding',
-    '$label.image_text_1.label': 'Onderschrift afbeelding',
     '$label.image_text.placeholder': 'Dit bijschrift wordt op of onder de afbeelding weergegeven',
     '$label.image_content.label': 'Afbeeldingsinhoud',
-    '$label.image_content_1.label': 'Afbeelding',
-    '$label.image_link_1.label': 'Afbeelding link',
     '$label.image_link.placeholder': 'Voer een optionele URL in voor de afbeelding',
     '$label.background.label': 'Achtergrond',
+    '$label.image_text_1.label': 'Content.ts: Onderschrift afbeelding',
+    '$label.image_content_1.label': 'Content.ts: Afbeelding',
+    '$label.image_link_1.label': 'Content.ts: Afbeelding link',
+    '$label.images.deck_title': 'Content.ts: Afbeeldingsinstellingen',
+    '$label.images.add_card_button': 'Content.ts: Afbeeldingsinstellingen toevoegen',
+    '$label.images.card_title': 'Content.ts: Afbeeldingsinstellingen',
+    '$label.images.default.image_text': 'Standaard van Content.ts: Standaard afbeeldingstekst',
+    '$label.images.default.image_link.text': 'Standaard van Content.ts: Standaard afbeeldingslinktekst',
+    '$label.images.default.button_title': 'Standaard van Content.ts: Standaard knoptitel',
+    '$label.images.toggle.label': 'Content.ts: Afbeelding schakelen',
+    '$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: {
+    '$label.section_title.label': 'Titre principal',
+    '$label.section_title.placeholder': 'Ce sera le titre principal de cette section',
+    '$label.section_description.label': 'Description longue',
+    '$label.section_description.placeholder': 'Cette description sera affichée sous le titre',
+    '$label.image_text.label': 'Légende de l\'image',
+    '$label.image_text.placeholder': 'Cette légende sera affichée sur ou sous l\'image',
+    '$label.image_content.label': 'Contenu de l\'image',
+    '$label.image_link.placeholder': 'Entrez une URL facultative pour l\'image',
+    '$label.background.label': 'Arrière-plan',
+    '$label.image_text_1.label': 'Content.ts: Légende de l\'image',
+    '$label.image_content_1.label': 'Content.ts: Image',
+    '$label.image_link_1.label': 'Content.ts: Lien de l\'image',
+    '$label.images.deck_title': 'Content.ts: Paramètres de l\'image',
+    '$label.images.add_card_button': 'Content.ts: Ajouter de nouveaux paramètres d\'image',
+    '$label.images.card_title': 'Content.ts: Paramètres de l\'image',
+    '$label.images.default.image_text': 'Par défaut de Content.ts: Texte de l\'image par défaut',
+    '$label.images.default.image_link.text': 'Par défaut de Content.ts: Texte du lien de l\'image par défaut',
+    '$label.images.default.button_title': 'Par défaut de Content.ts: Titre du bouton par défaut',
+    '$label.images.toggle.label': 'Content.ts: Basculer l\'image',
+    '$label.images.selectbox.label': 'Content.ts: Sélectionner l\'image',
+    '$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.images.deck_title': 'Afbeeldingsinstellingen',
-    '$label.images.add_card_button': 'Afbeeldingsinstellingen toevoegen',
-    '$label.images.card_title': 'Afbeeldingsinstellingen',
-    '$label.images.image_text_default': 'Standaardtekst',
+    '$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

@@ -0,0 +1,241 @@
+export default {
+  showcaseId: '3',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'custom_section_showcase_3_preview.jpg',
+      },
+    },
+  },
+  blockName: '$label.showcase_3.blockName',
+  layoutId: 'Caption_On_Image',
+  content: {
+    section_title: {
+      type: 'INPUTBOX',
+      text: '$label.showcase_3.section_title.text',
+    },
+
+    images: {
+      type: 'DECK',
+      cards: [
+        {
+          settings: {
+            image_text: {
+              type: 'TEXTAREA',
+              text: '$label.showcase_3.image_text_1.text',
+            },
+
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'bike_new_arrivals_low.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'bike_new_arrivals_low.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'bike_new_arrivals_high.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'bike_new_arrivals_high.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'bike_new_arrivals_high.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+
+            image_link: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_3.image_link_1.text',
+            },
+          },
+        },
+
+        {
+          settings: {
+            image_text: {
+              type: 'TEXTAREA',
+              text: '$label.showcase_3.image_text_2.text',
+            },
+
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'fixed_gears_low.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'fixed_gears_low.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'fixed_gears_high.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'fixed_gears_low.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'fixed_gears_high.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+
+            image_link: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_3.image_link_1.text',
+            },
+          },
+        },
+
+        {
+          settings: {
+            image_text: {
+              type: 'TEXTAREA',
+              text: '$label.showcase_3.image_text_3.text',
+            },
+
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'repair_service_low.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'repair_service_low.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'repair_service_high.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'repair_service_low.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'repair_service_high.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+
+            image_link: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_3.image_link_1.text',
+            },
+          },
+        },
+
+        {
+          settings: {
+            image_text: {
+              type: 'TEXTAREA',
+              text: '$label.showcase_3.image_text_4.text',
+            },
+
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'bike_accessories_low.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'bike_accessories_low.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'bike_accessories_high.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'bike_accessories_low.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'bike_accessories_high.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+      ],
+    },
+    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: {
+      type: 'TEXT',
+      font: 'pt_mono',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#FFFFFF',
+    },
+    image_text: {
+      type: 'TEXT',
+      font: 'pt_mono',
+      size: 24,
+      bold: true,
+      italic: false,
+      color: '#FFFFFF',
+    },
+    background: {
+      type: 'BACKGROUND',
+      style: 'GRADIENT',
+      color: ['#131313', '#292929'],
+    },
+    image_content: {
+      type: 'IMAGE',
+      overlay: 'GRADIENT',
+      color: ['#000000', '#00000033'],
+    },
+  },
+} as const;