@dataloop-ai/components 0.17.83 → 0.17.85

package/package.json

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

package/src/components/compound/DlCharts/charts/DlConfusionMatrix/DlConfusionMatrix.vue

@@ -79,10 +79,15 @@
                 <div class="x-axis">
                     <span
                         v-for="(label, index) in visibleLabels"
+                        ref="xAxis"
                         :key="index"
                         class="x-axis__element"
                         :style="`${
-                            !labelImages[0] ? 'transform: rotate(70deg);' : ''
+                            !labelImages[0]
+                                ? `transform: rotate(${
+                                    rotateXLabels ? '70' : '0'
+                                }deg);`
+                                : ''
                         }`"
                     >
                         <span class="x-axis__element--text">
@@ -227,6 +232,7 @@ export default defineComponent({
             max: props.matrix.length
         })
         const cellWidth = ref<number | null>(null)
+        const rotateXLabels = ref(true)
 
         const getCellBackground = (value: number = 1): string => {
             const object: { [key: string]: any } = {
@@ -251,7 +257,8 @@ export default defineComponent({
             getCellTextColor,
             cellWidth,
             tooltipState,
-            currentBrushState
+            currentBrushState,
+            rotateXLabels
         }
     },
     computed: {
@@ -309,6 +316,14 @@ export default defineComponent({
                 this.currentBrushState.max = value.length
                 this.resizeMatrix()
             }
+        },
+        currentBrushState() {
+            const longest = Math.max(
+                ...this.visibleLabels.map(
+                    (el: DlConfusionMatrixLabel) => el.title.length
+                )
+            )
+            this.rotateXLabels = longest * 12 > getCellWidth()
         }
     },
     mounted() {
@@ -424,7 +439,7 @@ export default defineComponent({
 .x-axis {
     width: 100%;
     display: flex;
-    justify-content: space-between;
+    justify-content: space-evenly;
     margin-top: 10px;
     min-height: 100px;
     max-height: 100px;
@@ -482,7 +497,7 @@ export default defineComponent({
     grid-template-columns: repeat(var(--matrix-rows), 1fr);
 
     &__cell {
-        font-size: 60%;
+        font-size: 12px;
         cursor: pointer;
         border: 1px solid var(--dl-color-separator);
         box-sizing: border-box;

package/src/components/compound/DlCharts/charts/DlConfusionMatrix/utils.ts

@@ -2,7 +2,8 @@ import { isObject } from 'lodash'
 import { DlConfusionMatrixCell, DlConfusionMatrixLabel } from '../../types'
 
 export function getCellWidth() {
-    return document.querySelector('.matrix__cell').getBoundingClientRect().width
+    return document.querySelector('.matrix__cell')?.getBoundingClientRect()
+        .width
 }
 
 export function setZoom(zoom: number, el: HTMLElement) {

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

@@ -26,6 +26,7 @@
             <span v-show="!!tooltip.length">
                 <dl-icon
                     icon="icon-dl-info"
+                    :inline="false"
                     class="tooltip-icon"
                     size="12px"
                 />
@@ -82,6 +83,9 @@
                     @focus="handleSearchFocus"
                     @blur="handleSearchBlur"
                 >
+                <dl-tooltip v-if="disabled">
+                    {{ disabledTooltip }}
+                </dl-tooltip>
                 <div
                     v-if="hasSelectedSlot"
                     style="width: 100%"
@@ -129,6 +133,7 @@
                 >
                     <dl-icon
                         :icon="dropdownIcon"
+                        :color="chevronIconColor"
                         class="expand-icon"
                         :inline="false"
                         :size="withoutBorders ? '12px' : '16px'"
@@ -391,7 +396,8 @@ export default defineComponent({
         withoutDropdownIconPadding: { type: Boolean, default: false },
         clearButtonTooltip: { type: Boolean, default: false },
         dropdownMaxHeight: { type: String, default: '30vh' },
-        preserveSearch: { type: Boolean, default: false }
+        preserveSearch: { type: Boolean, default: false },
+        disabledTooltip: { type: String, default: 'Disabled' }
     },
     emits: [
         'search-focus',
@@ -613,7 +619,8 @@ export default defineComponent({
                 '--dl-select-width': this.width,
                 '--dl-select-expand-icon-width': this.withoutDropdownIconPadding
                     ? '16px'
-                    : '28px'
+                    : '28px',
+                '--dl-menu-scrollbar-width': '10px'
             }
         },
         asteriskClasses(): string[] {
@@ -637,6 +644,9 @@ export default defineComponent({
                 return !!this.$scopedSlots.prepend && !this.isSmall
             }
             return !!this.$slots.prepend && !this.isSmall
+        },
+        chevronIconColor() {
+            return `${this.disabled ? 'dl-color-disabled' : null}`
         }
     },
     watch: {

package/src/components/essential/DlMenu/DlMenu.vue

@@ -452,6 +452,9 @@ export default defineComponent({
     border-radius: 2px;
     overflow-y: auto;
     overflow-x: hidden;
+    &::-webkit-scrollbar {
+        width: var(--dl-menu-scrollbar-width, 5px);
+    }
     outline: 0;
     max-height: 65vh;
     z-index: var(--dl-z-index-menu);

package/src/demos/DlSelectDemo.vue

@@ -64,19 +64,23 @@
                 {
                     label: 'Status 1',
                     value: 1,
-                    badgeColor: 'dl-color-disabled'
+                    badgeColor: 'var(--dl-color-disabled)'
                 },
                 {
                     label: 'Status 2',
                     value: 2,
-                    badgeColor: 'dl-color-secondary'
+                    badgeColor: 'var(--dl-color-secondary)'
                 },
                 {
                     label: 'Status 3',
                     value: 3,
-                    badgeColor: 'dl-color-positive'
+                    badgeColor: 'var(--dl-color-positive)'
                 },
-                { label: 'Status 4', value: 4, badgeColor: 'dl-color-warning' }
+                {
+                    label: 'Status 4',
+                    value: 4,
+                    badgeColor: 'var(--dl-color-warning)'
+                }
             ]"
             required
         >
@@ -125,7 +129,6 @@
             :options="searchOptions"
             size="m"
             multiselect
-            style="background-color: beige"
             placeholder="contributors"
             search
         />
@@ -179,34 +182,42 @@
                     subLabel: 'not so high',
                     label: 'High',
                     value: 'high',
-                    bgColor: 'dl-color-negative'
+                    labelColor: 'var(--dl-color-darker)',
+                    subLabelColor: 'var(--dl-color-lighter)'
                 },
                 {
                     subLabel: 'not so medium',
                     label: 'Medium',
                     value: 'medium',
-                    bgColor: 'dl-color-warning',
-                    textColor: 'dl-color-darker'
+                    labelColor: 'var(--dl-color-darker)',
+                    subLabelColor: 'var(--dl-color-lighter)'
                 },
                 {
                     subLabel: 'not so low',
                     label: 'Low',
                     value: 'low',
-                    bgColor: 'dl-color-positive',
-                    textColor: 'dl-color-darker'
+                    labelColor: 'var(--dl-color-darker)',
+                    subLabelColor: 'var(--dl-color-lighter)'
                 }
             ]"
         >
             <template #option="scope">
                 <div style="padding: 5px 0px">
-                    <div>{{ scope.opt.label }}</div>
-                    <div>{{ scope.opt.subLabel }}</div>
+                    <div :style="`color: ${scope.opt.labelColor}`">
+                        {{ scope.opt.label }}
+                    </div>
+                    <div
+                        :style="`color: ${scope.opt.subLabelColor}; font-size: 10px`"
+                    >
+                        {{ scope.opt.subLabel }}
+                    </div>
                 </div>
             </template>
         </dl-select>
         With tooltip
         <dl-select
             v-model="selectedOption"
+            title="With tooltip"
             :tooltip="'Test Me'"
             :options="[
                 {
@@ -523,6 +534,9 @@ export default defineComponent({
         },
         handleInput(e: Event) {
             return (e.target as HTMLInputElement).value
+        },
+        log(e: any) {
+            console.log(e)
         }
     }
 })