@dataloop-ai/components 0.18.72 → 0.18.74

package/package.json

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

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

@@ -61,7 +61,7 @@
                         ? 'var(--dl-color-disabled)'
                         : outlined && !textColor
                             ? 'var(--dl-color-secondary)'
-                            : textColor || 'var(--dl-color-white)'
+                            : computedTextColor || 'var(--dl-color-white)'
                 }`"
             />
             <dl-icon
@@ -174,10 +174,12 @@ import {
     onMounted,
     getCurrentInstance,
     Ref,
-    PropType
+    PropType,
+    toRefs
 } from 'vue-demi'
 import { v4 } from 'uuid'
 import { DlTextTransformOptions } from '../../shared/types'
+import { getColor } from '../../../utils'
 
 export default defineComponent({
     name: 'DlDropdownButton',
@@ -258,6 +260,7 @@ export default defineComponent({
     setup(props, { emit }) {
         const vm = getCurrentInstance()
         const proxy = vm!.proxy!
+        const { textColor } = toRefs(props)
 
         const showing = ref<boolean>(!!props.modelValue) as Ref<boolean>
         const menuRef = ref(null)
@@ -416,6 +419,8 @@ export default defineComponent({
             return 'dl-color-white'
         })
 
+        const computedTextColor = computed(() => getColor(textColor.value))
+
         return {
             uuid: `dl-dropdown-button-${v4()}`,
             identifierClass,
@@ -438,7 +443,8 @@ export default defineComponent({
             setHighlightedIndex,
             handleSelectedItem,
             cssVars,
-            getIconColor
+            getIconColor,
+            computedTextColor
         }
     }
 })

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

@@ -433,29 +433,32 @@
                                         />
                                     </slot>
                                 </td>
-                                <slot
+                                <DlTd
                                     v-for="col in computedCols"
-                                    v-bind="
-                                        getBodyCellScope({
-                                            key: getRowKey(row),
-                                            row,
-                                            pageIndex,
-                                            col
-                                        })
-                                    "
-                                    :name="
-                                        hasSlotByName(`body-cell-${col.name}`)
-                                            ? `body-cell-${col.name}`
-                                            : 'body-cell'
-                                    "
+                                    :key="col.name"
+                                    :class="col.tdClass(row)"
+                                    :style="col.tdStyle(row)"
                                 >
-                                    <DlTd
-                                        :class="col.tdClass(row)"
-                                        :style="col.tdStyle(row)"
+                                    <slot
+                                        v-bind="
+                                            getBodyCellScope({
+                                                key: getRowKey(row),
+                                                row,
+                                                pageIndex,
+                                                col
+                                            })
+                                        "
+                                        :name="
+                                            hasSlotByName(
+                                                `body-cell-${col.name}`
+                                            )
+                                                ? `body-cell-${col.name}`
+                                                : 'body-cell'
+                                        "
                                     >
                                         {{ getCellValue(col, row) }}
-                                    </DlTd>
-                                </slot>
+                                    </slot>
+                                </DlTd>
                             </DlTr>
                         </slot>
                     </slot>

package/src/demos/DlDropdownButtonDemo.vue

@@ -333,6 +333,29 @@
                 </dl-dropdown-button>
             </div>
         </div>
+
+        <div style="margin-top: 20px; display: flex; flex-direction: column">
+            Button with text color with split
+            <dl-dropdown-button
+                auto-close
+                split
+                outlined
+                text-color="red"
+                :label="outlinedLabel"
+                @handleSelectedItem="handleOutlinedSelect"
+            >
+                <dl-list>
+                    <dl-list-item
+                        v-for="val in ['Photos', 'Videos', 'Articles']"
+                        :key="val"
+                        clickable
+                        @click="handleOutlinedSelect(val)"
+                    >
+                        <dl-item-section> {{ val }} </dl-item-section>
+                    </dl-list-item>
+                </dl-list>
+            </dl-dropdown-button>
+        </div>
     </div>
 </template>
 

package/src/demos/DlTableDemo.vue

@@ -432,6 +432,18 @@
                     title="Table Title"
                 />
             </div>
+            <div>
+                <p>Custom body cell</p>
+                <DlTable
+                    :rows="tableRows"
+                    :columns="tableColumns"
+                    title="Custom Cells"
+                >
+                    <template #body-cell-name="{ row }">
+                        {{ row.name }}
+                    </template>
+                </DlTable>
+            </div>
         </div>
     </div>
 </template>