@dataloop-ai/components 0.18.28 → 0.18.30

package/package.json

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

package/src/assets/globals.scss

@@ -200,6 +200,15 @@ body {
     --dl-date-picker-shadow: 0px 3px 6px #101e7326;
     --dl-date-picker-selected-strip: rgb(52, 82, 255, 0.2);
     --dl-date-picker-selected-date: #8FA0FF;
+
+
+    // DlJsonEditor based on atom one themes
+    --dl-json-editor-key-color: #a626a4;
+    --dl-json-editor-background-color: #fafafa;
+    --dl-json-editor-panel-background: #fafafa;
+    --dl-json-editor-value-color-boolean: #0184bb;
+    --dl-json-editor-value-color-number: #c18401;
+    --dl-json-editor-value-color-string: #50a14f;
 }
 
 /* Define styles for the root window with dark - mode preference */
@@ -250,6 +259,13 @@ body {
     --dl-date-picker-shadow: 0px 3px 6px #292e3580;
     --dl-date-picker-selected-strip: rgb(124, 140, 255, 0.2);
     --dl-date-picker-selected-date: #535E96;
+
+    --dl-json-editor-key-color: #c678dd;
+    --dl-json-editor-background-color: #282c34;
+    --dl-json-editor-panel-background: #282c34;
+    --dl-json-editor-value-color-boolean: #56b6c2;
+    --dl-json-editor-value-color-number: #d19a66;
+    --dl-json-editor-value-color-string: #98c379;
 }
 
 // scrollbar

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

@@ -6,7 +6,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref, toRefs, watch } from 'vue-demi'
+import {
+    defineComponent,
+    onMounted,
+    PropType,
+    ref,
+    toRefs,
+    watch
+} from 'vue-demi'
 import {
     Content,
     ContentParseError,
@@ -41,11 +48,16 @@ export default defineComponent({
             required: false,
             type: Boolean,
             default: false
+        },
+        mode: {
+            required: false,
+            type: String as PropType<Mode>,
+            default: Mode.text
         }
     },
     emits: ['update:model-value', 'align-text', 'change'],
     setup(props, { emit }) {
-        const { modelValue, indentation, readonly } = toRefs(props)
+        const { modelValue, indentation, readonly, mode } = toRefs(props)
 
         const jsonEditorRef = ref(null)
         const jsonEditor = ref<JSONEditor>(null as any)
@@ -62,6 +74,13 @@ export default defineComponent({
             })
         })
 
+        watch(mode, (val) => {
+            jsonEditor.value?.updateProps({
+                mode: val,
+                readOnly: val === Mode.tree
+            })
+        })
+
         const handleJSONChange = (
             content: Content,
             previousContent: Content,
@@ -134,6 +153,7 @@ export default defineComponent({
                 jsonEditor.value?.set({
                     text: formatted
                 })
+                emit('align-text')
             } catch (e) {
                 console.warn('[DlJsonEditor] Failed to format document', e)
                 return
@@ -155,17 +175,20 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .json-editor {
+    width: 100%;
+    height: 100%;
+
     --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-secondary-opaque);
-    --jse-value-color-boolean: #ae6307;
-    --jse-value-color-string: #337433;
-    --jse-panel-background: var(--dl-color-fill);
+    --jse-key-color: var(--dl-json-editor-key-color);
+    --jse-background-color: var(--dl-json-editor-background-color);
+    --jse-value-color-boolean: var(--dl-json-editor-value-color-boolean);
+    --jse-value-color-string: var(--dl-json-editor-value-color-string);
+    --jse-value-color-number: var(--dl-json-editor-value-color-number);
+    --jse-panel-background: var(--dl-json-editor-panel-background);
     --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/components/compound/DlJsonEditor/types.ts

@@ -1,4 +1,3 @@
-export interface Query {
-    name: string
-    query: string | null
-}
+import { Mode as DlJsonEditorModes } from 'vanilla-jsoneditor'
+
+export { DlJsonEditorModes }

package/src/components/essential/DlLayout/DlLayout.vue

@@ -46,7 +46,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .dl-layout {
-    height: 100vh;
+    height: 100%;
     width: 100%;
     display: grid;
     grid-template-areas: var(--dl-layout-template);

package/src/demos/DlJsonEditorDemo.vue

@@ -14,11 +14,19 @@
             v-model="readonly"
             left-label="read only"
         />
+        <div style="height: 200px; width: 500px">
+            <dl-select
+                v-model="mode"
+                :options="['text', 'tree']"
+                title="Mode"
+            />
+        </div>
         <div style="height: 200px; width: 500px">
             <dl-json-editor
                 ref="jsonEditorEl"
                 v-model="jsonModel"
                 :readonly="readonly"
+                :mode="mode"
             />
         </div>
         <span>JSON: {{ jsonModel }}</span>
@@ -54,15 +62,18 @@ import {
     DlDialogBox,
     DlDialogBoxHeader,
     DlButton,
-    DlSwitch
+    DlSwitch,
+    DlSelect
 } from '../components'
+import { DlJsonEditorModes } from '../components/compound/DlJsonEditor/types'
 export default defineComponent({
     components: {
         DlJsonEditor,
         DlDialogBox,
         DlDialogBoxHeader,
         DlButton,
-        DlSwitch
+        DlSwitch,
+        DlSelect
     },
     setup() {
         const jsonModel = ref('')
@@ -70,12 +81,15 @@ export default defineComponent({
         const dialogState = ref(false)
         const jsonEditorEl = ref(null)
         const readonly = ref(false)
+        const mode = ref(DlJsonEditorModes.text)
+
         return {
             jsonModel,
             dialogState,
             dialogJsonModel,
             jsonEditorEl,
-            readonly
+            readonly,
+            mode
         }
     }
 })

package/src/layouts/DlDatasetBrowserLayout/DlDatasetBrowserLayout.vue

@@ -1,7 +1,13 @@
 <template>
     <dl-layout :template="template">
         <template #header>
-            <slot name="header" />
+            <slot name="header">
+                <dl-page-layout-header
+                    :title="title"
+                    :sub-title="subTitle"
+                    :counters="counters"
+                />
+            </slot>
         </template>
         <template #leftDrawer>
             <slot name="leftDrawer" />
@@ -19,13 +25,30 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
+import { defineComponent, PropType } from 'vue-demi'
 import { DlLayout } from '../../components'
+import { DlCounterItem } from '../../types'
+import DlPageLayoutHeader from '../DlPageLayout/components/DlPageLayoutHeader/DlPageLayoutHeader.vue'
 
 export default defineComponent({
     name: 'DlDatasetBrowser',
     components: {
-        DlLayout
+        DlLayout,
+        DlPageLayoutHeader
+    },
+    props: {
+        title: {
+            type: String,
+            default: ''
+        },
+        subTitle: {
+            type: String,
+            default: ''
+        },
+        counters: {
+            type: Array as PropType<DlCounterItem[]>,
+            default: () => [] as DlCounterItem[]
+        }
     },
     setup() {
         const template = '"h h h" "l p r" "f f f"'