feat!: upgrade frappe-ui (v1 staging)

frontend/components.d.ts

@@ -1,8 +1,11 @@
 /* eslint-disable */
 // @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
+
 export {}
 
 /* prettier-ignore */
@@ -62,11 +65,9 @@ declare module 'vue' {
     InputLabel: typeof import('./src/components/InputLabel.vue')['default']
     ItemActions: typeof import('./src/components/ItemActions.vue')['default']
     ListBox: typeof import('./src/components/ListBox.vue')['default']
-    LucideX: typeof import('~icons/lucide/x')['default']
     MarginHandler: typeof import('./src/components/MarginHandler.vue')['default']
     MarkdownEditor: typeof import('./src/components/AppLayout/MarkdownEditor.vue')['default']
     MissingComponent: typeof import('./src/components/MissingComponent.vue')['default']
-    NewComponentDialog: typeof import('./src/components/NewComponentDialog.vue')['default']
     ObjectBrowser: typeof import('./src/components/ObjectBrowser.vue')['default']
     ObjectEditor: typeof import('./src/components/ObjectEditor.vue')['default']
     OptionToggle: typeof import('./src/components/OptionToggle.vue')['default']

frontend/package.json

@@ -25,18 +25,17 @@
 		"ace-builds": "^1.36.2",
 		"autoprefixer": "^10.4.2",
 		"codemirror": "^6.0.1",
-		"frappe-ui": "0.1.274",
+		"frappe-ui": "1.0.0-beta.3",
 		"json5": "^2.2.3",
 		"marked": "^15.0.6",
 		"pinia": "^2.2.1",
-		"reka-ui": "^2.7.0",
+		"reka-ui": "^2.9.9",
 		"thememirror": "^2.0.1",
 		"typescript": "^5.8.3",
-		"vite": "^8.0.8",
+		"vite": "8.0.13",
 		"vue": "^3.5.14",
 		"vue-codemirror": "^6.1.1",
 		"vue-router": "^4.2.2",
-		"vue-sonner": "^1.3.0",
 		"vuedraggable": "^4.1.0"
 	},
 	"devDependencies": {

frontend/src/App.vue

@@ -7,13 +7,9 @@
 				</keep-alive>
 			</router-view>
 		</FrappeUIProvider>
-
-		<Toaster :visible-toasts="2" position="bottom-right" richColors closeButton />
-		<Dialogs></Dialogs>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { Dialogs, FrappeUIProvider } from "frappe-ui"
-import { Toaster } from "vue-sonner"
+import { FrappeUIProvider } from "frappe-ui"
 </script>

frontend/src/AppRenderer.vue

@@ -1,14 +1,11 @@
 <template>
 	<div class="h-full">
-		<Toaster :visible-toasts="2" position="bottom-right" richColors closeButton />
 		<FrappeUIProvider>
 			<router-view />
 		</FrappeUIProvider>
-		<Dialogs></Dialogs>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { Dialogs, FrappeUIProvider } from "frappe-ui"
-import { Toaster } from "vue-sonner"
+import { FrappeUIProvider } from "frappe-ui"
 </script>

frontend/src/components/AIChatPanel.vue

@@ -25,7 +25,7 @@
 				v-if="!messages.length"
 				class="flex h-full flex-col items-center justify-center gap-2 pb-8 text-center"
 			>
-				<FeatherIcon name="zap" class="h-8 w-8 text-ink-gray-3" />
+				<LucideSparkle class="h-8 w-8 text-ink-gray-3" />
 				<p class="text-xs text-ink-gray-4">Chat to create or edit this page</p>
 			</div>
 
@@ -120,7 +120,7 @@
 <script lang="ts" setup>
 import { ref, computed, inject, watch, nextTick } from "vue"
 import { ErrorMessage, Button, Badge, FeatherIcon, call, createResource, Popover } from "frappe-ui"
-import { toast } from "vue-sonner"
+import { toast } from "frappe-ui"
 import useStudioStore from "@/stores/studioStore"
 import useCanvasStore from "@/stores/canvasStore"
 import { getBlockInstance, getBlockString } from "@/utils/serializer"
@@ -129,6 +129,7 @@ import { throttle } from "@/utils/helpers"
 import type Block from "@/utils/block"
 import type { PauseId } from "@/utils/useCanvasHistory"
 import { studioSettings } from "@/data/studioSettings"
+import LucideSparkle from "~icons/lucide/sparkle"
 
 const store = useStudioStore()
 const canvasStore = useCanvasStore()

frontend/src/components/AppComponent.vue

@@ -62,7 +62,7 @@ import { useScreenSize } from "@/utils/useScreenSize"
 import { isDynamicValue } from "@/utils/code"
 
 import useCodeStore from "@/stores/codeStore"
-import { toast } from "vue-sonner"
+import { toast } from "frappe-ui"
 import type { RepeaterContext } from "@/types"
 import type { Field } from "@/types/ComponentEvent"
 import type { DataResult } from "@/types/Studio/StudioResource"

frontend/src/components/AppDialog.vue

@@ -1,18 +1,16 @@
 <template>
 	<Dialog
 		v-model="showDialog"
-		:options="{
-			title: isEditing ? 'Edit App' : 'New App',
-			width: 'md',
-		}"
+		:title="isEditing ? 'Edit App' : 'New App'"
+		width="md"
 		@after-leave="
 			() => {
 				activeApp = { ...emptyAppState }
 				error = ''
 			}
 		"
 	>
