vue-smooth-height - npm Package Compare versions

Comparing version 1.2.9 to 1.2.10

dist/vue-smooth-height.js

@@ -155,3 +155,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
     if (index == -1) {
-        console.error("vue-smooth-height: Remove smooth element failed due to invalid el option");
+        console.error('vue-smooth-height: Remove smooth element failed due to invalid el option');
         return;
@@ -175,7 +175,6 @@ }
 
-    if (!this._smoothElements || !this._smoothElements.length) return;
+    if (!this._smoothElements || !this._smoothElements.length || !this.$el) return;
 
     this._smoothElements.forEach(function (option) {
-        var el = option.el,
-            debug = option.debug;
+        var el = option.el;
         // Find element during update time, instead of registration time
@@ -202,3 +201,3 @@
 
-    if (!this._smoothElements || !this._smoothElements.length) return;
+    if (!this._smoothElements || !this._smoothElements.length || !this.$el) return;
 
@@ -218,4 +217,3 @@ this._smoothElements.forEach(function (option) {
         beforeHeight = option.beforeHeight,
-        hideOverflow = option.hideOverflow,
-        debug = option.debug;
+        hideOverflow = option.hideOverflow;
 
@@ -233,8 +231,8 @@
     var transition = computedStyle.transition;
-    option.parsedTransition = (0, _parseCssTransition2.default)(transition);
-    if (hasHeightTransition(option.parsedTransition)) {
+    var parsedTransition = (0, _parseCssTransition2.default)(transition);
+    if (hasHeightTransition(parsedTransition)) {
         option.hasExistingHeightTransition = true;
     } else {
         option.hasExistingHeightTransition = false;
-        addHeightTransition($el, option.parsedTransition);
+        addHeightTransition($el, parsedTransition);
     }
@@ -241,0 +239,0 @@

dist/vue-smooth-height.min.js

@@ -1,1 +0,1 @@
-window.SmoothHeight=function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o,i=n(1),r=(o=i)&&o.__esModule?o:{default:o};var s={$registerElement:function(e){console.warn("vue-smooth-height: $registerElement is deprecated. Use $smoothElement instead"),this.$smoothElement(e)},$removeElementElement:function(e){console.warn("vue-smooth-height: $removeElementElement is deprecated. Use $unsmoothElement instead"),this.$unsmoothElement(e)},$registerSmoothElement:function(e){console.warn("vue-smooth-height: $registerSmoothElement is deprecated. Use $smoothElement instead"),this.$smoothElement(e)},$removeElementSmoothElement:function(e){console.warn("vue-smooth-height: $removeElementSmoothElement is deprecated. Use $unsmoothElement instead"),this.$unsmoothElement(e)},$smoothElement:function(e){var t=function(e){if(!e.el)return void console.error('vue-smooth-height: Missing required property: "el"');var t={el:null,hideOverflow:!1,debug:!1,hasExistingHeightTransition:!1,transitionState:h.START,log:function(t){e.debug&&console.log("VSM_DEBUG: "+t)}};(e=Object.assign(t,e)).endListener=function(e){if(e.currentTarget!==e.target||"height"!==e.propertyName)return;this.stopTransition()}.bind(e),e.stopTransition=function(){var e=this.$el,t=this.hideOverflow,n=this.overflowX,o=this.overflowY,i=this.hasExistingHeightTransition;e.style.height=null,t&&(e.style.overflowX=n,e.style.overflowY=o);i||(e.style.transition=null);e.removeEventListener("transitionend",this.endListener),this.transitionState=h.ENDED}.bind(e),this._smoothElements.push(e)}.bind(this);Array.isArray(e)?e.forEach(t):t(e)},$unsmoothElement:function(e){var t=function(e){var t=this.$el,n=this._smoothElements.findIndex(function(n){return l(t,n.el).isEqualNode(l(t,e.el))});if(-1==n)return void console.error("vue-smooth-height: Remove smooth element failed due to invalid el option");this._smoothElements.splice(n,1)}.bind(this);Array.isArray(e)?e.forEach(t):t(e)}};function l(e,t){return"string"==typeof t?e.matches(t)?e:e.querySelector(t):t}var h={IN_PROGRESS:1,ENDED:2,INTERRUPTED:3};t.default={methods:s,created:function(){this._smoothElements=[]},beforeUpdate:function(){var e=this;this._smoothElements&&this._smoothElements.length&&this._smoothElements.forEach(function(t){var n=t.el,o=(t.debug,l(e.$el,n));if(o){t.$el=o;var i=window.getComputedStyle(o).height;t.beforeHeight=i,t.transitionState===h.IN_PROGRESS&&(t.stopTransition(),t.log("Transition was interrupted.")),t.transitionState=h.IN_PROGRESS}})},updated:function(){var e=this;this._smoothElements&&this._smoothElements.length&&this._smoothElements.forEach(function(t){t.$el&&e.$nextTick(function(){return function(e){var t=e.$el,n=e.beforeHeight,o=e.hideOverflow,i=(e.debug,window.getComputedStyle(t)),s=i.height;if(n==s)return e.transitionState=h.ENDED,void e.log("Element height did not change between render.");e.log("Previous height: "+n+" Current height: "+s);var l=i.transition;if(e.parsedTransition=(0,r.default)(l),e.parsedTransition.find(function(e){return["all","height"].includes(e.name)&&e.duration>0})?e.hasExistingHeightTransition=!0:(e.hasExistingHeightTransition=!1,function(e,t){var n=t.map(function(e){return e.name+" "+e.duration+"ms "+e.timingFunction+" "+e.delay+"ms"});e.style.transition=n.join(",")+",height 1s"}(t,e.parsedTransition)),o){var a=i.overflowY,u=i.overflowX;e.overflowX=u,e.overflowY=a,t.style.overflowX="hidden",t.style.overflowY="hidden"}t.style.height=n,t.offsetHeight,t.style.height=s,t.addEventListener("transitionend",e.endListener,{passive:!0})}(t)})})}}},function(e,t,n){const o=n(2);function i(e){const[t,n,i,r]=e.split(/\s+/);return/^-?(0?\.)?\d+m?s$/.test(i)?{delay:o(i),duration:o(n),name:t}:{delay:o(r),duration:o(n),name:t,timingFunction:i}}e.exports=function(e){return e.split(",").map(e=>e.trim()).filter(e=>e.length>0).map(i)}},function(e,t){e.exports=function(e){if(!e)return;const t=e.endsWith("ms");return parseFloat(e)*(t?1:1e3)}}]).default;
+window.SmoothHeight=function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o,i=n(1),r=(o=i)&&o.__esModule?o:{default:o};var s={$registerElement:function(e){console.warn("vue-smooth-height: $registerElement is deprecated. Use $smoothElement instead"),this.$smoothElement(e)},$removeElementElement:function(e){console.warn("vue-smooth-height: $removeElementElement is deprecated. Use $unsmoothElement instead"),this.$unsmoothElement(e)},$registerSmoothElement:function(e){console.warn("vue-smooth-height: $registerSmoothElement is deprecated. Use $smoothElement instead"),this.$smoothElement(e)},$removeElementSmoothElement:function(e){console.warn("vue-smooth-height: $removeElementSmoothElement is deprecated. Use $unsmoothElement instead"),this.$unsmoothElement(e)},$smoothElement:function(e){var t=function(e){if(!e.el)return void console.error('vue-smooth-height: Missing required property: "el"');var t={el:null,hideOverflow:!1,debug:!1,hasExistingHeightTransition:!1,transitionState:h.START,log:function(t){e.debug&&console.log("VSM_DEBUG: "+t)}};(e=Object.assign(t,e)).endListener=function(e){if(e.currentTarget!==e.target||"height"!==e.propertyName)return;this.stopTransition()}.bind(e),e.stopTransition=function(){var e=this.$el,t=this.hideOverflow,n=this.overflowX,o=this.overflowY,i=this.hasExistingHeightTransition;e.style.height=null,t&&(e.style.overflowX=n,e.style.overflowY=o);i||(e.style.transition=null);e.removeEventListener("transitionend",this.endListener),this.transitionState=h.ENDED}.bind(e),this._smoothElements.push(e)}.bind(this);Array.isArray(e)?e.forEach(t):t(e)},$unsmoothElement:function(e){var t=function(e){var t=this.$el,n=this._smoothElements.findIndex(function(n){return l(t,n.el).isEqualNode(l(t,e.el))});if(-1==n)return void console.error("vue-smooth-height: Remove smooth element failed due to invalid el option");this._smoothElements.splice(n,1)}.bind(this);Array.isArray(e)?e.forEach(t):t(e)}};function l(e,t){return"string"==typeof t?e.matches(t)?e:e.querySelector(t):t}var h={IN_PROGRESS:1,ENDED:2,INTERRUPTED:3};t.default={methods:s,created:function(){this._smoothElements=[]},beforeUpdate:function(){var e=this;this._smoothElements&&this._smoothElements.length&&this.$el&&this._smoothElements.forEach(function(t){var n=t.el,o=l(e.$el,n);if(o){t.$el=o;var i=window.getComputedStyle(o).height;t.beforeHeight=i,t.transitionState===h.IN_PROGRESS&&(t.stopTransition(),t.log("Transition was interrupted.")),t.transitionState=h.IN_PROGRESS}})},updated:function(){var e=this;this._smoothElements&&this._smoothElements.length&&this.$el&&this._smoothElements.forEach(function(t){t.$el&&e.$nextTick(function(){return function(e){var t=e.$el,n=e.beforeHeight,o=e.hideOverflow,i=window.getComputedStyle(t),s=i.height;if(n==s)return e.transitionState=h.ENDED,void e.log("Element height did not change between render.");e.log("Previous height: "+n+" Current height: "+s);var l=i.transition,a=(0,r.default)(l);if(!function(e){return e.find(function(e){return["all","height"].includes(e.name)&&e.duration>0})}(a)?(e.hasExistingHeightTransition=!1,function(e,t){var n=t.map(function(e){return e.name+" "+e.duration+"ms "+e.timingFunction+" "+e.delay+"ms"});e.style.transition=n.join(",")+",height 1s"}(t,a)):e.hasExistingHeightTransition=!0,o){var u=i.overflowY,m=i.overflowX;e.overflowX=m,e.overflowY=u,t.style.overflowX="hidden",t.style.overflowY="hidden"}t.style.height=n,t.offsetHeight,t.style.height=s,t.addEventListener("transitionend",e.endListener,{passive:!0})}(t)})})}}},function(e,t,n){const o=n(2);function i(e){const[t,n,i,r]=e.split(/\s+/);return/^-?(0?\.)?\d+m?s$/.test(i)?{delay:o(i),duration:o(n),name:t}:{delay:o(r),duration:o(n),name:t,timingFunction:i}}e.exports=function(e){return e.split(",").map(e=>e.trim()).filter(e=>e.length>0).map(i)}},function(e,t){e.exports=function(e){if(!e)return;const t=e.endsWith("ms");return parseFloat(e)*(t?1:1e3)}}]).default;

