Merge branch 'develop' into template-page

builder/builder/workspace/frappe_builder/frappe_builder.json

@@ -0,0 +1,44 @@
+{
+ "charts": [],
+ "content": "[{\"id\":\"_-b0CpVZje\",\"type\":\"shortcut\",\"data\":{\"shortcut_name\":\"Open <strong>Frappe Builder</strong>\",\"col\":4}}]",
+ "creation": "2024-03-28 15:59:44.392585",
+ "custom_blocks": [],
+ "docstatus": 0,
+ "doctype": "Workspace",
+ "for_user": "",
+ "hide_custom": 0,
+ "icon": "getting-started",
+ "idx": 0,
+ "indicator_color": "green",
+ "is_hidden": 0,
+ "label": "Frappe Builder",
+ "links": [],
+ "modified": "2024-03-28 16:06:49.469091",
+ "modified_by": "Administrator",
+ "module": "Builder",
+ "name": "Frappe Builder",
+ "number_cards": [],
+ "owner": "Administrator",
+ "parent_page": "",
+ "public": 1,
+ "quick_lists": [],
+ "roles": [
+  {
+   "role": "System Manager"
+  },
+  {
+   "role": "Website Manager"
+  }
+ ],
+ "sequence_id": 1.0,
+ "shortcuts": [
+  {
+   "color": "Grey",
+   "doc_view": "List",
+   "label": "Open <strong>Frappe Builder</strong>",
+   "type": "URL",
+   "url": "/builder"
+  }
+ ],
+ "title": "Frappe Builder"
+}

frontend/cypress.config.js

