frappe-ui 0.1.174 → 0.1.176

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.174",
+  "version": "0.1.176",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",
@@ -35,27 +35,29 @@
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.16",
-    "@tiptap/core": "^2.11.7",
-    "@tiptap/extension-code-block": "^2.11.9",
-    "@tiptap/extension-code-block-lowlight": "^2.11.5",
-    "@tiptap/extension-color": "^2.0.3",
-    "@tiptap/extension-heading": "^2.12.0",
-    "@tiptap/extension-highlight": "^2.0.3",
-    "@tiptap/extension-image": "^2.0.3",
-    "@tiptap/extension-link": "^2.0.3",
-    "@tiptap/extension-mention": "^2.0.3",
-    "@tiptap/extension-placeholder": "^2.0.3",
-    "@tiptap/extension-table": "^2.0.3",
-    "@tiptap/extension-table-cell": "^2.0.3",
-    "@tiptap/extension-table-header": "^2.0.3",
-    "@tiptap/extension-table-row": "^2.0.3",
-    "@tiptap/extension-text-align": "^2.0.3",
-    "@tiptap/extension-text-style": "^2.0.3",
-    "@tiptap/extension-typography": "^2.0.3",
-    "@tiptap/pm": "^2.0.3",
-    "@tiptap/starter-kit": "^2.0.3",
-    "@tiptap/suggestion": "^2.0.3",
-    "@tiptap/vue-3": "^2.0.3",
+    "@tiptap/core": "^2.26.1",
+    "@tiptap/extension-code-block": "^2.26.1",
+    "@tiptap/extension-code-block-lowlight": "^2.26.1",
+    "@tiptap/extension-color": "^2.26.1",
+    "@tiptap/extension-heading": "^2.26.1",
+    "@tiptap/extension-highlight": "^2.26.1",
+    "@tiptap/extension-image": "^2.26.1",
+    "@tiptap/extension-link": "^2.26.1",
+    "@tiptap/extension-mention": "^2.26.1",
+    "@tiptap/extension-placeholder": "^2.26.1",
+    "@tiptap/extension-table": "^2.26.1",
+    "@tiptap/extension-table-cell": "^2.26.1",
+    "@tiptap/extension-table-header": "^2.26.1",
+    "@tiptap/extension-table-row": "^2.26.1",
+    "@tiptap/extension-task-item": "^2.26.1",
+    "@tiptap/extension-task-list": "^2.26.1",
+    "@tiptap/extension-text-align": "^2.26.1",
+    "@tiptap/extension-text-style": "^2.26.1",
+    "@tiptap/extension-typography": "^2.26.1",
+    "@tiptap/pm": "^2.26.1",
+    "@tiptap/starter-kit": "^2.26.1",
+    "@tiptap/suggestion": "^2.26.1",
+    "@tiptap/vue-3": "^2.26.1",
     "@vueuse/core": "^10.4.1",
     "dayjs": "^1.11.13",
     "dompurify": "^3.2.6",
@@ -69,14 +71,12 @@
     "marked": "^15.0.12",
     "ora": "5.4.1",
     "prettier": "^3.3.2",
-    "prosemirror-model": "^1.25.1",
-    "prosemirror-state": "^1.4.3",
-    "prosemirror-view": "^1.39.2",
     "radix-vue": "^1.5.3",
     "reka-ui": "^2.0.2",
     "socket.io-client": "^4.5.1",
     "tippy.js": "^6.3.7",
     "typescript": "^5.0.2",
+    "unplugin-auto-import": "^19.3.0",
     "unplugin-icons": "^22.1.0",
     "unplugin-vue-components": "^28.4.1"
   },
@@ -99,6 +99,12 @@
     "vue": "^3.3.0",
     "vue-router": "^4.1.6"
   },
+  "resolutions": {
+    "prosemirror-model": "1.25.2",
+    "prosemirror-state": "1.4.3",
+    "prosemirror-view": "1.40.0",
+    "prosemirror-transform": "1.10.4"
+  },
   "lint-staged": {
     "*.{js,css,md,vue}": "prettier --write"
   }

package/src/components/Sidebar/Sidebar.story.vue

