From d37b456ae82857ad3597712ab464fad8e3157072 Mon Sep 17 00:00:00 2001 From: syropian Date: Sun, 24 Jul 2016 20:32:06 -0400 Subject: [PATCH] Update lib to work with dynamic value prop. Update spec and readme to accomodate for changes --- README.md | 2 +- example/app.vue | 21 ----------------- example/index.js | 6 ----- index.js | 9 +++++++- index.umd.js | 9 +++++++- src/index.js | 11 +++++++-- test/VueInputAutosize.spec.js | 43 +++++++++++++++++++---------------- 7 files changed, 50 insertions(+), 51 deletions(-) delete mode 100644 example/app.vue delete mode 100644 example/index.js 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); });