@reviewpush/rp-treeselect 0.0.14 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reviewpush/rp-treeselect",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "repository": "reviewpush/rp-treeselect",
   "main": "dist/rp-treeselect.cjs.js",
   "unpkg": "dist/rp-treeselect.umd.min.js",

package/src/components/MenuPortal.vue

@@ -1,11 +1,14 @@
 <script>
-  import { provide, inject, createApp } from 'vue'
+  import { inject, createApp } from 'vue'
   import { watchSize, setupResizeAndScrollEventListeners, find } from '../utils'
   import Menu from './Menu'
 
   const PortalTarget = {
     name: 'rp-treeselect--portal-target',
-    props: [ 'instance' ],
+    setup() {
+      const instance = inject('instance')
+      return { instance }
+    },
 
     watch: {
       'instance.menu.isOpen'(newValue) {
@@ -27,10 +30,7 @@
     },
 
     mounted() {
-      const { instance } = this.$props
-
-      console.log('PROVIDING')
-      provide('instance', instance)
+      const { instance } = this
 
       if (instance.menu.isOpen) this.setupHandlers()
     },
@@ -49,7 +49,7 @@
       },
 
       setupControlResizeAndScrollEventListeners() {
-        const { instance } = this.$props
+        const { instance } = this
         const $control = instance.getControl()
 
         // istanbul ignore next
@@ -61,7 +61,7 @@
       },
 
       setupControlSizeWatcher() {
-        const { instance } = this.$props
+        const { instance } = this
         const $control = instance.getControl()
 
         // istanbul ignore next
@@ -90,7 +90,7 @@
       },
 
       updateWidth() {
-        const { instance } = this.$props
+        const { instance } = this
         const $portalTarget = this.$el
         const $control = instance.getControl()
         const controlRect = $control.getBoundingClientRect()
@@ -99,7 +99,7 @@
       },
 
       updateMenuContainerOffset() {
-        const { instance } = this.$props
+        const { instance } = this
         const $control = instance.getControl()
         const $portalTarget = this.$el
         const controlRect = $control.getBoundingClientRect()
@@ -117,7 +117,7 @@
     },
 
     render() {
-      const { instance } = this.$props
+      const { instance } = this
       if (instance) {
         const portalTargetClass = [ 'rp-treeselect__portal-target', instance.wrapperClass ]
         const portalTargetStyle = { zIndex: instance.zIndex }
@@ -162,7 +162,7 @@
         el.setAttribute('id', `menu-target-${this._uid}`)
         document.body.appendChild(el)
 
-        this.portalTarget = createApp(PortalTarget, { instance: this.instance })
+        this.portalTarget = createApp(PortalTarget)
         this.portalTarget.mount(`#menu-target-${this._uid}`)
       },
 

package/src/components/Treeselect.vue

@@ -1,6 +1,6 @@
 <script>
   import fuzzysearch from 'fuzzysearch'
-  import { provide } from 'vue'
+  import { provide, ref, inject } from 'vue'
   import {
     warning,
     onLeftClick, scrollIntoView,
@@ -643,6 +643,19 @@
       },
     },
 
+    setup() {
+      const instance = ref({})
+      const setInstance = inst => instance.value = inst
+
+      provide('instance', instance)
+      provide('setInstance', setInstance)
+
+      return {
+        instance,
+        setInstance,
+      }
+    },
+
     data() {
       return {
         trigger: {
@@ -902,12 +915,10 @@
     created() {
       this.verifyProps()
       this.resetFlags()
-
-      provide('instance', this)
+      this.setInstance(this)
     },
 
     mounted() {
-      console.log('TREESELECT')
       if (this.autoFocus) this.focusInput()
       if (!this.options && !this.async && this.autoLoadRootOptions) this.loadRootOptions()
       if (this.alwaysOpen) this.openMenu()