frappe-ui 0.1.270 → 0.1.271

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.270",
+  "version": "0.1.271",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,

package/src/components/Dropdown/Dropdown.vue

@@ -7,7 +7,7 @@
       </Button>
     </DropdownMenuTrigger>
 
-    <DropdownMenuPortal>
+    <DropdownMenuPortal :to="portalTo">
       <DropdownMenuContent
         :class="[
           cssClasses.dropdownContent,
@@ -100,7 +100,7 @@
                       />
                     </button>
                   </DropdownMenuSubTrigger>
-                  <DropdownMenuPortal>
+                  <DropdownMenuPortal :to="portalTo">
                     <DropdownMenuSubContent
                       :class="cssClasses.dropdownContent"
                       :side-offset="4"
@@ -282,7 +282,6 @@ defineOptions({
 })
 
 const toggleState = ref(false)
-const test = ref(true)
 const router = useRouter()
 const attrs = useAttrs()
 
@@ -291,6 +290,7 @@ const props = withDefaults(defineProps<DropdownProps>(), {
   placement: 'left',
   side: 'bottom',
   offset: 4,
+  portalTo: 'body',
 })
 
 function close() {
@@ -434,7 +434,11 @@ const align = computed(() => {
 
 defineSlots<{
   /** Default slot for custom trigger content (receives `open`, `close`, and extra attrs) */
-  default?: (props: { open: boolean; close: () => void; [key: string]: any }) => any
+  default?: (props: {
+    open: boolean
+    close: () => void
+    [key: string]: any
+  }) => any
 
   /** Custom rendering for each dropdown item (receives `item` and `close`) */
   item?: (props: { item: DropdownOption; close: () => void }) => any

package/src/components/Dropdown/types.ts

@@ -44,5 +44,8 @@ export interface DropdownProps {
 
   /** Offset in pixels between trigger and dropdown */
   offset?: number
+
+  /** Teleport target for dropdown portal content */
+  portalTo?: string | HTMLElement
 }
 

package/src/components/FileUploader/FileUploader.vue

@@ -121,7 +121,9 @@ export default {
         .catch((error) => {
           this.uploading = false
           let errorMessage = 'Error Uploading File'
-          if (error?._server_messages) {
+          if (error?.message) {
+            errorMessage = error.message
+          } else if (error?._server_messages) {
             errorMessage = JSON.parse(
               JSON.parse(error._server_messages)[0],
             ).message

package/src/components/TextEditor/TextEditor.vue

@@ -174,6 +174,7 @@ onMounted(() => {
       }),
       Table.configure({
         resizable: true,
+        renderWrapper: true,
       }),
       TableRow,
       TableHeader,

package/src/components/TextEditor/extensions/color/color-extension.ts

@@ -112,7 +112,7 @@ export const NamedColorExtension = Extension.create<ColorOptions>({
     return {
       setColorByName:
         (colorName: string) =>
-        ({ chain, state, editor }) => {
+        ({ chain }) => {
           // Validate that the color name is allowed
           if (!this.options.colors.includes(colorName)) {
             console.warn(
@@ -121,19 +121,8 @@ export const NamedColorExtension = Extension.create<ColorOptions>({
             return false
           }
 
-          const { to, empty } = state.selection
-
           let commandChain = chain().setMark('textStyle', { color: colorName })
 
-          if (!empty) {
-            commandChain = commandChain
-              .setTextSelection(to)
-              .command(({ tr }) => {
-                tr.setStoredMarks([])
-                return true
-              })
-          }
-
           return commandChain.focus().run()
         },
       unsetColor:

package/src/components/TextEditor/extensions/toc-node/TocNodeView.vue

@@ -126,7 +126,7 @@ const scrollToHeading = (heading: HeadingAnchor) => {
   view.dispatch(tr)
   view.focus()
 
-  const editorContainer = document.querySelector('#editorScrollContainer')
+  const editorContainer = document.querySelector('#editor-scroll-container')
   if (element && editorContainer) {
     const elementRect = element.getBoundingClientRect()
     const containerRect = editorContainer.getBoundingClientRect()
@@ -147,7 +147,7 @@ const scrollToHeading = (heading: HeadingAnchor) => {
     const domPos = view.domAtPos(pos)
     if (domPos.node && domPos.node.nodeType === Node.ELEMENT_NODE) {
       const node = domPos.node as Element
-      const editorContainer = document.querySelector('#editorScrollContainer')
+      const editorContainer = document.querySelector('#editor-scroll-container')
       if (editorContainer) {
         const nodeRect = node.getBoundingClientRect()
         const containerRect = editorContainer.getBoundingClientRect()
@@ -277,7 +277,7 @@ const extractAnchors = (): HeadingAnchor[] => {
   if (!props.editor?.state?.doc) return []
 
   const headings: HeadingAnchor[] = []
-  const scrollParent = document.querySelector('#editorScrollContainer')
+  const scrollParent = document.querySelector('#editor-scroll-container')
 
   // Get the current active tab ID
   let activeTabId: string | null = null
@@ -366,7 +366,7 @@ const updateAnchors = () => {
 }
 
 let updateInterval: ReturnType<typeof setInterval> | null = null
-const scrollParent = document.querySelector('#editorScrollContainer')
+const scrollParent = document.querySelector('#editor-scroll-container')
 
 watch(() => props.editor?.state?.doc, updateAnchors, { deep: true })
 

package/src/components/TextEditor/style.css

@@ -131,6 +131,15 @@ img.ProseMirror-selectednode {
   background-color: var(--surface-gray-2);
 }
 
+/* Applies the current color to the link's underline */
+.ProseMirror a span[style] {
+  text-decoration: underline;
+}
+
+.ProseMirror .tableWrapper {
+  overflow-x: scroll;
+}
+
 /* Edit prose classes to be more functional */
 .prose-v2 {
   line-height: 1.5 !important;

package/src/utils/fileUploadHandler.ts

@@ -43,16 +43,12 @@ class FileUploadHandler {
           })
         }
       })
-      xhr.upload.addEventListener('load', () => {
-        this.trigger('finish')
-      })
       xhr.addEventListener('error', () => {
         this.trigger('error')
         reject()
       })
       xhr.onreadystatechange = () => {
         if (xhr.readyState == XMLHttpRequest.DONE) {
-          let error
           if (xhr.status === 200) {
             let r = null
             try {
@@ -61,21 +57,36 @@ class FileUploadHandler {
               r = xhr.responseText
             }
             let out = r.message || r
+            this.trigger('finish')
             resolve(out)
-          } else if (xhr.status === 403) {
-            error = JSON.parse(xhr.responseText)
           } else {
             this.failed = true
-            try {
-              error = JSON.parse(xhr.responseText)
-            } catch (e) {
-              // pass
+            let error: {
+              message?: string
+              exc?: string
+              _server_messages?: string
+              httpStatus?: number
+            } = {}
+
+            if (xhr.status === 413 || xhr.status === 0) {
+              error = {
+                message: 'File size exceeds the maximum allowed limit',
+                httpStatus: 413,
+              }
+            } else {
+              try {
+                error = JSON.parse(xhr.responseText)
+              } catch (e) {
+                // pass
+              }
             }
+
+            if (error && error.exc) {
+              console.error(JSON.parse(error.exc)[0])
+            }
+            this.trigger('error', error)
+            reject(error)
           }
-          if (error && error.exc) {
-            console.error(JSON.parse(error.exc)[0])
-          }
-          reject(error)
         }
       }