@dataloop-ai/components 0.13.0

package/src/components/DlTabs/DlTab.vue

@@ -0,0 +1,146 @@
+<template>
+    <div
+        :id="uuid"
+        role="tab"
+        :tabindex="disabled ? -1 : tabindex"
+        flat
+        :class="classNames"
+        :style="cssFontSize"
+        @click="onClick"
+        @keydown="onKeydown"
+        @keyup="onKeyup"
+    >
+        {{ label }}
+        <span>
+            <dl-icon
+                v-if="showTooltip"
+                size="12px"
+                icon="icon-dl-info"
+                class="info-icon"
+            />
+            <dl-tooltip v-if="showTooltip === true">
+                {{ tooltip }}
+            </dl-tooltip>
+        </span>
+    </div>
+</template>
+<script lang="ts">
+import DlTooltip from '../DlTooltip.vue'
+import DlIcon from '../DlIcon.vue'
+import { defineComponent } from 'vue-demi'
+import { stopAndPrevent } from '../../utils'
+import { v4 } from 'uuid'
+
+export default defineComponent({
+    name: 'DlTab',
+    components: {
+        DlTooltip,
+        DlIcon
+    },
+    props: {
+        label: { type: String, required: true },
+        name: { type: String, required: true },
+        isActive: { type: Boolean, default: false },
+        noCaps: { type: Boolean, default: false },
+        disabled: { type: Boolean, default: false },
+        vertical: { type: Boolean, default: false },
+        showTooltip: { type: Boolean, default: false },
+        tooltip: { type: String, default: null },
+        tabindex: { type: String, default: '0' },
+        fontSize: { type: String, default: '12px' }
+    },
+    emits: ['click'],
+    data() {
+        return {
+            uuid: `dl-tab-${v4()}`
+        }
+    },
+    computed: {
+        cssFontSize(): Record<string, string> {
+            return {
+                '--dl-tab-font-size': this.fontSize
+            }
+        },
+        classNames(): string {
+            let classes = 'dl-tab'
+
+            if (this.vertical) {
+                classes = classes + ' dl-tab--vertical'
+            } else {
+                classes = classes + ' dl-tab--simple'
+            }
+
+            if (this.isActive) {
+                classes = classes + ' dl-tab--active'
+            }
+
+            if (this.disabled) {
+                classes = classes + ' dl-tab--disabled'
+            }
+            return classes
+        }
+    },
+    methods: {
+        onClick(e: Event) {
+            if (!this.disabled) {
+                this.$emit('click', this.name, 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)
+            }
+        }
+    }
+})
+</script>
+<style scoped lang="scss">
+.dl-tab {
+    padding: 12px 16px;
+    color: var(--dl-color-lighter);
+    transition: all 200ms;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    &--active {
+        color: var(--dl-color-secondary);
+        border-color: var(--dl-color-secondary) !important;
+        cursor: default;
+    }
+    &--simple {
+        font-size: var(--dl-tab-font-size);
+        border-bottom: 1px solid var(--dl-color-separator);
+        &.active {
+            border-color: var(--dl-color-secondary);
+        }
+    }
+    &--vertical {
+        padding: 5px 10px;
+        font-size: var(--dl-tab-font-size);
+        line-height: 14px;
+        &:not(:last-child) {
+            border-right: 1px solid var(--dl-color-separator);
+        }
+    }
+    &--disabled {
+        cursor: not-allowed;
+        color: var(--dl-color-disabled);
+        border-color: var(--dl-color-separator) !important;
+        &:hover {
+            color: var(--dl-color-disabled) !important;
+        }
+    }
+    &:hover {
+        color: var(--dl-color-hover);
+        border-color: var(--dl-color-hover);
+    }
+    cursor: pointer;
+    flex-grow: 1;
+}
+</style>

package/src/components/DlTabs/DlTabs.vue

