fix: only append onInput handler when modelValue or value are given

Author: Julian Kempff

example/index.html

@@ -160,15 +160,15 @@ <h1>Basic Example</h1>
           </wrapper>
           <w-2>
             <h-2 :animate="animated2"> {{text2}} </h-2>
-            <styled-input v-model:value="text2" />
+            <styled-input v-model="text2" />
             <super-btn visible @click="animated2 = !animated2"> An extension of Styled Button </super-btn>
           </w-2>
           <w-3
             bg="#c6f7e6"
           >
           <custom-title :visible="true">Change Rendered Elements with "as" prop.</custom-title>
             <h3>Enter any HTML element and see the element rendered by the styled component change 👇🏽</h3>
-            <styled-input @keydown.enter="updateElement" placeholder="Enter an HTML element! Like 'button' or 'section'" v-model:value="element" />
+            <styled-input @keydown.enter="updateElement" placeholder="Enter an HTML element! Like 'button' or 'section'" v-model="element" />
             <custom-btn
               visible
               :as="setElement"

src/models/StyledComponent.js

@@ -18,6 +18,7 @@ export default (ComponentStyle) => {
       props: {
         as: [String, Object],
         value: null,
+        modelValue: null,
 
         ...currentProps,
         ...prevProps
@@ -31,7 +32,7 @@ export default (ComponentStyle) => {
 
       data () {
         return {
-          localValue: this.value
+          localValue: this.modelValue || this.value
         }
       },
 
@@ -41,17 +42,35 @@ export default (ComponentStyle) => {
             if (propName === 'as' && isStringTarget) {
               return props
             }
-            if (this.$props[propName]) {
+            if (this.$props[propName] !== undefined) {
               props[propName] = this.$props[propName]
             }
             return props
           }, {})
+        },
+        valueProps () {
+          if (this.modelValue === undefined && this.value === undefined) {
+            return {}
+          }
+
+          return {
+            value: this.localValue,
+            onInput: event => {
+              if (event && event.target) {
+                this.localValue = event.target.value
+              }
+            }
+          }
         }
       },
 
       watch: {
         localValue (val) {
-          this.$emit('update:value', val)
+          if (this.modelValue !== undefined) {
+            this.$emit('update:modelValue', val)
+          } else {
+            this.$emit('update:value', val)
+          }
         }
       },
 
@@ -62,13 +81,9 @@ export default (ComponentStyle) => {
           isVueComponent(target) ? target : this.$props.as || target,
           {
             ...this.passProps,
-            class: [styleClass],
-            value: this.localValue,
-            onInput: event => {
-              if (event && event.target) {
-                this.localValue = event.target.value
-              }
-            }
+            ...this.valueProps,
+            ...this.$attrs,
+            class: [styleClass]
           },
           this.$slots
         )