@dataloop-ai/components 0.17.67 → 0.17.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.67",
+  "version": "0.17.69",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/basic/DlWidget/DlWidget.vue

@@ -6,24 +6,22 @@
         <div
             :id="uuid"
             ref="widget"
-            :class="widgetStyles"
+            :class="widgetClasses"
             @mouseenter="handleVisibleDragIcon(true)"
             @mouseleave="handleVisibleDragIcon(false)"
         >
+            <dl-icon
+                :style="iconStyles"
+                class="dl-widget__drag-icon"
+                icon="icon-dl-drag"
+                color="dl-color-medium"
+                size="15px"
+                @mousedown="startDragging"
+            />
             <div class="dl-widget__header">
                 <div class="dl-widget__header--titles">
                     <slot name="header" />
                 </div>
-                <dl-icon
-                    :style="`visibility: ${
-                        visibleDragIcon && !isDragging ? 'visible' : 'hidden'
-                    }`"
-                    class="dl-widget__header--drag-icon"
-                    icon="icon-dl-drag"
-                    color="dl-color-medium"
-                    size="15px"
-                    @mousedown="startDragging"
-                />
                 <slot name="menu" />
             </div>
 
@@ -65,8 +63,19 @@ export default defineComponent({
         }
     },
     computed: {
-        widgetStyles() {
+        widgetClasses() {
             return `${this.isDragging ? 'dl-widget__drag' : 'dl-widget'}`
+        },
+        iconStyles() {
+            return {
+                '--dl-widget-drag-icon-left': `${
+                    (this.$refs.widget as HTMLElement)?.offsetWidth / 2
+                }px`,
+                visibility:
+                    this.visibleDragIcon && !this.isDragging
+                        ? 'visible'
+                        : 'hidden'
+            }
         }
     },
     methods: {
@@ -192,19 +201,14 @@ export default defineComponent({
     height: 100%;
     display: flex;
     flex-direction: column;
+    position: relative;
     &__header {
         display: flex;
         padding: 10px;
         border-bottom: 1px solid var(--dl-color-separator);
-
-        &--drag-icon {
-            flex-grow: 1;
-            cursor: grab;
-
-            &::v-deep .dl-icon {
-                transform: rotate(90deg) !important;
-            }
-        }
+        font-size: 20px;
+        color: var(--dl-color-darker);
+        justify-content: space-between;
 
         &--titles {
             width: 50%;
@@ -229,6 +233,18 @@ export default defineComponent({
         color: var(--dl-color-medium);
     }
 
+    &__drag-icon {
+        position: absolute;
+        top: 5px;
+        left: calc(var(--dl-widget-drag-icon-left) - 5px);
+        flex-grow: 1;
+        cursor: grab;
+
+        &::v-deep .dl-icon {
+            transform: rotate(90deg) !important;
+        }
+    }
+
     &__drag {
         position: relative;
         &::after {

package/src/components/compound/DlCharts/charts/DlConfusionMatrix/DlConfusionMatrix.vue

@@ -61,9 +61,7 @@
                             class="matrix__cell"
                             :style="`background-color: ${getCellBackground(
                                 cell.value
-                            )}; color: var(--dl-color-text${
-                                cell.value < 0.5 ? '-darker' : ''
-                            }-buttons)`"
+                            )}; color: ${getCellTextColor(cell.value)}`"
                             @mouseenter="handleShowTooltip(cell, $event)"
                             @mouseleave="handleHideTooltip"
                             @mousedown="openLink(cell)"
@@ -140,14 +138,14 @@
         <div
             v-if="tooltipVisible"
             :style="tooltipStyles"
-            class="tooltip"
+            class="matrix-tooltip"
         >
-            <span class="tooltip__x">{{ tooltipState.xLabel }}</span>
-            <span class="tooltip__y">{{ tooltipState.yLabel }}</span>
+            <span class="matrix-tooltip__x">{{ tooltipState.xLabel }}</span>
+            <span class="matrix-tooltip__y">{{ tooltipState.yLabel }}</span>
             <span>
                 <span
                     v-if="tooltipState.value"
