@dataloop-ai/components 0.16.6 → 0.16.8

package/README.md

@@ -1,45 +1,38 @@
 # [Dataloop Components Library](https://dataloop-ai.github.io/components/) ![components version](https://img.shields.io/npm/v/@dataloop-ai/components?label=Latest%20Library%20Version) ![release status](https://img.shields.io/badge/Relese%20Status-Beta-yellowgreen)
 
-This repository contains custom made vue components for Dataloop platform and apps use
+Welcome to the Dataloop Components Library, which contains custom-made Vue components for the Dataloop platform and apps use. The Vue components are written using the Vue3 composition API and can be used in Vue2 projects as well, as long as you install vue-demi. You can find our documentation with our Storybook link [here](https://dataloop-ai.github.io/components/).
 
-The vue components are written in vue3 composition api and can be used in vue 2 projects as well as long as you install vue-demi
-
-You can see our documentation with our storybook link [here](https://dataloop-ai.github.io/components/)
+## Release Status
+The current release status is beta. You can check the latest library version by looking at the shield above or by visiting our npm page.
 
 ## Development
 
-Working on this repo is simple as it already has hooks set up to guarantee high code quality
-
-The repository has automatic lint on staged files and run tests. if any were to fail then the commit itself will fail too.
+Working with this repository is straightforward, as it already has hooks set up to guarantee high code quality. The repository has automatic linting on staged files and runs tests. If any tests fail, the commit itself will fail too
 
 ### Using Components in other projects
-using the components is as simple as installing the npm package and importing them normally into your vue app
+Using our components is simple: just install the npm package and import them normally into your Vue app. If you're working on a Vue2 project, make sure to install @vue/composition-api.
 
-make sure you if you are on vue2 project to install @vue/composition-api
 
 ### Adding new Components
-in order to add new components you are required to open a pull request
-the pull request must contain the following in order for it to be approved
+To add new components, you are required to open a pull request. The pull request must contain the following to be approved:
 
-- the component vue file
-- the story relating to the component ( for storybook integration )
-- tests for the component
+- The component Vue file
+- The story relating to the component (for Storybook integration)
+- Tests for the component
 
-any pull requests with missing requirements will not be approved.
+Any pull requests with missing requirements will not be approved.
 
 ## Scripts
-the work environment is set up to be used on visual studio code. 
-
-the launch.json file contains 3 main configs
+The work environment is set up to be used on Visual Studio Code. 
 
-1. running a vite server to simulate vue3 environment
-2. running a storybook server to view the stories
-3. running tests
+The launch.json file contains three main configurations:
 
-you can also access these commands by running the following 
+1. Running a Vite server to simulate the Vue3 environment
+2. Running a Storybook server to view the stories
+3. Running tests
 
-1. npm run dev ( for vite server )
-2. npm run storybook ( for storybook server )
-3. npm run test ( for tests )
+You can also access these commands by running the following:
 
-There are automatic pipelines when working. if development gets merged into master we automatically bump version by a minor and any other fix branch to master will only bump it by patch.
+1. npm run dev (for the Vite server)
+2. npm run storybook (for the Storybook server)
+3. npm run test (for running tests)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.16.6",
+  "version": "0.16.8",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -22,7 +22,7 @@
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {
-    "@dataloop-ai/icons": "^3.0.5",
+    "@dataloop-ai/icons": "^3.0.6",
     "@types/lodash": "^4.14.184",
     "chart.js": "^3.9.1",
     "lodash": "^4.17.21",

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,