@dataloop-ai/components 0.20.2 → 0.20.4

package/package.json

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

package/src/components/blocks/DlLabelPicker/DlLabelPicker.vue

@@ -1,11 +1,10 @@
 <template>
-    <div style="width: 200px">
+    <div class="dl-label-picker">
         <dl-input
             v-model="inputValue"
             :placeholder="placeHolderText"
-            size="l"
+            size="m"
             has-prepend
-            padding-prop="0px 0px 0px 0px"
             :style="inputStyles"
             @focus="onFocus"
             @blur="onBlur"
@@ -13,7 +12,7 @@
         >
             <template #prepend>
                 <dl-icon
-                    style="margin-bottom: 5px"
+                    color="dl-color-lighter"
                     icon="icon-dl-search"
                     size="12px"
                 />
@@ -142,7 +141,7 @@ export default defineComponent({
 
         const placeHolderText = computed(() => {
             if (!currentSelectedLabel.value) {
-                return `No items selected`
+                return 'Search a label'
             }
 
             return currentSelectedLabel.value.displayLabel
@@ -239,7 +238,25 @@ export default defineComponent({
 </script>
 
 <style scope>
+.dl-label-picker {
+    width: 200px;
+}
 .dl-label-picker-item {
     cursor: pointer;
+    height: 32px;
+    line-height: 30px;
+}
+</style>
+
+<style>
+.dl-label-picker .dl-table thead tr,
+.dl-label-picker .dl-table .inner-th-wrapper {
+    height: 10px;
+}
+.dl-label-picker .dl-table tbody tr {
+    height: auto;
+}
+.dl-label-picker .dl-table tbody tr td {
+    padding: 2px 0;
 }
 </style>

package/src/components/compound/DlInput/DlInput.vue

@@ -1563,9 +1563,9 @@ export default defineComponent({
 
     &__adornment-container {
         display: flex;
-        justify-content: center;
+        justify-content: end;
         align-items: var(--dl-input-align-items);
-        width: 30px;
+        flex: 0 0 22px;
         &--expandable {
             margin-top: 3px;
             margin-right: 3px;

package/src/components/compound/DlSearches/DlSmartSearch/components/SuggestionsDropdown.vue

@@ -121,6 +121,16 @@ export default defineComponent({
 
         const setHighlightedIndex = (value: any) => {
             highlightedIndex.value = value
+
+            const element =
+                menu.value?.portalEl.querySelectorAll('.dl-list-item')[value]
+            if (element) {
+                if (element.scrollIntoViewIfNeeded) {
+                    element.scrollIntoViewIfNeeded()
+                } else {
+                    element.scrollIntoView()
+                }
+            }
         }
         const handleSelectedItem = (value: any) => {
             if (!value) {

package/src/demos/DlCodeEditor/DlCodeEditorDemo.vue

@@ -1,17 +1,8 @@
 <template>
     <div>
-        <dl-switch
-            v-model="lines"
-            left-label="code lines"
-        />
-        <dl-switch
-            v-model="readonly"
-            left-label="readonly"
-        />
-        <dl-switch
-            v-model="bordered"
-            left-label="bordered"
-        />
+        <dl-switch v-model="lines" left-label="code lines" />
+        <dl-switch v-model="readonly" left-label="readonly" />
+        <dl-switch v-model="bordered" left-label="bordered" />
         <dl-code-editor
             v-model="codeEditorValue"
             width="45vw"
@@ -195,7 +186,7 @@ if __name__ == "__main__":
         }))
 
         watch(codeEditorValue, (val) => {
-            console.log('@@@', val)
+            console.log('Code Value Changed: ', val)
         })
 
         return {

package/src/demos/DlSliderDemo.vue

@@ -50,20 +50,18 @@ export default defineComponent({
     },
     watch: {
         value(newValue, oldValue) {
-            console.log(`@@@ model value update ${oldValue} to ${newValue}`)
-            this.events[0] = `@@@ model value update ${oldValue} to ${newValue}`
+            this.events[0] = `model value update ${oldValue} to ${newValue}`
         }
     },
     methods: {
         handleChange(value: number) {
-            console.log(`@@@ handling change ${value}`)
-            this.events[1] = `@@@ handling change ${value}`
+            this.events[1] = `handling change ${value}`
         },
         handleFocus(event: Event) {
-            this.events[1] = `@@@ Input Focus `
+            this.events[1] = `Input Focus `
         },
         handleBlur(event: Event) {
-            this.events[1] = `@@@ Input Blur `
+            this.events[1] = `Input Blur `
         }
     },
     template: 'dl-slider-demo'