@dataloop-ai/components 0.13.0

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

@@ -0,0 +1,197 @@
+import {
+    ref,
+    computed,
+    watch,
+    nextTick,
+    Ref,
+    ComputedRef,
+    PropType
+} from 'vue-demi'
+
+export type TablePagination = {
+    sortBy?: string
+    descending?: boolean
+    page?: number
+    rowsPerPage?: number
+    rowsNumber?: number
+    maxPages?: number
+}
+
+function samePagination(oldPag: TablePagination, newPag: TablePagination) {
+    for (const prop in newPag) {
+        if (
+            newPag[prop as keyof TablePagination] !==
+            oldPag[prop as keyof TablePagination]
+        ) {
+            return false
+        }
+    }
+    return true
+}
+
+function fixPagination(p: TablePagination) {
+    if (p.page < 1) {
+        p.page = 1
+    }
+    if (p.rowsPerPage !== void 0 && p.rowsPerPage < 1) {
+        p.rowsPerPage = 0
+    }
+    return p
+}
+
+export const useTablePaginationProps = {
+    pagination: Object as PropType<TablePagination>,
+    rowsPerPageOptions: {
+        type: Array,
+        default: () => [5, 7, 10, 15, 20, 25, 50, 100]
+    },
+
+    'onUpdate:pagination': [Function, Array]
+}
+
+export function useTablePaginationState(
+    vm: Record<string, any>,
+    getCellValue: Function
+) {
+    const { props, emit } = vm
+    const innerPagination = ref(
+        Object.assign(
+            {
+                sortBy: null,
+                descending: false,
+                page: 1,
+                rowsPerPage:
+                    props.rowsPerPageOptions.length > 0
+                        ? props.rowsPerPageOptions[0]
+                        : 5,
+                min: 1,
+                maxPages: 0,
+                boundaryNumbers: true,
+                boundaryLinks: true,
+                directionLinks: true,
+                withQuickNavigation: true,
+                itemsName: 'Rows',
+                withLegend: true,
+                withRowsPerPage: true
+            },
+            props.pagination
+        )
+    )
+
+    const computedPagination = computed(() => {
+        const pag =
+            props['onUpdate:pagination'] !== void 0
+                ? {
+                      ...innerPagination.value,
+                      ...props.pagination
+                  }
+                : innerPagination.value
+
+        return fixPagination(pag)
+    })
+
+    function requestServerInteraction(prop: Record<string, any> = {}) {
+        nextTick(() => {
+            emit('request', {
+                pagination: prop.pagination || computedPagination.value,
+                filter: prop.filter || props.filter,
+                getCellValue
+            })
+        })
+    }
+
+    function setPagination(val: Record<string, any>) {
+        const newPagination = fixPagination({
+            ...computedPagination.value,
+            ...val
+        })
+
+        if (samePagination(computedPagination.value, newPagination)) {
+            return
+        }
+
+        if (
+            props.pagination !== void 0 &&
+            props['onUpdate:pagination'] !== void 0
+        ) {
+            emit('update:pagination', newPagination)
+        } else {
+            innerPagination.value = newPagination
+        }
+    }
+
+    return {
+        innerPagination,
+        computedPagination,
+
+        requestServerInteraction,
+        setPagination
+    }
+}
+
+export function useTablePagination(
+    vm: Record<string, any>,
+    computedPagination: ComputedRef<TablePagination>,
+    setPagination: Function,
+    filteredSortedRowsNumber: Ref<number>
+) {
+    const { props, emit } = vm
+
+    const computedRowsNumber = computed(() => filteredSortedRowsNumber.value)
+
+    const firstRowIndex = computed(() => {
+        const { page, rowsPerPage } = computedPagination.value
+        return (page - 1) * rowsPerPage
+    })
+
+    const lastRowIndex = computed(() => {
+        const { page, rowsPerPage } = computedPagination.value
+        return page * rowsPerPage
+    })
+
+    const isFirstPage = computed(() => computedPagination.value.page === 1)
+
+    const pagesNumber = computed(() =>
+        computedPagination.value.rowsPerPage === 0
+            ? 1
+            : Math.max(
+                  1,
+                  Math.ceil(
+                      computedRowsNumber.value /
+                          computedPagination.value.rowsPerPage
+                  )
+              )
+    )
+
+    const isLastPage = computed(() =>
+        lastRowIndex.value === 0
+            ? true
+            : computedPagination.value.page >= pagesNumber.value
+    )
+
+    watch(pagesNumber, (lastPage, oldLastPage) => {
+        if (lastPage === oldLastPage) {
+            return
+        }
+
+        const currentPage = computedPagination.value.page
+        if (lastPage && !currentPage) {
+            setPagination({ page: 1 })
+        } else if (lastPage < currentPage) {
+            setPagination({ page: lastPage })
+        }
+    })
+
+    if (props['onUpdate:pagination'] !== void 0) {
+        emit('update:pagination', { ...computedPagination.value })
+    }
+
+    return {
+        firstRowIndex,
+        lastRowIndex,
+        isFirstPage,
+        isLastPage,
+        pagesNumber,
+        computedRowsNumber
+    }
+}

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

