@dataloop-ai/components 0.13.0

package/src/components/DlSelect/SelectOption.vue

@@ -0,0 +1,261 @@
+<template>
+    <div
+        :id="uuid"
+        :class="identifierClass"
+        style="width: 100%"
+    >
+        <dl-list-item
+            class="option"
+            :class="{ highlighted: highlightSelected && isSelected }"
+            :with-wave="withWave"
+            clickable
+            style="width: 100%"
+            @click="handleClick"
+        >
+            <dl-item-section
+                :color="color"
+                style="width: 100%"
+            >
+                <span
+                    v-if="multiselect"
+                    class="multiselect-option"
+                    :style="`padding-left: ${depth * 30}px;`"
+                >
+                    <span v-if="hasChildren">
+                        <dl-icon
+                            :icon="'icon-dl-right-chevron'"
+                            style="margin-right: 10px"
+                            class="expand-icon"
+                            :class="`${showChildren && 'expanded'}`"
+                            @click="chevronClick"
+                        />
+                    </span>
+                    <dl-checkbox
+                        :ref="`checkboxRef-${value}`"
+                        :class="{ capitalized }"
+                        :model-value="modelValue"
+                        :value="value"
+                        :label="
+                            label
+                                ? capitalized
+                                    ? label.toLowerCase()
+                                    : label
+                                : null
+                        "
+                        :indeterminate-value="indeterminateValue"
+                        @update:model-value="handleCheckboxUpdate"
+                        @checked="handleSingleSelect"
+                        @unchecked="handleSingleDeselect"
+                    />
+                    <span
+                        class="multiselect-label"
+                        :class="{ capitalized }"
+                    >
+                        <slot />
+                    </span>
+                    <span
+                        v-if="count"
+                        class="counter"
+                    > ({{ count }}) </span>
+                </span>
+                <div
+                    v-else
+                    :class="{ capitalized }"
+                >
+                    <slot>
+                        {{
+                            capitalized ? value.toString().toLowerCase() : value
+                        }}
+                    </slot>
+                </div>
+            </dl-item-section>
+        </dl-list-item>
+        <div v-if="hasChildren && showChildren">
+            <div
+                v-for="(child, index) in children"
+                :key="`${componentId}-${getValue(child)}-${index}`"
+            >
+                <select-option
+                    :multiselect="multiselect"
+                    :count="count"
+                    clickable
+                    :model-value="modelValue"
+                    :value="getValue(child)"
+                    :children="getChildren(child)"
+                    :label="getLabel(child)"
+                    :depth="depth + 1"
+                    :highlight-selected="highlightSelected"
+                    :with-wave="withWave"
+                    :capitalized="capitalized"
+                    @update:model-value="handleCheckboxUpdate"
+                    @selected="handleSingleSelect"
+                    @deselected="handleSingleDeselect"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlListItem } from '../DlListItem'
+import DlItemSection from '../DlItemSection.vue'
+import DlCheckbox from '../DlCheckbox.vue'
+import DlIcon from '../DlIcon.vue'
+import { v4 } from 'uuid'
+import { debounce } from 'lodash'
+
+const ValueTypes = [Array, Boolean, String, Number, Object, Function]
+
+export default defineComponent({
+    name: 'SelectOption',
+    components: {
+        DlListItem,
+        DlItemSection,
+        DlCheckbox,
+        DlIcon
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:model-value'
+    },
+    props: {
+        withWave: Boolean,
+        defaultStyles: { type: Boolean, default: true },
+        multiselect: { type: Boolean, default: false },
+        value: { type: ValueTypes, default: null },
+        children: { type: Array, default: null },
+        highlightSelected: { type: Boolean, default: false },
+        count: { type: Number, default: null },
+        totalItems: { type: Boolean, default: false },
+        modelValue: {
+            type: ValueTypes,
+            default: [] as any
+        },
+        depth: { type: Number, default: 0 },
+        label: { type: String, default: null },
+        capitalized: { type: Boolean, default: false }
+    },
+    emits: ['update:model-value', 'click', 'selected', 'deselected'],
+    data() {
+        return {
+            showChildren: false,
+            componentId: v4(),
+            uuid: `dl-select-option-${v4()}`
+        }
+    },
+    computed: {
+        identifierClass(): string {
+            return `dl-select-option-${this.value}`.replaceAll(' ', '-')
+        },
+        color(): string | null {
+            return this.defaultStyles ? 'dl-color-darker' : null
+        },
+        isSelected(): boolean {
+            return (
+                (this.modelValue as any[])?.includes(this.value) ||
+                this.modelValue === true
+            )
+        },
+        indeterminateValue(): string | undefined {
+            return this.totalItems ? 'indeterminate' : undefined
+        },
+        handleChildren(): any {
+            return debounce(this.toggleChildren.bind(this), 50)
+        },
+        hasChildren(): boolean {
+            return this.children && this.children?.length > 0
+        },
+        indent(): { padding: string } {
+            return { padding: `0 ${this.depth * 30}px 0 0` }
+        }
+    },
+    methods: {
+        handleSingleSelect(value?: any) {
+            this.$emit('selected', value ?? this.value)
+        },
+        handleSingleDeselect(value?: any) {
+            this.$emit('deselected', value ?? this.value)
+        },
+        handleCheckboxUpdate(newVal: string[] | boolean, e: Event): void {
+            this.$emit('update:model-value', newVal, e)
+        },
+        handleClick(e: Event) {
+            e.stopPropagation()
+            e.preventDefault()
+            if (this.multiselect) {
+                const checkboxRef: any = this.$refs[`checkboxRef-${this.value}`]
+                checkboxRef.$refs.container?.click()
+            }
+            this.$emit('click', e)
+        },
+        chevronClick(e: Event) {
+            e.stopPropagation()
+            this.handleChildren(e)
+        },
+        toggleChildren() {
+            this.showChildren = !this.showChildren
+        },
+        getChildren(option: any) {
+            return typeof option === 'object' ? option.children : null
+        },
+        getLabel(option: any) {
+            return typeof option === 'object' ? option.label : null
+        },
+        getValue(option: any) {
+            return typeof option === 'object' ? option.value : null
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.option {
+    &::v-deep .container {
+        padding: 0 10px 0 0;
+    }
+}
+
+.highlighted {
+    background-color: var(--dl-color-fill);
+}
+
+.multiselect-option {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.multiselect-label {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    /* max-width: 40%; */
+}
+
+.counter {
+    color: var(--dl-color-lighter);
+    font-size: 10px;
+}
+.expand-icon {
+    display: flex !important;
+    justify-content: center !important;
+    color: var(--dl-color-medium);
+    transition-property: transform, -webkit-transform;
+    transition-duration: 0.28s, 0.28s;
+    transition-timing-function: ease, ease;
+    transition-delay: 0s, 0s;
+    &.expanded {
+        transform: rotate(90deg);
+    }
+}
+.capitalized {
+    text-transform: capitalize !important;
+}
+</style>
+<style lang="scss">
+.capitalized .checkbox-label {
+    text-transform: capitalize !important;
+}
+</style>

package/src/components/DlSelect/index.ts

@@ -0,0 +1,4 @@
+import DlSelect from './DlSelect.vue'
+import SelectOption from './SelectOption.vue'
+
+export { DlSelect, SelectOption }

package/src/components/DlSelect/utils.ts

@@ -0,0 +1,43 @@
+import { TInputSizes } from '../../utils/input-sizes'
+
+export type SelectOptionType = string | number | Record<string, any>
+
+export const getLabel = (option: any) => {
+    if (typeof option === 'object' && 'label' in option) {
+        return option.label
+    }
+
+    return option
+}
+
+const ICON_SIZES = {
+    s: '12px',
+    m: '14px',
+    l: '16px'
+}
+
+export const getLabelOfSelectedOption = (
+    valueToSearch: string,
+    options: SelectOptionType[]
+) => {
+    if (options.length === 0) return ''
+
+    if (typeof options[0] === 'string') {
+        return options.find((opt) => opt === valueToSearch)
+    }
+
+    return (options.find((opt: any) => opt.value === valueToSearch) as any)
+        .label
+}
+
+export const getIconSize = (size: TInputSizes) => ICON_SIZES[size] ?? '14px'
+
+export const optionsValidator = (opts: SelectOptionType[]) => {
+    return opts.every((opt: string | any) => {
+        if (typeof opt === 'string' || typeof opt === 'number') {
+            return true
+        }
+        const keys = Object.keys(opt)
+        return keys.includes('value') && keys.includes('label')
+    })
+}

package/src/components/DlSkeleton.vue

@@ -0,0 +1,72 @@
+<template>
+    <div
+        :id="uuid"
+        class="skeleton-box"
+        :style="`width: ${width}; height: ${height}; margin: ${margin};`"
+    />
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlSkeleton',
+    props: {
+        width: { required: false, default: '100%', type: String },
+        height: { required: false, default: '100%', type: String },
+        margin: { required: false, default: '0 auto', type: String }
+    },
+    setup: () => {
+        return {
+            uuid: `dl-skeleton-${v4()}`
+        }
+    },
+    template: 'dl-skeleton'
+})
+</script>
+
+<style scoped lang="css">
+.skeleton-box {
+    position: relative;
+    overflow: hidden;
+    background-color: #24282d;
+}
+.skeleton-box::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0,
+        rgba(255, 255, 255, 0.2) 20%,
+        rgba(255, 255, 255, 0.5) 60%,
+        rgba(255, 255, 255, 0)
+    );
+    animation: shimmer 2s infinite;
+    content: '';
+}
+@-moz-keyframes shimmer {
+    100% {
+        transform: translateX(100%);
+    }
+}
+@-webkit-keyframes shimmer {
+    100% {
+        transform: translateX(100%);
+    }
+}
+@-o-keyframes shimmer {
+    100% {
+        transform: translateX(100%);
+    }
+}
+@keyframes shimmer {
+    100% {
+        transform: translateX(100%);
+    }
+}
+</style>

package/src/components/DlSlider/DlSlider.vue

@@ -0,0 +1,243 @@
+<template>
+    <div
+        :id="uuid"
+        class="slider-content"
+        :style="sliderStyles"
+    >
+        <div
+            v-if="editable"
+            class="slider editable"
+            data-test="editable-slider"
+        >
+            <span class="text capitalize">{{ text }}</span>
+            <dl-slider-input
+                v-model="sliderValue"
+                :min="min"
+                :max="max"
+                :readonly="readonly"
+                :disabled="disabled"
+                :style="{ marginRight: '10px' }"
+                data-test="editable-slider-input"
+            />
+            <div class="slider-bar-container">
+                <dl-slider-base
+                    v-model.number="sliderValue"
+                    :min="min"
+                    :max="max"
+                    :step="step"
+                    :color="color"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :snap="snap"
+                    :tabindex="tabindex"
+                    :name="name"
+                />
+            </div>
+        </div>
+        <div
+            v-else
+            class="slider non-editable"
+            data-test="non-editable-slider"
+        >
+            <div class="header">
+                <div class="row text capitalize">
+                    {{ text }}
+                    <dl-icon
+                        v-if="hint"
+                        icon="icon-dl-info"
+                        size="12px"
+                        style="margin-left: 5px"
+                    >
+                        <dl-tooltip>
+                            {{ hint }}
+                        </dl-tooltip>
+                    </dl-icon>
+                </div>
+                <div class="right-container capitalize">
+                    <dl-button
+                        flat
+                        size="m"
+                        label="Reset"
+                        :disabled="disabled || readonly"
+                        data-test="non-editable-slider-btn"
+                        @click="handleResetButtonClick"
+                    />
+                    <dl-slider-input
+                        id="slider-input"
+                        v-model="sliderValue"
+                        :min="min"
+                        :max="max"
+                        :readonly="readonly"
+                        :disabled="disabled"
+                        data-test="non-editable-slider-input"
+                        @change="handleChange"
+                    />
+                </div>
+            </div>
+            <div class="slider-bar-container">
+                <dl-slider-base
+                    v-model.number="sliderValue"
+                    :min="min"
+                    :max="max"
+                    :step="step"
+                    :color="color"
+                    :readonly="readonly"
+                    :disabled="disabled"
+                    :snap="snap"
+                    :name="name"
+                    @change="handleChange"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlSliderBase, DlSliderInput } from './components/'
+import { DlButton, DlIcon, DlTooltip } from '..'
+import { getColor, between } from '../../utils'
+import { v4 } from 'uuid'
+
+export default defineComponent({
+    name: 'DlSlider',
+    components: {
+        DlSliderBase,
+        DlButton,
+        DlSliderInput,
+        DlTooltip,
+        DlIcon
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:model-value'
+    },
+    props: {
+        width: {
+            type: String,
+            default: '100%'
+        },
+        color: {
+            type: String,
+            default: 'dl-color-secondary'
+        },
+        textColor: {
+            type: String,
+            default: 'dl-color-darker'
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        editable: {
+            type: Boolean,
+            default: false
+        },
+        min: {
+            type: Number,
+            default: 0
+        },
+        max: {
+            type: Number,
+            default: 100
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        snap: {
+            type: Boolean,
+            default: false
+        },
+        step: {
+            type: Number,
+            default: 1
+        },
+        tabindex: {
+            type: [String, Number],
+            default: '0'
+        },
+        text: {
+            type: String,
+            required: true
+        },
+        modelValue: {
+            type: Number,
+            default: null,
+            validator: (v: number | null) => typeof v === 'number' || v === null
+        },
+        name: {
+            type: String,
+            default: null
+        },
+        hint: {
+            type: String,
+            default: null,
+            required: false
+        }
+    },
+    emits: ['update:model-value', 'change'],
+    data() {
+        const val =
+            this.modelValue === null
+                ? this.min
+                : between(this.modelValue, this.min, this.max)
+
+        return {
+            uuid: `dl-slider-${v4()}`,
+            initialValue: val,
+            value: val,
+            displaySliderInput: false
+        }
+    },
+    computed: {
+        valueUpdate(): string {
+            return `${this.modelValue}|${this.min}|${this.max}`
+        },
+        sliderValue: {
+            get(): number {
+                return this.value
+            },
+            set(val: number | string): void {
+                this.$emit(
+                    'update:model-value',
+                    typeof val === 'number' ? val : null
+                )
+            }
+        },
+        sliderStyles(): Record<string, any> {
+            return {
+                '--text-color': getColor(this.textColor, 'dl-color-darker'),
+                '--width': this.width,
+                '--color': getColor(this.color, 'dl-color-secondary')
+            }
+        }
+    },
+    watch: {
+        valueUpdate() {
+            this.value =
+                this.modelValue === null
+                    ? this.min
+                    : between(this.modelValue, this.min, this.max)
+        }
+    },
+    methods: {
+        handleChange(value: string) {
+            this.$emit('change', value)
+        },
+        handleResetButtonClick() {
+            if (this.value === this.initialValue) return
+
+            this.sliderValue = this.initialValue
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+@import './sliderStyles.scss';
+
+.dl-button {
+    padding: 0;
+}
+</style>