package.json

 {
   "name": "vue-smooth-height",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "description": "Transition a container elements height in response to data changes",
@@ -5,0 +5,0 @@ "license": "MIT",

src/index.js

@@ -73,3 +73,3 @@ import parseCssTransition from 'parse-css-transition'
     if (index == -1) {
-        console.error("vue-smooth-height: Remove smooth element failed due to invalid el option")
+        console.error('vue-smooth-height: Remove smooth element failed due to invalid el option')
         return
@@ -95,7 +95,7 @@ }
 function beforeUpdate() {
-    if (!this._smoothElements || !this._smoothElements.length) 
+    if (!this._smoothElements || !this._smoothElements.length || !this.$el) 
         return
 
     this._smoothElements.forEach(option => {
-        let { el, debug } = option
+        let { el } = option
         // Find element during update time, instead of registration time
@@ -119,3 +119,3 @@ let $el = select(this.$el, el)
 function updated() {
-    if (!this._smoothElements || !this._smoothElements.length) 
+    if (!this._smoothElements || !this._smoothElements.length || !this.$el) 
         return
@@ -132,3 +132,3 @@
 function doSmoothReflow(option) {
-    let { $el, beforeHeight, hideOverflow, debug } = option
+    let { $el, beforeHeight, hideOverflow } = option
 
@@ -139,3 +139,3 @@ let computedStyle = window.getComputedStyle($el)
         option.transitionState = STATES.ENDED
-        option.log(`Element height did not change between render.`)
+        option.log('Element height did not change between render.')
         return
@@ -146,8 +146,8 @@ }
     let transition = computedStyle.transition
-    option.parsedTransition = parseCssTransition(transition)
-    if (hasHeightTransition(option.parsedTransition)) {
+    let parsedTransition = parseCssTransition(transition)
+    if (hasHeightTransition(parsedTransition)) {
         option.hasExistingHeightTransition = true
     } else {
         option.hasExistingHeightTransition = false
-        addHeightTransition($el, option.parsedTransition)
+        addHeightTransition($el, parsedTransition)
     }
@@ -154,0 +154,0 @@

No alert changes

Improved metrics

Total package byte prevSize

28188

increased by1.5%

Number of package files

7

increased by16.67%

Lines of code

581

increased by4.68%

No dependency changes