@dataloop-ai/components 0.19.64 → 0.19.65

package/package.json

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

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

@@ -100,11 +100,7 @@
                                         'placeholder-string': showPlaceholder,
                                         'placeholder-string--disabled': disabled
                                     }"
-                                >{{
-                                    showPlaceholder
-                                        ? placeholder
-                                        : modelValue
-                                }}</span>
+                                >{{ spanText }}</span>
                             </div>
                             <div
                                 v-if="
@@ -340,10 +336,10 @@ import { debounce, cloneDeep } from 'lodash'
 import {
     computed,
     defineComponent,
-    onMounted,
     PropType,
     ref,
     toRefs,
+    nextTick,
     watch
 } from 'vue-demi'
 import { DlInfoErrorMessage, DlTooltip } from '../../shared'
@@ -658,9 +654,14 @@ export default defineComponent({
             autoSuggestItems,
             maxLength,
             files,
-            syntaxHighlightColor
+            syntaxHighlightColor,
+            placeholder,
+            readonly,
+            disabled
         } = toRefs(props)
 
+        const isInternalChange = ref(false)
+
         const suggestItems = computed<DlInputSuggestion[]>(() => {
             if (!modelValue.value) return []
             return getSuggestItems(
@@ -676,6 +677,16 @@ export default defineComponent({
         const handleSelectedItem = (value: any) => {
             onAutoSuggestClick(null, value)
         }
+
+        const onChange = (e: KeyboardEvent) => {
+            isInternalChange.value = true
+            isMenuOpen.value = true
+            updateSyntax()
+            const target = e.target as HTMLElement
+            emit('input', target.innerText, e)
+            emit('update:model-value', target.innerText)
+        }
+
         const onAutoSuggestClick = (e: Event, item: string): void => {
             const newValue = clearSuggestion(modelValue.value.toString(), item)
             if (!maxLength.value || newValue.length < maxLength.value) {
@@ -735,26 +746,42 @@ export default defineComponent({
             () => !modelValue.value || !String(modelValue.value)?.length
         )
 
-        watch(modelValue, () => {
-            if (String(modelValue.value ?? '').length) {
-                if (input.value.innerHTML !== modelValue.value) {
-                    input.value.innerHTML = modelValue.value
-                }
-            } else {
-                input.value.innerHTML = ''
+        const spanText = computed<string>(() => {
+            if (showPlaceholder.value) {
+                return placeholder.value
             }
+            return modelValue.value?.toString()
         })
 
-        onMounted(() => {
-            if (String(modelValue.value ?? '').length) {
-                input.value.innerHTML = modelValue.value
-            }
-        })
+        watch(
+            modelValue,
+            (val) => {
+                nextTick(() => {
+                    if (
+                        !isInternalChange.value &&
+                        val !== null &&
+                        val !== undefined
+                    ) {
+                        if (readonly.value || disabled.value) {
+                            return
+                        }
+
+                        input.value.innerHTML = val
+                            .toString()
+                            .replace(/ /g, '&nbsp;')
+                    } else {
+                        isInternalChange.value = false
+                    }
+                })
+            },
+            { immediate: true }
+        )
 
         return {
             suggestItems,
             highlightedIndex,
             onAutoSuggestClick,
+            onChange,
             isMenuOpen,
             setHighlightedIndex,
             handleSelectedItem,
@@ -764,7 +791,8 @@ export default defineComponent({
             emitRemoveFile,
             updateSyntax,
             stringSuggestions,
-            showPlaceholder
+            showPlaceholder,
+            spanText
         }
     },
     data() {
@@ -963,13 +991,6 @@ export default defineComponent({
         onClick(e: Event, item: DlInputSuggestion) {
             this.onAutoSuggestClick(e, item.suggestion)
         },
-        onChange(e: Event): void {
-            this.isMenuOpen = true
-            this.updateSyntax()
-            const target = e.target as HTMLElement
-            this.$emit('input', target.innerText, e)
-            this.$emit('update:model-value', target.innerText)
-        },
         async handlePaste() {
             const content = await readClipboard()
 

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

@@ -13,7 +13,8 @@ import {
     PropType,
     ref,
     toRefs,
-    watch
+    watch,
+    nextTick
 } from 'vue-demi'
 import {
     Content,
@@ -26,7 +27,6 @@ import {
 } from 'vanilla-jsoneditor'
 import { debounce } from 'lodash'
 import { stateManager } from '../../../StateManager'
-import { nextTick } from 'process'
 
 export default defineComponent({
     model: {

package/src/demos/DlInputDemo.vue

@@ -2,7 +2,6 @@
     <div>
         <div>
             <input v-model="textVal">
-
             <div>This is to test v-model reactivity</div>
             <dl-input
                 v-model="textVal"