-                    class="tooltip__color"
+                    class="matrix-tooltip__color"
                     :style="`background-color: ${getCellBackground(
                         tooltipState.value
                     )}`"
@@ -238,9 +236,19 @@ export default defineComponent({
             const hex = object[props.color]
             return hexToRgbA(hex, value)
         }
+
+        const getCellTextColor = (value: number) => {
+            const isDark =
+                document.documentElement.getAttribute('data-theme') ===
+                'dark-mode'
+            if (isDark) return 'var(--dl-color-text-buttons)'
+            return `var(--dl-color-text${value < 0.5 ? '-darker' : ''}-buttons)`
+        }
+
         return {
             variables,
             getCellBackground,
+            getCellTextColor,
             cellWidth,
             tooltipState,
             currentBrushState
@@ -365,8 +373,8 @@ export default defineComponent({
                     value: ctx.normalized ? cell.value : cell.unnormalizedValue,
                     xLabel: cell.xLabel,
                     yLabel: cell.yLabel,
-                    x: e.pageX,
-                    y: e.pageY,
+                    x: e.x,
+                    y: e.y,
                     visible: true
                 }
             },
@@ -514,7 +522,7 @@ export default defineComponent({
     }
 }
 
-.tooltip {
+.matrix-tooltip {
     position: absolute;
     border: 1px solid var(--dl-color-separator);
     padding: 8px;
@@ -522,6 +530,7 @@ export default defineComponent({
     display: flex;
     flex-direction: column;
     background-color: var(--dl-color-shadow);
+    color: var(--dl-color-tooltip-background);
     border-radius: 3px;
     animation: fadeIn 0.4s;
 

package/src/components/compound/DlCharts/components/DlChartScrollBar.vue

@@ -142,6 +142,7 @@ export default defineComponent({
 <style scoped lang="scss">
 .scroll-bar-wrapper {
     width: 1%;
+    min-width: 5px;
 }
 .scroll-bar {
     background: #d9d9d9;

package/src/components/compound/DlTable/DlTable.vue

@@ -152,10 +152,12 @@
                                 : ''
                     "
                     :no-hover="noHover"
-                    @click="onTrClick($event, props.item, pageIndex)"
-                    @dblclick="onTrDblClick($event, props.item, pageIndex)"
+                    @click="onTrClick($event, props.item, props.pageIndex)"
+                    @dblclick="
+                        onTrDblClick($event, props.item, props.pageIndex)
+                    "
                     @contextmenu="
-                        onTrContextMenu($event, props.item, pageIndex)
+                        onTrContextMenu($event, props.item, props.pageIndex)
                     "
                 >
                     <td
@@ -1069,10 +1071,6 @@ export default defineComponent({
                 acc[p] = (props as Record<string, any>)[p]
             })
 
-            if (!acc.virtualScrollItemSize) {
-                acc.virtualScrollItemSize = props.dense === true ? 30 : 40
-            }
-
             return acc
         })
 

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

@@ -61,10 +61,11 @@ export function useTablePaginationState(
                 sortBy: null,
                 descending: false,
                 page: 1,
-                rowsPerPage:
-                    props.rowsPerPageOptions.length > 0
-                        ? props.rowsPerPageOptions[0]
-                        : 5,
+                rowsPerPage: props.virtualScroll
+                    ? 0
+                    : props.rowsPerPageOptions.length > 0
+                    ? props.rowsPerPageOptions[0]
+                    : 5,
                 min: 1,
                 maxPages: 0,
                 boundaryNumbers: true,
@@ -74,7 +75,9 @@ export function useTablePaginationState(
                 itemsName: 'Rows',
                 withLegend: true,
                 withRowsPerPage: true,
-                rowsPerPageOptions: props.rowsPerPageOptions
+                rowsPerPageOptions: props.virtualScroll
+                    ? [0]
+                    : props.rowsPerPageOptions
             },
             props.pagination
         )

package/src/components/shared/DlVirtualScroll/DlVirtualScroll.vue

@@ -11,7 +11,8 @@ import {
     ref,
     watch,
     isVue2,
-    h
+    h,
+    onUnmounted
 } from 'vue-demi'
 import getTableMiddle from '../../compound/DlTable/utils/getTableMiddle'
 import { listenOpts, mergeSlot } from '../../../utils'
@@ -54,7 +55,7 @@ export default defineComponent({
         },
 
         virtualScrollItemSize: {
-            type: [Number, String],
+            type: Number,
             required: false,
             default: 0
         },
@@ -70,7 +71,7 @@ export default defineComponent({
             required: false,
             default: 0
         },
-        tableColspan: { type: [Number, String], required: false, default: 1 },
+        tableColspan: { type: [Number, String], required: false, default: 100 },
         virtualScrollHorizontal: {
             type: Boolean,
             required: false,
@@ -101,6 +102,7 @@ export default defineComponent({
     setup(props, { slots, attrs }) {
         let localScrollTarget: HTMLElement | undefined
         const rootRef: Ref<HTMLElement | null> = ref(null)
+        const scrollSizeItem: Ref<number> = ref(40)
 
         const isDefined = (v: any) => v !== undefined && v !== null
 
@@ -112,6 +114,34 @@ export default defineComponent({
                 : 0
         })
 
+        onMounted(() => {
+            window.addEventListener('load', setItemSize)
+        })
+
+        onUnmounted(() => window.removeEventListener('load', () => {}))
+
+        const setItemSize = () => {
+            scrollSizeItem.value = props.virtualScrollItemSize
+                ? props.virtualScrollItemSize
+                : typeof rootRef.value?.getElementsByClassName === 'function'
+                ? rootRef.value?.getElementsByClassName(
+                      'dl-virtual-scroll__content'
+                  )[0].children[0].clientHeight
+                : 40
+        }
+
+        watch(
+            props,
+            () => {
+                setItemSize()
+            },
+            { deep: true }
+        )
+
+        const virtualScrollItemSizeComputed = computed(() => {
+            return scrollSizeItem.value
+        })
+
         const {
             virtualScrollSliceRange,
             localResetVirtualScroll,
@@ -120,7 +150,8 @@ export default defineComponent({
         } = useVirtualScroll({
             virtualScrollLength,
             getVirtualScrollTarget,
-            getVirtualScrollEl
+            getVirtualScrollEl,
+            virtualScrollItemSizeComputed
         })
 
         const virtualScrollScope = computed(() => {

package/src/demos/DlTableDemo.vue

@@ -222,7 +222,6 @@
                         :selected="selected"
                         :separator="separator"
                         :draggable="draggable"
-                        class="sticky-header"
                         :filter="filter"
                         :selection="selection"
                         :dense="dense"
@@ -233,9 +232,7 @@
                         :columns="tableColumns"
                         style="height: 500px"
                         row-key="index"
-                        :pagination="{ rowsPerPage: 0 }"
                         virtual-scroll
-                        :rows-per-page-options="[0]"
                         @virtual-scroll="onScroll"
                     />
                 </div>

package/src/demos/DlVirtualScrollDemo.vue

@@ -4,9 +4,6 @@
             <dl-virtual-scroll
                 v-slot="{ item: row, index }"
                 type="table"
-                :virtual-scroll-item-size="48"
-                :virtual-scroll-sticky-size-start="48"
-                :virtual-scroll-sticky-size-end="32"
                 :items="heavyList"
                 style="height: 500px"
                 @virtual-scroll="log"
@@ -27,9 +24,6 @@
             <dl-virtual-scroll
                 v-slot="{ item, index }"
                 style="max-width: 500px"
-                :virtual-scroll-item-size="48"
-                :virtual-scroll-sticky-size-start="48"
-                :virtual-scroll-sticky-size-end="32"
                 :items="horizontalList"
                 virtual-scroll-horizontal
             >
@@ -47,9 +41,6 @@
                 v-slot="{ item, index }"
                 style="height: 300px"
                 :items="basicList"
-                :virtual-scroll-item-size="28"
-                :virtual-scroll-sticky-size-start="28"
-                :virtual-scroll-sticky-size-end="20"
                 separator
                 @virtual-scroll="log"
             >
@@ -69,9 +60,9 @@
             <dl-virtual-scroll
                 style="height: 300px; gap: 20px"
                 :items="customList"
-                :virtual-scroll-item-size="293"
-                :virtual-scroll-sticky-size-start="293"
-                :virtual-scroll-sticky-size-end="200"
+                :virtual-scroll-item-size="295"
+                :virtual-scroll-sticky-size-start="20"
+                :virtual-scroll-sticky-size-end="20"
                 separator
                 @virtual-scroll="log"
             >

package/src/demos/DlWidgetDemo.vue

@@ -38,7 +38,7 @@
             <dl-widget>
                 <template #header>
                     <span>Widget 1</span>
-                    <span style="font-size: 12px; color: gray">Subtitle</span>
+                    <span style="font-size: 12px; color: var(--dl-color-medium)">Subtitle</span>
                 </template>
                 <template #content>
                     <dl-bar-chart