portal-vue - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0-beta.0

dist/portal-vue.js

 /*
     portal-vue
-    Version: 1.3.0
+    Version: 1.4.0-beta.0
     Licence: MIT
@@ -14,3 +14,3 @@ (c) Thorsten Lünborg
 
-Vue = Vue && 'default' in Vue ? Vue['default'] : Vue;
+Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
 
@@ -288,3 +288,3 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
 // import { transports } from './wormhole'
-var Target = {
+var PortalTarget = {
   abstract: false,
@@ -340,17 +340,5 @@ name: 'portalTarget',
     this.unwatch();
-    this.$el.innerHTML = '';
   },
 
 
-  methods: {
-    emitChange: function emitChange(newTransports, oldTransports) {
-      if (this.multiple) {
-        this.$emit('change', [].concat(toConsumableArray(newTransports)), [].concat(toConsumableArray(oldTransports)));
-      } else {
-        var newTransport = newTransports.length === 0 ? undefined : newTransports[0];
-        var oldTransport = oldTransports.length === 0 ? undefined : oldTransports[0];
-        this.$emit('change', _extends({}, newTransport), _extends({}, oldTransport));
-      }
-    }
-  },
   computed: {
@@ -367,15 +355,5 @@ ownTransports: function ownTransports() {
     },
-    children: function children() {
-      return this.passengers.length !== 0 ? this.passengers : this.$slots.default || [];
-    },
     hasAttributes: function hasAttributes() {
       return Object.keys(this.attributes).length > 0;
     },
-    noWrapper: function noWrapper() {
-      var noWrapper = !this.hasAttributes && this.slim;
-      if (noWrapper && this.children.length > 1) {
-        console.warn('[portal-vue]: PortalTarget with `slim` option received more than one child element.');
-      }
-      return noWrapper;
-    },
     withTransition: function withTransition() {
@@ -407,8 +385,41 @@ return !!this.transition;
       return data;
+    },
+    transportedClasses: function transportedClasses() {
+      return this.ownTransports.map(function (transport) {
+        return transport.class;
+      }).reduce(function (array, subarray) {
+        return array.concat(subarray);
+      }, []);
+      //.filter((string, index, array) => array.indexOf(string) === index)
     }
   },
 
+  methods: {
+    emitChange: function emitChange(newTransports, oldTransports) {
+      if (this.multiple) {
+        this.$emit('change', [].concat(toConsumableArray(newTransports)), [].concat(toConsumableArray(oldTransports)));
+      } else {
+        var newTransport = newTransports.length === 0 ? undefined : newTransports[0];
+        var oldTransport = oldTransports.length === 0 ? undefined : oldTransports[0];
+        this.$emit('change', _extends({}, newTransport), _extends({}, oldTransport));
+      }
+    },
+
+    // can't be a computed prop because it has to "react" to $slot changes.
+    children: function children() {
+      return this.passengers.length !== 0 ? this.passengers : this.$slots.default || [];
+    },
+    noWrapper: function noWrapper() {
+      var noWrapper = !this.hasAttributes && this.slim;
+      if (noWrapper && this.children().length > 1) {
+        console.warn('[portal-vue]: PortalTarget with `slim` option received more than one child element.');
+      }
+      return noWrapper;
+    }
+  },
   render: function render(h) {
     this.$options.abstract = true;
-    var TransitionType = this.noWrapper ? 'transition' : 'transition-group';
+    var noWrapper = this.noWrapper();
+    var children = this.children();
+    var TransitionType = noWrapper ? 'transition' : 'transition-group';
     var Tag = this.tag;
@@ -420,3 +431,3 @@
         babelHelperVueJsxMergeProps([this.transitionData, { 'class': 'vue-portal-target' }]),
-        [this.children]
+        [children]
       );
@@ -428,6 +439,10 @@ }
 
-    return this.noWrapper ? this.children[0] : h(
+    return noWrapper ? children[0] : h(
       Tag,
-      babelHelperVueJsxMergeProps([{ 'class': 'vue-portal-target' }, this.attributes, { key: wrapperKey }]),
-      [this.children]
+      babelHelperVueJsxMergeProps([{
+        'class': 'vue-portal-target ' + this.transportedClasses.join(' ')
+      }, this.attributes, {
+        key: wrapperKey
+      }]),
+      [children]
     );
@@ -457,2 +472,3 @@ }
     targetEl: { type: inBrowser ? [String, HTMLElement] : String },
+    targetClass: { type: String },
     to: {
@@ -500,3 +516,3 @@ type: String,
     to: function to(newValue, oldValue) {
-      oldValue && this.clear(oldValue);
+      oldValue && oldValue !== newValue && this.clear(oldValue);
       this.sendUpdate();
@@ -517,2 +533,3 @@ },
       var slotContent = this.normalizedSlots();
+
       if (slotContent) {
@@ -523,2 +540,3 @@ wormhole.open({
           passengers: [].concat(toConsumableArray(slotContent)),
+          class: this.targetClass && this.targetClass.split(' '),
           order: this.order
@@ -550,3 +568,3 @@ });
       if (el) {
-        var newTarget = new Vue(_extends({}, Target, {
+        var newTarget = new Vue(_extends({}, PortalTarget, {
           parent: this,
@@ -576,17 +594,9 @@ propsData: {
       this.$options.abstract = true;
-      return children.length <= 1 && this.slim ? children[0] : h(
-        Tag,
-        null,
-        [this.normalizeChildren(children)]
-      );
+      return children.length <= 1 && this.slim ? children[0] : h(Tag, [this.normalizeChildren(children)]);
     } else {
-      return h(
-        Tag,
-        {
-          'class': 'v-portal',
-          style: 'display: none',
-          key: 'v-portal-placeholder'
-        },
-        []
-      );
+      return h(Tag, {
+        'class': 'v-portal',
+        style: 'display: none',
+        key: 'v-portal-placeholder'
+      });
       // h(this.tag, { class: { 'v-portal': true }, style: { display: 'none' }, key: 'v-portal-placeholder' })
@@ -601,3 +611,3 @@ }
   Vue$$1.component(opts.portalName || 'portal', Portal);
-  Vue$$1.component(opts.portalTargetName || 'portalTarget', Target);
+  Vue$$1.component(opts.portalTargetName || 'portalTarget', PortalTarget);
 }
@@ -611,3 +621,3 @@ if (typeof window !== 'undefined' && window.Vue) {
   Portal: Portal,
-  PortalTarget: Target,
+  PortalTarget: PortalTarget,
   Wormhole: wormhole
@@ -614,0 +624,0 @@ };

dist/portal-vue.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define(["vue"],e):t.PortalVue=e(t.Vue)}(this,function(t){"use strict";function e(t){for(var e=t.hasAttributes()?t.attributes:[],n={},r=0;r<e.length;r++){var s=e[r];s.value&&(n[s.name]=""===s.value||s.value)}var o=void 0,i=void 0;return n.class&&(o=n.class,delete n.class),n.style&&(i=n.style,delete n.style),{attrs:n,class:o,style:i}}function n(t){return Array.isArray(t)||"object"===(void 0===t?"undefined":i(t))?Object.freeze(t):t}function r(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return t.reduce(function(t,n){var r=n.passengers[0];return r="function"==typeof r?r(e):n.passengers,t.concat(r)},[])}function s(t,e){return function(){t&&t.apply(this,arguments),e&&e.apply(this,arguments)}}function o(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};t.component(e.portalName||"portal",y),t.component(e.portalTargetName||"portalTarget",d)}t=t&&"default"in t?t.default:t;var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},u=function(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e<t.length;e++)n[e]=t[e];return n}return Array.from(t)},l={},h=t.extend({data:function(){return{transports:l}},methods:{open:function(e){var r=e.to,s=e.from,o=e.passengers;if(r&&s&&o){e.passengers=n(o);-1===Object.keys(this.transports).indexOf(r)&&t.set(this.transports,r,[]);var i=this.getTransportIndex(e),a=this.transports[r].slice(0);-1===i?a.push(e):a[i]=e,a.sort(function(t,e){return t.order-e.order}),this.transports[r]=a}},close:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=t.to,r=t.from;if(n&&r&&this.transports[n])if(e)this.transports[n]=[];else{var s=this.getTransportIndex(t);if(s>=0){var o=this.transports[n].slice(0);o.splice(s,1),this.transports[n]=o}}},hasTarget:function(t){return this.transports.hasOwnProperty(t)},hasContentFor:function(t){return!!this.transports[t]&&this.getContentFor(t).length>0},getSourceFor:function(t){return this.transports[t]&&this.transports[t][0].from},getContentFor:function(t){var e=this.transports[t];if(e)return r(e)},getTransportIndex:function(t){var e=t.to,n=t.from;for(var r in this.transports[e])if(this.transports[e][r].from===n)return r;return-1}}}),p=new h(l),c=/^(attrs|props|on|nativeOn|class|style|hook)$/,f=function(t){return t.reduce(function(t,e){var n,r,o,i,a;for(o in e)if(n=t[o],r=e[o],n&&c.test(o))if("class"===o&&("string"==typeof n&&(a=n,t[o]=n={},n[a]=!0),"string"==typeof r&&(a=r,e[o]=r={},r[a]=!0)),"on"===o||"nativeOn"===o||"hook"===o)for(i in r)n[i]=s(n[i],r[i]);else if(Array.isArray(n))t[o]=n.concat(r);else if(Array.isArray(r))t[o]=[n].concat(r);else for(i in r)n[i]=r[i];else t[o]=e[o];return t},{})},d={abstract:!1,name:"portalTarget",props:{attributes:{type:Object,default:function(){return{}}},multiple:{type:Boolean,default:!1},name:{type:String,required:!0},slim:{type:Boolean,default:!1},slotProps:{type:Object,default:function(){return{}}},tag:{type:String,default:"div"},transition:{type:[Boolean,String,Object],default:!1},transitionEvents:{type:Object,default:function(){return{}}}},data:function(){return{transports:p.transports,firstRender:!0}},created:function(){this.transports[this.name]||this.$set(this.transports,this.name,[])},mounted:function(){var t=this;this.unwatch=this.$watch("ownTransports",this.emitChange),this.$nextTick(function(){t.transition&&(t.firstRender=!1)}),this.$options.abstract&&(this.$options.abstract=!1)},updated:function(){this.$options.abstract&&(this.$options.abstract=!1)},beforeDestroy:function(){this.unwatch(),this.$el.innerHTML=""},methods:{emitChange:function(t,e){if(this.multiple)this.$emit("change",[].concat(u(t)),[].concat(u(e)));else{var n=0===t.length?void 0:t[0],r=0===e.length?void 0:e[0];this.$emit("change",a({},n),a({},r))}}},computed:{ownTransports:function(){var t=this.transports[this.name]||[];return this.multiple?t:0===t.length?[]:[t[t.length-1]]},passengers:function(){return r(this.ownTransports,this.slotProps)},children:function(){return 0!==this.passengers.length?this.passengers:this.$slots.default||[]},hasAttributes:function(){return Object.keys(this.attributes).length>0},noWrapper:function(){var t=!this.hasAttributes&&this.slim;return t&&this.children.length>1&&console.warn("[portal-vue]: PortalTarget with `slim` option received more than one child element."),t},withTransition:function(){return!!this.transition},transitionData:function(){var t=this.transition,e={};return this.firstRender&&"object"===i(this.transition)&&!this.transition.appear?(e.props={name:"__notranstition__portal-vue__"},e):("string"==typeof t?e.props={name:t}:"object"===(void 0===t?"undefined":i(t))&&(e.props=t),this.renderSlim&&(e.props.tag=this.tag),e.on=this.transitionEvents,e)}},render:function(t){this.$options.abstract=!0;var e=this.noWrapper?"transition":"transition-group",n=this.tag;if(this.withTransition)return t(e,f([this.transitionData,{class:"vue-portal-target"}]),[this.children]);var r=this.ownTransports.length;return this.noWrapper?this.children[0]:t(n,f([{class:"vue-portal-target"},this.attributes,{key:r}]),[this.children])}},m="undefined"!=typeof window,g=1,y={abstract:!1,name:"portal",props:{disabled:{type:Boolean,default:!1},name:{type:String,default:function(){return String(g++)}},order:{type:Number,default:0},slim:{type:Boolean,default:!1},slotProps:{type:Object,default:function(){return{}}},tag:{type:[String],default:"DIV"},targetEl:{type:m?[String,HTMLElement]:String},to:{type:String,default:function(){return String(Math.round(1e7*Math.random()))}}},mounted:function(){this.targetEl&&this.mountToTarget(),this.disabled||this.sendUpdate(),this.$options.abstract&&(this.$options.abstract=!1)},updated:function(){this.disabled?this.clear():this.sendUpdate(),this.$options.abstract&&(this.$options.abstract=!1)},beforeDestroy:function(){this.clear(),this.mountedComp&&this.mountedComp.$destroy()},watch:{to:function(t,e){e&&this.clear(e),this.sendUpdate()},targetEl:function(t,e){t&&this.mountToTarget()}},methods:{normalizedSlots:function(){return this.$scopedSlots.default?[this.$scopedSlots.default]:this.$slots.default},sendUpdate:function(){var t=this.normalizedSlots();t?p.open({from:this.name,to:this.to,passengers:[].concat(u(t)),order:this.order}):this.clear()},clear:function(t){p.close({from:this.name,to:t||this.to})},mountToTarget:function(){var n=void 0,r=this.targetEl;if("string"==typeof r)n=document.querySelector(r);else{if(!(r instanceof HTMLElement))return void console.warn("[vue-portal]: value of targetEl must be of type String or HTMLElement");n=r}if(n){var s=new t(a({},d,{parent:this,propsData:{name:this.to,tag:n.tagName,attributes:e(n)}}));s.$mount(n),this.mountedComp=s}else console.warn("[vue-portal]: The specified targetEl "+r+" was not found")},normalizeChildren:function(t){return"function"==typeof t?t(this.slotProps):t}},render:function(t){var e=this.$slots.default||this.$scopedSlots.default||[],n=this.tag;return e.length&&this.disabled?(this.$options.abstract=!0,e.length<=1&&this.slim?e[0]:t(n,null,[this.normalizeChildren(e)])):t(n,{class:"v-portal",style:"display: none",key:"v-portal-placeholder"},[])}};return"undefined"!=typeof window&&window.Vue&&window.Vue.use({install:o}),{install:o,Portal:y,PortalTarget:d,Wormhole:p}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define(["vue"],e):t.PortalVue=e(t.Vue)}(this,function(t){"use strict";function e(t){for(var e=t.hasAttributes()?t.attributes:[],n={},r=0;r<e.length;r++){var s=e[r];s.value&&(n[s.name]=""===s.value||s.value)}var o=void 0,i=void 0;return n.class&&(o=n.class,delete n.class),n.style&&(i=n.style,delete n.style),{attrs:n,class:o,style:i}}function n(t){return Array.isArray(t)||"object"===(void 0===t?"undefined":i(t))?Object.freeze(t):t}function r(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return t.reduce(function(t,n){var r=n.passengers[0];return r="function"==typeof r?r(e):n.passengers,t.concat(r)},[])}function s(t,e){return function(){t&&t.apply(this,arguments),e&&e.apply(this,arguments)}}function o(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};t.component(e.portalName||"portal",y),t.component(e.portalTargetName||"portalTarget",d)}t=t&&t.hasOwnProperty("default")?t.default:t;var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},u=function(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e<t.length;e++)n[e]=t[e];return n}return Array.from(t)},l={},p=t.extend({data:function(){return{transports:l}},methods:{open:function(e){var r=e.to,s=e.from,o=e.passengers;if(r&&s&&o){e.passengers=n(o);-1===Object.keys(this.transports).indexOf(r)&&t.set(this.transports,r,[]);var i=this.getTransportIndex(e),a=this.transports[r].slice(0);-1===i?a.push(e):a[i]=e,a.sort(function(t,e){return t.order-e.order}),this.transports[r]=a}},close:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=t.to,r=t.from;if(n&&r&&this.transports[n])if(e)this.transports[n]=[];else{var s=this.getTransportIndex(t);if(s>=0){var o=this.transports[n].slice(0);o.splice(s,1),this.transports[n]=o}}},hasTarget:function(t){return this.transports.hasOwnProperty(t)},hasContentFor:function(t){return!!this.transports[t]&&this.getContentFor(t).length>0},getSourceFor:function(t){return this.transports[t]&&this.transports[t][0].from},getContentFor:function(t){var e=this.transports[t];if(e)return r(e)},getTransportIndex:function(t){var e=t.to,n=t.from;for(var r in this.transports[e])if(this.transports[e][r].from===n)return r;return-1}}}),h=new p(l),c=/^(attrs|props|on|nativeOn|class|style|hook)$/,f=function(t){return t.reduce(function(t,e){var n,r,o,i,a;for(o in e)if(n=t[o],r=e[o],n&&c.test(o))if("class"===o&&("string"==typeof n&&(a=n,t[o]=n={},n[a]=!0),"string"==typeof r&&(a=r,e[o]=r={},r[a]=!0)),"on"===o||"nativeOn"===o||"hook"===o)for(i in r)n[i]=s(n[i],r[i]);else if(Array.isArray(n))t[o]=n.concat(r);else if(Array.isArray(r))t[o]=[n].concat(r);else for(i in r)n[i]=r[i];else t[o]=e[o];return t},{})},d={abstract:!1,name:"portalTarget",props:{attributes:{type:Object,default:function(){return{}}},multiple:{type:Boolean,default:!1},name:{type:String,required:!0},slim:{type:Boolean,default:!1},slotProps:{type:Object,default:function(){return{}}},tag:{type:String,default:"div"},transition:{type:[Boolean,String,Object],default:!1},transitionEvents:{type:Object,default:function(){return{}}}},data:function(){return{transports:h.transports,firstRender:!0}},created:function(){this.transports[this.name]||this.$set(this.transports,this.name,[])},mounted:function(){var t=this;this.unwatch=this.$watch("ownTransports",this.emitChange),this.$nextTick(function(){t.transition&&(t.firstRender=!1)}),this.$options.abstract&&(this.$options.abstract=!1)},updated:function(){this.$options.abstract&&(this.$options.abstract=!1)},beforeDestroy:function(){this.unwatch()},computed:{ownTransports:function(){var t=this.transports[this.name]||[];return this.multiple?t:0===t.length?[]:[t[t.length-1]]},passengers:function(){return r(this.ownTransports,this.slotProps)},hasAttributes:function(){return Object.keys(this.attributes).length>0},withTransition:function(){return!!this.transition},transitionData:function(){var t=this.transition,e={};return this.firstRender&&"object"===i(this.transition)&&!this.transition.appear?(e.props={name:"__notranstition__portal-vue__"},e):("string"==typeof t?e.props={name:t}:"object"===(void 0===t?"undefined":i(t))&&(e.props=t),this.renderSlim&&(e.props.tag=this.tag),e.on=this.transitionEvents,e)},transportedClasses:function(){return this.ownTransports.map(function(t){return t.class}).reduce(function(t,e){return t.concat(e)},[])}},methods:{emitChange:function(t,e){if(this.multiple)this.$emit("change",[].concat(u(t)),[].concat(u(e)));else{var n=0===t.length?void 0:t[0],r=0===e.length?void 0:e[0];this.$emit("change",a({},n),a({},r))}},children:function(){return 0!==this.passengers.length?this.passengers:this.$slots.default||[]},noWrapper:function(){var t=!this.hasAttributes&&this.slim;return t&&this.children().length>1&&console.warn("[portal-vue]: PortalTarget with `slim` option received more than one child element."),t}},render:function(t){this.$options.abstract=!0;var e=this.noWrapper(),n=this.children(),r=e?"transition":"transition-group",s=this.tag;if(this.withTransition)return t(r,f([this.transitionData,{class:"vue-portal-target"}]),[n]);var o=this.ownTransports.length;return e?n[0]:t(s,f([{class:"vue-portal-target "+this.transportedClasses.join(" ")},this.attributes,{key:o}]),[n])}},g="undefined"!=typeof window,m=1,y={abstract:!1,name:"portal",props:{disabled:{type:Boolean,default:!1},name:{type:String,default:function(){return String(m++)}},order:{type:Number,default:0},slim:{type:Boolean,default:!1},slotProps:{type:Object,default:function(){return{}}},tag:{type:[String],default:"DIV"},targetEl:{type:g?[String,HTMLElement]:String},targetClass:{type:String},to:{type:String,default:function(){return String(Math.round(1e7*Math.random()))}}},mounted:function(){this.targetEl&&this.mountToTarget(),this.disabled||this.sendUpdate(),this.$options.abstract&&(this.$options.abstract=!1)},updated:function(){this.disabled?this.clear():this.sendUpdate(),this.$options.abstract&&(this.$options.abstract=!1)},beforeDestroy:function(){this.clear(),this.mountedComp&&this.mountedComp.$destroy()},watch:{to:function(t,e){e&&e!==t&&this.clear(e),this.sendUpdate()},targetEl:function(t,e){t&&this.mountToTarget()}},methods:{normalizedSlots:function(){return this.$scopedSlots.default?[this.$scopedSlots.default]:this.$slots.default},sendUpdate:function(){var t=this.normalizedSlots();t?h.open({from:this.name,to:this.to,passengers:[].concat(u(t)),class:this.targetClass&&this.targetClass.split(" "),order:this.order}):this.clear()},clear:function(t){h.close({from:this.name,to:t||this.to})},mountToTarget:function(){var n=void 0,r=this.targetEl;if("string"==typeof r)n=document.querySelector(r);else{if(!(r instanceof HTMLElement))return void console.warn("[vue-portal]: value of targetEl must be of type String or HTMLElement");n=r}if(n){var s=new t(a({},d,{parent:this,propsData:{name:this.to,tag:n.tagName,attributes:e(n)}}));s.$mount(n),this.mountedComp=s}else console.warn("[vue-portal]: The specified targetEl "+r+" was not found")},normalizeChildren:function(t){return"function"==typeof t?t(this.slotProps):t}},render:function(t){var e=this.$slots.default||this.$scopedSlots.default||[],n=this.tag;return e.length&&this.disabled?(this.$options.abstract=!0,e.length<=1&&this.slim?e[0]:t(n,[this.normalizeChildren(e)])):t(n,{class:"v-portal",style:"display: none",key:"v-portal-placeholder"})}};return"undefined"!=typeof window&&window.Vue&&window.Vue.use({install:o}),{install:o,Portal:y,PortalTarget:d,Wormhole:h}});

package.json

 {
   "name": "portal-vue",
-  "version": "1.3.0",
-  "description":
-    "A Vue component to render elements outside of a component's template, elsewhere in the DOM",
+  "version": "1.4.0-beta.0",
+  "description": "A Vue component to render elements outside of a component's template, elsewhere in the DOM",
   "main": "dist/portal-vue.js",
@@ -19,8 +18,5 @@ "files": [
     "lint:test": "eslint test/",
-    "build":
-      "npm run lint && cross-env NODE_ENV=production rollup -c build/rollup.conf.prod.js && uglifyjs dist/portal-vue.js -c -m > dist/portal-vue.min.js",
-    "dev":
-      "cross-env NODE_ENV=development webpack-dev-server --watch --config build/webpack.conf.js --inline --hot",
-    "prod":
-      "NODE_ENV=production webpack-dev-server --watch --config build/webpack.conf.js --inline --hot",
+    "build": "npm run lint && cross-env NODE_ENV=production rollup -c build/rollup.conf.prod.js && uglifyjs dist/portal-vue.js -c -m > dist/portal-vue.min.js",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --watch --config build/webpack.conf.js --inline --hot",
+    "prod": "NODE_ENV=production webpack-dev-server --watch --config build/webpack.conf.js --inline --hot",
     "docs:dev": "docute ./docs --watch",
@@ -33,15 +29,19 @@ "docs:deploy": "gh-pages -d docs",
     "parserOptions": {
-      "parser": "babel-eslint",
-      "ecmaVersion": 2017,
-      "sourceType": "module"
+      "parser": "babel-eslint"
     },
     "env": {
-      "mocha": true,
       "browser": true
     },
-    "extends": ["plugin:vue/recommended"],
-    "plugins": ["html", "vue"],
+    "extends": [
+      "plugin:vue/essential"
+    ],
+    "plugins": [
+      "vue"
+    ],
     "rules": {
       "vue/jsx-uses-vars": 2,
-      "comma-dangle": ["error", "always-multiline"]
+      "comma-dangle": [
+        "error",
+        "always-multiline"
+      ]
     }
@@ -59,3 +59,5 @@ },
     ],
-    "plugins": ["transform-vue-jsx"],
+    "plugins": [
+      "transform-vue-jsx"
+    ],
     "comments": true,
@@ -65,3 +67,6 @@ "env": {
       "test": {
-        "presets": ["es2015", "stage-3"]
+        "presets": [
+          "es2015",
+          "stage-3"
+        ]
       }
@@ -71,16 +76,16 @@ }
   "devDependencies": {
+    "@vue/test-utils": "1.0.0-beta.17",
     "babel": "^6.5.2",
-    "babel-core": "^6.25.0",
-    "babel-eslint": "^8.0.3",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.6",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-jest": "^21.0.2",
-    "babel-loader": "^7.0.0",
+    "babel-jest": "^23.4.0",
+    "babel-loader": "^7.1.5",
     "babel-plugin-dynamic-import-node": "^1.2.0",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "babel-plugin-transform-vue-jsx": "^3.4.3",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-3": "^6.24.1",
-    "chai": "^4.1.2",
     "cross-env": "^5.1.2",
@@ -90,38 +95,28 @@ "css-loader": "^0.28.7",
     "docute-cli": "^0.6.0",
-    "eslint": "^4.13.1",
+    "eslint": "^4.15.0",
     "eslint-friendly-formatter": "^3.0.0",
-    "eslint-loader": "^1.7.1",
-    "eslint-plugin-html": "^4.0.1",
-    "eslint-plugin-vue": "^4.0.0-beta.3",
+    "eslint-plugin-vue": "^4.2.0",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "gh-pages": "^1.1.0",
-    "inject-loader": "^3.0.0",
-    "jest": "^21.2.0",
+    "jest": "^23.4.1",
     "jest-serializer-vue": "^0.3.0",
-    "karma-chrome-launcher": "^2.1.1",
-    "karma-mocha": "^1.3.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.9",
-    "mocha": "^3.5.3",
-    "mocha-css": "^1.0.1",
-    "node-sass": "^4.7.2",
-    "puppeteer": "^0.11.0",
-    "rollup": "^0.43.0",
-    "rollup-plugin-babel": "^2.7.1",
-    "rollup-plugin-buble": "^0.15.0",
+    "node-sass": "^4.9.3",
+    "rollup": "^0.54.1",
+    "rollup-plugin-babel": "^3.0.3",
+    "rollup-plugin-buble": "^0.18.0",
     "rollup-plugin-commonjs": "^8.2.6",
-    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-node-resolve": "^3.0.2",
     "sass-loader": "^6.0.5",
     "style-loader": "^0.18.2",
     "testdouble-chai": "^0.5.0",
-    "vue": "^2.5.13",
-    "vue-jest": "^1.4.0",
-    "vue-loader": "^13.6.0",
+    "vue": "^2.5.16",
+    "vue-jest": "^2.6.0",
+    "vue-loader": "^14.2.3",
     "vue-router": "^3.0.1",
-    "vue-template-compiler": "^2.5.13",
-    "vue-test-utils": "^1.0.0-beta.8",
+    "vue-template-compiler": "^2.5.16",
     "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.9.7",
+    "webpack-dev-server": "^2.11.0",
     "webpack-merge": "^4.1.1"
-  }
+  },
+  "dependencies": {}
 }

README.md

@@ -9,6 +9,6 @@ # PortalVue
 
+> This branch is currently representing v1.4.0-beta.0
+
 For more detailed documentation and additional Information, please visit <a href="http://linusborg.github.io/portal-vue">the docs</a>
 
-> The documentation is for version 1.3.0-beta, but all things except the sections about scoped slots apply to previous versions as well.
-
 ## Installation
@@ -15,0 +15,0 @@

src/components/portal-target.js

@@ -48,18 +48,4 @@ // import { transports } from './wormhole'
     this.unwatch()
-    this.$el.innerHTML = ''
   },
 
-  methods: {
-    emitChange(newTransports, oldTransports) {
-      if (this.multiple) {
-        this.$emit('change', [...newTransports], [...oldTransports])
-      } else {
-        const newTransport =
-          newTransports.length === 0 ? undefined : newTransports[0]
-        const oldTransport =
-          oldTransports.length === 0 ? undefined : oldTransports[0]
-        this.$emit('change', { ...newTransport }, { ...oldTransport })
-      }
-    },
-  },
   computed: {
@@ -76,19 +62,5 @@ ownTransports() {
     },
-    children() {
-      return this.passengers.length !== 0
-        ? this.passengers
-        : this.$slots.default || []
-    },
     hasAttributes() {
       return Object.keys(this.attributes).length > 0
     },
-    noWrapper() {
-      const noWrapper = !this.hasAttributes && this.slim
-      if (noWrapper && this.children.length > 1) {
-        console.warn(
-          '[portal-vue]: PortalTarget with `slim` option received more than one child element.'
-        )
-      }
-      return noWrapper
-    },
     withTransition() {
@@ -124,7 +96,43 @@ return !!this.transition
     },
+    transportedClasses() {
+      return this.ownTransports
+        .map(transport => transport.class)
+        .reduce((array, subarray) => array.concat(subarray), [])
+      //.filter((string, index, array) => array.indexOf(string) === index)
+    },
   },
 
+  methods: {
+    emitChange(newTransports, oldTransports) {
+      if (this.multiple) {
+        this.$emit('change', [...newTransports], [...oldTransports])
+      } else {
+        const newTransport =
+          newTransports.length === 0 ? undefined : newTransports[0]
+        const oldTransport =
+          oldTransports.length === 0 ? undefined : oldTransports[0]
+        this.$emit('change', { ...newTransport }, { ...oldTransport })
+      }
+    },
+    // can't be a computed prop because it has to "react" to $slot changes.
+    children() {
+      return this.passengers.length !== 0
+        ? this.passengers
+        : this.$slots.default || []
+    },
+    noWrapper() {
+      const noWrapper = !this.hasAttributes && this.slim
+      if (noWrapper && this.children().length > 1) {
+        console.warn(
+          '[portal-vue]: PortalTarget with `slim` option received more than one child element.'
+        )
+      }
+      return noWrapper
+    },
+  },
   render(h) {
     this.$options.abstract = true
-    const TransitionType = this.noWrapper ? 'transition' : 'transition-group'
+    const noWrapper = this.noWrapper()
+    const children = this.children()
+    const TransitionType = noWrapper ? 'transition' : 'transition-group'
     const Tag = this.tag
@@ -135,3 +143,3 @@
         <TransitionType {...this.transitionData} class="vue-portal-target">
-          {this.children}
+          {children}
         </TransitionType>
@@ -144,7 +152,11 @@ )
 
-    return this.noWrapper ? (
-      this.children[0]
+    return noWrapper ? (
+      children[0]
     ) : (
-      <Tag class="vue-portal-target" {...this.attributes} key={wrapperKey}>
-        {this.children}
+      <Tag
+        class={`vue-portal-target ${this.transportedClasses.join(' ')}`}
+        {...this.attributes}
+        key={wrapperKey}
+      >
+        {children}
       </Tag>
@@ -151,0 +163,0 @@ )

src/components/portal.js

@@ -22,2 +22,3 @@ import Vue from 'vue'
     targetEl: { type: inBrowser ? [String, HTMLElement] : String },
+    targetClass: { type: String },
     to: {
@@ -64,3 +65,3 @@ type: String,
     to(newValue, oldValue) {
-      oldValue && this.clear(oldValue)
+      oldValue && oldValue !== newValue && this.clear(oldValue)
       this.sendUpdate()
@@ -83,2 +84,3 @@ },
       const slotContent = this.normalizedSlots()
+
       if (slotContent) {
@@ -89,2 +91,3 @@ wormhole.open({
           passengers: [...slotContent],
+          class: this.targetClass && this.targetClass.split(' '),
           order: this.order,
@@ -91,0 +94,0 @@ })

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75569

increased by2.48%

Dev dependency count

42

decreased by-20.75%

Lines of code

990

increased by2.38%

Worsened metrics

Number of low quality alerts

3

increased by50%

No dependency changes