mirrors/vue-tribute
2
0
Fork 0
mirror of https://github.com/tenrok/vue-tribute.git synced 2026-06-22 14:30:34 +03:00
Code Activity

Update lib to work with dynamic value prop. Update spec and readme to accomodate for changes

Browse Source
This commit is contained in:
syropian
2016-07-24 20:32:06 -04:00
parent ecd28ee1fd
commit d37b456ae8
7 changed files with 50 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -19,7 +19,7 @@ Vue.use(VueInputAutosize, { maxWidth: 500, minWidth: 20, comfortZone: 0 });
...and inside your template:
`<input type='text' v-model='msg' v-input-autosize />`
`<input type='text' :value='msg' v-input-autosize />`
## License
example/app.vue
-21
View File
@@ -1,21 +0,0 @@
<template>
<input type="text" v-input-autosize v-model="foo" placeholder="A placeholder" />
</template>
<script>
import Vue from "vue";
import VueInputAutosize from "../";
Vue.use(VueInputAutosize);
export default {
name: "app",
ready(){
console.log("Ready!")
},
data(){
return {
foo: "Hello"
}
}
}
</script>
example/index.js
-6
View File
@@ -1,6 +0,0 @@
import Vue from "vue";
import app from "./app";
new Vue({
el: "body",
components: { app }
})
index.js
+8 -1
View File
@@ -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) {
index.umd.js
+8 -1
View File
@@ -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) {
src/index.js
+9 -2
View File
@@ -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){
test/VueInputAutosize.spec.js
+24 -19
View File
@@ -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: "<input type='text' v-model='msg' v-el:test v-input-autosize style='font-size:12px;' />",
template: "<input type='text' :value='msg' v-el:test v-input-autosize style='width:200px;' />",
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: "<input type='text' placeholder='Hello' v-el:test v-input-autosize style='font-size:12px;' />",
template: "<input type='text' placeholder='Hello' v-el:test v-input-autosize style='width:200px;' />",
})
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: "<input type='text' v-model='msg' v-el:test v-input-autosize style='font-size:12px;' />",
template: "<input type='text' :value='msg' v-el:test v-input-autosize />",
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: "<input type='text' v-model='msg' v-el:test v-input-autosize style='font-size:12px;' />",
template: "<input type='text' :value='msg' v-el:test v-input-autosize />",
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: "<input type='text' v-model='msg' v-el:test v-input-autosize style='font-size:12px;' />",
template: "<input type='text' :value='msg' v-el:test v-input-autosize />",
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: "<input type='text' v-model='msg' v-el:test v-input-autosize style='font-size:12px;' />",
template: "<input type='text' :value='msg' v-el:test v-input-autosize />",
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);
});