@dataloop-ai/components 0.20.148 → 0.20.150

package/package.json

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

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -114,14 +114,19 @@
         @click="onClick"
     >
         <div class="dl-button-dropdown--simple__title">
-            <span
-                :class="{
-                    'dl-button-no-wrap': noWrap
-                }"
-                style="margin-right: 6px"
-            >
-                {{ label }}
-            </span>
+            <template v-if="hasLabelSlot">
+                <slot name="label" />
+            </template>
+            <template v-else>
+                <span
+                    :class="{
+                        'dl-button-no-wrap': noWrap
+                    }"
+                    style="margin-right: 6px"
+                >
+                    {{ label }}
+                </span>
+            </template>
             <dl-icon
                 :class="iconClass"
                 :icon="dropdownIcon"
@@ -278,7 +283,7 @@ export default defineComponent({
         ...arrowNavigationEvents
     ],
 
-    setup(props, { emit }) {
+    setup(props, { emit, slots }) {
         const vm = getCurrentInstance()
         const proxy = vm!.proxy!
         const { textColor } = toRefs(props)
@@ -286,6 +291,9 @@ export default defineComponent({
         const showing = ref<boolean>(!!props.modelValue) as Ref<boolean>
         const menuRef = ref(null)
 
+        const hasLabelSlot = computed(() => {
+            return !!slots.label
+        })
         const attributes = computed(() => {
             const acc: Record<string, string> = {
                 'aria-expanded': showing.value === true ? 'true' : 'false',
@@ -489,7 +497,8 @@ export default defineComponent({
             cssVars,
             getIconColor,
             computedTextColor,
-            separatorColor
+            separatorColor,
+            hasLabelSlot
         }
     }
 })

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

@@ -36,12 +36,12 @@
                     {{ childDisabledCheckboxTooltip }}
                 </dl-tooltip>
                 <DlCheckbox
+                    v-if="!isCheckboxDisabled && row.isSelectable"
                     :color="color"
                     :model-value="modelValue"
                     :indeterminate-value="true"
                     :false-value="false"
                     :true-value="true"
-                    :disabled="isCheckboxDisabled || !row.isSelectable"
                     @update:model-value="
                         (adding, evt) => emitUpdateModelValue(adding, evt)
                     "

package/src/demos/DlDropdownButtonDemo.vue

@@ -312,6 +312,33 @@
                     </dl-list>
                 </dl-dropdown-button>
             </div>
+
+            <div class="grid grid-cols-3" style="column-gap: 10px">
+                <dl-dropdown-button
+                    auto-close
+                    :model-value="showing"
+                    main-button-style="width: 150px;"
+                    @show="onOpen"
+                >
+                    <template #label>
+                        <div class="flex row" style="gap: 5px">
+                            <span>{{ slotLabel }}</span>
+                            <dl-icon icon="icon-dl-info" size="s" />
+                        </div>
+                    </template>
+                    <dl-list>
+                        <dl-list-item clickable>
+                            <dl-item-section> Photos </dl-item-section>
+                        </dl-list-item>
+                        <dl-list-item clickable>
+                            <dl-item-section> Videos </dl-item-section>
+                        </dl-list-item>
+                        <dl-list-item clickable>
+                            <dl-item-section> Articles </dl-item-section>
+                        </dl-list-item>
+                    </dl-list>
+                </dl-dropdown-button>
+            </div>
         </div>
 
         <div style="margin-top: 20px; display: flex; flex-direction: column">
@@ -346,7 +373,8 @@ import {
     DlItemSection,
     DlList,
     DlDropdownButton,
-    DlEllipsis
+    DlEllipsis,
+    DlIcon
 } from '../components'
 
 export default defineComponent({
@@ -356,7 +384,8 @@ export default defineComponent({
         DlItemSection,
         DlList,
         DlDropdownButton,
-        DlEllipsis
+        DlEllipsis,
+        DlIcon
     },
     setup() {
         const highlightedIndex = ref(-1)
@@ -365,6 +394,7 @@ export default defineComponent({
         const arrowNavigationLabel = ref('Arrow Navigation Label')
         const outlinedLabel = ref('Outlined Label')
         const containedLabel = ref('Contained Label')
+        const slotLabel = ref('Slot Label')
 
         const listItems = ref([
             'New tab',
@@ -415,7 +445,8 @@ export default defineComponent({
             highlightedIndex,
             arrowNavigationLabel,
             outlinedLabel,
-            containedLabel
+            containedLabel,
+            slotLabel
         }
     }
 })