vue-filepond - npm Package Compare versions

Comparing version 5.1.0 to 5.1.1

CHANGELOG.md

 # Changelog
 
+## 5.1.1
+
+- Add `detached` method, the component now waits to be removed from the DOM, it then destroys the FilePond instance (the `destroyed` and `beforeDestroy` methods both run while the component is still in the DOM when using transitions).
+
+
 ## 5.1.0
@@ -4,0 +9,0 @@

dist/vue-filepond.esm.js

 /*!
- * vue-filepond v5.1.0
+ * vue-filepond v5.1.1
  * A handy FilePond adapter component for Vue
@@ -124,2 +124,3 @@ *
         },
+
         // Will setup FilePond instance when mounted
@@ -172,7 +173,33 @@ mounted () {
         // Will clean up FilePond instance when unmounted
-        beforeDestroy () {
-            // exit when no pond defined
-            if (!this._pond) {
+        destroyed () {
+
+            // reference to detached method
+            const { detached } = this.$options;
+            
+            // no longer attached, clean up
+            if (!this.$el.offsetParent) {
+                detached.call(this);
                 return;
             }
+
+            // if we're still attached it's likely a transition is running, we need to 
+            // determine the moment when we're no longer attached to the DOM so we can 
+            // clean up properly
+            const mutationHandler = (mutations, observer) => {
+                const removedNodes = (mutations[0] || {}).removedNodes || [];
+                if (!removedNodes[0] === this.$el) return;
+                observer.disconnect();
+                detached.call(this);
+            }
+
+            // start observing parent element for changes to the DOM
+            const observer = new MutationObserver(mutationHandler);
+            observer.observe(this.$parent.$el, { childList: true })
+        },
+
+        // called when the component root node has been detached
+        detached () {
+
+            // exit when no pond defined
+            if (!this._pond) return;
     
@@ -188,2 +215,4 @@ // bye bye pond
 
+            // clear reference
+            this._pond = null;
         }
@@ -190,0 +219,0 @@ });

dist/vue-filepond.js

 /*!
- * vue-filepond v5.1.0
+ * vue-filepond v5.1.1
  * A handy FilePond adapter component for Vue
@@ -133,2 +133,3 @@ *
 
+
             // Will setup FilePond instance when mounted
@@ -178,8 +179,37 @@ mounted: function mounted() {
             // Will clean up FilePond instance when unmounted
-            beforeDestroy: function beforeDestroy() {
-                // exit when no pond defined
-                if (!this._pond) {
+            destroyed: function destroyed() {
+                var _this2 = this;
+
+                // reference to detached method
+                var detached = this.$options.detached;
+
+                // no longer attached, clean up
+
+                if (!this.$el.offsetParent) {
+                    detached.call(this);
                     return;
                 }
 
+                // if we're still attached it's likely a transition is running, we need to 
+                // determine the moment when we're no longer attached to the DOM so we can 
+                // clean up properly
+                var mutationHandler = function mutationHandler(mutations, observer) {
+                    var removedNodes = (mutations[0] || {}).removedNodes || [];
+                    if (!removedNodes[0] === _this2.$el) return;
+                    observer.disconnect();
+                    detached.call(_this2);
+                };
+
+                // start observing parent element for changes to the DOM
+                var observer = new MutationObserver(mutationHandler);
+                observer.observe(this.$parent.$el, { childList: true });
+            },
+
+
+            // called when the component root node has been detached
+            detached: function detached() {
+
+                // exit when no pond defined
+                if (!this._pond) return;
+
                 // bye bye pond
@@ -193,2 +223,5 @@ this._pond.destroy();
                 }
+
+                // clear reference
+                this._pond = null;
             }
@@ -195,0 +228,0 @@ });

dist/vue-filepond.min.js

 /*!
- * vue-filepond v5.1.0
+ * vue-filepond v5.1.1
  * A handy FilePond adapter component for Vue
@@ -10,2 +10,2 @@ *
  */
