@dataloop-ai/components 0.13.0

package/src/components/DlColorPicker/DlAlpha.vue

@@ -0,0 +1,142 @@
+<template>
+    <div
+        class="color-alpha"
+        @mousedown.prevent.stop="selectAlpha"
+    >
+        <canvas ref="canvasAlpha" />
+        <div
+            :style="slideAlphaStyle"
+            class="slide"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { createAlphaSquare, createLinearGradient } from './utils'
+
+export default defineComponent({
+    name: 'DlAlpha',
+    props: {
+        color: {
+            type: String,
+            default: '#000000'
+        },
+        rgba: {
+            type: Object,
+            default: () => ({
+                r: 0,
+                g: 0,
+                b: 0,
+                a: 1
+            })
+        },
+        width: {
+            type: Number,
+            default: 14
+        },
+        height: {
+            type: Number,
+            default: 152
+        }
+    },
+    emits: ['selectAlpha', 'updateAlpha'],
+    data() {
+        return {
+            slideAlphaStyle: {},
+            alphaSize: 5
+        }
+    },
+    watch: {
+        color() {
+            this.renderColor()
+        },
+        'rgba.a'() {
+            this.renderSlide()
+        }
+    },
+    mounted() {
+        this.renderColor()
+        this.renderSlide()
+    },
+    methods: {
+        renderColor() {
+            const canvas = this.$refs.canvasAlpha as HTMLCanvasElement
+            const width = this.width
+            const height = this.height
+            const size = this.alphaSize
+            const canvasSquare = createAlphaSquare(size)
+
+            const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
+            canvas.width = width
+            canvas.height = height
+
+            ctx.fillStyle = ctx.createPattern(
+                canvasSquare,
+                'repeat'
+            ) as CanvasPattern
+            ctx.fillRect(0, 0, width, height)
+
+            createLinearGradient(
+                'p',
+                ctx,
+                width,
+                height,
+                'rgba(255,255,255,0)',
+                this.color
+            )
+        },
+        renderSlide() {
+            this.slideAlphaStyle = {
+                top: this.rgba.a * this.height - 2 + 'px'
+            }
+        },
+        selectAlpha(e: MouseEvent) {
+            const { top: hueTop } = this.$el.getBoundingClientRect()
+            let alpha: number = 0
+            const mousemove = (e: MouseEvent) => {
+                let y = e.clientY - hueTop
+
+                if (y < 0) {
+                    y = 0
+                }
+                if (y > this.height) {
+                    y = this.height
+                }
+
+                alpha = parseFloat((y / this.height).toFixed(2))
+                this.$emit('selectAlpha', alpha)
+            }
+
+            mousemove(e)
+
+            const mouseup = () => {
+                document.removeEventListener('mousemove', mousemove)
+                document.removeEventListener('mouseup', mouseup)
+                this.$emit('updateAlpha', alpha)
+            }
+
+            document.addEventListener('mousemove', mousemove)
+            document.addEventListener('mouseup', mouseup)
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.color-alpha {
+    position: relative;
+    margin-left: 10px;
+    cursor: pointer;
+    .slide {
+        position: absolute;
+        left: 0;
+        top: 100px;
+        width: 100%;
+        height: 4px;
+        background: #fff;
+        box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
+        pointer-events: none;
+    }
+}
+</style>

package/src/components/DlColorPicker/DlBox.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="color-type">
+        <span class="name">
+            {{ name }}
+        </span>
+        <input
+            v-model="modelColor"
+            class="value"
+        >
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlBox',
+    props: {
+        name: {
+            type: String,
+            default: ''
+        },
+        color: {
+            type: String,
+            default: ''
+        }
+    },
+    emits: ['inputColor'],
+    computed: {
+        modelColor: {
+            get(): string {
+                return this.color
+            },
+            set(val: string): void {
+                this.$emit('inputColor', val)
+            }
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.color-type {
+    display: flex;
+    margin-top: 10px;
+    font-size: var(--dl-font-size-small);
+    height: 28px;
+    .name {
+        width: 46px;
+        height: calc(100% - 2px);
+        float: left;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: var(--dl-color-medium);
+        border-radius: 2px 0px 0px 2px;
+        border: 1px solid var(--dl-color-separator);
+        border-right: none;
+        font-size: var(--dl-font-size-body);
+    }
+    .value {
+        font-size: var(--dl-font-size-body);
+        flex: 1;
+        height: 100%;
+        min-width: 100px;
+        padding: 0 10px;
+        border: 0;
+        color: var(--dl-color-darker);
+        background: none;
+        box-sizing: border-box;
+        border-radius: 0px 2px 2px 0px;
+        border: 1px solid var(--dl-color-separator);
+    }
+}
+</style>

package/src/components/DlColorPicker/DlColorPicker.vue

@@ -0,0 +1,306 @@
+<template>
+    <div
+        :id="uuid"
+        class="hu-color-picker"
+    >
+        <div class="color-set">
+            <Saturation
+                ref="saturation"
+                :color="rgbString"
+                :hsv="hsv"
+                :size="hueHeight"
+                @selectSaturation="selectSaturation"
+                @updateSaturation="updateSaturation"
+            />
+            <Hue
+                ref="hue"
+                :hsv="hsv"
+                :width="hueWidth"
+                :height="hueHeight"
+                @selectHue="selectHue"
+                @updateHue="updateHue"
+            />
+            <Alpha
+                ref="alpha"
+                :color="rgbString"
+                :rgba="rgba"
+                :width="hueWidth"
+                :height="hueHeight"
+                @selectAlpha="selectAlpha"
+                @updateAlpha="updateAlpha"
+            />
+        </div>
+        <div
+            :style="{ height: previewHeight + 'px' }"
+            class="color-show"
+        >
+            <Preview
+                :color="rgbaString"
+                :width="180"
+                :height="previewHeight"
+            />
+        </div>
+        <Box
+            name="HEX"
+            :color="modelHex"
+            @inputColor="inputHex"
+        />
+        <Box
+            name="RGBA"
+            :color="modelRgba"
+            @inputColor="inputRgba"
+        />
+        <Colors
+            :color="rgbaString"
+            :default-colors="defaultColors"
+            :colors-history="colorsHistory"
+            @selectColor="selectColor"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import Saturation from './DlSaturation.vue'
+import Hue from './DlHue.vue'
+import Alpha from './DlAlpha.vue'
+import Preview from './DlPreview.vue'
+import Box from './DlBox.vue'
+import Colors from './DlColors.vue'
+import { defineComponent, PropType } from 'vue-demi'
+import { rgb2hex, setColorValue } from './utils'
+import { NewColor } from './types'
+import { defaultColors } from './constants'
+import { debounce, isEqual } from 'lodash'
+import { v4 } from 'uuid'
+
+export default defineComponent({
+    name: 'DlColorPicker',
+    components: {
+        Saturation,
+        Hue,
+        Alpha,
+        Preview,
+        Box,
+        Colors
+    },
+    props: {
+        color: {
+            type: String,
+            default: '#000000'
+        },
+        defaultColors: {
+            type: Array as PropType<string[]>,
+            default: () => defaultColors
+        },
+        colorsHistory: {
+            type: Array as PropType<string[]>,
+            //@ts-ignore
+            default: () => []
+        }
+    },
+    emits: ['changeColor', 'updateColor'],
+    data() {
+        const initialColor = {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 1,
+            h: 0,
+            s: 0,
+            v: 0
+        }
+        return {
+            uuid: `dl-color-picker-${v4()}`,
+            hueWidth: 14,
+            hueHeight: 132,
+            previewHeight: 28,
+            modelRgba: '',
+            modelHex: '',
+            ...initialColor,
+            prevUpdatedColor: {
+                ...initialColor
+            }
+        }
+    },
+    computed: {
+        rgba(): { r: number; g: number; b: number; a: number } {
+            return {
+                r: this.r,
+                g: this.g,
+                b: this.b,
+                a: this.a
+            }
+        },
+        hsv(): { h: number; s: number; v: number } {
+            return {
+                h: this.h,
+                s: this.s,
+                v: this.v
+            }
+        },
+        rgbString(): string {
+            return `rgb(${this.r}, ${this.g}, ${this.b})`
+        },
+        rgbaStringShort(): string {
+            return `${this.r}, ${this.g}, ${this.b}, ${this.a}`
+        },
+        rgbaString(): string {
+            return `rgba(${this.rgbaStringShort})`
+        },
+        hexString(): string {
+            return rgb2hex(this.rgba, true)
+        }
+    },
+    created() {
+        Object.assign(this, setColorValue(this.color))
+        this.setText()
+
+        this.$watch('rgba', () => {
+            const changeColorPayload: NewColor = {
+                rgba: this.rgba,
+                hsv: this.hsv,
+                hex: this.modelHex
+            }
+
+            this.$emit('changeColor', changeColorPayload)
+        })
+    },
+    methods: {
+        selectSaturation(color: string) {
+            const { r, g, b, h, s, v } = setColorValue(color)
+            Object.assign(this, { r, g, b, h, s, v })
+            this.setText()
+        },
+        selectHue(color: string) {
+            const { r, g, b, h, s, v } = setColorValue(color)
+            Object.assign(this, { r, g, b, h, s, v })
+            this.setText()
+            this.$nextTick(() => {
+                (
+                    this.$refs.saturation as InstanceType<typeof Saturation>
+                ).renderColor()
+                ;(
+                    this.$refs.saturation as InstanceType<typeof Saturation>
+                ).renderSlide()
+            })
+        },
+        selectAlpha(a: number) {
+            this.a = a
+            this.setText()
+        },
+        inputHex(color: string) {
+            const { r, g, b, a, h, s, v } = setColorValue(color)
+            Object.assign(this, { r, g, b, a, h, s, v })
+            this.modelHex = color
+            this.modelRgba = this.rgbaStringShort
+            this.$nextTick(() => {
+                (
+                    this.$refs.saturation as InstanceType<typeof Saturation>
+                ).renderColor()
+                ;(
+                    this.$refs.saturation as InstanceType<typeof Saturation>
+                ).renderSlide()
+                ;(this.$refs.hue as InstanceType<typeof Hue>).renderSlide()
+            })
+        },
+        inputRgba(color: string) {
+            const { r, g, b, a, h, s, v } = setColorValue(color)
+            Object.assign(this, { r, g, b, a, h, s, v })
+            this.modelHex = this.hexString
+            this.modelRgba = color
+            this.$nextTick(() => {
+                (
+                    this.$refs.saturation as InstanceType<typeof Saturation>
+                ).renderColor()
+                ;(
+                    this.$refs.saturation as InstanceType<typeof Saturation>
+                ).renderSlide()
+                ;(this.$refs.hue as InstanceType<typeof Hue>).renderSlide()
+            })
+        },
+        setText() {
+            this.modelHex = this.hexString
+            this.modelRgba = this.rgbaStringShort
+        },
+        selectColor(color: string) {
+            const { r, g, b, a, h, s, v } = setColorValue(color)
+            this.updateColor({ r, g, b, a, h, s, v })
+            Object.assign(this, { r, g, b, a, h, s, v })
+            this.setText()
+            this.$nextTick(() => {
+                (
+                    this.$refs.saturation as InstanceType<typeof Saturation>
+                ).renderColor()
+                ;(
+                    this.$refs.saturation as InstanceType<typeof Saturation>
+                ).renderSlide()
+                ;(this.$refs.hue as InstanceType<typeof Hue>).renderSlide()
+            })
+        },
+        updateColor: debounce(function (
+            color: ReturnType<typeof setColorValue>
+        ) {
+            // @ts-ignore
+            if (isEqual(color, this.prevUpdatedColor)) {
+                return
+            }
+
+            const { r, g, b, a, h, s, v } = color
+            // @ts-ignore
+            this.$emit('updateColor', {
+                rgba: {
+                    r,
+                    g,
+                    b,
+                    a
+                },
+                hsv: { h, s, v },
+                hex: rgb2hex({ r, g, b }, true)
+            })
+
+            // @ts-ignore
+            this.prevUpdatedColor = color
+        },
+        300),
+        updateSaturation(color: string) {
+            this.updateColor(setColorValue(color))
+        },
+        updateHue(color: string) {
+            this.updateColor(setColorValue(color))
+        },
+        updateAlpha(value: number) {
+            this.updateColor({
+                r: this.r,
+                g: this.g,
+                b: this.b,
+                a: value,
+                h: this.h,
+                s: this.s,
+                v: this.v
+            })
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.hu-color-picker {
+    width: 180px;
+    padding: 10px;
+    background: var(--dl-color-shadow);
+    border-radius: 2px;
+    box-shadow: 0px 3px 6px 0px rgba(16, 30, 115, 0.15);
+    z-index: 1;
+    text-align: left;
+    canvas {
+        vertical-align: top;
+    }
+    .color-set {
+        display: flex;
+    }
+    .color-show {
+        margin-top: 11px;
+        display: flex;
+    }
+}
+</style>

package/src/components/DlColorPicker/DlColors.vue

@@ -0,0 +1,139 @@
+<template>
+    <div>
+        <ul class="colors">
+            <li
+                v-for="item in defaultColors"
+                :key="`${item}`"
+                class="item"
+                @click="selectColor(`${item}`)"
+            >
+                <div
+                    :style="{ background: `url(${imgAlphaBase64})` }"
+                    class="alpha"
+                />
+                <div
+                    :style="{ background: `${item}` }"
+                    :class="getColorClasses(`${item}`)"
+                />
+            </li>
+        </ul>
+        <ul
+            v-if="colorsHistory.length"
+            class="colors history"
+        >
+            <li
+                v-for="(item, i) in colorsHistory"
+                :key="`${item}_${i}`"
+                class="item"
+                @click="selectColor(`${item}`)"
+            >
+                <div
+                    :style="{ background: `url(${imgAlphaBase64})` }"
+                    class="alpha"
+                />
+                <div
+                    :style="{ background: `${item}` }"
+                    :class="getColorClasses(`${item}`)"
+                />
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { createAlphaSquare } from './utils'
+
+export default defineComponent({
+    name: 'DlColors',
+    props: {
+        color: {
+            type: String,
+            default: '#000000'
+        },
+        defaultColors: {
+            type: Array,
+
+            //@ts-ignore
+            default: () => []
+        },
+        colorsHistoryKey: {
+            type: String,
+            default: ''
+        },
+        colorsHistory: {
+            type: Array,
+            //@ts-ignore
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            imgAlphaBase64: ''
+        }
+    },
+    created() {
+        this.imgAlphaBase64 = createAlphaSquare(4).toDataURL()
+    },
+    methods: {
+        selectColor(color: string) {
+            this.$emit('selectColor', color)
+        },
+        getColorClasses(color: string) {
+            const classes = ['color']
+            if (color.includes('#F') || color.includes('#f')) {
+                classes.push('color-white')
+            }
+            return classes
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.colors {
+    padding: 0;
+    margin: 5px 0px 0px 0px;
+    &.history {
+        margin-top: 15px;
+        padding-top: 5px;
+        margin-bottom: 5px;
+        border-top: 1px solid var(--dl-color-separator);
+    }
+    .item {
+        position: relative;
+        width: 16px;
+        height: 16px;
+        margin: 10px 0 0 11px;
+        border-radius: 3px;
+        box-sizing: border-box;
+        vertical-align: top;
+        display: inline-block;
+        transition: all 0.1s;
+        cursor: pointer;
+        &:nth-child(7n + 1) {
+            margin-left: 0;
+        }
+        &:hover {
+            transform: scale(1.2);
+        }
+        .alpha {
+            height: 100%;
+            border-radius: 4px;
+        }
+        .color {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: 3px;
+        }
+        .color-white {
+            border: 1px solid var(--dl-color-separator);
+            width: calc(100% - 2px);
+            height: calc(100% - 2px);
+        }
+    }
+}
+</style>