vue-smooth-height - npm Package Compare versions

Comparing version 1.2.7 to 1.2.9

dist/vue-smooth-height.js

@@ -95,3 +95,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 function created() {
-    this._registered = [];
+    this._smoothElements = [];
 }
@@ -101,20 +101,25 @@
 var methods = {
-    /**
-     * @param {Object | Array} options 
-     */
     $registerElement: function $registerElement(options) {
-        console.warn('vue-smooth-height: $registerElement is deprecated. Use $registerSmoothElement instead');
-        this.$registerSmoothElement(options);
+        console.warn('vue-smooth-height: $registerElement is deprecated. Use $smoothElement instead');
+        this.$smoothElement(options);
     },
-    $unregisterElement: function $unregisterElement(options) {
-        console.warn('vue-smooth-height: $unregisterElement is deprecated. Use $unregisterSmoothElement instead');
-        this.$unregisterSmoothElement(options);
+    $removeElementElement: function $removeElementElement(options) {
+        console.warn('vue-smooth-height: $removeElementElement is deprecated. Use $unsmoothElement instead');
+        this.$unsmoothElement(options);
     },
     $registerSmoothElement: function $registerSmoothElement(options) {
-        var _addOption = addOption.bind(this);
-        if (Array.isArray(options)) options.forEach(_addOption);else _addOption(options);
+        console.warn('vue-smooth-height: $registerSmoothElement is deprecated. Use $smoothElement instead');
+        this.$smoothElement(options);
     },
-    $unregisterSmoothElement: function $unregisterSmoothElement(options) {
-        var _unregister = unregister.bind(this);
-        if (Array.isArray(options)) options.forEach(_unregister);else _unregister(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);
+        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);
     }
@@ -124,3 +129,3 @@ };
 // 'this' is vue component
