@dataloop-ai/components 0.20.258 → 0.20.259

package/package.json

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

package/src/components/basic/DlChip/DlChip.vue

@@ -204,7 +204,7 @@ export default defineComponent({
     padding-bottom: 0;
     outline: 0;
     min-width: 18px;
-    height: 20px;
+    min-height: 20px;
     align-items: center;
     max-width: var(--dl-chip-max-width);
     color: var(--dl-chip-text-color);

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

@@ -183,11 +183,7 @@
                     v-else-if="showMenuList"
                     class="select-list"
                     :padding="false"
-                    :style="
-                        optionsCount > MAX_ITEMS_PER_LIST
-                            ? ''
-                            : `width: 100%; max-height: calc(${calculatedDropdownMaxHeight} - 20px); overflow-y: auto;`
-                    "
+                    :style="dropdownListStyle"
                 >
                     <dl-select-option
                         v-if="showAllItems"
@@ -218,7 +214,7 @@
                         :virtual-scroll-item-size="28"
                         :virtual-scroll-sticky-size-start="28"
                         :virtual-scroll-sticky-size-end="20"
-                        :style="`width: 100%; max-height: calc(${calculatedDropdownMaxHeight} - 20px);`"
+                        :style="virtualScrollStyle"
                     >
                         <dl-select-option
                             :key="getKeyForOption(item)"
@@ -686,6 +682,25 @@ export default defineComponent({
             // :shrug: if it's not a known value, just return it
             return `calc(${this.dropdownMaxHeight} - 20px)`
         },
+        dropdownListStyle(): Record<string, string> {
+            if (this.optionsCount > this.MAX_ITEMS_PER_LIST) {
+                return {}
+            }
+            return {
+                ...this.baseDropdownStyle,
+                overflowY: 'auto'
+            }
+        },
+        virtualScrollStyle(): Record<string, string> {
+            return this.baseDropdownStyle
+        },
+        baseDropdownStyle(): Record<string, string> {
+            return {
+                width: '100%',
+                maxHeight: `calc(${this.calculatedDropdownMaxHeight} - 20px)`,
+                overflowX: 'hidden'
+            }
+        },
         computedMenuStyle(): string {
             let style = this.menuStyle ?? ''
             if (this.optionsCount > this.MAX_ITEMS_PER_LIST) {

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

@@ -1,3 +1,4 @@
+0
 <template>
     <div :id="uuid" :class="identifierClass" style="width: 100%">
         <div
@@ -440,7 +441,10 @@ export default defineComponent({
 
 .counter {
     color: var(--dl-color-lighter);
-    font-size: 10px;
+    font-family: var(--dl-typography-body-body3-font-family);
+    font-size: var(--dl-typography-body-body3-font-size);
+    line-height: var(--dl-typography-body-body3-line-height);
+    font-weight: var(--dl-typography-body-body3-font-weight);
 }
 .expand-icon {
     display: flex !important;