@dataloop-ai/components 0.19.284 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.284",
+  "version": "0.20.0",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -10,7 +10,7 @@
     "preserve": "./moveToPublic.sh",
     "dev": "npm run preserve && vite",
     "dev:2": "./misc/unpackAndRunV2.sh",
-    "build": "npm run preserve &&  vue-tsc --noEmit --skipLibCheck && vite build",
+    "build": "npm run preserve &&  vue-tsc --noEmit --skipLibCheck --project tsconfig.vue.json && vite build",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build:storybook": "storybook build",
@@ -23,72 +23,72 @@
     "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.91",
-    "@types/flat": "^5.0.2",
-    "@types/lodash": "^4.14.184",
-    "@types/sortablejs": "^1.15.7",
-    "chart.js": "^3.9.1",
+    "@dataloop-ai/icons": "^3.0.100",
+    "@types/flat": "^5.0.5",
+    "@types/lodash": "^4.17.4",
+    "@types/sortablejs": "^1.15.8",
+    "chart.js": "^4.4.3",
     "chartjs-plugin-datalabels": "^2.2.0",
-    "flat": "^5.0.2",
-    "highlight.js": "^11.8.0",
+    "flat": "^6.0.1",
+    "highlight.js": "^11.9.0",
     "lodash": "^4.17.21",
-    "marked": "^11.1.1",
-    "moment": "^2.29.4",
-    "sass": "^1.51.0",
-    "sass-loader": "^12.6.0",
-    "sortablejs": "^1.15.0",
-    "uuid": "^8.3.2",
-    "v-wave": "^1.5.0",
-    "vanilla-jsoneditor": "^0.10.2",
-    "vue-demi": "^0.14.5",
+    "marked": "^12.0.2",
+    "moment": "^2.30.1",
+    "sass": "^1.77.2",
+    "sass-loader": "^14.2.1",
+    "sortablejs": "^1.15.2",
+    "uuid": "^9.0.1",
+    "v-wave": "^2.0.0",
+    "vanilla-jsoneditor": "^0.23.4",
+    "vue-demi": "^0.14.7",
     "vue-sortable": "^0.1.3",
-    "vue2-teleport": "^1.0.1"
+    "vue2-teleport": "^1.1.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@mdx-js/react": "^2.1.1",
-    "@storybook/addon-actions": "^7.0.4",
-    "@storybook/addon-essentials": "^7.0.4",
-    "@storybook/addon-links": "^7.0.4",
-    "@storybook/addon-mdx-gfm": "^7.0.4",
-    "@storybook/client-api": "^7.0.4",
-    "@storybook/vue3": "^7.0.4",
-    "@storybook/vue3-vite": "^7.0.4",
-    "@types/jsdom": "^16.2.14",
-    "@types/node": "^18.7.18",
-    "@types/resize-observer-browser": "^0.1.7",
-    "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "@typescript-eslint/parser": "^5.20.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitest/coverage-c8": "^0.29.2",
-    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/test-utils": "^2.0.0-rc.18",
-    "babel-loader": "^8.2.4",
-    "eslint": "^8.13.0",
-    "eslint-config-prettier": "^8.5.0",
+    "@babel/core": "^7.24.5",
+    "@mdx-js/react": "^3.0.1",
+    "@storybook/addon-actions": "^8.1.1",
+    "@storybook/addon-essentials": "^8.1.1",
+    "@storybook/addon-links": "^8.1.1",
+    "@storybook/addon-mdx-gfm": "^8.1.1",
+    "@storybook/client-api": "^7.6.17",
+    "@storybook/vue3": "^8.1.1",
+    "@storybook/vue3-vite": "^8.1.1",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^20.12.12",
+    "@types/resize-observer-browser": "^0.1.11",
+    "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^7.10.0",
+    "@typescript-eslint/parser": "^7.10.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/test-utils": "^2.4.6",
+    "babel-loader": "^9.1.3",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-member-order": "^0.0.3",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-storybook": "^0.6.11",
-    "eslint-plugin-vue": "^8.6.0",
-    "html-webpack-plugin": "^5.5.0",
-    "jsdom": "^21.1.0",
-    "lint-staged": "^12.3.8",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-vue": "^9.26.0",
+    "html-webpack-plugin": "^5.6.0",
+    "jsdom": "^24.0.0",
+    "lint-staged": "^15.2.2",
     "pre-commit": "^1.2.2",
