@dataloop-ai/components 0.17.134 → 0.18.1

package/src/components/compound/DlTable/hooks/tableSort.ts

@@ -4,6 +4,7 @@ import { sortDate } from '../../../../utils/sort'
 import { isNumber, isDate, isObject } from '../../../../utils/is'
 import { DlTableProps, DlTableColumn, DlTableSortMethod } from '../types'
 import { TablePagination } from './tablePagination'
+import { isUndefined } from 'lodash'
 
 export const useTableSortProps = {
     sortMethod: Function,
@@ -29,52 +30,56 @@ export function useTableSort(
             : null
     })
 
-    const computedSortMethod = computed(() =>
-        props.sortMethod !== void 0
-            ? props.sortMethod
-            : (((data, sortBy, descending) => {
-                  const col = colList.value.find((def) => def.name === sortBy)
-                  if (col === void 0 || col.field === void 0) {
-                      return data
-                  }
-
-                  const dir = descending === true ? -1 : 1
-                  const val =
-                      typeof col.field === 'function'
-                          ? (v: string) => (col.field as Function)(v)
-                          : (v: Record<string, any>) => v[col.field as string]
-
-                  return data.sort((a: any, b: any) => {
-                      let A = val(a)
-                      let B = val(b)
-
-                      if (A === null || A === void 0) {
-                          return -1 * dir
-                      }
-                      if (B === null || B === void 0) {
-                          return 1 * dir
-                      }
-                      if (col.sort !== void 0) {
-                          return col.sort(A, B, a, b) * dir
-                      }
-                      if (isNumber(A) === true && isNumber(B) === true) {
-                          return (A - B) * dir
-                      }
-                      if (isDate(A) === true && isDate(B) === true) {
-                          return sortDate(A, B) * dir
-                      }
-                      if (typeof A === 'boolean' && typeof B === 'boolean') {
-                          return (Number(A) - Number(B)) * dir
-                      }
-
-                      [A, B] = [A, B].map((s) =>
-                          (s + '').toLocaleString().toLowerCase()
-                      )
-
-                      return A < B ? -1 * dir : A === B ? 0 : dir
-                  })
-              }) as DlTableSortMethod)
-    )
+    const computedSortMethod = computed(() => {
+        if (props.sortMethod) {
+            return props.sortMethod
+        }
+
+        const sortMethod: DlTableSortMethod = (data, sortBy, descending) => {
+            const col = colList.value.find((def) => def.name === sortBy)
+            if (isUndefined(col) || isUndefined(col.field)) {
+                return data
+            }
+
+            const dir = descending === true ? -1 : 1
+            const val =
+                typeof col.field === 'function'
+                    ? (v: string) => (col.field as Function)(v)
+                    : (v: Record<string, any>) => v[col.field as string]
+
+            return data.sort((a: any, b: any) => {
+                let A = val(a)
+                let B = val(b)
+
+                if (A === null || isUndefined(A)) {
+                    return -1 * dir
+                }
+                if (B === null || isUndefined(B)) {
+                    return 1 * dir
+                }
+                if (col.sort) {
+                    return col.sort(A, B, a, b) * dir
+                }
+                if (isNumber(A) === true && isNumber(B) === true) {
+                    return (A - B) * dir
+                }
+                if (isDate(A) === true && isDate(B) === true) {
+                    return sortDate(A, B) * dir
+                }
+                if (typeof A === 'boolean' && typeof B === 'boolean') {
+                    return (Number(A) - Number(B)) * dir
+                }
+
+                [A, B] = [A, B].map((s) =>
+                    (s + '').toLocaleString().toLowerCase()
+                )
+
+                return A < B ? -1 * dir : A === B ? 0 : dir
+            })
+        }
+
+        return sortMethod
+    })
 
     function sort(col: string | DlTableColumn) {
         let sortOrder: DlTableProps['columnSortOrder'] = props.columnSortOrder
@@ -87,7 +92,7 @@ export function useTableSort(
             col = (col as DlTableColumn).name
         } else {
             const def = colList.value.find((def) => def.name === col)
-            if (def !== void 0 && def.sortOrder) {
+            if (def && def.sortOrder) {
                 sortOrder = def.sortOrder
             }
         }

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'
+}