@dataloop-ai/components 0.19.33 → 0.19.34

package/package.json

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

package/src/components/basic/DlKpi/DlKpi.vue

@@ -118,7 +118,8 @@ export default defineComponent({
             type: Boolean,
             default: false,
             required: false
-        }
+        },
+        dense: Boolean
     },
     setup(props) {
         const progressValue = (progress: DlKpiProgressType) => {
@@ -132,8 +133,8 @@ export default defineComponent({
 
         const isSingleWord = (text: string) => text?.split(' ').length === 1
 
-        const cssVars = computed(() => {
-            return {
+        const cssVars = computed<Record<string, string>>(() => {
+            const vars: Record<string, string> = {
                 '--dl-kpi-border': props.bordered
                     ? '1px solid var(--dl-color-separator)'
                     : '',
@@ -144,6 +145,11 @@ export default defineComponent({
                     ? '100%'
                     : '90%'
             }
+
+            if (props.dense) {
+                vars['--dl-kpi-padding'] = '0'
+            }
+            return vars
         })
 
         const hasValue = computed(() => {

package/src/components/compound/DlCounters/DlCounters.vue

@@ -21,6 +21,7 @@
                         :info-message="kpiInfoMessage(item)"
                         :progress="null"
                         :small="small"
+                        :dense="dense"
                     />
                 </div>
                 <div class="divider" />
@@ -33,7 +34,7 @@
 import { v4 } from 'uuid'
 import { defineComponent, PropType } from 'vue-demi'
 import { DlKpi } from '../../basic'
-import { DlKpiCounterFormat } from '../../types'
+import { DlKpiCounterFormat, DlKpiCounterType } from '../../types'
 import { DlCounterItem } from './types'
 
 export default defineComponent({
@@ -68,7 +69,8 @@ export default defineComponent({
         subtitleFontSize: {
             type: String,
             default: '12px'
-        }
+        },
+        dense: Boolean
     },
     data() {
         return {
@@ -77,9 +79,15 @@ export default defineComponent({
     },
     computed: {
         cssVars(): Record<string, string> {
-            return {
+            const vars: Record<string, string> = {
                 '--dl-counter-spacing': this.spacing
             }
+
+            if (this.dense) {
+                vars['--dl-counters-padding'] = '0'
+            }
+
+            return vars
         }
     },
     methods: {
@@ -93,7 +101,7 @@ export default defineComponent({
             return {
                 value: item.value ?? 0,
                 format: item.format ?? DlKpiCounterFormat.long
-            }
+            } as DlKpiCounterType
         },
         kpiInfoMessage(item: DlCounterItem) {
             return item.infoMessage || null
@@ -104,7 +112,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .dl-counters-container {
-    padding: 10px;
+    padding: var(--dl-counters-padding, 10px);
     width: fit-content;
 }
 

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

@@ -26,6 +26,7 @@ import {
 } from 'vanilla-jsoneditor'
 import { debounce } from 'lodash'
 import { stateManager } from '../../../StateManager'
+import { nextTick } from 'process'
 
 export default defineComponent({
     model: {
@@ -150,6 +151,10 @@ export default defineComponent({
             jsonEditor.value?.set({
                 text: modelValue.value
             })
+
+            nextTick(() => {
+                jsonEditor.value?.refresh()
+            })
         }
 
         watch(readonly, (val) => {