Skip to content

Commit 093e796

Browse files
simplesmilersimplesmiler
committed
Rework for Vue 2.0
1 parent 2cada99 commit 093e796

File tree

3 files changed

+17
-173
lines changed

3 files changed

+17
-173
lines changed

‎README.md

Lines changed: 4 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,22 @@ Well not anymore. `vue-focus` lets you manage focus from the safety of your view
2121

2222
## Requirements
2323

24-
- vue: ^1.0.0
24+
- vue: ^2.0.0
2525

2626
## Install
2727

2828
From npm:
2929

3030
``` sh
31-
$ npm install vue-focus@^1.0 --save
31+
$ npm install vue-focus --save
3232
```
3333

3434
From CDN:
3535

3636
``` html
37-
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-focus/1.0.0/vue-focus.js"></script>
37+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-focus/2.0.0/vue-focus.js"></script>
3838
<!-- OR -->
39-
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-focus/1.0.0/vue-focus.min.js"></script>
39+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-focus/2.0.0/vue-focus.min.js"></script>
4040
```
4141

4242
## API
@@ -59,47 +59,6 @@ export default {
5959
};
6060
```
6161

62-
### `focus-model`
63-
64-
> NOTE: this directive is deprecated. Use `v-focus="expression" @focus="expression = true" @blur="expression = false"` instead.
65-
66-
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.
67-
68-
> NOTE: This is a two-way bound directive. If you need a one-way bound version, please refer to [focus](#focus).
69-
70-
> NOTE: The expression has to be settable, and has to evaluate to a boolean value.
71-
72-
``` js
73-
import { focusModel } from 'vue-focus';
74-
75-
export default {
76-
directives: { focusModel: focusModel },
77-
template: '<input type="text" v-focus-model="focused">',
78-
data: function() {
79-
return {
80-
focused: false,
81-
};
82-
},
83-
};
84-
```
85-
86-
### `focus-auto`
87-
88-
> NOTE: this directive is deprecated. Use `v-focus="true"` instead.
89-
90-
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.
91-
92-
> NOTE: This is a reactive replacement for the native html attribute `autofocus`, which does not work after page has finished loading.
93-
94-
``` js
95-
import { focusAuto } from 'vue-focus';
96-
97-
export default {
98-
directives: { focusAuto: focusAuto },
99-
template: '<input type="text" v-focus-auto>',
100-
};
101-
```
102-
10362
### `mixin`
10463

10564
A mixin that makes the `v-focus` directive available to the component under the default name.
@@ -121,7 +80,6 @@ export default {
12180
## Caveats
12281

12382
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.
124-
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.
12583

12684
## Notes
12785

‎examples/index.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Examples for vue-focus</title>
6-
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
6+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.6/vue.js"></script>
77
<script src="../dist/vue-focus.js"></script>
88
</head>
99
<body>
@@ -19,7 +19,7 @@ <h3><code>Example 1: Autofocus</code></h3>
1919

2020
<h3><code>Example 2: Show a hint for the focused field</code></h3>
2121
<div id="example2">
22-
<div><pre>{{ $data | json }}</pre></div>
22+
<div><pre>{{ $data }}</pre></div>
2323
<p>
2424
<input type="text" v-focus="focused" @focus="focused = true" @blur="focused = false">
2525
<span v-if="focused">Focused!</span>
@@ -30,14 +30,14 @@ <h3><code>Example 2: Show a hint for the focused field</code></h3>
3030

3131
<h3><code>Example 3: Move focus</code></h3>
3232
<div id="example3">
33-
<div><pre>{{ { focused: focused } | json }}</pre></div>
34-
<p v-for="item in items">
33+
<div><pre>{{ { focused: focused } }}</pre></div>
34+
<p v-for="(item, index) in items">
3535
<input type="text"
3636
v-model="item.value"
3737
@keydown.down.prevent="moveDown"
3838
@keydown.up.prevent="moveUp"
39-
v-focus="$index === focused"
40-
@focus="focused = $index"
39+
v-focus="index === focused"
40+
@focus="focused = index"
4141
@blur="focused = null"
4242
>
4343
</p>
@@ -48,7 +48,7 @@ <h3><code>Example 3: Move focus</code></h3>
4848

4949
<h3><code>Example 4: Custom label</code></h3>
5050
<div id="example4">
51-
<div><pre>{{ $data | json }}</pre></div>
51+
<div><pre>{{ $data }}</pre></div>
5252
<p>
5353
<span role="label" @mousedown.prevent="focused = true">Label</span>
5454
<input type="text"

‎index.js

Lines changed: 6 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,131 +1,17 @@
1-
import Vue from 'vue';
2-
import { util } from 'vue';
3-
4-
// @NOTE: We have to use Vue.nextTick because the element might not be
5-
// present at the time model changes, but will be in the next batch.
6-
// But because we use Vue.nextTick, the directive may already be unbound
7-
// by the time the callback executes, so we have to make sure it was not.
8-
91
export var focus = {
10-
priority: 1000,
11-
12-
bind: function() {
13-
var self = this;
14-
this.bound = true;
15-
16-
this.focus = function() {
17-
if (self.bound === true) {
18-
self.el.focus();
19-
}
20-
};
21-
22-
this.blur = function() {
23-
if (self.bound === true) {
24-
self.el.blur();
25-
}
26-
};
27-
},
28-
29-
update: function(value) {
30-
if (value) {
31-
Vue.nextTick(this.focus);
32-
} else {
33-
Vue.nextTick(this.blur);
34-
}
2+
inserted: function(el, binding) {
3+
if (binding.value) el.focus();
4+
else el.blur();
355
},
366

37-
unbind: function() {
38-
this.bound = false;
39-
},
40-
};
41-
42-
export var focusModel = {
43-
twoWay: true,
44-
priority: 1000,
45-
46-
bind: function() {
47-
util.warn(
48-
this.name + '="' +
49-
this.expression + '" is deprecated, ' +
50-
'use v-focus="' + this.expression + '" @focus="' + this.expression + ' = true" @blur="' + this.expression + ' = false" instead'
51-
);
52-
53-
var self = this;
54-
this.bound = true;
55-
56-
this.focus = function() {
57-
if (self.bound === true) {
58-
self.el.focus();
59-
}
60-
};
61-
62-
this.blur = function() {
63-
if (self.bound === true) {
64-
self.el.blur();
65-
}
66-
};
67-
68-
this.focusHandler = function() {
69-
self.set(true);
70-
};
71-
72-
this.blurHandler = function() {
73-
self.set(false);
74-
};
75-
76-
util.on(this.el, 'focus', this.focusHandler);
77-
util.on(this.el, 'blur', this.blurHandler);
78-
},
79-
80-
update: function(value) {
81-
if (value === true) {
82-
Vue.nextTick(this.focus);
83-
} else if (value === false) {
84-
Vue.nextTick(this.blur);
85-
} else {
86-
if (process.env.NODE_ENV !== 'production') {
87-
util.warn(
88-
this.name + '="' +
89-
this.expression + '" expects a boolean value, ' +
90-
'got ' + JSON.stringify(value)
91-
);
92-
}
93-
}
94-
},
95-
96-
unbind: function() {
97-
util.off(this.el, 'focus', this.focusHandler);
98-
util.off(this.el, 'blur', this.blurHandler);
99-
this.bound = false;
100-
},
101-
};
102-
103-
export var focusAuto = {
104-
priority: 100,
105-
bind: function() {
106-
util.warn(
107-
this.name + ' is deprecated, ' +
108-
'use v-focus="true" instead'
109-
);
110-
111-
var self = this;
112-
this.bound = true;
113-
114-
Vue.nextTick(function() {
115-
if (self.bound === true) {
116-
self.el.focus();
117-
}
118-
});
119-
},
120-
unbind: function(){
121-
this.bound = false;
7+
componentUpdated: function(el, binding) {
8+
if (binding.value) el.focus();
9+
else el.blur();
12210
},
12311
};
12412

12513
export var mixin = {
12614
directives: {
12715
focus: focus,
128-
focusModel: focusModel,
129-
focusAuto: focusAuto,
13016
},
13117
};

0 commit comments

Comments
 (0)