@dataloop-ai/components 0.17.112 → 0.17.114

package/package.json

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

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

@@ -3,7 +3,11 @@
         :id="uuid"
         :style="cssVars"
         class="root-container"
-        :class="{ 'root-container--s': isSmall, [identifierClass]: true }"
+        :class="{
+            'root-container--s': isSmall,
+            [identifierClass]: true,
+            'fit-content': fitContent
+        }"
     >
         <div
             v-show="!!title.length || !!tooltip.length"
@@ -1159,4 +1163,7 @@ export default defineComponent({
         padding-top: 3px;
     }
 }
+.fit-content > * {
+    max-width: fit-content;
+}
 </style>

package/src/demos/DlSelectDemo.vue

@@ -166,13 +166,13 @@
         />
         With Fit
         <dl-select
-            v-model="selectedWithChildrenCapitalized"
-            :options="treeOptions"
+            :options="[
+                { label: 'Option 1', value: 1 },
+                { label: 'Option 2, longer one', value: 2 },
+                { label: 'Option 3', value: 3 }
+            ]"
             size="m"
-            multiselect
-            search
-            capitalized-options
-            fit-container
+            fit-content
         />
         With Label and sub label
         <dl-select

package/src/utils/position-engine.ts

@@ -101,8 +101,8 @@ export function getAnchorProps(el: HTMLElement, offset: number[]) {
         bottom,
         width,
         height,
-        middle: left + (right - left) / 2,
-        center: top + (bottom - top) / 2
+        middle: left + (right - left) / 2 + offset[0] ?? 0,
+        center: top + (bottom - top) / 2 + offset[1] ?? 0
     }
 }