frappe-ui 0.1.180 → 0.1.182

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.180",
+  "version": "0.1.182",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",
@@ -67,7 +67,7 @@
     "highlight.js": "^11.11.1",
     "idb-keyval": "^6.2.0",
     "lowlight": "^3.3.0",
-    "lucide-static": "^0.479.0",
+    "lucide-static": "^0.535.0",
     "marked": "^15.0.12",
     "ora": "5.4.1",
     "prettier": "^3.3.2",

package/src/components/Button/Button.story.vue

@@ -9,6 +9,7 @@ const state = reactive({
   loadingText: null,
   disabled: false,
   link: null,
+  tooltip: 'Hover for more!',
 })
 const variants = ['solid', 'subtle', 'outline', 'ghost']
 const themes = ['gray', 'blue', 'green', 'red']

package/src/components/Button/Button.vue

@@ -1,55 +1,57 @@
 <template>
-  <button
-    v-bind="$attrs"
-    :class="buttonClasses"
-    @click="handleClick"
-    :disabled="isDisabled"
-    :ariaLabel="ariaLabel"
-  >
-    <LoadingIndicator
-      v-if="loading"
-      :class="{
-        'h-3 w-3': size == 'sm',
-        'h-[13.5px] w-[13.5px]': size == 'md',
-        'h-[15px] w-[15px]': size == 'lg',
-        'h-4.5 w-4.5': size == 'xl' || size == '2xl',
-      }"
-    />
-    <slot name="prefix" v-else-if="$slots['prefix'] || iconLeft">
-      <FeatherIcon
-        v-if="iconLeft && typeof iconLeft === 'string'"
-        :name="iconLeft"
-        :class="slotClasses"
-        aria-hidden="true"
+  <Tooltip :text="tooltip" :disabled="!tooltip?.length">
+    <button
+      v-bind="$attrs"
+      :class="buttonClasses"
+      @click="handleClick"
+      :disabled="isDisabled"
+      :ariaLabel="ariaLabel"
+    >
+      <LoadingIndicator
+        v-if="loading"
+        :class="{
+          'h-3 w-3': size == 'sm',
+          'h-[13.5px] w-[13.5px]': size == 'md',
+          'h-[15px] w-[15px]': size == 'lg',
+          'h-4.5 w-4.5': size == 'xl' || size == '2xl',
+        }"
       />
-      <component v-else-if="iconLeft" :is="iconLeft" :class="slotClasses" />
-    </slot>
-
-    <template v-if="loading && loadingText">{{ loadingText }}</template>
-    <template v-else-if="isIconButton && !loading">
-      <FeatherIcon
-        v-if="icon && typeof icon === 'string'"
-        :name="icon"
-        :class="slotClasses"
-        :aria-label="label"
-      />
-      <component v-else-if="icon" :is="icon" :class="slotClasses" />
-      <slot name="icon" v-else-if="$slots.icon" />
-    </template>
-    <span v-else :class="{ 'sr-only': isIconButton }" class="truncate">
-      <slot>{{ label }}</slot>
-    </span>
-
-    <slot name="suffix">
-      <FeatherIcon
-        v-if="iconRight && typeof iconRight === 'string'"
-        :name="iconRight"
-        :class="slotClasses"
-        aria-hidden="true"
-      />
-      <component v-else-if="iconRight" :is="iconRight" :class="slotClasses" />
-    </slot>
-  </button>
+      <slot name="prefix" v-else-if="$slots['prefix'] || iconLeft">
+        <FeatherIcon
+          v-if="iconLeft && typeof iconLeft === 'string'"
+          :name="iconLeft"
+          :class="slotClasses"
+          aria-hidden="true"
+        />
+        <component v-else-if="iconLeft" :is="iconLeft" :class="slotClasses" />
+      </slot>
+
+      <template v-if="loading && loadingText">{{ loadingText }}</template>
+      <template v-else-if="isIconButton && !loading">
+        <FeatherIcon
+          v-if="icon && typeof icon === 'string'"
+          :name="icon"
+          :class="slotClasses"
+          :aria-label="label"
+        />
+        <component v-else-if="icon" :is="icon" :class="slotClasses" />
+        <slot name="icon" v-else-if="$slots.icon" />
+      </template>
+      <span v-else :class="{ 'sr-only': isIconButton }" class="truncate">
+        <slot>{{ label }}</slot>
+      </span>
+
+      <slot name="suffix">
+        <FeatherIcon
+          v-if="iconRight && typeof iconRight === 'string'"
+          :name="iconRight"
+          :class="slotClasses"
+          aria-hidden="true"
+        />
+        <component v-else-if="iconRight" :is="iconRight" :class="slotClasses" />
+      </slot>
+    </button>
+  </Tooltip>
 </template>
 <script lang="ts" setup>
 import { computed, useSlots } from 'vue'
