@dataloop-ai/components 0.13.0

package/src/components/DlColorPicker/DlHue.vue

@@ -0,0 +1,135 @@
+<template>
+    <div
+        class="hue"
+        @mousedown.prevent.stop="selectHue"
+    >
+        <canvas ref="canvasHue" />
+        <div
+            :style="slideHueStyle"
+            class="slide"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlHue',
+    props: {
+        hsv: {
+            type: Object,
+            default: () => ({
+                h: 0,
+                s: 0,
+                v: 0
+            })
+        },
+        width: {
+            type: Number,
+            default: 14
+        },
+        height: {
+            type: Number,
+            default: 152
+        }
+    },
+    emits: ['selectHue', 'updateHue'],
+    data() {
+        return {
+            slideHueStyle: {}
+        }
+    },
+    mounted() {
+        this.renderColor()
+        this.renderSlide()
+    },
+    methods: {
+        renderColor() {
+            const canvas = this.$refs.canvasHue as HTMLCanvasElement
+            const width = this.width
+            const height = this.height
+            const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
+            canvas.width = width
+            canvas.height = height
+
+            const gradient = ctx.createLinearGradient(0, 0, 0, height)
+            gradient.addColorStop(0, '#FF0000')
+            gradient.addColorStop(0.17 * 1, '#FF00FF')
+            gradient.addColorStop(0.17 * 2, '#0000FF')
+            gradient.addColorStop(0.17 * 3, '#00FFFF')
+            gradient.addColorStop(0.17 * 4, '#00FF00')
+            gradient.addColorStop(0.17 * 5, '#FFFF00')
+            gradient.addColorStop(1, '#FF0000')
+            ctx.fillStyle = gradient
+            ctx.fillRect(0, 0, width, height)
+        },
+        renderSlide() {
+            this.slideHueStyle = {
+                top: (1 - this.hsv.h / 360) * this.height - 2 + 'px'
+            }
+        },
+        selectHue(e: MouseEvent) {
+            const { top: hueTop } = this.$el.getBoundingClientRect()
+            const ctx = (e.target as HTMLCanvasElement).getContext(
+                '2d'
+            ) as CanvasRenderingContext2D
+            let color: { r: number; g: number; b: number } = null
+
+            const mousemove = (e: MouseEvent) => {
+                let y = e.clientY - hueTop
+
+                if (y < 0) {
+                    y = 0
+                }
+                if (y > this.height) {
+                    y = this.height
+                }
+
+                this.slideHueStyle = {
+                    top: y - 2 + 'px'
+                }
+
+                const imgData = ctx.getImageData(
+                    0,
+                    Math.min(y, this.height - 1),
+                    1,
+                    1
+                )
+                const [r, g, b] = imgData.data
+                color = { r, g, b }
+                this.$emit('selectHue', color)
+            }
+
+            mousemove(e)
+
+            const mouseup = () => {
+                document.removeEventListener('mousemove', mousemove)
+                document.removeEventListener('mouseup', mouseup)
+                this.$emit('updateHue', color)
+            }
+
+            document.addEventListener('mousemove', mousemove)
+            document.addEventListener('mouseup', mouseup)
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.hue {
+    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/DlPreview.vue

@@ -0,0 +1,61 @@
+<template>
+    <canvas style="border-radius: 2px" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { createAlphaSquare } from './utils'
+
+export default defineComponent({
+    name: 'DlPreview',
+    props: {
+        color: {
+            type: String,
+            default: '#000000'
+        },
+        width: {
+            type: Number,
+            default: 100
+        },
+        height: {
+            type: Number,
+            default: 28
+        }
+    },
+    data() {
+        return {
+            alphaSize: 5
+        }
+    },
+    watch: {
+        color() {
+            this.renderColor()
+        }
+    },
+    mounted() {
+        this.renderColor()
+    },
+    methods: {
+        renderColor() {
+            const canvas = this.$el 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)
+
+            ctx.fillStyle = this.color
+            ctx.fillRect(0, 0, width, height)
+        }
+    }
+})
+</script>

package/src/components/DlColorPicker/DlSaturation.vue

@@ -0,0 +1,152 @@
+<template>
+    <div
+        class="saturation"
+        @mousedown.prevent.stop="selectSaturation"
+    >
+        <canvas ref="canvasSaturation" />
+        <div
+            :style="slideSaturationStyle"
+            class="slide"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { createLinearGradient } from './utils'
+
+export default defineComponent({
+    name: 'DlSaturation',
+    props: {
+        color: {
+            type: String,
+            default: '#000000'
+        },
+        hsv: {
+            type: Object,
+            default: () => ({
+                h: 0,
+                s: 0,
+                v: 0
+            })
+        },
+        size: {
+            type: Number,
+            default: 152
+        }
+    },
+    emits: ['selectSaturation', 'updateSaturation'],
+    data() {
+        return {
+            slideSaturationStyle: {}
+        }
+    },
+    mounted() {
+        this.renderColor()
+        this.renderSlide()
+    },
+    methods: {
+        renderColor() {
+            const canvas = this.$refs.canvasSaturation as HTMLCanvasElement
+            const size = this.size
+            const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
+            canvas.width = size
+            canvas.height = size
+
+            ctx.fillStyle = this.color
+            ctx.fillRect(0, 0, size, size)
+
+            createLinearGradient(
+                'l',
+                ctx,
+                size,
+                size,
+                '#FFFFFF',
+                'rgba(255,255,255,0)'
+            )
+            createLinearGradient(
+                'p',
+                ctx,
+                size,
+                size,
+                'rgba(0,0,0,0)',
+                '#000000'
+            )
+        },
+        renderSlide() {
+            this.slideSaturationStyle = {
+                left: this.hsv.s * this.size - 5 + 'px',
+                top: (1 - this.hsv.v) * this.size - 5 + 'px'
+            }
+        },
+        selectSaturation(e: any) {
+            const { top: saturationTop, left: saturationLeft } =
+                this.$el.getBoundingClientRect()
+            const ctx = e.target.getContext('2d')
+            let color: { r: number; g: number; b: number } = null
+
+            const mousemove = (e: MouseEvent) => {
+                let x = e.clientX - saturationLeft
+                let y = e.clientY - saturationTop
+
+                if (x < 0) {
+                    x = 0
+                }
+                if (y < 0) {
+                    y = 0
+                }
+                if (x > this.size) {
+                    x = this.size
+                }
+                if (y > this.size) {
+                    y = this.size
+                }
+
+                this.slideSaturationStyle = {
+                    left: x - 5 + 'px',
+                    top: y - 5 + 'px'
+                }
+
+                const imgData = ctx.getImageData(
+                    Math.min(x, this.size - 1),
+                    Math.min(y, this.size - 1),
+                    1,
+                    1
+                )
+                const [r, g, b] = imgData.data
+                color = { r, g, b }
+                this.$emit('selectSaturation', color)
+            }
+
+            mousemove(e)
+
+            const mouseup = () => {
+                document.removeEventListener('mousemove', mousemove)
+                document.removeEventListener('mouseup', mouseup)
+                this.$emit('updateSaturation', color)
+            }
+
+            document.addEventListener('mousemove', mousemove)
+            document.addEventListener('mouseup', mouseup)
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.saturation {
+    position: relative;
+    cursor: pointer;
+    .slide {
+        position: absolute;
+        left: 100px;
+        top: 0;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        border: 1px solid #fff;
+        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
+        pointer-events: none;
+    }
+}
+</style>

package/src/components/DlColorPicker/constants.ts

@@ -0,0 +1,16 @@
+export const defaultColors = [
+    '#000000',
+    '#FEFEFE',
+    '#E93127',
+    '#E06E61',
+    '#FFDC58',
+    '#8DF65D',
+    '#52BEA8',
+    '#43B6F1',
+    '#367CF2',
+    '#4A5EE9',
+    '#F089C7',
+    '#E5499F',
+    '#A646BD',
+    '#772499'
+]

package/src/components/DlColorPicker/index.ts

@@ -0,0 +1,20 @@
+import DlColorPicker from './DlColorPicker.vue'
+import DlColors from './DlColors.vue'
+import DlHue from './DlHue.vue'
+import DlPreview from './DlPreview.vue'
+import DlSaturation from './DlSaturation.vue'
+import DlBox from './DlBox.vue'
+import DlAlpha from './DlAlpha.vue'
+
+export * from './types'
+export * from './utils'
+
+export {
+    DlColorPicker,
+    DlColors,
+    DlHue,
+    DlPreview,
+    DlSaturation,
+    DlBox,
+    DlAlpha
+}

package/src/components/DlColorPicker/types.ts

@@ -0,0 +1,11 @@
+export type RGBColor = { r: number; g: number; b: number }
+export type RGBAColor = { r: number; g: number; b: number; a: number }
+export type HSVColor = { h: number; s: number; v: number }
+
+export type ColorValue = RGBAColor & HSVColor
+
+export type NewColor = {
+    rgba: RGBAColor
+    hsv: HSVColor
+    hex: string
+}

package/src/components/DlColorPicker/utils.ts

@@ -0,0 +1,128 @@
+import { ColorValue, HSVColor, RGBAColor, RGBColor } from './types'
+
+export function setColorValue(color: any): ColorValue {
+    let rgba: RGBAColor = { r: 0, g: 0, b: 0, a: 1 }
+    if (/#/.test(color)) {
+        rgba = hex2rgb(color)
+    } else if (/rgb/.test(color)) {
+        rgba = rgb2rgba(color)
+    } else if (typeof color === 'string') {
+        rgba = rgb2rgba(`rgba(${color})`)
+    } else if (Object.prototype.toString.call(color) === '[object Object]') {
+        rgba = color
+    }
+    const { r, g, b, a = 1 } = rgba
+    const { h, s, v } = rgb2hsv(rgba)
+    return { r, g, b, a, h, s, v }
+}
+
+export function createAlphaSquare(size: number): HTMLCanvasElement {
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
+
+    const doubleSize = size * 2
+    canvas.width = doubleSize
+    canvas.height = doubleSize
+
+    ctx.fillStyle = '#ffffff'
+    ctx.fillRect(0, 0, doubleSize, doubleSize)
+    ctx.fillStyle = '#ccd5db'
+    ctx.fillRect(0, 0, size, size)
+    ctx.fillRect(size, size, size, size)
+
+    return canvas
+}
+
+export function createLinearGradient(
+    direction: string,
+    ctx: CanvasRenderingContext2D,
+    width: number,
+    height: number,
+    color1: string,
+    color2: string
+): void {
+    const isL = direction === 'l'
+    const gradient = ctx.createLinearGradient(
+        0,
+        0,
+        isL ? width : 0,
+        isL ? 0 : height
+    )
+    gradient.addColorStop(0.01, color1)
+    gradient.addColorStop(0.99, color2)
+    ctx.fillStyle = gradient
+    ctx.fillRect(0, 0, width, height)
+}
+
+export function rgb2hex({ r, g, b }: RGBColor, toUpper: boolean): string {
+    const change = (val: number) => ('0' + Number(val).toString(16)).slice(-2)
+    const color = `#${change(r)}${change(g)}${change(b)}`
+    return toUpper ? color.toUpperCase() : color
+}
+
+export function hex2rgb(hex: string): RGBAColor {
+    hex = hex.slice(1)
+
+    const change = (val: string) => parseInt(val, 16) || 0
+
+    if (hex.length === 3) {
+        if (hex[0] === hex[1] && hex[0] === hex[2]) {
+            return {
+                r: change(hex.slice(0, 2)),
+                g: change(hex.slice(0, 2)),
+                b: change(hex.slice(0, 2)),
+                a: 1
+            }
+        }
+    }
+
+    return {
+        r: change(hex.slice(0, 2)),
+        g: change(hex.slice(2, 4)),
+        b: change(hex.slice(4, 6)),
+        a: 1
+    }
+}
+
+export function rgb2rgba(value: string | any): RGBAColor {
+    value = (/rgba?\((.*?)\)/.exec(value) || ['', '0,0,0,1'])[1].split(',')
+
+    return {
+        r: Number(value[0]) || 0,
+        g: Number(value[1]) || 0,
+        b: Number(value[2]) || 0,
+        a: Number(value[3] ? value[3] : 1)
+    }
+}
+
+export function rgb2hsv(rgbColor: RGBColor): HSVColor {
+    const r = rgbColor.r / 255
+    const g = rgbColor.g / 255
+    const b = rgbColor.b / 255
+
+    const max = Math.max(r, g, b)
+    const min = Math.min(r, g, b)
+    const delta = max - min
+
+    let h = 0
+    if (max === min) {
+        h = 0
+    } else if (max === r) {
+        if (g >= b) {
+            h = (60 * (g - b)) / delta
+        } else {
+            h = (60 * (g - b)) / delta + 360
+        }
+    } else if (max === g) {
+        h = (60 * (b - r)) / delta + 120
+    } else if (max === b) {
+        h = (60 * (r - g)) / delta + 240
+    }
+
+    h = Math.floor(h)
+
+    const s = parseFloat((max === 0 ? 0 : 1 - min / max).toFixed(2))
+    const v = parseFloat(max.toFixed(2))
+
+    return { h, s, v }
+}

package/src/components/DlCounters.vue

@@ -0,0 +1,173 @@
+<template>
+    <div
+        :id="uuid"
+        class="container"
+    >
+        <ul>
+            <li
+                v-for="(item, index) in items"
+                :key="index"
+                class="item"
+            >
+                <div :class="computeClass('item-content')">
+                    <p :class="computeClass('item-value')">
+                        {{ item.value }}
+                    </p>
+                    <p
+                        v-show="item.text"
+                        class="item-text"
+                    >
+                        {{ capitalize(item.text) }}
+                    </p>
+                    <p
+                        v-show="item.subtext"
+                        class="item-subtext"
+                    >
+                        {{ item.subtext && capitalize(item.subtext) }}
+                    </p>
+                </div>
+                <div class="divider" />
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent, PropType } from 'vue-demi'
+
+interface CounterItem {
+    value?: number
+    text: string
+    subtext?: string
+}
+
+export default defineComponent({
+    name: 'DlCounters',
+    props: {
+        small: {
+            type: Boolean,
+            default: false
+        },
+        items: {
+            type: Array as PropType<CounterItem[]>,
+            default: (): CounterItem[] => [],
+            validator(value: CounterItem[]): boolean {
+                return value.length <= 8
+            }
+        }
+    },
+    data() {
+        return {
+            uuid: `dl-counters-${v4()}`
+        }
+    },
+    methods: {
+        capitalize(value: string): string {
+            return value[0].toUpperCase() + value.slice(1)
+        },
+        computeClass(value: string): (string | boolean)[] {
+            return [value, this.small && `${value}--small`]
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.container {
+    padding: 10px;
+    width: fit-content;
+}
+
+ul {
+    list-style-type: none;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: stretch;
+
+    .item {
+        display: flex;
+        justify-content: center;
+    }
+
+    .item-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-left: 30px;
+        padding-right: 30px;
+
+        &--small {
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+    }
+
+    .item-value {
+        font-size: var(--dl-font-size-h1);
+        color: var(--dl-color-secondary);
+        padding: 2px;
+        margin: 0;
+        line-height: 35px;
+
+        &--small {
+            line-height: 23px;
+            font-size: var(--dl-font-size-h2);
+        }
+    }
+
+    .item-text {
+        font-size: var(--dl-font-size-h4);
+        color: var(--dl-color-darker);
+        margin: 0;
+        text-align: center;
+        max-width: 130px;
+        line-height: 18px;
+    }
+
+    .item-subtext {
+        font-size: var(--dl-font-size-body);
+        color: var(--dl-color-medium);
+        margin: 0;
+        text-align: center;
+        max-width: 130px;
+        padding-top: 2px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: 16px;
+        max-height: 35.1px;
+        white-space: pre-wrap;
+    }
+
+    .divider {
+        display: block;
+        background-color: var(--dl-color-separator);
+        width: 1px;
+        align-self: stretch;
+    }
+
+    li {
+        float: left;
+        text-decoration: none;
+        position: relative;
+
+        &:first-child {
+            .item-content {
+                padding-left: 0;
+            }
+        }
+
+        &:last-child {
+            .divider {
+                display: none;
+            }
+
+            .item-content {
+                padding-right: 0;
+            }
+        }
+    }
+}
+</style>