@dataloop-ai/components 0.13.0

package/src/components/DlTable/dl-table-styles.scss

@@ -0,0 +1,466 @@
+.dl-table {
+  width: 100%;
+  max-width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  .dl-table__top,
+  .dl-table__bottom,
+  thead tr:first-child th {
+    /* bg color is important for th; just specify one */
+    background-color: var(--dl-color-panel-background);
+  }
+
+  thead tr th {
+    position: sticky !important;
+    z-index: 1;
+  }
+
+  thead tr:first-child th {
+    top: 0;
+  }
+
+  /* this is when the loading indicator appears */
+  &.dl-table--loading thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 40px;
+  }
+
+  th:first-child,
+  td:first-child {
+    padding-left: 16px;
+  }
+
+  th:last-child,
+  td:last-child {
+    padding-right: 16px;
+  }
+
+  thead tr {
+    height: 34px;
+  }
+
+  tbody tr {
+    height: 40px;
+
+    &:not(.dl-tr--no-hover):hover {
+      td:not(.dl-td--no-hover) {
+        background-color: var(--dl-color-fill-hover);
+      }
+    }
+  }
+
+
+  .dl-table-cell-inner-div {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    padding: 10px 16px;
+  }
+
+  th {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 14px;
+    color: var(--dl-color-medium);
+    background-color: inherit;
+    user-select: none;
+
+    &.empty-col {
+      cursor: default !important;
+
+      &:active {
+        cursor: default !important
+      }
+    }
+
+    &.sortable {
+      cursor: pointer;
+
+      &:hover .dl-table__sort-icon {
+        opacity: .64 !important;
+      }
+    }
+
+    &.sorted .dl-table__sort-icon {
+      opacity: .86 !important;
+    }
+
+    &.sort-desc .dl-table__sort-icon {
+      &::v-deep .dl-icon {
+        transform: rotate(180deg) !important;
+      }
+    }
+  }
+
+  thead,
+  td,
+  th {
+    border-style: solid;
+    border-width: 0;
+  }
+
+  .dl-tr {
+    &--no-hover {
+      &:hover {
+        td {
+          background-color: none !important;
+        }
+      }
+    }
+  }
+
+  .dl-td {
+    &--no-hover {
+      &:hover {
+        background-color: none !important;
+      }
+    }
+  }
+
+  tbody>tr:not(.dl-tr--no-hover):hover>td:not(.dl-td--no-hover):before {
+    content: '';
+  }
+
+  tbody {
+    tr.selected {
+      background-color: var(--dl-color-fill);
+    }
+
+    tr.selected td:after {
+      content: '';
+    }
+  }
+
+  &--draggable-columns {
+    th {
+      cursor: grab;
+
+      &:active {
+        cursor: grabbing !important;
+      }
+    }
+  }
+
+  &--no-wrap {
+
+    th,
+    td {
+      white-space: nowrap;
+    }
+  }
+
+  &__container {
+    position: relative;
+
+    *>div:first-child {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+    }
+
+    *>div:last-child {
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+    }
+
+  }
+
+  &__separator {
+    min-width: 8px !important;
+  }
+
+  &__title {
+    font-size: 20px;
+    letter-spacing: .005em;
+    font-weight: 400;
+    color: var(--dl-color-darker);
+  }
+
+  &--bordered {
+    border: 1px solid var(--dl-color-separator);
+    border-radius: 2px;
+  }
+
+  &__control {
+    display: flex;
+    align-items: center;
+  }
+
+  &__sort-icon {
+    transition: transform .3s cubic-bezier(.25, .8, .5, 1);
+    opacity: 0;
+
+    &--left,
+    &--center {
+      margin-left: 4px;
+    }
+
+    &--right {
+      margin-right: 4px;
+    }
+  }
+
+  &__middle {
+    max-width: 100%;
+  }
+
+  &__progress {
+    height: 0 !important;
+
+    th {
+      padding: 0 !important;
+      border: 0 !important;
+    }
+
+    .dl-progress-wrapper {
+      position: absolute !important;
+      bottom: 0 !important;
+
+      &::v-deep .progress-container {
+        .dl-progress-bar {
+          height: 2px !important;
+          margin: 0;
+        }
+      }
+    }
+  }
+
+
+  &__bottom {
+    border-top: 1px solid var(--dl-color-separator);
+    min-height: 50px;
+    padding: 4px 14px 4px 16px;
+    font-size: 12px;
+    line-height: 14px;
+
+    .dl-table__control {
+      width: 100%;
+      min-height: 24px;
+    }
+  }
+
+  &__bottom--nodata {
+    color: var(--dl-color-lighter);
+
+    .dl-table__control {
+      justify-content: center;
+    }
+  }
+
+  &--col-auto-width {
+    width: 1px;
+  }
+
+  &--col-checkbox-wrapper {
+    text-align: left;
+  }
+
+  &__top {
+    position: relative;
+    padding: 12px 16px;
+
+    .dl-table__control {
+      flex-wrap: wrap;
+    }
+  }
+
+  thead,
+  tr,
+  th,
+  td {
+    border-color: var(--dl-color-separator);
+
+
+    &>label {
+      padding: 0;
+    }
+  }
+
+  tbody {
+    td {
+      position: relative;
+      text-transform: capitalize;
+      font-size: 12px;
+      line-height: 12px;
+      background-color: inherit;
+      color: var(--dl-color-darker);
+
+      .dl-table-cell-inner-div {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      &:before,
+      &:after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        pointer-events: none;
+      }
+
+      &:before {
+        // background-color: var(--dl-color-fill-hover);
+      }
+
+      &:after {
+        // background-color: var(--dl-color-fill);
+      }
+    }
+
+    tr.selected td:after {
+      content: '';
+    }
+  }
+
+  &__is-dragging {
+    background-color: var(--dl-color-fill);
+  }
+
+  &__selected {
+    background-color: var(--dl-color-fill) !important;
+    color: var(--dl-color-fill) !important;
+    border-color: var(--dl-color-fill) !important;
+  }
+
+  &__drag {
+    position: absolute;
+    top: -99999px;
+    left: -99999px;
+    z-index: 10000;
+    overflow: visible;
+    opacity: 1;
+    box-shadow: 0px 3px 6px rgba(16, 30, 115, 0.15);
+    border-radius: 2px;
+    font-size: 12px;
+    background-color: var(--dl-color-panel-background);
+
+    & th {
+      cursor: grabbing !important;
+    }
+
+    & td {
+      border-color: transparent;
+    }
+
+    &--col {
+      display: flex;
+      flex-direction: column;
+
+      & td {
+        text-align: center;
+        height: 40px;
+      }
+    }
+  }
+}
+
+.draggable-icon {
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing !important
+  }
+}
+
+/*
+ * dense size
+ */
+
+.dl-table--dense {
+  .dl-table__top {
+    position: relative;
+    padding: 5px 16px;
+  }
+
+  .dl-table__bottom {
+    min-height: 33px;
+  }
+
+  .dl-table__sort-icon {
+    // font-size: 110%;
+    font-size: 80%;
+  }
+
+  .dl-table {
+
+    th {
+      font-size: 12px;
+      line-height: 12px;
+    }
+
+    thead tr {
+      height: 24px;
+    }
+
+    tbody tr {
+      height: 28px;
+    }
+
+    .dl-table-cell-inner-div {
+      padding: 7px 16px;
+    }
+  }
+
+  .dl-table__bottom-item {
+    margin-right: 8px;
+  }
+
+  .dl-table__select {
+
+    .dl-field__control,
+    .dl-field__native {
+      min-height: 24px;
+      padding: 0;
+    }
+
+    .dl-field__marginal {
+      height: 24px;
+    }
+  }
+}
+
+/*
+ * Separators
+ */
+.dl-table--none-separator {
+  thead th {
+    border-bottom-width: 1px;
+  }
+}
+
+.dl-table--horizontal-separator,
+.dl-table--cell-separator {
+
+  thead th,
+  tbody tr:not(:last-child)>td {
+    border-bottom-width: 1px;
+  }
+}
+
+.dl-table--vertical-separator,
+.dl-table--cell-separator {
+
+  td,
+  th {
+    border-left-width: 1px;
+  }
+
+  thead tr:last-child th,
+  &.dl-table--loading tr:nth-last-child(2) th {
+    border-bottom-width: 1px;
+  }
+
+  td:first-child,
+  th:first-child {
+    border-left: 0;
+  }
+
+  .dl-table__top {
+    position: relative;
+    border-bottom: 1px solid var(--dl-color-separator);
+  }
+}

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

