@dataloop-ai/components 0.20.180 → 0.20.181

package/package.json

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

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

@@ -239,6 +239,7 @@
                             :children="getOptionChildren(item)"
                             :capitalized="capitalizedOptions"
                             :readonly="isReadonlyOption(item)"
+                            :disable-row="isDisableRowOption(item)"
                             :indentation="indentation"
                             :is-expanded="item.expanded"
                             :tooltip="getOptionTooltip(item)"
@@ -291,6 +292,7 @@
                             :children="getOptionChildren(option)"
                             :capitalized="capitalizedOptions"
                             :readonly="isReadonlyOption(option)"
+                            :disable-row="isDisableRowOption(option)"
                             :indentation="indentation"
                             :is-expanded="isExpandedOption(option)"
                             :tooltip="getOptionTooltip(option)"
@@ -1045,6 +1047,9 @@ export default defineComponent({
         isReadonlyOption(option: any) {
             return !!option?.readonly
         },
+        isDisableRowOption(option: DlSelectOptionType) {
+            return typeof option === 'object' && option !== null && !!option.disableRow
+        },
         getOptionCount(option: any) {
             return option?.count ?? null
         },

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

@@ -17,9 +17,12 @@
         <dl-list-item
             v-else
             class="option"
-            :class="{ highlighted: highlightSelected && isSelected }"
+            :class="{ 
+                highlighted: highlightSelected && isSelected,
+                'disabled-row': disableRow
+            }"
             :with-wave="withWave"
-            clickable
+            :clickable="!disableRow"
             :style="`width: ${computedWidth}`"
             @click="handleClick"
         >
@@ -44,6 +47,7 @@
                         :model-value="modelValue"
                         :value="value"
                         :indeterminate-value="indeterminateValue"
+                        :disabled="disableRow"
                         @update:model-value="handleCheckboxUpdate"
                         @checked="handleSingleSelect"
                         @unchecked="handleSingleDeselect"
@@ -95,6 +99,7 @@
                     :with-wave="withWave"
                     :capitalized="capitalized"
                     :readonly="isReadonlyOption(child)"
+                    :disable-row="isDisableRowOption(child)"
                     :indentation="indentation"
                     :is-expanded="isExpanded"
                     :filter-term="filterTerm"
@@ -138,7 +143,6 @@ import { debounce } from 'lodash'
 import { stateManager } from '../../../../StateManager'
 import { getCaseInsensitiveInput, getLabel } from '../utils'
 import {
-    DlSelectedValueType,
     DlSelectOption,
     DlSelectOptionType
 } from '../../types'
@@ -166,7 +170,7 @@ export default defineComponent({
         multiselect: { type: Boolean, default: false },
         value: { type: ValueTypes, default: null },
         children: {
-            type: Array as PropType<DlSelectedValueType[]>,
+            type: Array as PropType<DlSelectOptionType[]>,
             default: null
         },
         highlightSelected: { type: Boolean, default: false },
@@ -180,6 +184,7 @@ export default defineComponent({
         label: { type: String, default: null },
         capitalized: { type: Boolean, default: false },
         readonly: { type: Boolean, default: false },
+        disableRow: { type: Boolean, default: false },
         indentation: { type: Number, default: 30 },
         isExpanded: {
             type: Boolean,
@@ -351,6 +356,11 @@ export default defineComponent({
             }
         },
         handleClick(e: Event) {
+            if (this.disableRow) {
+                e.stopPropagation()
+                e.preventDefault()
+                return
+            }
             e.stopPropagation()
             e.preventDefault()
             if (this.multiselect) {
@@ -394,6 +404,9 @@ export default defineComponent({
         },
         isReadonlyOption(option: any) {
             return !!option?.readonly
+        },
+        isDisableRowOption(option: DlSelectOptionType) {
+            return typeof option === 'object' && option !== null && !!option.disableRow
         }
     }
 })
@@ -456,4 +469,10 @@ export default defineComponent({
     line-height: 16px;
     color: var(--dl-color-lighter);
 }
+
+.disabled-row {
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+}
 </style>

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

@@ -5,6 +5,7 @@ export interface DlSelectOption {
     expanded?: boolean
     children?: DlSelectOption[]
     readonly?: boolean
+    disableRow?: boolean
     tooltip?: string
 }