-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2cada99
commit 093e796
Showing
3 changed files
with
17 additions
and
173 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -21,22 +21,22 @@ Well not anymore. `vue-focus` lets you manage focus from the safety of your view | |
|
|
||
| ## Requirements | ||
|
|
||
| - vue: ^1.0.0 | ||
| - vue: ^2.0.0 | ||
|
|
||
| ## Install | ||
|
|
||
| From npm: | ||
|
|
||
| ``` sh | ||
| $ npm install vue-focus@^1.0 --save | ||
| $ npm install vue-focus --save | ||
| ``` | ||
|
|
||
| From CDN: | ||
|
|
||
| ``` 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> | ||
| ``` | ||
|
|
||
| ## API | ||
|
|
@@ -59,47 +59,6 @@ export default { | |
| }; | ||
| ``` | ||
|
|
||
| ### `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` | ||
|
|
||
| A mixin that makes the `v-focus` directive available to the component under the default name. | ||
|
|
@@ -121,7 +80,6 @@ export default { | |
| ## Caveats | ||
|
|
||
| 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 `[email protected]` 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 `[email protected]` 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. | ||
|
|
||
| ## Notes | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,131 +1,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(); | ||
| } | ||
| }; | ||
| }, | ||
|
|
||
| update: function(value) { | ||
| if (value) { | ||
| Vue.nextTick(this.focus); | ||
| } else { | ||
| Vue.nextTick(this.blur); | ||
| } | ||
| inserted: 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; | ||
| componentUpdated: function(el, binding) { | ||
| if (binding.value) el.focus(); | ||
| else el.blur(); | ||
| }, | ||
| }; | ||
|
|
||
| export var mixin = { | ||
| directives: { | ||
| focus: focus, | ||
| focusModel: focusModel, | ||
| focusAuto: focusAuto, | ||
| }, | ||
| }; |