feat: Init template system

frontend/src/components/BlockContextMenu.vue

@@ -45,7 +45,6 @@ import blockController from "@/utils/blockController";
 import getBlockTemplate from "@/utils/blockTemplate";
 import { confirm, detachBlockFromComponent, getBlockCopy } from "@/utils/helpers";
 import { vOnClickOutside } from "@vueuse/components";
-import { Dialog } from "frappe-ui";
 import { nextTick, ref } from "vue";
 import { toast } from "vue-sonner";
 import ContextMenu from "./ContextMenu.vue";

frontend/src/components/BlockEditor.vue

@@ -77,7 +77,6 @@
 <script setup lang="ts">
 import Block from "@/utils/block";
 import { addPxToNumber } from "@/utils/helpers";
-import { Dialog } from "frappe-ui";
 import { Ref, computed, inject, nextTick, onMounted, ref, watch, watchEffect } from "vue";
 
 import blockController from "@/utils/blockController";
@@ -146,7 +145,10 @@ watchEffect(() => {
 	parentBlock?.getStyle("justifyContent");
 	parentBlock?.getStyle("alignItems");
 	parentBlock?.getStyle("flexDirection");
-	parentBlock?.getStyle("padding");
+	parentBlock?.getStyle("paddingTop");
+	parentBlock?.getStyle("paddingBottom");
+	parentBlock?.getStyle("paddingLeft");
+	parentBlock?.getStyle("paddingRight");
 	parentBlock?.getStyle("margin");
 	store.builderLayout.leftPanelWidth;
 	store.builderLayout.rightPanelWidth;

frontend/src/components/BuilderToolbar.vue

@@ -77,7 +77,7 @@
 </template>
 <script setup lang="ts">
 import { UseDark } from "@vueuse/components";
-import { Dialog, Tooltip } from "frappe-ui";
+import { Tooltip } from "frappe-ui";
 import { ref } from "vue";
 import useStore from "../store";
 

frontend/src/components/PageScript.vue

@@ -53,7 +53,6 @@
 import { webPages } from "@/data/webPage";
 import useStore from "@/store";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
-import { Dialog } from "frappe-ui";
 import { onMounted, ref } from "vue";
 import CodeEditor from "./CodeEditor.vue";
 import PageClientScriptManager from "./PageClientScriptManager.vue";

frontend/src/main.ts

@@ -1,5 +1,14 @@
 import App from "@/App.vue";
-import { Button, FeatherIcon, FormControl, FrappeUI, Input, frappeRequest, setConfig } from "frappe-ui";
+import {
+	Button,
+	Dialog,
+	FeatherIcon,
+	FormControl,
+	FrappeUI,
+	Input,
+	frappeRequest,
+	setConfig,
+} from "frappe-ui";
 import { createPinia } from "pinia";
 import { createApp } from "vue";
 import "./index.css";
@@ -19,6 +28,7 @@ app.use(pinia);
 app.component("Button", Button);
 app.component("Input", Input);
 app.component("FormControl", FormControl);
+app.component("Dialog", Dialog);
 
 app.component("FeatherIcon", FeatherIcon);
 app.mount("#app");

frontend/src/pages/PageBuilderLanding.vue

@@ -52,9 +52,7 @@
 						{ label: 'Published', value: 'published' },
 						{ label: 'Unpublished', value: 'unpublished' },
 					]" />
-				<router-link :to="{ name: 'builder', params: { pageId: 'new' } }">
-					<Button variant="solid" icon-left="plus">New</Button>
-				</router-link>
+				<Button variant="solid" icon-left="plus" @click="() => (showDialog = true)">New</Button>
 			</div>
 		</div>
 		<div class="flex flex-wrap gap-6">
@@ -170,11 +168,26 @@
 				</div>
 			</router-link>
 		</div>
+		<Dialog
+			:options="{
+				title: 'Select Template',
+				size: '6xl',
+			}"
+			v-model="showDialog">
+			<template #body-content>
+				<div
+					class="flex h-12 w-48 cursor-pointer items-center rounded-sm bg-gray-50 p-4 align-middle dark:bg-zinc-900"
+					@click="() => loadPage(null)">
+					Blank
+				</div>
+			</template>
+		</Dialog>
 	</section>
 </template>
 <script setup lang="ts">
 import CrossIcon from "@/components/Icons/Cross.vue";
 import { webPages } from "@/data/webPage";
+import router from "@/router";
 import useStore from "@/store";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
 import { confirm } from "@/utils/helpers";
@@ -188,6 +201,7 @@ const displayType = useStorage('displayType', 'grid');
 const store = useStore();
 const filter = ref("");
 const typeFilter = ref("");
+const showDialog = ref(false);
 
 const pages = computed(() =>
 	(webPages.data || []).filter((page: BuilderPage) => {
@@ -225,6 +239,16 @@ const duplicatePage = async (page: BuilderPage) => {
 	await webPages.insert.submit(pageCopy);
 };
 
+// <router-link :to="{ name: 'builder', params: { pageId: 'new' } }">
+// </router-link>
+
+const loadPage = (template: string | null) => {
+	if (!template) {
+		router.push({ name: "builder", params: { pageId: "new" } });
+		showDialog.value = false;
+	}
+};
+
 onActivated(() => {
 	webPages.fetch();
 });