Support nudge for color value input

ecomfe · Jan 22, 2019 · 1227e6b · 1227e6b
1 parent c7e3fb6
commit 1227e6b
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 9 deletions.
diff --git a/packages/veui/src/components/ColorPicker/_ColorValueAlpha.vue b/packages/veui/src/components/ColorPicker/_ColorValueAlpha.vue
@@ -6,6 +6,7 @@
       :readonly="readonly"
       :format="formatPercentage"
       :parse="parsePercentage"
+      nudge="percentage"
       @input="updateAlphaValue"
     />
   </div>

diff --git a/packages/veui/src/components/ColorPicker/_ColorValueHsl.vue b/packages/veui/src/components/ColorPicker/_ColorValueHsl.vue
@@ -6,6 +6,7 @@
       :readonly="readonly"
       :format="formatHue"
       :parse="parseHue"
+      nudge="hue"
       @input="handleHueValueInput"
     />
   </div>
@@ -15,6 +16,7 @@
       :readonly="readonly"
       :format="formatPercentage"
       :parse="parsePercentage"
+      nudge="percentage"
       @input="handleSaturationValueInput"
     />
   </div>
@@ -24,6 +26,7 @@
       :readonly="readonly"
       :format="formatPercentage"
       :parse="parsePercentage"
+      nudge="percentage"
       @input="handleLightnessValueInput"
     />
   </div>

diff --git a/packages/veui/src/components/ColorPicker/_ColorValueInput.vue b/packages/veui/src/components/ColorPicker/_ColorValueInput.vue
@@ -1,12 +1,3 @@
-<template>
-<veui-input
-  type="text"
-  :value="localValue"
-  :readonly="readonly"
-  @input="handleValueInput"
-  @blur="handleValueBlur"
-/>
-</template>
 
 <script>
 import Input from '../Input'
@@ -37,6 +28,9 @@ export default {
     parse: {
       type: Function,
       default: identity
+    },
+    nudge: {
+      type: String
     }
   },
   data () {
@@ -47,6 +41,20 @@ export default {
   computed: {
     formattedValue () {
       return this.format(this.value)
+    },
+    directives () {
+      if (!this.nudge) {
+        return []
+      }
+      return [
+        {
+          name: 'nudge',
+          value: {
+            update: this.hanleNudgeUpdate
+          },
+          modifiers: {}
+        }
+      ]
     }
   },
   watch: {
@@ -58,6 +66,27 @@ export default {
     }
   },
   methods: {
+    hanleNudgeUpdate (increase) {
+      if (Math.abs(increase) < 1) {
+        return
+      }
+
+      switch (this.nudge) {
+        case 'hue':
+        case 'ff':
+          break
+
+        case 'percentage':
+          increase /= 100
+          break
+
+        default:
+          return
+      }
+
+      this.handleValueInput(this.format(this.value + increase))
+    },
+
     handleValueInput (val) {
       this.localValue = val
       let realValue
@@ -73,6 +102,16 @@ export default {
         this.localValue = this.formattedValue
       }
     }
+  },
+  render () {
+    return (<veui-input
+      type="text"
+      value={this.localValue}
+      readonly={this.readonly}
+      onInput={this.handleValueInput}
+      onBlur={this.handleValueBlur}
+      {...{ directives: this.directives }}
+    />)
   }
 }
 </script>
diff --git a/packages/veui/src/components/ColorPicker/_ColorValueRgb.vue b/packages/veui/src/components/ColorPicker/_ColorValueRgb.vue
@@ -5,6 +5,7 @@
       :value="rgb.r"
       :readonly="readonly"
       :parse="parseFFValue"
+      nudge="ff"
       @input="handleRedValueInput"
     />
   </div>
@@ -14,6 +15,7 @@
       :value="rgb.g"
       :readonly="readonly"
       :parse="parseFFValue"
+      nudge="ff"
       @input="handleGreenValueInput"
     />
   </div>
@@ -23,6 +25,7 @@
       :value="rgb.b"
       :readonly="readonly"
       :parse="parseFFValue"
+      nudge="ff"
       @input="handleBlueValueInput"
     />
   </div>