@dataloop-ai/components 0.18.0 → 0.18.2

package/src/components/compound/DlStepper/models/Stepper.ts

@@ -83,25 +83,118 @@ export class Stepper {
         }
     }
 
-    public completeStep() {
-        if (!this.currentStep) return
-        this.currentStep.completed = true
-        this.moveToNextStep()
-    }
+    /**
+     *
+     * @param options { step?: number; preventNext?: boolean }
+     * @param options.step The steps to complete
+     * @param options.preventNext Prevents the stepper from moving to the next step
+     * @returns
+     */
+    public completeStep(options: { step?: Step; preventNext?: boolean } = {}) {
+        const { step, preventNext } = options
+        const stepToComplete = step ?? this.currentStep
+
+        if (!stepToComplete) {
+            return
+        }
+
+        stepToComplete.completed = true
 
-    public failStep(msg?: string) {
-        if (!this.currentStep) return
-        this.currentStep.error = msg || ''
+        if (!preventNext) {
+            this.moveToNextStep()
+        }
     }
 
-    public setStepWarning(msg?: string) {
-        if (!this.currentStep) return
-        this.currentStep.warning = msg || ''
-        this.moveToNextStep()
+    /**
+     * @param message The error message
+     * @param options { step?: number; preventNext?: boolean }
+     * @param options.step The steps to Fail
+     * @returns
+     */
+    public failStep(message?: string, options: { step?: Step } = {}) {
+        const { step } = options
+        const stepToFail = step ?? this.currentStep
+
+        if (!stepToFail) {
+            return
+        }
+
+        stepToFail.error = message ?? ''
+    }
+
+    /**
+     * @param message The warning message
+     * @param options { step?: number; preventNext?: boolean }
+     * @param options.step The steps to Warn
+     * @param options.preventNext Prevents the stepper from moving to the next step
+     * @returns
+     */
+    public setStepWarning(
+        message?: string,
+        options: { step?: Step; preventNext?: boolean } = {}
+    ) {
+        const { step, preventNext } = options
+        const stepToWarn = step ?? this.currentStep
+
+        if (!stepToWarn) {
+            return
+        }
+
+        stepToWarn.warning = message ?? ''
+
+        if (!preventNext) {
+            this.moveToNextStep()
+        }
     }
 
-    public resetStep() {
-        if (!this.currentStep) return
-        this.currentStep.reset()
+    /**
+     *
+     * @param options { step?: number; preventNext?: boolean }
+     * @param options.step The steps to reset
+     * @returns
+     */
+    public resetStep(options: { step?: Step } = {}) {
+        const { step } = options
+        const stepToReset = step ?? this.currentStep
+
+        if (!stepToReset) {
+            return
+        }
+
+        stepToReset.reset()
+    }
+
+    /**
+     *
+     * @param options { step?: number; error?: boolean, warning?: boolean, completed?: boolean }
+     * @param options.step The step to clear its state
+     * @returns
+     */
+    public clearStepState(
+        options: {
+            step?: Step
+            error?: boolean
+            warning?: boolean
+            completed?: boolean
+        } = {}
+    ) {
+        const { step, error, warning, completed } = options
+        const stepToClear = step ?? this.currentStep
+
+        if (!stepToClear) {
+            return
+        }
+
+        if (error) {
+            stepToClear.clearError()
+        }
+
+        if (warning) {
+            stepToClear.clearWarning()
+        }
+
+        if (completed) {
+            stepToClear.clearCompleted()
+        }
     }
 }

package/src/components/compound/DlStepper/models/interfaces.ts

@@ -7,5 +7,6 @@ export interface StepState {
     optional?: boolean
     error?: string
     warning?: string
-    sidebarNavigation?: boolean
+    disabled?: boolean
+    disabledTooltip?: string
 }

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

@@ -63,6 +63,7 @@
             :table-colspan="computedColspan"
             :scroll-target="virtualScrollTarget"
             :items="computedRows"
+            :scroll-debounce="scrollDebounce"
             v-bind="virtProps"
             @virtual-scroll="onVScroll"
         >
@@ -152,13 +153,18 @@
                                 : ''
                     "
                     :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 v-if="hasDraggableRows">
+                    <td
+                        v-if="hasDraggableRows"
+                        class="dl-table__drag-icon"
+                    >
                         <dl-icon
                             class="draggable-icon"
                             icon="icon-dl-drag"
@@ -325,6 +331,7 @@
                         name="body"
                     >
                         <DlTr
+                            v-if="!isEmpty"
                             :key="getRowKey(row)"
                             :class="
                                 isRowSelected(getRowKey(row))
@@ -340,7 +347,10 @@
                                 onTrContextMenu($event, row, pageIndex)
                             "
                         >
-                            <td v-if="hasDraggableRows">
+                            <td
+                                v-if="hasDraggableRows"
+                                class="dl-table__drag-icon"
+                            >
                                 <dl-icon
                                     class="draggable-icon"
                                     icon="icon-dl-drag"
@@ -403,6 +413,23 @@
                             </slot>
                         </DlTr>
                     </slot>
+                    <DlTr v-if="isEmpty">
+                        <DlTd colspan="100%">
+                            <div class="flex justify-center">
+                                <dl-empty-state v-bind="emptyStateProps">
+                                    <template
+                                        v-for="(_, slot) in $slots"
+                                        #[slot]="props"
+                                    >
+                                        <slot
+                                            :name="slot"
+                                            v-bind="props"
+                                        />
+                                    </template>
+                                </dl-empty-state>
+                            </div>
+                        </DlTd>
+                    </DlTr>
                     <slot
                         name="bottom-row"
                         :cols="computedCols"
@@ -447,7 +474,7 @@
                         <dl-pagination
                             v-if="displayPagination"
                             v-bind="marginalsScope.pagination"
-                            total-items="rows.length"
+                            :total-items="rows.length"
                             @update:rowsPerPage="
                                 (v) => setPagination({ rowsPerPage: v })
                             "
@@ -519,6 +546,8 @@ import { DlTableRow, DlTableProps, DlTableColumn } from './types'
 import { DlPagination } from '../DlPagination'
 import { DlIcon, DlCheckbox, DlProgressBar } from '../../essential'
 import { ResizableManager } from './utils'
+import DlEmptyState from '../../basic/DlEmptyState/DlEmptyState.vue'
+import { DlEmptyStateProps } from '../../basic/DlEmptyState/types'
 import { v4 } from 'uuid'
 
 const commonVirtPropsObj = {} as Record<string, any>
@@ -536,7 +565,8 @@ export default defineComponent({
         DlPagination,
         DlProgressBar,
         DlIcon,
-        DlCheckbox
+        DlCheckbox,
+        DlEmptyState
     },
     props: {
         columns: { type: Array, default: () => [] as Record<string, any>[] },
@@ -593,7 +623,7 @@ export default defineComponent({
         },
         virtualScrollTarget: {
             type: Object as PropType<HTMLElement>,
-            default: void 0
+            default: null
         },
         titleClass: {
             type: [String, Array, Object],
@@ -616,6 +646,15 @@ export default defineComponent({
             default: null
         },
         noHover: Boolean,
+        isEmpty: Boolean,
+        emptyStateProps: {
+            type: Object as PropType<DlEmptyStateProps>,
+            default: null
+        },
+        scrollDebounce: {
+            type: Number,
+            default: 100
+        },
         ...useTableActionsProps,
         ...commonVirtScrollProps,
         ...useTableRowExpandProps,
@@ -1063,10 +1102,6 @@ export default defineComponent({
                 acc[p] = (props as Record<string, any>)[p]
             })
 
-            if (!acc.virtualScrollItemSize) {
-                acc.virtualScrollItemSize = props.dense === true ? 30 : 40
-            }
-
             return acc
         })
 
@@ -1089,7 +1124,7 @@ export default defineComponent({
                 typeof col.field === 'function'
                     ? col.field(row)
                     : row[col.field]
-            return col.format !== void 0 ? col.format(val, row) : val
+            return col.format ? col.format(val, row) : val
         }
 
         function resetVirtualScroll() {
@@ -1221,7 +1256,7 @@ export default defineComponent({
             return data
         }
 
-        const hasLoadingSlot = computed(() => slots['loading'] !== void 0)
+        const hasLoadingSlot = computed(() => slots['loading'])
 
         const paginationState = computed(() => {
             return {

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

@@ -18,7 +18,7 @@
 <script lang="ts">
 import { defineComponent, getCurrentInstance, computed, ref } from 'vue-demi'
 import { getColor } from '../../../../utils'
-import { DlTooltip } from '../../../essential'
+import { DlTooltip } from '../../../shared'
 import { useSizeObserver } from '../../../../hooks/use-size-observer'
 
 export default defineComponent({
@@ -27,7 +27,7 @@ export default defineComponent({
         DlTooltip
     },
     props: {
-        props: { type: Object, default: () => {} },
+        props: { type: Object, default: null },
         autoWidth: Boolean,
         noHover: Boolean,
         bgColor: {
@@ -43,7 +43,7 @@ export default defineComponent({
         const { hasEllipsis } = useSizeObserver(tableTd)
 
         const hasOptionalProps = computed(() => {
-            return props.props !== void 0
+            return !!props.props
         })
 
         const tdClasses = computed(() => {
@@ -74,11 +74,11 @@ export default defineComponent({
         const column = computed(() => {
             const name = vm.vnode.key as string
 
-            return (
-                (props.props.colsMap !== void 0
-                    ? props.props.colsMap[name]
-                    : null) || props.props.col
-            )
+            const colmap = props.props?.colsMap
+                ? props.props.colsMap[name]
+                : null
+
+            return colmap ?? props.props?.col
         })
 
         if (!hasOptionalProps.value) {
@@ -90,7 +90,7 @@ export default defineComponent({
             }
         }
 
-        if (column.value === void 0) {
+        if (!column.value) {
             return
         }
 

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

@@ -29,7 +29,8 @@
 <script lang="ts">
 import { defineComponent, getCurrentInstance, computed, ref } from 'vue-demi'
 import { useSizeObserver } from '../../../../hooks/use-size-observer'
-import { DlIcon, DlTooltip } from '../../../essential'
+import { DlIcon } from '../../../essential'
+import { DlTooltip } from '../../../shared'
 
 export default defineComponent({
     name: 'DlTh',
@@ -38,7 +39,7 @@ export default defineComponent({
         DlTooltip
     },
     props: {
-        props: { type: Object, default: () => {} },
+        props: { type: Object, default: null },
         autoWidth: Boolean
     },
     emits: ['click'],

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

@@ -15,41 +15,42 @@ export function useTableColumnSelection(
     hasDraggableRows: ComputedRef<boolean>
 ) {
     const colList = computed(() => {
-        if (props.columns !== void 0) {
+        if (props.columns) {
             return props.columns
         }
 
         // we infer columns from first row
         const row = props.rows[0]
+        const list: DlTableColumn[] = []
+        if (row) {
+            for (const key of Object.keys(row)) {
+                list.push({
+                    name: key,
+                    label: key.toUpperCase(),
+                    field: key,
+                    align: isNumber(row[key]) ? 'right' : 'left',
+                    sortable: true
+                })
+            }
+        }
 
-        return (
-            row !== void 0
-                ? Object.keys(row).map((name) => ({
-                      name,
-                      label: name.toUpperCase(),
-                      field: name,
-                      align: isNumber(row[name]) ? 'right' : 'left',
-                      sortable: true
-                  }))
-                : []
-        ) as DlTableColumn[]
+        return list
     })
 
     const computedCols = computed(() => {
         const { sortBy, descending } = computedPagination.value
 
-        const cols =
-            props.visibleColumns !== void 0
-                ? colList.value.filter(
-                      (col) =>
-                          col.required === true ||
-                          props.visibleColumns.includes(col.name) === true
-                  )
-                : colList.value
+        const cols = props.visibleColumns
+            ? colList.value.filter(
+                  (col) =>
+                      col.required === true ||
+                      props.visibleColumns.includes(col.name) === true
+              )
+            : colList.value
 
         const updatedCols = cols.map((col) => {
             const align = col.align || 'right'
-            const alignClass = `text-${align}`
+            const alignClass = ` text-${align}`
 
             return {
                 ...col,
@@ -57,30 +58,24 @@ export function useTableColumnSelection(
                 iconClass: `dl-table__sort-icon dl-table__sort-icon--${align}`,
                 thClass:
                     alignClass +
-                    (col.headerClasses !== void 0
-                        ? ' ' + col.headerClasses
-                        : '') +
+                    (col.headerClasses ? ' ' + col.headerClasses : '') +
                     (col.sortable === true ? ' sortable' : '') +
                     (col.name === sortBy
                         ? ` sorted ${descending === true ? 'sort-desc' : ''}`
                         : ''),
 
-                tdStyle:
-                    col.style !== void 0
-                        ? typeof col.style !== 'function'
-                            ? () => col.style
-                            : col.style
-                        : () => '',
+                tdStyle: col.style
+                    ? typeof col.style !== 'function'
+                        ? () => col.style
+                        : col.style
+                    : () => '',
 
-                tdClass:
-                    col.classes !== void 0
-                        ? typeof col.classes !== 'function'
-                            ? () => alignClass + ' ' + col.classes
-                            : (row: DlTableRow) =>
-                                  alignClass +
-                                  ' ' +
-                                  (col.classes as Function)(row)
-                        : () => alignClass
+                tdClass: col.classes
+                    ? typeof col.classes !== 'function'
+                        ? () => alignClass + ' ' + col.classes
+                        : (row: DlTableRow) =>
+                              alignClass + ' ' + (col.classes as Function)(row)
+                    : () => alignClass
             }
         })
 
@@ -96,7 +91,7 @@ export function useTableColumnSelection(
     })
 
     const computedColspan = computed(() => {
-        return props.tableColspan !== void 0
+        return props.tableColspan
             ? props.tableColspan
             : computedCols.value.length +
                   (hasSelectionMode.value === true ? 1 : 0) +

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

@@ -1,5 +1,11 @@
 import { computed, watch, nextTick } from 'vue-demi'
-import { DlTableProps, DlTableFilterMethod } from '../types'
+import {
+    DlTableProps,
+    DlTableFilterMethod,
+    DlTableRow,
+    DlTableFilter,
+    DlTableColumn
+} from '../types'
 
 export const useTableFilterProps = {
     filter: [String, Object],
@@ -7,26 +13,32 @@ export const useTableFilterProps = {
 }
 
 export function useTableFilter(props: any, setPagination: Function) {
-    const computedFilterMethod = computed(
-        () =>
-            (props.filterMethod !== void 0
-                ? props.filterMethod
-                : (rows, filterTerms, cols, cellValue) => {
-                      const lowerTerms = filterTerms
-                          ? filterTerms.toLowerCase()
-                          : ''
-                      return rows.filter((row) =>
-                          cols.some((col) => {
-                              const val = cellValue(col, row) + ''
-                              const haystack =
-                                  val === 'undefined' || val === 'null'
-                                      ? ''
-                                      : val.toLowerCase()
-                              return haystack.indexOf(lowerTerms) !== -1
-                          })
-                      )
-                  }) as DlTableFilterMethod
-    )
+    const computedFilterMethod = computed(() => {
+        if (props.filterMethod) {
+            return props.filterMethod
+        }
+
+        const tableFilter: DlTableFilterMethod = (
+            rows: DlTableRow[],
+            filterTerms: DlTableFilter,
+            cols: DlTableColumn[],
+            cellValue: (col: DlTableColumn, row: DlTableRow) => any
+        ) => {
+            const lowerTerms = filterTerms ? filterTerms.toLowerCase() : ''
+            return rows.filter((row) =>
+                cols.some((col) => {
+                    const val = cellValue(col, row) + ''
+                    const haystack =
+                        val === 'undefined' || val === 'null'
+                            ? ''
+                            : val.toLowerCase()
+                    return haystack.indexOf(lowerTerms) !== -1
+                })
+            )
+        }
+
+        return tableFilter
+    })
 
     watch(
         () => props.filter,

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

@@ -1,3 +1,4 @@
+import { isNumber } from 'lodash'
 import {
     ref,
     computed,
@@ -33,7 +34,7 @@ function fixPagination(p: TablePagination) {
     if (p.page < 1) {
         p.page = 1
     }
-    if (p.rowsPerPage !== void 0 && p.rowsPerPage < 1) {
+    if (isNumber(p.rowsPerPage) && p.rowsPerPage < 1) {
         p.rowsPerPage = 0
     }
     return p
@@ -61,10 +62,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 +76,9 @@ export function useTablePaginationState(
                 itemsName: 'Rows',
                 withLegend: true,
                 withRowsPerPage: true,
-                rowsPerPageOptions: props.rowsPerPageOptions
+                rowsPerPageOptions: props.virtualScroll
+                    ? [0]
+                    : props.rowsPerPageOptions
             },
             props.pagination
         )
@@ -89,13 +93,12 @@ export function useTablePaginationState(
     )
 
     const computedPagination = computed(() => {
-        const pag =
-            props['onUpdate:pagination'] !== void 0
-                ? {
-                      ...innerPagination.value,
-                      ...props.pagination
-                  }
-                : innerPagination.value
+        const pag = props['onUpdate:pagination']
+            ? {
+                  ...innerPagination.value,
+                  ...props.pagination
+              }
+            : innerPagination.value
 
         return fixPagination(pag)
     })
@@ -120,10 +123,7 @@ export function useTablePaginationState(
             return
         }
 
-        if (
-            props.pagination !== void 0 &&
-            props['onUpdate:pagination'] !== void 0
-        ) {
+        if (props.pagination && props['onUpdate:pagination']) {
             emit('update:pagination', newPagination)
         } else {
             innerPagination.value = newPagination
@@ -221,7 +221,7 @@ export function useTablePagination(
         }
     })
 
-    if (props['onUpdate:pagination'] !== void 0) {
+    if (props['onUpdate:pagination']) {
         emit('update:pagination', { ...computedPagination.value })
     }
 

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

@@ -1,3 +1,4 @@
+import { isUndefined } from 'lodash'
 import { ref, watch } from 'vue-demi'
 
 function getVal(val: string[]) {
@@ -25,7 +26,7 @@ export function useTableRowExpand(props: any, emit: Function) {
     }
 
     function setExpanded(val: string[]) {
-        if (props.expanded !== void 0) {
+        if (props.expanded !== null && !isUndefined(props.expanded)) {
             emit('update:expanded', val)
         } else {
             innerExpanded.value = val

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

@@ -98,7 +98,6 @@ export function useTableRowSelection(
         allRowsSelected,
         someRowsSelected,
         rowsSelectedNumber,
-
         isRowSelected,
         clearSelection,
         updateSelection