@@ -20,6 +20,7 @@ const crmSidebar = reactive({
   header: {
     title: 'Frappe CRM',
     subtitle: 'Jane Doe',
+    logo: 'https://raw.githubusercontent.com/frappe/crm/develop/.github/logo.svg',
     menuItems: [
       { label: 'Toggle Theme', icon: Moon, onClick: toggleTheme },
       { label: 'Help', to: '/help', icon: Settings, onClick: () => alert('Help clicked!') },

package/src/components/Sidebar/Sidebar.vue

@@ -8,8 +8,13 @@
       :isCollapsed="isCollapsed"
       :title="props.header.title"
       :subtitle="props.header.subtitle"
+      :logo="props.header.logo"
       :menu-items="props.header.menuItems"
-    />
+    >
+      <template #header-logo>
+        <slot name="logo"></slot>
+      </template>
+    </SidebarHeader>
 
     <SidebarSection
       v-for="section in props.sections"

package/src/components/Sidebar/SidebarHeader.vue

@@ -11,11 +11,22 @@
               : 'px-2 hover:bg-surface-gray-3'
         "
       >
-        <slot name="logo">
-          <div class="w-8 h-8 rounded bg-surface-gray-4 flex items-center justify-center text-ink-gray-7">
-            {{ props.title.charAt(0).toUpperCase() }}
-          </div>
-        </slot>
+        <div class="w-8 h-8 rounded overflow-hidden">
+          <slot name="logo">
+            <img
+              v-if="props.logo"
+              :src="props.logo"
+              class="w-full h-full object-cover"
+              alt="Logo"
+            />
+            <div
+              v-else
+              class="w-full h-full bg-surface-gray-4 flex items-center justify-center text-ink-gray-7"
+            >
+              {{ props.title.charAt(0).toUpperCase() }}
+            </div>
+          </slot>
+        </div>
         <div
           class="flex flex-1 flex-col text-left duration-300 ease-in-out truncate"
           :class="
@@ -23,8 +34,10 @@
               ? 'ml-0 w-0 overflow-hidden opacity-0'
               : 'ml-2 w-auto opacity-100'
           "
-          >
-          <div class="text-base font-medium text-ink-gray-8 leading-none">{{ props.title }}</div>
+        >
+          <div class="text-base font-medium text-ink-gray-8 leading-none">
+            {{ props.title }}
+          </div>
           <div class="mt-1 text-sm text-ink-gray-6 leading-none">
             {{ props.subtitle }}
           </div>
@@ -36,8 +49,8 @@
               ? 'ml-0 w-0 overflow-hidden opacity-0'
               : 'ml-2 w-auto opacity-100'
           "
-          >
-          <LucideChevronDown class="h-4 w-4 text-ink-gray-7"/>
+        >
+          <LucideChevronDown class="h-4 w-4 text-ink-gray-7" />
         </div>
       </button>
     </template>
@@ -45,11 +58,11 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue';
-import LucideChevronDown from '~icons/lucide/chevron-down';
-import { SidebarHeaderProps } from './types';
-import Dropdown from '../Dropdown/Dropdown.vue';
+import { inject } from 'vue'
+import LucideChevronDown from '~icons/lucide/chevron-down'
+import Dropdown from '../Dropdown/Dropdown.vue'
+import { SidebarHeaderProps } from './types'
 
-const props = defineProps<SidebarHeaderProps>();
-const isCollapsed = inject('isSidebarCollapsed', false);
+const props = defineProps<SidebarHeaderProps>()
+const isCollapsed = inject('isSidebarCollapsed', false)
 </script>

package/src/components/Sidebar/types.ts

@@ -3,6 +3,7 @@ import { RouteLocationRaw } from 'vue-router'
 export type SidebarHeaderProps = {
   title: string
   subtitle?: string
+  logo?: string
   menuItems?: {
     label: string
     icon: any // Icon component

package/src/components/TextEditor/Menu.vue

@@ -28,14 +28,15 @@
               </button>
             </template>
             <template #body="{ close }">
-              <ul class="rounded border bg-surface-white p-1 shadow-md">
+              <ul
+                class="p-1.5 mt-2 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+              >
                 <li
-                  class="w-full"
                   v-for="option in button"
                   v-show="option.isDisabled ? !option.isDisabled(editor) : true"
                 >
                   <button
-                    class="w-full rounded px-2 py-1 text-left text-base hover:bg-surface-menu-bar"
+                    class="h-7 rounded px-2 text-base flex items-center gap-2 hover:bg-surface-gray-3"
                     @click="
                       () => {
                         onButtonClick(option)
@@ -43,7 +44,16 @@
                       }
                     "
                   >
-                    {{ option.label }}
+                    <component
+                      v-if="option.icon"
+                      :is="option.icon"
+                      class="size-4 flex-shrink-0 text-ink-gray-6"
+                    />
+                    <span
+                      v-if="option.label"
+                      class="whitespace-nowrap text-ink-gray-7"
+                      >{{ option.label }}</span
+                    >
                   </button>
                 </li>
               </ul>
@@ -54,11 +64,12 @@
           <template v-slot="componentSlotProps">
             <button
               class="flex rounded p-1 text-ink-gray-8 transition-colors"
-              :class="
+              :class="[
                 button.isActive(editor) || componentSlotProps?.isActive
-                  ? 'bg-surface-gray-2'
-                  : 'hover:bg-surface-gray-2'
-              "
+                  ? 'bg-surface-gray-3'
+                  : 'hover:bg-surface-gray-2',
+                button.class,
+              ]"
               @click="
                 componentSlotProps?.onClick
                   ? componentSlotProps.onClick(button)

package/src/components/TextEditor/TextEditor.vue

@@ -11,11 +11,11 @@
       :buttons="fixedMenu"
     />
     <TextEditorFloatingMenu :buttons="floatingMenu" />
-    <slot name="top" />
+    <slot name="top" :editor />
     <slot name="editor" :editor="editor">
       <EditorContent :editor="editor" />
     </slot>
-    <slot name="bottom" />
+    <slot name="bottom" :editor />
   </div>
 </template>
 
@@ -48,6 +48,8 @@ import VideoExtension from './video-extension'
 import LinkExtension from './link-extension'
 import Typography from '@tiptap/extension-typography'
 import TextStyle from '@tiptap/extension-text-style'
+import TaskItem from '@tiptap/extension-task-item'
+import TaskList from '@tiptap/extension-task-list'
 import NamedColorExtension from './extensions/color'
 import NamedHighlightExtension from './extensions/highlight'
 import { common, createLowlight } from 'lowlight'
@@ -79,6 +81,7 @@ const props = withDefaults(defineProps<TextEditorProps>(), {
   placeholder: '',
   editorClass: '',
   editable: true,
+  autofocus: false,
   bubbleMenu: false,
   bubbleMenuOptions: () => ({}),
   fixedMenu: false,
@@ -117,7 +120,7 @@ watch(
         editor.value.commands.setContent(val)
       }
     }
-  },
+  }
 )
 
 watch(
@@ -126,7 +129,7 @@ watch(
     if (editor.value) {
       editor.value.setEditable(value)
     }
-  },
+  }
 )
 
 watch(
@@ -138,7 +141,7 @@ watch(
       })
     }
   },
