vue-smooth-height - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

dist/vue-smooth-height.min.js

@@ -1,1 +0,1 @@
-var SmoothHeight=function(e){function t(i){if(r[i])return r[i].exports;var n=r[i]={i:i,l:!1,exports:{}};return e[i].call(n.exports,n,n.exports,t),n.l=!0,n.exports}var r={};return t.m=e,t.c=r,t.d=function(e,r,i){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="dist/",t(t.s=0)}([function(e,t,r){"use strict";function i(e){var t={hideOverflow:!1,property:"height"};if(e=Object.assign(t,e),!e.el)return void console.error('Missing required property: "el"');this._registered.push(e)}function n(e){var t=this.$el,r=this._registered.findIndex(function(r){return o(t,r.el).isEqualNode(o(t,e.el))});if(-1==r)return void console.error("Unregister failed, invalid options object");this._registered.splice(r,1)}function o(e,t){return"string"==typeof t?e.matches(t)?e:e.querySelector(t):t}function s(e){var t=e.currentTarget;if(t===e.target){var r=this.property,i=this.hideOverflow,n=this.overflowX,o=this.overflowY;t.style[r]=null,i&&(t.style.overflowX=n,t.style.overflowY=o),t.removeEventListener("transitionend",s)}}e.exports={methods:{$registerElement:function(e){console.warn("$registerElement is deprecated. Use $registerSmoothElement instead"),this.$registerSmoothElement(e)},$unregisterElement:function(e){console.warn("$unregisterElement is deprecated. Use $unregisterSmoothElement instead"),this.$unregisterSmoothElement(e)},$registerSmoothElement:function(e){var t=i.bind(this);Array.isArray(e)?e.forEach(t):t(e)},$unregisterSmoothElement:function(e){var t=n.bind(this);Array.isArray(e)?e.forEach(t):t(e)}},created:function(){this._registered=[]},beforeUpdate:function(){var e=this;this._registered&&this._registered.length&&this._registered.forEach(function(t){var r=t.el,i=t.property,n=o(e.$el,r);if(t.element=n,n){var s=window.getComputedStyle(n)[i];t.beforeProperty=s}})},updated:function(){var e=this;this._registered&&this._registered.length&&this._registered.forEach(function(t){var r=t.element,i=t.property,n=t.beforeProperty,o=t.hideOverflow;e.$nextTick(function(){var e=window.getComputedStyle(r),l=e[i];if(n!=l){if("0s"===e.transitionDuration&&(r.style.transition="1s"),o){var f=e.overflowY,a=e.overflowX;t.overflowX=a,t.overflowY=f,r.style.overflowX="hidden",r.style.overflowY="hidden"}r.style[i]=n,r.offsetHeight,r.style[i]=l,r.addEventListener("transitionend",s.bind(t),{passive:!0})}})})}}}]);
+var SmoothHeight=function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},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="dist/",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i,r=n(1),o=(i=r)&&i.__esModule?i:{default:i};var s={$registerElement:function(e){console.warn("vue-smooth-height: $registerElement is deprecated. Use $registerSmoothElement instead"),this.$registerSmoothElement(e)},$unregisterElement:function(e){console.warn("vue-smooth-height: $unregisterElement is deprecated. Use $unregisterSmoothElement instead"),this.$unregisterSmoothElement(e)},$registerSmoothElement: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:u.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,i=this.overflowY,r=this.hasExistingHeightTransition;e.style.height=null,t&&(e.style.overflowX=n,e.style.overflowY=i);r||(e.style.transition=null);e.removeEventListener("transitionend",this.endListener),this.transitionState=u.ENDED}.bind(e),this._registered.push(e)}.bind(this);Array.isArray(e)?e.forEach(t):t(e)},$unregisterSmoothElement:function(e){var t=function(e){var t=this.$el,n=this._registered.findIndex(function(n){return a(t,n.el).isEqualNode(a(t,e.el))});if(-1==n)return void console.error("vue-smooth-height: Unregister failed due to invalid el option");this._registered.splice(n,1)}.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 u={IN_PROGRESS:1,ENDED:2,INTERRUPTED:3};t.default={methods:s,created:function(){this._registered=[]},beforeUpdate:function(){var e=this;this._registered&&this._registered.length&&this._registered.forEach(function(t){var n=t.el,i=(t.debug,a(e.$el,n));if(i){t.$el=i;var r=window.getComputedStyle(i).height;t.beforeHeight=r,t.transitionState===u.IN_PROGRESS&&(t.stopTransition(),t.log("Transition was interrupted.")),t.transitionState=u.IN_PROGRESS}})},updated:function(){var e=this;this._registered&&this._registered.length&&this._registered.forEach(function(t){t.$el&&e.$nextTick(function(){return function(e){var t=e.$el,n=e.beforeHeight,i=e.hideOverflow,r=(e.debug,window.getComputedStyle(t)),s=r.height;if(n==s)return e.transitionState=u.ENDED,void e.log("Element height did not change between render.");e.log("Previous height: "+n+" Current height: "+s);var a=r.transition;if(e.parsedTransition=(0,o.default)(a),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)),i){var l=r.overflowY,h=r.overflowX;e.overflowX=h,e.overflowY=l,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 i=n(2);function r(e){const[t,n,r,o]=e.split(/\s+/);return/^-?(0?\.)?\d+m?s$/.test(r)?{delay:i(r),duration:i(n),name:t}:{delay:i(o),duration:i(n),name:t,timingFunction:r}}e.exports=function(e){return e.split(",").map(e=>e.trim()).filter(e=>e.length>0).map(r)}},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.1",
+  "version": "1.2.2",
   "description": "Transition a container elements height in response to data changes",
-  "main": "./dist/index.js",
+  "main": "./src/index.js",
   "scripts": {
-    "build": "npm run babel && npm run webpack",
-    "babel": "babel src --presets babel-preset-es2015 --out-dir dist",
+    "build": "npm run webpack",
     "webpack": "webpack",
@@ -26,7 +25,8 @@ "prepublish": "npm run build"
     "babel-preset-es2015": "^6.24.1",
+    "uglifyjs-webpack-plugin": "^1.2.5",
     "webpack": "^3.8.1"
   },
   "dependencies": {
-    "lodash": "^4.17.4"
+    "parse-css-transition": "0.0.1"
   }
 }

README.md

 
-# Vue Smooth Height
+# Vue Smooth Height (VSM)
 A Vue mixin that answers the question, "How do I transition height: auto?"
 
-This mixin is primarily for container elements that have a dynamic number of children, e.g. lists, however it will work on any element whose height changes due to data changes.  When the container's data is changed, its current height will smoothly transition to the new height, instead of instantly resizing.
+When the component's data is changed (i.e. when the `updated` lifecycle hook is called), its current height will smoothly transition to the new height, instead of instantly resizing. If the transition is interrupted, it will transition from the interrupted height to the new height.
 
-
 Note that this library has no overlap with Vue's built in transition components.
 
 ## Demo
-https://jsfiddle.net/axfwg1L0/14/
+https://jsfiddle.net/axfwg1L0/33/
 
@@ -54,7 +53,19 @@ ## Installation
 
-Same as above, use the global `SmoothHeight`
+The mixin is available via the global variable `SmoothHeight`
 
-## CSS
-This mixin uses css transitions, meaning you can define whatever css transitions you want for the registered element. If the mixin does not detect any transitions on the element, it will apply `transition: 1s` to it.
+## CSS Transitions
+VSM will check if the element has a height transition. 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.
 
+For example, if the element has this style:
+
+```
+.element {
+    transition: opacity 1s;
+}
+```
+
+VSM will set ```style="transition: opacity 1s, height 1s;"``` on the element during the transition. After the transition, it will remove the inline style.
+
+For simplicity, do not set your other transitions on the element as inline styles, as they will be overridden.
+
 ## API
@@ -72,4 +83,5 @@ ### $registerSmoothElement(options)
 -----|-----|-----|-----
-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 selector string is a class, the first query match will be registered
+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 registered.
 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.
+debug|Boolean|false|Logs messages at certain times within the transition lifecycle.
 
@@ -85,3 +97,3 @@
 
-Example:
+Examples:
 
@@ -92,12 +104,18 @@
 mounted(){
-    //registering with element reference
+    // Registering with element reference
     this.$registerSmoothElement({
         el: this.$refs.container,
     })
-    //unregistering with class name
-    this.$unregisterSmoothElement({
+    // Registering with classname
+    this.$registerSmoothElement({
         el: '.container',
     })
+
+    // If the element reference is a component, make sure to pass in its "$el" property.
+    this.$registerSmoothElement({
+        el: this.$refs.container.$el,
+    })
+
 },
 
 ```

webpack.config.js

@@ -1,3 +0,4 @@
-var path = require('path');
-var webpack = require('webpack')
+const path = require('path');
+const webpack = require('webpack')
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
 
@@ -11,2 +12,3 @@ module.exports = {
         library:'SmoothHeight',
+        libraryExport: "default"
     },
@@ -26,4 +28,4 @@ module: {
     plugins:[
-        new webpack.optimize.UglifyJsPlugin(),
+        new UglifyJSPlugin(),
     ]
 }

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

Number of package files

6

increased by20%

Number of lines in readme file

117

increased by18.18%

Worsened metrics

Total package byte prevSize

10538

decreased by-5.73%

Dev dependency count

7

increased by16.67%

Lines of code

27

decreased by-81.12%

Dependency changes

• + Addedparse-css-transition@0.0.1

• + Addedparse-css-transition@0.0.1(transitive)

• - Removedlodash@^4.17.4

• - Removedlodash@4.17.21(transitive)