-!function(global,factory){if("function"==typeof define&&define.amd)define("vueFilePond",["exports","vue","filepond"],factory);else if("undefined"!=typeof exports)factory(exports,require("vue"),require("filepond"));else{var mod_exports={};factory(mod_exports,global.Vue,global.FilePond),global.vueFilePond=mod_exports}}(this,function(exports,_vue,_filepond){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.setOptions=void 0;var obj,_vue2=(obj=_vue)&&obj.__esModule?obj:{default:obj};var filteredComponentMethods=["setOptions","on","off","onOnce","appendTo","insertAfter","insertBefore","isAttachedTo","replaceElement","restoreElement","destroy"],isSupported=(0,_filepond.supported)(),props={},events=[],watch={},instances=[],globalOptions={};exports.setOptions=function(options){globalOptions=Object.assign(globalOptions,options),instances.forEach(function(instance){instance.setOptions(globalOptions)})};exports.default=function(){_filepond.registerPlugin.apply(void 0,arguments),events.length=0;var _loop=function(prop){if(/^on/.test(prop))return events.push(prop),"continue";var type;props[prop]=[String,(type=_filepond.OptionTypes[prop],{string:String,boolean:Boolean,array:Array,function:Function,int:Number,serverapi:Object,object:Object}[type])],watch[prop]=function(value){this._pond[prop]=value}};for(var prop in _filepond.OptionTypes)_loop(prop);return _vue2.default.component("FilePond",{name:"FilePond",props:props,watch:watch,render:function(h){return h("div",{class:{"filepond--wrapper":!0}},[h("input",{attrs:{id:this.id,name:this.name,type:"file",class:this.className,required:this.required,multiple:this.allowMultiple,accept:this.acceptedFileTypes,capture:this.captureMethod}})])},mounted:function(){var _this=this;if(isSupported){this._element=this.$el.querySelector("input");var options=events.reduce(function(obj,value){return obj[value]=function(){for(var _len=arguments.length,args=Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];_this.$emit("input",_this._pond.getFiles()),_this.$emit.apply(_this,[value.substr(2)].concat(args))},obj},{}),attrs=Object.assign({},this.$attrs);this._pond=(0,_filepond.create)(this._element,Object.assign({},globalOptions,options,attrs,this.$options.propsData)),Object.keys(this._pond).filter(function(key){return!filteredComponentMethods.includes(key)}).forEach(function(key){_this[key]=_this._pond[key]}),instances.push(this._pond)}},beforeDestroy:function(){if(this._pond){this._pond.destroy();var index=instances.indexOf(this._pond);0<=index&&instances.splice(index,1)}}})}});
+!function(global,factory){if("function"==typeof define&&define.amd)define("vueFilePond",["exports","vue","filepond"],factory);else if("undefined"!=typeof exports)factory(exports,require("vue"),require("filepond"));else{var mod_exports={};factory(mod_exports,global.Vue,global.FilePond),global.vueFilePond=mod_exports}}(this,function(exports,_vue,_filepond){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.setOptions=void 0;var obj,_vue2=(obj=_vue)&&obj.__esModule?obj:{default:obj};var filteredComponentMethods=["setOptions","on","off","onOnce","appendTo","insertAfter","insertBefore","isAttachedTo","replaceElement","restoreElement","destroy"],isSupported=(0,_filepond.supported)(),props={},events=[],watch={},instances=[],globalOptions={};exports.setOptions=function(options){globalOptions=Object.assign(globalOptions,options),instances.forEach(function(instance){instance.setOptions(globalOptions)})};exports.default=function(){_filepond.registerPlugin.apply(void 0,arguments),events.length=0;var _loop=function(prop){if(/^on/.test(prop))return events.push(prop),"continue";var type;props[prop]=[String,(type=_filepond.OptionTypes[prop],{string:String,boolean:Boolean,array:Array,function:Function,int:Number,serverapi:Object,object:Object}[type])],watch[prop]=function(value){this._pond[prop]=value}};for(var prop in _filepond.OptionTypes)_loop(prop);return _vue2.default.component("FilePond",{name:"FilePond",props:props,watch:watch,render:function(h){return h("div",{class:{"filepond--wrapper":!0}},[h("input",{attrs:{id:this.id,name:this.name,type:"file",class:this.className,required:this.required,multiple:this.allowMultiple,accept:this.acceptedFileTypes,capture:this.captureMethod}})])},mounted:function(){var _this=this;if(isSupported){this._element=this.$el.querySelector("input");var options=events.reduce(function(obj,value){return obj[value]=function(){for(var _len=arguments.length,args=Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];_this.$emit("input",_this._pond.getFiles()),_this.$emit.apply(_this,[value.substr(2)].concat(args))},obj},{}),attrs=Object.assign({},this.$attrs);this._pond=(0,_filepond.create)(this._element,Object.assign({},globalOptions,options,attrs,this.$options.propsData)),Object.keys(this._pond).filter(function(key){return!filteredComponentMethods.includes(key)}).forEach(function(key){_this[key]=_this._pond[key]}),instances.push(this._pond)}},destroyed:function(){var _this2=this,detached=this.$options.detached;if(this.$el.offsetParent){new MutationObserver(function(mutations,observer){!((mutations[0]||{}).removedNodes||[])[0]!==_this2.$el&&(observer.disconnect(),detached.call(_this2))}).observe(this.$parent.$el,{childList:!0})}else detached.call(this)},detached:function(){if(this._pond){this._pond.destroy();var index=instances.indexOf(this._pond);0<=index&&instances.splice(index,1),this._pond=null}}})}});

