@dataloop-ai/components 0.19.34 → 0.19.36

package/package.json

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

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

@@ -8,6 +8,7 @@
                 :color="hasValue ? 'dl-color-secondary' : 'dl-color-medium'"
                 variant="h1"
                 :size="counterFontSizeComputed"
+                :style="counter.unit && { 'text-transform': 'none' }"
             >
                 {{ formatCounter(counter) }}
             </dl-typography>
@@ -61,7 +62,11 @@ import {
     DlKpiProgressType
 } from './types/KpiItem'
 import { DlProgressBar, DlTypography } from '../../essential'
-import { abbreviateNumber, numberWithComma } from '../../../utils/formatNumber'
+import {
+    abbreviateBytes,
+    abbreviateNumber,
+    numberWithComma
+} from '../../../utils/formatNumber'
 import KpiInfo from './components/KpiInfo.vue'
 
 export default defineComponent({
@@ -177,7 +182,11 @@ export default defineComponent({
                 return emptyString
             }
             if (typeof counter.value === 'number') {
-                return formatNumberCounter(counter.value, counter.format)
+                return formatNumberCounter(
+                    counter.value,
+                    counter.format,
+                    counter.unit
+                )
             }
             if (typeof counter.value === 'string') {
                 if (!counter.value.length) {
@@ -212,13 +221,22 @@ export default defineComponent({
             }
         }
 
-        const formatNumberCounter = (amount: number, format = '') => {
+        const formatNumberCounter = (
+            amount: number,
+            format = '',
+            unit = ''
+        ) => {
             if (isNaN(amount)) {
                 return emptyString
             }
             if (amount === 0) {
                 return 0
             }
+            if (unit === 'bytes') {
+                return (
+                    abbreviateBytes(amount as number) as string
+                ).toUpperCase()
+            }
             return format === 'short'
                 ? (abbreviateNumber(amount as number) as string).toLowerCase()
                 : numberWithComma(amount as number)

package/src/components/compound/DlTabs/DlTabs.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         class="dl-tabs-wrapper"
-        :class="{ 'full-width': fullWidth }"
+        :class="{ 'full-width': fullWidth || fluid }"
         :style="cssVars"
     >
         <tabs-wrapper
@@ -66,6 +66,7 @@ export default defineComponent({
         items: { type: Array as PropType<DlTabDetails[]>, required: true },
         vertical: { type: Boolean, default: false },
         fullWidth: { type: Boolean, default: false },
+        fluid: { type: Boolean, default: false },
         disabled: { type: Boolean, default: false },
         modelValue: { type: String, required: true },
         fontSize: { type: String, default: '18px' },

package/src/demos/DlKpiDemo.vue

@@ -85,6 +85,14 @@ import { DlKpi } from '../components'
 import { DlKpiCounterFormat, DlKpiItem } from '../components/types'
 
 const kpiData: DlKpiItem[] = [
+    {
+        counter: {
+            value: 123456,
+            unit: 'bytes'
+        },
+        title: 'Bytes KiloBytes MegaBytes GigaBytes TeraBytes PetaBytes We have all the bytes',
+        infoMessage: 'info message'
+    },
     {
         counter: {
             value: 200000000,

package/src/demos/DlTabsDemo.vue

@@ -65,7 +65,8 @@
         <dl-tabs
             v-model="selectedTab"
             :items="tabItems"
-            style="margin-top: 100px; width: 100%"
+            fluid
+            style="margin-top: 100px"
             font-size="14px"
             @update:model-value="handleModelValueUpdate"
         >

package/src/utils/formatNumber.ts

@@ -13,3 +13,13 @@ export function abbreviateNumber(nr: number) {
         compactDisplay: 'short'
     }).format(nr)
 }
+
+export function abbreviateBytes(nr: number) {
+    if (!nr) return '0B'
+    return new Intl.NumberFormat('en-US', {
+        notation: 'compact',
+        style: 'unit',
+        unit: 'byte',
+        unitDisplay: 'narrow'
+    }).format(nr)
+}