-function addOption(option) {
+function addElement(option) {
     if (!option.el) {
@@ -143,16 +148,16 @@ console.error('vue-smooth-height: Missing required property: "el"');
     option.stopTransition = stopTransition.bind(option);
-    this._registered.push(option);
+    this._smoothElements.push(option);
 }
 
 // 'this' is vue component
-function unregister(option) {
+function removeElement(option) {
     var root = this.$el;
-    var index = this._registered.findIndex(function (d) {
+    var index = this._smoothElements.findIndex(function (d) {
         return select(root, d.el).isEqualNode(select(root, option.el));
     });
     if (index == -1) {
-        console.error("vue-smooth-height: Unregister failed due to invalid el option");
+        console.error("vue-smooth-height: Remove smooth element failed due to invalid el option");
         return;
     }
-    this._registered.splice(index, 1);
+    this._smoothElements.splice(index, 1);
 }
@@ -173,5 +178,5 @@
 
-    if (!this._registered || !this._registered.length) return;
+    if (!this._smoothElements || !this._smoothElements.length) return;
 
-    this._registered.forEach(function (option) {
+    this._smoothElements.forEach(function (option) {
         var el = option.el,
@@ -200,5 +205,5 @@ debug = option.debug;
 
-    if (!this._registered || !this._registered.length) return;
+    if (!this._smoothElements || !this._smoothElements.length) return;
 
-    this._registered.forEach(function (option) {
+    this._smoothElements.forEach(function (option) {
         if (!option.$el) {
@@ -205,0 +210,0 @@ return;

dist/vue-smooth-height.min.js

@@ -1,1 +0,1 @@
-window.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="",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;
+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;

package.json

 {
   "name": "vue-smooth-height",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "Transition a container elements height in response to data changes",
@@ -29,4 +29,3 @@ "license": "MIT",
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
+    "babel-core": "^6.26.3",
     "babel-loader": "^7.1.2",
@@ -33,0 +32,0 @@ "babel-preset-env": "^1.6.1",

README.md

@@ -10,7 +10,7 @@
 ## Demo
-https://jsfiddle.net/axfwg1L0/33/
+https://jsfiddle.net/axfwg1L0/35/
 
 ## Installation
 
-Using npm:
+Download via npm:
 ```shell
@@ -20,5 +20,5 @@ $ npm install vue-smooth-height
 
-In a browser:
+Include via cdn:
 ```html
-<script src="vue-smooth-height.min.js"></script>
+<script src="https://unpkg.com/vue-smooth-height"></script>
 ```
@@ -32,5 +32,3 @@
     <div>
-        <div class="container" ref="container">
-            <!-- children created with v-for -->
-        </div>
+        <div ref="container"></div>
     </div>
@@ -45,4 +43,3 @@ </template>
     mounted(){
-        //use nextTick if necessary
-        this.$registerSmoothElement({
+        this.$smoothElement({
             el: this.$refs.container,
@@ -75,3 +72,3 @@ })
 ## API
-### $registerSmoothElement(options)
+### $smoothElement(options)
 #### options: Object | Array
@@ -87,3 +84,3 @@
 -----|-----|-----|-----
-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.
+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.
 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.
@@ -93,3 +90,3 @@ debug|Boolean|false|Logs messages at certain times within the transition lifecycle.
 
-### $unregisterSmoothElement(options)
+### $unsmoothElement(options)
 #### options: Object | Array
@@ -109,7 +106,7 @@
     // Registering with element reference
-    this.$registerSmoothElement({
+    this.$smoothElement({
         el: this.$refs.container,
     })
     // Registering with classname
-    this.$registerSmoothElement({
+    this.$smoothElement({
         el: '.container',
@@ -120,3 +117,3 @@ })
     // make sure to pass in its "$el" property.
-    this.$registerSmoothElement({
+    this.$smoothElement({
         el: this.$refs.container.$el,
@@ -123,0 +120,0 @@ })

src/index.js

@@ -5,3 +5,3 @@ import parseCssTransition from 'parse-css-transition'
 function created() {
-    this._registered = []
+    this._smoothElements = []
 }
@@ -11,31 +11,37 @@
 const methods = {
-    /**
-     * @param {Object | Array} options 
-     */
     $registerElement(options) {
-        console.warn('vue-smooth-height: $registerElement is deprecated. Use $registerSmoothElement instead')
-        this.$registerSmoothElement(options)
+        console.warn('vue-smooth-height: $registerElement is deprecated. Use $smoothElement instead')
+        this.$smoothElement(options)
     },
-    $unregisterElement(options) {
-        console.warn('vue-smooth-height: $unregisterElement is deprecated. Use $unregisterSmoothElement instead')
-        this.$unregisterSmoothElement(options)
+    $removeElementElement(options) {
+        console.warn('vue-smooth-height: $removeElementElement is deprecated. Use $unsmoothElement instead')
+        this.$unsmoothElement(options)
     },
     $registerSmoothElement(options) {
-        let _addOption = addOption.bind(this)
+        console.warn('vue-smooth-height: $registerSmoothElement is deprecated. Use $smoothElement instead')
+        this.$smoothElement(options)
+    },
+    $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(_addOption)
+            options.forEach(_addElement)
         else 
-            _addOption(options)
+            _addElement(options)
     },
-    $unregisterSmoothElement(options) {
-        let _unregister = unregister.bind(this)
+    $unsmoothElement(options) {
+        let _removeElement = removeElement.bind(this)
         if (Array.isArray(options))
-            options.forEach(_unregister)
+            options.forEach(_removeElement)
         else 
-            _unregister(options)
-    }
+            _removeElement(options)
+    },
+    
 }
 
 // 'this' is vue component
-function addOption(option) {
+function addElement(option) {
     if (!option.el) {
@@ -59,16 +65,16 @@ console.error('vue-smooth-height: Missing required property: "el"')
     option.stopTransition = stopTransition.bind(option)
-    this._registered.push(option)
+    this._smoothElements.push(option)
 }
 
 // 'this' is vue component
-function unregister(option) {
+function removeElement(option) {
     let root = this.$el
-    let index = this._registered.findIndex(d => {
+    let index = this._smoothElements.findIndex(d => {
         return select(root, d.el).isEqualNode(select(root, option.el))
     })
     if (index == -1) {
-        console.error("vue-smooth-height: Unregister failed due to invalid el option")
+        console.error("vue-smooth-height: Remove smooth element failed due to invalid el option")
         return
     }
-    this._registered.splice(index, 1)
+    this._smoothElements.splice(index, 1)
 }
@@ -91,6 +97,6 @@
 function beforeUpdate() {
-    if (!this._registered || !this._registered.length) 
+    if (!this._smoothElements || !this._smoothElements.length) 
         return
 
-    this._registered.forEach(option => {
+    this._smoothElements.forEach(option => {
         let { el, debug } = option
@@ -115,6 +121,6 @@ // Find element during update time, instead of registration time
 function updated() {
-    if (!this._registered || !this._registered.length) 
+    if (!this._smoothElements || !this._smoothElements.length) 
         return
 
-    this._registered.forEach(option => {
+    this._smoothElements.forEach(option => {
         if (!option.$el) {
@@ -121,0 +127,0 @@ return

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

Major refactor

Supply chain risk

Package 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

Total package byte prevSize

27771

increased by3.62%

Dev dependency count

7

decreased by-12.5%

Lines of code

555

increased by1.83%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

115

decreased by-2.54%

No dependency changes