example/package.json

@@ -6,2 +6,3 @@ {
   "scripts": {
+    "start": "npm run serve",
     "serve": "vue-cli-service serve",
@@ -12,7 +13,7 @@ "build": "vue-cli-service build",
   "dependencies": {
+    "filepond": "^4.3.6",
+    "filepond-plugin-image-exif-orientation": "^1.0.4",
+    "filepond-plugin-image-preview": "^4.0.5",
     "vue": "^2.5.22",
-    "vue-filepond": "^4.0.3",
-    "filepond": "^4.0.1",
-    "filepond-plugin-image-exif-orientation": "^1.0.4",
-    "filepond-plugin-image-preview": "^4.0.1"
+    "vue-filepond": "^4.0.3"
   },
@@ -19,0 +20,0 @@ "devDependencies": {

lib/index.js

@@ -114,2 +114,3 @@ import Vue from 'vue';
         },
+
         // Will setup FilePond instance when mounted
@@ -162,7 +163,33 @@ mounted () {
         // Will clean up FilePond instance when unmounted
-        beforeDestroy () {
-            // exit when no pond defined
-            if (!this._pond) {
+        destroyed () {
+
+            // reference to detached method
+            const { detached } = this.$options;
+            
+            // no longer attached, clean up
+            if (!this.$el.offsetParent) {
+                detached.call(this);
                 return;
             }
+
+            // if we're still attached it's likely a transition is running, we need to 
+            // determine the moment when we're no longer attached to the DOM so we can 
+            // clean up properly
+            const mutationHandler = (mutations, observer) => {
+                const removedNodes = (mutations[0] || {}).removedNodes || [];
+                if (!removedNodes[0] === this.$el) return;
+                observer.disconnect();
+                detached.call(this);
+            }
+
+            // start observing parent element for changes to the DOM
+            const observer = new MutationObserver(mutationHandler);
+            observer.observe(this.$parent.$el, { childList: true })
+        },
+
+        // called when the component root node has been detached
+        detached () {
+
+            // exit when no pond defined
+            if (!this._pond) return;
     
@@ -178,2 +205,4 @@ // bye bye pond
 
+            // clear reference
+            this._pond = null;
         }
@@ -180,0 +209,0 @@ });

package.json

 {
     "name": "vue-filepond",
-    "version": "5.1.0",
+    "version": "5.1.1",
     "description": "A handy FilePond adapter component for Vue",
@@ -5,0 +5,0 @@ "homepage": "https://pqina.nl/filepond",

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

175595

increased by2.36%

Lines of code

562

increased by13.54%

No dependency changes