doc(input-number)

demo/documentation/components/inputNumber/enUS/event.md

@@ -1,4 +1,5 @@
 # Event
+Blur & change events are exposed.
 ```html
 <n-input-number
   v-model="value"
@@ -14,10 +15,10 @@ export default {
     }
   },
   methods: {
-    handleChange (newValue) {
-      this.$NMessage.info(`value: ${newValue}`)
+    handleChange (v) {
+      this.$NMessage.info(`value: ${v}`)
     },
-    handleBlur (e, v) {
+    handleBlur (v) {
       this.$NMessage.info(`blur: ` + v)
     },
   }

demo/documentation/components/inputNumber/enUS/index.md

@@ -1,4 +1,6 @@
 # Input Number
+If you want just input number, use it.
+## Demos
 ```demo
 basic
 disabled
@@ -7,4 +9,26 @@ min-max
 size
 step
 validator
-```
+```
+## V-model
+|Prop|Event|
+|-|-|
+|value|change|
+
+## Props
+|Name|Type|Default|Description|
+|-|-|-|-|
+|value|`number`|`null`||
+|step|`number`|`1`||
+|min|`number`|`null`||
+|max|`number`|`null`||
+|size|`'small' \| 'medium' \| 'large'`|`medium`||
+|disabled|`boolean`|`false`||
+|validator|`(value) => boolean`|`null`||
+|placeholder|`string`|`null`||
+
+## Events
+|Name|Parameters|Description|
+|-|-|-|
+|change|`(value)`||
+|blur|`(value)`||

demo/documentation/components/inputNumber/enUS/minMax.md

@@ -1,12 +1,15 @@
 # Min and Max
+You can set min & max of it.
 ```html
 <n-input-number
   v-model="value"
+  placeholder="Min"
   :min="-3"
   :max="5"
 />
 <n-input-number
   v-model="value"
+  placeholder="Max"
   :min="-5"
   :max="3"
 />
@@ -19,4 +22,9 @@ export default {
     }
   }
 }
+```
+```css
+.n-input-number {
+  margin: 0 8px 12px 0
+}
 ```

demo/documentation/components/inputNumber/enUS/size.md

@@ -1,4 +1,5 @@
 # Size
+`small`, `medium`, `large`.
 ```html
 <n-input-number
   v-model="value"
@@ -22,3 +23,8 @@ export default {
   }
 }
 ```
+```css
+.n-input-number {
+  margin: 0 8px 12px 0
+}
+```

demo/documentation/components/inputNumber/enUS/validator.md

@@ -9,7 +9,7 @@
 export default {
   data () {
     return {
-      value: null,
+      value: 0,
       validator: x => x > 0
     }
   }

packages/common/InputNumber/src/main.vue

@@ -4,6 +4,7 @@
     :class="{
       [`n-input-number--${size}-size`]: true,
       'n-input-number--disabled': disabled,
+      'n-input-number--invalid': invalid,
       [`n-${synthesizedTheme}-theme`]: synthesizedTheme
     }"
   >
@@ -23,6 +24,7 @@
       ref="input"
       class="n-input-number__input"
       type="text"
+      :placeholder="placeholder"
       :value="value"
       :disabled="disabled ? 'disabled' : false"
       @focus="handleFocus"
