vue-smooth-height - npm Package Compare versions

Comparing version 1.5.1 to 1.5.2

dist/vue-smooth-height.js

@@ -233,2 +233,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
       // Retrieve registered element on demand
+      // El could have been hidden by v-if/v-show
       var $el = select(_this.$el, e.options.el);
@@ -244,3 +245,6 @@ e.beforeUpdate($el);
       _this2._smoothElements.forEach(function (e) {
-        return e.doSmoothReflow();
+        // Retrieve registered element on demand
+        // El could have been hidden by v-if/v-show
+        var $el = select(_this2.$el, e.options.el);
+        e.doSmoothReflow($el);
       });
@@ -320,5 +324,3 @@ });
       this.stopTransition();
-    } // $el is dynamically queried before each component update
-    // to cover the case where the element is hidden with v-if/v-show/etc
-
+    }
   }, {
@@ -328,7 +330,13 @@ key: "beforeUpdate",
       if (!$el) {
-        return;
+        this.log("Vue beforeUpdate hook: could not find registered el.");
       }
 
-      this.$el = $el;
-      var height = window.getComputedStyle($el)['height'];
+      var height;
+
+      try {
+        height = $el.offsetHeight;
+      } catch (e) {
+        height = 0;
+      }
+
       this.beforeHeight = height;
@@ -340,17 +348,16 @@
       }