@@ -0,0 +1,192 @@
+<template>
+    <tabs-wrapper
+        :id="uuid"
+        :is-scrollable="isOverflowing"
+        :is-at-end="isAtEnd"
+        :is-at-start="isAtStart"
+        :is-vertical="vertical"
+        @left-arrow-click="handleLeft"
+        @right-arrow-click="handleRight"
+    >
+        <div
+            ref="dlTabsRef"
+            class="dl-tabs-container"
+            :class="{ 'full-width': fullWidth }"
+            role="tablist"
+        >
+            <dl-tab
+                v-for="(item, index) in items"
+                :key="index"
+                :name="item.name"
+                :vertical="vertical"
+                :label="item.label"
+                :show-tooltip="item.showTooltip"
+                :tooltip="item.tooltip"
+                :disabled="disabled || item.disabled"
+                :no-caps="item.noCaps"
+                :is-active="modelValue === item.name"
+                :font-size="fontSize"
+                @click="handleTabClick"
+            />
+        </div>
+    </tabs-wrapper>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent, PropType } from 'vue-demi'
+import { hasOverflowing } from '../../utils'
+import { DlTab } from './'
+import TabsWrapper from './TabsWrapper.vue'
+import type { TabDetails } from './types'
+
+export default defineComponent({
+    name: 'DlTabs',
+    components: {
+        TabsWrapper,
+        DlTab
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:model-value'
+    },
+    props: {
+        items: { type: Array as PropType<TabDetails[]>, required: true },
+        vertical: { type: Boolean, default: false },
+        fullWidth: { type: Boolean, default: false },
+        disabled: { type: Boolean, default: false },
+        modelValue: { type: String, required: true },
+        fontSize: { type: String, default: '12px' }
+    },
+    emits: ['update:model-value'],
+    data() {
+        return {
+            uuid: `dl-tabs-${v4()}`,
+            isOverflowing: false,
+            isAtStart: true,
+            isAtEnd: false,
+            children: [] as HTMLElement[],
+            invisibleLeftIndex: 0,
+            invisibleRightIndex: 0
+        }
+    },
+    computed: {
+        // @ts-ignore
+        resizeObserver(): ResizeObserver | undefined {
+            // @ts-ignore
+            if (typeof ResizeObserver !== 'undefined') {
+                // @ts-ignore
+                return new ResizeObserver((entries) => {
+                    for (const entry of entries) {
+                        if (entry.contentBoxSize) {
+                            this.isOverflowing = hasOverflowing(
+                                this.$refs.dlTabsRef as HTMLElement
+                            )
+                            this.updatePosition()
+                            this.initTabs()
+                        }
+                    }
+                })
+            }
+
+            return undefined
+        }
+    },
+    mounted() {
+        const element = this.$refs.dlTabsRef as HTMLElement
+        this.resizeObserver?.observe(element)
+        element?.addEventListener('scroll', this.updatePosition)
+    },
+    unmounted() {
+        this.unsubscribeListeners()
+    },
+    methods: {
+        handleTabClick(newSelectedTab: string, e: Event) {
+            this.$emit('update:model-value', newSelectedTab, e)
+        },
+        handleScroll(e: Event | undefined) {
+            this.updatePosition()
+        },
+        unsubscribeListeners() {
+            (this.$refs.dlTabsRef as HTMLElement)?.removeEventListener(
+                'scroll',
+                this.handleScroll
+            )
+            this.resizeObserver?.disconnect()
+        },
+        initTabs() {
+            const element = this.$refs.dlTabsRef as HTMLElement
+
+            Array.from(element.children).forEach((children: Element) => {
+                this.children.push(children as HTMLElement)
+            })
+
+            this.invisibleLeftIndex = 0
+        },
+        handleLeft() {
+            this.children[this.invisibleLeftIndex].scrollIntoView({
+                block: 'nearest',
+                inline: 'start'
+            })
+            this.updatePosition()
+        },
+        handleRight() {
+            this.children[this.invisibleRightIndex].scrollIntoView({
+                block: 'nearest',
+                inline: 'end'
+            })
+            this.updatePosition()
+        },
+        updatePosition() {
+            const element = this.$refs.dlTabsRef as HTMLElement
+
+            const lastLeft = this.children.findIndex((child, index) => {
+                return child.offsetLeft >= element.scrollLeft
+            })
+            this.invisibleLeftIndex = lastLeft === -1 ? 0 : lastLeft - 1
+
+            const lastRight = this.children.findIndex(
+                (child) =>
+                    child.offsetLeft >
+                    element.scrollLeft + element.clientWidth + 1
+            )
+            this.invisibleRightIndex =
+                lastRight === -1 ? this.children.length - 1 : lastRight - 1
+
+            if (element.scrollLeft < 1) {
+                this.isAtStart = true
+            } else {
+                this.isAtStart = false
+            }
+            if (
+                element.offsetWidth + element.scrollLeft ===
+                element.scrollWidth
+            ) {
+                this.isAtEnd = true
+            } else {
+                this.isAtEnd = false
+            }
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-tabs-container {
+    position: relative;
+    text-align: center;
+    display: flex;
+    overflow: -moz-hidden-unscrollable;
+    justify-content: stretch;
+    overflow-x: scroll;
+    scroll-behavior: smooth;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+.full-width {
+    width: 100%;
+}
+</style>

package/src/components/DlTabs/TabsWrapper.vue

@@ -0,0 +1,104 @@
+<template>
+    <div
+        :class="['tabs-wrapper', { scrollable: isScrollable }]"
+        :style="cssVars"
+    >
+        <dl-button
+            v-if="isScrollable"
+            size="l"
+            flat
+            :disabled="isAtStart"
+            data-qa="left-arrow-button"
+            class="arrow-button"
+            text-color="dl-color-darker"
+            @click="handleLeftArrowClick"
+        >
+            <dl-icon
+                icon="icon-dl-left-chevron"
+                size="16px"
+            />
+        </dl-button>
+        <slot class="tabs" />
+        <dl-button
+            v-if="isScrollable"
+            size="l"
+            data-qa="right-arrow-button"
+            text-color="dl-color-darker"
+            flat
+            :disabled="isAtEnd"
+            class="arrow-button"
+            @click="handleRightArrowClick"
+        >
+            <dl-icon
+                icon="icon-dl-right-chevron"
+                size="16px"
+            />
+        </dl-button>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlButton } from '../DlButton'
+import DlIcon from '../DlIcon.vue'
+
+export default defineComponent({
+    components: {
+        DlButton,
+        DlIcon
+    },
+    props: {
+        isScrollable: { type: Boolean, default: false },
+        isVertical: { type: Boolean, default: false },
+        isAtStart: { type: Boolean, default: true },
+        isAtEnd: { type: Boolean, default: false }
+    },
+    emits: ['left-arrow-click', 'right-arrow-click'],
+    computed: {
+        cssVars(): string {
+            return `
+                --dl-tabs-arrows-size: ${this.isVertical ? '24px' : '40px'}
+            `
+        }
+    },
+    methods: {
+        handleLeftArrowClick(e: Event) {
+            if (this.isAtStart === false) {
+                this.$emit('left-arrow-click', e)
+            }
+        },
+        handleRightArrowClick(e: Event) {
+            if (this.isAtEnd === false) {
+                this.$emit('right-arrow-click', e)
+            }
+        }
+    }
+})
+</script>
+<style scoped lang="scss">
+.tabs-wrapper {
+    max-width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.tabs {
+    flex-grow: 1;
+}
+
+::v-deep .dl-button {
+    padding: 0px;
+
+    &:disabled {
+        pointer-events: none;
+    }
+}
+
+::v-deep .dl-btn-content {
+    padding-top: 1px;
+    min-height: var(--dl-tabs-arrows-size);
+    width: var(--dl-tabs-arrows-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>

package/src/components/DlTabs/index.ts

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

package/src/components/DlTabs/types.ts

@@ -0,0 +1,8 @@
+export interface TabDetails {
+    label: string
+    name: string
+    noCaps?: boolean
+    disabled?: boolean
+    showTooltip?: boolean
+    tooltip?: string
+}

package/src/components/DlTextArea.vue

@@ -0,0 +1,151 @@
+<template>
+    <div
+        :id="uuid"
+        class="container"
+        :style="cssVars"
+    >
+        <textarea
+            :value="modelValue"
+            class="textarea"
+            :placeholder="placeholder"
+            :maxlength="maxLength"
+            :disabled="disabled"
+            :class="!enableResize ? 'textarea-disable-resize' : ''"
+            @input="onChange"
+            @focus="onFocus"
+            @blur="onBlur"
+        />
+        <span v-show="showCounter">
+            {{ modelValue.length
+            }}{{ maxLength && maxLength > 0 ? `/${maxLength}` : null }}
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlTextArea',
+    model: {
+        prop: 'modelValue',
+        event: 'update:model-value'
+    },
+    props: {
+        modelValue: {
+            type: String,
+            default: ''
+        },
+        maxLength: {
+            type: Number,
+            default: null
+        },
+        width: {
+            type: String,
+            default: 'auto'
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        placeholder: {
+            type: String,
+            default: ''
+        },
+        showCounter: {
+            type: Boolean,
+            default: false
+        },
+        enableResize: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['input', 'focus', 'blur', 'update:model-value'],
+    data() {
+        return {
+            uuid: `dl-text-area-${v4()}`
+        }
+    },
+    computed: {
+        cssVars(): Record<string, string> {
+            return {
+                '--dl-textarea-width': this.width || 'auto'
+            }
+        }
+    },
+    methods: {
+        onChange(e: any) {
+            this.$emit('input', e.target.value, e)
+            this.$emit('update:model-value', e.target.value)
+        },
+        onFocus(e: InputEvent) {
+            this.$emit('focus', e)
+        },
+        onBlur(e: InputEvent) {
+            this.$emit('blur', e)
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    width: max-content;
+    max-width: 100%;
+}
+
+.textarea {
+    background: none;
+    border: 1px solid var(--dl-color-separator);
+    border-radius: 2px;
+    padding: 10px;
+    font-family: 'Roboto', sans-serif;
+    font-size: var(--dl-font-size-body);
+    width: var(--dl-textarea-width);
+    min-width: 100px;
+    max-width: 100%;
+    min-height: 80px;
+    max-height: 120px;
+    outline: none;
+    color: var(--dl-color-darker);
+
+    &:hover {
+        border-color: var(--dl-color-hover);
+    }
+
+    &:focus {
+        border-color: var(--dl-color-secondary);
+    }
+
+    &:disabled {
+        border-color: var(--dl-color-disabled);
+        color: var(--dl-color-disabled);
+        cursor: not-allowed;
+        user-select: none;
+    }
+
+    &::placeholder {
+        color: var(--dl-color-lighter);
+        opacity: 1;
+    }
+
+    &:disabled::placeholder {
+        color: rgba(0, 0, 0, 0);
+    }
+
+    &-disable-resize {
+        resize: none;
+    }
+}
+
+span {
+    margin-top: 3px;
+    font-size: var(--dl-font-size-body);
+    color: var(--dl-color-darker);
+}
+</style>

package/src/components/DlTextHolder.vue

@@ -0,0 +1,65 @@
+<template>
+    <span
+        :id="uuid"
+        class="dl-text-holder"
+    >
+        <span v-if="prefix">{{ prefixPreview }}</span>
+        <span class="dl-text-holder--value">
+            <slot> {{ textPreview }} </slot>
+        </span>
+        <span v-if="suffix"> {{ suffixPreview }}</span>
+    </span>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlTextHolder',
+    props: {
+        prefix: {
+            type: String,
+            default: null
+        },
+        suffix: {
+            type: String,
+            default: null
+        },
+        text: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            uuid: `dl-text-holder-${v4()}`
+        }
+    },
+    computed: {
+        prefixPreview(): string {
+            return this.prefix?.trim() ?? ''
+        },
+        suffixPreview(): string {
+            return this.suffix?.trim() ?? ''
+        },
+        textPreview(): string {
+            return this.text
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-text-holder {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+
+    &--value {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+</style>