New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
vue-smooth-height
Advanced tools
vue-smooth-height - npm Package Compare versions
Comparing version 1.5.0 to 1.5.1
@@ -210,61 +210,41 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
| // Vue specific object | ||
| var methods = { | ||
| $registerElement: function $registerElement(options) { | ||
| console.warn('vue-smooth-height: $registerElement is deprecated. Use $smoothElement instead'); | ||
| this.$smoothElement(options); | ||
| var mixin = { | ||
| methods: { | ||
| $smoothElement: function $smoothElement(options) { | ||
| var _addElement = addElement.bind(this); | ||
| if (Array.isArray(options)) options.forEach(_addElement);else _addElement(options); | ||
| }, | ||
| $unsmoothElement: function $unsmoothElement(options) { | ||
| var _removeElement = removeElement.bind(this); | ||
| if (Array.isArray(options)) options.forEach(_removeElement);else _removeElement(options); | ||
| } | ||
| }, | ||
| $removeElementElement: function $removeElementElement(options) { | ||
| console.warn('vue-smooth-height: $removeElementElement is deprecated. Use $unsmoothElement instead'); | ||
| this.$unsmoothElement(options); | ||
| created: function created() { | ||
| this._smoothElements = []; | ||
| }, | ||
| $registerSmoothElement: function $registerSmoothElement(options) { | ||
| console.warn('vue-smooth-height: $registerSmoothElement is deprecated. Use $smoothElement instead'); | ||
| this.$smoothElement(options); | ||
| }, | ||
| $removeElementSmoothElement: function $removeElementSmoothElement(options) { | ||
| console.warn('vue-smooth-height: $removeElementSmoothElement is deprecated. Use $unsmoothElement instead'); | ||
| this.$unsmoothElement(options); | ||
| }, | ||
| $smoothElement: function $smoothElement(options) { | ||
| var _addElement = addElement.bind(this); | ||
| beforeUpdate: function beforeUpdate() { | ||
| var _this = this; | ||
| if (Array.isArray(options)) options.forEach(_addElement);else _addElement(options); | ||
| if (!this._smoothElements || !this._smoothElements.length) return; | ||
| this._smoothElements.forEach(function (e) { | ||
| // Retrieve registered element on demand | ||
| var $el = select(_this.$el, e.options.el); | ||
| e.beforeUpdate($el); | ||
| }); | ||
| }, | ||
| $unsmoothElement: function $unsmoothElement(options) { | ||
| var _removeElement = removeElement.bind(this); | ||
| updated: function updated() { | ||
| var _this2 = this; | ||
| if (Array.isArray(options)) options.forEach(_removeElement);else _removeElement(options); | ||
| if (!this._smoothElements || !this._smoothElements.length) return; | ||
| this.$nextTick(function () { | ||
| _this2._smoothElements.forEach(function (e) { | ||
| return e.doSmoothReflow(); | ||
| }); | ||
| }); | ||
| } | ||
| }; // Vue lifecycle hook | ||
| }; // 'this' is vue component | ||
| function created() { | ||
| this._smoothElements = []; | ||
| } // Vue lifecycle hook | ||
| function beforeUpdate() { | ||
| var _this = this; | ||
| if (!this._smoothElements || !this._smoothElements.length) return; | ||
| this._smoothElements.forEach(function (e) { | ||
| var $el = select(_this.$el, e.options.el); | ||
| e.beforeUpdate($el); | ||
| }); | ||
| } // Vue lifecycle hook | ||
| function updated() { | ||
| var _this2 = this; | ||
| if (!this._smoothElements || !this._smoothElements.length) return; | ||
| this.$nextTick(function () { | ||
| _this2._smoothElements.forEach(function (e) { | ||
| return e.doSmoothReflow(); | ||
| }); | ||
| }); | ||
| } // 'this' is vue component | ||
| function addElement(option) { | ||
@@ -300,6 +280,4 @@ if (!option.el) { | ||
| var STATES = { | ||
| BEFORE_UPDATE: 0, | ||
| UPDATED: 1, | ||
| ENDED: 2, | ||
| INTERRUPTED: 3 | ||
| INACTIVE: 0, | ||
| ACTIVE: 1 | ||
| }; | ||
@@ -316,3 +294,3 @@ | ||
| // User given argument. Element or selector string | ||
| transition: 'height 1s', | ||
| transition: 'height .5s', | ||
| // User can specify a transition if they don't want to use CSS | ||
@@ -326,3 +304,3 @@ hideOverflow: false, | ||
| hasExistingHeightTransition: false, | ||
| state: STATES.START, | ||
| state: STATES.INACTIVE, | ||
| options: options | ||
@@ -358,3 +336,3 @@ }); // transition end callback will call endListener, so it needs the correct context | ||
| if (this.state === STATES.IN_PROGRESS) { | ||
| if (this.state === STATES.ACTIVE) { | ||
| this.stopTransition(); | ||
@@ -364,3 +342,3 @@ this.log('Transition was interrupted.'); | ||
| this.transition(STATES.IN_PROGRESS); | ||
| this.transition(STATES.ACTIVE); | ||
| } | ||
@@ -381,3 +359,3 @@ }, { | ||
| if (beforeHeight == afterHeight) { | ||
| this.transition(STATES.ENDED); | ||
| this.transition(STATES.INACTIVE); | ||
| this.log("Element height did not change between render."); | ||
@@ -455,3 +433,3 @@ return; | ||
| $el.removeEventListener('transitionend', this.endListener); | ||
| this.transition(STATES.ENDED); | ||
| this.transition(STATES.INACTIVE); | ||
| } | ||
@@ -468,8 +446,3 @@ }, { | ||
| var _default = { | ||
| methods: methods, | ||
| created: created, | ||
| beforeUpdate: beforeUpdate, | ||
| updated: updated | ||
| }; | ||
| var _default = mixin; | ||
| exports.default = _default; | ||
@@ -476,0 +449,0 @@ |
@@ -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,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(o,i,function(t){return e[t]}.bind(null,i));return 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=2)}([function(e,t){e.exports=function(e){if(!e)return;const t=e.endsWith("ms");return parseFloat(e)*(t?1:1e3)}},function(e,t,n){const o=n(0);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,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o,i=(o=n(1))&&o.__esModule?o:{default:o};function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var l={$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){e.el?this._smoothElements.push(new u(e)):console.error('vue-smooth-height: Missing required property: "el"')}.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 a(t,n.el).isEqualNode(a(t,e.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(e)?e.forEach(t):t(e)}};function a(e,t){return"string"==typeof t?e.matches(t)?e:e.querySelector(t):t}var h={BEFORE_UPDATE:0,UPDATED:1,ENDED:2,INTERRUPTED:3},u=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),t=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),o.forEach(function(t){r(e,t,n[t])})}return e}({el:null,transition:"height 1s",hideOverflow:!1,debug:!1},t),Object.assign(this,{$el:null,hasExistingHeightTransition:!1,state:h.START,options:t}),this.endListener=this.endListener.bind(this)}var t,n;return t=e,(n=[{key:"transition",value:function(e){this.state=e}},{key:"endListener",value:function(e){e.currentTarget===e.target&&"height"===e.propertyName&&this.stopTransition()}},{key:"beforeUpdate",value:function(e){if(e){this.$el=e;var t=window.getComputedStyle(e).height;this.beforeHeight=t,this.state===h.IN_PROGRESS&&(this.stopTransition(),this.log("Transition was interrupted.")),this.transition(h.IN_PROGRESS)}}},{key:"doSmoothReflow",value:function(){if(this.$el){var e=this.$el,t=this.beforeHeight,n=this.options,o=window.getComputedStyle(e),r=o.height;if(t==r)return this.transition(h.ENDED),void this.log("Element height did not change between render.");this.log("Previous height: ".concat(t," Current height: ").concat(r));var s=o.transition,l=(0,i.default)(s);if(this.hasHeightTransition(l)?this.hasExistingHeightTransition=!0:(this.hasExistingHeightTransition=!1,this.addHeightTransition(l,n.transition)),n.hideOverflow){var a=o.overflowY,u=o.overflowX;this.overflowX=u,this.overflowY=a,e.style.overflowX="hidden",e.style.overflowY="hidden"}e.style.height=t,e.offsetHeight,e.style.height=r,e.addEventListener("transitionend",this.endListener,{passive:!0})}}},{key:"hasHeightTransition",value:function(e){return e.find(function(e){return["all","height"].includes(e.name)&&e.duration>0})}},{key:"addHeightTransition",value:function(e,t){var n=e.map(function(e){return"".concat(e.name," ").concat(e.duration,"ms ").concat(e.timingFunction," ").concat(e.delay,"ms")});this.$el.style.transition=function(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}(n).concat([t]).join(",")}},{key:"stopTransition",value:function(){var e=this.$el,t=this.options,n=this.overflowX,o=this.overflowY,i=this.hasExistingHeightTransition;e.style.height=null,t.hideOverflow&&(e.style.overflowX=n,e.style.overflowY=o),i||(e.style.transition=null),e.removeEventListener("transitionend",this.endListener),this.transition(h.ENDED)}},{key:"log",value:function(e){this.options.debug&&console.log("VSM_DEBUG: ".concat(e),this.$el)}}])&&s(t.prototype,n),e}(),c={methods:l,created:function(){this._smoothElements=[]},beforeUpdate:function(){var e=this;this._smoothElements&&this._smoothElements.length&&this._smoothElements.forEach(function(t){var n=a(e.$el,t.options.el);t.beforeUpdate(n)})},updated:function(){var e=this;this._smoothElements&&this._smoothElements.length&&this.$nextTick(function(){e._smoothElements.forEach(function(e){return e.doSmoothReflow()})})}};t.default=c}]).default; | ||
| 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; |
| { | ||
| "name": "vue-smooth-height", | ||
| "version": "1.5.0", | ||
| "version": "1.5.1", | ||
| "description": "Transition a container elements height in response to data changes", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
@@ -26,2 +26,3 @@ | ||
| Module: | ||
@@ -54,3 +55,3 @@ ```javascript | ||
| ## CSS Transitions | ||
| VSM will check if the element has a height transition, either through the stylesheet or inline styles. If it exists, VSM will use that. If it doesn't, it will apply `transition: height 1s` to the element's inline style, and append any existing transition properties it finds. | ||
| VSM will check if the element has a height transition, either through the stylesheet or inline styles. If it exists, VSM will use that. If it doesn't, it will apply `transition: height .5s` to the element's inline style, and append any existing transition properties it finds. | ||
@@ -65,3 +66,3 @@ For example, if the element has this style: | ||
| VSM will set ```style="transition: opacity 1s, height 1s;"``` on the element during the transition. After the transition, it will remove the inline style. | ||
| VSM will set ```style="transition: opacity 1s, height .5s;"``` on the element during the transition. After the transition, it will remove the inline style. | ||
@@ -83,3 +84,3 @@ For compatibility, do not set your other transitions on the element as inline styles, as they will be overridden. | ||
| el|Element, String|null|Required. A reference to the element, or a selector string. Use a selector string if the element is not rendered initially. If the selector string is a class, the first query match will be used. | ||
| transition|String|<nobr>`height 1s`</nobr>| The CSS shorthand `transition` property. Use this option if you don't want to use stylesheets (`<style>...</style>`). | ||
| transition|String|<nobr>`height .5s`</nobr>| The CSS shorthand `transition` property. Use this option if you don't want to use stylesheets (`<style>...</style>`). | ||
| hideOverflow|Boolean|false|If the element has a scrollbar, ugly reflow flickers can occur when children create/destroy a new row (think flexbox). Set true to disable overflow during the transition. | ||
@@ -86,0 +87,0 @@ debug|Boolean|false|Logs messages at certain times within the transition lifecycle. |
114
src/index.js
| import parseCssTransition from 'parse-css-transition' | ||
| // Vue specific object | ||
| const methods = { | ||
| $registerElement(options) { | ||
| console.warn('vue-smooth-height: $registerElement is deprecated. Use $smoothElement instead') | ||
| this.$smoothElement(options) | ||
| const mixin = { | ||
| methods: { | ||
| $smoothElement(options) { | ||
| let _addElement = addElement.bind(this) | ||
| if (Array.isArray(options)) | ||
| options.forEach(_addElement) | ||
| else | ||
| _addElement(options) | ||
| }, | ||
| $unsmoothElement(options) { | ||
| let _removeElement = removeElement.bind(this) | ||
| if (Array.isArray(options)) | ||
| options.forEach(_removeElement) | ||
| else | ||
| _removeElement(options) | ||
| }, | ||
| }, | ||
| $removeElementElement(options) { | ||
| console.warn('vue-smooth-height: $removeElementElement is deprecated. Use $unsmoothElement instead') | ||
| this.$unsmoothElement(options) | ||
| created() { | ||
| this._smoothElements = [] | ||
| }, | ||
| $registerSmoothElement(options) { | ||
| console.warn('vue-smooth-height: $registerSmoothElement is deprecated. Use $smoothElement instead') | ||
| this.$smoothElement(options) | ||
| beforeUpdate() { | ||
| if (!this._smoothElements || !this._smoothElements.length) | ||
| return | ||
| this._smoothElements.forEach(e =>{ | ||
| // Retrieve registered element on demand | ||
| let $el = select(this.$el, e.options.el) | ||
| e.beforeUpdate($el) | ||
| }) | ||
| }, | ||
| $removeElementSmoothElement(options) { | ||
| console.warn('vue-smooth-height: $removeElementSmoothElement is deprecated. Use $unsmoothElement instead') | ||
| this.$unsmoothElement(options) | ||
| }, | ||
| $smoothElement(options) { | ||
| let _addElement = addElement.bind(this) | ||
| if (Array.isArray(options)) | ||
| options.forEach(_addElement) | ||
| else | ||
| _addElement(options) | ||
| }, | ||
| $unsmoothElement(options) { | ||
| let _removeElement = removeElement.bind(this) | ||
| if (Array.isArray(options)) | ||
| options.forEach(_removeElement) | ||
| else | ||
| _removeElement(options) | ||
| }, | ||
| updated() { | ||
| if (!this._smoothElements || !this._smoothElements.length) | ||
| return | ||
| this.$nextTick(()=>{ | ||
| this._smoothElements.forEach(e => e.doSmoothReflow()) | ||
| }) | ||
| } | ||
| } | ||
| // Vue lifecycle hook | ||
| function created() { | ||
| this._smoothElements = [] | ||
| } | ||
| // Vue lifecycle hook | ||
| function beforeUpdate() { | ||
| if (!this._smoothElements || !this._smoothElements.length) | ||
| return | ||
| this._smoothElements.forEach(e =>{ | ||
| let $el = select(this.$el, e.options.el) | ||
| e.beforeUpdate($el) | ||
| }) | ||
| } | ||
| // Vue lifecycle hook | ||
| function updated() { | ||
| if (!this._smoothElements || !this._smoothElements.length) | ||
| return | ||
| this.$nextTick(()=>{ | ||
| this._smoothElements.forEach(e => e.doSmoothReflow()) | ||
| }) | ||
| } | ||
| // 'this' is vue component | ||
@@ -92,10 +71,6 @@ function addElement(option) { | ||
| const STATES = { | ||
| BEFORE_UPDATE: 0, | ||
| UPDATED: 1, | ||
| ENDED: 2, | ||
| INTERRUPTED: 3 | ||
| INACTIVE: 0, | ||
| ACTIVE: 1 | ||
| } | ||
| class SmoothElement { | ||
@@ -105,3 +80,3 @@ constructor(options) { | ||
| el: null, // User given argument. Element or selector string | ||
| transition: 'height 1s', // User can specify a transition if they don't want to use CSS | ||
| transition: 'height .5s', // User can specify a transition if they don't want to use CSS | ||
| hideOverflow: false, | ||
@@ -114,3 +89,3 @@ debug: false, | ||
| hasExistingHeightTransition: false, | ||
| state: STATES.START, | ||
| state: STATES.INACTIVE, | ||
| options | ||
@@ -137,7 +112,7 @@ }) | ||
| this.beforeHeight = height | ||
| if (this.state === STATES.IN_PROGRESS) { | ||
| if (this.state === STATES.ACTIVE) { | ||
| this.stopTransition() | ||
| this.log('Transition was interrupted.') | ||
| } | ||
| this.transition(STATES.IN_PROGRESS) | ||
| this.transition(STATES.ACTIVE) | ||
| } | ||
@@ -153,3 +128,3 @@ doSmoothReflow() { | ||
| if (beforeHeight == afterHeight) { | ||
| this.transition(STATES.ENDED) | ||
| this.transition(STATES.INACTIVE) | ||
| this.log(`Element height did not change between render.`) | ||
@@ -216,3 +191,3 @@ return | ||
| $el.removeEventListener('transitionend', this.endListener) | ||
| this.transition(STATES.ENDED) | ||
| this.transition(STATES.INACTIVE) | ||
| } | ||
@@ -225,7 +200,2 @@ log(text) { | ||
| export default { | ||
| methods, | ||
| created, | ||
| beforeUpdate, | ||
| updated, | ||
| } | ||
| export default mixin |
Sorry, the diff of this file is not supported yet
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by28.57%
9
- Number of lines in readme file
- increased by0.8%
126
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-6.27%
40734
- Lines of code
- decreased by-4.64%
617
No dependency changes