frappe-ui 0.1.181 → 0.1.183

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.181",
+  "version": "0.1.183",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",

package/src/components/Sidebar/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex h-full flex-col flex-shrink-0 overflow-y-auto border-r border-outline-gray-1 bg-surface-menu-bar transition-all duration-300 ease-in-out p-2"
+    class="flex h-full flex-col flex-shrink-0 overflow-y-auto overflow-x-hidden border-r border-outline-gray-1 bg-surface-menu-bar transition-all duration-300 ease-in-out p-2"
     :class="isCollapsed ? 'w-12' : 'w-60'"
   >
     <SidebarHeader
@@ -11,8 +11,8 @@
       :logo="props.header.logo"
       :menu-items="props.header.menuItems"
     >
-      <template #header-logo>
-        <slot name="logo"></slot>
+      <template #logo>
+        <slot name="header-logo"></slot>
       </template>
     </SidebarHeader>
 
@@ -25,7 +25,7 @@
     />
 
     <div class="mt-auto flex flex-col gap-2">
-      <slot name="footer-items" />
+      <slot name="footer-items" v-bind="{ isCollapsed, isMobile }"/>
       <SidebarItem
         :label="isCollapsed ? 'Expand' : 'Collapse'"
         :isCollapsed="isCollapsed"

package/src/components/Sidebar/SidebarHeader.vue

@@ -14,17 +14,18 @@
         <div class="w-8 h-8 rounded overflow-hidden">
           <slot name="logo">
             <img
-              v-if="props.logo"
+              v-if="typeof props.logo === 'string'"
               :src="props.logo"
               class="w-full h-full object-cover"
               alt="Logo"
             />
             <div
-              v-else
+              v-else-if="!props.logo"
               class="w-full h-full bg-surface-gray-4 flex items-center justify-center text-ink-gray-7"
             >
               {{ props.title.charAt(0).toUpperCase() }}
             </div>
+            <component v-else :is="props.logo" class="w-full h-full" />
           </slot>
         </div>
         <div

package/src/components/Sidebar/SidebarSection.vue

@@ -4,7 +4,7 @@
       v-if="props.label"
       class="relative flex items-center gap-1 px-2 py-1.5"
       :class="props.collapsible ? 'cursor-pointer' : ''"
-      @click="isCollapsed = !isCollapsed"
+      @click="props.collapsible ? (isCollapsed = !isCollapsed) : null"
     >
       <h3
         class="h-4 text-sm text-ink-gray-5 transition-all duration-300 ease-in-out"
@@ -58,9 +58,9 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref } from 'vue';
-import SidebarItem from './SidebarItem.vue';
-import { SidebarSectionProps } from './types';
+import { inject, ref } from 'vue'
+import SidebarItem from './SidebarItem.vue'
+import { SidebarSectionProps } from './types'
 
 const props = defineProps<SidebarSectionProps>()
 

package/src/components/TextEditor/TextEditor.vue

@@ -55,7 +55,7 @@ import NamedHighlightExtension from './extensions/highlight'
 import { common, createLowlight } from 'lowlight'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import CodeBlockComponent from './CodeBlockComponent.vue'
-import configureMention from './mention'
+import { MentionExtension } from './extensions/mention'
 import TextEditorFixedMenu from './TextEditorFixedMenu.vue'
 import TextEditorBubbleMenu from './TextEditorBubbleMenu.vue'
 import TextEditorFloatingMenu from './TextEditorFloatingMenu.vue'
@@ -88,7 +88,7 @@ const props = withDefaults(defineProps<TextEditorProps>(), {
   floatingMenu: false,
   extensions: () => [],
   starterkitOptions: () => ({}),
-  mentions: () => [],
+  mentions: null,
   tags: () => [],
 })
 
@@ -120,7 +120,7 @@ watch(
         editor.value.commands.setContent(val)
       }
     }
