@linusborg/vue-simple-portal - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/index.umd.js

 
 /**
  * vue-simple-portal
- * version: 0.1.0,
+ * version: 0.1.1,
  * (c) Thorsten Lünborg, 2019
@@ -10,9 +10,8 @@ * LICENCE: Apache-2.0
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('nanoid/non-secure')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'nanoid/non-secure'], factory) :
-  (global = global || self, factory(global.VueSimplePortal = {}, global.Vue, global.id));
-}(this, function (exports, Vue, id) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
+  (global = global || self, factory(global.VueSimplePortal = {}, global.Vue));
+}(this, function (exports, Vue) { 'use strict';
 
   Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
-  id = id && id.hasOwnProperty('default') ? id['default'] : id;
 
@@ -33,4 +32,33 @@ function _typeof(obj) {
 
+  var url = 'bjectSymhasOwnProp-0123456789ABCDEFGHIJKLMNQRTUVWXYZ_dfgiklquvxz';
+
+  /**
+   * Generate URL-friendly unique ID. This method use non-secure predictable
+   * random generator.
+   *
+   * By default, ID will have 21 symbols to have a collision probability similar
+   * to UUID v4.
+   *
+   * @param {number} [size=21] The number of symbols in ID.
+   *
+   * @return {string} Random string.
+   *
+   * @example
+   * const nanoid = require('nanoid/non-secure')
+   * model.id = nanoid() //=> "Uakgb_J5m9g-0JDMbcJqL"
+   *
+   * @name nonSecure
+   * @function
+   */
+  var nonSecure = function (size) {
+    size = size || 21;
+    var id = '';
+    while (0 < size--) {
+      id += url[Math.random() * 64 | 0];
+    }
+    return id
+  };
+
   var config = {
-    selector: "vue-portal-target-".concat(id())
+    selector: "vue-portal-target-".concat(nonSecure())
   };
