@dataloop-ai/components 0.20.258 → 0.20.259-new-json.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.258",
+  "version": "0.20.259-new-json.1",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -42,7 +42,7 @@
     "tokenizr": "^1.7.0",
     "uuid": "^8.3.2",
     "v-wave": "^1.5.0",
-    "vanilla-jsoneditor": "^0.10.2",
+    "vanilla-jsoneditor": "^0.10.4",
     "vue-demi": "^0.14.5",
     "vue-sortable": "^0.1.3",
     "vue2-teleport": "^1.0.1"

package/src/components/compound/DlJsonEditor/DlJsonEditor.vue

@@ -53,6 +53,11 @@ export default defineComponent({
             required: false,
             type: String as PropType<Mode>,
             default: Mode.text
+        },
+        autoFocus: {
+            required: false,
+            type: Boolean,
+            default: true
         }
     },
     emits: [
@@ -64,11 +69,34 @@ export default defineComponent({
         'blur'
     ],
     setup(props, { emit }) {
-        const { modelValue, indentation, readonly, mode } = toRefs(props)
+        const { modelValue, indentation, readonly, mode, autoFocus } =
+            toRefs(props)
 
         const jsonEditorRef = ref(null)
         const jsonEditor = ref<JSONEditor>(null as any)
         const innerUpdate = ref(false)
+        const suppressProgrammaticFocus = ref(false)
+
+        const blurEditorIfFocused = () => {
+            const target = jsonEditorRef.value as HTMLElement | null
+            if (target?.contains(document.activeElement)) {
+                ;(document.activeElement as HTMLElement)?.blur()
+            }
+        }
+
+        const runWithoutAutoFocus = (fn: () => void) => {
+            if (autoFocus.value) {
+                fn()
+                return
+            }
+
+            suppressProgrammaticFocus.value = true
+            fn()
+            nextTick(() => {
+                blurEditorIfFocused()
+                suppressProgrammaticFocus.value = false
+            })
+        }
 
         watch(modelValue, (val) => {
             if (innerUpdate.value) {
@@ -76,15 +104,19 @@ export default defineComponent({
                 return
             }
 
-            jsonEditor.value?.set({
-                text: val
+            runWithoutAutoFocus(() => {
+                jsonEditor.value?.set({
+                    text: val
+                })
             })
         })
 
         watch(mode, (val) => {
-            jsonEditor.value?.updateProps({
-                mode: val,
-                readOnly: val === Mode.tree
+            runWithoutAutoFocus(() => {
+                jsonEditor.value?.updateProps({
+                    mode: val,
+                    readOnly: val === Mode.tree
+                })
             })
         })
 
@@ -136,6 +168,10 @@ export default defineComponent({
                 navigationBar: false,
                 statusBar: false,
                 onFocus: () => {
+                    if (suppressProgrammaticFocus.value) {
+                        blurEditorIfFocused()
+                        return
+                    }
                     emit('focus')
                 },
                 onBlur: () => {
@@ -153,18 +189,22 @@ export default defineComponent({
                 props: initialAttrs
             })
 
-            jsonEditor.value?.set({
-                text: modelValue.value
-            })
+            runWithoutAutoFocus(() => {
+                jsonEditor.value?.set({
+                    text: modelValue.value
+                })
 
-            nextTick(() => {
-                jsonEditor.value?.refresh()
+                nextTick(() => {
+                    jsonEditor.value?.refresh()
+                })
             })
         }
 
         watch(readonly, (val) => {
-            jsonEditor.value?.updateProps({
-                readOnly: val || mode.value === Mode.tree
+            runWithoutAutoFocus(() => {
+                jsonEditor.value?.updateProps({
+                    readOnly: val || mode.value === Mode.tree
+                })
             })
         })