@@ -0,0 +1,64 @@
+import { isVue2, computed } from 'vue-demi'
+
+export const useTableActionsV2Props = {
+    rowClick: {
+        type: Function,
+        default: null as Function | null
+    },
+    rowDblclick: {
+        type: Function,
+        default: null as Function | null
+    },
+    rowContextmenu: {
+        type: Function,
+        default: null as Function | null
+    }
+}
+
+export const useTableActionsV3Props = {
+    onRowClick: {
+        type: Function,
+        default: null as Function | null
+    },
+    onRowDblclick: {
+        type: Function,
+        default: null as Function | null
+    },
+    onRowContextmenu: {
+        type: Function,
+        default: null as Function | null
+    }
+}
+
+export const useTableActionsProps = isVue2
+    ? useTableActionsV2Props
+    : useTableActionsV3Props
+
+export function useTableActions(props: any) {
+    const hasClickEvent = computed(() =>
+        Boolean(props.onRowClick || props.rowClick)
+    )
+
+    const hasDblClickEvent = computed(() =>
+        Boolean(props.onRowDblclick || props.rowDblclick)
+    )
+
+    const hasContextMenuEvent = computed(() =>
+        Boolean(props.onRowContextmenu || props.rowContextmenu)
+    )
+
+    const hasAnyAction = computed(() =>
+        [
+            hasClickEvent.value,
+            hasDblClickEvent.value,
+            hasContextMenuEvent.value
+        ].some((item) => item === true)
+    )
+
+    return {
+        hasClickEvent,
+        hasDblClickEvent,
+        hasContextMenuEvent,
+        hasAnyAction
+    }
+}

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