@@ -57,6 +59,7 @@ import FeatherIcon from '../FeatherIcon.vue'
 import LoadingIndicator from '../LoadingIndicator.vue'
 import { useRouter } from 'vue-router'
 import type { ButtonProps, ThemeVariant } from './types'
+import Tooltip from '../Tooltip/Tooltip.vue'
 
 const props = withDefaults(defineProps<ButtonProps>(), {
   theme: 'gray',

package/src/components/Button/types.ts

@@ -13,6 +13,7 @@ export interface ButtonProps {
   icon?: string | Component
   iconLeft?: string | Component
   iconRight?: string | Component
+  tooltip?: string
   loading?: boolean
   loadingText?: string
   disabled?: boolean

package/src/components/Dropdown/Dropdown.story.vue

@@ -11,6 +11,7 @@ const actions = [
   {
     label: 'Delete',
     icon: 'trash-2',
+    theme: 'red',
     onClick: () => console.log('Delete clicked'),
   },
 ]
@@ -69,6 +70,7 @@ const groupedActions = [
       {
         label: 'Delete',
         icon: 'trash-2',
+        theme: 'red',
         onClick: () => console.log('Delete clicked'),
       },
     ],
@@ -93,6 +95,12 @@ const submenuActions = [
             icon: 'file-text',
             onClick: () => console.log('New Template clicked'),
           },
+          {
+            label: 'Delete',
+            icon: 'trash-2',
+            theme: 'red',
+            onClick: () => console.log('Delete clicked'),
+          },
         ],
       },
       {

package/src/components/Dropdown/Dropdown.vue

@@ -21,122 +21,145 @@
         :align="contentAlign"
         :side-offset="4"
       >
-        <div
-          v-for="group in groups"
-          :key="group.key"
-          :class="cssClasses.groupContainer"
-        >
-          <DropdownMenuLabel
-            v-if="group.group && !group.hideLabel"
-            :class="cssClasses.groupLabel"
-          >
-            {{ group.group }}
-          </DropdownMenuLabel>
+        <template v-for="group in groups" :key="group.key">
+          <div v-if="group.items.length" :class="cssClasses.groupContainer">
+            <DropdownMenuLabel
+              v-if="group.group && !group.hideLabel"
+              :class="[cssClasses.groupLabel, getTextColor(group)]"
+            >
+              {{ group.group }}
+            </DropdownMenuLabel>
 
-          <DropdownMenuItem
-            v-for="item in group.items"
-            :key="item.label"
-            as-child
-            @select="item.onClick"
-          >
-            <component
-              v-if="item.component"
-              :is="item.component"
-              :active="false"
-            />
-            <DropdownMenuSub v-else-if="item.submenu">
-              <DropdownMenuSubTrigger as-child>
-                <button :class="cssClasses.submenuTrigger">
-                  <FeatherIcon
-                    v-if="item.icon && typeof item.icon === 'string'"
-                    :name="item.icon"
-                    :class="cssClasses.itemIcon"
-                    aria-hidden="true"
-                  />
-                  <component
-                    :class="cssClasses.itemIcon"
-                    v-else-if="item.icon"
-                    :is="item.icon"
-                  />
-                  <span :class="cssClasses.itemLabel">
-                    {{ item.label }}
-                  </span>
-                  <FeatherIcon
-                    name="chevron-right"
-                    :class="cssClasses.chevronIcon"
-                    aria-hidden="true"
-                  />
-                </button>
-              </DropdownMenuSubTrigger>
-              <DropdownMenuPortal>
-                <DropdownMenuSubContent
-                  :class="cssClasses.dropdownContent"
-                  :side-offset="4"
-                >
-                  <div
-                    v-for="submenuGroup in getSubmenuGroups(item.submenu)"
-                    :key="submenuGroup.key"
-                    :class="cssClasses.groupContainer"
+            <DropdownMenuItem
+              v-for="item in group.items"
+              :key="item.label"
+              as-child
+              @select="item.onClick"
+            >
+              <component
+                v-if="item.component"
+                :is="item.component"
+                :active="false"
+              />
+              <DropdownMenuSub v-else-if="item.submenu">
+                <DropdownMenuSubTrigger as-child>
+                  <button
+                    :class="[
+                      cssClasses.submenuTrigger,
+                      getSubmenuBackgroundColor(item),
+                    ]"
+                  >
+                    <FeatherIcon
+                      v-if="item.icon && typeof item.icon === 'string'"
+                      :name="item.icon"
+                      :class="[cssClasses.itemIcon, getIconColor(item)]"
+                      aria-hidden="true"
+                    />
+                    <component
+                      :class="[cssClasses.itemIcon, getIconColor(item)]"
+                      v-else-if="item.icon"
+                      :is="item.icon"
+                    />
+                    <span :class="[cssClasses.itemLabel, getTextColor(item)]">
+                      {{ item.label }}
+                    </span>
+                    <FeatherIcon
+                      name="chevron-right"
+                      :class="[cssClasses.chevronIcon, getIconColor(item)]"
+                      aria-hidden="true"
+                    />
+                  </button>
+                </DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                  <DropdownMenuSubContent
+                    :class="cssClasses.dropdownContent"
+                    :side-offset="4"
                   >
-                    <DropdownMenuLabel
-                      v-if="submenuGroup.group && !submenuGroup.hideLabel"
-                      :class="cssClasses.groupLabel"
+                    <div
+                      v-for="submenuGroup in getSubmenuGroups(item.submenu)"
+                      :key="submenuGroup.key"
+                      :class="cssClasses.groupContainer"
                     >
-                      {{ submenuGroup.group }}
-                    </DropdownMenuLabel>
+                      <DropdownMenuLabel
+                        v-if="submenuGroup.group && !submenuGroup.hideLabel"
+                        :class="cssClasses.groupLabel"
+                      >
+                        {{ submenuGroup.group }}
+                      </DropdownMenuLabel>
 
-                    <DropdownMenuItem
-                      v-for="subItem in submenuGroup.items"
-                      :key="subItem.label"
-                      as-child
-                      @select="() => handleItemClick(subItem)"
-                    >
-                      <component
-                        v-if="subItem.component"
-                        :is="subItem.component"
-                        :active="false"
-                      />
-                      <button v-else :class="cssClasses.itemButton">
-                        <FeatherIcon
-                          v-if="
-                            subItem.icon && typeof subItem.icon === 'string'
-                          "
-                          :name="subItem.icon"
-                          :class="cssClasses.itemIcon"
-                          aria-hidden="true"
-                        />
+                      <DropdownMenuItem
+                        v-for="subItem in submenuGroup.items"
+                        :key="subItem.label"
+                        as-child
+                        @select="() => handleItemClick(subItem)"
+                      >
                         <component
-                          :class="cssClasses.itemIcon"
-                          v-else-if="subItem.icon"
-                          :is="subItem.icon"
+                          v-if="subItem.component"
+                          :is="subItem.component"
+                          :active="false"
                         />
-                        <span :class="cssClasses.itemLabel">
-                          {{ subItem.label }}
-                        </span>
-                      </button>
-                    </DropdownMenuItem>
-                  </div>
-                </DropdownMenuSubContent>
-              </DropdownMenuPortal>
-            </DropdownMenuSub>
-            <button v-else :class="cssClasses.itemButton">
-              <FeatherIcon
-                v-if="item.icon && typeof item.icon === 'string'"
-                :name="item.icon"
-                :class="cssClasses.itemIcon"
-                aria-hidden="true"
-              />
-              <component
-                :class="cssClasses.itemIcon"
-                v-else-if="item.icon"
-                :is="item.icon"
-              />
-              <span :class="cssClasses.itemLabel">
-                {{ item.label }}
-              </span>
-            </button>
-          </DropdownMenuItem>
-        </div>
+                        <button
+                          v-else
+                          :class="[
+                            cssClasses.itemButton,
+                            getBackgroundColor(subItem),
+                          ]"
+                        >
+                          <FeatherIcon
+                            v-if="
+                              subItem.icon && typeof subItem.icon === 'string'
+                            "
+                            :name="subItem.icon"
+                            :class="[
+                              cssClasses.itemIcon,
+                              getIconColor(subItem),
+                            ]"
+                            aria-hidden="true"
+                          />
+                          <component
+                            :class="[
+                              cssClasses.itemIcon,
+                              getIconColor(subItem),
+                            ]"
+                            v-else-if="subItem.icon"
+                            :is="subItem.icon"
+                          />
+                          <span
+                            :class="[
+                              cssClasses.itemLabel,
+                              getTextColor(subItem),
+                            ]"
+                          >
+                            {{ subItem.label }}
+                          </span>
+                        </button>
+                      </DropdownMenuItem>
+                    </div>
+                  </DropdownMenuSubContent>
+                </DropdownMenuPortal>
+              </DropdownMenuSub>
+              <button
+                v-else
+                :class="[cssClasses.itemButton, getBackgroundColor(item)]"
+              >
+                <FeatherIcon
+                  v-if="item.icon && typeof item.icon === 'string'"
+                  :name="item.icon"
+                  :class="[cssClasses.itemIcon, getIconColor(item)]"
+                  aria-hidden="true"
+                />
+                <component
+                  :class="[cssClasses.itemIcon, getIconColor(item)]"
+                  v-else-if="item.icon"
+                  :is="item.icon"
+                />
+                <span :class="[cssClasses.itemLabel, getTextColor(item)]"
+                  >{{ item.label }}
+                </span>
+              </button>
+            </DropdownMenuItem>
+          </div>
+        </template>
       </DropdownMenuContent>
     </DropdownMenuPortal>
   </DropdownMenuRoot>
