Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-focus - npm Package Compare versions
Comparing version 1.0.0 to 2.0.0-rc1
@@ -0,1 +1,7 @@ | ||
| ## [2.0.0-rc1] - 2016-09-22 | ||
| ## Breaking changes | ||
| - Vue 2.0 now required | ||
| - `v-focus-model` and `v-focus-auto` are removed | ||
| ## [1.0.0] - 2016-09-22 | ||
@@ -33,1 +39,2 @@ | ||
| [1.0.0]: https://github.com/simplesmiler/vue-focus/compare/0.1.2...1.0.0 | ||
| [2.0.0-rc1]: https://github.com/simplesmiler/vue-focus/compare/1.0.0...2.0.0-rc1 |
| 'use strict'; | ||
| var Vue = require('vue'); | ||
| var Vue__default = 'default' in Vue ? Vue['default'] : Vue; | ||
| // @NOTE: We have to use Vue.nextTick because the element might not be | ||
| // present at the time model changes, but will be in the next batch. | ||
| // But because we use Vue.nextTick, the directive may already be unbound | ||
| // by the time the callback executes, so we have to make sure it was not. | ||
| var focus = { | ||
| priority: 1000, | ||
| bind: function() { | ||
| var self = this; | ||
| this.bound = true; | ||
| this.focus = function() { | ||
| if (self.bound === true) { | ||
| self.el.focus(); | ||
| } | ||
| }; | ||
| this.blur = function() { | ||
| if (self.bound === true) { | ||
| self.el.blur(); | ||
| } | ||
| }; | ||
| inserted: function(el, binding) { | ||
| if (binding.value) el.focus(); | ||
| else el.blur(); | ||
| }, | ||
| update: function(value) { | ||
| if (value) { | ||
| Vue__default.nextTick(this.focus); | ||
| } else { | ||
| Vue__default.nextTick(this.blur); | ||
| } | ||
| componentUpdated: function(el, binding) { | ||
| if (binding.value) el.focus(); | ||
| else el.blur(); | ||
| }, | ||
| unbind: function() { | ||
| this.bound = false; | ||
| }, | ||
| }; | ||
| var focusModel = { | ||
| twoWay: true, | ||
| priority: 1000, | ||
| bind: function() { | ||
| Vue.util.warn( | ||
| this.name + '="' + | ||
| this.expression + '" is deprecated, ' + | ||
| 'use v-focus="' + this.expression + '" @focus="' + this.expression + ' = true" @blur="' + this.expression + ' = false" instead' | ||
| ); | ||
| var self = this; | ||
| this.bound = true; | ||
| this.focus = function() { | ||
| if (self.bound === true) { | ||
| self.el.focus(); | ||
| } | ||
| }; | ||
| this.blur = function() { | ||
| if (self.bound === true) { | ||
| self.el.blur(); | ||
| } | ||
| }; | ||
| this.focusHandler = function() { | ||
| self.set(true); | ||
| }; | ||
| this.blurHandler = function() { | ||
| self.set(false); | ||
| }; | ||
| Vue.util.on(this.el, 'focus', this.focusHandler); | ||
| Vue.util.on(this.el, 'blur', this.blurHandler); | ||
| }, | ||
| update: function(value) { | ||
| if (value === true) { | ||
| Vue__default.nextTick(this.focus); | ||
| } else if (value === false) { | ||
| Vue__default.nextTick(this.blur); | ||
| } else { | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| Vue.util.warn( | ||
| this.name + '="' + | ||
| this.expression + '" expects a boolean value, ' + | ||
| 'got ' + JSON.stringify(value) | ||
| ); | ||
| } | ||
| } | ||
| }, | ||
| unbind: function() { | ||
| Vue.util.off(this.el, 'focus', this.focusHandler); | ||
| Vue.util.off(this.el, 'blur', this.blurHandler); | ||
| this.bound = false; | ||
| }, | ||
| }; | ||
| var focusAuto = { | ||
| priority: 100, | ||
| bind: function() { | ||
| Vue.util.warn( | ||
| this.name + ' is deprecated, ' + | ||
| 'use v-focus="true" instead' | ||
| ); | ||
| var self = this; | ||
| this.bound = true; | ||
| Vue__default.nextTick(function() { | ||
| if (self.bound === true) { | ||
| self.el.focus(); | ||
| } | ||
| }); | ||
| }, | ||
| unbind: function(){ | ||
| this.bound = false; | ||
| }, | ||
| }; | ||
| var mixin = { | ||
| directives: { | ||
| focus: focus, | ||
| focusModel: focusModel, | ||
| focusAuto: focusAuto, | ||
| }, | ||
@@ -136,4 +22,2 @@ }; | ||
| exports.focus = focus; | ||
| exports.focusModel = focusModel; | ||
| exports.focusAuto = focusAuto; | ||
| exports.mixin = mixin; |
@@ -1,131 +0,18 @@ | ||
| (function (exports,Vue) { 'use strict'; | ||
| (function (exports) { 'use strict'; | ||
| var Vue__default = 'default' in Vue ? Vue['default'] : Vue; | ||
| // @NOTE: We have to use Vue.nextTick because the element might not be | ||
| // present at the time model changes, but will be in the next batch. | ||
| // But because we use Vue.nextTick, the directive may already be unbound | ||
| // by the time the callback executes, so we have to make sure it was not. | ||
| var focus = { | ||
| priority: 1000, | ||
| bind: function() { | ||
| var self = this; | ||
| this.bound = true; | ||
| this.focus = function() { | ||
| if (self.bound === true) { | ||
| self.el.focus(); | ||
| } | ||
| }; | ||
| this.blur = function() { | ||
| if (self.bound === true) { | ||
| self.el.blur(); | ||
| } | ||
| }; | ||
| inserted: function(el, binding) { | ||
| if (binding.value) el.focus(); | ||
| else el.blur(); | ||
| }, | ||
| update: function(value) { | ||
| if (value) { | ||
| Vue__default.nextTick(this.focus); | ||
| } else { | ||
| Vue__default.nextTick(this.blur); | ||
| } | ||
| componentUpdated: function(el, binding) { | ||
| if (binding.value) el.focus(); | ||
| else el.blur(); | ||
| }, | ||
| unbind: function() { | ||
| this.bound = false; | ||
| }, | ||
| }; | ||
| var focusModel = { | ||
| twoWay: true, | ||
| priority: 1000, | ||
| bind: function() { | ||
| Vue.util.warn( | ||
| this.name + '="' + | ||
| this.expression + '" is deprecated, ' + | ||
| 'use v-focus="' + this.expression + '" @focus="' + this.expression + ' = true" @blur="' + this.expression + ' = false" instead' | ||
| ); | ||
| var self = this; | ||
| this.bound = true; | ||
| this.focus = function() { | ||
| if (self.bound === true) { | ||
| self.el.focus(); | ||
| } | ||
| }; | ||
| this.blur = function() { | ||
| if (self.bound === true) { | ||
| self.el.blur(); | ||
| } | ||
| }; | ||
| this.focusHandler = function() { | ||
| self.set(true); | ||
| }; | ||
| this.blurHandler = function() { | ||
| self.set(false); | ||
| }; | ||
| Vue.util.on(this.el, 'focus', this.focusHandler); | ||
| Vue.util.on(this.el, 'blur', this.blurHandler); | ||
| }, | ||
| update: function(value) { | ||
| if (value === true) { | ||
| Vue__default.nextTick(this.focus); | ||
| } else if (value === false) { | ||
| Vue__default.nextTick(this.blur); | ||
| } else { | ||
| if ('development' !== 'production') { | ||
| Vue.util.warn( | ||
| this.name + '="' + | ||
| this.expression + '" expects a boolean value, ' + | ||
| 'got ' + JSON.stringify(value) | ||
| ); | ||
| } | ||
| } | ||
| }, | ||
| unbind: function() { | ||
| Vue.util.off(this.el, 'focus', this.focusHandler); | ||
| Vue.util.off(this.el, 'blur', this.blurHandler); | ||
| this.bound = false; | ||
| }, | ||
| }; | ||
| var focusAuto = { | ||
| priority: 100, | ||
| bind: function() { | ||
| Vue.util.warn( | ||
| this.name + ' is deprecated, ' + | ||
| 'use v-focus="true" instead' | ||
| ); | ||
| var self = this; | ||
| this.bound = true; | ||
| Vue__default.nextTick(function() { | ||
| if (self.bound === true) { | ||
| self.el.focus(); | ||
| } | ||
| }); | ||
| }, | ||
| unbind: function(){ | ||
| this.bound = false; | ||
| }, | ||
| }; | ||
| var mixin = { | ||
| directives: { | ||
| focus: focus, | ||
| focusModel: focusModel, | ||
| focusAuto: focusAuto, | ||
| }, | ||
@@ -135,6 +22,4 @@ }; | ||
| exports.focus = focus; | ||
| exports.focusModel = focusModel; | ||
| exports.focusAuto = focusAuto; | ||
| exports.mixin = mixin; | ||
| })((this.VueFocus = {}),Vue); | ||
| })((this.VueFocus = {})); |
@@ -1,1 +0,1 @@ | ||
| !function(i,u){"use strict";var t="default"in u?u.default:u,n={priority:1e3,bind:function(){var i=this;this.bound=!0,this.focus=function(){i.bound===!0&&i.el.focus()},this.blur=function(){i.bound===!0&&i.el.blur()}},update:function(i){i?t.nextTick(this.focus):t.nextTick(this.blur)},unbind:function(){this.bound=!1}},s={twoWay:!0,priority:1e3,bind:function(){u.util.warn(this.name+'="'+this.expression+'" is deprecated, use v-focus="'+this.expression+'" @focus="'+this.expression+' = true" @blur="'+this.expression+' = false" instead');var i=this;this.bound=!0,this.focus=function(){i.bound===!0&&i.el.focus()},this.blur=function(){i.bound===!0&&i.el.blur()},this.focusHandler=function(){i.set(!0)},this.blurHandler=function(){i.set(!1)},u.util.on(this.el,"focus",this.focusHandler),u.util.on(this.el,"blur",this.blurHandler)},update:function(i){i===!0?t.nextTick(this.focus):i===!1&&t.nextTick(this.blur)},unbind:function(){u.util.off(this.el,"focus",this.focusHandler),u.util.off(this.el,"blur",this.blurHandler),this.bound=!1}},o={priority:100,bind:function(){u.util.warn(this.name+' is deprecated, use v-focus="true" instead');var i=this;this.bound=!0,t.nextTick(function(){i.bound===!0&&i.el.focus()})},unbind:function(){this.bound=!1}},e={directives:{focus:n,focusModel:s,focusAuto:o}};i.focus=n,i.focusModel=s,i.focusAuto=o,i.mixin=e}(this.VueFocus={},Vue); | ||
| !function(u){"use strict";var c={inserted:function(u,c){c.value?u.focus():u.blur()},componentUpdated:function(u,c){c.value?u.focus():u.blur()}},e={directives:{focus:c}};u.focus=c,u.mixin=e}(this.VueFocus={}); |
126
index.js
@@ -1,131 +0,17 @@ | ||
| import Vue from 'vue'; | ||
| import { util } from 'vue'; | ||
| // @NOTE: We have to use Vue.nextTick because the element might not be | ||
| // present at the time model changes, but will be in the next batch. | ||
| // But because we use Vue.nextTick, the directive may already be unbound | ||
| // by the time the callback executes, so we have to make sure it was not. | ||
| export var focus = { | ||
| priority: 1000, | ||
| bind: function() { | ||
| var self = this; | ||
| this.bound = true; | ||
| this.focus = function() { | ||
| if (self.bound === true) { | ||
| self.el.focus(); | ||
| } | ||
| }; | ||
| this.blur = function() { | ||
| if (self.bound === true) { | ||
| self.el.blur(); | ||
| } | ||
| }; | ||
| inserted: function(el, binding) { | ||
| if (binding.value) el.focus(); | ||
| else el.blur(); | ||
| }, | ||
| update: function(value) { | ||
| if (value) { | ||
| Vue.nextTick(this.focus); | ||
| } else { | ||
| Vue.nextTick(this.blur); | ||
| } | ||
| componentUpdated: function(el, binding) { | ||
| if (binding.value) el.focus(); | ||
| else el.blur(); | ||
| }, | ||
| unbind: function() { | ||
| this.bound = false; | ||
| }, | ||
| }; | ||
| export var focusModel = { | ||
| twoWay: true, | ||
| priority: 1000, | ||
| bind: function() { | ||
| util.warn( | ||
| this.name + '="' + | ||
| this.expression + '" is deprecated, ' + | ||
| 'use v-focus="' + this.expression + '" @focus="' + this.expression + ' = true" @blur="' + this.expression + ' = false" instead' | ||
| ); | ||
| var self = this; | ||
| this.bound = true; | ||
| this.focus = function() { | ||
| if (self.bound === true) { | ||
| self.el.focus(); | ||
| } | ||
| }; | ||
| this.blur = function() { | ||
| if (self.bound === true) { | ||
| self.el.blur(); | ||
| } | ||
| }; | ||
| this.focusHandler = function() { | ||
| self.set(true); | ||
| }; | ||
| this.blurHandler = function() { | ||
| self.set(false); | ||
| }; | ||
| util.on(this.el, 'focus', this.focusHandler); | ||
| util.on(this.el, 'blur', this.blurHandler); | ||
| }, | ||
| update: function(value) { | ||
| if (value === true) { | ||
| Vue.nextTick(this.focus); | ||
| } else if (value === false) { | ||
| Vue.nextTick(this.blur); | ||
| } else { | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| util.warn( | ||
| this.name + '="' + | ||
| this.expression + '" expects a boolean value, ' + | ||
| 'got ' + JSON.stringify(value) | ||
| ); | ||
| } | ||
| } | ||
| }, | ||
| unbind: function() { | ||
| util.off(this.el, 'focus', this.focusHandler); | ||
| util.off(this.el, 'blur', this.blurHandler); | ||
| this.bound = false; | ||
| }, | ||
| }; | ||
| export var focusAuto = { | ||
| priority: 100, | ||
| bind: function() { | ||
| util.warn( | ||
| this.name + ' is deprecated, ' + | ||
| 'use v-focus="true" instead' | ||
| ); | ||
| var self = this; | ||
| this.bound = true; | ||
| Vue.nextTick(function() { | ||
| if (self.bound === true) { | ||
| self.el.focus(); | ||
| } | ||
| }); | ||
| }, | ||
| unbind: function(){ | ||
| this.bound = false; | ||
| }, | ||
| }; | ||
| export var mixin = { | ||
| directives: { | ||
| focus: focus, | ||
| focusModel: focusModel, | ||
| focusAuto: focusAuto, | ||
| }, | ||
| }; |
| { | ||
| "name": "vue-focus", | ||
| "description": "A set of reusable focus directives for reusable Vue.js components", | ||
| "version": "1.0.0", | ||
| "version": "2.0.0-rc1", | ||
| "author": "Denis Karabaza <denis.karabaza@gmail.com>", | ||
@@ -39,3 +39,3 @@ "browserify": { | ||
| "peerDependencies": { | ||
| "vue": "^1.0.0" | ||
| "vue": "^2.0.0" | ||
| }, | ||
@@ -42,0 +42,0 @@ "repository": { |
@@ -24,3 +24,3 @@ # vue-focus | ||
| - vue: ^1.0.0 | ||
| - vue: ^2.0.0 | ||
@@ -32,3 +32,3 @@ ## Install | ||
| ``` sh | ||
| $ npm install vue-focus@^1.0 --save | ||
| $ npm install vue-focus --save | ||
| ``` | ||
@@ -39,5 +39,5 @@ | ||
| ``` html | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-focus/1.0.0/vue-focus.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-focus/2.0.0/vue-focus.js"></script> | ||
| <!-- OR --> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-focus/1.0.0/vue-focus.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-focus/2.0.0/vue-focus.min.js"></script> | ||
| ``` | ||
@@ -65,43 +65,2 @@ | ||
| ### `focus-model` | ||
| > NOTE: this directive is deprecated. Use `v-focus="expression" @focus="expression = true" @blur="expression = false"` instead. | ||
| A directive that binds focus to the expression in a two-way manner, so that the element recieves focus when you change the bound value to `true` and loses focus when you change the bound value to `false`, **and vice versa**, sets the bound value to `true` when element recieves focus and sets the bound value to `false` when element loses focus. It takes a single argument: an expression to be bound. | ||
| > NOTE: This is a two-way bound directive. If you need a one-way bound version, please refer to [focus](#focus). | ||
| > NOTE: The expression has to be settable, and has to evaluate to a boolean value. | ||
| ``` js | ||
| import { focusModel } from 'vue-focus'; | ||
| export default { | ||
| directives: { focusModel: focusModel }, | ||
| template: '<input type="text" v-focus-model="focused">', | ||
| data: function() { | ||
| return { | ||
| focused: false, | ||
| }; | ||
| }, | ||
| }; | ||
| ``` | ||
| ### `focus-auto` | ||
| > NOTE: this directive is deprecated. Use `v-focus="true"` instead. | ||
| A directive that makes the element gain focus whenever it enters the DOM (either via initial costruction or by the means of `:is`, `v-if` or `v-for`). It takes no arguments. | ||
| > NOTE: This is a reactive replacement for the native html attribute `autofocus`, which does not work after page has finished loading. | ||
| ``` js | ||
| import { focusAuto } from 'vue-focus'; | ||
| export default { | ||
| directives: { focusAuto: focusAuto }, | ||
| template: '<input type="text" v-focus-auto>', | ||
| }; | ||
| ``` | ||
| ### `mixin` | ||
@@ -128,3 +87,2 @@ | ||
| 1. Although you can write an input that gains focus immediately after loosing it, this is not recommended, as two such inputs will fall into infinite recursion and freeze the browser. | ||
| 2. Prior to `vue@1.0` views were able to inherit assets from the parent views, which made it possible to define the directive on the root view and have it available across the whole view hierarchy. Since `vue@1.0` this is not possible. If you still want to define the directive application-wide, you should `Vue.directive('<directive-name>', <directive>);` in your application entry point for every directive you need. But bear in mind that this introduces implicit dependency for your components, making them less reusable. | ||
@@ -131,0 +89,0 @@ ## Notes |
New alerts
License Policy Violation
LicenseThis 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 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
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Improved metrics
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-61.49%
6734
- Lines of code
- decreased by-85.21%
50
- Number of low quality alerts
- increased by100%
2
- Number of lines in readme file
- decreased by-31.58%
91
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes