@dataloop-ai/components 0.13.0

package/src/components/DlProgressBar.vue

@@ -0,0 +1,159 @@
+<template>
+    <div
+        :id="uuid"
+        class="dl-progress-wrapper"
+        :style="`width: ${width};`"
+    >
+        <p
+            v-if="label"
+            data-test-id="progress-label"
+            align="left"
+            class="dl-progress-bar-label"
+        >
+            {{ label }}
+        </p>
+        <div class="progress-container">
+            <span
+                role="progressbar"
+                class="dl-progress-bar"
+                :aria-valuenow="indeterminate ? undefined : computedValue"
+                :aria-valuemin="indeterminate ? undefined : 0"
+                :aria-valuemax="indeterminate ? undefined : 100"
+            >
+                <span
+                    :style="cssVars"
+                    :class="{
+                        indeterminate,
+                        'dl-progress-bar-indicator': true
+                    }"
+                />
+            </span>
+            <p
+                v-if="showValue && !indeterminate"
+                class="dl-progress-bar-label"
+            >
+                {{ computedValue }}{{ showPercentage ? '%' : '' }}
+            </p>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent } from 'vue-demi'
+import { getColor } from '../utils'
+
+export default defineComponent({
+    name: 'DlProgressBar',
+    props: {
+        color: {
+            type: String,
+            default: 'dl-color-secondary'
+        },
+        label: {
+            type: String,
+            default: null
+        },
+        showValue: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        showPercentage: {
+            type: Boolean,
+            default: false
+        },
+        value: {
+            type: Number,
+            default: 0,
+            validator: (value: number) => value >= 0 && value <= 1
+        },
+        indeterminate: {
+            type: Boolean,
+            default: false
+        },
+        width: {
+            type: String,
+            default: '100%'
+        }
+    },
+    data() {
+        return {
+            uuid: `dl-progress-bar-${v4()}`
+        }
+    },
+    computed: {
+        computedValue(): number {
+            return Number((this.value * 100).toFixed(2).replace(/[.,]00$/, ''))
+        },
+        cssVars(): Record<string, string> {
+            return {
+                '--dl-progress-bar-width': `${this.computedValue}%`,
+                '--dl-progress-bar-bg': getColor(this.color)
+            }
+        }
+    }
+})
+</script>
+
+<style scoped>
+.dl-progress-bar-label {
+    margin: 0;
+    font-size: var(--dl-font-size-body);
+    line-height: 1;
+    color: var(--dl-color-darker);
+}
+.dl-progress-bar {
+    overflow: hidden;
+    width: 100%;
+    height: 4px;
+    border-radius: 2px;
+    background-color: var(--dl-color-separator);
+    margin: 6px 0;
+}
+.dl-progress-bar-indicator {
+    transition: width 0.5s;
+    display: block;
+    height: 4px;
+    border-radius: 2px;
+    background-color: var(--dl-progress-bar-bg);
+    width: var(--dl-progress-bar-width);
+}
+.progress-container {
+    display: flex;
+    column-gap: 10px;
+    align-items: center;
+}
+.indeterminate {
+    animation: indeterminate-loading;
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+}
+
+@keyframes indeterminate-loading {
+    0% {
+        width: 0%;
+        margin-left: 0%;
+    }
+    25% {
+        width: 60%;
+        margin-left: 25%;
+    }
+    50% {
+        width: 30%;
+        margin-left: 100%;
+    }
+    50.1% {
+        width: 0%;
+        margin-left: 0%;
+    }
+    75% {
+        width: 70%;
+        margin-left: 30%;
+    }
+    100% {
+        width: 10%;
+        margin-left: 100%;
+    }
+}
+</style>

package/src/components/DlProgressChart.vue

