Merge pull request #216 from frappe/develop

chore: merge `develop` into `main`

frontend/index.html

@@ -14,6 +14,7 @@
 
 		<script>
 			window.csrf_token = '{{ csrf_token }}'
+			window.site_name = '{{ site_name }}'
 		</script>
 		<script type="module" src="/src/main.js"></script>
 	</body>

frontend/package.json

@@ -15,12 +15,15 @@
 		"@codemirror/lang-javascript": "^6.0.2",
 		"@codemirror/lang-python": "^6.1.3",
 		"@codemirror/lang-sql": "^6.4.0",
+		"@formkit/auto-animate": "^0.8.1",
+		"@headlessui/vue": "^1.7.17",
 		"@tanstack/vue-table": "^8.10.7",
+		"@tiptap/vue-3": "^2.1.16",
 		"@types/vue-router": "^2.0.0",
 		"@vitejs/plugin-vue": "^4.2.3",
 		"@vitejs/plugin-vue-jsx": "^3.0.1",
 		"@vue-flow/core": "^1.23.0",
-		"@vueuse/core": "^9.1.0",
+		"@vueuse/core": "^10.7.2",
 		"codemirror": "^6.0.1",
 		"dayjs": "^1.11.6",
 		"dom-to-image": "^2.6.0",
@@ -33,9 +36,10 @@
 		"tailwindcss": "3.2.7",
 		"typescript": "^5.0.4",
 		"vite": "^4.4.6",
-		"vue": "^3.2.25",
+		"vue": "^3.4.15",
 		"vue-codemirror": "^6.0.1",
 		"vue-router": "^4.0.12",
+		"vue-sonner": "^1.0.3",
 		"vue-tsc": "^1.6.5",
 		"vuedraggable": "^4.1.0",
 		"@playwright/test": "^1.32.1",

frontend/src/App.vue

@@ -4,16 +4,16 @@
 		<Suspense v-else>
 			<AppShell />
 		</Suspense>
-		<Toasts />
+		<Toaster :visible-toasts="2" position="bottom-right" />
 	</div>
 </template>
 
 <script setup>
 import AppShell from '@/components/AppShell.vue'
-import Toasts from '@/utils/toasts'
-import { inject, onBeforeUnmount, computed } from 'vue'
-import { useRoute } from 'vue-router'
 import sessionStore from '@/stores/sessionStore'
+import { computed, inject, onBeforeUnmount } from 'vue'
+import { useRoute } from 'vue-router'
+import { Toaster } from 'vue-sonner'
 
 const route = useRoute()
 const isGuestView = computed(() => route.meta.isGuestView)

frontend/src/components/AlertDialog.vue

@@ -155,7 +155,7 @@ function testSendAlert() {
 							class="flex-1"
 							v-model="alert.condition.left"
 							:options="
-								query.resultColumns.map((c) => ({
+								query.results.columns.map((c) => ({
 									label: c.label,
 									value: c.label,
 									description: c.type,

frontend/src/components/Controls/Autocomplete.vue

@@ -14,14 +14,18 @@
 							:class="{ 'bg-gray-200': isComboboxOpen }"
 							@click="() => togglePopover()"
 						>
-							<div class="flex items-center overflow-hidden">
+							<div class="flex flex-1 items-center overflow-hidden">
 								<slot name="prefix" />
-								<span class="truncate text-base leading-5" v-if="selectedValue">
+								<span
+									v-if="selectedValue"
+									class="flex-1 truncate text-left text-base leading-5"
+								>
 									{{ displayValue(selectedValue) }}
 								</span>
-								<span class="text-base leading-5 text-gray-600" v-else>
+								<span v-else class="text-base leading-5 text-gray-600">
 									{{ placeholder || '' }}
 								</span>
+								<slot name="suffix" />
 							</div>
 							<FeatherIcon
 								name="chevron-down"
@@ -171,10 +175,9 @@ import {
 	ComboboxOption,
 	ComboboxOptions,
 } from '@headlessui/vue'
-import { Popover } from 'frappe-ui'
+import { CheckSquare, Square } from 'lucide-vue-next'
 import { nextTick } from 'vue'
-import { CheckSquare } from 'lucide-vue-next'
-import { Square } from 'lucide-vue-next'
+import Popover from '../Popover.vue'
 
 export default {
 	name: 'Autocomplete',

frontend/src/components/Controls/Code.vue

@@ -11,18 +11,19 @@
 		@update="onUpdate"
 		@focus="emit('focus')"
 		@blur="emit('blur')"
+		@ready="codeMirror = $event"
 	/>
 </template>
 
 <script setup>
 import { autocompletion, closeBrackets } from '@codemirror/autocomplete'
 import { javascript } from '@codemirror/lang-javascript'
-import { MySQL, sql } from '@codemirror/lang-sql'
 import { python } from '@codemirror/lang-python'
+import { MySQL, sql } from '@codemirror/lang-sql'
 import { HighlightStyle, syntaxHighlighting, syntaxTree } from '@codemirror/language'
 import { EditorView } from '@codemirror/view'
 import { tags } from '@lezer/highlight'
-import { computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { Codemirror } from 'vue-codemirror'
 
 const props = defineProps({
@@ -65,6 +66,7 @@ const onUpdate = (viewUpdate) => {
 	})
 }
 
+const codeMirror = ref(null)
 const code = computed({
 	get: () => (props.modelValue ? props.modelValue || '' : props.value || ''),
 	set: (value) => emit('update:modelValue', value),
@@ -174,4 +176,15 @@ const getHighlighterStyle = () =>
 	])
 
 extensions.push(syntaxHighlighting(getHighlighterStyle()))
+
+defineExpose({
+	get cursorPos() {
+		return codeMirror.value.view.state.selection.ranges[0].to
+	},
+	focus: () => codeMirror.value.view.focus(),
+	setCursorPos: (pos) => {
+		const _pos = Math.min(pos, code.value.length)
+		codeMirror.value.view.dispatch({ selection: { anchor: _pos, head: _pos } })
+	},
+})
 </script>

frontend/src/components/Controls/ColorInput.vue

@@ -59,4 +59,7 @@ const value = computed({
 const handleColorChange = (v) => {
 	value.value = getRGB(v)
 }
+const clearValue = () => {
+	value.value = ''
+}
 </script>