@dcodegroup-au/page-builder 0.0.2 → 0.0.4

package/src/components/helpers/pageBuilderFactory.js

@@ -1,22 +1,23 @@
 export function createSlide(overrides = {}) {
   return {
     title: "New slide",
+    description: "New description",
     public: false,
     featured_image: "",
     primary_button: {
       show: false,
       label: "",
       type: "site-content",
-      url: "",
-      open_in_new_tab: false,
+      link_to: '',
+      is_new_tab: false,
       ...(overrides.primary_button || {}),
     },
     secondary_button: {
       show: false,
       label: "",
       type: "site-content",
-      url: "",
-      open_in_new_tab: false,
+      link_to: '',
+      is_new_tab: false,
       ...(overrides.secondary_button || {}),
     },
     ...overrides,
@@ -25,9 +26,9 @@ export function createSlide(overrides = {}) {
 
 export function createLink(overrides = {}) {
   return {
-    label: "New link",
-    url: "",
-    open_in_new_tab: false,
+    title: "New link",
+    link_to: "",
+    open_in_new_tab: true,
     type: "site-content",
     ...(overrides || {}),
   };

package/src/components/presenters/components/VSliderPresenter.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flex h-[872px] w-full bg-navy-800 relative rounded-[48px] z-10">
-    <Carousel :items-to-show="1" v-model="currentSlide" class="carousel" autoplay="5000" :wrap-around="true">
+    <Carousel :items-to-show="1" v-model="currentSlide" class="carousel w-full" :autoplay="5000" :wrap-around="true">
       <Slide v-for="(slide, index) in component.data" :key="index">
-        <div class="lg:p-8 p-4 flex sm:w-[95%] relative">
+        <div class="lg:p-8 p-4 flex relative">
           <div class="lg:w-1/2 lg:pl-8 lg:pr-16 pl-4 pr-8 flex flex-col lg:mt-[218px] mt-[100px] absolute top-0 left-5 lg:relative">
             <div class="gap-2 flex z-10 mb-4">
               <a v-if="component.data.length > 1"
@@ -11,7 +11,7 @@
               ></a>
             </div>
             <h3 class="lg:text-[48px] text-[40px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]">{{ slide?.title }}</h3>
-            <p class="text-lg font-normal text-navy-50">{{ slide?.description }}</p>
+            <p class="text-lg font-normal text-navy-50" v-html="slide?.description"></p>
             <div class="flex gap-3 mt-8 flex-col lg:flex-row">
               <a class="text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60"
                  :href="slide.secondary_button.link_to"
@@ -32,7 +32,7 @@
               v-if="slide.featured_image"
               :src="slide.featured_image"
               alt="Slide Image"
-              class="rounded-[40px] h-[674px] lg:w-1/2 w-full object-cover"/>
+              class="rounded-[40px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover"/>
         </div>
       </Slide>
     </Carousel>

package/src/components/presenters/modules/HeroHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-[48px]">
+  <div class="rounded-[48px] max-w-[1392px] 1xl:max-w-[1824px] mx-auto w-full">
     <div v-for="(component, index) in section.components">
       <component
           :is="currentComponent(component)"

package/tailwind.config.js

@@ -6,6 +6,15 @@ module.exports = {
   ],
   theme: {
     extend: {
+      screens: {
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px',
+        '1xl': '1440px',
+        '2xl': '1536px',
+        '3xl': '1920px',
+      },
       colors: {
         navy: {
           800: '#203E5A',

package/example/src/components/HelloWorld.vue

@@ -1,43 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>