@dataloop-ai/components 0.18.26 → 0.18.28

package/package.json

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

package/src/assets/globals.scss

@@ -139,6 +139,7 @@ body {
     --dl-color-white: #fff;
     --dl-color-black: #000;
     --dl-color-bg: #fff;
+    --dl-color-background: var(--dl-color-bg);
     --dl-color-transparent: transparent;
 
     // fontSizes

package/src/components/compound/DlCodeEditor/DlCodeEditor.vue

@@ -168,6 +168,9 @@ export default defineComponent({
         textarea {
             color: var(--dl-code-editor-text-area-color);
         }
+        .line-nums {
+            flex-grow: 1;
+        }
     }
 }
 </style>

package/src/components/compound/DlCodeEditor/components/CodeEditor.vue

@@ -128,6 +128,7 @@ import { DlSelect } from '../../DlSelect'
 import { DlToast } from '../../DlToast'
 import '../styles/themes.css'
 import '../styles/themes-base16.css'
+import { debounce } from 'lodash'
 
 export default defineComponent({
     name: 'CodeEditor',
@@ -369,32 +370,27 @@ export default defineComponent({
             lineNumsResizer.value = null as any
         }
 
-        const getLineNum = () => {
+        const getLinesCount = () => {
             if (!lineNumsEl.value) return
 
             // lineNum
             const str = textarea.value.value
-            let localLineNum = 0
-            let position = str.indexOf('\n')
-            while (position !== -1) {
-                localLineNum++
-                position = str.indexOf('\n', position + 1)
-            }
-            // heightNum
-            const singleLineHeight = (
-                lineNumsEl.value.firstChild as HTMLElement
-            ).offsetHeight
-            const heightNum =
-                Math.round(textareaHeight.value / singleLineHeight) - 1
+            const matches = str.match(/(\r\n|\r|\n)/gim)
+            const localLineNum = matches.length
+
+            // // disabling the current behavior of highlighting entire dock
+            // const singleLineHeight = (
+            //     lineNumsEl.value.firstChild as HTMLElement
+            // ).offsetHeight
+            // const heightNum =
+            //     Math.round(textareaHeight.value / singleLineHeight) - 1
+
             // displayed lineNum
-            lineNum.value =
-                height.value == 'auto'
-                    ? localLineNum
-                    : localLineNum > heightNum
-                    ? localLineNum
-                    : heightNum
+            lineNum.value = localLineNum
         }
 
+        const debouncedGetLinesCount = debounce(getLinesCount, 100)
+
         onMounted(() => {
             emit('lang', props.languages[0][0])
             emit('content', props.content)
@@ -404,6 +400,13 @@ export default defineComponent({
                 setupLineNumsResizer()
             }
             code.value.textContent = contentValue.value
+            if (lineNums.value) {
+                if (scrolling.value) {
+                    scrolling.value = false
+                } else {
+                    debouncedGetLinesCount()
+                }
+            }
             hljs.highlightElement(code.value)
         })
 
@@ -429,16 +432,27 @@ export default defineComponent({
                 } else {
                     disposeLineNumsResizer()
                 }
+
                 if (lineNums.value) {
                     if (scrolling.value) {
                         scrolling.value = false
                     } else {
-                        getLineNum()
+                        debouncedGetLinesCount()
                     }
                 }
             })
         })
 
+        watch(modelValue, () => {
+            if (lineNums.value) {
+                if (scrolling.value) {
+                    scrolling.value = false
+                } else {
+                    debouncedGetLinesCount()
+                }
+            }
+        })
+
         const copy = async () => {
             try {
                 await navigator.clipboard.writeText(textarea.value.value)

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

@@ -78,7 +78,7 @@
                             :type="showPass ? 'text' : type"
                             :disabled="disabled"
                             :readonly="readonly"
-                            @input="onChange"
+                            @input="debouncedInput"
                             @focus="onFocus"
                             @blur="debouncedBlur"
                             @keyup.enter="onKeyPress"
@@ -379,6 +379,10 @@ export default defineComponent({
         margin: {
             type: String,
             default: null
+        },
+        debounce: {
+            type: Number,
+            default: 100
         }
     },
     emits: ['input', 'focus', 'blur', 'clear', 'enter', 'update:model-value'],
@@ -566,6 +570,10 @@ export default defineComponent({
             }
 
             return classes
+        },
+        debouncedInput(): any {
+            const debounced = debounce(this.onChange.bind(this), this.debounce)
+            return debounced
         }
     },
     methods: {

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

@@ -6,8 +6,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
-import { JSONEditor, Mode } from 'vanilla-jsoneditor'
+import { defineComponent, onMounted, ref, toRefs, watch } from 'vue-demi'
+import {
+    Content,
+    ContentParseError,
+    JSONEditor,
+    JSONEditorPropsOptional,
+    Mode,
+    OnChangeStatus,
+    TextContent
+} from 'vanilla-jsoneditor'
 import { debounce } from 'lodash'
 
 export default defineComponent({
@@ -20,55 +28,74 @@ export default defineComponent({
          * The string to display and modify as JSON
          */
         modelValue: {
+            required: false,
             type: String,
             default: '{}'
         },
-        /**
-         *  When this prop is false, the editor will not refresh, paired with the update-prevent event
-         * it helps with controlling when the editor refreshes
-         */
-        preventUpdate: {
+        indentation: {
+            required: false,
+            type: Number,
+            default: 2
+        },
+        readonly: {
+            required: false,
             type: Boolean,
-            default: null
-        }
-    },
-    emits: ['update:model-value', 'update-prevent', 'align-text'],
-    data() {
-        return {
-            jsonEditor: {} as JSONEditor,
-            preventOnChange: false
+            default: false
         }
     },
-    watch: {
-        modelValue: {
-            handler(val) {
-                if (this.preventUpdate === false) {
-                    this.setJsonText(val)
+    emits: ['update:model-value', 'align-text', 'change'],
+    setup(props, { emit }) {
+        const { modelValue, indentation, readonly } = toRefs(props)
+
+        const jsonEditorRef = ref(null)
+        const jsonEditor = ref<JSONEditor>(null as any)
+        const innerUpdate = ref(false)
+
+        watch(modelValue, (val) => {
+            if (innerUpdate.value) {
+                innerUpdate.value = false
+                return
+            }
+
+            jsonEditor.value?.set({
+                text: val
+            })
+        })
+
+        const handleJSONChange = (
+            content: Content,
+            previousContent: Content,
+            status: OnChangeStatus
+        ) => {
+            if (
+                status.contentErrors &&
+                (status.contentErrors as ContentParseError).isRepairable !==
+                    undefined
+            ) {
+                if (!(status.contentErrors as ContentParseError).isRepairable) {
+                    console.warn('[DlJsonEditor] Failed to parse JSON')
+                    return
                 }
             }
+
+            if (
+                (content as TextContent).text ===
+                (previousContent as TextContent).text
+            ) {
+                return
+            }
+
+            innerUpdate.value = true
+            emit('update:model-value', (content as TextContent).text)
+            emit('change', (content as TextContent).text)
         }
-    },
-    mounted() {
-        this.initJsonEditor()
-        this.setJsonText(this.modelValue)
-        this.$emit('align-text')
-    },
-    methods: {
-        initJsonEditor() {
-            const initialAttrs: any = {
-                onChange: debounce(
-                    (updatedContent: { text: string; json: any }) => {
-                        if (this.preventOnChange) {
-                            this.preventOnChange = false
-                            return
-                        }
-                        this.$emit('update:model-value', updatedContent.text)
-                        if (this.preventUpdate !== null) {
-                            this.$emit('update-prevent', true)
-                        }
-                    },
-                    100
-                ),
+
+        const debouncedHandleJSONChange = debounce(handleJSONChange, 100)
+
+        const initJsonEditor = () => {
+            const initialAttrs: JSONEditorPropsOptional = {
+                onChange: debouncedHandleJSONChange,
+                indentation: indentation.value,
                 mode: Mode.text,
                 mainMenuBar: false,
                 navigationBar: false,
@@ -78,17 +105,49 @@ export default defineComponent({
             // There is type instantiation issue with JSONEditor,
             // it gives excessively deep and possibly infinite error
             // @ts-ignore
-            this.jsonEditor = new JSONEditor({
-                target: this.$refs.jsonEditorRef
-                    ? (this.$refs.jsonEditorRef as Element)
+            jsonEditor.value = new JSONEditor({
+                target: jsonEditorRef.value
+                    ? (jsonEditorRef.value as Element)
                     : document.createElement('div'),
                 props: initialAttrs
             })
-        },
-        setJsonText(text: string) {
-            this.jsonEditor?.set({
-                text
+
+            jsonEditor.value?.set({
+                text: modelValue.value
+            })
+        }
+
+        watch(readonly, (val) => {
+            jsonEditor.value?.updateProps({
+                readOnly: val
             })
+        })
+
+        const format = () => {
+            try {
+                const parsed = JSON.parse(modelValue.value)
+                const formatted = JSON.stringify(
+                    parsed,
+                    null,
+                    indentation.value
+                )
+                jsonEditor.value?.set({
+                    text: formatted
+                })
+            } catch (e) {
+                console.warn('[DlJsonEditor] Failed to format document', e)
+                return
+            }
+        }
+
+        onMounted(() => {
+            initJsonEditor()
+            emit('align-text')
+        })
+
+        return {
+            jsonEditorRef,
+            format
         }
     }
 })
@@ -99,11 +158,13 @@ export default defineComponent({
     --jse-text-color: var(--dl-color-tooltip-background);
     --jse-delimiter-color: var(--dl-color-tooltip-background);
     --jse-key-color: var(--dl-color-negative);
-    --jse-background-color: var(--dl-color-tooltip-text);
+    --jse-background-color: var(--dl-color-secondary-opaque);
     --jse-value-color-boolean: #ae6307;
     --jse-value-color-string: #337433;
     --jse-panel-background: var(--dl-color-fill);
     --jse-panel-border: var(--dl-color-separator);
+    --jse-main-border: 1px solid var(--dl-color-separator);
+
     height: 100%;
     .jse-error {
         display: none !important;

package/src/demos/DlJsonEditorDemo.vue

@@ -6,8 +6,20 @@
             justify-content: space-between;
         "
     >
+        <dl-button
+            label="Align Text"
+            @click="jsonEditorEl.format()"
+        />
+        <dl-switch
+            v-model="readonly"
+            left-label="read only"
+        />
         <div style="height: 200px; width: 500px">
-            <dl-json-editor v-model="jsonModel" />
+            <dl-json-editor
+                ref="jsonEditorEl"
+                v-model="jsonModel"
+                :readonly="readonly"
+            />
         </div>
         <span>JSON: {{ jsonModel }}</span>
 
@@ -41,18 +53,29 @@ import {
     DlJsonEditor,
     DlDialogBox,
     DlDialogBoxHeader,
-    DlButton
+    DlButton,
+    DlSwitch
 } from '../components'
 export default defineComponent({
-    components: { DlJsonEditor, DlDialogBox, DlDialogBoxHeader, DlButton },
+    components: {
+        DlJsonEditor,
+        DlDialogBox,
+        DlDialogBoxHeader,
+        DlButton,
+        DlSwitch
+    },
     setup() {
         const jsonModel = ref('')
         const dialogJsonModel = ref('')
         const dialogState = ref(false)
+        const jsonEditorEl = ref(null)
+        const readonly = ref(false)
         return {
             jsonModel,
             dialogState,
-            dialogJsonModel
+            dialogJsonModel,
+            jsonEditorEl,
+            readonly
         }
     }
 })

package/src/layouts/DlDatasetBrowserLayout/DlDatasetBrowserLayout.vue

@@ -1,23 +1,21 @@
 <template>
-    <div>
-        <dl-layout :template="template">
-            <template #header>
-                <slot name="header" />
-            </template>
-            <template #leftDrawer>
-                <slot name="leftDrawer" />
-            </template>
-            <template #rightDrawer>
-                <slot name="rightDrawer" />
-            </template>
-            <template #body>
-                <slot name="body" />
-            </template>
-            <template #footer>
-                <slot name="footer" />
-            </template>
-        </dl-layout>
-    </div>
+    <dl-layout :template="template">
+        <template #header>
+            <slot name="header" />
+        </template>
+        <template #leftDrawer>
+            <slot name="leftDrawer" />
+        </template>
+        <template #rightDrawer>
+            <slot name="rightDrawer" />
+        </template>
+        <template #body>
+            <slot name="body" />
+        </template>
+        <template #footer>
+            <slot name="footer" />
+        </template>
+    </dl-layout>
 </template>
 
 <script lang="ts">

package/src/layouts/DlPageLayout/DlPageLayout.vue

@@ -1,25 +1,23 @@
 <template>
-    <div>
-        <dl-layout :template="template">
-            <template #header>
-                <slot name="header">
-                    <dl-page-layout-header
-                        :title="title"
-                        :sub-title="subTitle"
-                        :counters="counters"
-                    />
-                </slot>
-            </template>
-            <template #body>
-                <slot name="body">
-                    <slot />
-                </slot>
-            </template>
-            <template #footer>
-                <slot name="footer" />
-            </template>
-        </dl-layout>
-    </div>
+    <dl-layout :template="template">
+        <template #header>
+            <slot name="header">
+                <dl-page-layout-header
+                    :title="title"
+                    :sub-title="subTitle"
+                    :counters="counters"
+                />
+            </slot>
+        </template>
+        <template #body>
+            <slot name="body">
+                <slot />
+            </slot>
+        </template>
+        <template #footer>
+            <slot name="footer" />
+        </template>
+    </dl-layout>
 </template>
 
 <script lang="ts">

package/src/layouts/DlStudioLayout/DlStudioLayout.vue

@@ -1,20 +1,21 @@
 <template>
-    <div class="dl-studio-layout">
-        <dl-layout :template="template">
-            <template #leftDrawer>
-                <slot name="leftDrawer" />
-            </template>
-            <template #rightDrawer>
-                <slot name="rightDrawer" />
-            </template>
-            <template #body>
-                <slot name="body" />
-            </template>
-            <template #footer>
-                <slot name="footer" />
-            </template>
-        </dl-layout>
-    </div>
+    <dl-layout
+        class="dl-studio-layout"
+        :template="template"
+    >
+        <template #leftDrawer>
+            <slot name="leftDrawer" />
+        </template>
+        <template #rightDrawer>
+            <slot name="rightDrawer" />
+        </template>
+        <template #body>
+            <slot name="body" />
+        </template>
+        <template #footer>
+            <slot name="footer" />
+        </template>
+    </dl-layout>
 </template>
 
 <script lang="ts">