@dataloop-ai/components 0.18.144 → 0.19.0

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

@@ -1,17 +1,14 @@
 <template>
     <td
+        ref="tableTd"
         :class="classes"
         :style="styles"
+        :data-col-index="colIndex"
     >
-        <div
-            ref="tableTd"
-            class="dl-table-cell-inner-div"
-        >
-            <dl-tooltip v-if="hasEllipsis">
-                <slot />
-            </dl-tooltip>
+        <dl-tooltip v-if="!noTooltip && hasEllipsis">
             <slot />
-        </div>
+        </dl-tooltip>
+        <slot />
     </td>
 </template>
 
@@ -33,7 +30,12 @@ export default defineComponent({
         bgColor: {
             type: String,
             default: ''
-        }
+        },
+        colIndex: {
+            type: Number,
+            default: null
+        },
+        noTooltip: Boolean
     },
     setup(props) {
         const vm = getCurrentInstance()

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

@@ -1,28 +1,25 @@
 <template>
     <th
+        ref="tableTh"
         :style="headerStyle"
         :class="thClasses"
+        :data-col-index="colIndex"
         @click="onClick"
     >
-        <div
-            ref="tableTh"
-            class="dl-table-cell-inner-div"
-        >
-            <dl-icon
-                v-if="isSortable && align === 'right'"
-                :class="iconClass"
-                icon="icon-dl-arrow-up"
-            />
-            <dl-tooltip v-if="hasEllipsis">
-                <slot />
-            </dl-tooltip>
+        <dl-icon
+            v-if="isSortable && align === 'right'"
+            :class="iconClass"
+            icon="icon-dl-arrow-up"
+        />
+        <dl-tooltip v-if="hasEllipsis">
             <slot />
-            <dl-icon
-                v-if="isSortable && ['left', 'center'].includes(align)"
-                :class="iconClass"
-                icon="icon-dl-arrow-up"
-            />
-        </div>
+        </dl-tooltip>
+        <slot />
+        <dl-icon
+            v-if="isSortable && ['left', 'center'].includes(align)"
+            :class="iconClass"
+            icon="icon-dl-arrow-up"
+        />
     </th>
 </template>
 
@@ -42,7 +39,11 @@ export default defineComponent({
     },
     props: {
         props: { type: Object, default: null },
-        autoWidth: Boolean
+        autoWidth: Boolean,
+        colIndex: {
+            type: Number,
+            default: null
+        }
     },
     emits: ['click'],
 
@@ -83,10 +84,10 @@ export default defineComponent({
         }
 
         const thClasses = computed(() => {
-            let className = ''
+            let className = 'dl-th'
 
             if (props.autoWidth) {
-                className = 'dl-table--col-auto-width'
+                className = className.concat(' dl-table--col-auto-width')
             }
 
             if (column.value.thClass) {

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

@@ -0,0 +1,33 @@
+<template>
+    <component
+        :is="$props.tag"
+        v-if="isSortable"
+        ref="rootRef"
+        v-bind="props"
+        :class="$props.class"
+    >
+        <slot />
+    </component>
+    <component
+        :is="$props.tag"
+        v-else
+        v-bind="props"
+        :class="$props.class"
+    >
+        <slot />
+    </component>
+</template>
+<script lang="ts">
+import { defineComponent, getCurrentInstance } from 'vue-demi'
+import { useSortable, useSortableProps, emits } from '../hooks/use-sortable'
+
+export default defineComponent({
+    props: useSortableProps,
+    emits,
+    setup() {
+        const vm = getCurrentInstance()
+        const { getKey, rootRef } = useSortable(vm)
+        return { getKey, rootRef }
+    }
+})
+</script>

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

@@ -5,7 +5,7 @@ export const useTableActionsV2Props = {
         type: Function,
         default: null as Function | null
     },
-    rowDblclick: {
+    rowDoubleClick: {
         type: Function,
         default: null as Function | null
     },
@@ -20,7 +20,7 @@ export const useTableActionsV3Props = {
         type: Function,
         default: null as Function | null
     },
-    onRowDblclick: {
+    onRowDoubleClick: {
         type: Function,
         default: null as Function | null
     },
@@ -40,7 +40,7 @@ export function useTableActions(props: any) {
     )
 
     const hasDblClickEvent = computed(() =>
-        Boolean(props.onRowDblclick || props.rowDblclick)
+        Boolean(props.onRowDoubleClick || props.rowDoubleClick)
     )
 
     const hasContextMenuEvent = computed(() =>

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

@@ -5,9 +5,7 @@ import { DlTableProps, DlTableColumn, DlTableRow } from '../types'
 import { TablePagination } from './tablePagination'
 
 export const useTableColumnSelectionProps = {
-    // todo: fix later the
-    visibleColumns: { type: Array, required: false, default: null as any },
-    hasVisibleColumns: Boolean
+    visibleColumns: { type: Array, required: false, default: null as any }
 }
 
 export function useTableColumnSelection(
@@ -131,7 +129,8 @@ export function useTableColumnSelection(
             ? props.tableColspan
             : computedCols.value.length +
                   (hasSelectionMode.value === true ? 1 : 0) +
-                  (hasDraggableRows.value === true ? 1 : 0)
+                  (hasDraggableRows.value === true ? 1 : 0) +
+                  (props.isTreeTable ? 1 : 0)
     })
 
     return {

package/src/components/compound/DlTable/hooks/use-sortable.ts

@@ -0,0 +1,152 @@
+import {
+    Ref,
+    ref,
+    PropType,
+    watch,
+    onUnmounted,
+    computed,
+    useAttrs
+} from 'vue-demi'
+import Sortable, { SortableOptions } from 'sortablejs'
+import type { AutoScrollOptions } from 'sortablejs/plugins'
+
+type SortableOptionsProp = Omit<
+    SortableOptions | AutoScrollOptions,
+    | 'onUnchoose'
+    | 'onChoose'
+    | 'onStart'
+    | 'onEnd'
+    | 'onAdd'
+    | 'onUpdate'
+    | 'onSort'
+    | 'onRemove'
+    | 'onFilter'
+    | 'onMove'
+    | 'onClone'
+    | 'onChange'
+>
+
+export const emits = [
+    'unchoose',
+    'choose',
+    'start',
+    'end',
+    'add',
+    'update',
+    'sort',
+    'remove',
+    'filter',
+    'move',
+    'clone',
+    'change'
+]
+
+type ExposedProps = {
+    rootRef: Ref<HTMLDivElement | null>
+    sortable: Ref<Sortable | null>
+    isDragging: Ref<boolean>
+}
+
+const element = {
+    table: 'DlTable'
+}
+
+export const useSortableProps = {
+    props: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => {}
+    },
+    /** All SortableJS options are supported; events are handled by the `defineEmits` below and should be used with v-on */
+    options: {
+        type: Object as PropType<SortableOptionsProp>,
+        default: () => {}
+    },
+    /** Your list of items **/
+    list: {
+        type: [Array, Object],
+        default: () => [] as any[]
+    },
+    /** The name of the key present in each item in the list that corresponds to a unique value. */
+    itemKey: {
+        type: [String, Function] as PropType<
+            string | ((item: any) => string | number | Symbol)
+        >,
+        default: ''
+    },
+    /** The element type to render as. */
+    tag: {
+        type: String as PropType<string>,
+        default: 'div'
+    },
+    isSortable: {
+        type: Boolean,
+        default: false
+    },
+    className: {
+        type: String,
+        default: ''
+    }
+}
+
+export function useSortable(vm: Record<string, any>) {
+    const { props, emit } = vm
+    const isDragging = ref(false)
+    const rootRef = ref<HTMLElement | null>(null)
+    const sortable = ref<Sortable | null>(null)
+    const getKey = computed(() => {
+        if (typeof props.itemKey === 'string')
+            return (item: any) => item[props.itemKey as string]
+        return props.itemKey
+    })
+
+    watch(rootRef, (newRootRef) => {
+        if (newRootRef) {
+            sortable.value = new Sortable(newRootRef, {
+                ...props.options,
+                onChoose: (event) => emit('choose', event),
+                onUnchoose: (event) => emit('unchoose', event),
+                onStart: (event) => {
+                    isDragging.value = true
+                    emit('start', event)
+                },
+                onEnd: (event) => {
+                    setTimeout(() => {
+                        isDragging.value = false
+                        emit('end', event)
+                    })
+                },
+                onAdd: (event) => emit('add', event),
+                onUpdate: (event) => emit('update', event),
+                onSort: (event) => emit('sort', event),
+                onRemove: (event) => emit('remove', event),
+                onFilter: (event) => emit('filter', event),
+                onClone: (event) => emit('clone', event),
+                onChange: (event) => emit('change', event)
+            })
+        }
+    })
+
+    watch(
+        () => props.options,
+        (options: SortableOptionsProp) => {
+            if (options && sortable?.value) {
+                for (const property in options) {
+                    sortable.value.option(
+                        property as keyof SortableOptionsProp,
+                        options[property as keyof SortableOptionsProp]
+                    )
+                }
+            }
+        }
+    )
+
+    onUnmounted(() => {
+        if (sortable.value) {
+            sortable.value.destroy()
+            rootRef.value = null
+            sortable.value = null
+        }
+    })
+
+    return { rootRef, getKey, element }
+}