vue-focus - npm Package Compare versions

Comparing version 0.1.2 to 1.0.0

CHANGELOG.md

@@ -0,1 +1,6 @@
+## [1.0.0] - 2016-09-22
+
+## Changed
+- `v-focus-model` and `v-focus-auto` are now deprecated
+
 ## [0.1.2] - 2016-08-14
@@ -27,1 +32,2 @@
 [0.1.2]: https://github.com/simplesmiler/vue-focus/compare/0.1.1...0.1.2
+[1.0.0]: https://github.com/simplesmiler/vue-focus/compare/0.1.2...1.0.0

dist/vue-focus.common.js

@@ -49,2 +49,8 @@ 'use strict';
   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;
@@ -103,2 +109,7 @@ this.bound = true;
   bind: function() {
+    Vue.util.warn(
+      this.name + ' is deprecated, ' +
+      'use v-focus="true" instead'
+    );
+
     var self = this;
@@ -105,0 +116,0 @@ this.bound = true;

dist/vue-focus.js

@@ -48,2 +48,8 @@ (function (exports,Vue) { 'use strict';
     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;
@@ -102,2 +108,7 @@ this.bound = true;
     bind: function() {
+      Vue.util.warn(
+        this.name + ' is deprecated, ' +
+        'use v-focus="true" instead'
+      );
+
       var self = this;
@@ -104,0 +115,0 @@ this.bound = true;

dist/vue-focus.min.js

@@ -1,1 +0,1 @@
-!function(u,i){"use strict";var t="default"in i?i.default:i,n={priority:1e3,bind:function(){var u=this;this.bound=!0,this.focus=function(){u.bound===!0&&u.el.focus()},this.blur=function(){u.bound===!0&&u.el.blur()}},update:function(u){u?t.nextTick(this.focus):t.nextTick(this.blur)},unbind:function(){this.bound=!1}},o={twoWay:!0,priority:1e3,bind:function(){var u=this;this.bound=!0,this.focus=function(){u.bound===!0&&u.el.focus()},this.blur=function(){u.bound===!0&&u.el.blur()},this.focusHandler=function(){u.set(!0)},this.blurHandler=function(){u.set(!1)},i.util.on(this.el,"focus",this.focusHandler),i.util.on(this.el,"blur",this.blurHandler)},update:function(u){u===!0?t.nextTick(this.focus):u===!1&&t.nextTick(this.blur)},unbind:function(){i.util.off(this.el,"focus",this.focusHandler),i.util.off(this.el,"blur",this.blurHandler),this.bound=!1}},s={priority:100,bind:function(){var u=this;this.bound=!0,t.nextTick(function(){u.bound===!0&&u.el.focus()})},unbind:function(){this.bound=!1}},c={directives:{focus:n,focusModel:o,focusAuto:s}};u.focus=n,u.focusModel=o,u.focusAuto=s,u.mixin=c}(this.VueFocus={},Vue);
+!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);

index.js

@@ -47,2 +47,8 @@ import Vue from 'vue';
   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;
@@ -101,2 +107,7 @@ this.bound = true;
   bind: function() {
+    util.warn(
+      this.name + ' is deprecated, ' +
+      'use v-focus="true" instead'
+    );
+
     var self = this;
@@ -103,0 +114,0 @@ this.bound = true;

package.json

 {
   "name": "vue-focus",
   "description": "A set of reusable focus directives for reusable Vue.js components",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "author": "Denis Karabaza <[e-mail]>",
@@ -6,0 +6,0 @@ "browserify": {

README.md

 # vue-focus
 
-> A set of reusable focus directives for reusable [Vue.js](https://github.com/vuejs/vue) components
+> A reusable focus directive for reusable [Vue.js](https://github.com/vuejs/vue) components
 
@@ -9,18 +9,14 @@ [![npm version](https://img.shields.io/npm/v/vue-focus.svg)](https://www.npmjs.com/package/vue-focus)
 
-It can be tricky to manage input focus in your components. You always have to fall back to accessing DOM elements and calling `.focus` or `.blur` on them.
+It can be tricky to manage input focus. You always have to fall back to accessing DOM elements and calling `.focus` or `.blur` on them.
 
-Well not anymore. `vue-focus` lets you manage input focus from the safety of your view model. It consists of three directives:
+Well not anymore. `vue-focus` lets you manage focus from the safety of your view model.
 
-- `v-focus-auto` auto focuses the element whenever it enters the DOM;
-- `v-focus-model="<expression>"` binds the focus to the expression in a two-way manner (model changes cause focus to adjust, and focus changes cause model to adjust);
-- `v-focus="<expression>"` binds the focus to the expression in a one-way manner (model changes cause focus to adjust).
+[Check out the examples](https://jsfiddle.net/simplesmiler/k5vxp69o/), [read the docs](#api) or [file an issue](https://github.com/simplesmiler/vue-focus/issues).
 
-Why the `v-focus` exists when there is `v-focus-model`, you might ask? Well, if you use a condition or a method to determine the focus, then you can not use a two-way bound directive, as it requires the expression to be settable.
-
-Now you are ready to [check out the examples](https://jsfiddle.net/simplesmiler/k5vxp69o/), [read the docs](#api) or [file an issue](https://github.com/simplesmiler/vue-focus/issues).
-
 ## Use cases
 
-- Focus a field when the modal appears
-- Show a hint for the focused field
+- Focus the field when the modal windows appears
+- Track the focus to show a hint for the focused field
+- Move between fields with cursor keys
+- Implement custom focus-related controls (e.g labels)
 
@@ -36,3 +32,3 @@ ## Requirements
 ``` sh
-$ npm install vue-focus --save
+$ npm install vue-focus@^1.0 --save
 ```
@@ -43,12 +39,7 @@
 ``` html
-<script src="https://cdn.rawgit.com/simplesmiler/vue-focus/0.1.2/dist/vue-focus.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-focus/1.0.0/vue-focus.js"></script>
 <!-- OR -->
-<script src="https://cdn.rawgit.com/simplesmiler/vue-focus/0.1.2/dist/vue-focus.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-focus/1.0.0/vue-focus.min.js"></script>
 ```
 
-## Usage
-
-1. Make directives available to your component (either by mixin or one by one)
-2. Use directives on the element
-
 ## API
@@ -58,6 +49,4 @@
 
-A directive that binds focus to the expression in a one-way manner, so that the element recieves focus when you set the bound value to be `truthy` and loses focus when you set the bound value to be `falsy`. It takes a single argument: an expression to be bound.
+A directive that binds focus to the expression in a one-way manner, so that the element recieves focus when the expression becomes `truthy` and loses focus when the expression becomes `falsy`.
 
-> NOTE: This is a one-way bound directive. If you need a two-way bound version, please refer to [focus-model](#focus-model).
-
 ``` js
@@ -68,10 +57,6 @@ import { focus } from 'vue-focus';
   directives: { focus: focus },
-  template: '<input type="text" v-for="item in items" v-model="item.value" v-focus="$index === focused">',
+  template: '<input type="text" v-focus="focused" @focus="focused = true" @blur="focused = false">',
   data: function() {
     return {
-      focused: 0,
-      items: [
-        { value: 'hello' },
-        { value: 'world' },
-      ],
+      focused: false,
     };
@@ -84,2 +69,4 @@ },
 
+> 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.
@@ -107,2 +94,4 @@
 
+> 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.
@@ -123,10 +112,10 @@
 
-A mixin that includes all the directives at once, and makes them available to the component under their default names.
+A mixin that makes the `v-focus` directive available to the component under the default name.
 
 ``` js
-import * as VueFocus from 'vue-focus';
+import { mixin as focusMixin }  from 'vue-focus';
 
 export default {
-  mixins: [ VueFocus.mixin ],
-  template: '<input type="text" v-focus-model="focused" v-focus-auto>',
+  mixins: [ focusMixin ],
+  template: '<input type="text" v-focus="focused" @focus="focused = true" @blur="focused = false">',
   data: function() {
@@ -133,0 +122,0 @@ return {

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17486

increased by4.03%

Lines of code

338

increased by8.68%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Number of lines in readme file

133

decreased by-7.64%

No dependency changes