@@ -0,0 +1,55 @@
+import { ref, watch } from 'vue-demi'
+
+function getVal(val: string[]) {
+    return Array.isArray(val) ? val.slice() : []
+}
+
+export const useTableRowExpandProps = {
+    expanded: Array // v-model:expanded
+}
+
+export const useTableRowExpandEmits = ['update:expanded']
+
+export function useTableRowExpand(props: any, emit: Function) {
+    const innerExpanded = ref(getVal(props.expanded))
+
+    watch(
+        () => props.expanded,
+        (val) => {
+            innerExpanded.value = getVal(val)
+        }
+    )
+
+    function isRowExpanded(key: string) {
+        return innerExpanded.value.includes(key)
+    }
+
+    function setExpanded(val: string[]) {
+        if (props.expanded !== void 0) {
+            emit('update:expanded', val)
+        } else {
+            innerExpanded.value = val
+        }
+    }
+
+    function updateExpanded(key: string, add: boolean) {
+        const target = innerExpanded.value.slice()
+        const index = target.indexOf(key)
+
+        if (add === true) {
+            if (index === -1) {
+                target.push(key)
+                setExpanded(target)
+            }
+        } else if (index !== -1) {
+            target.splice(index, 1)
+            setExpanded(target)
+        }
+    }
+
+    return {
+        isRowExpanded,
+        setExpanded,
+        updateExpanded
+    }
+}

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

@@ -0,0 +1,106 @@
+import { computed, ComputedRef } from 'vue-demi'
+import { TableProps, TableRow } from '../types'
+
+export const useTableRowSelectionProps = {
+    selection: {
+        type: String,
+        default: 'none',
+        validator: (v: string) => ['single', 'multiple', 'none'].includes(v)
+    },
+    selected: {
+        type: Array,
+        default: () => [] as (string | TableRow)[]
+    }
+}
+
+export const useTableRowSelectionEmits = ['update:selected', 'selection']
+
+export function useTableRowSelection(
+    props: TableProps,
+    emit: (event: string, val: any) => void,
+    computedRows: ComputedRef<TableRow[]>,
+    getRowKey: ComputedRef<(val: string | TableRow) => any>
+) {
+    const selectedKeys = computed(() => {
+        return props.selected
+            .map(getRowKey.value)
+            .reduce((acc, key: string) => {
+                acc[key] = true
+
+                return acc
+            }, {} as Record<string, boolean>)
+    })
+
+    const hasSelectionMode = computed(() => {
+        return props.selection !== 'none'
+    })
+
+    const singleSelection = computed(() => {
+        return props.selection === 'single'
+    })
+
+    const multipleSelection = computed(() => {
+        return props.selection === 'multiple'
+    })
+
+    const allRowsSelected = computed(
+        () =>
+            computedRows.value.length > 0 &&
+            computedRows.value.every(
+                (row) => selectedKeys.value[getRowKey.value(row)] === true
+            )
+    )
+
+    const someRowsSelected = computed(
+        () =>
+            allRowsSelected.value !== true &&
+            computedRows.value.some(
+                (row) => selectedKeys.value[getRowKey.value(row)] === true
+            )
+    )
+
+    const rowsSelectedNumber = computed(() => props.selected.length)
+
+    function isRowSelected(key: string) {
+        return selectedKeys.value[key] === true
+    }
+
+    function clearSelection() {
+        emit('update:selected', [])
+    }
+
+    function updateSelection(
+        keys: string[],
+        rows: (string | TableRow)[],
+        added: boolean,
+        evt?: (event: string, val: any) => void
+    ) {
+        emit('selection', { rows, added, keys, evt })
+
+        const payload =
+            singleSelection.value === true
+                ? added === true
+                    ? rows
+                    : []
+                : added === true
+                ? props.selected.concat(rows as string[])
+                : props.selected.filter(
+                      (row) => keys.includes(getRowKey.value(row)) === false
+                  )
+
+        emit('update:selected', payload)
+    }
+
+    return {
+        hasSelectionMode,
+        singleSelection,
+        multipleSelection,
+        allRowsSelected,
+        someRowsSelected,
+        rowsSelectedNumber,
+
+        isRowSelected,
+        clearSelection,
+        updateSelection
+    }
+}

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

