@dataloop-ai/components 0.15.7 → 0.16.0

package/src/components/{DlTable → compound/DlTable}/DlTable.vue

@@ -466,13 +466,15 @@ import {
     useTablePaginationState,
     useTablePaginationProps
 } from './hooks/tablePagination'
-import { DlTr, DlTh, DlTd } from './'
+import DlTr from './components/DlTr.vue'
+import DlTh from './components/DlTh.vue'
+import DlTd from './components/DlTd.vue'
 import {
     commonVirtPropsList,
     commonVirtScrollProps,
     ScrollDetails
-} from '../DlVirtualScroll/useVirtualScroll'
-import { DlVirtualScroll } from '../DlVirtualScroll'
+} from '../../shared/DlVirtualScroll/useVirtualScroll'
+import { DlVirtualScroll } from '../../shared/DlVirtualScroll'
 import { useTableFilter, useTableFilterProps } from './hooks/tableFilter'
 import { useTableSort, useTableSortProps } from './hooks/tableSort'
 import {
@@ -493,14 +495,12 @@ import { useTableActionsProps, useTableActions } from './hooks/tableActions'
 import {
     applyDraggableRows,
     applyDraggableColumns
-} from '../../utils/draggable-table'
-import { injectProp } from '../../utils/inject-object-prop'
-import { TableRow, TableProps, TableColumn } from './types'
+} from '../../../utils/draggable-table'
+import { injectProp } from '../../../utils/inject-object-prop'
+import { DlTableRow, DlTableProps, DlTableColumn } from './types'
 import { DlPagination } from '../DlPagination'
