@lightspeed/crane 0.1.1 → 1.0.0

package/template/sections/example-section/component/image/ImagesGrid.vue

@@ -0,0 +1,244 @@
+<template>
+  <div
+    v-if="size > 0"
+    :class="`image-grid__${images.length}`"
+  >
+    <div
+      v-for="(image, index) in images"
+      :key="index"
+      :class="`image-grid__content-${index + 1}`"
+    >
+      <CustomSectionExampleImage
+        :url="smallWindow ? image?.content?.lowResolutionDesktopImage : image?.content?.highResolutionDesktopImage"
+        :text="image?.text?.value"
+        :link="image?.link?.value"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useImageElementContent, useInputboxElementContent, useTextareaElementContent } from '@lightspeed/crane';
+import CustomSectionExampleImage from './Image.vue';
+import { Content } from '../../type.ts';
+
+const imageText1 = useTextareaElementContent<Content>('image_text_1');
+const imageText2 = useTextareaElementContent<Content>('image_text_2');
+const imageText3 = useTextareaElementContent<Content>('image_text_3');
+const imageText4 = useTextareaElementContent<Content>('image_text_4');
+const imageContent1 = useImageElementContent<Content>('image_content_1');
+const imageContent2 = useImageElementContent<Content>('image_content_2');
+const imageContent3 = useImageElementContent<Content>('image_content_3');
+const imageContent4 = useImageElementContent<Content>('image_content_4');
+const imageLink1 = useInputboxElementContent<Content>('image_link_1');
+const imageLink2 = useInputboxElementContent<Content>('image_link_2');
+const imageLink3 = useInputboxElementContent<Content>('image_link_3');
+const imageLink4 = useInputboxElementContent<Content>('image_link_4');
+const images = computed(() => ([
+  {
+    text: imageText1,
+    content: imageContent1,
+    link: imageLink1,
+  },
+  {
+    text: imageText2,
+    content: imageContent2,
+    link: imageLink2,
+  },
+  {
+    text: imageText3,
+    content: imageContent3,
+    link: imageLink3,
+  },
+  {
+    text: imageText4,
+    content: imageContent4,
+    link: imageLink4,
+  },
+].filter((image) => image.content.hasContent)));
+const size = computed(() => images.value.length);
+
+const windowWidth = ref(window.innerWidth);
+const onWidthChange = () => { windowWidth.value = window.innerWidth; };
+window.addEventListener('resize', onWidthChange);
+const smallWindow = computed(() => windowWidth.value <= 768);
+</script>
+
+<style lang="scss" scoped>
+@mixin image-grid {
+  display: grid;
+  grid-gap: 20px;
+  @media screen and (min-width: 900px) {
+    aspect-ratio: 1/0.55;
+  }
+}
+
+.image-grid__1 {
+  @include image-grid;
+
+  & {
+    grid-template-columns: [col1-start] 1fr [col1-end];
+    grid-template-rows: [row1-start] 1fr [row1-end];
+  }
+
+  @media screen and (max-width: 900px) {
+    aspect-ratio: 1;
+  }
+
+  .image-grid__content-1 {
+    grid-column: col1-start / col1-end;
+    grid-row: row1-start / row1-end;
+  }
+}
+
+.image-grid__2 {
+  @include image-grid;
+
+  & {
+    grid-template-columns: [col1-start] 11fr  [col2-start] 9fr [col2-end];
+    grid-template-rows: [row1-start] 4.5fr [row2-start] 2.75fr [row2-end];
+  }
+
+  @media screen and (max-width: 900px) {
+    aspect-ratio: 4.5/7.25;
+  }
+
+  .image-grid__content-1 {
+    @media screen and (min-width: 900px) {
+      grid-column: col1-start / col2-start;
+      grid-row: row1-start / row2-end;
+    }
+
+    @media screen and (max-width: 900px) {
+      grid-column: col1-start / col2-end;
+      grid-row: row1-start / row2-start;
+    }
+  }
+
+  .image-grid__content-2 {
+    @media screen and (min-width: 900px) {
+      grid-column: col2-start / col2-end;
+      grid-row: row1-start / row2-end;
+    }
+
+    @media screen and (max-width: 900px) {
+      grid-column: col1-start / col2-end;
+      grid-row: row2-start / row2-end;
+    }
+  }
+}
+
+.image-grid__3 {
+  @include image-grid;
+
+  & {
+    grid-template-columns: [col1-start] 11fr  [col2-start] 9fr [col2-end];
+    grid-template-rows: [row1-start] 4.5fr [row2-start] 0.5fr [row3-start] 2.25fr [row4-start] 2.75fr [row4-end];
+  }
+
+  @media screen and (max-width: 900px) {
+    aspect-ratio: 0.45;
+  }
+
+  .image-grid__content-1 {
+    @media screen and (min-width: 900px) {
+      grid-column: col1-start / col2-start;
+      grid-row: row1-start / row4-end;
+    }
+
+    @media screen and (max-width: 900px) {
+      grid-column: col1-start / col2-end;
+      grid-row: row1-start / row2-start;
+    }
+  }
+
+  .image-grid__content-2 {
+    @media screen and (min-width: 900px) {
+      grid-column: col2-start / col2-end;
+      grid-row: row1-start / row3-start;
+    }
+
+    @media screen and (max-width: 900px) {
+      grid-column: col1-start / col2-end;
+      grid-row: row2-start / row4-start;
+    }
+  }
+
+  .image-grid__content-3 {
+    @media screen and (min-width: 900px) {
+      grid-column: col2-start / col2-end;
+      grid-row: row3-start / row4-end;
+    }
+
+    @media screen and (max-width: 900px) {
+      grid-column: col1-start / col2-end;
+      grid-row: row4-start / row4-end;
+    }
+  }
+}
+
+.image-grid__4 {
+  @include image-grid;
+
+  @media screen and (min-width: 900px) {
+    grid-template-columns: [col1-start] 11fr [col2-start] 4.5fr [col3-start] 4.5fr [col3-end];
+    grid-template-rows: [row1-start] 1fr [row2-start] 1fr [row2-end];
+    aspect-ratio: 1/0.55;
+  }
+
+  @media screen and (max-width: 900px) {
+    grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col2-end];
+    grid-template-rows: [row1-start] 4.5fr [row2-start] 2.75fr [row3-start] 2.75fr [row3-end];
+    aspect-ratio: 0.45;
+  }
+
+  .image-grid__content-1 {
+    @media screen and (min-width: 900px) {
+      grid-column: col1-start / col2-start;
+      grid-row: row1-start / row2-end;
+    }
+
+    @media screen and (max-width: 900px) {
+      grid-column: col1-start / col2-end;
+      grid-row: row1-start / row2-start;
+    }
+  }
+
+  .image-grid__content-2 {
+    @media screen and (min-width: 900px) {
+      grid-column: col2-start / col3-end;
+      grid-row: row1-start / row2-start;
+    }
+
+    @media screen and (max-width: 900px) {
+      grid-column: col1-start / col2-end;
+      grid-row: row2-start / row3-start;
+    }
+  }
+
+  .image-grid__content-3 {
+    @media screen and (min-width: 900px) {
+      grid-column: col2-start / col3-start;
+      grid-row: row2-start / row2-end;
+    }
+
+    @media screen and (max-width: 900px) {
+      grid-column: col1-start / col2-start;
+      grid-row: row3-start / row3-end;
+    }
+  }
+
+  .image-grid__content-4 {
+    @media screen and (min-width: 900px) {
+      grid-column: col3-start / col3-end;
+      grid-row: row2-start / row2-end;
+    }
+
+    @media screen and (max-width: 900px) {
+      grid-column: col2-start / col2-end;
+      grid-row: row3-start / row3-end;
+    }
+  }
+}
+</style>

