Adds support for text inputs that do not use v-model

Author: syropian

.github/workflows/tests.yml

@@ -0,0 +1,24 @@
+name: Tests
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x]
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm install and test
+        run: |
+          npm install
+          npm test
+        env:
+          CI: true

.travis.yml

@@ -1,4 +1,4 @@
-# vue-input-autowidth [![Build Status](https://travis-ci.org/syropian/vue-input-autowidth.svg?branch=master)](https://travis-ci.org/syropian/vue-input-autowidth)
+# vue-input-autowidth [![Actions Status](https://github.com/syropian/vue-input-autowidth/workflows/Tests/badge.svg)](https://github.com/syropian/vue-input-autowidth/actions)
 
 > A Vue.js directive for adjusting a text input's width to fit its content.
 
@@ -39,18 +39,21 @@ Vue.use(VueInputAutowidth)
 ### Options
 
 #### maxWidth
+
 Type: `String`
 Default: `'none'`
 
 The maximum width the input field will grow to.
 
 #### minWidth
+
 Type: `String`
 Default: `'none'`
 
 The minimum width the input field will shrink to.
 
 #### comfortZone
+
 Type: `Number`
 Default: `0`
 

README.md

@@ -1,7 +1,7 @@
-import { shallowMount } from "@vue/test-utils"
-import VueInputAutowidth from "../src"
+import { shallowMount } from "@vue/test-utils";
+import VueInputAutowidth from "../src";
 
-describe("VueTribute", () => {
+describe("vue-input-autowidth", () => {
   it("mounts", () => {
     const TextInput = {
       template: `<input type="text" v-model="text" v-autowidth="{maxWidth: '960px', minWidth: '20px', comfortZone: 0}" />`,
@@ -11,11 +11,11 @@ describe("VueTribute", () => {
       data() {
         return {
           text: "Hello World"
-        }
+        };
       }
-    }
-    const wrapper = shallowMount(TextInput)
+    };
+    const wrapper = shallowMount(TextInput);
 
-    expect(wrapper.find('input[type=text]').element.value).toBe("Hello World")
-  })
-})
+    expect(wrapper.find("input[type=text]").element.value).toBe("Hello World");
+  });
+});

__tests__/VueInputAutowidth.test.js

@@ -15,12 +15,21 @@
       <pre v-highlightjs><code class="shell">$ yarn add vue-input-autowidth</code></pre>
       <p>or</p>
       <pre v-highlightjs><code class="shell">$ npm install --save vue-input-autowidth</code></pre>
-      <p>or grab it from Unpkg: <a href="https://unpkg.com/vue-input-autowidth">https://unpkg.com/vue-input-autowidth</a></p>
-      <br>
+      <p>
+        or grab it from Unpkg:
+        <a href="https://unpkg.com/vue-input-autowidth">https://unpkg.com/vue-input-autowidth</a>
+      </p>
+      <br />
       <h2>Options</h2>
-      <p><strong>maxWidth | String:</strong> Sets the maximum width the input element will stretch to.</p>
-      <p><strong>minWidth | String:</strong> Sets the minimum width the input element will shrink to.</p>
-      <p><strong>comfortZone | Number:</strong> Additional space in pixels to add to the far side of the input's content.</p>
+      <p>
+        <strong>maxWidth | String:</strong> Sets the maximum width the input element will stretch to.
+      </p>
+      <p>
+        <strong>minWidth | String:</strong> Sets the minimum width the input element will shrink to.
+      </p>
+      <p>
+        <strong>comfortZone | Number:</strong> Additional space in pixels to add to the far side of the input's content.
+      </p>
     </div>
   </div>
 </template>

example/App.vue

@@ -1,20 +1,22 @@
-import "es6-object-assign/auto"
-import checkWidth from "./check-width"
+import "es6-object-assign/auto";
+import checkWidth from "./check-width";
 
 export default {
   bind: function(el) {
     if (el.tagName.toLocaleUpperCase() !== "INPUT") {
-      throw new Error("v-input-autowidth can only be used on input elements.")
+      throw new Error("v-input-autowidth can only be used on input elements.");
     }
     el.dataset.uuid = Math.random()
       .toString(36)
-      .slice(-5)
-    el.style.boxSizing = "content-box"
+      .slice(-5);
+    el.style.boxSizing = "content-box";
   },
-  inserted: function(el, binding) {
-    const styles = window.getComputedStyle(el)
-
-    el.mirror = document.createElement("span")
+  inserted: function(el, binding, vnode) {
+    const hasVModel = vnode.data.directives.some(
+      directive => directive.name === "model"
+    );
+    const styles = window.getComputedStyle(el);
+    el.mirror = document.createElement("div");
 
     Object.assign(el.mirror.style, {
       position: "absolute",
@@ -30,19 +32,24 @@ export default {
       fontStyle: styles.fontStyle,
       letterSpacing: styles.letterSpacing,
       textTransform: styles.textTransform
-    })
+    });
+
+    el.mirror.classList.add(`vue-input-autowidth-mirror-${el.dataset.uuid}`);
+    el.mirror.setAttribute("aria-hidden", "true");
 
-    el.mirror.classList.add(`vue-input-autowidth-mirror-${el.dataset.uuid}`)
-    el.mirror.setAttribute("aria-hidden", "true")
+    document.body.appendChild(el.mirror);
 
-    document.body.appendChild(el.mirror)
+    checkWidth(el, binding);
 
-    checkWidth(el, binding)
+    if (!hasVModel) {
+      el.addEventListener("input", checkWidth.bind(null, el, binding));
+    }
   },
   componentUpdated: function(el, binding) {
-    checkWidth(el, binding)
+    checkWidth(el, binding);
   },
   unbind: function(el) {
-    document.body.removeChild(el.mirror)
+    document.body.removeChild(el.mirror);
+    el.removeEventListener("input", checkWidth.bind(null, el, binding));
   }
-}
+};