@@ -163,6 +186,7 @@ import type {
   DropdownOption,
   DropdownGroupOption,
   DropdownOptions,
+  DropdownItem,
 } from './types'
 
 defineOptions({
@@ -189,6 +213,7 @@ const handleItemClick = (item: DropdownOption) => {
 const normalizeDropdownItem = (option: DropdownOption) => {
   return {
     label: option.label,
+    theme: option.theme || 'gray',
     icon: option.icon,
     component: option.component,
     onClick: () => handleItemClick(option),
@@ -196,6 +221,19 @@ const normalizeDropdownItem = (option: DropdownOption) => {
   }
 }
 
+const getIconColor = (item: DropdownItem) =>
+  item.theme === 'red' ? 'text-ink-red-3' : 'text-ink-gray-6'
+const getTextColor = (item: DropdownItem) =>
+  item.theme === 'red' ? 'text-ink-red-3' : 'text-ink-gray-7'
+const getBackgroundColor = (item: DropdownItem) =>
+  item.theme === 'red'
+    ? 'focus:bg-surface-red-3 data-[highlighted]:bg-surface-red-3 data-[state=open]:bg-surface-red-3'
+    : 'focus:bg-surface-gray-3 data-[highlighted]:bg-surface-gray-3 data-[state=open]:bg-surface-gray-3'
+const getSubmenuBackgroundColor = (item: DropdownItem) =>
+  getBackgroundColor(item) +
+  ' data-[state=open]:bg-surface-' +
+  (item.theme === 'red' ? 'red-3' : 'gray-3')
+
 // Unified group processing for both main options and submenu options
 const processOptionsIntoGroups = (
   options: DropdownOptions,
@@ -260,18 +298,18 @@ const cssClasses = {
   groupContainer: 'p-1.5',
 
   // Label classes
-  groupLabel: 'flex h-7 items-center px-2 text-sm font-medium text-ink-gray-6',
-  itemLabel: 'whitespace-nowrap text-ink-gray-7',
+  groupLabel: 'flex h-7 items-center px-2 text-sm font-medium',
+  itemLabel: 'whitespace-nowrap',
 
   // Icon classes
-  itemIcon: 'mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6',
-  chevronIcon: 'ml-auto h-4 w-4 flex-shrink-0 text-ink-gray-6',
+  itemIcon: 'mr-2 h-4 w-4 flex-shrink-0',
+  chevronIcon: 'ml-auto h-4 w-4 flex-shrink-0',
 
   // Button classes
   itemButton:
-    'group flex h-7 w-full items-center rounded px-2 text-base text-ink-gray-6 focus:bg-surface-gray-3 focus:outline-none data-[highlighted]:bg-surface-gray-3',
+    'group flex h-7 w-full items-center rounded px-2 text-base focus:outline-none',
   submenuTrigger:
-    'group flex h-7 w-full items-center rounded px-2 text-base text-ink-gray-6 focus:bg-surface-gray-3 focus:outline-none data-[highlighted]:bg-surface-gray-3 data-[state=open]:bg-surface-gray-3',
+    'group flex h-7 w-full items-center rounded px-2 text-base text-ink-gray-6 focus:outline-none',
 }
 
 const groups = computed(() => {

package/src/components/Dropdown/types.ts

@@ -4,6 +4,7 @@ import { ButtonProps } from '../Button'
 export type DropdownOption = {
   label: string
   icon?: string | null
+  theme?: 'gray' | 'red'
   component?: any
   onClick?: () => void
   route?: RouterLinkProps['to']
@@ -16,9 +17,11 @@ export type DropdownGroupOption = {
   group: string
   items: DropdownOption[]
   hideLabel?: boolean
+  theme?: 'gray' | 'red'
 }
+export type DropdownItem = DropdownOption | DropdownGroupOption
 
-export type DropdownOptions = Array<DropdownOption | DropdownGroupOption>
+export type DropdownOptions = Array<DropdownItem>
 
 export interface DropdownProps {
   button?: ButtonProps

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/components/Tree/Tree.vue

@@ -75,6 +75,7 @@ const props = withDefaults(defineProps<TreeProps>(), {
     rowHeight: '25px',
     indentWidth: '20px',
     showIndentationGuides: true,
+    defaultCollapsed: true,
   }),
 })
 
@@ -96,7 +97,7 @@ const slots = defineSlots<{
   }
 }>()
 
-const isCollapsed = ref(true)
+const isCollapsed = ref(props.options.defaultCollapsed ?? true)
 
 const linePadding = ref('')
 

package/src/components/Tree/types.ts

@@ -9,6 +9,7 @@ export type TreeOptions = {
   rowHeight?: string
   indentWidth?: string
   showIndentationGuides?: boolean
+  defaultCollapsed?: boolean
 }
 
 export interface TreeProps {

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'