@@ -0,0 +1,125 @@
+import { computed, ComputedRef } from 'vue-demi'
+
+import { sortDate } from '../../../utils/sort'
+import { isNumber, isDate, isObject } from '../../../utils/is'
+import { TableProps, TableColumn, SortMethod } from '../types'
+import { TablePagination } from './tablePagination'
+
+export const useTableSortProps = {
+    sortMethod: Function,
+    binaryStateSort: Boolean,
+    columnSortOrder: {
+        type: String,
+        validator: (v: string) => v === 'asc' || v === 'des',
+        default: 'asc'
+    }
+}
+
+export function useTableSort(
+    props: TableProps,
+    computedPagination: ComputedRef<TablePagination>,
+    colList: ComputedRef<TableColumn[]>,
+    setPagination: Function
+) {
+    const columnToSort = computed(() => {
+        const { sortBy } = computedPagination.value
+
+        return sortBy
+            ? colList.value.find((def) => def.name === sortBy) || null
+            : 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 SortMethod)
+    )
+
+    function sort(col: string | TableColumn) {
+        let sortOrder: TableProps['columnSortOrder'] = props.columnSortOrder
+
+        if (isObject(col) === true) {
+            if ((col as TableColumn).sortOrder) {
+                sortOrder = (col as TableColumn).sortOrder
+            }
+
+            col = (col as TableColumn).name
+        } else {
+            const def = colList.value.find((def) => def.name === col)
+            if (def !== void 0 && def.sortOrder) {
+                sortOrder = def.sortOrder
+            }
+        }
+
+        let { sortBy, descending } = computedPagination.value
+
+        if (sortBy !== col) {
+            sortBy = col as string
+            descending = sortOrder === 'des'
+        } else if (props.binaryStateSort === true) {
+            descending = !descending
+        } else if (descending === true) {
+            if (sortOrder === 'asc') {
+                sortBy = null
+            } else {
+                descending = false
+            }
+        } else {
+            // ascending
+            if (sortOrder === 'asc') {
+                descending = true
+            } else {
+                sortBy = null
+            }
+        }
+
+        setPagination({ sortBy, descending, page: 1 })
+    }
+
+    return {
+        columnToSort,
+        computedSortMethod,
+        sort
+    }
+}

package/src/components/DlTable/index.ts

@@ -0,0 +1,6 @@
+import DlTr from './DlTr.vue'
+import DlTh from './DlTh.vue'
+import DlTd from './DlTd.vue'
+import DlTable from './DlTable.vue'
+
+export { DlTr, DlTh, DlTd, DlTable }

package/src/components/DlTable/types.ts

@@ -0,0 +1,96 @@
+export type TableProps = {
+    columns: TableColumn[]
+    rows: TableRow[]
+    visibleColumns: string[]
+    filter: Filter
+    filterMethod: FilterMethod
+    sortMethod: SortMethod
+    selected: string[]
+    expanded: string[]
+    columnSortOrder: 'asc' | 'des'
+    [key: string]: any
+}
+
+export type TableRow = {
+    [key: string]: any
+}
+
+export type Filter = string | Record<string, any>
+
+export type TableColumn = {
+    name: string
+    label: string
+    field: string | ((row: TableRow) => string)
+    required?: boolean
+    align?: 'right' | 'left' | 'center'
+    sortable?: boolean
+    sort?: (a: any, b: any, rowA: TableRow, rowB: TableRow) => number
+    sortOrder?: 'asc' | 'des'
+    format?: (val: any, row: TableRow) => any
+    style?: string | ((row: TableRow) => string)
+    classes?: string | ((row: TableRow) => string)
+    headerStyle?: string
+    headerClasses?: string
+}
+
+export type FilterMethod = (
+    rows: TableRow[],
+    terms: Filter,
+    cols: TableColumn[],
+    getCellValue: (col: TableColumn, row: TableRow) => any
+) => TableRow[]
+
+export type SortMethod = (
+    rows: TableRow[],
+    sortBy: string,
+    descending: boolean
+) => TableRow[]
+
+export type Pagination = {
+    page: number
+    rowsPerPage: number
+    rowsNumber?: number
+    sortBy?: string | null
+    descending?: boolean
+}
+
+export type RequestProp = {
+    pagination: Pagination
+    filter?: FilterMethod
+    getCellValue?: (col: TableColumn, row: TableRow) => any
+}
+
+export type SelectionDetails = {
+    rows: TableRow[]
+    keys: string[]
+    added: boolean
+    evt: Event
+}
+
+export type ScrollPosition = {
+    index: number
+    from: number
+    to: number
+    direction: 'increase' | 'decrease'
+}
+
+export interface EnhancedCol extends TableColumn {
+    iconClass: string
+    thClass: string
+    tdStyle: ((row: TableRow) => string) | (() => any)
+    tdClass: (row: TableRow) => string
+}
+
+export type VirtualScroll = {
+    [key: string]: any
+    reset: () => void
+    scrollTo: (toIndex: number | string, edge?: number | string) => void
+}
+
+export type TypographyProps = {
+    variant?: string
+    size?: string
+    uppercase?: boolean
+    bold?: boolean
+    color?: string
+}