-import DlCheckbox from '../DlCheckbox.vue'
-import DlProgressBar from '../DlProgressBar.vue'
-import { ResizableManager } from './ResizableManager'
-import DlIcon from '../DlIcon.vue'
+import { DlIcon, DlCheckbox, DlProgressBar } from '../../essential'
+import { ResizableManager } from './utils'
 import { v4 } from 'uuid'
 
 export default defineComponent({
@@ -855,7 +855,7 @@ export default defineComponent({
             useTableRowExpand(props, emit)
 
         const filteredSortedRows = computed(() => {
-            let rows = props.rows as TableRow[]
+            let rows = props.rows as DlTableRow[]
 
             if (rows.length === 0) {
                 return rows
@@ -935,22 +935,22 @@ export default defineComponent({
             clearSelection,
             updateSelection
         } = useTableRowSelection(
-            props as unknown as TableProps,
+            props as unknown as DlTableProps,
             emit,
             computedRows,
-            getRowKey as ComputedRef<(val: string | TableRow) => any>
+            getRowKey as ComputedRef<(val: string | DlTableRow) => any>
         )
 
         const { colList, computedCols, computedColsMap, computedColspan } =
             useTableColumnSelection(
-                props as unknown as TableProps,
+                props as unknown as DlTableProps,
                 computedPagination,
                 hasSelectionMode,
                 hasDraggableRows
             )
 
         const { columnToSort, computedSortMethod, sort } = useTableSort(
-            props as unknown as TableProps,
+            props as unknown as DlTableProps,
             computedPagination,
             colList,
             setPagination
@@ -1107,7 +1107,7 @@ export default defineComponent({
 
         const onTrClick = (
             evt: MouseEvent,
-            row: TableRow,
+            row: DlTableRow,
             pageIndex: number
         ) => {
             if (hasClickEvent.value) {
@@ -1117,7 +1117,7 @@ export default defineComponent({
 
         const onTrDblClick = (
             evt: MouseEvent,
-            row: TableRow,
+            row: DlTableRow,
             pageIndex: number
         ) => {
             if (hasDblClickEvent.value) {
@@ -1127,7 +1127,7 @@ export default defineComponent({
 
         const onTrContextMenu = (
             evt: MouseEvent,
-            row: TableRow,
+            row: DlTableRow,
             pageIndex: number
         ) => {
             if (hasContextMenuEvent.value) {
@@ -1170,7 +1170,7 @@ export default defineComponent({
         function getBodyScope(data: Record<string, any>) {
             injectBodyCommonScope(data)
 
-            data.cols = data.cols.map((col: TableColumn) =>
+            data.cols = data.cols.map((col: DlTableColumn) =>
                 Object.defineProperty({ ...col }, 'value', {
                     get: () => getCellValue(col, data.row),
                     enumerable: true
@@ -1264,4 +1264,4 @@ export default defineComponent({
 })
 </script>
 
-<style scoped src="./dl-table-styles.scss" lang="scss" />
+<style scoped src="./styles/dl-table-styles.scss" lang="scss" />

package/src/components/{DlTable → compound/DlTable/components}/DlTd.vue

@@ -17,9 +17,9 @@
 
 <script lang="ts">
 import { defineComponent, getCurrentInstance, computed, ref } from 'vue-demi'
-import { getColor } from '../../utils'
-import { DlTooltip } from '../'
-import { useSizeObserver } from '../../hooks/use-size-observer'
+import { getColor } from '../../../../utils'
+import { DlTooltip } from '../../../essential'
+import { useSizeObserver } from '../../../../hooks/use-size-observer'
 
 export default defineComponent({
     name: 'DlTd',
@@ -106,4 +106,4 @@ export default defineComponent({
 })
 </script>
 
-<style scoped src="./dl-table-styles.scss" lang="scss" />
+<style scoped src="../styles/dl-table-styles.scss" lang="scss" />

package/src/components/{DlTable → compound/DlTable/components}/DlTh.vue

@@ -28,9 +28,8 @@
 
 <script lang="ts">
 import { defineComponent, getCurrentInstance, computed, ref } from 'vue-demi'
-import { useSizeObserver } from '../../hooks/use-size-observer'
-import DlIcon from '../DlIcon.vue'
-import DlTooltip from '../DlTooltip.vue'
+import { useSizeObserver } from '../../../../hooks/use-size-observer'
+import { DlIcon, DlTooltip } from '../../../essential'
 
 export default defineComponent({
     name: 'DlTh',
@@ -123,4 +122,4 @@ export default defineComponent({
 })
 </script>
 
-<style scoped src="./dl-table-styles.scss" lang="scss" />
+<style scoped src="../styles/dl-table-styles.scss" lang="scss" />

package/src/components/{DlTable → compound/DlTable/components}/DlTr.vue

@@ -49,4 +49,4 @@ export default defineComponent({
 })
 </script>
 
-<style scoped src="./dl-table-styles.scss" lang="scss" />
+<style scoped src="../styles/dl-table-styles.scss" lang="scss" />

package/src/components/{DlTable → compound/DlTable}/hooks/tableColumnSelection.ts

@@ -1,7 +1,7 @@
 import { computed, ComputedRef } from 'vue-demi'
 
-import { isNumber } from '../../../utils/is'
-import { TableProps, TableColumn, TableRow } from '../types'
+import { isNumber } from '../../../../utils/is'
+import { DlTableProps, DlTableColumn, DlTableRow } from '../types'
 import { TablePagination } from './tablePagination'
 
 export const useTableColumnSelectionProps = {
@@ -9,7 +9,7 @@ export const useTableColumnSelectionProps = {
 }
 
 export function useTableColumnSelection(
-    props: TableProps,
+    props: DlTableProps,
     computedPagination: ComputedRef<TablePagination>,
     hasSelectionMode: ComputedRef<boolean>,
     hasDraggableRows: ComputedRef<boolean>
@@ -32,7 +32,7 @@ export function useTableColumnSelection(
                       sortable: true
                   }))
                 : []
-        ) as TableColumn[]
+        ) as DlTableColumn[]
     })
 
     const computedCols = computed(() => {
@@ -76,7 +76,7 @@ export function useTableColumnSelection(
                     col.classes !== void 0
                         ? typeof col.classes !== 'function'
                             ? () => alignClass + ' ' + col.classes
-                            : (row: TableRow) =>
+                            : (row: DlTableRow) =>
                                   alignClass +
                                   ' ' +
                                   (col.classes as Function)(row)
@@ -88,7 +88,7 @@ export function useTableColumnSelection(
     })
 
     const computedColsMap = computed(() => {
-        const names: Record<string, TableColumn> = {}
+        const names: Record<string, DlTableColumn> = {}
         computedCols.value.forEach((col) => {
             names[col.name] = col
         })

package/src/components/{DlTable → compound/DlTable}/hooks/tableFilter.ts

@@ -1,5 +1,5 @@
 import { computed, watch, nextTick } from 'vue-demi'
-import { TableProps, FilterMethod } from '../types'
+import { DlTableProps, DlTableFilterMethod } from '../types'
 
 export const useTableFilterProps = {
     filter: [String, Object],
@@ -25,7 +25,7 @@ export function useTableFilter(props: any, setPagination: Function) {
                               return haystack.indexOf(lowerTerms) !== -1
                           })
                       )
-                  }) as FilterMethod
+                  }) as DlTableFilterMethod
     )
 
     watch(

package/src/components/{DlTable → compound/DlTable}/hooks/tableRowSelection.ts

@@ -1,5 +1,5 @@
 import { computed, ComputedRef } from 'vue-demi'
-import { TableProps, TableRow } from '../types'
+import { DlTableProps, DlTableRow } from '../types'
 
 export const useTableRowSelectionProps = {
     selection: {
@@ -9,17 +9,17 @@ export const useTableRowSelectionProps = {
     },
     selected: {
         type: Array,
-        default: () => [] as (string | TableRow)[]
+        default: () => [] as (string | DlTableRow)[]
     }
 }
 
 export const useTableRowSelectionEmits = ['update:selected', 'selection']
 
 export function useTableRowSelection(
-    props: TableProps,
+    props: DlTableProps,
     emit: (event: string, val: any) => void,
-    computedRows: ComputedRef<TableRow[]>,
-    getRowKey: ComputedRef<(val: string | TableRow) => any>
+    computedRows: ComputedRef<DlTableRow[]>,
+    getRowKey: ComputedRef<(val: string | DlTableRow) => any>
 ) {
     const selectedKeys = computed(() => {
         return props.selected
@@ -71,7 +71,7 @@ export function useTableRowSelection(
 
     function updateSelection(
         keys: string[],
-        rows: (string | TableRow)[],
+        rows: (string | DlTableRow)[],
         added: boolean,
         evt?: (event: string, val: any) => void
     ) {

package/src/components/{DlTable → compound/DlTable}/hooks/tableSort.ts

@@ -1,8 +1,8 @@
 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 { sortDate } from '../../../../utils/sort'
+import { isNumber, isDate, isObject } from '../../../../utils/is'
+import { DlTableProps, DlTableColumn, DlTableSortMethod } from '../types'
 import { TablePagination } from './tablePagination'
 
 export const useTableSortProps = {
@@ -16,9 +16,9 @@ export const useTableSortProps = {
 }
 
 export function useTableSort(
-    props: TableProps,
+    props: DlTableProps,
     computedPagination: ComputedRef<TablePagination>,
-    colList: ComputedRef<TableColumn[]>,
+    colList: ComputedRef<DlTableColumn[]>,
     setPagination: Function
 ) {
     const columnToSort = computed(() => {
@@ -73,18 +73,18 @@ export function useTableSort(
 
                       return A < B ? -1 * dir : A === B ? 0 : dir
                   })
-              }) as SortMethod)
+              }) as DlTableSortMethod)
     )
 
-    function sort(col: string | TableColumn) {
-        let sortOrder: TableProps['columnSortOrder'] = props.columnSortOrder
+    function sort(col: string | DlTableColumn) {
+        let sortOrder: DlTableProps['columnSortOrder'] = props.columnSortOrder
 
         if (isObject(col) === true) {
-            if ((col as TableColumn).sortOrder) {
-                sortOrder = (col as TableColumn).sortOrder
+            if ((col as DlTableColumn).sortOrder) {
+                sortOrder = (col as DlTableColumn).sortOrder
             }
 
-            col = (col as TableColumn).name
+            col = (col as DlTableColumn).name
         } else {
             const def = colList.value.find((def) => def.name === col)
             if (def !== void 0 && def.sortOrder) {

package/src/components/compound/DlTable/index.ts

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

package/src/components/compound/DlTable/types.ts

@@ -0,0 +1,96 @@
+export type DlTableProps = {
+    columns: DlTableColumn[]
+    rows: DlTableRow[]
+    visibleColumns: string[]
+    filter: DlTableFilter
+    filterMethod: DlTableFilterMethod
+    sortMethod: DlTableSortMethod
+    selected: string[]
+    expanded: string[]
+    columnSortOrder: 'asc' | 'des'
+    [key: string]: any
+}
+
+export type DlTableRow = {
+    [key: string]: any
+}
+
+export type DlTableFilter = string | Record<string, any>
+
+export type DlTableColumn = {
+    name: string
+    label: string
+    field: string | ((row: DlTableRow) => string)
+    required?: boolean
+    align?: 'right' | 'left' | 'center'
+    sortable?: boolean
+    sort?: (a: any, b: any, rowA: DlTableRow, rowB: DlTableRow) => number
+    sortOrder?: 'asc' | 'des'
+    format?: (val: any, row: DlTableRow) => any
+    style?: string | ((row: DlTableRow) => string)
+    classes?: string | ((row: DlTableRow) => string)
+    headerStyle?: string
+    headerClasses?: string
+}
+
+export type DlTableFilterMethod = (
+    rows: DlTableRow[],
+    terms: DlTableFilter,
+    cols: DlTableColumn[],
+    getCellValue: (col: DlTableColumn, row: DlTableRow) => any
+) => DlTableRow[]
+
+export type DlTableSortMethod = (
+    rows: DlTableRow[],
+    sortBy: string,
+    descending: boolean
+) => DlTableRow[]
+
+export type DlTablePagination = {
+    page: number
+    rowsPerPage: number
+    rowsNumber?: number
+    sortBy?: string | null
+    descending?: boolean
+}
+
+export type DlTableRequestProp = {
+    pagination: DlTablePagination
+    filter?: DlTableFilterMethod
+    getCellValue?: (col: DlTableColumn, row: DlTableRow) => any
+}
+
+export type DlTableSelectionDetails = {
+    rows: DlTableRow[]
+    keys: string[]
+    added: boolean
+    evt: Event
+}
+
+export type DlTableScrollPosition = {
+    index: number
+    from: number
+    to: number
+    direction: 'increase' | 'decrease'
+}
+
+export interface DlTableEnhancedCol extends DlTableColumn {
+    iconClass: string
+    thClass: string
+    tdStyle: ((row: DlTableRow) => string) | (() => any)
+    tdClass: (row: DlTableRow) => string
+}
+
+export type DlTableVirtualScrollType = {
+    [key: string]: any
+    reset: () => void
+    scrollTo: (toIndex: number | string, edge?: number | string) => void
+}
+
+export type DlTableTypographyProps = {
+    variant?: string
+    size?: string
+    uppercase?: boolean
+    bold?: boolean
+    color?: string
+}

package/src/components/compound/DlTable/utils/index.ts

@@ -0,0 +1 @@
+export * from './ResizableManager'

package/src/components/{DlTabs → compound/DlTabs}/DlTabs.vue

@@ -35,10 +35,10 @@
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent, PropType } from 'vue-demi'
-import { hasOverflowing } from '../../utils'
-import { DlTab } from './'
-import TabsWrapper from './TabsWrapper.vue'
-import type { TabDetails } from './types'
+import { hasOverflowing } from '../../../utils'
+import DlTab from './components/DlTab.vue'
+import TabsWrapper from './components/TabsWrapper.vue'
+import type { DlTabDetails } from './types'
 
 export default defineComponent({
     name: 'DlTabs',
@@ -51,7 +51,7 @@ export default defineComponent({
         event: 'update:model-value'
     },
     props: {
-        items: { type: Array as PropType<TabDetails[]>, required: true },
+        items: { type: Array as PropType<DlTabDetails[]>, required: true },
         vertical: { type: Boolean, default: false },
         fullWidth: { type: Boolean, default: false },
         disabled: { type: Boolean, default: false },

package/src/components/{DlTabs → compound/DlTabs/components}/DlTab.vue

@@ -25,10 +25,9 @@
     </div>
 </template>
 <script lang="ts">
-import DlTooltip from '../DlTooltip.vue'
-import DlIcon from '../DlIcon.vue'
+import { DlTooltip, DlIcon } from '../../../essential'
 import { defineComponent } from 'vue-demi'
-import { stopAndPrevent } from '../../utils'
+import { stopAndPrevent } from '../../../../utils'
 import { v4 } from 'uuid'
 
 export default defineComponent({

package/src/components/{DlTabs → compound/DlTabs/components}/TabsWrapper.vue

@@ -38,8 +38,8 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlButton } from '../DlButton'
-import DlIcon from '../DlIcon.vue'
+import { DlButton } from '../../../basic'
+import { DlIcon } from '../../../essential'
 
 export default defineComponent({
     components: {

package/src/components/{DlTabs → compound/DlTabs}/index.ts

@@ -1,4 +1,4 @@
-import DlTab from './DlTab.vue'
+import DlTab from './components/DlTab.vue'
 import DlTabs from './DlTabs.vue'
 
 export { DlTab, DlTabs }

package/src/components/{DlTabs → compound/DlTabs}/types.ts

@@ -1,4 +1,4 @@
-export interface TabDetails {
+export interface DlTabDetails {
     label: string
     name: string
     noCaps?: boolean

package/src/components/{DlToastMessage → compound/DlToast}/components/ToastComponent.vue

@@ -17,8 +17,7 @@
             <dl-alert
                 :type="type"
                 :closable="closable"
-                fluid
-                @update:model-value="(val) => closeToast(val)"
+                @update:model-value="closeToast"
             >
                 <span
                     class="v-toast__text"
@@ -37,7 +36,7 @@ import {
     onMounted,
     ref
 } from 'vue-demi'
-import DlAlert from '../../DlAlert.vue'
+import { DlAlert } from '../../../basic'
 import { Positions, Types } from '../utils/config'
 import { removeElement } from '../utils/render'
 import { Animation } from '../types'

package/src/components/compound/index.ts

@@ -0,0 +1,18 @@
+export * from './DlCharts'
+export * from './DlCounters'
+export * from './DlDateTime'
+export * from './DlDropdownButton'
+export * from './DlInput'
+export * from './DlItem'
+export * from './DlOptionGroup'
+export * from './DlPagination'
+export * from './DlRange'
+export * from './DlSearches'
+export * from './DlSelect'
+export * from './DlSlider'
+export * from './DlStepper'
+export * from './DlTable'
+export * from './DlTabPanels'
+export * from './DlTabs'
+export * from './DlToast'
+export * from './DlDialogBox'

package/src/components/compound/models.ts

@@ -0,0 +1 @@
+export * from './DlStepper/models'

package/src/components/compound/types.ts

@@ -0,0 +1,10 @@
+export * from './DlCharts/types'
+export * from './DlDateTime/types'
+export * from './DlDropdownButton'
+export * from './DlSearches/types'
+export * from './DlStepper/types'
+export * from './DlTabs/types'
+export * from './DlToast/types'
+export * from './DlDialogBox/types'
+export * from './DlOptionGroup/types'
+export * from './DlTable/types'

package/src/components/essential/DlBadge/index.ts

@@ -0,0 +1,2 @@
+import DlBadge from './DlBadge.vue'
+export { DlBadge }

package/src/components/{DlCheckbox.vue → essential/DlCheckbox/DlCheckbox.vue}

@@ -78,9 +78,9 @@
 
 <script lang="ts">
 import { defineComponent, toRaw } from 'vue-demi'
-import { getColor } from '../utils'
+import { getColor } from '../../../utils'
 import { v4 } from 'uuid'
-import { stopAndPrevent } from '../utils'
+import { stopAndPrevent } from '../../../utils'
 
 const ValueTypes = [Array, Boolean, String, Number, Object, Function, null]
 

package/src/components/essential/DlCheckbox/index.ts

@@ -0,0 +1,2 @@
+import DlCheckbox from './DlCheckbox.vue'
+export { DlCheckbox }

package/src/components/{DlColorPicker → essential/DlColorPicker}/DlColorPicker.vue

@@ -60,12 +60,12 @@
 </template>
 
 <script lang="ts">
-import Saturation from './DlSaturation.vue'
-import Hue from './DlHue.vue'
-import Alpha from './DlAlpha.vue'
-import Preview from './DlPreview.vue'
-import Box from './DlBox.vue'
-import Colors from './DlColors.vue'
+import Saturation from './components/DlSaturation.vue'
+import Hue from './components/DlHue.vue'
+import Alpha from './components/DlAlpha.vue'
+import Preview from './components/DlPreview.vue'
+import Box from './components/DlBox.vue'
+import Colors from './components/DlColors.vue'
 import { defineComponent, PropType } from 'vue-demi'
 import { rgb2hex, setColorValue } from './utils'
 import { NewColor } from './types'

package/src/components/{DlColorPicker → essential/DlColorPicker/components}/DlAlpha.vue

@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { createAlphaSquare, createLinearGradient } from './utils'
+import { createAlphaSquare, createLinearGradient } from '../utils'
 
 export default defineComponent({
     name: 'DlAlpha',

package/src/components/{DlColorPicker → essential/DlColorPicker/components}/DlColors.vue

@@ -42,7 +42,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { createAlphaSquare } from './utils'
+import { createAlphaSquare } from '../utils'
 
 export default defineComponent({
     name: 'DlColors',

package/src/components/{DlColorPicker → essential/DlColorPicker/components}/DlPreview.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { createAlphaSquare } from './utils'
+import { createAlphaSquare } from '../utils'
 
 export default defineComponent({
     name: 'DlPreview',

package/src/components/{DlColorPicker → essential/DlColorPicker/components}/DlSaturation.vue

@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { createLinearGradient } from './utils'
+import { createLinearGradient } from '../utils'
 
 export default defineComponent({
     name: 'DlSaturation',

package/src/components/essential/DlColorPicker/index.ts

@@ -0,0 +1,17 @@
+import DlColorPicker from './DlColorPicker.vue'
+import DlColors from './components/DlColors.vue'
+import DlHue from './components/DlHue.vue'
+import DlPreview from './components/DlPreview.vue'
+import DlSaturation from './components/DlSaturation.vue'
+import DlBox from './components/DlBox.vue'
+import DlAlpha from './components/DlAlpha.vue'
+
+export {
+    DlColorPicker,
+    DlColors,
+    DlHue,
+    DlPreview,
+    DlSaturation,
+    DlBox,
+    DlAlpha
+}

package/src/components/{DlColorPicker → essential/DlColorPicker}/types.ts

@@ -9,3 +9,6 @@ export type NewColor = {
     hsv: HSVColor
     hex: string
 }
+
+import { defaultColors as DlColorPickerColors } from './constants'
+export { DlColorPickerColors }

package/src/components/{DlIcon.vue → essential/DlIcon/DlIcon.vue}

@@ -31,7 +31,7 @@
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent } from 'vue-demi'
-import { getColor, loggerFactory } from '../utils'
+import { getColor, loggerFactory } from '../../../utils'
 
 export default defineComponent({
     name: 'DlIcon',