@dcodegroup-au/page-builder 0.0.1

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

@@ -0,0 +1,39 @@
+<template>
+  <div class="rounded-[48px]">
+    <div v-for="(component, index) in section.components">
+      <component
+          :is="currentComponent(component)"
+          :key="index"
+          :component="component"
+      ></component>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, markRaw } from "vue";
+import VSliderPresenter from "@/components/presenters/components/VSliderPresenter.vue";
+import VLinkPresenter from "@/components/presenters/components/VLinkPresenter.vue";
+
+const props = defineProps({
+  section: {
+    required: true,
+    type: Object,
+  },
+});
+
+const section = ref(props.section);
+const componentMaps = ref({
+  sliders: markRaw(VSliderPresenter),
+  links: markRaw(VLinkPresenter),
+});
+
+const currentComponent = (component) => {
+  if (!component?.type) {
+    return '';
+  }
+
+  return componentMaps.value[component?.type];
+};
+
+</script>

package/tailwind.config.js

@@ -0,0 +1,52 @@
+module.exports = {
+  content: [
+    './src/**/*.{vue,js,ts,jsx,tsx}', // Include all relevant files
+    './src/**/**/*.{vue,js,ts,jsx,tsx}', // Include all relevant files
+    './src/**/**/**/*.{vue,js,ts,jsx,tsx}', // Include all relevant files
+  ],
+  theme: {
+    extend: {
+      colors: {
+        navy: {
+          800: '#203E5A',
+          600: '#3E5F7E',
+          400: '#69829B',
+          50: '#DFE5EC',
+        },
+        brand: {
+          25: '#F5EFF3',
+          50: '#EDDEE7',
+          100: '#E6CBDB',
+          200: '#D9B0C8',
+          300: '#C78AAD',
+          400: '#BA6E9A',
+          500: '#A94981',
+          600: '#9E3371',
+          700: '#931C61',
+          800: '#76164E',
+          900: '#58113A',
+          950: '#3B0B27',
+        },
+        success: {
+          50: 'rgba(236, 253, 243, 1)',
+          200: 'rgba(171, 239, 198, 1)',
+          700: 'rgba(6, 118, 71, 1)',
+        },
+        error: {
+          50: '#FEF3F2',
+          100: '#FEE4E2',
+          500: 'rgb(206, 87, 78)',
+          600: '#D92D20',
+          700: 'rgba(180, 35, 24, 1)',
+        },
+        warning: {
+          50: 'rgba(255, 250, 235, 1)',
+          200: 'rgba(254, 223, 137, 1)',
+          500: 'rgba(247, 144, 9, 1)',
+          700: 'rgba(181, 71, 8, 1)',
+        },
+      },
+    },
+  },
+  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
+};

package/vite.config.js

@@ -0,0 +1,40 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import svgLoader from "vite-svg-loader";
+import path from 'path';
+
+export default defineConfig({
+  plugins: [vue(), svgLoader()],
+  publicDir: "public",
+  css: {
+    postcss: {
+      plugins: [
+        require('tailwindcss')('./tailwind.config.js'), // Tailwind CSS configuration
+        require('autoprefixer'),
+        require('postcss-nested')
+      ],
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'), // Map '@' to the 'src' directory
+    },
+  },
+  build: {
+    outDir: 'dist',
+    lib: {
+      entry: 'src/components/index.js', // Entry file
+      name: 'PageBuilder', // Global variable name for UMD
+      fileName: (format) => `page-builder.${format}.js`, // Output file name
+    },
+    rollupOptions: {
+      // Externalize dependencies
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+});