@@ -37,0 +65,0 @@ var setSelector = function setSelector(selector) {

dist/index.umd.min.js

 
 /**
  * vue-simple-portal
- * version: 0.1.0,
+ * version: 0.1.1,
  * (c) Thorsten Lünborg, 2019
@@ -9,3 +9,3 @@ * LICENCE: Apache-2.0
 */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("nanoid/non-secure")):"function"==typeof define&&define.amd?define(["exports","vue","nanoid/non-secure"],t):t((e=e||self).VueSimplePortal={},e.Vue,e.id)}(this,function(e,t,n){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}t=t&&t.hasOwnProperty("default")?t.default:t,n=n&&n.hasOwnProperty("default")?n.default:n;var r={selector:"vue-portal-target-".concat(n())},i=function(e){return r.selector=e},d="undefined"!=typeof window&&void 0!==("undefined"==typeof document?"undefined":o(document)),u=t.extend({abstract:!0,name:"PortalOutlet",props:["nodes","tag"],data:function(e){return{updatedNodes:e.nodes}},render:function(e){var t=this.updatedNodes&&this.updatedNodes();return t?t.length<2&&!t[0].text?t:e(this.tag||"DIV",t):e()},destroyed:function(){var e=this.$el;e.parentNode.removeChild(e)}}),s=t.extend({name:"VueSimplePortal",props:{disabled:{type:Boolean},prepend:{type:Boolean},selector:{type:String,default:function(){return"#".concat(r.selector)}},tag:{type:String,default:"DIV"}},render:function(e){if(this.disabled){var t=this.$scopedSlots&&this.$scopedSlots.default();return t?t.length<2&&!t[0].text?t:e(this.tag,t):e()}return e()},created:function(){this.getTargetEl()||this.insertTargetEl()},updated:function(){var e=this;this.$nextTick(function(){e.disabled||e.slotFn===e.$scopedSlots.default||(e.container.updatedNodes=e.$scopedSlots.default),e.slotFn=e.$scopedSlots.default})},beforeDestroy:function(){this.unmount()},watch:{disabled:{immediate:!0,handler:function(e){e?this.unmount():this.$nextTick(this.mount)}}},methods:{getTargetEl:function(){if(d)return document.querySelector(this.selector)},insertTargetEl:function(){if(d){var e=document.querySelector("body"),t=document.createElement(this.tag);t.id=r.selector,e.append(t)}},mount:function(){var e=this.getTargetEl(),t=document.createElement("DIV");this.prepend&&e.firstChild?e.insertBefore(t,e.firstChild):e.append(t),this.container=new u({el:t,parent:this,propsData:{tag:this.tag,nodes:this.$scopedSlots.default}})},unmount:function(){this.container&&(this.container.$destroy(),delete this.container)}}});function a(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.component(t.name||"portal",s),t.defaultSelector&&i(t.defaultSelector)}"undefined"!=typeof window&&window.Vue&&window.Vue===t&&t.use(a),e.Portal=s,e.config=r,e.default=a,e.setSelector=i,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e=e||self).VueSimplePortal={},e.Vue)}(this,function(e,t){"use strict";function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}t=t&&t.hasOwnProperty("default")?t.default:t;var o={selector:"vue-portal-target-".concat(function(e){e=e||21;for(var t="";0<e--;)t+="bjectSymhasOwnProp-0123456789ABCDEFGHIJKLMNQRTUVWXYZ_dfgiklquvxz"[64*Math.random()|0];return t}())},r=function(e){return o.selector=e},i="undefined"!=typeof window&&void 0!==("undefined"==typeof document?"undefined":n(document)),d=t.extend({abstract:!0,name:"PortalOutlet",props:["nodes","tag"],data:function(e){return{updatedNodes:e.nodes}},render:function(e){var t=this.updatedNodes&&this.updatedNodes();return t?t.length<2&&!t[0].text?t:e(this.tag||"DIV",t):e()},destroyed:function(){var e=this.$el;e.parentNode.removeChild(e)}}),u=t.extend({name:"VueSimplePortal",props:{disabled:{type:Boolean},prepend:{type:Boolean},selector:{type:String,default:function(){return"#".concat(o.selector)}},tag:{type:String,default:"DIV"}},render:function(e){if(this.disabled){var t=this.$scopedSlots&&this.$scopedSlots.default();return t?t.length<2&&!t[0].text?t:e(this.tag,t):e()}return e()},created:function(){this.getTargetEl()||this.insertTargetEl()},updated:function(){var e=this;this.$nextTick(function(){e.disabled||e.slotFn===e.$scopedSlots.default||(e.container.updatedNodes=e.$scopedSlots.default),e.slotFn=e.$scopedSlots.default})},beforeDestroy:function(){this.unmount()},watch:{disabled:{immediate:!0,handler:function(e){e?this.unmount():this.$nextTick(this.mount)}}},methods:{getTargetEl:function(){if(i)return document.querySelector(this.selector)},insertTargetEl:function(){if(i){var e=document.querySelector("body"),t=document.createElement(this.tag);t.id=o.selector,e.append(t)}},mount:function(){var e=this.getTargetEl(),t=document.createElement("DIV");this.prepend&&e.firstChild?e.insertBefore(t,e.firstChild):e.append(t),this.container=new d({el:t,parent:this,propsData:{tag:this.tag,nodes:this.$scopedSlots.default}})},unmount:function(){this.container&&(this.container.$destroy(),delete this.container)}}});function s(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.component(t.name||"portal",u),t.defaultSelector&&r(t.defaultSelector)}"undefined"!=typeof window&&window.Vue&&window.Vue===t&&t.use(s),e.Portal=u,e.config=o,e.default=s,e.setSelector=r,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=index.umd.min.js.map

package.json

 {
   "name": "@linusborg/vue-simple-portal",
   "description": "A simple Portal implementation for Vue, to mount slot content to another element",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "author": {
@@ -6,0 +6,0 @@ "name": "Thorsten Lünborg",

README.md

@@ -7,3 +7,3 @@ # vue-simple-portal
 
-`vue-simple-portal` allows you to mount its slot content to the very end of the body element (or potentially any other DOM element on he page) as an immediate child.
+`vue-simple-portal` allows you to mount its slot content to the very end of the body element (or potentially any other DOM element on the page) as an immediate child.
 
@@ -103,3 +103,3 @@ Its main usecase are components/elements that need to be positioned absolutely relative to the document/viewport, or fixed in some way or another, like:
 // main.js
-import Vue from 'vue'
+import Vue from 'vue' // reuqires Vue >= 2.6
 import VuePortal from '@linusborg/vue-simple-portal'
@@ -158,3 +158,3 @@
 
-### Customizing the selector.
+### Customizing the selector
 
@@ -178,4 +178,2 @@ As shown in the initial Usage Example, you can use the `selector` prop to append to an element of your choosing.
 
-
-
 ## Props
@@ -351,2 +349,2 @@
 This project is based on Vue CLI, so see [Configuration Reference](https://cli.vuejs.org/config/) of Vue CLI for further details.
-</details>
+</details>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38262

increased by4.26%

Lines of code

517

increased by5.3%

Worsened metrics

Number of lines in readme file

346

decreased by-0.29%

No dependency changes