vue-smooth-height - npm Package Compare versions

Comparing version 1.6.3 to 1.6.4

dist/vue-smooth-height.js

@@ -312,3 +312,4 @@ (function webpackUniversalModuleDefinition(root, factory) {
       transition: 'height .5s',
-      childTransitions: true,
+      // Element or selector string that will emit a transitionend event.
+      childTransitions: null,
       hideOverflow: false,
@@ -458,3 +459,3 @@ debug: false
       // to reflow in the middle of the height transition
-      else if (this.heightDiff <= 0 && this.options.childTransitions) {
+      else if (this.heightDiff <= 0 && this.isRegisteredChildTransition(e)) {
           this.doSmoothReflow(this.$el, 'child transition');
@@ -464,2 +465,8 @@ }
   }, {
+    key: "isRegisteredChildTransition",
+    value: function isRegisteredChildTransition(e) {
+      var childTransitions = this.options.childTransitions;
+      return e.target.matches(childTransitions);
+    }
+  }, {
     key: "stopTransition",
@@ -466,0 +473,0 @@ value: function stopTransition() {

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,n){"use strict";t.exports=function(t){if(t){var e=t.endsWith("ms");return parseFloat(t)*(e?1:1e3)}}},function(t,e,n){"use strict";var i=n(0);function o(t){var e=function(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],i=!0,o=!1,r=void 0;try{for(var s,a=t[Symbol.iterator]();!(i=(s=a.next()).done)&&(n.push(s.value),!e||n.length!==e);i=!0);}catch(t){o=!0,r=t}finally{try{i||null==a.return||a.return()}finally{if(o)throw r}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}(t.split(/\s+/),4),n=e[0],o=e[1],r=e[2],s=e[3];return/^-?(0?\.)?\d+m?s$/.test(r)?{delay:i(r),duration:i(o),name:n}:{delay:i(s),duration:i(o),name:n,timingFunction:r}}t.exports=function(t){return t.split(",").map(function(t){return t.trim()}).filter(function(t){return 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(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};t.hasOwnProperty("el")||(t.el=this.$el),this._smoothElements.push(new f(t))}.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)===l(e,t.el)});-1!=n?(this._smoothElements[n].remove(),this._smoothElements.splice(n,1)):console.error("VSM_ERROR: $unsmoothElement 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.setBeforeHeight(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 h=0,u=Object.freeze({INACTIVE:h++,ACTIVE:h++}),f=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",childTransitions:!0,hideOverflow:!1,debug:!1},e),Object.assign(this,{$el:null,hasExistingHeightTransition:!1,beforeHeight:null,afterHeight:null,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:"setBeforeHeight",value:function(t){var e;this.afterHeight=null,t&&(e=t.offsetHeight),this.beforeHeight=e,this.state===u.ACTIVE&&(this.stopTransition(),this.log("Transition was interrupted."))}},{key:"doSmoothReflow",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"data update";if(t){this.$el=t,this.transition(u.ACTIVE),t.addEventListener("transitionend",this.endListener,{passive:!0}),this.log("Height transition triggered by: ".concat(e));var n=this.beforeHeight,i=this.options,r=t.offsetHeight;if(null!=this.afterHeight&&this.afterHeight===r)return this.log("Element height did not change after nested transition. Height = ".concat(r)),void this.transition(u.INACTIVE);if(n===r)return this.log("Element height did not change. Height = ".concat(r)),void this.transition(u.INACTIVE);this.afterHeight=r,this.log("Previous height: ".concat(n," Current height: ").concat(r));var s=window.getComputedStyle(t),a=(0,o.default)(s.transition);if(this.hasHeightTransition(a)?this.hasExistingHeightTransition=!0:(this.hasExistingHeightTransition=!1,this.addHeightTransition(a,i.transition)),i.hideOverflow){var l=s.overflowY,h=s.overflowX;this.overflowX=h,this.overflowY=l,t.style.overflowX="hidden",t.style.overflowY="hidden"}t.style.height=n+"px",t.offsetHeight,t.style.height=r+"px"}else this.log("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:"endListener",value:function(t){t.currentTarget===t.target?"height"===t.propertyName&&(this.stopTransition(),this.setBeforeHeight(this.$el)):this.heightDiff<=0&&this.options.childTransitions&&this.doSmoothReflow(this.$el,"child transition")}},{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),this.transition(u.INACTIVE)}},{key:"remove",value:function(){this.$el.removeEventListener("transitionend",this.endListener)}},{key:"log",value:function(t){this.options.debug&&console.log("VSM_DEBUG: ".concat(t),this.$el)}},{key:"heightDiff",get:function(){var t=this.beforeHeight,e=this.afterHeight;return null==t||null==e?0:e-t}}])&&s(e.prototype,n),t}(),c=a;e.default=c}]).default;
+window.SmoothHeight=function(t){var e={};function n(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.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 r in t)n.d(i,r,function(e){return t[e]}.bind(null,r));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,n){"use strict";t.exports=function(t){if(t){var e=t.endsWith("ms");return parseFloat(t)*(e?1:1e3)}}},function(t,e,n){"use strict";var i=n(0);function r(t){var e=function(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],i=!0,r=!1,o=void 0;try{for(var s,a=t[Symbol.iterator]();!(i=(s=a.next()).done)&&(n.push(s.value),!e||n.length!==e);i=!0);}catch(t){r=!0,o=t}finally{try{i||null==a.return||a.return()}finally{if(r)throw o}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}(t.split(/\s+/),4),n=e[0],r=e[1],o=e[2],s=e[3];return/^-?(0?\.)?\d+m?s$/.test(o)?{delay:i(o),duration:i(r),name:n}:{delay:i(s),duration:i(r),name:n,timingFunction:o}}t.exports=function(t){return t.split(",").map(function(t){return t.trim()}).filter(function(t){return t.length>0}).map(r)}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var i,r=(i=n(1))&&i.__esModule?i:{default:i};function o(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(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};t.hasOwnProperty("el")||(t.el=this.$el),this._smoothElements.push(new f(t))}.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)===l(e,t.el)});-1!=n?(this._smoothElements[n].remove(),this._smoothElements.splice(n,1)):console.error("VSM_ERROR: $unsmoothElement 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.setBeforeHeight(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 h=0,u=Object.freeze({INACTIVE:h++,ACTIVE:h++}),f=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){o(t,e,n[e])})}return t}({el:null,transition:"height .5s",childTransitions:null,hideOverflow:!1,debug:!1},e),Object.assign(this,{$el:null,hasExistingHeightTransition:!1,beforeHeight:null,afterHeight:null,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:"setBeforeHeight",value:function(t){var e;this.afterHeight=null,t&&(e=t.offsetHeight),this.beforeHeight=e,this.state===u.ACTIVE&&(this.stopTransition(),this.log("Transition was interrupted."))}},{key:"doSmoothReflow",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"data update";if(t){this.$el=t,this.transition(u.ACTIVE),t.addEventListener("transitionend",this.endListener,{passive:!0}),this.log("Height transition triggered by: ".concat(e));var n=this.beforeHeight,i=this.options,o=t.offsetHeight;if(null!=this.afterHeight&&this.afterHeight===o)return this.log("Element height did not change after nested transition. Height = ".concat(o)),void this.transition(u.INACTIVE);if(n===o)return this.log("Element height did not change. Height = ".concat(o)),void this.transition(u.INACTIVE);this.afterHeight=o,this.log("Previous height: ".concat(n," Current height: ").concat(o));var s=window.getComputedStyle(t),a=(0,r.default)(s.transition);if(this.hasHeightTransition(a)?this.hasExistingHeightTransition=!0:(this.hasExistingHeightTransition=!1,this.addHeightTransition(a,i.transition)),i.hideOverflow){var l=s.overflowY,h=s.overflowX;this.overflowX=h,this.overflowY=l,t.style.overflowX="hidden",t.style.overflowY="hidden"}t.style.height=n+"px",t.offsetHeight,t.style.height=o+"px"}else this.log("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:"endListener",value:function(t){t.currentTarget===t.target?"height"===t.propertyName&&(this.stopTransition(),this.setBeforeHeight(this.$el)):this.heightDiff<=0&&this.isRegisteredChildTransition(t)&&this.doSmoothReflow(this.$el,"child transition")}},{key:"isRegisteredChildTransition",value:function(t){var e=this.options.childTransitions;return t.target.matches(e)}},{key:"stopTransition",value:function(){var t=this.$el,e=this.options,n=this.overflowX,i=this.overflowY,r=this.hasExistingHeightTransition;t.style.height=null,e.hideOverflow&&(t.style.overflowX=n,t.style.overflowY=i),r||(t.style.transition=null),this.transition(u.INACTIVE)}},{key:"remove",value:function(){this.$el.removeEventListener("transitionend",this.endListener)}},{key:"log",value:function(t){this.options.debug&&console.log("VSM_DEBUG: ".concat(t),this.$el)}},{key:"heightDiff",get:function(){var t=this.beforeHeight,e=this.afterHeight;return null==t||null==e?0:e-t}}])&&s(e.prototype,n),t}(),c=a;e.default=c}]).default;

