@dataloop-ai/components 0.18.0 → 0.18.2

package/src/components/compound/DlThumbnailGallery/DlThumbnailGallery.vue

@@ -0,0 +1,268 @@
+<template>
+    <div class="slider-wrapper">
+        <div
+            :style="imageContainerStyles"
+            class="slider"
+        >
+            <div class="slider__arrow">
+                <div
+                    :class="getChevronClass('left')"
+                    @mousedown="navigateBackward"
+                >
+                    <dl-icon
+                        color="--dl-color-darker"
+                        size="24px"
+                        icon="icon-dl-left-chevron"
+                        :inline="false"
+                    />
+                </div>
+            </div>
+
+            <div
+                ref="images"
+                class="slider__images"
+            >
+                <div
+                    v-for="image in currentImages"
+                    :key="image.src"
+                    :class="getImageClass(image.src)"
+                    :style="getImageOutline(image.src)"
+                    @mousedown="handleThumbnailMousedown(image)"
+                >
+                    <div class="slider__images--status">
+                        <dl-icon
+                            v-if="image.status"
+                            size="16px"
+                            color="dl-color-darker"
+                            :icon="getStatusIcon(image.status)"
+                        />
+                    </div>
+                    <img
+                        :src="image.src"
+                        @error="handleImageError"
+                    >
+                    <dl-tooltip>{{ image.name }}</dl-tooltip>
+                </div>
+            </div>
+
+            <div class="slider__arrow">
+                <div
+                    :class="getChevronClass('right')"
+                    @mousedown="navigateForward"
+                >
+                    <dl-icon
+                        size="24px"
+                        icon="icon-dl-right-chevron"
+                        :inline="false"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import { DlIcon } from '../../essential'
+import { DlTooltip } from '../../shared'
+import { DlThumbnail, statusColors } from './types'
+
+export default defineComponent({
+    components: {
+        DlIcon,
+        DlTooltip
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
+    },
+    props: {
+        /**
+         * The currently selected image
+         */
+        modelValue: {
+            type: Object as PropType<DlThumbnail>,
+            default: null
+        },
+        /**
+         * The array of image objects to be contained in the gallery
+         */
+        images: {
+            type: Array as PropType<DlThumbnail[]>,
+            default: (): DlThumbnail[] => []
+        },
+        /**
+         * The number of thumbnails visible at once
+         */
+        visibleThumbnails: {
+            type: Number,
+            default: 10
+        },
+        /**
+         * The source of the image to be displayed when an image is unavailable
+         */
+        invalidImage: {
+            type: String,
+            default: null
+        },
+        /**
+         * The aspect ratio of the image inside each thumbnail. Available values: default, full and full-with-padding
+         */
+        aspectRatio: {
+            type: String,
+            default: 'default'
+        },
+        /**
+         * The opacity value of the white overlay on the thumbnails
+         */
+        overlayOpacity: {
+            type: Number,
+            default: 0.3
+        }
+    },
+    emits: ['update:modelValue', 'selected'],
+    data() {
+        return {
+            currentList: { first: 0, last: this.visibleThumbnails }
+        }
+    },
+    computed: {
+        imageContainerStyles(): object {
+            return {
+                '--thumbnail-size': `${100 / this.visibleThumbnails}%`,
+                '--img-object-fit':
+                    this.aspectRatio === 'full' ||
+                    this.aspectRatio === 'full-with-padding'
+                        ? 'contain'
+                        : '',
+                '--img-padding':
+                    this.aspectRatio === 'full-with-padding' ? '5px' : '',
+                '--images-min-width': `${this.currentImages.length * 70}px`,
+                '--overlay-opacity': this.overlayOpacity
+            }
+        },
+        currentImages(): DlThumbnail[] {
+            return this.images.slice(
+                this.currentList.first,
+                this.currentList.last
+            )
+        }
+    },
+    methods: {
+        navigateForward() {
+            this.currentList.first += this.visibleThumbnails
+            this.currentList.last += this.visibleThumbnails
+        },
+        navigateBackward() {
+            this.currentList.first -= this.visibleThumbnails
+            this.currentList.last -= this.visibleThumbnails
+        },
+        handleImageError(e: ErrorEvent) {
+            (e.target as HTMLImageElement).src = this.invalidImage
+        },
+        getImageOutline(image: string) {
+            return {
+                outline:
+                    image === this.modelValue?.src
+                        ? '2px solid var(--dl-color-secondary)'
+                        : '1px solid var(--dl-color-separator)'
+            }
+        },
+        getImageClass(image: string) {
+            return `slider__images--image ${
+                image !== this.modelValue?.src ? 'greyed-out' : ''
+            }`
+        },
+        getStatusIcon(status: string) {
+            return statusColors[status as keyof typeof statusColors]
+        },
+        getChevronClass(side: string) {
+            const isVisible =
+                side === 'left'
+                    ? this.currentList.first > 0
+                    : this.currentList.last <= this.images.length
+            return isVisible
+                ? 'slider__arrow--icon'
+                : 'slider__arrow--icon--invisible'
+        },
+        handleThumbnailMousedown(image: string) {
+            this.$emit('update:modelValue', image)
+            this.$emit('selected', image)
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.slider-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    width: 100%;
+}
+.slider {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 65px;
+    &__arrow {
+        display: flex;
+        align-items: center;
+        &--icon {
+            cursor: pointer;
+            background-color: var(--dl-color-text-buttons);
+            border-radius: 50%;
+            &--invisible {
+                visibility: hidden;
+                cursor: default;
+            }
+        }
+    }
+    &__images {
+        display: flex;
+        justify-content: center;
+        min-width: var(--images-min-width);
+        height: 100%;
+        padding: 0px 10px;
+        &--image {
+            position: relative;
+            border-radius: 3px;
+            margin: 0px 5px;
+            width: var(--thumbnail-size);
+            max-width: 60px;
+            max-height: 60px;
+            transition: 0.1s;
+            &:hover {
+                transform: scale(1.1);
+                outline: 1px solid var(--dl-color-hover) !important;
+            }
+            cursor: pointer;
+            background-color: var(--dl-color-text-buttons);
+            padding: var(--img-padding);
+        }
+        &--image img {
+            pointer-events: none;
+            border-radius: 3px;
+            width: 100%;
+            height: 100%;
+            object-fit: var(--img-object-fit);
+        }
+        &--status {
+            position: absolute;
+            top: 0;
+            right: 4px;
+        }
+    }
+}
+.greyed-out::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: #ffffff;
+    border-radius: 3px;
+    opacity: var(--overlay-opacity);
+}
+</style>

package/src/components/compound/DlThumbnailGallery/index.ts

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

package/src/components/compound/DlThumbnailGallery/types.ts

@@ -0,0 +1,11 @@
+export interface DlThumbnail {
+    name: string
+    src: string
+    status: string
+}
+
+export const statusColors = {
+    approve: 'icon-dl-approve-filled',
+    discard: 'icon-dl-discard-filled',
+    issue: 'icon-dl-alert-filled'
+}

package/src/components/compound/DlToast/api/useToast.ts

@@ -2,6 +2,7 @@ import { isVue3 } from 'vue-demi'
 import toastComponent from '../components/ToastComponent.vue'
 import { createComponent } from '../utils/render'
 import { v4 } from 'uuid'
+import { DlToastProps, DlToastTypes } from '../types'
 
 const state: { prevToastId: any; toasts: { [key: string]: any } } = {
     prevToastId: null,
@@ -10,7 +11,7 @@ const state: { prevToastId: any; toasts: { [key: string]: any } } = {
 
 export const useToast = (globalProps = {}) => {
     return {
-        open(options: Object | string) {
+        open(options: DlToastProps | string) {
             let message = null
             if (typeof options === 'string') message = options
 
@@ -55,6 +56,46 @@ export const useToast = (globalProps = {}) => {
                 propsData,
                 document.body
             )
+        },
+        success(options: DlToastProps | string) {
+            let props: Partial<DlToastProps> = {}
+            if (typeof options === 'string') {
+                props.message = options
+            } else {
+                props = options
+            }
+
+            this.open({ ...props, type: DlToastTypes.SUCCESS } as DlToastProps)
+        },
+        error(options: DlToastProps | string) {
+            let props: Partial<DlToastProps> = {}
+            if (typeof options === 'string') {
+                props.message = options
+            } else {
+                props = options
+            }
+
+            this.open({ ...props, type: DlToastTypes.ERROR } as DlToastProps)
+        },
+        info(options: DlToastProps | string) {
+            let props: Partial<DlToastProps> = {}
+            if (typeof options === 'string') {
+                props.message = options
+            } else {
+                props = options
+            }
+
+            this.open({ ...props, type: DlToastTypes.INFO } as DlToastProps)
+        },
+        warn(options: DlToastProps | string) {
+            let props: Partial<DlToastProps> = {}
+            if (typeof options === 'string') {
+                props.message = options
+            } else {
+                props = options
+            }
+
+            this.open({ ...props, type: DlToastTypes.WARNING } as DlToastProps)
         }
     }
 }

package/src/components/compound/DlToast/components/ToastComponent.vue

@@ -8,11 +8,7 @@
             :id="`DlToastContainer-${uuid}`"
             ref="root"
             class="toast-item DlToastContainer"
-            :class="[
-                `toast-item--${type}`,
-                `toast-item--${position}`,
-                classItem
-            ]"
+            :class="[`toast-item--${type}`, `toast-item--${position}`]"
             :style="{ width }"
         >
             <dl-alert
@@ -64,7 +60,7 @@ import {
     ref
 } from 'vue-demi'
 import { DlAlert, DlBadge } from '../../../'
-import { Positions, Types } from '../utils/config'
+import { DlToastTypes, DlToastPositions } from '../types'
 import { removeElement } from '../utils/render'
 import { Animation } from '../types'
 import { v4 } from 'uuid'
@@ -79,15 +75,11 @@ export default defineComponent({
         },
         type: {
             type: String,
-            default: 'success',
-            validator(value: string): boolean {
-                return Object.values(Types as unknown).includes(value)
+            required: true,
+            validator(value: DlToastTypes): boolean {
+                return Object.values(DlToastTypes).includes(value)
             }
         },
-        classItem: {
-            type: String,
-            default: ''
-        },
         width: {
             type: String,
             default: 'auto'
@@ -98,9 +90,9 @@ export default defineComponent({
         },
         position: {
             type: String,
-            default: Positions.bottom,
-            validator(value: string): boolean {
-                return Object.values(Positions as unknown).includes(value)
+            default: DlToastPositions.BOTTOM,
+            validator(value: DlToastPositions): boolean {
+                return Object.values(DlToastPositions).includes(value)
             }
         },
         closable: {
@@ -151,14 +143,14 @@ export default defineComponent({
 
         const correctParent = computed(() => {
             switch (position) {
-                case Positions.top:
-                case Positions.top_right:
-                case Positions.top_left:
+                case DlToastPositions.TOP:
+                case DlToastPositions.TOP_RIGHT:
+                case DlToastPositions.TOP_LEFT:
                     toastParentPosition.value = 'top'
                     return parentTop
-                case Positions.bottom:
-                case Positions.bottom_right:
-                case Positions.bottom_left:
+                case DlToastPositions.BOTTOM:
+                case DlToastPositions.BOTTOM_RIGHT:
+                case DlToastPositions.BOTTOM_LEFT:
                     toastParentPosition.value = 'bottom'
                     return parentBottom
             }
@@ -166,16 +158,16 @@ export default defineComponent({
 
         const transition = computed((): Animation => {
             switch (position) {
-                case Positions.top:
-                case Positions.top_right:
-                case Positions.top_left:
+                case DlToastPositions.TOP:
+                case DlToastPositions.TOP_RIGHT:
+                case DlToastPositions.TOP_LEFT:
                     return {
                         enter: 'dl-toast--fade-in-down',
                         leave: 'dl-toast--fade-out'
                     }
-                case Positions.bottom:
-                case Positions.bottom_right:
-                case Positions.bottom_left:
+                case DlToastPositions.BOTTOM:
+                case DlToastPositions.BOTTOM_RIGHT:
+                case DlToastPositions.BOTTOM_LEFT:
                     return {
                         enter: 'dl-toast--fade-in-up',
                         leave: 'dl-toast--fade-out'
@@ -231,13 +223,13 @@ export default defineComponent({
 
         const badgeColor = computed(() => {
             switch (props.type) {
-                case Types.success:
+                case DlToastTypes.SUCCESS:
                     return 'var(--dl-color-alert-success)'
-                case Types.warning:
+                case DlToastTypes.WARNING:
                     return 'var(--dl-color-alert-warn)'
-                case Types.error:
+                case DlToastTypes.ERROR:
                     return 'var(--dl-color-alert-error)'
-                case Types.info:
+                case DlToastTypes.INFO:
                     return 'var(--dl-color-alert-info)'
             }
         })

package/src/components/compound/DlToast/types.ts

@@ -2,3 +2,55 @@ export interface Animation {
     enter: string
     leave: string
 }
+
+export enum DlToastPositions {
+    TOP_RIGHT = 'top-right',
+    TOP = 'top',
+    TOP_LEFT = 'top-left',
+    BOTTOM_RIGHT = 'bottom-right',
+    BOTTOM = 'bottom',
+    BOTTOM_LEFT = 'bottom-left'
+}
+
+export enum DlToastTypes {
+    SUCCESS = 'success',
+    WARNING = 'warning',
+    ERROR = 'error',
+    INFO = 'info'
+}
+
+export interface DlToastProps {
+    /**
+     * The message to display in the toast
+     */
+    message: string
+    /**
+     * The type of the toast
+     */
+    type: DlToastTypes
+    /**
+     * The width of the toast
+     * @default 'auto'
+     */
+    width?: string
+    /**
+     * The duration of the toast in seconds
+     * @default 10
+     */
+    duration?: number
+    /**
+     * The position of the toast
+     * @default DlToastPositions.BOTTOM
+     */
+    position?: DlToastPositions
+    /**
+     * Whether the toast is closable
+     * @default true
+     */
+    closable?: boolean
+    /**
+     * The number of toasts to collapse after
+     * @default 5
+     */
+    collapseCount?: number
+}