-
-      this.transition(STATES.ACTIVE);
     }
   }, {
     key: "doSmoothReflow",
-    value: function doSmoothReflow() {
-      if (!this.$el) {
+    value: function doSmoothReflow($el) {
+      if (!$el) {
+        this.log("Vue updated hook: could not find registered el.");
         return;
       }
 
-      var $el = this.$el,
-          beforeHeight = this.beforeHeight,
+      this.$el = $el;
+      this.transition(STATES.ACTIVE);
+      var beforeHeight = this.beforeHeight,
           options = this.options;
-      var computedStyle = window.getComputedStyle($el);
-      var afterHeight = computedStyle['height'];
+      var afterHeight = $el.offsetHeight;
 
@@ -364,4 +371,4 @@ if (beforeHeight == afterHeight) {
       this.log("Previous height: ".concat(beforeHeight, " Current height: ").concat(afterHeight));
-      var transition = computedStyle.transition;
-      var parsedTransition = (0, _parseCssTransition.default)(transition);
+      var computedStyle = window.getComputedStyle($el);
+      var parsedTransition = (0, _parseCssTransition.default)(computedStyle.transition);
 
@@ -385,6 +392,6 @@ if (this.hasHeightTransition(parsedTransition)) {
 
-      $el.style['height'] = beforeHeight;
+      $el.style['height'] = beforeHeight + 'px';
       $el.offsetHeight; // Force reflow
 
-      $el.style['height'] = afterHeight;
+      $el.style['height'] = afterHeight + 'px';
       $el.addEventListener('transitionend', this.endListener, {
@@ -391,0 +398,0 @@ passive: true

dist/vue-smooth-height.min.js

@@ -1,1 +0,1 @@
-window.SmoothHeight=function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=2)}([function(t,e){t.exports=function(t){if(!t)return;const e=t.endsWith("ms");return parseFloat(t)*(e?1:1e3)}},function(t,e,n){const i=n(0);function o(t){const[e,n,o,r]=t.split(/\s+/);return/^-?(0?\.)?\d+m?s$/.test(o)?{delay:i(o),duration:i(n),name:e}:{delay:i(r),duration:i(n),name:e,timingFunction:o}}t.exports=function(t){return t.split(",").map(t=>t.trim()).filter(t=>t.length>0).map(o)}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var i,o=(i=n(1))&&i.__esModule?i:{default:i};function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function s(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var a={methods:{$smoothElement:function(t){var e=function(t){t.el?this._smoothElements.push(new h(t)):console.error('vue-smooth-height: Missing required property: "el"')}.bind(this);Array.isArray(t)?t.forEach(e):e(t)},$unsmoothElement:function(t){var e=function(t){var e=this.$el,n=this._smoothElements.findIndex(function(n){return l(e,n.el).isEqualNode(l(e,t.el))});-1!=n?this._smoothElements.splice(n,1):console.error("vue-smooth-height: Remove smooth element failed due to invalid el option")}.bind(this);Array.isArray(t)?t.forEach(e):e(t)}},created:function(){this._smoothElements=[]},beforeUpdate:function(){var t=this;this._smoothElements&&this._smoothElements.length&&this._smoothElements.forEach(function(e){var n=l(t.$el,e.options.el);e.beforeUpdate(n)})},updated:function(){var t=this;this._smoothElements&&this._smoothElements.length&&this.$nextTick(function(){t._smoothElements.forEach(function(t){return t.doSmoothReflow()})})}};function l(t,e){return"string"==typeof e?t.matches(e)?t:t.querySelector(e):e}var u={INACTIVE:0,ACTIVE:1},h=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),e=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){r(t,e,n[e])})}return t}({el:null,transition:"height .5s",hideOverflow:!1,debug:!1},e),Object.assign(this,{$el:null,hasExistingHeightTransition:!1,state:u.INACTIVE,options:e}),this.endListener=this.endListener.bind(this)}var e,n;return e=t,(n=[{key:"transition",value:function(t){this.state=t}},{key:"endListener",value:function(t){t.currentTarget===t.target&&"height"===t.propertyName&&this.stopTransition()}},{key:"beforeUpdate",value:function(t){if(t){this.$el=t;var e=window.getComputedStyle(t).height;this.beforeHeight=e,this.state===u.ACTIVE&&(this.stopTransition(),this.log("Transition was interrupted.")),this.transition(u.ACTIVE)}}},{key:"doSmoothReflow",value:function(){if(this.$el){var t=this.$el,e=this.beforeHeight,n=this.options,i=window.getComputedStyle(t),r=i.height;if(e==r)return this.transition(u.INACTIVE),void this.log("Element height did not change between render.");this.log("Previous height: ".concat(e," Current height: ").concat(r));var s=i.transition,a=(0,o.default)(s);if(this.hasHeightTransition(a)?this.hasExistingHeightTransition=!0:(this.hasExistingHeightTransition=!1,this.addHeightTransition(a,n.transition)),n.hideOverflow){var l=i.overflowY,h=i.overflowX;this.overflowX=h,this.overflowY=l,t.style.overflowX="hidden",t.style.overflowY="hidden"}t.style.height=e,t.offsetHeight,t.style.height=r,t.addEventListener("transitionend",this.endListener,{passive:!0})}}},{key:"hasHeightTransition",value:function(t){return t.find(function(t){return["all","height"].includes(t.name)&&t.duration>0})}},{key:"addHeightTransition",value:function(t,e){var n=t.map(function(t){return"".concat(t.name," ").concat(t.duration,"ms ").concat(t.timingFunction," ").concat(t.delay,"ms")});this.$el.style.transition=function(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}(n).concat([e]).join(",")}},{key:"stopTransition",value:function(){var t=this.$el,e=this.options,n=this.overflowX,i=this.overflowY,o=this.hasExistingHeightTransition;t.style.height=null,e.hideOverflow&&(t.style.overflowX=n,t.style.overflowY=i),o||(t.style.transition=null),t.removeEventListener("transitionend",this.endListener),this.transition(u.INACTIVE)}},{key:"log",value:function(t){this.options.debug&&console.log("VSM_DEBUG: ".concat(t),this.$el)}}])&&s(e.prototype,n),t}(),f=a;e.default=f}]).default;
+window.SmoothHeight=function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=2)}([function(t,e){t.exports=function(t){if(!t)return;const e=t.endsWith("ms");return parseFloat(t)*(e?1:1e3)}},function(t,e,n){const o=n(0);function i(t){const[e,n,i,r]=t.split(/\s+/);return/^-?(0?\.)?\d+m?s$/.test(i)?{delay:o(i),duration:o(n),name:e}:{delay:o(r),duration:o(n),name:e,timingFunction:i}}t.exports=function(t){return t.split(",").map(t=>t.trim()).filter(t=>t.length>0).map(i)}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var o,i=(o=n(1))&&o.__esModule?o:{default:o};function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function s(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}var a={methods:{$smoothElement:function(t){var e=function(t){t.el?this._smoothElements.push(new h(t)):console.error('vue-smooth-height: Missing required property: "el"')}.bind(this);Array.isArray(t)?t.forEach(e):e(t)},$unsmoothElement:function(t){var e=function(t){var e=this.$el,n=this._smoothElements.findIndex(function(n){return l(e,n.el).isEqualNode(l(e,t.el))});-1!=n?this._smoothElements.splice(n,1):console.error("vue-smooth-height: Remove smooth element failed due to invalid el option")}.bind(this);Array.isArray(t)?t.forEach(e):e(t)}},created:function(){this._smoothElements=[]},beforeUpdate:function(){var t=this;this._smoothElements&&this._smoothElements.length&&this._smoothElements.forEach(function(e){var n=l(t.$el,e.options.el);e.beforeUpdate(n)})},updated:function(){var t=this;this._smoothElements&&this._smoothElements.length&&this.$nextTick(function(){t._smoothElements.forEach(function(e){var n=l(t.$el,e.options.el);e.doSmoothReflow(n)})})}};function l(t,e){return"string"==typeof e?t.matches(e)?t:t.querySelector(e):e}var u={INACTIVE:0,ACTIVE:1},h=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),e=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),o.forEach(function(e){r(t,e,n[e])})}return t}({el:null,transition:"height .5s",hideOverflow:!1,debug:!1},e),Object.assign(this,{$el:null,hasExistingHeightTransition:!1,state:u.INACTIVE,options:e}),this.endListener=this.endListener.bind(this)}var e,n;return e=t,(n=[{key:"transition",value:function(t){this.state=t}},{key:"endListener",value:function(t){t.currentTarget===t.target&&"height"===t.propertyName&&this.stopTransition()}},{key:"beforeUpdate",value:function(t){var e;t||this.log("Vue beforeUpdate hook: could not find registered el.");try{e=t.offsetHeight}catch(t){e=0}this.beforeHeight=e,this.state===u.ACTIVE&&(this.stopTransition(),this.log("Transition was interrupted."))}},{key:"doSmoothReflow",value:function(t){if(t){this.$el=t,this.transition(u.ACTIVE);var e=this.beforeHeight,n=this.options,o=t.offsetHeight;if(e==o)return this.transition(u.INACTIVE),void this.log("Element height did not change between render.");this.log("Previous height: ".concat(e," Current height: ").concat(o));var r=window.getComputedStyle(t),s=(0,i.default)(r.transition);if(this.hasHeightTransition(s)?this.hasExistingHeightTransition=!0:(this.hasExistingHeightTransition=!1,this.addHeightTransition(s,n.transition)),n.hideOverflow){var a=r.overflowY,l=r.overflowX;this.overflowX=l,this.overflowY=a,t.style.overflowX="hidden",t.style.overflowY="hidden"}t.style.height=e+"px",t.offsetHeight,t.style.height=o+"px",t.addEventListener("transitionend",this.endListener,{passive:!0})}else this.log("Vue updated hook: could not find registered el.")}},{key:"hasHeightTransition",value:function(t){return t.find(function(t){return["all","height"].includes(t.name)&&t.duration>0})}},{key:"addHeightTransition",value:function(t,e){var n=t.map(function(t){return"".concat(t.name," ").concat(t.duration,"ms ").concat(t.timingFunction," ").concat(t.delay,"ms")});this.$el.style.transition=function(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}(n).concat([e]).join(",")}},{key:"stopTransition",value:function(){var t=this.$el,e=this.options,n=this.overflowX,o=this.overflowY,i=this.hasExistingHeightTransition;t.style.height=null,e.hideOverflow&&(t.style.overflowX=n,t.style.overflowY=o),i||(t.style.transition=null),t.removeEventListener("transitionend",this.endListener),this.transition(u.INACTIVE)}},{key:"log",value:function(t){this.options.debug&&console.log("VSM_DEBUG: ".concat(t),this.$el)}}])&&s(e.prototype,n),t}(),f=a;e.default=f}]).default;