package.json

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

README.md

@@ -0,2 +1,6 @@
+# Deprecation notice
 
+Due to an unfortunate naming decision, this package has moved to [vue-smooth-reflow](https://github.com/guanzo/vue-smooth-reflow).
+
+
 # Vue Smooth Height (VSM)
@@ -159,2 +163,2 @@ A Vue mixin that answers the question, "How do I transition height: auto?"
 ### Browser compatibility
-Due to various browser quirks, I cannot guarantee that vue-smooth-height will work as intended on every browser.
+Due to various browser quirks, I cannot guarantee that vue-smooth-height will work as intended on every browser.

src/index.js

@@ -90,3 +90,4 @@ import parseCssTransition from 'parse-css-transition'
             transition: 'height .5s',
-            childTransitions: true,
+            // Element or selector string that will emit a transitionend event.
+            childTransitions: null,
             hideOverflow: false,
@@ -223,6 +224,10 @@ debug: false,
         // to reflow in the middle of the height transition
-        else if (this.heightDiff <= 0 && this.options.childTransitions) {
+        else if (this.heightDiff <= 0 && this.isRegisteredChildTransition(e)) {
             this.doSmoothReflow(this.$el, 'child transition')
         }
     }
+    isRegisteredChildTransition(e) {
+        let { childTransitions } = this.options
+        return e.target.matches(childTransitions)
+    }
     stopTransition() {
@@ -229,0 +234,0 @@ let {

No alert changes

Improved metrics

Total package byte prevSize

52454

increased by1.91%

Lines of code

748

increased by1.63%

Number of lines in readme file

164

increased by3.14%

No dependency changes