@lightspeed/crane 1.1.3 → 1.2.1

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: {

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

@@ -29,6 +29,57 @@ export default {
     '$label.showcase_3.image_text_2.text': 'Fixed-gears',
     '$label.showcase_3.image_text_3.text': 'Repair service',
     '$label.showcase_3.image_text_4.text': 'Bike accessories',
+    '$label.showcase_1.info.text': 'Showcase 1: This is info section where you can provide some useful tips regarding custom section usage',
+    '$label.showcase_2.info.text': 'Showcase 2: This is area for useful tips regarding custom section usage',
+    '$label.showcase_3.info.text': 'Showcase 3: This is info section where you can provide some useful tips regarding custom section usage',
+    '$label.showcase_1.info.button.title': 'Showcase 1: Learn',
+    '$label.showcase_2.info.button.title': 'Showcase 2: More',
+    '$label.showcase_3.info.button.title': 'Showcase 3: More',
+
+    '$label.showcase_1.button.label': 'Content.ts: Button',
+    '$label.showcase_1.button.defaults.title': 'Button Title',
+    '$label.showcase_1.toggle.label': 'Toggle',
+    '$label.showcase_1.toggle.description': 'Enable or disable this feature using the toggle switch',
+
+    '$label.showcase_1.selectbox.placeholder': 'Select an option',
+    '$label.showcase_1.selectbox.label': 'Content.ts: Selectbox',
+    '$label.showcase_1.selectbox.description': 'Content.ts:Select an option from the dropdown to customize your settings',
+    '$label.showcase_1.selectbox.one.label': 'One label',
+    '$label.showcase_1.selectbox.two.label': 'Two label',
+
+    '$label.showcase_1.info.label': 'Content.ts: Info',
+    '$label.showcase_1.info.description': 'Content.ts: This is info section where you can provide some useful tips regarding custom section usage',
+    '$label.showcase_1.info.button.label': 'Content.ts: Learn more',
+
+    '$label.showcase_2.button.label': 'Content.ts: Button',
+    '$label.showcase_2.button.defaults.title': 'Button Title',
+    '$label.showcase_2.toggle.label': 'Toggle',
+    '$label.showcase_2.toggle.description': 'Enable or disable this feature using the toggle switch',
+
+    '$label.showcase_2.selectbox.placeholder': 'Select an option',
+    '$label.showcase_2.selectbox.label': 'Content.ts: Selectbox',
+    '$label.showcase_2.selectbox.description': 'Content.ts:Select an option from the dropdown to customize your settings',
+    '$label.showcase_2.selectbox.one.label': 'One label',
+    '$label.showcase_2.selectbox.two.label': 'Two label',
+
+    '$label.showcase_2.info.label': 'Content.ts: Info',
+    '$label.showcase_2.info.description': 'Content.ts: This is info section where you can provide some useful tips regarding custom section usage',
+    '$label.showcase_2.info.button.label': 'Content.ts: Learn more',
+
+    '$label.showcase_3.button.label': 'Content.ts: Button',
+    '$label.showcase_3.button.defaults.title': 'Button Title',
+    '$label.showcase_3.toggle.label': 'Toggle',
+    '$label.showcase_3.toggle.description': 'Enable or disable this feature using the toggle switch',
+
+    '$label.showcase_3.selectbox.placeholder': 'Select an option',
+    '$label.showcase_3.selectbox.label': 'Content.ts: Selectbox',
+    '$label.showcase_3.selectbox.description': 'Content.ts:Select an option from the dropdown to customize your settings',
+    '$label.showcase_3.selectbox.one.label': 'One label',
+    '$label.showcase_3.selectbox.two.label': 'Two label',
+
+    '$label.showcase_3.info.label': 'Content.ts: Info',
+    '$label.showcase_3.info.description': 'Content.ts: This is info section where you can provide some useful tips regarding custom section usage',
+    '$label.showcase_3.info.button.label': 'Content.ts: Learn more',
   },
 
   nl: {
@@ -59,14 +110,66 @@ export default {
     '$label.showcase_3.image_text_2.text': 'Vaste versnellingen',
     '$label.showcase_3.image_text_3.text': 'Reparatieservice',
     '$label.showcase_3.image_text_4.text': 'Fietsaccessoires',
+    '$label.showcase_1.info.text': 'Dit is het informatiedeel waar je enkele nuttige tips kunt geven over het gebruik van aangepaste secties',
+    '$label.showcase_2.info.text': 'Hier is een gebied voor nuttige tips over het gebruik van aangepaste secties',
+    '$label.showcase_1.info.button.title': 'Leren',
+    '$label.showcase_2.info.button.title': 'Meer',
+
+    '$label.showcase_1.button.label': 'Content.ts: Knop',
+    '$label.showcase_1.button.defaults.title': 'Knoptitel',
+    '$label.showcase_1.toggle.label': 'Schakelaar',
+    '$label.showcase_1.toggle.description': 'Schakel deze functie in of uit met de schakelaar',
+
+    '$label.showcase_1.selectbox.placeholder': 'Selecteer een optie',
+    '$label.showcase_1.selectbox.label': 'Content.ts: Selectievak',
+    '$label.showcase_1.selectbox.description': 'Content.ts:Selecteer een optie uit de dropdown om uw instellingen aan te passen',
+    '$label.showcase_1.selectbox.one.label': 'Eén label',
+    '$label.showcase_1.selectbox.two.label': 'Twee label',
+
+    '$label.showcase_1.info.label': 'Content.ts: Info',
+    '$label.showcase_1.info.description': 'Content.ts: Dit is een informatiedeel waar je enkele nuttige tips '
+        + 'kunt geven over het gebruik van aangepaste secties',
+    '$label.showcase_1.info.button.label': 'Content.ts: Meer informatie',
+
+    '$label.showcase_2.button.label': 'Content.ts: Knop',
+    '$label.showcase_2.button.defaults.title': 'Knoptitel',
+    '$label.showcase_2.toggle.label': 'Schakelaar',
+    '$label.showcase_2.toggle.description': 'Schakel deze functie in of uit met de schakelaar',
+
+    '$label.showcase_2.selectbox.placeholder': 'Selecteer een optie',
+    '$label.showcase_2.selectbox.label': 'Content.ts: Selectievak',
+    '$label.showcase_2.selectbox.description': 'Content.ts:Selecteer een optie uit de dropdown om uw instellingen aan te passen',
+    '$label.showcase_2.selectbox.one.label': 'Eén label',
+    '$label.showcase_2.selectbox.two.label': 'Twee label',
+
+    '$label.showcase_2.info.label': 'Content.ts: Info',
+    '$label.showcase_2.info.description': 'Content.ts: Dit is een informatiedeel waar je enkele '
+        + 'nuttige tips kunt geven over het gebruik van aangepaste secties',
+    '$label.showcase_2.info.button.label': 'Content.ts: Meer informatie',
+
+    '$label.showcase_3.button.label': 'Content.ts: Knop',
+    '$label.showcase_3.button.defaults.title': 'Knoptitel',
+    '$label.showcase_3.toggle.label': 'Schakelaar',
+    '$label.showcase_3.toggle.description': 'Schakel deze functie in of uit met de schakelaar',
+
+    '$label.showcase_3.selectbox.placeholder': 'Selecteer een optie',
+    '$label.showcase_3.selectbox.label': 'Content.ts: Selectievak',
+    '$label.showcase_3.selectbox.description': 'Content.ts:Selecteer een optie uit de dropdown om uw instellingen aan te passen',
+    '$label.showcase_3.selectbox.one.label': 'Eén label',
+    '$label.showcase_3.selectbox.two.label': 'Twee label',
+
+    '$label.showcase_3.info.label': 'Content.ts: Info',
+    '$label.showcase_3.info.description': 'Content.ts: Dit is een informatiedeel waar je enkele nuttige tips '
+        + 'kunt geven over het gebruik van aangepaste secties',
+    '$label.showcase_3.info.button.label': 'Content.ts: Meer informatie',
   },
 
   fr: {
     '$label.showcase_1.blockName': 'Section de référence — Vente au détail',
     '$label.showcase_1.section_title.text': 'Collections tendance',
     '$label.showcase_1.section_description.text': 'Découvrez nos pièces préférées de cette saison et offrez-vous ces '
-      + 'pièces intemporelles adaptées à toutes les occasions. Nous offrons la livraison et les retours gratuits, ainsi '
-      + 'que des conseils de mode 24/7 via notre application mobile.',
+        + 'pièces intemporelles adaptées à toutes les occasions. Nous offrons la livraison et les retours gratuits, ainsi '
+        + 'que des conseils de mode 24/7 via notre application mobile.',
     '$label.showcase_1.image_text_1.text': 'Nouveautés',
     '$label.showcase_1.image_text_2.text': 'Look sportif',
     '$label.showcase_1.image_text_3.text': 'Accessoires d\'été',
@@ -91,5 +194,58 @@ export default {
     '$label.showcase_3.image_text_2.text': 'Vélos à pignon fixe',
     '$label.showcase_3.image_text_3.text': 'Service de réparation',
     '$label.showcase_3.image_text_4.text': 'Accessoires pour vélos',
+    '$label.showcase_1.info.text': 'Showcase 1: Ceci est une section d\'information où vous pouvez fournir des conseils utiles sur '
+        + 'l\'utilisation de la section personnalisée',
+    '$label.showcase_2.info.text': 'Showcase 2: Ceci est une zone pour des conseils utiles sur l\'utilisation de la section personnalisée',
+    '$label.showcase_1.info.button.title': 'Showcase 1: Apprendre',
+    '$label.showcase_2.info.button.title': 'Showcase 2: Plus',
+
+    '$label.showcase_1.button.label': 'Content.ts: Bouton',
+    '$label.showcase_1.button.defaults.title': 'Titre du bouton',
+    '$label.showcase_1.toggle.label': 'Basculer',
+    '$label.showcase_1.toggle.description': 'Activez ou désactivez cette fonctionnalité à l\'aide de l\'interrupteur',
+
+    '$label.showcase_1.selectbox.placeholder': 'Sélectionnez une option',
+    '$label.showcase_1.selectbox.label': 'Content.ts: Boîte de sélection',
+    '$label.showcase_1.selectbox.description': 'Content.ts:Sélectionnez une option dans le menu déroulant pour personnaliser vos paramètres',
+    '$label.showcase_1.selectbox.one.label': 'Un label',
+    '$label.showcase_1.selectbox.two.label': 'Deux label',
+
+    '$label.showcase_1.info.label': 'Content.ts: Info',
+    '$label.showcase_1.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.showcase_1.info.button.label': 'Content.ts: En savoir plus',
+
+    '$label.showcase_2.button.label': 'Content.ts: Bouton',
+    '$label.showcase_2.button.defaults.title': 'Titre du bouton',
+    '$label.showcase_2.toggle.label': 'Basculer',
+    '$label.showcase_2.toggle.description': 'Activez ou désactivez cette fonctionnalité à l\'aide de l\'interrupteur',
+
+    '$label.showcase_2.selectbox.placeholder': 'Sélectionnez une option',
+    '$label.showcase_2.selectbox.label': 'Content.ts: Boîte de sélection',
+    '$label.showcase_2.selectbox.description': 'Content.ts:Sélectionnez une option dans le menu déroulant pour personnaliser vos paramètres',
+    '$label.showcase_2.selectbox.one.label': 'Un label',
+    '$label.showcase_2.selectbox.two.label': 'Deux label',
+
+    '$label.showcase_2.info.label': 'Content.ts: Info',
+    '$label.showcase_2.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.showcase_2.info.button.label': 'Content.ts: En savoir plus',
+
+    '$label.showcase_3.button.label': 'Content.ts: Bouton',
+    '$label.showcase_3.button.defaults.title': 'Titre du bouton',
+    '$label.showcase_3.toggle.label': 'Basculer',
+    '$label.showcase_3.toggle.description': 'Activez ou désactivez cette fonctionnalité à l\'aide de l\'interrupteur',
+
+    '$label.showcase_3.selectbox.placeholder': 'Sélectionnez une option',
+    '$label.showcase_3.selectbox.label': 'Content.ts: Boîte de sélection',
+    '$label.showcase_3.selectbox.description': 'Content.ts:Sélectionnez une option dans le menu déroulant pour personnaliser vos paramètres',
+    '$label.showcase_3.selectbox.one.label': 'Un label',
+    '$label.showcase_3.selectbox.two.label': 'Deux label',
+
+    '$label.showcase_3.info.label': 'Content.ts: Info',
+    '$label.showcase_3.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.showcase_3.info.button.label': 'Content.ts: En savoir plus',
   },
 } as const;

package/template/shared/components/LanguageSelector.vue

@@ -25,10 +25,10 @@ import { computed } from 'vue';
 import { Design } from '../../headers/example-header/type.ts';
 
 const baseProps = useVueBaseProps<unknown, Design>();
-const externalContent = computed(() => baseProps.externalContent?.value as ExternalContentData);
-const isPreviewMode = computed(() => externalContent.value?.isPreviewMode ?? false);
-const sortedLanguages = computed(() => (externalContent.value?.languages
-  ? [...externalContent.value.languages].sort((a, b) => {
+const siteContent = computed(() => baseProps.site?.value satisfies SiteContent);
+const isPreviewMode = computed(() => siteContent.value?.isPreviewMode ?? false);
+const sortedLanguages = computed(() => (siteContent.value?.languages
+  ? [...siteContent.value.languages].sort((a, b) => {
     if (a.main && !b.main) return -1;
     if (!a.main && b.main) return 1;
     return 0;

package/template/shared/utils.ts

@@ -0,0 +1,28 @@
+export function isDark(color: string): boolean {
+  if (!color) return false;
+
+  let r; let g; let b;
+
+  if (color.startsWith('#')) {
+    const hex = color.replace('#', '');
+    if (hex.length === 3) {
+      r = parseInt(hex[0] + hex[0], 16);
+      g = parseInt(hex[1] + hex[1], 16);
+      b = parseInt(hex[2] + hex[2], 16);
+    } else {
+      r = parseInt(hex.substring(0, 2), 16);
+      g = parseInt(hex.substring(2, 4), 16);
+      b = parseInt(hex.substring(4, 6), 16);
+    }
+  } else if (color.startsWith('rgb')) {
+    const rgbValues = color.match(/\d+/g);
+    if (rgbValues) {
+      [r, g, b] = rgbValues.map(Number);
+    }
+  }
+
+  if (r === undefined || g === undefined || b === undefined) return false;
+
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  return brightness < 128;
+}

package/types.d.ts

@@ -367,6 +367,7 @@ type MapEditorDesignTypes = {
   readonly BACKGROUND: string;
   readonly COLOR_PICKER: string;
   readonly LOGO: string;
+  readonly DIVIDER: string;
 };
 
 interface TextDesignEditor {
@@ -416,15 +417,21 @@ interface LogoDesignEditor {
   defaults: Record<string, unknown>;
 }
 
+interface DividerDesignEditor {
+    readonly type: 'DIVIDER';
+    readonly label: string | Record<string, string>;
+}
+
 type DesignEditor =
-    TextDesignEditor
-    | ButtonDesignEditor
-    | ImageDesignEditor
-    | ToggleDesignEditor
-    | SelectboxDesignEditor
-    | BackgroundDesignEditor
-    | ColorPickerDesignEditor
-    | LogoDesignEditor;
+  TextDesignEditor
+  | ButtonDesignEditor
+  | ImageDesignEditor
+  | ToggleDesignEditor
+  | SelectboxDesignEditor
+  | BackgroundDesignEditor
+  | ColorPickerDesignEditor
+  | LogoDesignEditor
+  | DividerDesignEditor;
 
 type InferDesignType<T extends Record<string, DesignEditor>> = {
   readonly [P in keyof T]: MapEditorDesignTypes[T[P]['type']]