-  { deep: true },
+  { deep: true }
 )
 
 onMounted(() => {
@@ -146,6 +149,7 @@ onMounted(() => {
     content: props.content || null,
     editorProps: editorProps.value,
     editable: props.editable,
+    autofocus: props.autofocus,
     extensions: [
       StarterKit.configure({
         ...props.starterkitOptions,
@@ -161,6 +165,10 @@ onMounted(() => {
       Table.configure({
         resizable: true,
       }),
+      TaskList,
+      TaskItem.configure({
+        nested: true,
+      }),
       TableRow,
       TableHeader,
       TableCell,
@@ -230,7 +238,7 @@ onBeforeUnmount(() => {
 
 provide(
   'editor',
-  computed(() => editor.value),
+  computed(() => editor.value)
 )
 
 defineExpose({
@@ -302,6 +310,44 @@ img.ProseMirror-selectednode {
   pointer-events: none;
 }
 
+.ProseMirror ul[data-type='taskList'] {
+  list-style: none;
+  padding: 0;
+
+  li {
+    align-items: flex-start;
+    display: flex;
+    margin: 0;
+
+    > label {
+      flex: 0 0 auto;
+      margin-right: 0.5rem;
+      margin-top: 0.25rem;
+      height: 1.5em;
+      display: flex;
+      align-items: center;
+      user-select: none;
+    }
+
+    > div {
+      flex: 1 1 auto;
+      margin-bottom: 0;
+
+      > p {
+        margin: 0.25rem 0;
+      }
+    }
+  }
+
+  input[type='checkbox'] {
+    cursor: pointer;
+    width: 14px;
+    height: 14px;
+    border-radius: 4px;
+    color: theme('colors.gray.900');
+  }
+}
+
 .resize-cursor {
   cursor: ew-resize;
   cursor: col-resize;

package/src/components/TextEditor/TextEditorBubbleMenu.vue

@@ -37,11 +37,13 @@ export default {
           'Separator',
           'Bold',
           'Italic',
+          'Strikethrough',
           'FontColor',
           'Link',
           'Separator',
           'Bullet List',
           'Numbered List',
+          'Task List',
           'Separator',
           'Align Left',
           'Align Center',

package/src/components/TextEditor/TextEditorFixedMenu.vue

@@ -33,6 +33,7 @@ export default {
           'Separator',
           'Bullet List',
           'Numbered List',
+          'Task List',
           'Separator',
           'Align Left',
           'Align Center',

package/src/components/TextEditor/TextEditorFloatingMenu.vue

@@ -47,6 +47,7 @@ export default {
           'Heading 3',
           'Bullet List',
           'Numbered List',
+          'Task List',
           'Blockquote',
           'Code',
           'Horizontal Rule',

package/src/components/TextEditor/commands.js

@@ -9,12 +9,14 @@ import Text from './icons/text.vue'
 import Bold from './icons/bold.vue'
 import Italic from './icons/italic.vue'
 import Underline from './icons/underline.vue'
+import Strikethrough from './icons/strikethrough.vue'
 import AlignCenter from './icons/align-center.vue'
 import AlignLeft from './icons/align-left.vue'
 import AlignRight from './icons/align-right.vue'
 import FontColor from './icons/font-color.vue'
 import ListOrdered from './icons/list-ordered.vue'
 import ListUnordered from './icons/list-unordered.vue'
+import ListTask from './icons/list-task.vue'
 import DoubleQuotes from './icons/double-quotes-r.vue'
 import CodeView from './icons/code-view.vue'
 import Link from './icons/link.vue'
@@ -98,6 +100,12 @@ export default {
     action: (editor) => editor.chain().focus().toggleUnderline().run(),
     isActive: (editor) => editor.isActive('underline'),
   },
+  Strikethrough: {
+    label: 'Strikethrough',
+    icon: Strikethrough,
+    action: (editor) => editor.chain().focus().toggleStrike().run(),
+    isActive: (editor) => editor.isActive('strike'),
+  },
   'Bullet List': {
     label: 'Bullet List',
     icon: ListUnordered,
@@ -110,6 +118,12 @@ export default {
     action: (editor) => editor.chain().focus().toggleOrderedList().run(),
     isActive: (editor) => editor.isActive('orderedList'),
   },
+  'Task List': {
+    label: 'Task List',
+    icon: ListTask,
+    action: (editor) => editor.chain().focus().toggleTaskList().run(),
+    isActive: (editor) => editor.isActive('taskList'),
+  },
   'Align Center': {
     label: 'Align Center',
     icon: AlignCenter,

package/src/components/TextEditor/extensions/content-paste-extension.ts

@@ -1,7 +1,7 @@
 import { Extension } from '@tiptap/core'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { DOMParser } from '@tiptap/pm/model'
-import { EditorView } from 'prosemirror-view'
+import { EditorView } from '@tiptap/pm/view'
 import { detectMarkdown, markdownToHTML } from '../../../utils/markdown'
 import { processMultipleImages } from './image/image-extension'
 

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

@@ -1,4 +1,4 @@
-import { PluginKey } from 'prosemirror-state'
+import { PluginKey } from '@tiptap/pm/state'
 import {
   BaseSuggestionItem,
   createSuggestionExtension,

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

@@ -5,8 +5,8 @@ import {
 } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import ImageNodeView from './ImageNodeView.vue'
-import { Plugin, Selection, Transaction, EditorState } from 'prosemirror-state'
-import { EditorView } from 'prosemirror-view'
+import { Plugin, Selection, Transaction, EditorState } from '@tiptap/pm/state'
+import { EditorView } from '@tiptap/pm/view'
 import { Node } from '@tiptap/pm/model'
 import { fileToBase64 } from '../../../../index'
 import { UploadedFile } from '../../../../utils/useFileUpload'

package/src/components/TextEditor/extensions/slash-commands/slash-commands-extension.ts

@@ -1,5 +1,5 @@
 import { Editor, Range } from '@tiptap/core'
-import { PluginKey } from 'prosemirror-state'
+import { PluginKey } from '@tiptap/pm/state'
 import {
   createSuggestionExtension,
   type BaseSuggestionItem,
@@ -11,6 +11,7 @@ import Heading2 from '~icons/lucide/heading-2'
 import Heading3 from '~icons/lucide/heading-3'
 import List from '~icons/lucide/list'
 import ListOrdered from '~icons/lucide/list-ordered'
+import ListTask from '~icons/lucide/list-checks'
 import Code from '~icons/lucide/code'
 import Quote from '~icons/lucide/quote'
 import Image from '~icons/lucide/image'
@@ -67,12 +68,19 @@ const getCommands = (): CommandItem[] => [
     },
   },
   {
-    title: 'Ordered List',
+    title: 'Numbered List',
     icon: ListOrdered,
     command: ({ editor, range }: CommandExecutionProps) => {
       editor.chain().focus().deleteRange(range).toggleOrderedList().run()
     },
   },
+  {
+    title: 'Task List',
+    icon: ListTask,
+    command: ({ editor, range }: CommandExecutionProps) => {
+      editor.chain().focus().deleteRange(range).toggleTaskList().run()
+    },
+  },
   {
     title: 'Code Block',
     icon: Code,

package/src/components/TextEditor/extensions/suggestion/createSuggestionExtension.ts

@@ -4,7 +4,7 @@ import Suggestion, {
   SuggestionOptions,
   SuggestionProps,
 } from '@tiptap/suggestion'
-import { PluginKey } from 'prosemirror-state'
+import { PluginKey } from '@tiptap/pm/state'
 import tippy, { Instance as TippyInstance, Props as TippyProps } from 'tippy.js'
 import { Component as VueComponent } from 'vue'
 

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

@@ -1,5 +1,5 @@
 import { Node, mergeAttributes, Range, Editor } from '@tiptap/core'
-import { PluginKey } from 'prosemirror-state'
+import { PluginKey } from '@tiptap/pm/state'
 import {
   createSuggestionExtension,
   BaseSuggestionItem,

package/src/components/TextEditor/icons/list-task.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-list-checks-icon lucide-list-checks"
+  >
+    <path d="m3 17 2 2 4-4" />
+    <path d="m3 7 2 2 4-4" />
+    <path d="M13 6h8" />
+    <path d="M13 12h8" />
+    <path d="M13 18h8" />
+  </svg>
+</template>

package/src/components/TextEditor/image-viewer-extension.ts

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/core'
-import { Plugin, PluginKey } from 'prosemirror-state'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { createApp, h } from 'vue'
 import ImageViewerModal from './ImageViewerModal.vue'
 

package/src/components/TextEditor/link-extension.ts

@@ -2,8 +2,8 @@ import { createApp, h } from 'vue'
 import Link from '@tiptap/extension-link'
 import tippy, { type Instance as TippyInstance } from 'tippy.js'
 import { getMarkRange, Range, Editor } from '@tiptap/core'
-import { MarkType, Mark as ProseMirrorMark } from 'prosemirror-model'
-import { Plugin, PluginKey } from 'prosemirror-state'
+import { MarkType, Mark as ProseMirrorMark } from '@tiptap/pm/model'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
 import EditLink from './EditLink.vue'
 import { linkPasteHandler } from './linkPasteHandler'
 

package/src/components/TextEditor/video-extension.ts

@@ -1,6 +1,6 @@
 import { Node, mergeAttributes, Editor } from '@tiptap/core'
 import { Node as ProseMirrorNode } from '@tiptap/pm/model'
-import { EditorView } from 'prosemirror-view'
+import { EditorView } from '@tiptap/pm/view'
 import { UploadedFile } from '../../utils/useFileUpload'
 
 export interface VideoOptions {

package/src/tailwind/plugin.js

@@ -398,7 +398,7 @@ export default plugin(
         }),
       },
     },
-  },
+  }
 )
 
 function em(pixels, base = 16) {

package/vite/lucideIcons.js

@@ -1,18 +1,21 @@
 import * as LucideIcons from 'lucide-static'
+import AutoImport from 'unplugin-auto-import/vite'
 import Icons from 'unplugin-icons/vite'
 import Components from 'unplugin-vue-components/vite'
 import IconsResolver from 'unplugin-icons/resolver'
 
 export function lucideIcons() {
+  const resolverObj = {
+    resolvers: [
+      IconsResolver({
+        prefix: false,
+        enabledCollections: ['lucide'],
+      }),
+    ],
+  }
   return [
-    Components({
-      resolvers: [
-        IconsResolver({
-          prefix: false,
-          enabledCollections: ['lucide'],
-        }),
-      ],
-    }),
+    AutoImport(resolverObj),
+    Components(resolverObj),
     Icons({
       customCollections: {
         lucide: getIcons(),