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

package/src/data-fetching/useList/useList.ts

@@ -12,7 +12,7 @@ import {
   OnFetchErrorContext,
   UseFetchOptions,
 } from '@vueuse/core'
-import { useFrappeFetch } from '../useFrappeFetch'
+import { FrappeResponseError, useFrappeFetch } from '../useFrappeFetch'
 import { useCall } from '../useCall/useCall'
 import { parseFilters, makeGetParams, normalizeCacheKey } from '../utils'
 import { UseListOptions, UseListResponse } from './types'
@@ -37,6 +37,7 @@ export function useList<T extends { name: string }>(
     immediate = true,
     refetch = true,
     cacheKey,
+    staleOnError = false,
     baseUrl = '',
     url = '',
     transform,
@@ -69,7 +70,9 @@ export function useList<T extends { name: string }>(
   const hasPreviousPage = computed(() => _start.value > 0)
 
   let normalizedCacheKey = normalizeCacheKey(cacheKey, 'useList')
-  let cachedResponse = ref<UseListResponse<T> | null>(null)
+  let cachedResponse = ref<UseListResponse<T> | null>(
+    null,
+  ) as Ref<UseListResponse<T> | null>
 
   const fetchOptions: UseFetchOptions = {
     immediate,
@@ -97,20 +100,20 @@ export function useList<T extends { name: string }>(
     execute,
   } = useFrappeFetch<UseListResponse<T>>(_url, fetchOptions).get()
 
-
-
   const result = computed(() => {
-    if (normalizedCacheKey && (out.loading || !out.isFinished)) {
-      let data = cachedResponse.value
-      if (data) {
-        if (transform) {
-          let returnValue = transform(data as T[])
-          if (returnValue !== undefined) {
-            return returnValue
-          }
+    let cachedData = normalizedCacheKey ? cachedResponse.value : null
+    if (
+      cachedData &&
+      canUseCachedFallback(error.value, staleOnError) &&
+      (out.loading || !out.isFinished || !allData.value || error.value)
+    ) {
+      if (transform) {
+        let returnValue = transform(cachedData as T[])
+        if (returnValue !== undefined) {
+          return returnValue
         }
-        return data
       }
+      return cachedData
     }
     return allData.value
   })
@@ -249,6 +252,10 @@ export function useList<T extends { name: string }>(
   return out
 }
 
+function canUseCachedFallback(error: unknown, staleOnError: boolean) {
+  return !error || (staleOnError && !(error instanceof FrappeResponseError))
+}
+
 function handleAfterFetch<T extends { name: string }>({
   transform,
   onSuccess,

package/src/data-fetching/useNewDoc/useNewDoc.ts

@@ -3,8 +3,8 @@ import { useCall } from '../useCall/useCall'
 import { UseCallOptions } from '../useCall/types'
 import { docStore } from '../docStore'
 
-type UseNewDocOptions = Omit<
-  UseCallOptions,
+type UseNewDocOptions<T> = Omit<
+  UseCallOptions<any, Partial<T>>,
   'url' | 'method' | 'params' | 'immediate'
 >
 
@@ -15,7 +15,7 @@ type NewDoc<T> = Partial<
 export function useNewDoc<T extends object>(
   doctype: string,
   initialValues: NewDoc<T> = {},
-  options: UseNewDocOptions = {},
+  options: UseNewDocOptions<T> = {},
 ) {
   let doc = reactive<NewDoc<T>>(initialValues)
 
@@ -23,7 +23,7 @@ export function useNewDoc<T extends object>(
     name: string
   }
 
-  const out = useCall<DocResponse>({
+  const out = useCall<DocResponse, Partial<T>>({
     url: `/api/v2/document/${doctype}`,
     method: 'POST',
     params() {
@@ -45,7 +45,11 @@ export function useNewDoc<T extends object>(
       .then((doc) =>
         docStore
           .setDoc({ doctype, ...(doc as DocResponse) })
-          .then(() => docStore.getDoc(doctype, doc.name.toString()).value as T),
+          .then(
+            () =>
+              docStore.getDoc(doctype, (doc as DocResponse).name.toString())
+                .value as T,
+          ),
       )
   }
 

package/src/directives/focus.ts

@@ -1,4 +1,4 @@
-import { type ObjectDirective, type DirectiveBinding, nextTick } from "vue"
+import { type ObjectDirective, type DirectiveBinding, nextTick } from 'vue'
 
 interface FocusDirective extends ObjectDirective<HTMLElement> {
   mounted(el: HTMLElement, binding: DirectiveBinding<boolean>): void
@@ -14,7 +14,7 @@ const focusDirective: FocusDirective = {
       await nextTick()
       firstFocusableElement.focus()
       if (
-        binding.arg === "autoselect" &&
+        binding.arg === 'autoselect' &&
         (firstFocusableElement instanceof HTMLInputElement ||
           firstFocusableElement instanceof HTMLTextAreaElement)
       ) {
@@ -22,7 +22,7 @@ const focusDirective: FocusDirective = {
       }
     } else {
       await nextTick()
-      document.activeElement?.blur?.()
+      ;(document.activeElement as HTMLElement | null)?.blur()
     }
   },
 }

package/src/index.ts

@@ -1,128 +1,159 @@
-// old data-fetching: resources
+// App setup and plugins
+export { default as FrappeUI } from './utils/plugin'
+export { default as FrappeUIProvider } from './components/Provider/FrappeUIProvider.vue'
+export { getConfig, setConfig } from './utils/config'
+export type { FrappeUIConfig } from './utils/config'
+export { default as pageMetaPlugin } from './utils/pageMeta.js'
+export { usePageMeta } from './utils/pageMeta'
+
+// Data fetching
+export * from './data-fetching'
+// Legacy resource API. Keep public until official apps finish the v3 migration.
 export * from './resources/index.ts'
+export { default as call, createCall } from './utils/call'
+export { frappeRequest } from './utils/frappeRequest'
+export { request } from './utils/request'
+export { default as initSocket } from './utils/socketio'
 
-// components
+// Base components
 export * from './components/Alert'
-export * from './components/Autocomplete'
 export * from './components/Avatar'
 export * from './components/Badge'
+export * from './components/BottomSheet'
 export * from './components/Breadcrumbs'
 export * from './components/Button'
-export { default as Card } from './components/Card.vue'
+export * from './components/Divider'
+export * from './components/Icon'
+export { default as LoadingIndicator } from './components/LoadingIndicator.vue'
+export { default as LoadingText } from './components/LoadingText.vue'
+export * from './components/Progress'
+export * from './components/Rating'
+export * from './components/Skeleton'
+export * from './components/Spinner'
+export * from './components/Tooltip'
+
+// Form controls
+export * from './components/Autocomplete'
 export * from './components/Checkbox'
 export * from './components/Combobox'
 export * from './components/DatePicker'
-export * from './components/Dialog'
-export { default as Dialogs } from './components/Dialogs.vue'
-export * from './components/Divider'
-export * from './components/Dropdown'
+export * from './components/Duration'
 export * from './components/ErrorMessage'
-export { default as FeatherIcon } from './components/FeatherIcon.vue'
 export * from './components/FileUploader'
 export * from './components/FormControl'
 export { default as FormLabel } from './components/FormLabel.vue'
-export { default as Input } from './components/Input.vue'
-export * from './components/ItemListRow'
-export { default as ListItem } from './components/ListItem.vue'
-export { default as ListEmptyState } from './components/ListView/ListEmptyState.vue'
-export { default as ListFooter } from './components/ListView/ListFooter.vue'
-export { default as ListGroupHeader } from './components/ListView/ListGroupHeader.vue'
-export { default as ListGroupRows } from './components/ListView/ListGroupRows.vue'
-export { default as ListGroups } from './components/ListView/ListGroups.vue'
-export { default as ListHeader } from './components/ListView/ListHeader.vue'
-export { default as ListHeaderItem } from './components/ListView/ListHeaderItem.vue'
-export { default as ListRow } from './components/ListView/ListRow.vue'
-export { default as ListRowItem } from './components/ListView/ListRowItem.vue'
-export { default as ListRows } from './components/ListView/ListRows.vue'
-export { default as ListSelectBanner } from './components/ListView/ListSelectBanner.vue'
-export {
-  default as List,
-  default as ListView,
-} from './components/ListView/ListView.vue'
-export { default as LoadingIndicator } from './components/LoadingIndicator.vue'
-export { default as LoadingText } from './components/LoadingText.vue'
-export * from './components/MonthPicker'
 export * from './components/MultiSelect'
 export * from './components/Password'
-export * from './components/Popover'
-export * from './components/Progress'
-export * from './components/Rating'
-export { default as Resource } from './components/Resource.vue'
 export * from './components/Select'
 export * from './components/Slider'
-export { default as Spinner } from './components/Spinner.vue'
 export * from './components/Switch'
-export * from './components/TabButtons'
-export { default as Tabs } from './components/Tabs/Tabs.vue'
 export * from './components/Textarea'
-export * from './components/TextEditor'
 export * from './components/TextInput'
 export * from './components/TimePicker'
+
+// Dialogs, menus, and feedback
+export * from './components/ContextMenu'
+export * from './components/Dialog'
+export { default as Dialogs } from './components/Dialogs.vue'
+export * from './components/Dropdown'
+export * from './components/HoverCard'
+export * from './components/Popover'
+export type { PopoverAlign, PopoverSide } from './components/Popover/types'
 export {
   dialog,
   type ConfirmArgs,
-  type ConfirmResult,
   type DialogNamespace,
   type PromptArgs,
   type PromptField,
-  type PromptResult,
 } from './utils/dialog'
-/** @deprecated Use the imperative `toast(...)` API instead. The `<Toast />` SFC will be removed in a future major. */
-export { default as Toast } from './components/Toast/Toast.vue'
 export { toast } from './components/Toast/toast'
 export { default as ToastProvider } from './components/Toast/ToastProvider.vue'
-export * from './components/Tooltip'
-export { default as CommandPalette } from './components/CommandPalette/CommandPalette.vue'
-export { default as CommandPaletteItem } from './components/CommandPalette/CommandPaletteItem.vue'
+
+// Lists and collection views
+export * from './components/ItemListRow'
+// Legacy ListView family. Do not deprecate until `frappe-ui/list` reaches parity.
+export * from './components/ListView'
 export { default as ListFilter } from './components/ListFilter/ListFilter.vue'
 export { default as NestedPopover } from './components/ListFilter/NestedPopover.vue'
-export { default as KeyboardShortcut } from './components/KeyboardShortcut.vue'
-export * from './components/KeyboardShortcutsModal'
-export * from './composables/useShortcut'
 export * from './components/Calendar'
-export * from './components/CircularProgressBar'
 export * from './components/Tree'
-export { default as FrappeUIProvider } from './components/Provider/FrappeUIProvider.vue'
+
+// Navigation and layout
+export * from './components/DesktopShell/index.ts'
+export * from './components/MobileNav/index.ts'
+export * from './components/MobileShell/index.ts'
+export * from './components/PageHeader'
+export * from './components/Rail'
+export * from './components/ScrollArea'
+export * from './components/SettingsDialog'
 export * from './components/Sidebar/index.ts'
-export { default as ConfirmDialog } from './components/ConfirmDialog.vue'
+export * from './components/TabButtons'
+export { default as Tabs } from './components/Tabs/Tabs.vue'
 
-// grid layout
-export { default as GridLayout } from './components/VueGridLayout/Layout.vue'
+// Command and keyboard surfaces
+export { default as CommandPalette } from './components/CommandPalette/CommandPalette.vue'
+export { default as CommandPaletteItem } from './components/CommandPalette/CommandPaletteItem.vue'
+export { default as KeyboardShortcut } from './components/KeyboardShortcut.vue'
+export * from './components/KeyboardShortcutsModal'
+export * from './composables/useShortcut'
 
-// chart components
+// Deprecated component compatibility
+/** @deprecated Use layout markup or domain-specific components instead. */
+// @ts-expect-error Deprecated JS SFC compatibility export.
+export { default as Card } from './components/Card.vue'
+/** @deprecated Use `dialog.confirm(...)` instead. */
+// @ts-expect-error Deprecated JS SFC compatibility export.
+export { default as ConfirmDialog } from './components/ConfirmDialog.vue'
+/** @deprecated Use `dialog.confirm(...)` instead. */
+export { confirmDialog } from './utils/confirmDialog.js'
+/** @deprecated Use lucide icon names or the `Icon` component instead. */
+// @ts-expect-error Deprecated JS SFC compatibility export.
+export { default as FeatherIcon } from './components/FeatherIcon.vue'
+/** @deprecated Use `TextInput` or `FormControl` instead. */
+// @ts-expect-error Deprecated JS SFC compatibility export.
+export { default as Input } from './components/Input.vue'
+/** @deprecated Use list primitives from `frappe-ui/list` or app-owned row markup instead. */
+// @ts-expect-error Deprecated JS SFC compatibility export.
+export { default as ListItem } from './components/ListItem.vue'
+/** @deprecated Use `Select` for month picking instead. */
+export * from './components/MonthPicker'
+/** @deprecated Use the imperative `toast(...)` API instead. The `<Toast />` SFC will be removed in a future major. */
+export { default as Toast } from './components/Toast/Toast.vue'
+/** @deprecated Use `Select` with `useTheme` instead. */
+export * from './components/ThemeSwitcher'
+/** @deprecated Use the `frappe-ui/editor` subpath instead. */
+export * from './components/TextEditor'
+/** @deprecated Use extensions from `frappe-ui/editor` instead. */
+export * from './components/TextEditor/extensions/image'
+/** @deprecated Use extensions from `frappe-ui/editor` instead. */
+export * from './components/TextEditor/extensions/suggestion'
+
+// Charts
 export { default as AxisChart } from './components/Charts/AxisChart.vue'
-export { default as useAxisChartOptions } from './components/Charts/axisChartOptions'
+export * from './components/CircularProgressBar'
 export { default as DonutChart } from './components/Charts/DonutChart.vue'
 export { default as ECharts } from './components/Charts/ECharts.vue'
 export { default as FunnelChart } from './components/Charts/FunnelChart.vue'
 export { default as NumberChart } from './components/Charts/NumberChart.vue'
+export { default as useAxisChartOptions } from './components/Charts/axisChartOptions'
+
+// Grid layout
+export { default as GridLayout } from './components/VueGridLayout/Layout.vue'
 
-// directives
+// Browser and responsive composables
+export * from './composables/useScreenSize'
+export * from './composables/useScrollContainer'
+
+// Directives
 export { default as focusDirective } from './directives/focus'
 export { default as onOutsideClickDirective } from './directives/onOutsideClick'
 export { default as visibilityDirective } from './directives/visibility'
 
-// utilities
-export * from './components/TextEditor/extensions/image'
-export * from './components/TextEditor/extensions/suggestion'
-export { default as call, createCall } from './utils/call.js'
+// Utilities
 export { dayjs, dayjsLocal } from './utils/dayjs'
 export { default as debounce } from './utils/debounce'
 export { default as fileToBase64 } from './utils/file-to-base64'
 export { default as FileUploadHandler } from './utils/fileUploadHandler'
-export { usePageMeta } from './utils/pageMeta'
+export * from './utils/fileSize'
 export * from './utils/theme'
 export * from './utils/useFileUpload'
-
-export { getConfig, setConfig } from './utils/config'
-export { frappeRequest } from './utils/frappeRequest.js'
-export { request } from './utils/request.js'
-export { default as initSocket } from './utils/socketio.js'
-
-// new data-fetching composables
-export * from './data-fetching'
-
-// plugin
-export { confirmDialog } from './utils/confirmDialog.js'
-export { default as pageMetaPlugin } from './utils/pageMeta.js'
-export { default as FrappeUI } from './utils/plugin.js'

package/src/mocks/handlers.ts

@@ -24,6 +24,10 @@ export const handlers = [
     )
   }),
 
+  http.get(url('/api/v2/method/network-error'), () => {
+    return HttpResponse.error()
+  }),
+
   http.post(url('/api/v2/method/post'), async ({ request }) => {
     const body = await request.json()
     return HttpResponse.json({
@@ -63,6 +67,10 @@ export const handlers = [
     })
   }),
 
+  http.get(url('/api/v2/document/InvalidDoctype'), () => {
+    return HttpResponse.error()
+  }),
+
   http.get(url('/api/v2/document/User/user1'), async () => {
     return HttpResponse.json({
       data: {

package/src/molecules/editor/Editor.cy.ts

@@ -97,13 +97,17 @@ describe('v1 editor browser behavior', () => {
     cy.contains('button', 'Embed').should('be.visible')
   })
 
-  it('opens the link editor near the clicked link, not at the top of the document', () => {
+  it('opens the link editor near the link, not at the top of the document', () => {
     mountEditor({
       topOffset: 320,
       content: '<p><a href="https://example.com">Example link</a></p>',
     })
 
+    // Plain click only places the caret (it no longer opens the popup); the
+    // link editor opens via Mod-k. A collapsed caret in the link opens it in
+    // view mode, which renders the href as an <a>.
     cy.contains('.ProseMirror a', 'Example link').click()
+    cy.get('.ProseMirror').type('{meta}k')
 
     cy.contains('a', 'https://example.com')
       .should('be.visible')
@@ -119,6 +123,7 @@ describe('v1 editor browser behavior', () => {
     })
 
     cy.contains('.ProseMirror a', 'Example link').click()
+    cy.get('.ProseMirror').type('{meta}k')
     cy.contains('a', 'https://example.com').should('be.visible')
 
     cy.get('.ProseMirror').click('bottomRight', { force: true })

package/src/molecules/editor/EditorBubbleMenu.vue

@@ -37,7 +37,7 @@ const floatingOptions = computed(() => {
   >
     <div
       data-slot="bubble-menu"
-      class="flex items-center gap-1 rounded border border-outline-gray-2 bg-surface-white p-1 shadow-sm"
+      class="flex items-center gap-1 rounded border border-outline-gray-2 bg-surface-elevation-2 p-1 shadow-sm"
     >
       <MenuItems :editor="editor" :items="items" />
     </div>

package/src/molecules/editor/EditorContent.vue

@@ -54,6 +54,39 @@ const rootAttrs = computed(() => {
   return rest
 })
 
+/**
+ * The content-styling tokens this component owns: our default prose typography
+ * plus whatever the consumer passed via `class`.
+ */
+const editorClassTokens = computed(() =>
+  normalizeClass([proseClass.value, attrs.class]).split(' ').filter(Boolean),
+)
+
+/**
+ * Apply `editorClassTokens` to the element with `classList`, adding/removing
+ * only the tokens we own.
+ *
+ * ProseMirror mounts directly onto `rootEl` and shares its `class` attribute:
+ * it adds `ProseMirror`/`tiptap` and toggles `ProseMirror-focused`. A Vue
+ * `:class` bound to the same element would be a second, non-surgical writer —
+ * each re-render replaces the whole token list, dropping ProseMirror's classes
+ * and silently breaking every `.ProseMirror`-scoped editor style (table borders,
+ * etc.). ProseMirror itself only ever adds/removes its own decoration tokens
+ * (see prosemirror-view `patchAttributes`), so mirroring that here — touching
+ * only our tokens — lets both owners coexist on one attribute.
+ */
+let appliedTokens: string[] = []
+function syncClasses() {
+  const el = rootEl.value
+  if (!el) return
+  const next = editorClassTokens.value
+  for (const token of appliedTokens) {
+    if (!next.includes(token)) el.classList.remove(token)
+  }
+  el.classList.add(...next)
+  appliedTokens = next
+}
+
 function mountEditor(editor: Editor | null) {
   const el = rootEl.value
   if (!el) return
@@ -63,11 +96,11 @@ function mountEditor(editor: Editor | null) {
   if (!editor) return
 
   const tiptapEditor = editor as any
-  tiptapEditor.contentComponent = instance?.ctx._
+  tiptapEditor.contentComponent = (instance as any)?.ctx._
   if (instance) {
     tiptapEditor.appContext = {
       ...instance.appContext,
-      provides: instance.provides,
+      provides: (instance as any).provides,
     }
   }
 
@@ -85,21 +118,29 @@ function unmountEditor() {
   mountedEditor = null
 }
 
-onMounted(() => mountEditor(resolvedEditor.value))
+onMounted(() => {
+  syncClasses()
+  mountEditor(resolvedEditor.value)
+})
 
 watch(resolvedEditor, async (editor) => {
   await nextTick()
   mountEditor(editor)
 })
 
+// Reactive consumer/prose classes update via our own surgical classList sync,
+// not a Vue `:class` binding (which would clobber ProseMirror's classes).
+watch(editorClassTokens, syncClasses)
+
 onBeforeUnmount(() => unmountEditor())
 </script>
 
 <template>
-  <div
-    ref="rootEl"
-    data-slot="editor-content"
-    v-bind="rootAttrs"
-    :class="[proseClass, attrs.class]"
-  />
+  <!--
+    No `:class` here on purpose — `rootEl` is also ProseMirror's editor element,
+    so its `class` attribute has two owners. Vue's `:class` is a wholesale
+    replace and would drop ProseMirror's classes; instead `syncClasses` manages
+    only our tokens via classList. See `editorClassTokens` above.
+  -->
+  <div ref="rootEl" data-slot="editor-content" v-bind="rootAttrs" />
 </template>

package/src/molecules/editor/EditorFixedMenu.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
   // Optional inside <Editor> — falls back to the provided editor context.
   editor?: Editor | null
   items: MenuItem[]
+  buttonSize?: 'xs' | 'sm'
 }>()
 
 const editor = useResolvedEditor(() => props.editor)
@@ -15,6 +16,6 @@ const editor = useResolvedEditor(() => props.editor)
 
 <template>
   <div data-slot="fixed-menu" class="flex items-center gap-1">
-    <MenuItems :editor="editor" :items="items" />
+    <MenuItems :editor="editor" :items="items" :button-size="buttonSize" />
   </div>
 </template>

package/src/molecules/editor/EditorFloatingMenu.vue

@@ -37,7 +37,7 @@ const floatingOptions = computed(() => {
   >
     <div
       data-slot="floating-menu"
-      class="flex items-center gap-1 rounded border border-outline-gray-2 bg-surface-white p-1 shadow-sm"
+      class="flex items-center gap-1 rounded border border-outline-gray-2 bg-surface-elevation-2 p-1 shadow-sm"
     >
       <MenuItems :editor="editor" :items="items" />
     </div>