frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/utils/{call.js → call.ts}

@@ -1,4 +1,39 @@
-export default async function call(method, args, options = {}) {
+declare global {
+  interface Window {
+    csrf_token?: string
+  }
+}
+
+export interface CallOptions {
+  headers?: Record<string, string>
+  onError?: (context: {
+    response: Response
+    status: number
+    error: CallError
+  }) => void
+}
+
+export interface CallError extends Error {
+  exc_type?: string
+  exc?: string
+  status?: number
+  messages: string[]
+}
+
+type FrappeCallResponse = {
+  docs?: unknown
+  exc?: string
+  exc_type?: string
+  message?: unknown
+  _server_messages?: string
+  _error_message?: string
+}
+
+export default async function call<TResponse = unknown>(
+  method: string,
+  args: Record<string, any> = {},
+  options: CallOptions = {},
+): Promise<TResponse> {
   if (!args) {
     args = {}
   }
@@ -24,9 +59,9 @@ export default async function call(method, args, options = {}) {
   })
 
   if (res.ok) {
-    const data = await res.json()
+    const data = (await res.json()) as FrappeCallResponse
     if (data.docs || method === 'login') {
-      return data
+      return data as TResponse
     }
     if (data.exc) {
       try {
@@ -42,10 +77,11 @@ export default async function call(method, args, options = {}) {
         console.warn('Error printing debug messages', e)
       }
     }
-    return data.message
+    return data.message as TResponse
   } else {
     let response = await res.text()
-    let error, exception
+    let error: FrappeCallResponse = {}
+    let exception
     try {
       error = JSON.parse(response)
       // eslint-disable-next-line no-empty
@@ -61,14 +97,16 @@ export default async function call(method, args, options = {}) {
         // eslint-disable-next-line no-empty
       } catch (e) {}
     }
-    let e = new Error(errorParts.join('\n'))
+    let e = new Error(errorParts.join('\n')) as CallError
     e.exc_type = error.exc_type
     e.exc = exception
     e.status = res.status
     e.messages = error._server_messages
       ? JSON.parse(error._server_messages)
       : []
-    e.messages = e.messages.concat(error.message)
+    if (error.message !== undefined) {
+      e.messages = e.messages.concat(error.message as any)
+    }
     e.messages = e.messages.map((m) => {
       try {
         return JSON.parse(m).message
@@ -91,8 +129,11 @@ export default async function call(method, args, options = {}) {
   }
 }
 
-export function createCall(options) {
-  return function customCall(method, args) {
+export function createCall(options: CallOptions) {
+  return function customCall<TResponse = unknown>(
+    method: string,
+    args?: Record<string, any>,
+  ) {
     return call(method, args, options)
   }
 }

package/src/utils/config.ts

@@ -1,8 +1,11 @@
-interface FrappeUIConfig {
+export interface FrappeUIConfig {
   // Timezone configurations
   systemTimezone?: string | null
   localTimezone?: string | null
 
+  // Max upload size in bytes (apps usually source this from their boot data)
+  maxFileSize?: number | null
+
   // Resource fetcher function
   resourceFetcher?: (options: any) => Promise<any>
 
@@ -18,6 +21,18 @@ interface FrappeUIConfig {
 
   // Error handling
   fallbackErrorHandler?: (error: any) => void
+  serverMessagesHandler?: (messages: string[]) => void
+
+  // Base URL prepended to relative request URLs. Set this for local UI dev
+  // against a remote Frappe instance (cross-origin). When set, requests default
+  // to `credentials: 'include'` for cookie-based auth; if you use a token via
+  // `requestHeaders` instead, pass `credentials: 'omit'` per request.
+  requestBaseUrl?: string
+
+  // Extra headers merged into every frappeRequest. Either a static object or a
+  // function returning headers (useful for injecting an Authorization header,
+  // e.g. `token <key>:<secret>`).
+  requestHeaders?: Record<string, string> | (() => Record<string, string>)
 }
 
 let config: FrappeUIConfig = {}

package/src/utils/confirmDialog.d.ts

@@ -0,0 +1,17 @@
+import type { Ref, VNode } from 'vue'
+
+export interface ConfirmDialogOptions {
+  title?: string
+  message?: string
+  onConfirm?: () => void | Promise<void>
+  onCancel?: () => void | Promise<void>
+}
+
+/**
+ * @deprecated Use `dialog.confirm()` from `frappe-ui` instead.
+ */
+export function confirmDialog(options: ConfirmDialogOptions): void
+
+export const dialogs: Ref<Array<VNode & { id?: number }>>
+
+export function renderDialog(component: VNode & { id?: number }): void

package/src/utils/debounce.ts

@@ -1,16 +1,15 @@
 export default function debounce(
-  func: Function,
+  func: (...args: any[]) => any,
   wait: number,
   immediate?: boolean,
 ) {
   var timeout: number | undefined
-  return function () {
+  return function (this: unknown, ...args: any[]) {
     var context = this,
-      args = arguments
-    var later = function () {
-      timeout = undefined
-      if (!immediate) func.apply(context, args)
-    }
+      later = function () {
+        timeout = undefined
+        if (!immediate) func.apply(context, args)
+      }
     var callNow = immediate && !timeout
     clearTimeout(timeout)
     timeout = window.setTimeout(later, wait)

package/src/utils/dialog.cy.ts

@@ -83,8 +83,8 @@ describe('dialog.ts — imperative API', () => {
       confirm({ title: 't', onConfirm })
     })
     cy.contains('button', 'Confirm').click()
-    // loading spinner is rendered as an svg.animate-spin inside the button
-    cy.contains('button', 'Confirm').find('svg.animate-spin').should('exist')
+    // loading spinner is rendered as an [role="status"] inside the button
+    cy.contains('button', 'Confirm').find('[role="status"]').should('exist')
     cy.contains('button', 'Cancel').should('be.disabled')
     cy.then(() => resolveOuter())
     cy.get('[role=dialog]').should('not.exist')
@@ -100,7 +100,7 @@ describe('dialog.ts — imperative API', () => {
     cy.get('[role=dialog]').contains('Network down').should('exist')
     cy.get('[role=dialog]').should('exist')
     cy.contains('button', 'Confirm')
-      .find('svg.animate-spin')
+      .find('[role="status"]')
       .should('not.exist')
   })
 
@@ -159,7 +159,7 @@ describe('dialog.ts — imperative API', () => {
     cy.then(() => capturedSetError?.('Bad password'))
     cy.get('[role=dialog]').contains('Bad password').should('exist')
     cy.contains('button', 'Confirm')
-      .find('svg.animate-spin')
+      .find('[role="status"]')
       .should('not.exist')
     cy.then(() => capturedSetError?.(null))
     cy.get('[role=dialog]').contains('Bad password').should('not.exist')
@@ -227,7 +227,7 @@ describe('dialog.ts — imperative API', () => {
     cy.get('[role=dialog] .lucide-alert-triangle').should('exist')
     cy.contains('button', 'Confirm').should(
       'have.class',
-      'bg-surface-red-5',
+      'bg-surface-red-7',
     )
   })
 
@@ -297,7 +297,7 @@ describe('dialog.ts — imperative API', () => {
       })
     })
     cy.contains('button', 'A').click()
-    cy.contains('button', 'A').find('svg.animate-spin').should('exist')
+    cy.contains('button', 'A').find('[role="status"]').should('exist')
     cy.contains('button', 'B').should('be.disabled')
     cy.contains('button', 'B').click({ force: true })
     cy.get('@onB').should('not.have.been.called')
@@ -323,7 +323,7 @@ describe('dialog.ts — imperative API', () => {
     cy.get('[role=dialog]').contains('Save failed').should('exist')
     cy.get('[role=dialog]').should('exist')
     cy.contains('button', 'Save')
-      .find('svg.animate-spin')
+      .find('[role="status"]')
       .should('not.exist')
   })
 
@@ -337,7 +337,7 @@ describe('dialog.ts — imperative API', () => {
     cy.get('[role=dialog] .lucide-alert-triangle').should('exist')
     cy.contains('button', 'Delete')
       .should('exist')
-      .and('have.class', 'bg-surface-red-5')
+      .and('have.class', 'bg-surface-red-7')
   })
 
   it('danger lets you override the confirm label', () => {
@@ -451,7 +451,7 @@ describe('dialog.ts — imperative API', () => {
     cy.get('[role=dialog]').contains('Invalid email').should('exist')
     cy.get('@onConfirm').should('not.have.been.called')
     cy.contains('button', 'Submit')
-      .find('svg.animate-spin')
+      .find('[role="status"]')
       .should('not.exist')
   })
 

package/src/utils/fileSize.ts

@@ -0,0 +1,36 @@
+/**
+ * File-size helpers shared by every upload path (useFileUpload,
+ * FileUploadHandler, and the editor's media upload engine / image-group
+ * dialog). Single source of truth for the max-file-size lookup and the
+ * user-facing size-limit message.
+ *
+ * Apps provide the limit explicitly via `setConfig('maxFileSize', bytes)`
+ * (usually sourced from their boot data).
+ */
+import { getConfig } from './config'
+
+/**
+ * Max upload size in bytes, or null when unset. Reads the app-provided
+ * `maxFileSize` config.
+ */
+export function getMaxFileSize(): number | null {
+  const size = Number(getConfig('maxFileSize'))
+  return Number.isFinite(size) && size > 0 ? size : null
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes >= 1024 * 1024) {
+    const mb = bytes / 1024 / 1024
+    return `${Number.isInteger(mb) ? mb : mb.toFixed(1)} MB`
+  }
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)} KB`
+  return `${bytes} B`
+}
+
+/** Human-readable size-limit violation message, or null when the file fits. */
+export function fileSizeLimitMessage(file: File | null): string | null {
+  if (!file) return null
+  const maxFileSize = getMaxFileSize()
+  if (!maxFileSize || file.size <= maxFileSize) return null
+  return `This file is ${formatBytes(file.size)}; the limit is ${formatBytes(maxFileSize)}.`
+}

package/src/utils/fileUploadHandler.ts

@@ -1,4 +1,5 @@
-import { UploadOptions } from "./useFileUpload"
+import { isPrivateUpload, type UploadOptions } from './useFileUpload'
+import { getMaxFileSize, formatBytes, fileSizeLimitMessage } from './fileSize'
 
 type EventListenerOption = 'start' | 'progress' | 'finish' | 'error'
 
@@ -8,6 +9,37 @@ declare global {
   }
 }
 
+function parseServerMessages(error: any): string[] {
+  if (!error?._server_messages) return []
+  try {
+    return JSON.parse(error._server_messages)
+      .map((message: string) => {
+        try {
+          return JSON.parse(message).message
+        } catch {
+          return message
+        }
+      })
+      .filter(Boolean)
+  } catch {
+    return []
+  }
+}
+
+function extractUploadErrorMessage(error: any): string {
+  const messages = parseServerMessages(error)
+  if (messages.length) return messages.join('\n')
+  if (error?.message) return error.message
+  if (error?._error_message) return error._error_message
+  if (error?.exc_type === 'MaxFileSizeReachedError') {
+    const maxFileSize = getMaxFileSize()
+    return maxFileSize
+      ? `File size exceeded the maximum allowed size of ${formatBytes(maxFileSize)}.`
+      : 'File size exceeds the maximum allowed limit.'
+  }
+  return 'Error Uploading File'
+}
+
 class FileUploadHandler {
   listeners: { [event: string]: Function[] }
   failed: boolean
@@ -31,6 +63,11 @@ class FileUploadHandler {
 
   upload(file: File | null, options: UploadOptions): Promise<any> {
     return new Promise((resolve, reject) => {
+      const limitMessage = fileSizeLimitMessage(file)
+      if (limitMessage) {
+        reject(new Error(limitMessage))
+        return
+      }
       let xhr = new XMLHttpRequest()
       xhr.upload.addEventListener('loadstart', () => {
         this.trigger('start')
@@ -70,7 +107,10 @@ class FileUploadHandler {
 
             if (xhr.status === 413 || xhr.status === 0) {
               error = {
-                message: 'File size exceeds the maximum allowed limit',
+                message:
+                  getMaxFileSize() != null
+                    ? `File size exceeded the maximum allowed size of ${formatBytes(getMaxFileSize() as number)}.`
+                    : 'File size exceeds the maximum allowed limit',
                 httpStatus: 413,
               }
             } else {
@@ -85,7 +125,7 @@ class FileUploadHandler {
               console.error(JSON.parse(error.exc)[0])
             }
             this.trigger('error', error)
-            reject(error)
+            reject(new Error(extractUploadErrorMessage(error)))
           }
         }
       }
@@ -103,7 +143,7 @@ class FileUploadHandler {
       if (file) {
         form_data.append('file', file, file.name)
       }
-      form_data.append('is_private', options.private || false ? '1' : '0')
+      form_data.append('is_private', isPrivateUpload(options) ? '1' : '0')
       form_data.append('folder', options.folder || 'Home')
 
       if (options.file_url) {
@@ -133,10 +173,10 @@ class FileUploadHandler {
       if (options.optimize) {
         form_data.append('optimize', '1')
         if (options.max_width) {
-            form_data.append('max_width', options.max_width.toString())
+          form_data.append('max_width', options.max_width.toString())
         }
         if (options.max_height) {
-            form_data.append('max_height', options.max_height.toString())
+          form_data.append('max_height', options.max_height.toString())
         }
       }
 

package/src/utils/frappeRequest.test.ts

@@ -0,0 +1,79 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { frappeRequest } from './frappeRequest'
+import { setConfig } from './config'
+
+function mockFetch() {
+  const fetchMock = vi.fn(
+    async (_input: RequestInfo | URL, _init?: RequestInit) =>
+      ({
+        ok: true,
+        json: async () => ({ message: 'ok' }),
+      }) as Response,
+  )
+  vi.stubGlobal('fetch', fetchMock)
+  return fetchMock
+}
+
+function getFetchCall(fetchMock: ReturnType<typeof mockFetch>) {
+  const [url, opts] = fetchMock.mock.calls[0]!
+  return {
+    url,
+    opts: opts as RequestInit & {
+      headers: Record<string, string | undefined>
+    },
+  }
+}
+
+describe('frappeRequest configurable base url and auth headers', () => {
+  beforeEach(() => {
+    setConfig('requestBaseUrl', undefined)
+    setConfig('requestHeaders', undefined)
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    setConfig('requestBaseUrl', undefined)
+    setConfig('requestHeaders', undefined)
+  })
+
+  it('keeps default behavior when nothing is configured', async () => {
+    const fetchMock = mockFetch()
+    await frappeRequest({ url: 'ping' })
+
+    const { url, opts } = getFetchCall(fetchMock)
+    expect(url).toBe('/api/method/ping')
+    expect(opts.credentials).toBeUndefined()
+    expect(opts.headers.Authorization).toBeUndefined()
+  })
+
+  it('prepends the configured base url and includes credentials', async () => {
+    setConfig('requestBaseUrl', 'https://remote.frappe.test/')
+    const fetchMock = mockFetch()
+    await frappeRequest({ url: 'ping' })
+
+    const { url, opts } = getFetchCall(fetchMock)
+    expect(url).toBe('https://remote.frappe.test/api/method/ping')
+    expect(opts.credentials).toBe('include')
+  })
+
+  it('injects static headers from config', async () => {
+    setConfig('requestHeaders', { Authorization: 'token key:secret' })
+    const fetchMock = mockFetch()
+    await frappeRequest({ url: 'ping' })
+
+    const { opts } = getFetchCall(fetchMock)
+    expect(opts.headers.Authorization).toBe('token key:secret')
+  })
+
+  it('injects headers from a function returning headers', async () => {
+    setConfig('requestHeaders', () => ({
+      Authorization: 'token dynamic:value',
+    }))
+    const fetchMock = mockFetch()
+    await frappeRequest({ url: 'ping' })
+
+    const { opts } = getFetchCall(fetchMock)
+    expect(opts.headers.Authorization).toBe('token dynamic:value')
+  })
+})

package/src/utils/{frappeRequest.js → frappeRequest.ts}

@@ -1,19 +1,63 @@
 import { getConfig } from './config'
-import { request } from './request'
+import { request, type RequestOptions } from './request'
 
-export function frappeRequest(options) {
+declare global {
+  interface Window {
+    csrf_token?: string
+  }
+}
+
+type ServerMessagesHandler = (messages: string[]) => void
+
+export interface FrappeRequestOptions<TResponse = unknown> extends Omit<
+  RequestOptions<TResponse>,
+  'transformRequest' | 'transformResponse' | 'transformError'
+> {
+  onError?: (error: FrappeRequestError) => void
+  onServerMessages?: ServerMessagesHandler
+}
+
+export interface FrappeRequestError extends Error {
+  exc_type?: string
+  exc?: string
+  response?: Response
+  status?: number
+  messages: string[]
+}
+
+type FrappeResponseBody = {
+  docs?: unknown
+  exc?: string
+  exc_type?: string
+  message?: unknown
+  _server_messages?: string
+  _error_message?: string
+}
+
+export function frappeRequest<TResponse = unknown>(
+  options: FrappeRequestOptions<TResponse>,
+) {
+  const originalOptions = options
   return request({
     ...options,
-    transformRequest: (options = {}) => {
+    transformRequest: (options) => {
       if (!options.url) {
         throw new Error('[frappeRequest] options.url is required')
       }
+      let configHeaders = getConfig('requestHeaders') || {}
+      if (typeof configHeaders === 'function') {
+        configHeaders = configHeaders()
+      }
       let headers = Object.assign(
         {
           Accept: 'application/json',
           'Content-Type': 'application/json; charset=utf-8',
+          // Sent as the local hostname even when requestBaseUrl points at a
+          // remote site. Harmless for dev, but pass a `requestHeaders` override
+          // if you need the remote site name here.
           'X-Frappe-Site-Name': window.location.hostname,
         },
+        configHeaders,
         options.headers || {},
       )
       if (window.csrf_token && window.csrf_token !== '{{ csrf_token }}') {
@@ -22,18 +66,31 @@ export function frappeRequest(options) {
       if (!options.url.startsWith('/') && !options.url.startsWith('http')) {
         options.url = '/api/method/' + options.url
       }
+      // Prepend a configured base URL to relative URLs for local dev against a
+      // remote instance. Default to `credentials: 'include'` so cookie-based
+      // cross-origin auth works out of the box (the server must then send
+      // Access-Control-Allow-Credentials: true and a non-wildcard origin). If
+      // you authenticate with a token via `requestHeaders` instead, you usually
+      // want cookies omitted — pass `options.credentials: 'omit'` to override.
+      let baseUrl = getConfig('requestBaseUrl')
+      let credentials = options.credentials
+      if (baseUrl && options.url.startsWith('/')) {
+        options.url = baseUrl.replace(/\/$/, '') + options.url
+        credentials = credentials || 'include'
+      }
       return {
         ...options,
         method: options.method || 'POST',
         headers,
+        credentials,
       }
     },
     transformResponse: async (response, options) => {
       let url = options.url
       if (response.ok) {
-        const data = await response.json()
+        const data = (await response.json()) as FrappeResponseBody
         if (data.docs || url === '/api/method/login') {
-          return data
+          return data as TResponse
         }
         if (data.exc) {
           try {
@@ -51,16 +108,19 @@ export function frappeRequest(options) {
 
         if (data._server_messages) {
           let onMessageHandler =
-            getConfig('serverMessagesHandler') || options.onServerMessages || null
+            getConfig('serverMessagesHandler') ||
+            originalOptions.onServerMessages ||
+            null
           if (onMessageHandler) {
             onMessageHandler(JSON.parse(data?._server_messages) || [])
           }
         }
 
-        return data.message
+        return data.message as TResponse
       } else {
         let errorResponse = await response.text()
-        let error, exception
+        let error: FrappeResponseBody = {}
+        let exception
         try {
           error = JSON.parse(errorResponse)
           // eslint-disable-next-line no-empty
@@ -78,15 +138,17 @@ export function frappeRequest(options) {
             // eslint-disable-next-line no-empty
           } catch (e) {}
         }
-        let e = new Error(errorParts.join('\n'))
+        let e = new Error(errorParts.join('\n')) as FrappeRequestError
         e.exc_type = error.exc_type
         e.exc = exception
         e.response = response
-        e.status = errorResponse.status
+        e.status = response.status
         e.messages = error._server_messages
           ? JSON.parse(error._server_messages)
           : []
-        e.messages = e.messages.concat(error.message)
+        if (error.message !== undefined) {
+          e.messages = e.messages.concat(error.message as any)
+        }
         e.messages = e.messages.map((m) => {
           try {
             return JSON.parse(m).message
@@ -100,12 +162,13 @@ export function frappeRequest(options) {
             ? [error._error_message]
             : ['Internal Server Error']
         }
-        options.onError && options.onError(e)
+        originalOptions.onError && originalOptions.onError(e)
         throw e
       }
     },
     transformError: (error) => {
-      options.onError && options.onError(error)
+      originalOptions.onError &&
+        originalOptions.onError(error as FrappeRequestError)
       throw error
     },
   })

package/src/utils/pageMeta.ts

@@ -36,7 +36,7 @@ export function usePageMeta(fn: PageMetaFunction): StopWatcherFunction {
       try {
         return fn()
       } catch (error) {
-        if (process.env.NODE_ENV === 'development') {
+        if (import.meta.env.DEV) {
           console.warn('Failed to parse pageMeta in', fn)
           console.error(error)
         }