@@ -0,0 +1,299 @@
+<template>
+    <div
+        :id="uuid"
+        ref="rootRef"
+        class="root"
+        :style="rootStyle"
+    >
+        <div class="progress-bar">
+            <div
+                v-for="item in progressBarItems"
+                :key="item.index"
+                :style="getBarItemStyles(item)"
+            >
+                <dl-tooltip
+                    anchor="center middle"
+                    self="bottom middle"
+                >
+                    {{ item.tooltipText }}
+                </dl-tooltip>
+            </div>
+        </div>
+        <div class="legend">
+            <div
+                v-for="item in progressBarItems"
+                :key="item.index"
+                class="item"
+                :style="legendItemStyle"
+            >
+                <dl-tooltip v-if="isOverflowing[item.index]">
+                    {{ item.name }}
+                </dl-tooltip>
+                <span
+                    class="circle"
+                    :style="{ backgroundColor: item.color }"
+                />
+                <div
+                    v-if="isVue2"
+                    ref="textRef"
+                    :data-index="item.index"
+                    class="text"
+                    :class="{ ellipsis: isOverflowing[item.index] }"
+                >
+                    {{ item.name }}
+                </div>
+                <div
+                    v-else
+                    :ref="
+                        (el) => {
+                            textRef[item.index] = el
+                        }
+                    "
+                    :data-index="item.index"
+                    class="text"
+                    :class="{ ellipsis: isOverflowing[item.index] }"
+                >
+                    {{ item.name }}
+                </div>
+                <span :style="counterStyle">
+                    <dl-link
+                        v-if="item.link"
+                        open-in-new-tab
+                        :href="item.link"
+                        :size="12"
+                        color="color"
+                        data-test="counter-link"
+                    >({{ item.value }})</dl-link><span
+                        v-else
+                        data-test="counter-text"
+                    >({{ item.value }})</span>
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent, isVue2 } from 'vue-demi'
+import { getColor } from '../utils'
+import { isEllipsisActive } from '../utils/is-ellipsis-active'
+import DlLink from './DlLink/DlLink.vue'
+import DlTooltip from './DlTooltip.vue'
+
+type ProgressChartOption = {
+    name: string
+    value: number
+    color: string
+    link?: string
+}
+
+function getPercentage(value: number, total: number): number {
+    return (value * 100) / total
+}
+
+export default defineComponent({
+    name: 'DlProgressChart',
+    components: { DlLink, DlTooltip },
+    props: {
+        options: {
+            type: Array,
+            default: null,
+            required: true,
+            validator: (val: ProgressChartOption[]) =>
+                Array.isArray(val) &&
+                val.every(
+                    (el) =>
+                        typeof el === 'object' &&
+                        el !== null &&
+                        !Array.isArray(el) &&
+                        typeof el.name === 'string' &&
+                        typeof el.value === 'number' &&
+                        typeof el.color === 'string'
+                )
+        },
+        width: {
+            type: String,
+            default: '100%'
+        },
+        textColor: {
+            type: String,
+            default: 'dl-color-darker'
+        },
+        counterColor: {
+            type: String,
+            default: 'dl-color-secondary'
+        }
+    },
+    data(): {
+        uuid: string
+        isOverflowing: boolean[]
+        textRef: HTMLDivElement[]
+        resizeObserver: ResizeObserver | null
+    } {
+        return {
+            uuid: `dl-progress-chart-${v4()}`,
+            isOverflowing: [],
+            textRef: [],
+            resizeObserver: null
+        }
+    },
+    computed: {
+        progressBarItems() {
+            const options = this.options as ProgressChartOption[]
+            const total = options.reduce(
+                (sum, option) => (sum += option.value),
+                0
+            )
+
+            return options.map((option, index) => {
+                const percentage = getPercentage(option.value, total).toFixed(2)
+
+                return {
+                    ...option,
+                    index,
+                    percentage,
+                    tooltipText: `${option.name}\n${percentage}% (${option.value}/${total})`
+                }
+            })
+        },
+        rootStyle(): Record<string, any> {
+            return {
+                width: this.width
+            }
+        },
+        counterStyle(): Record<string, any> {
+            const color = getColor(this.counterColor, 'dl-color-secondary')
+
+            return {
+                '--color': color,
+                color,
+                paddingLeft: '5px'
+            }
+        },
+        isVue2(): boolean {
+            return isVue2
+        },
+        legendItemWidth(): number {
+            const width =
+                (this.$refs['rootRef'] as HTMLDivElement)?.offsetWidth ?? 0
+            const length = this.progressBarItems.length ?? 0
+            return width / length
+        },
+        legendItemStyle(): Record<string, any> {
+            return {
+                width: `calc(${this.legendItemWidth} - 10px)`, // padding-right: 10px
+                color: getColor(this.textColor, 'dl-color-darker')
+            }
+        }
+    },
+    mounted() {
+        this.resizeObserver = new ResizeObserver((entries) => {
+            const tempArr = [...this.isOverflowing]
+
+            for (const entry of entries) {
+                const index = parseInt(
+                    (entry.target as HTMLDivElement).dataset.index ?? '0'
+                )
+                tempArr[index] = isEllipsisActive(entry.target)
+            }
+
+            this.isOverflowing = tempArr
+        })
+
+        const elements = isVue2
+            ? (this.$refs['textRef'] as HTMLDivElement[])
+            : this.textRef
+
+        for (const el of elements) {
+            this.resizeObserver.observe(el)
+        }
+    },
+    beforeUnmount() {
+        this.resizeObserver.disconnect()
+        this.resizeObserver = null
+    },
+    methods: {
+        getBarItemStyles(item: any): any {
+            return {
+                flexGrow: item.percentage,
+                flexShrink: item.percentage,
+                backgroundColor: item.color
+            }
+        }
+    },
+
+    template: 'dl-progress-chart'
+})
+</script>
+
+<style scoped lang="scss">
+.root {
+    display: flex;
+    flex-direction: column;
+    margin: 20px 0;
+
+    & > div {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .progress-bar {
+        height: 10px;
+        width: 100%;
+
+        :first-child {
+            border-top-left-radius: 5px;
+            border-bottom-left-radius: 5px;
+        }
+
+        :last-child {
+            border-top-right-radius: 5px;
+            border-bottom-right-radius: 5px;
+        }
+    }
+
+    .legend {
+        margin: 10px 0 20px 0;
+        font-size: var(--dl-font-size-body);
+        justify-content: space-evenly;
+
+        & .item {
+            display: flex;
+            align-items: center;
+            padding-right: 10px;
+            justify-content: center;
+
+            .circle {
+                min-width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                margin-right: 5px;
+                box-sizing: border-box;
+            }
+
+            .text {
+                overflow: hidden;
+                white-space: nowrap;
+            }
+
+            .ellipsis {
+                text-overflow: ellipsis;
+            }
+
+            .text::first-letter {
+                text-transform: capitalize;
+            }
+        }
+    }
+}
+
+.item {
+    @for $n from 1 through 100 {
+        &:first-child:nth-last-child(#{$n}),
+        &:first-child:nth-last-child(#{$n}) ~ & {
+            width: calc(100% / #{$n} - 10px);
+        }
+    }
+}
+</style>

package/src/components/DlRadio.vue

@@ -0,0 +1,218 @@
+<template>
+    <div
+        :id="uuid"
+        :class="identifierClass"
+        class="container-wrapper"
+    >
+        <label
+            :for="computedId"
+            class="container"
+            :class="{ disabled: disabled }"
+            :tabindex="tabindex"
+            :style="cssContainerVars"
+            @click="onClick"
+            @keydown="onKeydown"
+            @keyup="onKeyup"
+        >
+            <span class="radio-wrapper">
+                <input
+                    :id="computedId"
+                    :value="value"
+                    :checked="isChecked"
+                    type="radio"
+                    tabindex="-1"
+                    :disabled="disabled"
+                >
+                <svg
+                    class="radio-border"
+                    :style="cssSvgVars"
+                >
+                    <path
+                        d="M6 0C4.4087 0 2.8826 0.632144 1.75739 1.75736C0.632167 2.88258 0 4.4087 0 6C0 7.5913 0.632167 9.11742 1.75739 10.2426C2.8826 11.3679 4.4087 12 6 12C7.5913 12 9.11743 11.3679 10.2426 10.2426C11.3679 9.11742 12 7.5913 12 6C12 4.4087 11.3679 2.88258 10.2426 1.75736C9.11743 0.632144 7.5913 0 6 0ZM6 10.846C4.71476 10.846 3.48217 10.3354 2.57336 9.42664C1.66456 8.51784 1.15402 7.28524 1.15402 6C1.15402 5.36361 1.27935 4.73346 1.52289 4.14552C1.76642 3.55757 2.12337 3.02336 2.57336 2.57336C3.02336 2.12337 3.55759 1.76641 4.14554 1.52288C4.73348 1.27935 5.36361 1.154 6 1.154C6.63639 1.154 7.26655 1.27935 7.85449 1.52288C8.44244 1.76641 8.97667 2.12337 9.42667 2.57336C9.87666 3.02336 10.2336 3.55757 10.4771 4.14552C10.7207 4.73346 10.846 5.36361 10.846 6C10.846 7.28524 10.3355 8.51784 9.42667 9.42664C8.51787 10.3354 7.28524 10.846 6 10.846Z"
+                    />
+                </svg>
+                <svg
+                    class="radio-check"
+                    :style="cssSvgVars"
+                >
+                    <path
+                        d="M6 9C7.65685 9 9 7.65685 9 6C9 4.34315 7.65685 3 6 3C4.34315 3 3 4.34315 3 6C3 7.65685 4.34315 9 6 9Z"
+                    />
+                </svg>
+            </span>
+            <span
+                v-if="hasLabel"
+                class="radio-label"
+                :for="computedId"
+            >
+                <slot>
+                    {{ label }}
+                </slot>
+            </span>
+        </label>
+        <div
+            v-if="subLabel"
+            :style="subLabelStyle"
+            class="sub-text"
+        >
+            <span> {{ subLabel }}</span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { stopAndPrevent } from '../utils'
+import { v4 } from 'uuid'
+import { getColor } from '../utils'
+
+export default defineComponent({
+    name: 'DlRadio',
+    model: {
+        prop: 'modelValue',
+        event: 'update:model-value'
+    },
+    props: {
+        color: { type: String, default: null },
+        disabled: { type: Boolean, default: false },
+        id: { type: [String, Number], default: null },
+        label: { type: String, default: null },
+        padding: { type: String, default: '5px' },
+        modelValue: { type: [String, Number], required: true },
+        value: { type: [String, Number], required: true },
+        tabindex: { type: String, default: '0' },
+        subLabel: { type: String, default: '' },
+        subLabelSize: { type: String, default: '10px' }
+    },
+    emits: ['update:model-value'],
+    data() {
+        return {
+            uuid: `dl-radio-${v4()}`
+        }
+    },
+    computed: {
+        identifierClass(): string {
+            return `dl-radio-${this.label ?? ''}`.replaceAll(' ', '-')
+        },
+        computedId(): string {
+            return `${this.$props.id || v4()}`
+        },
+        hasLabel(): boolean {
+            return !!this.$props.label || !!this.$slots.default
+        },
+        isChecked(): boolean {
+            return this.$props.modelValue === this.$props.value
+        },
+        cssSvgVars(): Record<string, string | number> {
+            return {
+                '--dl-radio-color': this.getCurrentColor(),
+                '--dl-check-dot-scale': this.isChecked ? 1 : 0
+            }
+        },
+        cssContainerVars(): Record<string, string> {
+            return {
+                '--dl-radio-padding': this.padding
+            }
+        },
+        subLabelStyle(): Record<string, string> {
+            return {
+                'font-size': this.subLabelSize
+            }
+        }
+    },
+    methods: {
+        getCurrentColor() {
+            if (this.disabled) {
+                return 'var(--dl-color-disabled)'
+            }
+            if (this.isChecked) {
+                return getColor(this.color, 'dl-color-secondary')
+            }
+            return 'var(--dl-color-separator)'
+        },
+        onClick(e: Event) {
+            if (e) {
+                stopAndPrevent(e)
+            }
+
+            if (!this.$props.disabled) {
+                this.$emit('update:model-value', this.$props.value, e)
+            }
+        },
+        onKeydown(e: KeyboardEvent) {
+            if (e.key === 'Enter' || e.key === ' ') {
+                stopAndPrevent(e)
+            }
+        },
+        onKeyup(e: KeyboardEvent) {
+            if (e.key === 'Enter' || e.key === ' ') {
+                this.onClick(e as Event)
+            }
+        }
+    },
+    template: 'dl-radio'
+})
+</script>
+
+<style scoped lang="scss">
+.container {
+    cursor: pointer;
+    display: inline-flex;
+    max-width: max-content;
+    gap: 10px;
+    align-items: center;
+    padding: var(--dl-radio-padding);
+    user-select: none;
+}
+.container.disabled {
+    cursor: not-allowed;
+    color: var(--dl-color-disabled);
+    & * {
+        pointer-events: none;
+        color: var(--dl-color-disabled);
+    }
+}
+.radio-wrapper {
+    display: flex;
+    position: relative;
+    width: 12px;
+    height: 12px;
+    & svg {
+        transition: all 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+        overflow: visible;
+        fill: var(--dl-radio-color);
+    }
+}
+input {
+    position: absolute;
+    opacity: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+.radio-label {
+    font-size: var(--dl-font-size-body);
+    color: var(--dl-color-darker);
+}
+.radio-border {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+.radio-check {
+    transition: transform 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+    transform: scale(var(--dl-check-dot-scale));
+    width: 100%;
+    height: 100%;
+}
+.label-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+.sub-text {
+    margin-left: 6%;
+    width: 80%;
+    color: var(--dl-color-medium);
+    word-break: break-all;
+}
+</style>