@dataloop-ai/components 0.16.8 → 0.16.10

package/package.json

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

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

@@ -38,7 +38,7 @@
             </div>
         </div>
         <div
-            v-if="withProgressBar"
+            v-if="progress"
             class="kpi_box__progress_bar"
         >
             <dl-progress-bar
@@ -107,14 +107,9 @@ export default defineComponent({
         },
         progress: {
             type: Object as PropType<DlKpiProgressType>,
-            default: () => ({} as DlKpiProgressType)
+            default: null
         },
-        withBorder: {
-            type: Boolean,
-            default: false,
-            required: false
-        },
-        withProgressBar: {
+        bordered: {
             type: Boolean,
             default: false,
             required: false
@@ -127,6 +122,9 @@ export default defineComponent({
     },
     setup(props) {
         const progressValue = (progress: DlKpiProgressType) => {
+            if (!progress) {
+                return null
+            }
             return progress?.value ? progress.value / 100 : null
         }
 
@@ -136,7 +134,7 @@ export default defineComponent({
 
         const cssVars = computed(() => {
             return {
-                '--dl-kpi-border': props.withBorder ? '1px solid #e4e4e4' : '',
+                '--dl-kpi-border': props.bordered ? '1px solid #e4e4e4' : '',
                 '--dl-kpi-title-max-width': isSingleWord(props.title)
                     ? '100%'
                     : '90%', // todo: caused a bug with single words

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

@@ -61,10 +61,6 @@ export default defineComponent({
             validator(value: CounterItem[]): boolean {
                 return value.length <= 8
             }
-        },
-        abbreviateNumbers: {
-            type: Boolean,
-            default: true
         }
     },
     data() {

package/src/components/essential/DlIcon/DlIcon.vue

@@ -32,6 +32,7 @@
 import { v4 } from 'uuid'
 import { defineComponent } from 'vue-demi'
 import { getColor, loggerFactory } from '../../../utils'
+import { dynamicSvgImport } from '../../../utils/dynamicSvgImport'
 
 export default defineComponent({
     name: 'DlIcon',
@@ -104,7 +105,12 @@ export default defineComponent({
     },
     methods: {
         loadSvg() {
-            return new Promise<void>((resolve, reject) => {
+            return new Promise<void>(async (resolve, reject) => {
+                let dynamicalImagePath = null
+                await dynamicSvgImport(this.icon).then((path: any) => {
+                    dynamicalImagePath = path
+                })
+
                 const svgElement = new Image()
                 svgElement.setAttribute('height', this.size)
                 svgElement.setAttribute('width', this.size)
@@ -128,7 +134,7 @@ export default defineComponent({
                 try {
                     svgElement.src = this.svgSource
                         ? `${this.svgSource}/${this.icon}.svg`
-                        : require(`@dataloop-ai/icons/assets/${this.icon}.svg`)
+                        : dynamicalImagePath
                 } catch (e) {
                     reject(e)
                 }

package/src/utils/dynamicSvgImport.ts

@@ -0,0 +1,5 @@
+export function dynamicSvgImport(iconName: string) {
+    return import(
+        `../../node_modules/@dataloop-ai/icons/assets/${iconName}.svg`
+    ).then((d) => d.default)
+}