@dataloop-ai/components 0.16.26 → 0.16.27

package/package.json

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

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

@@ -78,11 +78,10 @@ export default defineComponent({
         counterFontSize: {
             type: String,
             default: '1.88em',
-            required: true
+            required: false
         },
         title: {
             type: String,
-            default: '---',
             required: true
         },
         titleFontSize: {
@@ -130,7 +129,7 @@ export default defineComponent({
 
         const emptyString = '---'
 
-        const isSingleWord = (text: string) => text.split(' ').length === 1
+        const isSingleWord = (text: string) => text?.split(' ').length === 1
 
         const cssVars = computed(() => {
             return {
@@ -227,7 +226,7 @@ export default defineComponent({
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
-    padding: 20px 6px;
+    padding: var(--dl-kpi-padding, 20px 6px);
     border-radius: 2px;
     overflow: hidden;
     border: var(--dl-kpi-border);
@@ -249,7 +248,7 @@ export default defineComponent({
         &__text {
             display: flex;
             flex-direction: row;
-            max-width: var(--dl-kpi-title-max-width);
+            max-width: var(--dl-kpi-max-width, var(--dl-kpi-title-max-width));
             max-height: 40px;
             font-style: normal;
             font-weight: 400;
@@ -261,7 +260,10 @@ export default defineComponent({
             gap: 10px;
         }
         &__subtext {
-            max-width: var(--dl-kpi-sub-title-max-width);
+            max-width: var(
+                --dl-kpi-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

@@ -13,11 +13,11 @@
                 <div :class="computeClass('item-content')">
                     <dl-kpi
                         :counter="kpiValue(item.value)"
-                        counter-font-size="30px"
+                        :counter-font-size="counterFontSize"
                         :title="capitalize(item.text)"
-                        title-font-size="16px"
+                        :title-font-size="titleFontSize"
                         :subtitle="item.subtext && capitalize(item.subtext)"
-                        subtitle-font-size="12px"
+                        :subtitle-font-size="subtitleFontSize"
                         :info-message="null"
                         :progress="null"
                         :small="small"
@@ -51,16 +51,28 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
-        spacing: {
-            type: String,
-            default: '30px'
-        },
         items: {
             type: Array as PropType<CounterItem[]>,
             default: (): CounterItem[] => [],
             validator(value: CounterItem[]): boolean {
                 return value.length <= 8
             }
+        },
+        spacing: {
+            type: String,
+            default: '30px'
+        },
+        counterFontSize: {
+            type: String,
+            default: '30px'
+        },
+        titleFontSize: {
+            type: String,
+            default: '16px'
+        },
+        subtitleFontSize: {
+            type: String,
+            default: '12px'
         }
     },
     data() {
@@ -190,3 +202,9 @@ ul {
     }
 }
 </style>
+
+<style lang="scss">
+.dl-counters-container {
+    --dl-kpi-padding: '0px';
+}
+</style>