fix: Auto close dialogs on route change

frontend/src/components/AlertDialog.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Dialog } from "frappe-ui";
+import Dialog from "@/components/Controls/Dialog.vue";
 import { onMounted, ref } from "vue";
 
 const props = defineProps(["title", "message", "onClick"]);

frontend/src/components/Controls/Dialog.vue

@@ -0,0 +1,29 @@
+<template>
+	<Dialog v-bind="attrs" ref="dialogRef" @update:modelValue="emit('update:modelValue', $event)">
+		<template v-for="(_, name) in $slots" :key="name" v-slot:[name]="slotData">
+			<slot :name="name" v-bind="slotData"></slot>
+		</template>
+	</Dialog>
+</template>
+
+<script setup lang="ts">
+import { Dialog } from "frappe-ui";
+import { ref, useAttrs, watch } from "vue";
+import { useRoute } from "vue-router";
+
+const attrs = useAttrs();
+const emit = defineEmits(["update:modelValue", "close"]);
+
+const route = useRoute();
+const dialogRef = ref();
+
+// close dialog on route change
+watch(
+	() => route.fullPath,
+	() => {
+		if (attrs.modelValue) {
+			emit("update:modelValue", false);
+		}
+	},
+);
+</script>

frontend/src/components/Modals/NewComponent.vue

@@ -25,14 +25,14 @@
 	</Dialog>
 </template>
 <script setup lang="ts">
+import Dialog from "@/components/Controls/Dialog.vue";
 import webComponent from "@/data/webComponent";
 import useStore from "@/store";
 import { posthog } from "@/telemetry";
 import { BuilderComponent } from "@/types/Builder/BuilderComponent";
 import Block from "@/utils/block";
 import { getBlockCopy, getBlockString } from "@/utils/helpers";
 import useComponentStore from "@/utils/useComponentStore";
-import { Dialog } from "frappe-ui";
 import { ref } from "vue";
 
 const store = useStore();

frontend/src/components/Modals/NewFolder.vue

@@ -24,9 +24,9 @@
 	</Dialog>
 </template>
 <script setup lang="ts">
+import Dialog from "@/components/Controls/Dialog.vue";
 import builderProjectFolder from "@/data/builderProjectFolder";
 import { useVModel } from "@vueuse/core";
-import { Dialog } from "frappe-ui";
 import { ref } from "vue";
 
 const folderName = ref("");

frontend/src/components/Modals/SelectFolder.vue

@@ -30,10 +30,10 @@
 	</Dialog>
 </template>
 <script setup lang="ts">
+import Dialog from "@/components/Controls/Dialog.vue";
 import FolderIcon from "@/components/Icons/Folder.vue";
 import builderProjectFolder from "@/data/builderProjectFolder";
 import { useVModel } from "@vueuse/core";
-import { Dialog } from "frappe-ui";
 
 const props = defineProps<{
 	currentFolder: string;

frontend/src/components/PageScript.vue

@@ -37,11 +37,11 @@
 	</div>
 </template>
 <script lang="ts" setup>
+import Dialog from "@/components/Controls/Dialog.vue";
 import { webPages } from "@/data/webPage";
 import useStore from "@/store";
 import { posthog } from "@/telemetry";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
-import { Dialog } from "frappe-ui";
 import { defineComponent, ref } from "vue";
 import { toast } from "vue-sonner";
 import CodeEditor from "./Controls/CodeEditor.vue";

frontend/src/pages/PageBuilder.vue

@@ -99,6 +99,7 @@ import BuilderCanvas from "@/components/BuilderCanvas.vue";
 import BuilderLeftPanel from "@/components/BuilderLeftPanel.vue";
 import BuilderRightPanel from "@/components/BuilderRightPanel.vue";
 import BuilderToolbar from "@/components/BuilderToolbar.vue";
+import Dialog from "@/components/Controls/Dialog.vue";
 import { webPages } from "@/data/webPage";
 import { sessionUser } from "@/router";
 import useStore from "@/store";
@@ -114,7 +115,6 @@ import {
 	useDebounceFn,
 	useMagicKeys,
 } from "@vueuse/core";
-import { Dialog } from "frappe-ui";
 import { computed, onActivated, onDeactivated, provide, ref, toRef, watch, watchEffect } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import CodeEditor from "../components/Controls/CodeEditor.vue";