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

package/src/components/TabButtons/types.ts

@@ -0,0 +1,49 @@
+import type { Component } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import type { PillSize } from './pillTypes'
+
+export type TabButtonValue = string | number | boolean
+export type TabButtonIcon = string | Component
+export type NativeButtonClass = string | string[] | Record<string, boolean>
+export type TabButtonsType = 'subtle' | 'ghost' | 'underline' | 'browser-tab'
+export type TabButtonsDirection = 'left' | 'right'
+
+export interface TabButton {
+  label?: string | number
+  value?: TabButtonValue
+  /** Icon-only tab; `label` becomes accessibility text. */
+  icon?: TabButtonIcon
+  /** Leading accent icon, rendered next to the visible label. */
+  iconLeft?: TabButtonIcon
+  /** Trailing accent icon, rendered next to the visible label. */
+  iconRight?: TabButtonIcon
+  active?: boolean
+  disabled?: boolean
+  tooltip?: string
+  class?: NativeButtonClass
+  /** Renders the tab as a `<RouterLink>` to the given target. */
+  route?: RouteLocationRaw
+  /** Renders the tab as an `<a href>`, opens in a new tab. */
+  href?: string
+  onClick?: (event: MouseEvent) => void
+}
+
+export interface TabButtonsProps {
+  /** List of options to render. */
+  options?: TabButton[]
+
+  /** @deprecated Use `options` instead. */
+  buttons?: TabButton[]
+
+  modelValue?: TabButtonValue
+  type?: TabButtonsType
+  size?: PillSize
+  vertical?: boolean
+
+  /** Edge the active browser tab attaches to. Only used when `type='browser-tab'` and `vertical`. */
+  direction?: TabButtonsDirection
+}
+
+export interface TabButtonsEmits {
+  'update:modelValue': [value: TabButtonValue | undefined]
+}

package/src/components/Tabs/Tabs.md

@@ -2,6 +2,10 @@
 
 Organizes content into separate panels that users can switch between. Makes navigating related sections quick and intuitive.
 
+## Playground
+
+<ClientOnly><TabsBuilder /></ClientOnly>
+
 ## Orientation
 <ComponentPreview name="Tabs-Orientation" />
 

package/src/components/Tabs/Tabs.vue

@@ -84,7 +84,7 @@ defineSlots<{
         class="absolute rounded-full duration-300"
         :class="props.vertical ? indicatorYCss : indicatorXCss"
       >
-        <div class="w-full h-full bg-surface-gray-7" />
+        <div class="w-full h-full bg-surface-gray-10" />
       </TabsIndicator>
 
       <TabsTrigger as="template" v-for="(tab, i) in props.tabs" :value="i">

package/src/components/TextEditor/TextEditor.cy.ts

@@ -81,7 +81,7 @@ describe('<TextEditor />', () => {
     })
 
     // The fixed menu component in TextEditor.vue has these specific classes
-    cy.get('.rounded-t-lg.border.border-outline-gray-modals').should('exist')
+    cy.get('.rounded-t-lg.border.border-outline-elevation-2').should('exist')
     // Should contain some default buttons like Bold
     cy.get('button[title="Bold"]').should('exist')
   })

package/src/components/TextEditor/TextEditor.md

@@ -1,5 +1,8 @@
 # TextEditor
 
+Deprecated: use the `frappe-ui/editor` subpath instead. The replacement API is
+`Editor` plus the editor kits and menu primitives documented on the Editor page.
+
 A rich text editor based on TipTap for creating and formatting content. Offers intuitive controls, styling options, and smooth editing experience.
 
 ## Default

package/src/components/TextEditor/TextEditor.vue

@@ -9,7 +9,7 @@
   >
     <TextEditorBubbleMenu :buttons="bubbleMenu" :options="bubbleMenuOptions" />
     <TextEditorFixedMenu