package/template/sections/example-section/component/title/Title.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <h1
+      v-if="showTitle"
+      :style="titleStyle"
+    >
+      {{ titleContent.value }}
+    </h1>
+    <p
+      v-if="showDescription"
+      class="title-section__description"
+      :style="descriptionStyle"
+    >
+      {{ descriptionContent.value }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useInputboxElementContent, useTextareaElementContent, useTextElementDesign } from '@lightspeed/crane';
+import { Content, Design } from '../../type.ts';
+
+const titleContent = useInputboxElementContent<Content>('section_title');
+const descriptionContent = useTextareaElementContent<Content>('section_description');
+const titleDesign = useTextElementDesign<Design>('section_title');
+const descriptionDesign = useTextElementDesign<Design>('section_description');
+
+const showTitle = computed(() => titleDesign.visible && titleContent.hasContent);
+const showDescription = computed(() => descriptionDesign.visible && descriptionContent.hasContent);
+
+const titleStyle = computed(() => ({
+  fontSize: `${titleDesign.size}px`,
+  fontFamily: titleDesign.font,
+  color: (titleDesign.color as Color).hex,
+  'font-style': titleDesign.italic ? 'italic' : 'normal',
+  'font-weight': titleDesign.bold ? 'bold' : 'normal',
+}));
+
+const descriptionStyle = computed(() => ({
+  fontSize: `${descriptionDesign.size}px`,
+  fontFamily: descriptionDesign.font,
+  color: (descriptionDesign.color as Color).hex,
+  'font-style': descriptionDesign.italic ? 'italic' : 'normal',
+  'font-weight': descriptionDesign.bold ? 'bold' : 'normal',
+}));
+</script>
+
+<style lang="scss" scoped>
+.title-section__description {
+  max-width: 80%;
+}
+</style>

