@dataloop-ai/components 0.13.0

package/src/components/DlAccordion/DlAccordion.vue

@@ -0,0 +1,108 @@
+<template>
+    <div
+        :id="uuid"
+        :class="identifierClass"
+        class="accordion"
+    >
+        <accordion-header
+            :additional-info="additionalInfo"
+            :default-opened="defaultOpened"
+            :title="title"
+            :font-size="fontSize"
+            :title-color="titleColor"
+            :right-side="rightSide"
+            :is-open="isOpen"
+            data-test-id="accordion-header"
+            @click="handleClick"
+        >
+            <template
+                v-if="hasHeaderSlot"
+                #header
+            >
+                <slot name="header" />
+            </template>
+        </accordion-header>
+        <div
+            ref="dlAccordionContent"
+            class="accordion-content"
+            :class="{ closed: !isOpen, 'right-side': rightSide }"
+        >
+            <slot v-if="isOpen" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import AccordionHeader from './AccordionHeader.vue'
+import { defineComponent } from 'vue-demi'
+import { v4 } from 'uuid'
+
+export default defineComponent({
+    name: 'DlAccordion',
+    components: {
+        AccordionHeader
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:model-value'
+    },
+    props: {
+        additionalInfo: { type: String!, default: '' },
+        defaultOpened: { type: Boolean, default: false },
+        title: { type: String, default: null },
+        fontSize: { type: String, default: '12px' },
+        titleColor: { type: String, default: 'dl-color-medium' },
+        modelValue: { type: Boolean, default: null },
+        rightSide: { type: Boolean, default: false }
+    },
+    emits: ['update:model-value', 'hide', 'show'],
+    data() {
+        return {
+            uuid: `dl-accordion-${v4()}`,
+            isOpen:
+                this.modelValue === null ? this.defaultOpened : this.modelValue
+        }
+    },
+    computed: {
+        identifierClass(): string {
+            return `dl-accordion-${this.title ?? ''}`.replaceAll(' ', '-')
+        },
+        hasHeaderSlot(): boolean {
+            return this.$slots.header !== undefined
+        }
+    },
+    methods: {
+        handleClick() {
+            if (this.modelValue !== null) {
+                this.$emit('update:model-value', !this.isOpen)
+            }
+            this.$emit(this.isOpen === true ? 'hide' : 'show')
+            this.isOpen = !this.isOpen
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.accordion {
+    max-width: 100%;
+}
+.accordion-content {
+    text-align: left;
+    font-size: var(--dl-font-size-body);
+    transition: all 300ms;
+    line-height: 16px;
+    padding: 0 16px 15px 38px;
+    color: var(--dl-color-darker);
+    border-bottom: 1px solid var(--dl-color-separator);
+    max-height: fit-content;
+    overflow: hidden;
+    &.right-side {
+        padding: 0 38px 16px 16px;
+    }
+    &.closed {
+        border-color: transparent;
+        padding-bottom: 0;
+    }
+}
+</style>

package/src/components/DlAccordion/index.ts

@@ -0,0 +1,2 @@
+import DlAccordion from './DlAccordion.vue'
+export { DlAccordion }

package/src/components/DlAlert.vue

@@ -0,0 +1,227 @@
+<template>
+    <div
+        v-if="show"
+        :id="uuid"
+        ref="rootRef"
+        class="root"
+        :style="rootStyle"
+        data-test="root"
+    >
+        <div>
+            <div
+                :style="iconStyle"
+                data-test="icon"
+            >
+                <dl-icon
+                    :icon="icon"
+                    :color="iconColor"
+                    size="16px"
+                />
+            </div>
+            <span
+                class="text"
+                :style="textStyle"
+            ><slot v-if="!text" /> <span v-else> {{ text }}</span></span>
+        </div>
+        <div
+            v-if="closable"
+            class="close-btn"
+            data-test="close-btn"
+        >
+            <dl-icon
+                class="close-btn-icon"
+                data-test="close-btn-icon"
+                icon="icon-dl-close"
+                :color="iconColor"
+                size="8px"
+                @click="handleClose"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { computed, defineComponent, onMounted, Ref, ref, watch } from 'vue-demi'
+import { getColor, includes } from '../utils'
+import { DlIcon } from './'
+
+type AlertType = 'info' | 'success' | 'warning' | 'error'
+
+const typeToIconMap: Record<AlertType, string> = {
+    info: 'icon-dl-info-filled',
+    success: 'icon-dl-approve-filled',
+    warning: 'icon-dl-alert-filled',
+    error: 'icon-dl-alert-filled'
+}
+
+const typeToIconColorMap: Record<AlertType, string> = {
+    info: 'dl-color-info',
+    success: 'dl-color-positive',
+    warning: 'dl-color-warning',
+    error: 'dl-color-negative'
+}
+
+const typeToBackgroundMap: Record<AlertType, string> = {
+    info: 'dl-color-info-background',
+    success: 'dl-color-positive-background',
+    warning: 'dl-color-warning-background',
+    error: 'dl-color-negative-background'
+}
+
+export default defineComponent({
+    name: 'DlAlert',
+    components: {
+        DlIcon
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:model-value'
+    },
+    props: {
+        modelValue: {
+            type: Boolean,
+            default: true
+        },
+        type: {
+            type: String,
+            default: 'success',
+            validator: (value: string) =>
+                includes(['info', 'success', 'warning', 'error'], value)
+        },
+        textColor: {
+            type: String,
+            default: 'dl-color-darker'
+        },
+        fluid: {
+            type: Boolean,
+            default: false
+        },
+        closable: {
+            type: Boolean,
+            default: false
+        },
+        text: {
+            type: String,
+            default: null
+        }
+    },
+    emits: ['update:model-value'],
+    setup(props, { emit }) {
+        const show = ref(props.modelValue)
+        const type = props.type as AlertType
+        const icon = computed(() => typeToIconMap[type])
+        const iconColor = computed(() => typeToIconColorMap[type])
+        const textStyle = computed(() => ({
+            color: getColor(props.textColor, 'dl-color-darker')
+        }))
+
+        const rootRef = ref(null)
+        const rootStyle = ref()
+        const iconStyle = ref()
+
+        onMounted(() => {
+            normalizeStyles(props.fluid)
+        })
+
+        watch(
+            () => props.modelValue,
+            (val) => {
+                show.value = val
+            }
+        )
+
+        watch(
+            [() => props.fluid, () => props.text, () => props.closable],
+            ([fluid]) => {
+                normalizeStyles(fluid)
+            }
+        )
+
+        function normalizeStyles(fluid?: boolean) {
+            const { height } = (
+                rootRef as Ref<HTMLElement | null>
+            ).value!.getBoundingClientRect()
+
+            const iconS: Record<string, any> = {
+                display: 'flex'
+            }
+
+            const rootS: Record<string, any> = {
+                backgroundColor: getColor(typeToBackgroundMap[type])
+            }
+
+            if (height > 36) {
+                iconS.alignSelf = 'flex-start'
+            } else {
+                iconS.alignSelf = 'center'
+            }
+
+            if (fluid === true) {
+                rootS.width = '100%'
+            } else {
+                rootS.width = 'fit-content'
+            }
+
+            iconStyle.value = iconS
+            rootStyle.value = rootS
+        }
+
+        function handleClose() {
+            show.value = false
+            emit('update:model-value', false)
+        }
+
+        return {
+            uuid: `dl-alert-${v4()}`,
+            rootRef,
+            show,
+            icon,
+            iconColor,
+            rootStyle,
+            iconStyle,
+            textStyle,
+            handleClose
+        }
+    },
+    template: 'dl-alert'
+})
+</script>
+
+<style scoped lang="scss">
+.root {
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: space-between;
+    min-height: 36px;
+    border-radius: 2px;
+    box-sizing: border-box;
+
+    > div {
+        display: flex;
+        flex-direction: row;
+        padding: 10px;
+    }
+
+    .text {
+        display: flex;
+        text-align: left;
+        padding-left: 10px;
+        font-size: var(--dl-font-size-body);
+        align-self: center;
+        word-break: break-word;
+    }
+
+    .close-btn {
+        padding: 5px 5px 0 0;
+    }
+
+    .icon-dl-close:hover {
+        cursor: pointer;
+    }
+
+    .close-btn-icon:hover {
+        cursor: pointer;
+    }
+}
+</style>

package/src/components/DlAvatar.vue

@@ -0,0 +1,99 @@
+<template>
+    <div
+        :id="uuid"
+        class="avatar"
+        :style="cssVars"
+        @click="handleClick"
+    >
+        <span class="avatar-content">
+            <span v-if="name">
+                {{ computedLetters }}
+            </span>
+            <slot v-else />
+            <dl-tooltip v-if="tooltip">
+                {{ tooltip }}
+            </dl-tooltip>
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import DlTooltip from './DlTooltip.vue'
+import { getColor } from '../utils'
+import { v4 } from 'uuid'
+
+export default defineComponent({
+    components: {
+        DlTooltip
+    },
+    props: {
+        textColor: { type: String, default: 'dl-color-white' },
+        color: { type: String, default: 'dl-color-secondary' },
+        size: { type: String, default: '20px' },
+        name: { type: String, default: null },
+        tooltip: { type: String, default: null }
+    },
+    data() {
+        return {
+            uuid: `dl-avatar-${v4()}`
+        }
+    },
+    computed: {
+        computedLetters(): string {
+            const firstLetters = this.name
+                .split(' ')
+                .map((w) => w[0])
+                .join('')
+            if (firstLetters.length === 1) {
+                return firstLetters[0]
+            }
+            return `${firstLetters[0]}${firstLetters[firstLetters.length - 1]}`
+        },
+        cssVars(): Record<string, string> {
+            return {
+                '--dl-avatar-bg-color': getColor(
+                    this.color,
+                    'dl-color-secondary'
+                ),
+                '--dl-avatar-text-color': getColor(
+                    this.textColor,
+                    'dl-color-white'
+                ),
+                '--dl-avatar-size': this.size
+            }
+        }
+    },
+    methods: {
+        handleClick(e: MouseEvent) {
+            this.$emit('click', e)
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.avatar {
+    width: var(--dl-avatar-size);
+    height: var(--dl-avatar-size);
+    border-radius: 50%;
+    user-select: none;
+    overflow: hidden;
+    color: var(--dl-avatar-text-color);
+    background-color: var(--dl-avatar-bg-color);
+    &::v-deep img {
+        height: var(--dl-avatar-size);
+        width: var(--dl-avatar-size);
+    }
+}
+
+.avatar-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: calc(var(--dl-avatar-size) / 10 * 6);
+    line-height: 1;
+}
+</style>

package/src/components/DlBadge.vue

@@ -0,0 +1,127 @@
+<template>
+    <div
+        :id="uuid"
+        :class="classes"
+        :style="style"
+        role="status"
+    >
+        <slot v-if="hasSlot" />
+        <span v-else>{{ label }}</span>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { computed } from 'vue-demi'
+import { defineComponent } from 'vue-demi'
+
+const alignValues = ['top', 'middle', 'bottom']
+
+export default defineComponent({
+    props: {
+        color: { type: String, default: 'var(--dl-color-negative)' },
+        textColor: { type: String, default: 'var(--dl-color-text-buttons)' },
+
+        floating: { type: Boolean, default: false },
+        transparent: { type: Boolean, default: false },
+        multiline: { type: Boolean, default: false },
+        outline: { type: Boolean, default: false },
+        rounded: { type: Boolean, default: true },
+
+        label: { type: String, default: null },
+
+        align: {
+            type: String,
+            default: null,
+            validator: (v: string) => alignValues.includes(v)
+        }
+    },
+
+    setup(props, { slots }) {
+        const hasSlot = computed(() => slots.default)
+
+        const style = computed(() => {
+            return {
+                verticalAlign: props.align !== void 0 ? props.align : null,
+                aspectRatio: hasSlot.value || props.label ? '' : '1/1',
+                padding:
+                    hasSlot.value || props.label
+                        ? `3px ${props.multiline ? '8px' : ''}`
+                        : '',
+                '--dl-color-badge': props.color,
+                '--dl-color-badge-text': props.textColor
+            }
+        })
+
+        const classes = computed(() => {
+            const text =
+                props.outline === true
+                    ? props.color || props.textColor
+                    : props.textColor
+
+            return (
+                'dl-badge flex inline items-center no-wrap' +
+                ` dl-badge--${
+                    props.multiline === true ? 'multi' : 'single'
+                }-line` +
+                (props.outline === true
+                    ? ' dl-badge--outline'
+                    : props.color !== void 0
+                    ? ` bg-${props.color}`
+                    : '') +
+                (text !== void 0 ? ` text-${text}` : '') +
+                (props.floating === true ? ' dl-badge--floating' : '') +
+                (props.rounded === true ? ' dl-badge--rounded' : '') +
+                (props.transparent === true ? ' dl-badge--transparent' : '')
+            )
+        })
+
+        return {
+            uuid: `dl-badge-${v4()}`,
+            classes,
+            style,
+            hasSlot
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-badge {
+    background-color: var(--dl-color-badge);
+    color: var(--dl-color-badge-text);
+    border-radius: 2px;
+    font-size: 12px;
+    line-height: 12px;
+    min-height: 12px;
+    font-weight: normal;
+    vertical-align: baseline;
+
+    &--single-line {
+        white-space: nowrap;
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    &--multi-line {
+        word-break: break-all;
+        word-wrap: break-word;
+    }
+    &--floating {
+        position: absolute;
+        top: -4px;
+        right: -3px;
+        cursor: inherit;
+    }
+    &--transparent {
+        opacity: 0.8;
+    }
+    &--outline {
+        background-color: transparent;
+        border: 1px solid var(--dl-color-badge);
+    }
+    &--rounded {
+        border-radius: 1em;
+    }
+}
+</style>