@dataloop-ai/components 0.16.6 → 0.16.7

package/package.json

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

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

@@ -72,8 +72,8 @@ export default defineComponent({
     },
     props: {
         counter: {
-            type: Object as PropType<DlKpiCounterType | number>,
-            default: () => ({})
+            type: Object as PropType<DlKpiCounterType>,
+            default: () => ({} as DlKpiCounterType)
         },
         counterFontSize: {
             type: String,
@@ -107,7 +107,7 @@ export default defineComponent({
         },
         progress: {
             type: Object as PropType<DlKpiProgressType>,
-            default: () => ({})
+            default: () => ({} as DlKpiProgressType)
         },
         withBorder: {
             type: Boolean,
@@ -119,7 +119,7 @@ export default defineComponent({
             default: false,
             required: false
         },
-        isSmall: {
+        small: {
             type: Boolean,
             default: false,
             required: false
@@ -132,17 +132,25 @@ export default defineComponent({
 
         const emptyString = '---'
 
+        const isSingleWord = (text: string) => text.split(' ').length === 1
+
         const cssVars = computed(() => {
             return {
-                '--dl-kpi-border': props.withBorder ? '1px solid #e4e4e4' : ''
+                '--dl-kpi-border': props.withBorder ? '1px solid #e4e4e4' : '',
+                '--dl-kpi-title-max-width': isSingleWord(props.title)
+                    ? '100%'
+                    : '90%', // todo: caused a bug with single words
+                '--dl-kpi-sub-title-max-width': isSingleWord(props.subtitle)
+                    ? '100%'
+                    : '90%'
             }
         })
 
         const counterFontSizeComputed = computed(() =>
-            props.isSmall ? '20px' : props.counterFontSize
+            props.small ? '20px' : props.counterFontSize
         )
         const titleFontSizeComputed = computed(() =>
-            props.isSmall ? '14px' : props.titleFontSize
+            props.small ? '14px' : props.titleFontSize
         )
 
         const formatCounter = (counter: DlKpiCounterType) => {
@@ -243,7 +251,7 @@ export default defineComponent({
         &__text {
             display: flex;
             flex-direction: row;
-            max-width: 90%;
+            max-width: var(--dl-kpi-title-max-width);
             max-height: 40px;
             font-style: normal;
             font-weight: 400;
@@ -255,7 +263,7 @@ export default defineComponent({
             gap: 10px;
         }
         &__subtext {
-            max-width: 90%;
+            max-width: var(--dl-kpi-sub-title-max-width);
             max-height: 40px;
             font-style: normal;
             font-weight: 400;

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

@@ -12,7 +12,7 @@
             >
                 <div :class="computeClass('item-content')">
                     <dl-kpi
-                        :counter="item.value"
+                        :counter="kpiValue(item.value)"
                         counter-font-size="30px"
                         :title="capitalize(item.text)"
                         title-font-size="16px"
@@ -20,7 +20,7 @@
                         subtitle-font-size="12px"
                         :info-message="null"
                         :progress="null"
-                        :is-small="small"
+                        :small="small"
                     />
                 </div>
                 <div class="divider" />
@@ -33,6 +33,7 @@
 import { v4 } from 'uuid'
 import { defineComponent, PropType } from 'vue-demi'
 import { DlKpi } from '../../basic'
+import { DlKpiCounterFormat } from '../../types'
 
 interface CounterItem {
     value?: number
@@ -84,6 +85,12 @@ export default defineComponent({
         },
         computeClass(value: string): (string | boolean)[] {
             return [value, this.small && `${value}--small`]
+        },
+        kpiValue(value: string | number) {
+            return {
+                value: value ?? 0,
+                format: DlKpiCounterFormat.long
+            }
         }
     }
 })

package/src/components/compound/DlItem/index.ts

@@ -1,2 +1,2 @@
 import DlItem from './DlItem.vue'
-export default DlItem
+export { DlItem }

package/src/components/essential/DlTypography/DlTypography.vue

@@ -88,5 +88,8 @@ export default defineComponent({
     &--small {
         font-size: var(--dl-font-size-small);
     }
+
+    // to deal with quasar conflicts.
+    line-height: initial !important;
 }
 </style>

package/src/demo/DlCounterDemo.vue

@@ -23,7 +23,7 @@
             small
             :items="[
                 {
-                    text: 'lorem ipsum'
+                    text: 'lorem'
                 },
                 {
                     value: null,