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' + } +}