@lightspeed/crane 1.1.3 → 1.2.0

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;
+}