package/template/sections/example-section/entity/color.ts

@@ -0,0 +1,4 @@
+export enum ColorType {
+    SOLID = 'solid',
+    GRADIENT = 'gradient',
+}

package/template/sections/example-section/server.ts

@@ -0,0 +1,5 @@
+import { createVueServerApp } from '@lightspeed/crane';
+import ExampleSection from './ExampleSection.vue';
+import { Content, Design } from './type.ts';
+
+export default createVueServerApp<Content, Design>(ExampleSection);

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

@@ -0,0 +1,68 @@
+export default {
+  section_title: {
+    type: 'INPUTBOX',
+    label: '$label.section_title.label',
+    placeholder: '$label.section_title.placeholder',
+  },
+  section_description: {
+    type: 'TEXTAREA',
+    label: '$label.section_description.label',
+    placeholder: '$label.section_description.placeholder',
+  },
+  image_content_1: {
+    type: 'IMAGE',
+    label: '$label.image_content_1.label',
+  },
+  image_text_1: {
+    type: 'TEXTAREA',
+    label: '$label.image_text_1.label',
+    placeholder: '$label.image_text.placeholder',
+  },
+  image_link_1: {
+    type: 'INPUTBOX',
+    label: '$label.image_link_1.label',
+    placeholder: '$label.image_link.placeholder',
+  },
+  image_content_2: {
+    type: 'IMAGE',
+    label: '$label.image_content_2.label',
+  },
+  image_text_2: {
+    type: 'TEXTAREA',
+    label: '$label.image_text_2.label',
+    placeholder: '$label.image_text.placeholder',
+  },
+  image_link_2: {
+    type: 'INPUTBOX',
+    label: '$label.image_link_2.label',
+    placeholder: '$label.image_link.placeholder',
+  },
+  image_content_3: {
+    type: 'IMAGE',
+    label: '$label.image_content_3.label',
+  },
+  image_text_3: {
+    type: 'TEXTAREA',
+    label: '$label.image_text_3.label',
+    placeholder: '$label.image_text.placeholder',
+  },
+  image_link_3: {
+    type: 'INPUTBOX',
+    label: '$label.image_link_3.label',
+    placeholder: '$label.image_link.placeholder',
+  },
+  image_content_4: {
+    type: 'IMAGE',
+    label: '$label.image_content_4.label',
+  },
+  image_text_4: {
+    type: 'TEXTAREA',
+    label: '$label.image_text_4.label',
+    placeholder: '$label.image_text.placeholder',
+  },
+  image_link_4: {
+    type: 'INPUTBOX',
+    label: '$label.image_link_4.label',
+    placeholder: '$label.image_link.placeholder',
+  },
+} as const;

package/template/sections/{block-example → example-section}/settings/design.ts

