diff --git a/example/app.css b/example/app.css
new file mode 100644
index 0000000..b86367f
--- /dev/null
+++ b/example/app.css
@@ -0,0 +1,69 @@
+*, *::before, *::after {
+ box-sizing: border-box;
+}
+
+body {
+background: #6441A5; /* fallback for old browsers */
+background: -webkit-linear-gradient(to left, #6441A5 , #2a0845); /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to left, #6441A5 , #2a0845); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+}
+
+.app {
+ background: rgba(255,255,255,0.02);
+ background-clip: padding-box;
+ border: 1px solid rgba(255,255,255,0.1);
+ border-radius: 6px;
+ color: #fff;
+ margin: 50px auto;
+ padding: 20px;
+ width: 800px;
+}
+
+h2 {
+ margin-top: 0;
+ text-shadow: 0 -1px 0 #1f0037;
+}
+
+.textbox {
+ transition: box-shadow 250ms ease;
+ border-radius: 3px;
+ border: 1px solid #2b094c;
+ box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
+ color: #666;
+ font-size: 18px;
+ height: 36px;
+ outline: none;
+ padding: 5px 10px;
+}
+.textbox:focus {
+ box-shadow: 0 0 16px 8px rgba(255,255,255,0.3);
+}
+
+.buttons {
+ margin-top: 20px;
+}
+
+.buttons button {
+ transition: all 250ms ease;
+ appearance: none;
+ background: #4f2593;
+ border: 1px solid #2b094c;
+ border-radius: 3px;
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.2);
+ color: #fff;
+ cursor: pointer;;
+ font-size: 12px;
+ font-weight: bold;
+ letter-spacing: 0.05em;
+ margin-right: 10px;
+ outline: none;
+ padding: 15px;
+ position: relative;
+ text-transform: uppercase;
+ text-shadow: 0 -1px 0 #1f0037;
+}
+.buttons button:hover {
+ background: #471f84;
+}
+.buttons button:active { top: 1px; }
diff --git a/example/index.js b/example/index.js
new file mode 100644
index 0000000..0cd49a2
--- /dev/null
+++ b/example/index.js
@@ -0,0 +1,34 @@
+import Vue from "vue"
+import VueInputAutosize from "../"
+
+Vue.use(VueInputAutosize, { maxWidth: 500, minWidth: 20, comfortZone: 0 });
+
+Vue.config.debug = true
+
+new Vue({
+ el: "body",
+ replace: false,
+ data(){
+ return {
+ msg: "Hello World!"
+ }
+ },
+ methods: {
+ setNewText(){
+ this.msg = "This is some new text for you!";
+ },
+ clearText(){
+ this.msg = "";
+ }
+ },
+ template: `
+
+
vue-input-autosize
+
+
+
+
+
+
+ `
+});
diff --git a/index.js b/index.js
index 2b5dfd4..bbacd34 100644
--- a/index.js
+++ b/index.js
@@ -19,27 +19,29 @@ exports.install = function (Vue, options) {
this.mirror = document.createElement("span");
this.mirror.classList.add("vue-input-autosize-mirror");
- document.body.appendChild(this.mirror);
this.el.addEventListener("input", this.check.bind(this, this.el), false);
setTimeout(function () {
var styles = window.getComputedStyle(_this.el, null);
Object.assign(_this.mirror.style, {
position: "absolute",
- top: "-9999px",
- left: "-9999px",
+ top: "0",
+ left: "0",
width: "auto",
whiteSpace: "nowrap",
+ border: styles.getPropertyValue("border"),
fontSize: styles.getPropertyValue("font-size"),
fontFamily: styles.getPropertyValue("font-family"),
fontWeight: styles.getPropertyValue("font-weight"),
letterSpacing: styles.getPropertyValue("letter-spacing"),
+ padding: styles.getPropertyValue("padding"),
textTransform: styles.getPropertyValue("text-transform"),
- ariaHidden: true
+ ariaHidden: true,
+ opacity: 0
});
+ document.body.appendChild(_this.mirror);
_this.check(_this.el);
}, 0);
- // this.vm.$watch()
},
update: function update(newVal, oldVal) {
this.check(this.el);
diff --git a/index.umd.js b/index.umd.js
index f1fd0e5..b31e733 100644
--- a/index.umd.js
+++ b/index.umd.js
@@ -23,7 +23,6 @@
this.mirror = document.createElement("span");
this.mirror.classList.add("vue-input-autosize-mirror");
- document.body.appendChild(this.mirror);
this.el.addEventListener("input", this.check.bind(this, this.el), false);
setTimeout(function () {
@@ -39,11 +38,12 @@
fontWeight: styles.getPropertyValue("font-weight"),
letterSpacing: styles.getPropertyValue("letter-spacing"),
textTransform: styles.getPropertyValue("text-transform"),
- ariaHidden: true
+ ariaHidden: true,
+ opacity: 0
});
+ document.body.appendChild(_this.mirror);
_this.check(_this.el);
}, 0);
- // this.vm.$watch()
},
update: function update(newVal, oldVal) {
this.check(this.el);
diff --git a/package.json b/package.json
index 90aef5b..810ea33 100644
--- a/package.json
+++ b/package.json
@@ -16,8 +16,8 @@
"build:all": "npm run build && npm run build:umd",
"build": "BUILD_ENV=cjs rollup -c",
"build:umd": "BUILD_ENV=umd rollup -c",
- "example": "vbuild --dev -e example",
- "example:build": "vbuild -e example -t VueInputAutosize",
+ "example": "vbuild --dev",
+ "example:build": "vbuild -t VueInputAutosize",
"test": "karma start karma.conf.js --single-run true --auto-watch false",
"watch-test": "karma start karma.conf.js --single-run false --auto-watch true"
},
diff --git a/src/index.js b/src/index.js
index 1aeedeb..7b1a77d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,27 +17,30 @@ exports.install = function(Vue, options){
this.mirror = document.createElement("span");
this.mirror.classList.add("vue-input-autosize-mirror");
- document.body.appendChild(this.mirror);
+
this.el.addEventListener("input", this.check.bind(this, this.el), false);
setTimeout(() => {
let styles = window.getComputedStyle(this.el, null);
Object.assign(this.mirror.style, {
position: "absolute",
- top: "-9999px",
- left: "-9999px",
+ top: "0",
+ left: "0",
width: "auto",
whiteSpace: "nowrap",
+ border: styles.getPropertyValue("border"),
fontSize: styles.getPropertyValue("font-size"),
fontFamily: styles.getPropertyValue("font-family"),
fontWeight: styles.getPropertyValue("font-weight"),
letterSpacing: styles.getPropertyValue("letter-spacing"),
+ padding: styles.getPropertyValue("padding"),
textTransform: styles.getPropertyValue("text-transform"),
- ariaHidden: true
+ ariaHidden: true,
+ opacity: 0
});
+ document.body.appendChild(this.mirror);
this.check(this.el);
}, 0);
- // this.vm.$watch()
},
update(newVal, oldVal){
this.check(this.el);
diff --git a/vbuild.js b/vbuild.js
new file mode 100644
index 0000000..ed789eb
--- /dev/null
+++ b/vbuild.js
@@ -0,0 +1,6 @@
+export default {
+ entry: {
+ js: './example',
+ css: './example/app.css'
+ }
+}