-		<template #body-content>
+		<template #default>
 			<div class="flex flex-col gap-3">
 				<FormControl
 					label="Title"
@@ -54,7 +52,7 @@ import { useRouter } from "vue-router"
 import { studioApps } from "@/data/studioApps"
 import { Dialog, FormControl } from "frappe-ui"
 import type { StudioApp } from "@/types/Studio/StudioApp"
-import { toast } from "vue-sonner"
+import { toast } from "frappe-ui"
 
 const props = defineProps<{ app?: StudioApp | null }>()
 const showDialog = defineModel("showDialog", { type: Boolean, required: true })

frontend/src/components/BlockFlexLayoutHandler.vue

@@ -4,8 +4,8 @@
 		label="Direction"
 		v-if="blockController.isFlex()"
 		:options="[
-			{ label: 'Horizontal', value: 'row', icon: 'arrow-right', hideLabel: true },
-			{ label: 'Vertical', value: 'column', icon: 'arrow-down', hideLabel: true },
+			{ label: 'Horizontal', value: 'row', icon: 'lucide-arrow-right', hideLabel: true },
+			{ label: 'Vertical', value: 'column', icon: 'lucide-arrow-down', hideLabel: true },
 		]"
 		:modelValue="blockController.getStyle('flexDirection')"
 		@update:modelValue="(val: string | number) => blockController.setStyle('flexDirection', val)"

frontend/src/components/CodePanel.vue

@@ -19,10 +19,8 @@
 			<Button icon-left="plus" @click="showWatcherDialog = true">Add Watcher</Button>
 			<Dialog
 				v-model="showWatcherDialog"
-				:options="{
-					title: pageWatcher.name ? 'Edit Watcher' : 'Add Watcher',
-					size: '3xl',
-				}"
+				:title="pageWatcher.name ? 'Edit Watcher' : 'Add Watcher'"
+				size="3xl"
 				@after-leave="
 					() => {
 						pageWatcher = {
@@ -35,9 +33,9 @@
 						}
 					}
 				"
-				:disableOutsideClickToClose="true"
+				:dismissible="false"
 			>
-				<template #body-content>
+				<template #default>
 					<div class="flex flex-col space-y-4">
 						<FormControl
 							type="combobox"
@@ -102,7 +100,7 @@ import Code from "@/components/Code.vue"
 import type { StudioPage } from "@/types/Studio/StudioPage"
 import type { StudioPageWatcher } from "@/types/Studio/StudioPageWatcher"
 import useStudioStore from "@/stores/studioStore"
-import { toast } from "vue-sonner"
+import { toast } from "frappe-ui"
 import { confirm } from "@/utils/helpers"
 import { useStudioCompletions } from "@/utils/useStudioCompletions"
 import ItemActions from "@/components/ItemActions.vue"