@@ -78,12 +80,20 @@ export default {
     mdAdd
   },
   mixins: [withapp, themeable, asformitem()],
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
   inject: {
     NFormItem: {
       default: null
     }
   },
   props: {
+    placeholder: {
+      type: String,
+      default: null
+    },
     value: {
       type: Number,
       default: null
@@ -123,6 +133,13 @@ export default {
       if (parsedNumber !== null) return parsedNumber
       else return null
     },
+    invalid () {
+      if (this.value === null) return false
+      if (this.validator && !this.validator(this.value)) return true
+      if (this.safeMin !== null && this.value < this.safeMin) return true
+      if (this.safeMax !== null && this.value > this.safeMax) return true
+      return false
+    },
     minusable () {
       if (this.validator) {
         if (this.value !== null) return this.validator(this.value - this.step)
@@ -151,8 +168,10 @@ export default {
       const parsedNumber = parseNumber(this.max)
       if (parsedNumber !== null) return parsedNumber
       else return null
-    },
-    aValidValue () {
+    }
+  },
+  methods: {
+    createValidValue () {
       if (this.validator) return null
       if (this.safeMin !== null) {
         return Math.max(0, this.safeMin)
@@ -161,19 +180,7 @@ export default {
       } else {
         return 0
       }
-    }
-  },
-  watch: {
-    value (newValue, oldValue) {
-      const adjustedValue = this.adjustValue(newValue)
-      if (adjustedValue === newValue) {
-        this.$emit('change', newValue, oldValue)
-      } else {
-        this.$emit('input', adjustedValue)
-      }
-    }
-  },
-  methods: {
+    },
     handleMouseDown (e) {
       if (document.activeElement !== this.$refs.input) {
         this.$refs.input.focus()
@@ -186,26 +193,25 @@ export default {
     add () {
       if (!this.addable) return
       if (this.value === null) {
-        this.$emit('input', this.aValidValue)
+        this.$emit('change', this.createValidValue())
       } else {
         const valueAfterChange = this.adjustValue(this.value + this.safeStep)
-        this.$emit('input', valueAfterChange)
+        this.$emit('change', valueAfterChange)
       }
     },
     minus () {
-      console.log('minus', this.minusable)
       if (!this.minusable) return
       if (this.value === null) {
-        this.$emit('input', this.aValidValue)
+        this.$emit('change', this.createValidValue())
       } else {
         const valueAfterChange = this.adjustValue(this.value - this.safeStep)
-        this.$emit('input', valueAfterChange)
+        this.$emit('change', valueAfterChange)
       }
     },
     handleEnter (e) {
       const value = this.adjustValue(this.$refs.input.value)
       this.$refs.input.value = value
-      this.$emit('input', value)
+      this.$emit('change', value)
     },
     adjustValue (value) {
       value = String(value).trim() || ''
@@ -234,8 +240,8 @@ export default {
     handleBlur (e) {
       const value = this.adjustValue(e.target.value)
       e.target.value = value
-      this.$emit('input', value)
-      this.$emit('blur', e, value)
+      this.$emit('change', value)
+      this.$emit('blur', value)
     }
   }
 }

packages/common/Slider/src/main.vue

@@ -125,6 +125,10 @@ function handleSecondHandleMouseMove (e) {
 export default {
   name: 'NSlider',
   mixins: [withapp, themeable, hollowoutable, detachable, placeable, asformitem()],
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
   props: {
     marks: {
       type: Object,
@@ -490,20 +494,20 @@ export default {
           } else {
             value = [this.justifyValue(value[0]), this.justifyValue(value[1])]
           }
-          this.$emit('input', value)
+          this.$emit('change', value)
         }
       } else {
         if (value > this.max) {
           if (this.value !== this.max) {
-            this.$emit('input', this.max)
+            this.$emit('change', this.max)
           }
         } else if (value < this.min) {
           if (this.value !== this.min) {
-            this.$emit('input', this.min)
+            this.$emit('change', this.min)
           }
         } else {
           if (this.value !== value) {
-            this.$emit('input', this.justifyValue(value))
+            this.$emit('change', this.justifyValue(value))
           }
         }
       }

styles/InputNumber.scss

@@ -22,7 +22,6 @@
     display: inline-block;
     outline: none;
     @include m(disabled) {
-      // background: map-get($--input-number-background-color, 'disabled');
       @include e(minus-button, add-button) {
         background: map-get($--input-number-button-background-color, 'disabled');
         @include b(icon) {
@@ -31,12 +30,21 @@
         pointer-events: none;
       }
       @include e(input) {
+        &::placeholder {
+          color: map-get( $--input-placeholder-color, 'disabled');
+        }
         background: map-get($--input-number-background-color, 'disabled');
         color: map-get($--input-number-button-text-color, 'disabled');
         pointer-events: none;
       }
       cursor: not-allowed;
     }
+    @include m(invalid) {
+      @include e(input) {
+        text-decoration: line-through;
+        text-decoration-color: $--input-number-text-decoration-color;
+      }
+    }
     @include input-number-size-mixin('small');
     @include input-number-size-mixin('medium');
     @include input-number-size-mixin('large');
@@ -106,6 +114,10 @@
       border-radius: $--input-number-border-radius;
       background-color: map-get($--input-number-background-color, 'default');
       box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
+      &::placeholder {
+        color: map-get( $--input-placeholder-color, 'default');
+        transition: color .3s $--n-ease-in-out-cubic-bezier;
+      }
       &:hover ~ {
         @include e(border-layer) {
           box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'hover');
@@ -119,7 +131,7 @@
           }
         }
       }
-      transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier;
+      transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier, text-decoration-color .3s $--n-ease-in-out-cubic-bezier;
       border: none;
       color: map-get($--input-number-text-color, 'default');
       width: 100%;

styles/themes/dark/components/InputNumber.scss

@@ -5,6 +5,11 @@
     'focus': $--n-primary-color,
     'error': $--error-6
   )!global;
+  $--input-number-text-decoration-color: $--n-secondary-text-color !global;
+  $--input-number-placeholder-color: (
+    'default': rgba(255, 255, 255, .3),
+    'disabled': rgba(255, 255, 255, .2)
+  ) !global;
   $--input-number-background-color: (
     "default": rgba(255, 255, 255, .1),
     "disabled": rgba(255, 255, 255, .06),

styles/themes/light/components/InputNumber.scss

@@ -5,6 +5,11 @@
     'focus': $--n-primary-color,
     'error': $--error-6
   )!global;
+  $--input-number-placeholder-color: (
+    "default": $--n-disabled-text-color,
+    "disabled": $--n-disabled-text-color,
+  ) !global;
+  $--input-number-text-decoration-color: $--n-secondary-text-color !global;
   $--input-number-background-color: (
     'default': rgb(255, 255, 255),
     'disabled': $--neutral-8,