@dataloop-ai/components 0.20.141 → 0.20.143

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.141",
+  "version": "0.20.143",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlSelect/DlSelect.vue

@@ -315,7 +315,10 @@
                         </dl-select-option>
                     </div>
                 </dl-list>
-                <dl-list-item v-if="hasAfterOptions && !noOptions">
+                <dl-list-item
+                    v-if="hasAfterOptions && !noOptions"
+                    :padding="afterOptionsPadding"
+                >
                     <dl-item-section>
                         <slot name="after-options" />
                     </dl-item-section>
@@ -500,6 +503,10 @@ export default defineComponent({
         openMenuDuringSearch: {
             type: Boolean,
             default: false
+        },
+        afterOptionsPadding: {
+            type: String,
+            default: null
         }
     },
     emits: [

package/src/components/compound/DlTreeTable/DlTreeTable.vue

@@ -333,7 +333,7 @@ export default defineComponent({
     emits,
     setup(props, { emit, slots }) {
         const dlTableRef = ref(null)
-        const selectedData = ref([])
+        const selectedData = ref<DlTableRow[]>([])
         const borderState = ref([])
         const denseState = ref([])
         const resizableState = ref([])
@@ -393,7 +393,8 @@ export default defineComponent({
 
             isRowSelected,
             clearSelection,
-            updateSelection
+            updateSelection,
+            selectAllRows
         } = useTreeTableRowSelection(
             props as unknown as DlTableProps,
             emit,
@@ -515,11 +516,19 @@ export default defineComponent({
 
             updateSelected(value ? tableRows.value : [])
         }
-        const updateSelected = (payload: any) => {
+        const updateSelected = (payload: DlTableRow[]) => {
+            const hasSelection = selectedData.value.length > 0
             selectedData.value = payload
-            emitSelectedItems(payload)
+
+            if (payload.length > 0) {
+                selectAllRows(true)
+            } else if (payload.length === 0 && hasSelection) {
+                selectAllRows(false)
+            } else {
+                emitSelectedItems(payload)
+            }
         }
-        const emitSelectedItems = (payload: any) => {
+        const emitSelectedItems = (payload: DlTableRow[]) => {
             emit('selected-items', payload)
         }
         const emitRowClick = (...payload: any) => {
@@ -988,21 +997,6 @@ export default defineComponent({
                 'col-update': this.updateColumns
             },
             scopedSlots: {
-                'header-selection': () =>
-                    renderComponent(
-                        vue2h,
-                        DlCheckbox,
-                        {
-                            color: this.color,
-                            modelValue: this.headerSelectedValue,
-                            indeterminateValue: true,
-                            'onUpdate:modelValue': this.onMultipleSelectionSet,
-                            on: {
-                                'update:modelValue': this.onMultipleSelectionSet
-                            }
-                        },
-                        (): [] => []
-                    ),
                 tbody,
                 'no-data': this.$slots['no-data']
                     ? () => this.$slots['no-data']

package/src/components/compound/DlTreeTable/utils/treeTableRowSelection.ts

@@ -174,6 +174,29 @@ export function useTreeTableRowSelection(
         return selectedKeys.value[rowKeyValue] === true
     }
 
+    function getAllRows(rows: DlTableRow[]): DlTableRow[] {
+        const allRows: DlTableRow[] = []
+        for (const row of rows) {
+            allRows.push(row)
+            if (row.children && row.children.length > 0) {
+                allRows.push(...getAllRows(row.children))
+            }
+        }
+        return allRows
+    }
+
+    function selectAllRows(select: boolean) {
+        if (select) {
+            const allRows = getAllRows(computedRows.value)
+            const allKeys = allRows.map(getRowKey.value)
+            updateSelection(allKeys, allRows, true)
+        } else {
+            clearSelection()
+            selectedItemsNested.value = []
+            emit('selected-items', [])
+        }
+    }
+
     return {
         hasSelectionMode,
         singleSelection,
@@ -183,6 +206,7 @@ export function useTreeTableRowSelection(
         rowsSelectedNumber,
         isRowSelected,
         clearSelection,
-        updateSelection
+        updateSelection,
+        selectAllRows
     }
 }

package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue

@@ -17,6 +17,7 @@
             }`"
         >
             <dl-icon
+                v-if="!row.disableDraggable"
                 class="draggable-icon"
                 icon="icon-dl-drag"
                 size="12px"
@@ -40,7 +41,7 @@
                     :indeterminate-value="true"
                     :false-value="false"
                     :true-value="true"
-                    :disabled="isCheckboxDisabled"
+                    :disabled="isCheckboxDisabled || !row.isSelectable"
                     @update:model-value="
                         (adding, evt) => emitUpdateModelValue(adding, evt)
                     "