-      class="w-full overflow-x-auto rounded-t-lg border border-outline-gray-modals"
+      class="w-full overflow-x-auto rounded-t-lg border border-outline-elevation-2"
       :buttons="fixedMenu"
     />
     <TextEditorFloatingMenu :buttons="floatingMenu" />
@@ -40,8 +40,6 @@ import {
   useTemplateRef,
 } from 'vue'
 
-defineOptions({ inheritAttrs: false })
-
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import { Placeholder } from '@tiptap/extensions'
@@ -81,10 +79,15 @@ import { useFileUpload } from '../../utils/useFileUpload'
 import { TextEditorEmits, TextEditorProps } from './types'
 import { getTagExtensions } from './extensions/tag'
 
+defineOptions({ inheritAttrs: false })
+
 function defaultUploadFunction(file: File) {
   // useFileUpload is frappe specific
   let fileUpload = useFileUpload()
-  return fileUpload.upload(file, props.uploadArgs || {})
+  // Default uploads to private so editor images/attachments are not served from
+  // the unauthenticated /files/ path (frappe/security#206). Callers can still
+  // override via uploadArgs (e.g. `private: false` for intentionally public files).
+  return fileUpload.upload(file, { private: true, ...(props.uploadArgs || {}) })
 }
 
 const props = withDefaults(defineProps<TextEditorProps>(), {

package/src/components/TextEditor/components/CodeBlockComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <node-view-wrapper>
     <div class="code-block-container">
-      <pre><code><node-view-content /></code></pre>
+      <pre class="hljs-pre"><code><node-view-content /></code></pre>
       <select
         v-if="isEditable"
         class="language-selector form-select py-0"
@@ -70,6 +70,8 @@ export default {
 </script>
 
 <style>
+@import '../hljs-github.css';
+
 /* CodeBlock styles */
 .code-block {
   position: relative;
@@ -97,197 +99,5 @@ export default {
   user-select: none;
 }
 
-/* ── pre shell ────────────────────────────────────────────────── */
-.ProseMirror pre {
-  background: #f6f8fa;
-  color: #24292e;
-  font-family:
-    ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Mono', 'Source Code Pro', 'Fira Mono',
-    'Droid Sans Mono', 'Consolas', 'Courier New', monospace;
-  font-size: 12px;
-  line-height: 1.7;
-  padding: 0.75rem 1rem;
-  border-radius: 0.75rem;
-  border: 1px solid var(--outline-gray-2);
-  caret-color: #24292e;
-}
-
-.ProseMirror pre code {
-  color: inherit;
-  padding: 0;
-  background: none;
-  font-size: inherit;
-}
-
-/* ── highlight.js — GitHub light ─────────────────────────────── */
-.ProseMirror pre .hljs-doctag,
-.ProseMirror pre .hljs-keyword,
-.ProseMirror pre .hljs-meta .hljs-keyword,
-.ProseMirror pre .hljs-template-tag,
-.ProseMirror pre .hljs-template-variable,
-.ProseMirror pre .hljs-type,
-.ProseMirror pre .hljs-variable.language_ {
-  color: #d73a49;
-}
-
-.ProseMirror pre .hljs-title,
-.ProseMirror pre .hljs-title.class_,
-.ProseMirror pre .hljs-title.class_.inherited__,
-.ProseMirror pre .hljs-title.function_ {
-  color: #6f42c1;
-}
-
-.ProseMirror pre .hljs-attr,
-.ProseMirror pre .hljs-attribute,
-.ProseMirror pre .hljs-literal,
-.ProseMirror pre .hljs-meta,
-.ProseMirror pre .hljs-number,
-.ProseMirror pre .hljs-operator,
-.ProseMirror pre .hljs-variable,
-.ProseMirror pre .hljs-selector-attr,
-.ProseMirror pre .hljs-selector-class,
-.ProseMirror pre .hljs-selector-id {
-  color: #005cc5;
-}
-
-.ProseMirror pre .hljs-regexp,
-.ProseMirror pre .hljs-string,
-.ProseMirror pre .hljs-meta .hljs-string {
-  color: #032f62;
-}
-
-.ProseMirror pre .hljs-built_in,
-.ProseMirror pre .hljs-symbol {
-  color: #e36209;
-}
-
-.ProseMirror pre .hljs-comment,
-.ProseMirror pre .hljs-code,
-.ProseMirror pre .hljs-formula {
-  color: #6a737d;
-}
-
-.ProseMirror pre .hljs-name,
-.ProseMirror pre .hljs-quote,
-.ProseMirror pre .hljs-selector-tag,
-.ProseMirror pre .hljs-selector-pseudo {
-  color: #22863a;
-}
-
-.ProseMirror pre .hljs-subst {
-  color: #24292e;
-}
-.ProseMirror pre .hljs-section {
-  color: #005cc5;
-  font-weight: bold;
-}
-.ProseMirror pre .hljs-bullet {
-  color: #735c0f;
-}
-.ProseMirror pre .hljs-emphasis {
-  color: #24292e;
-  font-style: italic;
-}
-.ProseMirror pre .hljs-strong {
-  color: #24292e;
-  font-weight: 700;
-}
-.ProseMirror pre .hljs-addition {
-  color: #22863a;
-  background-color: #f0fff4;
-}
-.ProseMirror pre .hljs-deletion {
-  color: #b31d28;
-  background-color: #ffeef0;
-}
-
-/* ── pre shell — dark mode ───────────────────────────────────── */
-[data-theme='dark'] .ProseMirror pre {
-  background: #0d1117;
-  color: #c9d1d9;
-  caret-color: #c9d1d9;
-}
-
-/* ── highlight.js — GitHub dark ──────────────────────────────── */
-[data-theme='dark'] .ProseMirror pre .hljs-doctag,
-[data-theme='dark'] .ProseMirror pre .hljs-keyword,
-[data-theme='dark'] .ProseMirror pre .hljs-meta .hljs-keyword,
-[data-theme='dark'] .ProseMirror pre .hljs-template-tag,
-[data-theme='dark'] .ProseMirror pre .hljs-template-variable,
-[data-theme='dark'] .ProseMirror pre .hljs-type,
-[data-theme='dark'] .ProseMirror pre .hljs-variable.language_ {
-  color: #ff7b72;
-}
-
-[data-theme='dark'] .ProseMirror pre .hljs-title,
-[data-theme='dark'] .ProseMirror pre .hljs-title.class_,
-[data-theme='dark'] .ProseMirror pre .hljs-title.class_.inherited__,
-[data-theme='dark'] .ProseMirror pre .hljs-title.function_ {
-  color: #d2a8ff;
-}
-
-[data-theme='dark'] .ProseMirror pre .hljs-attr,
-[data-theme='dark'] .ProseMirror pre .hljs-attribute,
-[data-theme='dark'] .ProseMirror pre .hljs-literal,
-[data-theme='dark'] .ProseMirror pre .hljs-meta,
-[data-theme='dark'] .ProseMirror pre .hljs-number,
-[data-theme='dark'] .ProseMirror pre .hljs-operator,
-[data-theme='dark'] .ProseMirror pre .hljs-variable,
-[data-theme='dark'] .ProseMirror pre .hljs-selector-attr,
-[data-theme='dark'] .ProseMirror pre .hljs-selector-class,
-[data-theme='dark'] .ProseMirror pre .hljs-selector-id {
-  color: #79c0ff;
-}
-
-[data-theme='dark'] .ProseMirror pre .hljs-regexp,
-[data-theme='dark'] .ProseMirror pre .hljs-string,
-[data-theme='dark'] .ProseMirror pre .hljs-meta .hljs-string {
-  color: #a5d6ff;
-}
-
-[data-theme='dark'] .ProseMirror pre .hljs-built_in,
-[data-theme='dark'] .ProseMirror pre .hljs-symbol {
-  color: #ffa657;
-}
-
-[data-theme='dark'] .ProseMirror pre .hljs-comment,
-[data-theme='dark'] .ProseMirror pre .hljs-code,
-[data-theme='dark'] .ProseMirror pre .hljs-formula {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ProseMirror pre .hljs-name,
-[data-theme='dark'] .ProseMirror pre .hljs-quote,
-[data-theme='dark'] .ProseMirror pre .hljs-selector-tag,
-[data-theme='dark'] .ProseMirror pre .hljs-selector-pseudo {
-  color: #7ee787;
-}
-
-[data-theme='dark'] .ProseMirror pre .hljs-subst {
-  color: #c9d1d9;
-}
-[data-theme='dark'] .ProseMirror pre .hljs-section {
-  color: #1f6feb;
-  font-weight: bold;
-}
-[data-theme='dark'] .ProseMirror pre .hljs-bullet {
-  color: #f2cc60;
-}
-[data-theme='dark'] .ProseMirror pre .hljs-emphasis {
-  color: #c9d1d9;
-  font-style: italic;
-}
-[data-theme='dark'] .ProseMirror pre .hljs-strong {
-  color: #c9d1d9;
-  font-weight: 700;
-}
-[data-theme='dark'] .ProseMirror pre .hljs-addition {
-  color: #aff5b4;
-  background-color: #033a16;
-}
-[data-theme='dark'] .ProseMirror pre .hljs-deletion {
-  color: #ffdcd7;
-  background-color: #67060c;
-}
+/* ── pre shell (editor-specific overrides) ──────────────────── */
 </style>

package/src/components/TextEditor/components/FontColor.vue

@@ -97,7 +97,7 @@ export default {
     },
     backgroundColors() {
       return [
-        { name: 'Default', class: 'border-outline-gray-modals' },
+        { name: 'Default', class: 'border-outline-elevation-2' },
         {
           name: 'Red',
           class: 'bg-red-100 dark:bg-dark-red-800 border-transparent',

package/src/components/TextEditor/components/LinkPopup.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="p-2 w-72 flex items-center gap-2 bg-surface-white shadow-xl rounded"
+    class="p-2 w-72 flex items-center gap-2 bg-surface-base shadow-xl rounded"
   >
     <TextInput
       v-if="edit"

package/src/components/TextEditor/components/MediaNodeView.vue

@@ -290,39 +290,39 @@ const wrapperClasses = (float: string) => [
           :class="selected && isEditable ? 'flex' : 'hidden'">
           <button>
             <LucideCaptions @click="toggleCaptions" class="size-4"
-              :class="[showCaption ? 'text-ink-white' : 'text-ink-gray-4']" />
+              :class="[showCaption ? 'text-ink-base' : 'text-ink-gray-4']" />
           </button>
           <button v-if="!isVideo" @click.stop="toggleAlignPopper"
-            class="hover:text-ink-white text-ink-gray-4"
-            :class="[node.attrs.align ? 'text-ink-white' : 'text-ink-gray-4']">
+            class="hover:text-ink-base text-ink-gray-4"
+            :class="[node.attrs.align ? 'text-ink-base' : 'text-ink-gray-4']">
             <component :is="currentAlignIcon" class="size-4" />
           </button>
-          <!-- <button @click.stop="toggleFloatPopper" class="hover:text-ink-white text-ink-gray-4"
-            :class="[node.attrs.float ? 'text-ink-white' : 'text-ink-gray-4']">
+          <!-- <button @click.stop="toggleFloatPopper" class="hover:text-ink-base text-ink-gray-4"
+            :class="[node.attrs.float ? 'text-ink-base' : 'text-ink-gray-4']">
             <component :is="currentFloatIcon" class="size-4" />
           </button> -->
 
           <div ref="alignButtonRef" v-if="showAlignPopper && !isVideo"
             class="absolute top-full mt-1 right-6 bg-black/65 rounded shadow-lg px-1.5 py-1 z-50 gap-2.5 flex items-center">
             <Tooltip text="Align left" class="h-5">
-              <button @click="setAlignment('left')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.align === 'left'
-                ? 'text-ink-white'
+              <button @click="setAlignment('left')" class="text-ink-gray-4 hover:text-ink-base" :class="node.attrs.align === 'left'
+                ? 'text-ink-base'
                 : 'text-ink-gray-4'
                 ">
                 <LucideAlignLeft class="size-4" />
               </button>
             </Tooltip>
             <Tooltip text="Align center" class="h-5">
-              <button @click="setAlignment('center')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.align === 'center'
-                ? 'text-ink-white'
+              <button @click="setAlignment('center')" class="text-ink-gray-4 hover:text-ink-base" :class="node.attrs.align === 'center'
+                ? 'text-ink-base'
                 : 'text-ink-gray-4'
                 ">
                 <LucideAlignCenter class="size-4" />
               </button>
             </Tooltip>
             <Tooltip text="Align right" class="h-5">
-              <button @click="setAlignment('right')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.align === 'right'
-                ? 'text-ink-white'
+              <button @click="setAlignment('right')" class="text-ink-gray-4 hover:text-ink-base" :class="node.attrs.align === 'right'
+                ? 'text-ink-base'
                 : 'text-ink-gray-4'
                 ">
                 <LucideAlignRight class="size-4" />
@@ -333,23 +333,23 @@ const wrapperClasses = (float: string) => [
           <div v-if="showFloatPopper" ref="floatButtonRef"
             class="absolute top-full mt-1 right-0 bg-black/65 rounded shadow-lg px-1.5 py-1 z-50 gap-2.5 flex items-center">
             <Tooltip text="Float left" class="h-5">
-              <button @click="setFloat('left')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.float === 'left'
-                ? 'text-ink-white'
+              <button @click="setFloat('left')" class="text-ink-gray-4 hover:text-ink-base" :class="node.attrs.float === 'left'
+                ? 'text-ink-base'
                 : 'text-ink-gray-4'
                 ">
                 <LucideFloatLeft class="size-4" />
               </button>
             </Tooltip>
             <Tooltip text="Float right" class="h-5">
-              <button @click="setFloat('right')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.float === 'right'
-                ? 'text-ink-white'
+              <button @click="setFloat('right')" class="text-ink-gray-4 hover:text-ink-base" :class="node.attrs.float === 'right'
+                ? 'text-ink-base'
                 : 'text-ink-gray-4'
                 ">
                 <LucideFloatRight class="size-4" />
               </button>
             </Tooltip>
             <Tooltip v-if="node.attrs.float" text="Remove float" class="h-5">
-              <button @click="setFloat(null)" class="text-ink-gray-4 hover:text-ink-white hover:bg-transparent">
+              <button @click="setFloat(null)" class="text-ink-gray-4 hover:text-ink-base hover:bg-transparent">
                 <LucideNoFloat class="size-4" />
               </button>
             </Tooltip>
@@ -381,7 +381,7 @@ const wrapperClasses = (float: string) => [
       </div>
       <div v-else class="flex flex-col items-center justify-center gap-2 border rounded text-ink-gray-6 text-sm py-5 max-w-full" :class="{ 'border-none': selected }" :style="{ width: node.attrs.width + 'px', aspectRatio: node.attrs.width && node.attrs.height ? `${node.attrs.width} / ${node.attrs.height}` : undefined,}">
         <div class="text-ink-gray-8 text-base">This {{ isVideo ? 'video' : 'image' }} hasn't yet been uploaded.</div>
-        <div v-if="node.attrs.error" class="text-sm text-ink-red-4">Upload failed: {{ node.attrs.error }}</div>
+        <div v-if="node.attrs.error" class="text-sm text-ink-red-8">{{ node.attrs.error }}</div>
       </div>
 
       <input v-if="(node.attrs.alt || showCaption) && !node.attrs.error" v-model="caption"

package/src/components/TextEditor/components/MentionList.vue

@@ -2,7 +2,7 @@
   <div>
     <div
       v-if="items.length"
-      class="min-w-40 rounded-lg border bg-surface-white p-1 text-base shadow-lg"
+      class="min-w-40 rounded-lg border bg-surface-base p-1 text-base shadow-lg"
     >
       <button
         :class="[

package/src/components/TextEditor/components/TextEditorBubbleMenu.vue

@@ -1,18 +1,27 @@
 <template>
-  <BubbleMenu v-if="bubbleMenuButtons" class="bubble-menu rounded-md z-[100]"
-    :class="bubbleMenuButtons.length > 1 && 'shadow-sm'" :editor="editor" v-bind="options">
-    <Menu class="rounded" :class="bubbleMenuButtons.length > 1 && 'shadow-lg'" :buttons="bubbleMenuButtons" />
+  <BubbleMenu
+    v-if="bubbleMenuButtons"
+    class="bubble-menu rounded-md z-[100]"
+    :class="bubbleMenuButtons.length > 1 && 'shadow-sm'"
+    :editor="editor"
+    v-bind="options"
+  >
+    <TextEditorMenu
+      class="rounded"
+      :class="bubbleMenuButtons.length > 1 && 'shadow-lg'"
+      :buttons="bubbleMenuButtons"
+    />
   </BubbleMenu>
 </template>
 <script>
 import { BubbleMenu } from '@tiptap/vue-3/menus'
 import { createEditorButton } from '../utils'
-import Menu from './Menu.vue'
+import TextEditorMenu from './TextEditorMenu.vue'
 
 export default {
   name: 'TextEditorBubbleMenu',
   props: ['buttons', 'options'],
-  components: { BubbleMenu, Menu },
+  components: { BubbleMenu, TextEditorMenu },
   inject: ['editor'],
   computed: {
     bubbleMenuButtons() {

package/src/components/TextEditor/components/TextEditorFixedMenu.vue

@@ -1,14 +1,14 @@
 <template>
-  <Menu v-if="fixedMenuButtons" :buttons="fixedMenuButtons" />
+  <TextEditorMenu v-if="fixedMenuButtons" :buttons="fixedMenuButtons" />
 </template>
 <script>
-import Menu from './Menu.vue'
+import TextEditorMenu from './TextEditorMenu.vue'
 import { createEditorButton } from '../utils'
 
 export default {
   name: 'TextEditorFixedMenu',
   props: ['buttons'],
-  components: { Menu },
+  components: { TextEditorMenu },
   inject: ['editor'],
   computed: {
     fixedMenuButtons() {

package/src/components/TextEditor/components/{Menu.vue → TextEditorMenu.vue}

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex bg-surface-white p-1">
+  <div class="inline-flex bg-surface-base p-1">
     <div class="inline-flex items-center gap-1.5">
       <template
         v-for="(button, index) in buttons"
@@ -16,7 +16,7 @@
             <Popover>
               <template #target="{ togglePopover }">
                 <button
-                  class="rounded p-1 text-base font-medium text-ink-gray-8 transition-colors"
+                  class="rounded p-1 text-base-medium text-ink-gray-8 transition-colors"
                   @click="togglePopover"
                   :class="
                     getActiveButton(button)
@@ -36,7 +36,7 @@
               </template>
               <template #body="{ close }">
                 <ul
-                  class="p-1.5 mt-2 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+                  class="p-1.5 mt-2 rounded-lg bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
                 >
                   <li
                     v-for="option in button"

package/src/components/TextEditor/extensions/iframe/InsertIframe.vue

@@ -10,7 +10,7 @@
       <template #body-content>
         <div class="space-y-4">
           <div>
-            <label class="block text-sm font-medium text-ink-gray-7 mb-2">
+            <label class="mb-2 block text-base text-ink-gray-5">
               URL or Embed Code
             </label>
             <Textarea
@@ -25,7 +25,7 @@
             </p>
             <p
               v-else-if="embedUrl && isValidUrl"
-              class="text-ink-green-3 text-sm mt-1"
+              class="text-ink-green-6 text-sm mt-1"
             >
               ✓ Valid {{ platformInfo.platform }} URL
             </p>