-  }
+  },
 )
 
 watch(
@@ -129,7 +129,7 @@ watch(
     if (editor.value) {
       editor.value.setEditable(value)
     }
-  }
+  },
 )
 
 watch(
@@ -141,7 +141,7 @@ watch(
       })
     }
   },
-  { deep: true }
+  { deep: true },
 )
 
 onMounted(() => {
@@ -203,7 +203,15 @@ onMounted(() => {
             ? props.placeholder
             : () => props.placeholder as string,
       }),
-      configureMention(props.mentions),
+      props.mentions &&
+        MentionExtension.configure(
+          Array.isArray(props.mentions)
+            ? { mentions: props.mentions }
+            : {
+                mentions: props.mentions.mentions,
+                component: props.mentions.component,
+              },
+        ),
       EmojiExtension,
       SlashCommands,
       TagNode,
@@ -238,7 +246,7 @@ onBeforeUnmount(() => {
 
 provide(
   'editor',
-  computed(() => editor.value)
+  computed(() => editor.value),
 )
 
 defineExpose({
@@ -275,12 +283,6 @@ img.ProseMirror-selectednode {
   outline: 2px solid var(--outline-gray-2);
 }
 
-/* Mentions */
-.mention {
-  font-weight: 600;
-  box-decoration-break: clone;
-}
-
 /* Table styles */
 .prose table p {
   margin: 0;

package/src/components/TextEditor/extensions/mention/index.ts

@@ -0,0 +1 @@
+export { MentionExtension } from './mention-extension'

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

@@ -0,0 +1,180 @@
+import { MaybeRefOrGetter, toValue, type Component } from 'vue'
+import { Extension, Node, mergeAttributes } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import { PluginKey } from '@tiptap/pm/state'
+import {
+  createSuggestionExtension,
+  BaseSuggestionItem,
+} from '../suggestion/createSuggestionExtension'
+import SuggestionList from '../suggestion/SuggestionList.vue'
+import './style.css'
+
+export interface MentionSuggestionItem extends BaseSuggestionItem {
+  id: string
+  label: string
+  value?: string
+  email?: string
+  full_name?: string
+}
+
+function createMentionNode(component?: Component) {
+  const config: any = {
+    name: 'mention',
+    group: 'inline',
+    inline: true,
+    selectable: true,
+    atom: true,
+
+    addOptions() {
+      return {
+        component: undefined,
+      }
+    },
+
+    addAttributes() {
+      return {
+        id: {
+          default: null,
+          parseHTML: (element: HTMLElement) => element.getAttribute('data-id'),
+          renderHTML: (attributes: any) => {
+            if (!attributes.id) {
+              return {}
+            }
+            return { 'data-id': attributes.id }
+          },
+        },
+        label: {
+          default: null,
+          parseHTML: (element: HTMLElement) =>
+            element.getAttribute('data-label'),
+          renderHTML: (attributes: any) => {
+            if (!attributes.label) {
+              return {}
+            }
+            return { 'data-label': attributes.label }
+          },
+        },
+      }
+    },
+
+    parseHTML() {
+      return [
+        {
+          tag: 'span.mention[data-type="mention"]',
+          getAttrs: (dom: any) => {
+            const element = dom as HTMLElement
+            return {
+              id: element.getAttribute('data-id'),
+              label: element.getAttribute('data-label'),
+            }
+          },
+        },
+      ]
+    },
+
+    renderHTML({ HTMLAttributes }: any) {
+      return [
+        'span',
+        mergeAttributes(HTMLAttributes, {
+          class: 'mention',
+          'data-type': 'mention',
+        }),
+        `@${HTMLAttributes['data-label'] || HTMLAttributes.id || ''}`,
+      ]
+    },
+  }
+
+  if (component) {
+    config.addNodeView = () => {
+      return VueNodeViewRenderer(component)
+    }
+  }
+
+  return Node.create(config)
+}
+
+const MentionSuggestionExtension =
+  createSuggestionExtension<MentionSuggestionItem>({
+    name: 'mentionSuggestion',
+    char: '@',
+    pluginKey: new PluginKey('mentionSuggestion'),
+    component: SuggestionList,
+
+    addOptions() {
+      return {
+        mentions: [],
+      }
+    },
+
+    items: ({ query, editor }) => {
+      const { mentions: _mentions } = editor.extensionManager.extensions.find(
+        (ext) => ext.name === 'mentionSuggestion',
+      )!.options
+      const mentions = toValue(_mentions)
+
+      const filtered = mentions
+        .filter((mention: MentionSuggestionItem) =>
+          mention.label.toLowerCase().startsWith(query.toLowerCase()),
+        )
+        .slice(0, 10)
+        .map((mention: MentionSuggestionItem) => ({
+          ...mention,
+          display: mention.label,
+        }))
+
+      return filtered
+    },
+
+    command: ({ editor, range, props }) => {
+      const attributes = {
+        id: props.id || props.value,
+        label: props.label,
+      }
+
+      editor
+        .chain()
+        .focus()
+        .insertContentAt(range, [
+          {
+            type: 'mention',
+            attrs: attributes,
+          },
+          {
+            type: 'text',
+            text: ' ',
+          },
+        ])
+        .run()
+    },
+
+    tippyOptions: {
+      placement: 'bottom-start',
+      offset: [0, 8],
+    },
+    allowSpaces: false,
+    decorationTag: 'span',
+    decorationClass: 'mention-suggestion-active',
+  })
+
+export const MentionExtension = Extension.create<{
+  mentions: MaybeRefOrGetter<MentionSuggestionItem[]>
+  component?: Component
+}>({
+  name: 'mentionExtension',
+
+  addOptions() {
+    return {
+      mentions: [],
+      component: undefined,
+    }
+  },
+
+  addExtensions() {
+    return [
+      createMentionNode(this.options.component),
+      MentionSuggestionExtension.configure({
+        mentions: this.options.mentions,
+      }),
+    ]
+  },
+})

package/src/components/TextEditor/extensions/mention/style.css

@@ -0,0 +1,7 @@
+.mention {
+  font-weight: 600;
+  box-decoration-break: clone;
+  padding: 1px 3px;
+  border-radius: 4px;
+  display: inline-block;
+}

package/src/components/TextEditor/types.ts

@@ -1,4 +1,14 @@
+import { type Component } from 'vue'
 import { type UploadedFile } from '../../utils/useFileUpload'
+import { type MentionSuggestionItem } from './extensions/mention/mention-extension'
+
+type ConfigureMentionOptions =
+  | {
+      mentions: MentionSuggestionItem[]
+      component?: Component
+    }
+  | MentionSuggestionItem[]
+  | null
 
 export interface TextEditorProps {
   content?: string | null
@@ -11,7 +21,7 @@ export interface TextEditorProps {
   floatingMenu?: boolean | any[]
   extensions?: any[]
   starterkitOptions?: any
-  mentions?: any[]
+  mentions?: ConfigureMentionOptions
   tags?: any[]
   uploadFunction?: (file: File) => Promise<UploadedFile>
 }

package/src/index.ts

@@ -40,13 +40,7 @@ export { default as TabList } from './components/Tabs/TabList.vue'
 export { default as TabPanel } from './components/Tabs/TabPanel.vue'
 export * from './components/TextInput'
 export * from './components/Textarea'
-export {
-  TextEditor,
-  TextEditorFixedMenu,
-  TextEditorBubbleMenu,
-  TextEditorFloatingMenu,
-  TextEditorContent,
-} from './components/TextEditor'
+export * from './components/TextEditor'
 export { default as ListView } from './components/ListView/ListView.vue'
 export { default as List } from './components/ListView/ListView.vue'
 export { default as ListHeader } from './components/ListView/ListHeader.vue'