@@ -1,76 +1,72 @@
 export default {
-  inputbox: {
+  section_title: {
     type: 'TEXT',
-    label: '$label.inputbox.label',
+    label: '$label.section_title.label',
     colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
-    sizes: [12, 13, 14, 15, 16, 17, 18, 20],
+    sizes: [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60],
     defaults: {
       font: 'global.fontFamily.body',
-      size: 18,
+      size: 40,
       bold: true,
       italic: false,
-      color: '#333',
+      color: '#313131',
+      visible: true,
     },
   },
-  textarea: {
+  section_description: {
     type: 'TEXT',
-    label: '$label.textarea.label',
+    label: '$label.section_description.label',
     colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
     sizes: [12, 13, 14, 15, 16, 17, 18, 20],
     defaults: {
       font: 'global.fontFamily.body',
-      size: 16,
+      size: 18,
       bold: false,
       italic: true,
-      color: '#333',
+      color: '#313131',
+      visible: true,
     },
   },
-  button: {
-    type: 'BUTTON',
-    label: '$label.button.label',
+  image_text: {
+    type: 'TEXT',
+    label: '$label.image_text.label',
     colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
+    sizes: [12, 13, 14, 15, 16, 17, 18, 20],
     defaults: {
       font: 'global.fontFamily.body',
-      size: 'MEDIUM',
-      appearance: 'OUTLINE',
-      shape: 'PILL',
+      size: 16,
+      bold: false,
+      italic: true,
       color: '#333',
+      visible: true,
     },
   },
-  image: {
+  image_content: {
     type: 'IMAGE',
-    label: '$label.image.label',
+    label: '$label.image_content.label',
     colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
     defaults: {
       overlay: 'COLOR',
       color: '#333',
     },
   },
-  toggle: {
-    type: 'TOGGLE',
-    label: '$label.toggle.label',
-    description: '$label.toggle.description',
-    defaults: {
-      enabled: true,
-    },
-  },
-  selectbox: {
+  image_text_position: {
     type: 'SELECTBOX',
-    label: '$label.selectbox.label',
-    placeholder: '$label.selectbox.placeholder',
-    description: '$label.selectbox.description',
+    label: '$label.image_text_position.label',
+    placeholder: '$label.image_text_position.placeholder',
+    description: '$label.image_text_position.description',
     options: [
       {
-        value: 'one',
-        label: '$label.selectbox.one.label',
+        value: 'on',
+        label: '$label.image_text_position.on.label',
       },
       {
-        value: 'two',
-        label: '$label.selectbox.two.label',
+        value: 'under',
+        label: '$label.image_text_position.under.label',
       },
     ],
     defaults: {
-      value: 'two',
+      value: 'on',
     },
   },
   background: {
@@ -82,13 +78,4 @@ export default {
       color: 'global.color.background',
     },
   },
-  color: {
-    type: 'COLOR_PICKER',
-    label: '$label.colorpicker.label',
-    description: '$label.colorpicker.description',
-    colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
-    defaults: {
-      color: 'global.color.background',
-    },
-  },
 } as const;

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

@@ -0,0 +1,59 @@
+export default {
+  en: {
+    '$label.section_title.label': 'Main title',
+    '$label.section_title.placeholder': 'This will be the main title for this section',
+    '$label.section_description.label': 'Long description',
+    '$label.section_description.placeholder': 'This description will be displayed below the title',
+    '$label.image_text.label': 'Image Caption',
+    '$label.image_text_1.label': 'Image 1 caption',
+    '$label.image_text_2.label': 'Image 2 caption',
+    '$label.image_text_3.label': 'Image 3 caption',
+    '$label.image_text_4.label': 'Image 4 caption',
+    '$label.image_text.placeholder': 'This caption will be displayed on or below the image',
+    '$label.image_content.label': 'Image Content',
+    '$label.image_content_1.label': 'Image 1',
+    '$label.image_content_2.label': 'Image 2',
+    '$label.image_content_3.label': 'Image 3',
+    '$label.image_content_4.label': 'Image 4',
+    '$label.image_link_1.label': 'Image 1 link',
+    '$label.image_link_2.label': 'Image 2 link',
+    '$label.image_link_3.label': 'Image 3 link',
+    '$label.image_link_4.label': 'Image 4 link',
+    '$label.image_link.placeholder': 'Enter an optional URL for the image',
+    '$label.image_text_position.label': 'Image caption position',
+    '$label.image_text_position.placeholder': 'Choose',
+    '$label.image_text_position.description': 'Select the position of the image caption',
+    '$label.image_text_position.on.label': 'On the image',
+    '$label.image_text_position.under.label': 'Below the image',
+    '$label.background.label': 'Background',
+  },
+
+  nl: {
+    '$label.section_title.label': 'Hoofdtitel',
+    '$label.section_title.placeholder': 'Dit wordt de hoofdtitel voor deze sectie',
+    '$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 1',
+    '$label.image_text_2.label': 'Bijschrift afbeelding 2',
+    '$label.image_text_3.label': 'Bijschrift afbeelding 3',
+    '$label.image_text_4.label': 'Bijschrift afbeelding 4',
+    '$label.image_text.placeholder': 'Dit bijschrift wordt op of onder de afbeelding weergegeven',
+    '$label.image_content.label': 'Afbeeldingsinhoud',
+    '$label.image_content_1.label': 'Afbeelding 1',
+    '$label.image_content_2.label': 'Afbeelding 2',
+    '$label.image_content_3.label': 'Afbeelding 3',
+    '$label.image_content_4.label': 'Afbeelding 4',
+    '$label.image_link_1.label': 'Afbeelding 1 link',
+    '$label.image_link_2.label': 'Afbeelding 2 link',
+    '$label.image_link_3.label': 'Afbeelding 3 link',
+    '$label.image_link_4.label': 'Afbeelding 4 link',
+    '$label.image_link.placeholder': 'Voer een optionele URL in voor de afbeelding',
+    '$label.image_text_position.label': 'Positie van bijschrift afbeelding',
+    '$label.image_text_position.placeholder': 'Kies',
+    '$label.image_text_position.description': 'Selecteer de positie van het afbeeldingsbijschrift',
+    '$label.image_text_position.on.label': 'Op de afbeelding',
+    '$label.image_text_position.under.label': 'Onder de afbeelding',
+    '$label.background.label': 'Achtergrond',
+  },
+} as const;