@reviewpush/rp-treeselect 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reviewpush/rp-treeselect",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "repository": "reviewpush/rp-treeselect",
   "main": "dist/rp-treeselect.cjs.js",
   "unpkg": "dist/rp-treeselect.umd.min.js",
@@ -10,21 +10,7 @@
     "dist"
   ],
   "scripts": {
-    "dev": "node build/dev-server.js",
-    "build-library": "node build/build-library.js",
-    "build-docs": "rimraf gh-pages && mkdir gh-pages && node build/build-docs.js",
-    "preview-docs": "http-server gh-pages",
-    "gh-pages": "npm run build-docs && gh-pages --dist gh-pages --branch gh-pages --dotfiles",
-    "cleanup-cov": "rimraf test/unit/coverage",
-    "unit": "npm run cleanup-cov && karma start test/unit/karma.conf.js --watch",
-    "testonly": "npm run cleanup-cov && karma start test/unit/karma.config.js --single-run",
-    "test": "npm run testonly",
-    "pretest": "npm run lint",
-    "lint:js": "eslint --ext .js --ext .vue --cache --cache-location node_modules/.cache/eslint --rule 'no-console: 2' .",
-    "lint:css": "stylelint '**/*.less'",
-    "lint": "npm run lint:js && npm run lint:css",
-    "verify-builds": "size-limit && node build/verify-builds.js",
-    "finish": "npm test && npm run build-library && npm run verify-builds"
+    "build-library": "node build/build-library.js"
   },
   "pre-commit": "lint",
   "dependencies": {
@@ -43,7 +29,7 @@
     "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/preset-env": "^7.3.1",
     "@size-limit/preset-big-lib": "^2.0.2",
-    "@vue/test-utils": "1.0.0-beta.16",
+    "@vue/compiler-sfc": "^3.4.21",
     "autoprefixer": "^9.4.6",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.0",
@@ -54,7 +40,7 @@
     "codecov": "^3.0.0",
     "connect-history-api-fallback": "^1.5.0",
     "copy-webpack-plugin": "^5.0.3",
-    "css-loader": "^3.0.0",
+    "css-loader": "^3.6.0",
     "entities": "^2.0.0",
     "eslint": "^6.1.0",
     "eslint-config-riophae": "^0.10.0",
@@ -67,6 +53,7 @@
     "eslint-plugin-vue": "^6.0.0",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.16.3",
+    "file-loader": "^6.2.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "gh-pages": "^2.0.0",
     "html-webpack-plugin": "^3.1.0",
@@ -83,7 +70,7 @@
     "karma-webpack": "^4.0.2",
     "less": "^3.0.1",
     "less-loader": "^5.0.0",
-    "mini-css-extract-plugin": "^0.8.0",
+    "mini-css-extract-plugin": "^0.8.2",
     "open": "^7.0.0",
     "optimize-css-assets-webpack-plugin": "^5.0.0",
     "ora": "^4.0.1",
@@ -105,12 +92,8 @@
     "stylelint-config-xo-space": "^0.13.0",
     "terser-webpack-plugin": "^2.1.0",
     "url-loader": "^2.0.1",
-    "vodal": "^2.3.3",
-    "vue": "^2.2.0",
-    "vue-loader": "^15.6.0",
-    "vue-style-loader": "^4.0.2",
-    "vue-template-compiler": "^2.4.4",
-    "vuex": "^3.0.1",
+    "vue": "^3.4.21",
+    "vue-loader": "^17.3.1",
     "webpack": "^4.6.0",
     "webpack-bundle-analyzer": "^3.0.2",
     "webpack-cdn-plugin": "^3.1.4",
@@ -121,7 +104,8 @@
     "yaku": "^0.19.3"
   },
   "peerDependencies": {
-    "vue": "^3.4.21"
+    "vue": "^3.4.21",
+    "vue-loader": "^17.3.1"
   },
   "keywords": [
     "vue",

package/src/components/MenuPortal.vue

@@ -1,15 +1,11 @@
 <script>
-  import { inject, createApp } from 'vue'
+  import { provide, inject, createApp } from 'vue'
   import { watchSize, setupResizeAndScrollEventListeners, find } from '../utils'
   import Menu from './Menu'
 
   const PortalTarget = {
     name: 'rp-treeselect--portal-target',
-    setup() {
-      console.log('TEST')
-      const instance = inject('instance')
-      return { instance }
-    },
+    props: [ 'instance' ],
 
     watch: {
       'instance.menu.isOpen'(newValue) {
@@ -31,8 +27,10 @@
     },
 
     mounted() {
-      console.log('TEST')
-      const { instance } = this
+      const { instance } = this.$props
+
+      console.log('PROVIDING')
+      provide('instance', instance)
 
       if (instance.menu.isOpen) this.setupHandlers()
     },
@@ -51,7 +49,7 @@
       },
 
       setupControlResizeAndScrollEventListeners() {
-        const { instance } = this
+        const { instance } = this.$props
         const $control = instance.getControl()
 
         // istanbul ignore next
@@ -63,7 +61,7 @@
       },
 
       setupControlSizeWatcher() {
-        const { instance } = this
+        const { instance } = this.$props
         const $control = instance.getControl()
 
         // istanbul ignore next
@@ -92,7 +90,7 @@
       },
 
       updateWidth() {
-        const { instance } = this
+        const { instance } = this.$props
         const $portalTarget = this.$el
         const $control = instance.getControl()
         const controlRect = $control.getBoundingClientRect()
@@ -101,7 +99,7 @@
       },
 
       updateMenuContainerOffset() {
-        const { instance } = this
+        const { instance } = this.$props
         const $control = instance.getControl()
         const $portalTarget = this.$el
         const controlRect = $control.getBoundingClientRect()
@@ -119,14 +117,17 @@
     },
 
     render() {
-      const portalTargetClass = [ 'rp-treeselect__portal-target', this.instance.wrapperClass ]
-      const portalTargetStyle = { zIndex: this.instance.zIndex }
-
-      return (
-        <div class={portalTargetClass} style={portalTargetStyle} data-instance-id={this.instance.getInstanceId()}>
-          <Menu ref="menu" />
-        </div>
-      )
+      const { instance } = this.$props
+      if (instance) {
+        const portalTargetClass = [ 'rp-treeselect__portal-target', instance.wrapperClass ]
+        const portalTargetStyle = { zIndex: instance.zIndex }
+
+        return (
+          <div class={portalTargetClass} style={portalTargetStyle} data-instance-id={instance.getInstanceId()}>
+            <Menu ref="menu" />
+          </div>
+        )
+      }
     },
 
     destroyed() {
@@ -138,13 +139,17 @@
 
   export default {
     name: 'rp-treeselect--menu-portal',
+    setup() {
+      const instance = inject('instance')
+      return { instance }
+    },
 
     created() {
       this.portalTarget = null
     },
 
     mounted() {
-      this.setup()
+      this.setupPortal()
     },
 
     destroyed() {
@@ -152,18 +157,12 @@
     },
 
     methods: {
-      setup() {
+      setupPortal() {
         const el = document.createElement('div')
         el.setAttribute('id', `menu-target-${this._uid}`)
         document.body.appendChild(el)
 
-
-        const targetApp = {
-          parent: this,
-          ...PortalTarget,
-        }
-
-        this.portalTarget = createApp(targetApp)
+        this.portalTarget = createApp(PortalTarget, { instance: this.instance })
         this.portalTarget.mount(`#menu-target-${this._uid}`)
       },