-    "prettier": "^2.6.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^7.0.4",
+    "prettier": "^3.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^8.1.1",
     "storybook-addon-themes": "^6.1.0",
-    "typescript": "^4.5.4",
-    "vite": "^4.5.2",
-    "vitest": "^0.29.2",
-    "vitest-canvas-mock": "^0.2.2",
-    "vue": "^3.3.4",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vitest": "^1.6.0",
+    "vitest-canvas-mock": "^0.3.3",
+    "vue": "^3.4.27",
     "vue-composition-test-utils": "^1.0.3",
-    "vue-loader": "^16.8.3",
-    "vue-tsc": "^0.35.2"
+    "vue-loader": "^17.4.2",
+    "vue-tsc": "^2.0.19"
   },
   "keywords": [],
   "author": "fadi@dataloop.ai",

package/src/components/basic/DlButton/DlButton.vue

@@ -295,7 +295,7 @@ export default defineComponent({
         hasIcon(): boolean {
             return typeof this.icon === 'string' && this.icon !== ''
         },
-        containerStyles(): object {
+        containerStyles(): Record<string, any> {
             return this.fluid ? { width: '100%' } : {}
         },
         hasContent(): boolean {
@@ -422,10 +422,10 @@ export default defineComponent({
                 '--dl-button-padding': this.dense
                     ? '0'
                     : this.padding
-                    ? this.padding
-                    : this.hasIcon && !this.hasContent
-                    ? setIconPadding(this.size)
-                    : setPadding(this.size),
+                      ? this.padding
+                      : this.hasIcon && !this.hasContent
+                        ? setIconPadding(this.size)
+                        : setPadding(this.size),
                 '--dl-button-margin': this.margin,
                 '--dl-button-font-size': setFontSize(this.size),
                 '--dl-button-cursor': this.isActionable

package/src/components/basic/DlPopup/DlPopup.vue

@@ -147,7 +147,7 @@ export default defineComponent({
             default: ''
         },
         arrowNavItems: {
-            type: [String, Array, Object],
+            type: Array as PropType<any[]>,
             default: () => [] as any[]
         },
         zIndex: {

package/src/components/basic/DlProgressChart/DlProgressChart.vue

@@ -1,20 +1,12 @@
 <template>
-    <div
-        :id="uuid"
-        ref="rootRef"
-        class="root"
-        :style="rootStyle"
-    >
+    <div :id="uuid" ref="rootRef" class="root" :style="rootStyle">
         <div class="progress-bar">
             <div
                 v-for="item in progressBarItems"
                 :key="item.index"
                 :style="getBarItemStyles(item)"
             >
-                <dl-tooltip
-                    anchor="center middle"
-                    self="bottom middle"
-                >
+                <dl-tooltip anchor="center middle" self="bottom middle">
                     {{ item.tooltipText }}
                 </dl-tooltip>
             </div>
@@ -29,10 +21,7 @@
                 <dl-tooltip v-if="isOverflowing[item.index]">
                     {{ item.name }}
                 </dl-tooltip>
-                <span
-                    class="circle"
-                    :style="{ backgroundColor: item.color }"
-                />
+                <span class="circle" :style="{ backgroundColor: item.color }" />
                 <div
                     v-if="isVue2"
                     ref="textRef"
@@ -46,7 +35,7 @@
                     v-else
                     :ref="
                         (el) => {
-                            textRef[item.index] = el
+                            setTextRef(item.index, el)
                         }
                     "
                     :data-index="item.index"
@@ -63,10 +52,10 @@
                         :size="12"
                         color="color"
                         data-test="counter-link"
-                    >({{ item.value }})</dl-link><span
-                        v-else
-                        data-test="counter-text"
-                    >({{ item.value }})</span>
+                    >({{ item.value }})</dl-link
+                    ><span v-else data-test="counter-text"
+                    >({{ item.value }})</span
+                    >
                 </span>
             </div>
         </div>
@@ -220,6 +209,9 @@ export default defineComponent({
                 flexShrink: item.percentage,
                 backgroundColor: item.color
             }
+        },
+        setTextRef(index: number, el: any) {
+            this.textRef[index] = el as any
         }
     },
 

package/src/components/compound/DlCard/DlCard.vue

@@ -6,10 +6,7 @@
         @mouseleave="onCardMouseleave"
         @click="onCardClick"
     >
-        <div
-            v-if="icon && !isEmpty"
-            class="card--icon"
-        >
+        <div v-if="icon && !isEmpty" class="card--icon">
             <dl-icon
                 :icon="icon.icon"
                 :styles="iconStyles"
@@ -17,20 +14,13 @@
                 :color="iconColor"
             />
         </div>
-        <div
-            v-else-if="image && !isEmpty"
-            class="card--image"
-        >
+        <div v-else-if="image && !isEmpty" class="card--image">
             <div
                 v-if="interactive && hasImageLink"
                 class="card--image__link-icon"
                 @click="stopPropagationEvent"
             >
-                <DlLink
-                    newtab
-                    external
-                    :href="imageLink"
-                >
+                <DlLink newtab external :href="imageLink">
                     <dl-icon
                         :icon="image.link.icon"
                         :size="image.link.size"
@@ -53,7 +43,7 @@
                     class="card--image__image-holder__image"
                     :onload="onImageLoad"
                     @mousemove="movePreview"
-                >
+                />
                 <div
                     v-if="hasMagnifyingGlass"
                     ref="magnifyingGlass"
@@ -77,14 +67,11 @@
                         :src="image.src"
                         :alt="imageAlt"
                         class="card--image__image-preview__image"
-                    >
+                    />
                 </figure>
             </dl-tooltip>
         </div>
-        <div
-            v-if="!isEmpty"
-            class="card--content"
-        >
+        <div v-if="!isEmpty" class="card--content">
             <div>
                 <slot name="header">
                     <div v-if="interactive">
@@ -117,10 +104,7 @@
                             </div>
                         </div>
                     </div>
-                    <div
-                        v-else
-                        class="card--header"
-                    >
+                    <div v-else class="card--header">
                         <span class="card--header_title">{{ title }}</span>
                     </div>
                 </slot>
@@ -168,20 +152,14 @@
                             </dl-ellipsis>
                         </div>
                     </div>
-                    <span
-                        v-else
-                        class="card--content_text"
-                    >{{ text }}</span>
+                    <span v-else class="card--content_text">{{ text }}</span>
                 </slot>
             </div>
             <slot name="footer">
                 <div v-if="interactive">
                     <div class="card__interactive-description">
                         <div class="flex full-width items-center">
-                            <dl-typography
-                                size="10px"
-                                color="dl-color-medium"
-                            >
+                            <dl-typography size="10px" color="dl-color-medium">
                                 Description
                             </dl-typography>
                         </div>
@@ -193,10 +171,7 @@
                         </div>
                     </div>
                     <div class="card__interactive-description__text">
-                        <dl-ellipsis
-                            v-if="description"
-                            :text="description"
-                        />
+                        <dl-ellipsis v-if="description" :text="description" />
                         <dl-typography
                             v-else
                             size="12px"
@@ -206,10 +181,7 @@
                         </dl-typography>
                     </div>
                 </div>
-                <div
-                    v-else
-                    class="card--links"
-                >
+                <div v-else class="card--links">
                     <div
                         v-for="(link, idx) in links"
                         :key="idx"
@@ -239,14 +211,8 @@
             v-if="isEmpty && emptyStateProps"
             v-bind="emptyStateProps"
         >
-            <template
-                v-for="(_, slot) in $slots"
-                #[slot]="props"
-            >
-                <slot
-                    :name="slot"
-                    v-bind="props"
-                />
+            <template v-for="(_, slot) in $slots" #[slot]="props">
+                <slot :name="slot" v-bind="props" />
             </template>
         </dl-empty-state>
     </div>
@@ -304,7 +270,7 @@ export default defineComponent({
         },
         links: {
             type: Array as PropType<DlCardLinkType[]>,
-            default: (): DlCardLinkType[] => []
+            default: (): DlCardLinkType[] => [] as DlCardLinkType[]
         },
         height: {
             type: String,

package/src/components/compound/DlCharts/charts/DlConfusionMatrix/DlConfusionMatrix.vue

@@ -494,7 +494,7 @@ export default defineComponent({
         getMatrixCellWidth() {
             return this.getMatrixWidth() / this.matrix.length
         },
-        handleMatrixScroll(e: MouseEvent | UIEvent) {
+        handleMatrixScroll(e: MouseEvent | UIEvent | any) {
             const target = e.target as HTMLElement
             ;(this.$refs.yAxisOuter as HTMLElement).scroll(0, target.scrollTop)
         },

package/src/components/compound/DlCharts/components/DlChartLabels.vue

@@ -1,16 +1,13 @@
 <template>
-    <div
-        :style="labelStyles"
-        class="dl-chart-labels-container"
-    >
+    <div :style="labelStyles" class="dl-chart-labels-container">
         <div class="dl-chart-labels">
             <div
-                v-for="(label, index) in labels"
+                v-for="(label, index) in computedLabels"
                 :key="index"
                 class="dl-chart-labels--label"
             >
                 <dl-tooltip v-if="isOverflowing[index]">
-                    {{ stringVerification(label.title, label) }}
+                    {{ stringVerification(label.title) }}
                 </dl-tooltip>
                 <dl-typography
                     v-if="isVue2"
@@ -19,7 +16,7 @@
                     :data-index="index"
                     :color="labelColor"
                 >
-                    {{ label.title || label }}
+                    {{ label.title }}
                 </dl-typography>
                 <dl-typography
                     v-else
@@ -28,16 +25,13 @@
                     :size="fontSize"
                     :color="labelColor"
                 >
-                    {{ stringVerification(label.title, label) }}
+                    {{ stringVerification(label.title) }}
                 </dl-typography>
             </div>
         </div>
-        <div
-            v-if="hasSubtitles"
-            class="dl-chart-labels"
-        >
+        <div v-if="hasSubtitles" class="dl-chart-labels">
             <div
-                v-for="(label, index) in labels"
+                v-for="(label, index) in computedLabels"
                 :key="index"
                 class="dl-chart-labels--label"
             >
@@ -64,14 +58,8 @@
                 </dl-typography>
             </div>
         </div>
-        <div
-            v-if="title"
-            class="dl-chart-labels-title"
-        >
-            <dl-typography
-                :size="titleSize"
-                :color="titleColor"
-            >
+        <div v-if="title" class="dl-chart-labels-title">
+            <dl-typography :size="titleSize" :color="titleColor">
                 {{ title }}
             </dl-typography>
         </div>
@@ -165,6 +153,14 @@ export default defineComponent({
         }
     },
     computed: {
+        computedLabels(): { title: string; subtitle: string }[] {
+            return this.labels.map((label) => {
+                if (typeof label === 'string') {
+                    return { title: label, subtitle: '' }
+                }
+                return label
+            })
+        },
         labelStyles(): Record<string, string> {
             return {
                 '--dl-chart-labels-width': this.width
@@ -195,13 +191,13 @@ export default defineComponent({
                   ) as Element[])
                 : this[elementRef]
             for (const el of elements as Element[]) {
-                (this[ref] as ResizeObserver).observe(el)
+                ;(this[ref] as ResizeObserver).observe(el)
             }
         })
     },
     beforeUnmount() {
         observerRefs.forEach(({ ref }) => {
-            (this[ref] as ResizeObserver).disconnect()
+            ;(this[ref] as ResizeObserver).disconnect()
             this[ref] = null
         })
     },
@@ -218,12 +214,12 @@ export default defineComponent({
             }
         },
         forwardChildEl(
-            el: { $el: Element },
+            el: { $el: Element } | any,
             refName: 'textRef' | 'subtitleRef',
             index: number
         ) {
             if (el?.$el) {
-                (this[refName] as Element[])[index] = el.$el
+                ;(this[refName] as Element[])[index] = el.$el
             }
         }
     }

package/src/components/compound/DlCharts/components/DlChartLegend.vue

@@ -1,16 +1,11 @@
 <template>
-    <div
-        :style="legendStyles"
-        class="dl-chart-legend"
-    >
+    <div :style="legendStyles" class="dl-chart-legend">
         <div
             v-for="(item, index) in datasets"
             :key="index"
             class="dl-chart-legend--item"
             :style="{
-                '--dl-chart-badge-color': getColor(
-                    item.backgroundColor.replace('--', '')
-                )
+                '--dl-chart-badge-color': getColor(item)
             }"
             @click="hideData($event, item, index)"
             @mouseenter="onMouseEnter(item, index)"
@@ -18,9 +13,7 @@
         >
             <dl-badge
                 :color="
-                    item.hidden
-                        ? 'var(--dl-color-disabled)'
-                        : getColor(item.backgroundColor.replace('--', ''))
+                    item.hidden ? 'var(--dl-color-disabled)' : getColor(item)
                 "
             />
             <dl-typography
@@ -35,7 +28,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
-import type { LegendItem, DatasetChartOptions } from 'chart.js'
+import type { ChartDataset } from 'chart.js'
 import { getColor } from '../../../../utils'
 import { DlBadge, DlTypography } from '../../../essential'
 
@@ -57,8 +50,8 @@ export default defineComponent({
             default: '100%'
         },
         datasets: {
-            type: Array,
-            default: () => [] as unknown as DatasetChartOptions
+            type: Array as PropType<ChartDataset[]>,
+            default: () => [] as any as ChartDataset[]
         },
         alignItems: {
             type: String as PropType<'left' | 'right' | 'center'>,
@@ -75,17 +68,17 @@ export default defineComponent({
         }
     },
     methods: {
-        onMouseEnter(item: LegendItem, index: number) {
+        onMouseEnter(item: ChartDataset, index: number) {
             if (!item.hidden) {
                 this.$emit('on-hover', item, index)
             }
         },
-        onMouseLeave(item: LegendItem, index: number) {
+        onMouseLeave(item: ChartDataset, index: number) {
             if (!item.hidden) {
                 this.$emit('on-leave', item, index)
             }
         },
-        hideData(event: Event, item: LegendItem, index: number) {
+        hideData(event: Event, item: ChartDataset, index: number) {
             this.$emit(
                 'hide',
                 {
@@ -95,7 +88,11 @@ export default defineComponent({
                 index
             )
         },
-        getColor
+        getColor: (item: ChartDataset) => {
+            if ((item.backgroundColor as any)?.replace) {
+                return getColor((item.backgroundColor as any).replace('--', ''))
+            }
+        }
     }
 })
 </script>

package/src/components/compound/DlRange/DlRange.vue

@@ -40,14 +40,8 @@
                     data-test="track-container"
                     v-on="trackContainerEvents"
                 >
-                    <div
-                        class="track"
-                        :style="trackStyle"
-                    >
-                        <div
-                            class="selection"
-                            :style="selectionBarStyle"
-                        />
+                    <div class="track" :style="trackStyle">
+                        <div class="selection" :style="selectionBarStyle" />
                         <div
                             key="tmin"
                             ref="minThumbRef"
@@ -67,7 +61,7 @@
                             type="hidden"
                             :name="name"
                             :value="displayValue"
-                        >
+                        />
                     </div>
                 </div>
             </div>

package/src/components/compound/DlSelect/DlSelect.vue

@@ -341,11 +341,13 @@ import {
     getLabel,
     getIconSize,
     optionsValidator,
-    DlSelectOptionType,
     getLabelOfSelectedOption,
     getCaseInsensitiveInput
 } from './utils'
-import { DlSelectOption as DlSelectOptionEntry } from '../types'
+import {
+    DlSelectOption as DlSelectOptionEntry,
+    DlSelectOptionType
+} from '../types'
 import DlSelectOption from './components/DlSelectOption.vue'
 import { cloneDeep, isEqual } from 'lodash'
 import { getColor } from '../../../utils'
@@ -1219,7 +1221,9 @@ export default defineComponent({
         justify-content: center !important;
         align-items: center;
         color: var(--dl-color-medium);
-        transition-property: transform, -webkit-transform;
+        transition-property:
+            transform,
+            -webkit-transform;
         transition-duration: 0.28s, 0.28s;
         transition-timing-function: ease, ease;
         transition-delay: 0s, 0s;