Added disabled prop to render a disabled input rather than a span (#77)

* Added `disabled` prop to render a disabled input rather than a span

* Use double quotes not single

Co-authored-by: Kevin Ongko <[email protected]>

Author: pareeohnos

src/vue-numeric.vue

@@ -3,6 +3,7 @@
     v-if="!readOnly"
     ref="numeric"
     :placeholder="placeholder"
+    :disabled="disabled"
     v-model="amount"
     type="tel"
     @blur="onBlurHandler"
@@ -154,6 +155,12 @@ export default {
       required: false
     },
 
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+
     /**
      * Position of currency symbol
      * Symbol position props accept either 'suffix' or 'prefix' (default).
@@ -162,7 +169,7 @@ export default {
       type: String,
       default: 'prefix',
       required: false
-    }
+    },
   },
 
   data: () => ({

test/specs/vue-numeric.spec.js

@@ -109,6 +109,28 @@ describe('vue-numeric.vue', () => {
     })
   })
 
+  it('is is not disabled when disabled mode is disabled', done => {
+    const propsData = { value: 3000, disabled: true }
+    const wrapper = mount(VueNumeric, { propsData })
+
+    wrapper.setProps({ disabled: false })
+    wrapper.instance().$nextTick(() => {
+      expect(wrapper.instance().$el.hasAttribute('disabled')).to.equal(false)
+      done()
+    })
+  })
+
+  it('is disabled in disabled mode', done => {
+    const propsData = { value: 3000, disabled: false }
+    const wrapper = mount(VueNumeric, { propsData })
+
+    wrapper.setProps({ disabled: true })
+    wrapper.instance().$nextTick(() => {
+      expect(wrapper.instance().$el.hasAttribute('disabled')).to.equal(true)
+      done()
+    })
+  });
+
   it('cannot exceed max props', () => {
     const component = Vue.extend({
       data: () => ({ total: 150 }),