update the master branch to the latest

src/components/color-picker/alpha.vue

@@ -0,0 +1,103 @@
+<template>
+    <div
+        :class="[prefixCls + '-alpha']"
+        tabindex="0"
+        @click="$el.focus()"
+        @keydown.esc="handleEscape"
+        @keydown.left="handleLeft"
+        @keydown.right="handleRight"
+        @keydown.up="handleUp"
+        @keydown.down="handleDown"
+    >
+        <div :class="[prefixCls + '-alpha-checkboard-wrap']">
+            <div :class="[prefixCls + '-alpha-checkerboard']"></div>
+        </div>
+        <div
+            :style="gradientStyle"
+            :class="[prefixCls + '-alpha-gradient']"></div>
+        <div
+            ref="container"
+            :class="[prefixCls + '-alpha-container']"
+            @mousedown="handleMouseDown"
+            @touchmove="handleChange"
+            @touchstart="handleChange">
+            <div
+                :style="{top: 0, left: `${value.a * 100}%`}"
+                :class="[prefixCls + '-alpha-pointer']">
+                <div :class="[prefixCls + '-alpha-picker']"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import HSAMixin from './hsaMixin';
+import Prefixes from './prefixMixin';
+import {clamp, toRGBAString} from './utils';
+
+export default {
+    name: 'Alpha',
+
+    mixins: [HSAMixin, Prefixes],
+
+    data() {
+        const normalStep = 1;
+        const jumpStep = 10;
+
+        return {
+            left: -normalStep,
+            right: normalStep,
+            up: jumpStep,
+            down: -jumpStep,
+            powerKey: 'shiftKey',
+        };
+    },
+
+    computed: {
+        gradientStyle() {
+            const {r, g, b} = this.value.rgba;
+            const start = toRGBAString({r, g, b, a: 0});
+            const finish = toRGBAString({r, g, b, a: 1});
+
+            return {background: `linear-gradient(to right, ${start} 0%, ${finish} 100%)`};
+        },
+    },
+
+    methods: {
+        change(newAlpha) {
+            const {h, s, l} = this.value.hsl;
+            const {a} = this.value;
+
+            if (a !== newAlpha) {
+                this.$emit('change', {h, s, l, a: newAlpha, source: 'rgba'});
+            }
+        },
+        handleSlide(e, direction) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            this.change(clamp(e[this.powerKey] ? direction : Math.round(this.value.hsl.a * 100 + direction) / 100, 0, 1));
+        },
+        handleChange(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const left = this.getLeft(e);
+
+            if (left < 0) {
+                this.change(0);
+                return;
+            }
+
+            const {clientWidth} = this.$refs.container;
+
+            if (left > clientWidth) {
+                this.change(1);
+                return;
+            }
+
+            this.change(Math.round(left * 100 / clientWidth) / 100);
+        },
+    },
+};
+</script>