@lightspeed/crane 1.4.2 → 2.0.1

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

@@ -3,16 +3,14 @@ export default {
     '$label.showcase_1.blockName': 'Reference Section — Retail',
     '$label.showcase_1.section_title.text': 'Trending collections',
     '$label.showcase_1.section_description.text': 'Discover our favorite pieces this season, and indulge yourself in '
-        + 'these timeless pieces suitable for every occasion. We offer free shipping and returns, and 24/7 fashion '
-        + 'advice through our mobile app.',
+      + 'these timeless pieces suitable for every occasion. We offer free shipping and returns, and 24/7 fashion '
+      + 'advice through our mobile app.',
     '$label.showcase_1.image_text_1.text': 'New Arrivals',
     '$label.showcase_1.image_text_2.text': 'Sport look',
     '$label.showcase_1.image_text_3.text': 'Summer accessories',
     '$label.showcase_1.image_text_4.text': 'Trending footwear',
     '$label.showcase_1.image_link_1.text': '/products',
 
-    '$label.card_button_title': 'Card button',
-
     '$label.showcase_2.blockName': 'Reference Section — Apparel',
     '$label.showcase_2.section_title.text': 'Trending collections',
     '$label.showcase_2.image_text_1.text': 'New t-shirts collection',
@@ -33,61 +31,17 @@ export default {
     '$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: {
     '$label.showcase_1.blockName': 'Referentiesectie — Detailhandel',
     '$label.showcase_1.section_title.text': 'Trending collecties',
     '$label.showcase_1.section_description.text': 'Ontdek onze favoriete stukken van dit seizoen en verwen jezelf met '
-        + 'deze tijdloze stukken die geschikt zijn voor elke gelegenheid. Wij bieden gratis verzending en retourneren, '
-        + 'en 24/7 modeadvies via onze mobiele app.',
+      + 'deze tijdloze stukken die geschikt zijn voor elke gelegenheid. Wij bieden gratis verzending en retourneren, '
+      + 'en 24/7 modeadvies via onze mobiele app.',
     '$label.showcase_1.image_text_1.text': 'Nieuw binnen',
     '$label.showcase_1.image_text_2.text': 'Sportieve look',
     '$label.showcase_1.image_text_3.text': 'Zomeraccessoires',
@@ -113,71 +67,23 @@ export default {
     '$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_3.info.button.title': 'Meer',
     '$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é',
     '$label.showcase_1.image_text_4.text': 'Chaussures tendance',
     '$label.showcase_1.image_link_1.text': '/products',
 
-    '$label.card_button_title': 'Bouton de carte',
-
     '$label.showcase_2.blockName': 'Section de référence — Vêtements',
     '$label.showcase_2.section_title.text': 'Collections tendance',
     '$label.showcase_2.image_text_1.text': 'Nouvelle collection de t-shirts',
@@ -195,57 +101,13 @@ export default {
     '$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',
+      + '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_3.info.text': 'Showcase 3: 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.title': 'Showcase 1: Apprendre',
-    '$label.showcase_2.info.button.title': 'Showcase 2: Plus',
-
-    '$label.showcase_1.button.label': 'Content.ts: Bouton',
+    '$label.showcase_3.info.button.title': 'Showcase 3: Plus',
     '$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

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { useVueBaseProps } from '@lightspeed/crane';
+import { useVueBaseProps } from '@lightspeed/crane-api';
 import { computed } from 'vue';
 import { Design } from '../../headers/example-header/type.ts';
 

package/template/shared/translation.ts

@@ -0,0 +1,16 @@
+export default {
+  en: {
+    '$label.shared.title': 'Title',
+    '$label.shared.description': 'Description',
+  },
+
+  nl: {
+    '$label.shared.title': 'Titel',
+    '$label.shared.description': 'Beschrijving',
+  },
+
+  fr: {
+    '$label.shared.title': 'Titre',
+    '$label.shared.description': 'Description',
+  },
+} as const;

package/template/shared/utils.ts

@@ -1,7 +1,9 @@
 export function isDark(color: string): boolean {
   if (!color) return false;
 
-  let r; let g; let b;
+  let r;
+  let g;
+  let b;
 
   if (color.startsWith('#')) {
     const hex = color.replace('#', '');

package/template/tsconfig.json

@@ -5,6 +5,7 @@
     "module": "esnext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
+    "types": ["node", "@lightspeed/crane-api"],
 
     "moduleResolution": "node",
     "allowImportingTsExtensions": true,