package.json

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

src/index.js

@@ -26,4 +26,5 @@ import parseCssTransition from 'parse-css-transition'
             return
-        this._smoothElements.forEach(e =>{
+        this._smoothElements.forEach(e => {
             // Retrieve registered element on demand
+            // El could have been hidden by v-if/v-show
             let $el = select(this.$el, e.options.el)
@@ -37,3 +38,8 @@ e.beforeUpdate($el)
         this.$nextTick(()=>{
-            this._smoothElements.forEach(e => e.doSmoothReflow())
+            this._smoothElements.forEach(e => {
+                // Retrieve registered element on demand
+                // El could have been hidden by v-if/v-show
+                let $el = select(this.$el, e.options.el)
+                e.doSmoothReflow($el)
+            })
         })
@@ -102,10 +108,13 @@ }
         this.stopTransition()
-    } // $el is dynamically queried before each component update
-      // to cover the case where the element is hidden with v-if/v-show/etc
+    }
     beforeUpdate($el) {
         if (!$el) {
-            return
+            this.log("Vue beforeUpdate hook: could not find registered el.")
         }
-        this.$el = $el
-        let height = window.getComputedStyle($el)['height']
+        let height
+        try {
+            height = $el.offsetHeight
+        } catch (e) {
+            height = 0
+        }
         this.beforeHeight = height
@@ -116,12 +125,14 @@ if (this.state === STATES.ACTIVE) {
         }
-        this.transition(STATES.ACTIVE)
     }
-    doSmoothReflow() {
-        if (!this.$el) {
+    doSmoothReflow($el) {
+        if (!$el) {
+            this.log("Vue updated hook: could not find registered el.")
             return
         }
-        let { $el, beforeHeight, options } = this
+        this.$el = $el
+        this.transition(STATES.ACTIVE)
 
-        let computedStyle = window.getComputedStyle($el)
-        let afterHeight = computedStyle['height']
+        let { beforeHeight, options } = this
+        
+        let afterHeight = $el.offsetHeight
         if (beforeHeight == afterHeight) {
@@ -134,4 +145,4 @@ this.transition(STATES.INACTIVE)
     
-        let transition = computedStyle.transition
-        let parsedTransition = parseCssTransition(transition)
+        let computedStyle = window.getComputedStyle($el)
+        let parsedTransition = parseCssTransition(computedStyle.transition)
         if (this.hasHeightTransition(parsedTransition)) {
@@ -155,6 +166,7 @@ this.hasExistingHeightTransition = true
         }
-    
-        $el.style['height'] = beforeHeight
+        
+        $el.style['height'] = beforeHeight + 'px'
         $el.offsetHeight // Force reflow
-        $el.style['height'] = afterHeight
+        $el.style['height'] = afterHeight + 'px'
+        
         $el.addEventListener('transitionend', this.endListener, { passive: true })
@@ -161,0 +173,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

41516

increased by1.92%

Lines of code

634

increased by2.76%

No dependency changes