@@ -147,7 +145,7 @@ const getWatcherMenu = (watcher: StudioPageWatcher) => {
 	return [
 		{
 			label: "Delete",
-			icon: "trash",
+			icon: "lucide-trash",
 			theme: "red",
 			onClick: () => deletePageWatcher(watcher),
 		},

frontend/src/components/CollapsibleSection.vue

@@ -7,7 +7,7 @@
 			</h3>
 			<Button
 				class="text-ink-gray-6 hover:bg-surface-gray-2"
-				:icon="collapsed ? 'chevron-right' : 'chevron-down'"
+				:icon="collapsed ? 'lucide-chevron-right' : 'lucide-chevron-down'"
 				:variant="'ghost'"
 				size="sm"
 				@click="toggleCollapsed"

frontend/src/components/ComponentContextMenu.vue

@@ -9,16 +9,6 @@
 			@select="handleContextMenuSelect"
 		/>
 		<FormDialog v-if="block" v-model:showDialog="showFormDialog" :block="block" />
-		<NewComponentDialog
-			v-if="block"
-			:block="block"
-			v-model:showDialog="showNewComponentDialog"
-			@created="
-				(component: StudioComponent) => {
-					block.extendFromComponent(component.component_id)
-				}
-			"
-		/>
 	</div>
 </template>
 
@@ -35,9 +25,7 @@ import { isObjectEmpty } from "@/utils/helpers"
 import { getBlockCopy, getComponentBlock } from "@/utils/serializer"
 import getBlockTemplate from "@/utils/blockTemplate"
 import FormDialog from "@/components/FormDialog.vue"
-import NewComponentDialog from "@/components/NewComponentDialog.vue"
-import { toast } from "vue-sonner"
-import type { StudioComponent } from "@/types/Studio/StudioComponent"
+import { toast } from "frappe-ui"
 
 const store = useStudioStore()
 const canvasStore = useCanvasStore()
@@ -48,7 +36,6 @@ const posY = ref(0)
 
 const block = ref(null) as unknown as Ref<Block>
 const showFormDialog = ref(false)
-const showNewComponentDialog = ref(false)
 const showContextMenu = (e: MouseEvent, refBlock: Block) => {
 	block.value = refBlock
 	if (block.value.isRoot()) return
@@ -154,7 +141,10 @@ const contextMenuOptions: ContextMenuOption[] = [
 	{
 		label: "Save as Component",
 		action: () => {
-			showNewComponentDialog.value = true
+			useComponentEditorStore().promptNewComponent({
+				block: block.value,
+				onCreated: (component) => block.value.extendFromComponent(component.component_id),
+			})
 		},
 		condition: () => !block.value.isStudioComponent,
 	},

frontend/src/components/ComponentEditor.vue

@@ -64,12 +64,10 @@
 		v-if="canvasStore.activeCanvas?.selectedSlot?.slotId"
 		v-model="store.showSlotEditorDialog"
 		class="overscroll-none"
-		:options="{
-			title: `Edit #${canvasStore.activeCanvas?.selectedSlot?.slotName} slot for ${block.componentName}`,
-			size: '3xl',
-		}"
+		:title="`Edit #${canvasStore.activeCanvas?.selectedSlot?.slotName} slot for ${block.componentName}`"
+		size="3xl"
 	>
-		<template #body-content>
+		<template #default>
 			<Code
 				:modelValue="block.getSlotContent(canvasStore.activeCanvas?.selectedSlot?.slotName) || ''"
 				language="html"

frontend/src/components/ComponentEvents.vue

@@ -17,35 +17,26 @@
 			<Button class="mt-2" icon-left="plus" @click="showAddEventDialog = true">Add Event</Button>
 			<Dialog
 				v-model="showAddEventDialog"
-				:options="{
-					title: (newEvent.isEditing ? 'Edit Event' : 'Add Event') + ' - ' + block.getBlockDescription(),
-					size: '3xl',
-					actions: [
-						{
-							label: newEvent.isEditing ? 'Update' : 'Add',
-							variant: 'solid',
-							onClick: () => saveEvent(newEvent),
-						},
-					],
-				}"
-				:disableOutsideClickToClose="true"
+				:title="(newEvent.isEditing ? 'Edit Event' : 'Add Event') + ' - ' + block.getBlockDescription()"
+				size="3xl"
+				:actions="[
+					{
+						label: newEvent.isEditing ? 'Update' : 'Add',
+						variant: 'solid',
+						onClick: () => saveEvent(newEvent),
+					},
+				]"
+				:dismissible="false"
 				@after-leave="newEvent = { ...emptyEvent, fields: [], isEditing: false }"
 			>
-				<template #body-content>
+				<template #default>
 					<div class="flex flex-col gap-3">
+						<FormControl type="combobox" :options="eventOptions" label="Event" v-model="newEvent.event" />
 						<FormControl
-							type="autocomplete"
-							:options="eventOptions"
-							label="Event"
-							:modelValue="newEvent.event"
-							@update:modelValue="(val: SelectOption) => (newEvent.event = val.value)"
-						/>
-						<FormControl
-							type="autocomplete"
+							type="combobox"
 							:options="Object.keys(actions)"
 							label="Action"
-							:modelValue="newEvent.action"
-							@update:modelValue="(val: SelectOption) => (newEvent.action = val.value as Actions)"
+							v-model="newEvent.action"
 						/>
 						<component
 							v-for="control in actionControls"
@@ -165,7 +156,7 @@ import Grid from "@/components/Grid.vue"
 import Code from "@/components/Code.vue"
 import { useStudioCompletions } from "@/utils/useStudioCompletions"
 import type { DocTypeField } from "@/types"
-import { toast } from "vue-sonner"
+import { toast } from "frappe-ui"
 import type { CompletionContext } from "@codemirror/autocomplete"
 import useCodeStore from "@/stores/codeStore"
 import useComponentInstance from "@/utils/useComponentInstance"
@@ -536,7 +527,7 @@ const getEventMenu = (event: ComponentEvent) => {
 	return [
 		{
 			label: "Delete",
-			icon: "trash",
+			icon: "lucide-trash",
 			theme: "red",
 			onClick: () => deleteEvent(event),
 		},