portal-vue
Advanced tools
Comparing version 1.4.0 to 1.5.0
/* | ||
portal-vue | ||
Version: 1.4.0 | ||
Version: 1.5.0 | ||
Licence: MIT | ||
@@ -144,2 +144,12 @@ (c) Thorsten Lünborg | ||
function stableSort(array, compareFn) { | ||
return array.map(function (v, idx) { | ||
return [idx, v]; | ||
}).sort(function (a, b) { | ||
return this(a[1], b[1]) || a[0] - b[0]; | ||
}.bind(compareFn)).map(function (c) { | ||
return c[1]; | ||
}); | ||
} | ||
var transports = {}; | ||
@@ -173,7 +183,5 @@ | ||
} | ||
newTransports.sort(function (a, b) { | ||
this.transports[to] = stableSort(newTransports, function (a, b) { | ||
return a.order - b.order; | ||
}); | ||
this.transports[to] = newTransports; | ||
}, | ||
@@ -180,0 +188,0 @@ close: function close(transport) { |
@@ -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&&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={},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()},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?p.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){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,[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,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("vue")):"function"==typeof define&&define.amd?define(["vue"],n):t.PortalVue=n(t.Vue)}(this,function(t){"use strict";function n(t){for(var n=t.hasAttributes()?t.attributes:[],e={},r=0;r<n.length;r++){var s=n[r];s.value&&(e[s.name]=""===s.value||s.value)}var o=void 0,i=void 0;return e.class&&(o=e.class,delete e.class),e.style&&(i=e.style,delete e.style),{attrs:e,class:o,style:i}}function e(t){return Array.isArray(t)||"object"===(void 0===t?"undefined":a(t))?Object.freeze(t):t}function r(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return t.reduce(function(t,e){var r=e.passengers[0];return r="function"==typeof r?r(n):e.passengers,t.concat(r)},[])}function s(t,n){return t.map(function(t,n){return[n,t]}).sort(function(t,n){return this(t[1],n[1])||t[0]-n[0]}.bind(n)).map(function(t){return t[1]})}function o(t,n){return function(){t&&t.apply(this,arguments),n&&n.apply(this,arguments)}}function i(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};t.component(n.portalName||"Portal",v),t.component(n.portalTargetName||"PortalTarget",g)}t=t&&t.hasOwnProperty("default")?t.default:t;var a="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},u=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},l=function(t){if(Array.isArray(t)){for(var n=0,e=Array(t.length);n<t.length;n++)e[n]=t[n];return e}return Array.from(t)},h={},p=t.extend({data:function(){return{transports:h}},methods:{open:function(n){var r=n.to,o=n.from,i=n.passengers;if(r&&o&&i){n.passengers=e(i);-1===Object.keys(this.transports).indexOf(r)&&t.set(this.transports,r,[]);var a=this.getTransportIndex(n),u=this.transports[r].slice(0);-1===a?u.push(n):u[a]=n,this.transports[r]=s(u,function(t,n){return t.order-n.order})}},close:function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],e=t.to,r=t.from;if(e&&r&&this.transports[e])if(n)this.transports[e]=[];else{var s=this.getTransportIndex(t);if(s>=0){var o=this.transports[e].slice(0);o.splice(s,1),this.transports[e]=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 n=this.transports[t];if(n)return r(n)},getTransportIndex:function(t){var n=t.to,e=t.from;for(var r in this.transports[n])if(this.transports[n][r].from===e)return r;return-1}}}),c=new p(h),f=/^(attrs|props|on|nativeOn|class|style|hook)$/,d=function(t){return t.reduce(function(t,n){var e,r,s,i,a;for(s in n)if(e=t[s],r=n[s],e&&f.test(s))if("class"===s&&("string"==typeof e&&(a=e,t[s]=e={},e[a]=!0),"string"==typeof r&&(a=r,n[s]=r={},r[a]=!0)),"on"===s||"nativeOn"===s||"hook"===s)for(i in r)e[i]=o(e[i],r[i]);else if(Array.isArray(e))t[s]=e.concat(r);else if(Array.isArray(r))t[s]=[e].concat(r);else for(i in r)e[i]=r[i];else t[s]=n[s];return t},{})},g={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:c.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,n={};return this.firstRender&&"object"===a(this.transition)&&!this.transition.appear?(n.props={name:"__notranstition__portal-vue__"},n):("string"==typeof t?n.props={name:t}:"object"===(void 0===t?"undefined":a(t))&&(n.props=t),this.renderSlim&&(n.props.tag=this.tag),n.on=this.transitionEvents,n)},transportedClasses:function(){return this.ownTransports.map(function(t){return t.class}).reduce(function(t,n){return t.concat(n)},[])}},methods:{emitChange:function(t,n){if(this.multiple)this.$emit("change",[].concat(l(t)),[].concat(l(n)));else{var e=0===t.length?void 0:t[0],r=0===n.length?void 0:n[0];this.$emit("change",u({},e),u({},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 n=this.noWrapper(),e=this.children(),r=n?"transition":"transition-group",s=this.tag;if(this.withTransition)return t(r,d([this.transitionData,{class:"vue-portal-target"}]),[e]);var o=this.ownTransports.length;return n?e[0]:t(s,d([{class:"vue-portal-target "+this.transportedClasses.join(" ")},this.attributes,{key:o}]),[e])}},m="undefined"!=typeof window,y=1,v={abstract:!1,name:"portal",props:{disabled:{type:Boolean,default:!1},name:{type:String,default:function(){return String(y++)}},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},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,n){n&&n!==t&&this.clear(n),this.sendUpdate()},targetEl:function(t,n){t&&this.mountToTarget()}},methods:{normalizedSlots:function(){return this.$scopedSlots.default?[this.$scopedSlots.default]:this.$slots.default},sendUpdate:function(){var t=this.normalizedSlots();t?c.open({from:this.name,to:this.to,passengers:[].concat(l(t)),class:this.targetClass&&this.targetClass.split(" "),order:this.order}):this.clear()},clear:function(t){c.close({from:this.name,to:t||this.to})},mountToTarget:function(){var e=void 0,r=this.targetEl;if("string"==typeof r)e=document.querySelector(r);else{if(!(r instanceof HTMLElement))return void console.warn("[vue-portal]: value of targetEl must be of type String or HTMLElement");e=r}if(e){var s=new t(u({},g,{parent:this,propsData:{name:this.to,tag:e.tagName,attributes:n(e)}}));s.$mount(e),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 n=this.$slots.default||this.$scopedSlots.default||[],e=this.tag;return n.length&&this.disabled?(this.$options.abstract=!0,n.length<=1&&this.slim?n[0]:t(e,[this.normalizeChildren(n)])):t(e,{class:"v-portal",style:"display: none",key:"v-portal-placeholder"})}};return"undefined"!=typeof window&&window.Vue&&window.Vue.use({install:i}),{install:i,Portal:v,PortalTarget:g,Wormhole:c}}); |
{ | ||
"name": "portal-vue", | ||
"version": "1.4.0", | ||
"version": "1.5.0", | ||
"description": "A Vue component to render elements outside of a component's template, elsewhere in the DOM", | ||
@@ -10,3 +10,4 @@ "main": "dist/portal-vue.js", | ||
"dist/portal-vue.js.map", | ||
"src" | ||
"src", | ||
"nuxt" | ||
], | ||
@@ -13,0 +14,0 @@ "author": "Thorsten <t.luenborg@googlemail.com>", |
@@ -41,1 +41,11 @@ # PortalVue | ||
``` | ||
## Nuxt module | ||
Add `portal-vue/nuxt` to modules section of `nuxt.config.js` | ||
```javascript | ||
{ | ||
modules: ['portal-vue/nuxt'] | ||
} | ||
``` |
import Vue from 'vue' | ||
import { combinePassengers, freeze } from '../utils' | ||
import { combinePassengers, freeze, stableSort } from '../utils' | ||
const transports = {} | ||
@@ -28,7 +28,5 @@ | ||
} | ||
newTransports.sort(function(a, b) { | ||
this.transports[to] = stableSort(newTransports, function(a, b) { | ||
return a.order - b.order | ||
}) | ||
this.transports[to] = newTransports | ||
}, | ||
@@ -35,0 +33,0 @@ |
@@ -44,1 +44,8 @@ export function extractAttributes(el) { | ||
} | ||
export function stableSort(array, compareFn) { | ||
return array | ||
.map((v, idx) => [idx, v]) | ||
.sort(function (a,b) { return this(a[1], b[1]) || a[0] - b[0] }.bind(compareFn)) | ||
.map(c => c[1]) | ||
} |
Sorry, the diff of this file is not supported yet
77374
16
1015
51