@dataloop-ai/components 0.20.128 → 0.20.130

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.128",
+  "version": "0.20.130",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -23,7 +23,7 @@
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {
-    "@dataloop-ai/icons": "^3.1.15",
+    "@dataloop-ai/icons": "^3.1.23",
     "@types/flat": "^5.0.2",
     "@types/lodash": "^4.14.184",
     "@types/sortablejs": "^1.15.7",

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

@@ -305,6 +305,20 @@ export default defineComponent({
             type: Number,
             default: 100
         },
+        /**
+         * Disable child checkbox when parent is selected
+         */
+        disableChildCheckbox: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Tooltip text for disabled child checkbox
+         */
+        childDisabledCheckboxTooltip: {
+            type: String,
+            default: 'Cannot unselect child when parent is selected'
+        },
         ...useTableActionsProps,
         ...commonVirtScrollProps,
         ...useTableRowExpandProps,
@@ -532,12 +546,14 @@ export default defineComponent({
             row: DlTableRow,
             index: number,
             children: DlTableRow[] = [],
-            level: number = 1
+            level: number = 1,
+            parentSelected: boolean = false
         ) => {
             const currentSlots = {
                 default: () => children,
                 ...computedCellSlots.value
             }
+
             return renderComponent(vue2h.value, DlTrTreeView, {
                 row,
                 rowIndex: index,
@@ -580,6 +596,10 @@ export default defineComponent({
                 customIconExpandedRow: props.customIconExpandedRow,
                 customIconCompressedRow: props.customIconCompressedRow,
                 chevronIconColor: props.chevronIconColor,
+                disableChildCheckbox: props.disableChildCheckbox,
+                childDisabledCheckboxTooltip:
+                    props.childDisabledCheckboxTooltip,
+                parentSelected,
                 'onUpdate:modelValue': (adding: boolean, evt: Event) => {
                     updateSelectionHierarchy(adding, evt, row)
                 },
@@ -623,11 +643,14 @@ export default defineComponent({
         const renderTr = (
             row: DlTableRow,
             index: number,
-            level: number = 1
+            level: number = 1,
+            parentSelected: boolean = false
         ) => {
             const children = []
+            const isCurrentRowSelected =
+                isRowSelected(props.rowKey, getRowKey.value(row)) === true
 
-            children.push(renderDlTrTree(row, index, [], level))
+            children.push(renderDlTrTree(row, index, [], level, parentSelected))
 
             const tbodyEls: VNode[] = []
 
@@ -645,7 +668,7 @@ export default defineComponent({
                                 'data-level': level,
                                 class: 'nested-tbody'
                             },
-                            renderTr(childRow, i, level)
+                            renderTr(childRow, i, level, isCurrentRowSelected)
                         ) as VNode
                     )
                 })

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

@@ -16,16 +16,31 @@
                 isDragIconVisible || isRowHighlighted ? '1' : '0'
             }`"
         >
-            <dl-icon class="draggable-icon" icon="icon-dl-drag" size="12px" />
+            <dl-icon
+                class="draggable-icon"
+                icon="icon-dl-drag"
+                size="12px"
+                :color="
+                    isDragIconHovered ? 'dl-color-darker' : 'dl-color-lighter'
+                "
+                @mouseenter="isDragIconHovered = true"
+                @mouseleave="isDragIconHovered = false"
+            />
         </td>
         <td v-if="hasSelectionMode" class="dl-table--col-auto-width">
             <slot name="body-selection" v-bind="bindBodySelection">
+                <dl-tooltip
+                    v-if="isCheckboxDisabled && childDisabledCheckboxTooltip"
+                >
+                    {{ childDisabledCheckboxTooltip }}
+                </dl-tooltip>
                 <DlCheckbox
                     :color="color"
                     :model-value="modelValue"
                     :indeterminate-value="true"
                     :false-value="false"
                     :true-value="true"
+                    :disabled="isCheckboxDisabled"
                     @update:model-value="
                         (adding, evt) => emitUpdateModelValue(adding, evt)
                     "
@@ -84,12 +99,14 @@ import {
     ref,
     toRefs,
     watch,
-    getCurrentInstance
+    getCurrentInstance,
+    computed
 } from 'vue-demi'
 import DlTrTree from '../components/DlTrTree.vue'
 import DlTdTree from '../components/DlTdTree.vue'
 import DlIcon from '../../../essential/DlIcon/DlIcon.vue'
 import DlCheckbox from '../../../essential/DlCheckbox/DlCheckbox.vue'
+import DlTooltip from '../../../shared/DlTooltip/DlTooltip.vue'
 import { getRowKey } from '../utils/getRowKey'
 import { DlTableRow } from '../../DlTable/types'
 import { setTrPadding } from '../utils/trSpacing'
@@ -101,7 +118,8 @@ export default defineComponent({
         DlTrTree,
         DlTdTree,
         DlIcon,
-        DlCheckbox
+        DlCheckbox,
+        DlTooltip
     },
     props: {
         row: {
@@ -187,6 +205,27 @@ export default defineComponent({
         isRowHighlighted: {
             type: Boolean,
             default: false
+        },
+        /**
+         * Disable child checkbox when parent is selected
+         */
+        disableChildCheckbox: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Tooltip text for disabled child checkbox
+         */
+        childDisabledCheckboxTooltip: {
+            type: String,
+            default: 'Cannot unselect child when parent is selected'
+        },
+        /**
+         * Whether the parent row is selected
+         */
+        parentSelected: {
+            type: Boolean,
+            default: false
         }
     },
     emits: [
@@ -203,9 +242,21 @@ export default defineComponent({
         const childrenCount = ref(0)
         const { row } = toRefs(props)
         const isDragIconVisible = ref(false)
-
+        const isDragIconHovered = ref(false)
         const vm = getCurrentInstance()
 
+        const isCheckboxDisabled = computed(() => {
+            if (!props.disableChildCheckbox) {
+                return false
+            }
+
+            if (props.level === 1) {
+                return false
+            }
+
+            return props.parentSelected
+        })
+
         watch(
             row,
             () => {
@@ -349,6 +400,7 @@ export default defineComponent({
             visibleChildren,
             childrenCount,
             isDragIconVisible,
+            isDragIconHovered,
             getRowKey,
             emitRowClick,
             onTrDoubleClick,
@@ -364,7 +416,8 @@ export default defineComponent({
             getExpandedvisibleChildren,
             updateExpandedvisibleChildren,
             onRowHoverStart,
-            onRowHoverEnd
+            onRowHoverEnd,
+            isCheckboxDisabled
         }
     }
 })

package/src/demos/DlTreeTableDemo.vue

@@ -86,6 +86,14 @@
                             :model-value="resizableState"
                             @update:model-value="updateResizableState"
                         />
+                        <dl-switch
+                            left-label="Disable Child Checkbox"
+                            value="disableChildCheckbox"
+                            :model-value="disableChildCheckboxState"
+                            @update:model-value="
+                                updateDisableChildCheckboxState
+                            "
+                        />
                     </div>
                 </div>
             </div>
@@ -109,6 +117,8 @@
                     style="height: 500px"
                     :rows-per-page-options="rowsPerPageOptions"
                     highlighted-row="Frozen Yogurt"
+                    :disable-child-checkbox="disableChildCheckbox"
+                    child-disabled-checkbox-tooltip="Child checkbox is disabled (parent is selected)"
                     @row-click="onRowClick"
                     @th-click="log"
                     @selected-items="selectedItems"
@@ -583,6 +593,9 @@ export default defineComponent({
 
         const nextPageNumber = ref(2)
 
+        const disableChildCheckbox = ref(false)
+        const disableChildCheckboxState = ref([])
+
         let allRows: DlTableRow[] = []
         for (let i = 0; i < 100; i++) {
             allRows = allRows.concat(
@@ -732,7 +745,9 @@ export default defineComponent({
             isFirstPage,
             onRowClick,
             rows2,
-            columns2
+            columns2,
+            disableChildCheckbox,
+            disableChildCheckboxState
         }
     },
 
@@ -765,6 +780,11 @@ export default defineComponent({
 
             this.resizable = val.length !== 0
         },
+        updateDisableChildCheckboxState(val: boolean[]): void {
+            this.disableChildCheckboxState = val
+
+            this.disableChildCheckbox = val.length !== 0
+        },
         log(...args: any[]) {
             console.log(...args)
         }