@@ -0,0 +1,112 @@
+import { computed, ComputedRef } from 'vue-demi'
+
+import { isNumber } from '../../../utils/is'
+import { TableProps, TableColumn, TableRow } from '../types'
+import { TablePagination } from './tablePagination'
+
+export const useTableColumnSelectionProps = {
+    visibleColumns: Array
+}
+
+export function useTableColumnSelection(
+    props: TableProps,
+    computedPagination: ComputedRef<TablePagination>,
+    hasSelectionMode: ComputedRef<boolean>,
+    hasDraggableRows: ComputedRef<boolean>
+) {
+    const colList = computed(() => {
+        if (props.columns !== void 0) {
+            return props.columns
+        }
+
+        // we infer columns from first row
+        const row = props.rows[0]
+
+        return (
+            row !== void 0
+                ? Object.keys(row).map((name) => ({
+                      name,
+                      label: name.toUpperCase(),
+                      field: name,
+                      align: isNumber(row[name]) ? 'right' : 'left',
+                      sortable: true
+                  }))
+                : []
+        ) as TableColumn[]
+    })
+
+    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 updatedCols = cols.map((col) => {
+            const align = col.align || 'right'
+            const alignClass = `text-${align}`
+
+            return {
+                ...col,
+                align,
+                iconClass: `dl-table__sort-icon dl-table__sort-icon--${align}`,
+                thClass:
+                    alignClass +
+                    (col.headerClasses !== void 0
+                        ? ' ' + 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
+                        : () => '',
+
+                tdClass:
+                    col.classes !== void 0
+                        ? typeof col.classes !== 'function'
+                            ? () => alignClass + ' ' + col.classes
+                            : (row: TableRow) =>
+                                  alignClass +
+                                  ' ' +
+                                  (col.classes as Function)(row)
+                        : () => alignClass
+            }
+        })
+
+        return updatedCols
+    })
+
+    const computedColsMap = computed(() => {
+        const names: Record<string, TableColumn> = {}
+        computedCols.value.forEach((col) => {
+            names[col.name] = col
+        })
+        return names
+    })
+
+    const computedColspan = computed(() => {
+        return props.tableColspan !== void 0
+            ? props.tableColspan
+            : computedCols.value.length +
+                  (hasSelectionMode.value === true ? 1 : 0) +
+                  (hasDraggableRows.value === true ? 1 : 0)
+    })
+
+    return {
+        colList,
+        computedCols,
+        computedColsMap,
+        computedColspan
+    }
+}

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

@@ -0,0 +1,42 @@
+import { computed, watch, nextTick } from 'vue-demi'
+import { TableProps, FilterMethod } from '../types'
+
+export const useTableFilterProps = {
+    filter: [String, Object],
+    filterMethod: Function
+}
+
+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 FilterMethod
+    )
+
+    watch(
+        () => props.filter,
+        () => {
+            nextTick(() => {
+                setPagination({ page: 1 }, true)
+            })
+        },
+        { deep: true }
+    )
+
+    return { computedFilterMethod }
+}