feat(core): Add v-model to component to support color config

radial-color-picker · Apr 1, 2018 · 831e110 · 831e110
1 parent df69663
commit 831e110
Showing 1 changed file with 21 additions and 7 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -29,11 +29,14 @@
     export default {
         name: 'vue-radial-color-picker',
         props: {
+            value: {
+                default: () => ({ hue: 0, saturation: 100, luminosity: 50, alpha: 1 }),
+            },
             scrollSensitivity: {
-                default: 2
+                default: 2,
             },
             mouseScroll: {
-                default: false
+                default: false,
             },
         },
         data() {
@@ -44,9 +47,22 @@
                 isRippleAnimating: false,
                 isDragging: false,
                 isDisabled: false,
-                color: `hsla(0, 100%, 50%, 1)`
             }
         },
+        computed: {
+            color() {
+                const { hue, saturation, luminosity, alpha } = this.value;
+
+                return `hsla(${hue}, ${saturation}%, ${luminosity}%, ${alpha})`;
+            }
+        },
+        watch: {
+            'value.hue': function(newAngle, oldAngle) {
+                if (newAngle != oldAngle) {
+                    rotator.angle = newAngle;
+                }
+            },
+        },
         mounted() {
             if (this.mouseScroll) {
                 this.$refs.rotator.addEventListener('wheel', this.onScroll);
@@ -56,7 +72,7 @@
 
             rotator = new Rotator(this.$refs.rotator, {
                 inertia: 0.7,
-                angle: 0,
+                angle: this.value.hue,
                 onRotate: this.updateColor,
                 onDragStart: this.enableDragging,
                 onDragStop: this.disableDragging,
@@ -104,9 +120,7 @@
                 rotator.angle += (this.scrollSensitivity) * multiplier;
             },
             updateColor(hue) {
-                let color = `hsla(${hue}, 100%, 50%, 1)`;
-
-                this.color = color;
+                this.$emit('input', Object.assign({}, this.value, { hue }));
             },
             enableDragging() {
                 this.isDragging = true;