@dataloop-ai/components 0.20.259-wip-json.0 → 0.20.260

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.259-wip-json.0",
+  "version": "0.20.260",
   "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/DlJsonEditor/DlJsonEditor.vue

@@ -75,6 +75,14 @@ export default defineComponent({
         const jsonEditorRef = ref(null)
         const jsonEditor = ref<JSONEditor>(null as any)
         const innerUpdate = ref(false)
+        const suppressNextFocus = ref(false)
+
+        const blurActiveEditorElement = () => {
+            const target = jsonEditorRef.value as HTMLElement | null
+            if (target?.contains(document.activeElement)) {
+                ;(document.activeElement as HTMLElement)?.blur()
+            }
+        }
 
         watch(modelValue, (val) => {
             if (innerUpdate.value) {
@@ -82,9 +90,18 @@ export default defineComponent({
                 return
             }
 
+            if (!autoFocus.value) {
+                suppressNextFocus.value = true
+            }
             jsonEditor.value?.set({
                 text: val
             })
+            if (!autoFocus.value) {
+                nextTick(() => {
+                    blurActiveEditorElement()
+                    suppressNextFocus.value = false
+                })
+            }
         })
 
         watch(mode, (val) => {
@@ -132,13 +149,6 @@ export default defineComponent({
             return debounce(handleJSONChange, 100)
         })
 
-        const blurEditorIfFocused = () => {
-            const target = jsonEditorRef.value as HTMLElement | null
-            if (target?.contains(document.activeElement)) {
-                ;(document.activeElement as HTMLElement)?.blur()
-            }
-        }
-
         const initJsonEditor = () => {
             const initialAttrs: JSONEditorPropsOptional = {
                 onChange: debouncedHandleJSONChange.value,
@@ -149,6 +159,10 @@ export default defineComponent({
                 navigationBar: false,
                 statusBar: false,
                 onFocus: () => {
+                    if (suppressNextFocus.value) {
+                        blurActiveEditorElement()
+                        return
+                    }
                     emit('focus')
                 },
                 onBlur: () => {
@@ -169,13 +183,15 @@ export default defineComponent({
             jsonEditor.value?.set({
                 text: modelValue.value
             })
-
             nextTick(() => {
                 jsonEditor.value?.refresh()
-                if (!autoFocus.value) {
-                    blurEditorIfFocused()
-                }
             })
+
+            if (!autoFocus.value) {
+                nextTick(() => {
+                    blurActiveEditorElement()
+                })
+            }
         }
 
         watch(readonly, (val) => {

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;