diff --git a/README.md b/README.md
index f235dc5..5dedb08 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ Vue.use(VueInputAutosize, { maxWidth: 500, minWidth: 20, comfortZone: 0 });
...and inside your template:
-``
+``
## License
diff --git a/example/app.vue b/example/app.vue
deleted file mode 100644
index fcf15cf..0000000
--- a/example/app.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
diff --git a/example/index.js b/example/index.js
deleted file mode 100644
index c9402dc..0000000
--- a/example/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Vue from "vue";
-import app from "./app";
-new Vue({
- el: "body",
- components: { app }
-})
diff --git a/index.js b/index.js
index 343496f..2b5dfd4 100644
--- a/index.js
+++ b/index.js
@@ -2,9 +2,15 @@
exports.install = function (Vue, options) {
Vue.directive("input-autosize", {
+ params: ["value"],
mirror: null,
val: " ",
options: {},
+ paramWatchers: {
+ value: function value(val, oldVal) {
+ Vue.nextTick(this.check.bind(this, this.el));
+ }
+ },
bind: function bind() {
var _this = this;
@@ -33,8 +39,9 @@ exports.install = function (Vue, options) {
});
_this.check(_this.el);
}, 0);
+ // this.vm.$watch()
},
- update: function update() {
+ update: function update(newVal, oldVal) {
this.check(this.el);
},
check: function check(el) {
diff --git a/index.umd.js b/index.umd.js
index 54e8ab4..f1fd0e5 100644
--- a/index.umd.js
+++ b/index.umd.js
@@ -6,9 +6,15 @@
exports.install = function (Vue, options) {
Vue.directive("input-autosize", {
+ params: ["value"],
mirror: null,
val: " ",
options: {},
+ paramWatchers: {
+ value: function value(val, oldVal) {
+ Vue.nextTick(this.check.bind(this, this.el));
+ }
+ },
bind: function bind() {
var _this = this;
@@ -37,8 +43,9 @@
});
_this.check(_this.el);
}, 0);
+ // this.vm.$watch()
},
- update: function update() {
+ update: function update(newVal, oldVal) {
this.check(this.el);
},
check: function check(el) {
diff --git a/src/index.js b/src/index.js
index 8e8616a..1aeedeb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,9 +2,15 @@
exports.install = function(Vue, options){
Vue.directive("input-autosize", {
+ params: ["value"],
mirror: null,
val: " ",
options: {},
+ paramWatchers: {
+ value(val, oldVal){
+ Vue.nextTick(this.check.bind(this, this.el));
+ }
+ },
bind(){
const defaults = { maxWidth: 500, minWidth: 20, comfortZone: 0 };
this.options = Object.assign(defaults, options || {});
@@ -30,9 +36,10 @@ exports.install = function(Vue, options){
ariaHidden: true
});
this.check(this.el);
- }, 0)
+ }, 0);
+ // this.vm.$watch()
},
- update(){
+ update(newVal, oldVal){
this.check(this.el);
},
check(el){
diff --git a/test/VueInputAutosize.spec.js b/test/VueInputAutosize.spec.js
index 461e98f..6c1fd67 100644
--- a/test/VueInputAutosize.spec.js
+++ b/test/VueInputAutosize.spec.js
@@ -4,7 +4,6 @@ import VueInputAutosize from "../src";
Vue.use(VueInputAutosize);
describe("vue-input-autosize", () => {
-
it("has an install method for Vue.use()", () => {
expect(typeof VueInputAutosize.install).toEqual("function");
});
@@ -19,7 +18,7 @@ describe("vue-input-autosize", () => {
const vm = new Vue({
el: document.body,
replace: false,
- template: "",
+ template: "",
data(){
return {
msg: "Hello"
@@ -27,7 +26,7 @@ describe("vue-input-autosize", () => {
}
})
setTimeout(function(){
- expect( Math.round(parseInt(vm.$els.test.style.width, 10)) ).toEqual(26);
+ expect( parseInt(vm.$els.test.style.width, 10) ).toBeLessThan(200);
done();
}, 0);
});
@@ -35,10 +34,10 @@ describe("vue-input-autosize", () => {
const vm = new Vue({
el: document.body,
replace: false,
- template: "",
+ template: "",
})
setTimeout(() => {
- expect( Math.round(parseInt(vm.$els.test.style.width, 10)) ).toEqual(26);
+ expect( parseInt(vm.$els.test.style.width, 10) ).toBeLessThan(200);
done();
}, 0)
});
@@ -46,41 +45,47 @@ describe("vue-input-autosize", () => {
const vm = new Vue({
el: document.body,
replace: false,
- template: "",
+ template: "",
data(){
return {
msg: "Hello"
}
}
})
- vm.msg = "Hello World";
setTimeout(() => {
- expect( Math.round(parseInt(vm.$els.test.style.width, 10)) ).toBeGreaterThan(26);
- done();
+ const currentWidth = parseInt(vm.$els.test.style.width, 10);
+ vm.$set("msg", "Hello World");
+ setTimeout(() => {
+ expect( parseInt(vm.$els.test.style.width, 10) ).toBeGreaterThan(currentWidth);
+ done();
+ }, 0);
}, 0);
});
it("decreases the width of the input when text is removed", (done) => {
const vm = new Vue({
el: document.body,
replace: false,
- template: "",
+ template: "",
data(){
return {
- msg: "Hello"
+ msg: "Hello World!"
}
}
- });
- vm.msg = "Hey!";
+ })
setTimeout(() => {
- expect( Math.round(parseInt(vm.$els.test.style.width, 10)) ).toBeLessThan(26);
- done();
+ const currentWidth = parseInt(vm.$els.test.style.width, 10);
+ vm.$set("msg", "Hello");
+ setTimeout(() => {
+ expect( parseInt(vm.$els.test.style.width, 10) ).toBeLessThan(currentWidth);
+ done();
+ }, 0);
}, 0);
});
it("clamps the input's width to the max width option", (done) => {
const vm = new Vue({
el: document.body,
replace: false,
- template: "",
+ template: "",
data(){
return {
msg: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
@@ -88,7 +93,7 @@ describe("vue-input-autosize", () => {
}
});
setTimeout(() => {
- expect( Math.round(parseInt(vm.$els.test.style.width, 10)) ).toEqual(500);
+ expect( parseInt(vm.$els.test.style.width, 10) ).toEqual(500);
done();
}, 0);
});
@@ -96,7 +101,7 @@ describe("vue-input-autosize", () => {
const vm = new Vue({
el: document.body,
replace: false,
- template: "",
+ template: "",
data(){
return {
msg: "Hi"
@@ -104,7 +109,7 @@ describe("vue-input-autosize", () => {
}
});
setTimeout(() => {
- expect( Math.round(parseInt(vm.$els.test.style.width, 10)) ).toEqual(20);
+ expect( parseInt(vm.$els.test.style.width, 10) ).toEqual(20);
done();
}, 0);
});