@@ -1,4 +1,4 @@
-const { defineConfig } = require("cypress");
+import { defineConfig } from "cypress";
 
 module.exports = defineConfig({
   projectId: "jvejd7",

frontend/package.json

@@ -28,7 +28,7 @@
     "pinia": "^2.0.28",
     "postcss": "^8.4.5",
     "tailwindcss": "^3.3.2",
-    "vite": "3",
+    "vite": "^5.2.6",
     "vue": "^3.2.25",
     "vue-router": "^4.0.12",
     "vue-sonner": "^1.0.2",

frontend/src/App.vue

@@ -5,15 +5,13 @@
 				<component :is="Component" />
 			</keep-alive>
 		</router-view>
-		<Toasts />
 		<UseDark></UseDark>
 		<Toaster :theme="isDark ? 'dark' : 'light'" richColors />
 	</div>
 </template>
 <script setup lang="ts">
 import { UseDark } from "@vueuse/components";
 import { useDark } from "@vueuse/core";
-import { Toasts } from "frappe-ui";
 import { Toaster } from "vue-sonner";
 
 const isDark = useDark();

frontend/src/components/BlockContextMenu.vue

@@ -45,6 +45,7 @@ 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";
@@ -104,7 +105,7 @@ const createComponentHandler = ({ close }: { close: () => void }) => {
 		.submit({
 			block: blockCopy,
 			component_name: componentProperties.value.componentName,
-			for_web_page: componentProperties.value.isGlobalComponent ? null : store.getActivePage()?.name,
+			for_web_page: componentProperties.value.isGlobalComponent ? null : store.selectedPage,
 		})
 		.then(async (data: BuilderComponent) => {
 			await webComponent.list.promise;

frontend/src/components/BlockHTML.vue

@@ -1,5 +1,5 @@
 <template>
-	<div ref="component" class="relative" v-html="html"></div>
+	<div ref="component" class="!relative" v-html="html"></div>
 </template>
 <script setup lang="ts">
 import Block from "@/utils/block";

frontend/src/components/BlockProperties.vue

@@ -156,6 +156,7 @@ const typographySectionProperties = [
 				label: "Size",
 				modelValue: blockController.getStyle("fontSize"),
 				enableSlider: true,
+				minValue: 1,
 			};
 		},
 		searchKeyWords: "Font, Size, FontSize",
@@ -310,6 +311,8 @@ const styleSectionProperties = [
 				label: "Border Width",
 				modelValue: blockController.getStyle("borderWidth"),
 				enableSlider: true,
+				unitOptions: ["px", "%", "em", "rem"],
+				minValue: 0,
 			};
 		},
 		searchKeyWords: "Border, Width, BorderWidth, Border Width",

frontend/src/components/BuilderCanvas.vue

@@ -2,6 +2,11 @@
 	<div ref="canvasContainer" @click="handleClick">
 		<slot name="header"></slot>
 		<div class="overlay absolute" id="overlay" ref="overlay" />
+		<Transition name="fade">
+			<div
+				class="absolute bottom-0 left-0 right-0 top-0 z-50 w-full bg-gray-200 p-10 dark:bg-zinc-800"
+				v-show="store.settingPage"></div>
+		</Transition>
 		<BlockSnapGuides></BlockSnapGuides>
 		<div
 			v-if="isOverDropZone"

frontend/src/components/BuilderComponents.vue

@@ -56,7 +56,7 @@ const filter = ref("");
 
 const components = computed(() =>
 	(webComponent.data || []).filter((d: BuilderComponent) => {
-		if (d.for_web_page && d.for_web_page !== store.getActivePage?.name) {
+		if (d.for_web_page && d.for_web_page !== store.selectedPage) {
 			return false;
 		}
 		if (filter.value) {

frontend/src/components/BuilderRightPanel.vue

@@ -29,12 +29,14 @@
 			class="p-4"
 			v-show="store.rightPanelActiveTab === 'Script'"
 			:key="store.selectedPage"
-			v-if="store.selectedPage && store.getActivePage()" />
+			v-if="store.selectedPage && store.activePage"
+			:page="store.activePage" />
 		<PageSettings
 			class="p-4"
 			v-show="store.rightPanelActiveTab === 'Settings'"
 			:key="store.selectedPage"
-			v-if="store.selectedPage && store.getActivePage()" />
+			v-if="store.selectedPage && store.activePage"
+			:page="store.activePage" />
 	</div>
 </template>
 <script setup lang="ts">

frontend/src/components/InlineInput.vue

@@ -14,8 +14,9 @@
 			:value="modelValue"
 			:options="inputOptions"
 			v-if="type != 'autocomplete'"
-			@change="handleChange"
 			@mousedown="handleMouseDown"
+			@change="handleChange"
+			@keydown="handleKeyDown"
 			:inputClass="type == 'checkbox' ? ' ml-2 !w-4' : 'pr-6'"
 			class="rounded-md text-sm text-gray-800 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:focus:bg-zinc-700"
 			:class="{
@@ -67,7 +68,7 @@ const props = defineProps({
 	},
 	minValue: {
 		type: Number,
-		default: null,
+		default: 0,
 	},
 	maxValue: {
 		type: Number,
@@ -113,26 +114,12 @@ const handleMouseDown = (e: MouseEvent) => {
 	if (!props.enableSlider) {
 		return;
 	}
-	const value = (props.modelValue as string) || "";
-
-	let [_, number, unit] = value.match(/([0-9]+)([a-z%]*)/) || ["", "", ""];
-
-	if (!unit && props.unitOptions.length && number) {
-		unit = props.unitOptions[0];
-	}
-
+	const number = ((props.modelValue || "") as string).match(/([0-9]+)/)?.[0] || "0";
 	const startY = e.clientY;
 	const startValue = Number(number);
 	const handleMouseMove = (e: MouseEvent) => {
 		const diff = startY - e.clientY;
-		let newValue = startValue + diff;
-		if (isNumber(props.minValue) && newValue < props.minValue) {
-			newValue = props.minValue;
-		}
-		if (isNumber(props.maxValue) && newValue > props.maxValue) {
-			newValue = props.maxValue;
-		}
-		handleChange(newValue + "" + unit);
+		incrementOrDecrement(diff, startValue);
 	};
 	const handleMouseUp = () => {
 		window.removeEventListener("mousemove", handleMouseMove);
@@ -141,5 +128,29 @@ const handleMouseDown = (e: MouseEvent) => {
 	window.addEventListener("mouseup", handleMouseUp, { once: true });
 };
 
+const handleKeyDown = (e: KeyboardEvent) => {
+	if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+		const step = e.key === "ArrowUp" ? 1 : -1;
+		incrementOrDecrement(step);
+		e.preventDefault();
+	}
+};
+
+const incrementOrDecrement = (step: number, initialValue: null | number = null) => {
+	const value = (props.modelValue as string) || "";
+	let [_, number, unit] = value.match(/([0-9]+)([a-z%]*)/) || ["", "", ""];
+	if (!unit && props.unitOptions.length && !isNaN(Number(number))) {
+		unit = props.unitOptions[0];
+	}
+	let newValue = (initialValue != null ? Number(initialValue) : Number(number)) + step;
+	if (isNumber(props.minValue) && newValue <= props.minValue) {
+		newValue = props.minValue;
+	}
+	if (isNumber(props.maxValue) && newValue >= props.maxValue) {
+		newValue = props.maxValue;
+	}
+	handleChange(newValue + "" + unit);
+};
+
 const clearValue = () => emit("update:modelValue", null);
 </script>

frontend/src/components/PaddingHandler.vue

@@ -114,7 +114,7 @@ import { computed, inject, ref, watchEffect } from "vue";
 import Block from "../utils/block";
 import { getNumberFromPx } from "../utils/helpers";
 
-import { toast } from "frappe-ui";
+import { toast } from "vue-sonner";
 const canvasProps = inject("canvasProps") as CanvasProps;
 
 const props = defineProps({
@@ -242,7 +242,7 @@ const messageShown = ref(false);
 const handlePadding = (ev: MouseEvent, position: Position) => {
 	if (props.disableHandlers) return;
 	// if (!messageShown.value && !(ev.shiftKey || ev.altKey)) {
-	// 	makeToast();
+	// 	showToast();
 	// 	messageShown.value = true;
 	// }
 	updating.value = true;
@@ -312,10 +312,6 @@ const handlePadding = (ev: MouseEvent, position: Position) => {
 	);
 };
 
-let makeToast = () =>
-	toast({
-		text: 'Press "shift" key to apply padding to all sides and "alt" key to apply padding on either sides.',
-		timeout: 6,
-		position: "bottom-left",
-	});
+let showToast = () =>
+	toast('Press "shift" key to apply padding to all sides and "alt" key to apply padding on either sides.');
 </script>

frontend/src/components/PageScript.vue

@@ -23,7 +23,7 @@
 			v-model="showDialog">
 			<template #body-content>
 				<div v-if="currentScriptEditor == 'client'">
-					<PageClientScriptManager :page="store.getActivePage()"></PageClientScriptManager>
+					<PageClientScriptManager :page="(store.activePage as BuilderPage)"></PageClientScriptManager>
 				</div>
 				<div v-else>
 					<CodeEditor
@@ -53,24 +53,24 @@
 import { webPages } from "@/data/webPage";
 import useStore from "@/store";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
-import { onMounted, ref } from "vue";
+import { Dialog } from "frappe-ui";
+import { ref } from "vue";
 import CodeEditor from "./CodeEditor.vue";
 import PageClientScriptManager from "./PageClientScriptManager.vue";
 const store = useStore();
 const showDialog = ref(false);
-const page = ref<BuilderPage>(store.getActivePage());
 
-onMounted(() => {
-	page.value = store.getActivePage();
-});
+const props = defineProps<{
+	page: BuilderPage;
+}>();
 
 const currentScriptEditor = ref<"client" | "data">("client");
 
 const savePageDataScript = () => {
 	webPages.setValue
 		.submit({
-			name: page.value.name,
-			page_data_script: page.value.page_data_script,
+			name: props.page.name,
+			page_data_script: props.page.page_data_script,
 		})
 		.then(() => {
 			showDialog.value = false;

frontend/src/components/PageSettings.vue

@@ -6,23 +6,23 @@
 				label="Title"
 				type="text"
 				class="w-full text-sm [&>label]:w-[60%] [&>label]:min-w-[180px]"
-				:modelValue="pageData.page_title"
-				@update:modelValue="(val) => webPages.setValue.submit({ name: pageData.name, page_title: val })" />
+				:modelValue="page.page_title"
+				@update:modelValue="(val) => webPages.setValue.submit({ name: page.name, page_title: val })" />
 			<InlineInput
 				type="text"
 				class="w-full text-sm [&>label]:w-[60%] [&>label]:min-w-[180px]"
 				label="Route"
-				:modelValue="pageData.route"
-				@update:modelValue="(val) => webPages.setValue.submit({ name: pageData.name, route: val })" />
+				:modelValue="page.route"
+				@update:modelValue="(val) => webPages.setValue.submit({ name: page.name, route: val })" />
 			<!-- is Dynamic Route -->
 			<InlineInput
 				label="Dynamic Route?"
 				class="w-full text-sm"
 				type="checkbox"
-				:modelValue="pageData.dynamic_route"
-				@update:modelValue="(val) => webPages.setValue.submit({ name: pageData.name, dynamic_route: val })" />
+				:modelValue="page.dynamic_route"
+				@update:modelValue="(val) => webPages.setValue.submit({ name: page.name, dynamic_route: val })" />
 			<!-- Dynamic Route Variables -->
-			<div v-if="pageData.dynamic_route" class="mb-3 mt-3 w-full">
+			<div v-if="page.dynamic_route" class="mb-3 mt-3 w-full">
 				<h3 class="text-xs font-bold uppercase text-gray-600">Route Values</h3>
 				<div class="mt-5 flex flex-row flex-wrap gap-5">
 					<InlineInput
@@ -37,20 +37,20 @@
 			</div>
 			<div class="flex w-full flex-col gap-2">
 				<Button
-					v-if="pageData.published"
-					@click="() => store.openPageInBrowser()"
+					v-if="page.published"
+					@click="() => store.openPageInBrowser(page)"
 					class="block text-base dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700">
 					View Published Page
 				</Button>
 				<Button
-					v-if="pageData.published"
+					v-if="page.published"
 					@click="() => unpublishPage()"
 					class="block text-base dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700">
 					Unpublish Page
 				</Button>
-				<hr class="my-2 dark:border-zinc-800" v-if="pageData.published" />
+				<hr class="my-2 dark:border-zinc-800" v-if="page.published" />
 				<Button
-					@click="() => store.openInDesk(pageData)"
+					@click="() => store.openInDesk(page)"
 					class="block text-base dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700">
 					Open in Desk
 				</Button>
@@ -66,25 +66,30 @@
 <script setup lang="ts">
 import { webPages } from "@/data/webPage";
 import useStore from "@/store";
+import { BuilderPage } from "@/types/Builder/BuilderPage";
 import { computed } from "vue";
 import { toast } from "vue-sonner";
 import InlineInput from "./InlineInput.vue";
 
 const store = useStore();
-const pageData = computed(() => store.getActivePage());
+
+const props = defineProps<{
+	page: BuilderPage;
+}>();
+
 const dynamicVariables = computed(() => {
-	return (pageData.value.route?.match(/<\w+>/g) || []).map((match) => match.slice(1, -1));
+	return (props.page.route?.match(/<\w+>/g) || []).map((match) => match.slice(1, -1));
 });
 
 const unpublishPage = () => {
 	webPages.setValue
 		.submit({
-			name: pageData.value.name,
+			name: props.page.name,
 			published: false,
 		})
 		.then(() => {
 			toast.success("Page unpublished");
-			store.setPageData();
+			store.setPage(props.page.name);
 		});
 };
 </script>