refactoring

docs/src/demos/Nodes/Mention/index.vue

@@ -32,33 +32,32 @@ export default {
         Text,
         Mention.configure({
           items: query => {
-            return ['foo', 'bar']
+            return ['foo', 'bar'].filter(item => item.startsWith(query))
           },
           renderer: () => {
             let component
             let popup
 
             return {
-              onStart(props) {
-                component = new VueRenderer(MentionList, props)
+              onStart: props => {
+                component = new VueRenderer(MentionList, {
+                  parent: this,
+                  propsData: props,
+                })
 
-                popup = tippy('.app', {
+                popup = tippy('body', {
                   getReferenceClientRect: () => props.virtualNode.getBoundingClientRect(),
                   appendTo: () => document.body,
-                  interactive: true,
-                  sticky: true,
-                  plugins: [sticky],
                   content: component.element,
-                  trigger: 'mouseenter',
                   showOnCreate: true,
-                  theme: 'dark',
+                  interactive: true,
+                  trigger: 'manual',
                   placement: 'top-start',
-                  inertia: true,
                   duration: [400, 200],
                 })
               },
               onUpdate(props) {
-                component.update(props)
+                component.updateProps(props)
               },
               onExit() {
                 popup[0].destroy()

packages/vue/src/VueRenderer.ts

@@ -7,17 +7,14 @@ export default class VueRenderer {
   constructor(component: Vue | VueConstructor, props: any) {
     const Component = Vue.extend(component)
 
-    this.vm = new Component({
-      // parent,
-      propsData: props,
-    }).$mount()
+    this.vm = new Component(props).$mount()
   }
 
   get element() {
     return this.vm.$el
   }
 
-  update(data: { [key: string]: any } = {}) {
+  updateProps(props: { [key: string]: any } = {}) {
     if (!this.vm.$props) {
       return
     }
@@ -27,7 +24,7 @@ export default class VueRenderer {
     Vue.config.silent = true
 
     Object
-      .entries(data)
+      .entries(props)
       .forEach(([key, value]) => {
         this.vm.$props[key] = value
       })