@dataloop-ai/components 0.20.0 → 0.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "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 --project tsconfig.vue.json && vite build",
+    "build": "npm run preserve &&  vue-tsc --noEmit --skipLibCheck && 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.100",
-    "@types/flat": "^5.0.5",
-    "@types/lodash": "^4.17.4",
-    "@types/sortablejs": "^1.15.8",
-    "chart.js": "^4.4.3",
+    "@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",
     "chartjs-plugin-datalabels": "^2.2.0",
-    "flat": "^6.0.1",
-    "highlight.js": "^11.9.0",
+    "flat": "^5.0.2",
+    "highlight.js": "^11.8.0",
     "lodash": "^4.17.21",
-    "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",
+    "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",
     "vue-sortable": "^0.1.3",
-    "vue2-teleport": "^1.1.2"
+    "vue2-teleport": "^1.0.1"
   },
   "devDependencies": {
-    "@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",
+    "@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",
     "eslint-plugin-member-order": "^0.0.3",
-    "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",
+    "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",
     "pre-commit": "^1.2.2",
-    "prettier": "^3.2.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "storybook": "^8.1.1",
+    "prettier": "^2.6.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.4",
     "storybook-addon-themes": "^6.1.0",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.11",
-    "vitest": "^1.6.0",
-    "vitest-canvas-mock": "^0.3.3",
-    "vue": "^3.4.27",
+    "typescript": "^4.5.4",
+    "vite": "^4.5.2",
+    "vitest": "^0.29.2",
+    "vitest-canvas-mock": "^0.2.2",
+    "vue": "^3.3.4",
     "vue-composition-test-utils": "^1.0.3",
-    "vue-loader": "^17.4.2",
-    "vue-tsc": "^2.0.19"
+    "vue-loader": "^16.8.3",
+    "vue-tsc": "^0.35.2"
   },
   "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(): Record<string, any> {
+        containerStyles(): object {
             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: Array as PropType<any[]>,
+            type: [String, Array, Object],
             default: () => [] as any[]
         },
         zIndex: {

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

@@ -1,12 +1,20 @@
 <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>
@@ -21,7 +29,10 @@
                 <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"
@@ -35,7 +46,7 @@
                     v-else
                     :ref="
                         (el) => {
-                            setTextRef(item.index, el)
+                            textRef[item.index] = el
                         }
                     "
                     :data-index="item.index"
@@ -52,10 +63,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>
@@ -209,9 +220,6 @@ 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,7 +6,10 @@
         @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"
@@ -14,13 +17,20 @@
                 :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"
@@ -43,7 +53,7 @@
                     class="card--image__image-holder__image"
                     :onload="onImageLoad"
                     @mousemove="movePreview"
-                />
+                >
                 <div
                     v-if="hasMagnifyingGlass"
                     ref="magnifyingGlass"
@@ -67,11 +77,14 @@
                         :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">
@@ -104,7 +117,10 @@
                             </div>
                         </div>
                     </div>
-                    <div v-else class="card--header">
+                    <div
+                        v-else
+                        class="card--header"
+                    >
                         <span class="card--header_title">{{ title }}</span>
                     </div>
                 </slot>
@@ -152,14 +168,20 @@
                             </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>
@@ -171,7 +193,10 @@
                         </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"
@@ -181,7 +206,10 @@
                         </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"
@@ -211,8 +239,14 @@
             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>
@@ -270,7 +304,7 @@ export default defineComponent({
         },
         links: {
             type: Array as PropType<DlCardLinkType[]>,
-            default: (): DlCardLinkType[] => [] as DlCardLinkType[]
+            default: (): 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 | any) {
+        handleMatrixScroll(e: MouseEvent | UIEvent) {
             const target = e.target as HTMLElement
             ;(this.$refs.yAxisOuter as HTMLElement).scroll(0, target.scrollTop)
         },

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

@@ -1,13 +1,16 @@
 <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 computedLabels"
+                v-for="(label, index) in labels"
                 :key="index"
                 class="dl-chart-labels--label"
             >
                 <dl-tooltip v-if="isOverflowing[index]">
-                    {{ stringVerification(label.title) }}
+                    {{ stringVerification(label.title, label) }}
                 </dl-tooltip>
                 <dl-typography
                     v-if="isVue2"
@@ -16,7 +19,7 @@
                     :data-index="index"
                     :color="labelColor"
                 >
-                    {{ label.title }}
+                    {{ label.title || label }}
                 </dl-typography>
                 <dl-typography
                     v-else
@@ -25,13 +28,16 @@
                     :size="fontSize"
                     :color="labelColor"
                 >
-                    {{ stringVerification(label.title) }}
+                    {{ stringVerification(label.title, label) }}
                 </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 computedLabels"
+                v-for="(label, index) in labels"
                 :key="index"
                 class="dl-chart-labels--label"
             >
@@ -58,8 +64,14 @@
                 </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>
@@ -153,14 +165,6 @@ 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
@@ -191,13 +195,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
         })
     },
@@ -214,12 +218,12 @@ export default defineComponent({
             }
         },
         forwardChildEl(
-            el: { $el: Element } | any,
+            el: { $el: Element },
             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,11 +1,16 @@
 <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)
+                '--dl-chart-badge-color': getColor(
+                    item.backgroundColor.replace('--', '')
+                )
             }"
             @click="hideData($event, item, index)"
             @mouseenter="onMouseEnter(item, index)"
@@ -13,7 +18,9 @@
         >
             <dl-badge
                 :color="
-                    item.hidden ? 'var(--dl-color-disabled)' : getColor(item)
+                    item.hidden
+                        ? 'var(--dl-color-disabled)'
+                        : getColor(item.backgroundColor.replace('--', ''))
                 "
             />
             <dl-typography
@@ -28,7 +35,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
-import type { ChartDataset } from 'chart.js'
+import type { LegendItem, DatasetChartOptions } from 'chart.js'
 import { getColor } from '../../../../utils'
 import { DlBadge, DlTypography } from '../../../essential'
 
@@ -50,8 +57,8 @@ export default defineComponent({
             default: '100%'
         },
         datasets: {
-            type: Array as PropType<ChartDataset[]>,
-            default: () => [] as any as ChartDataset[]
+            type: Array,
+            default: () => [] as unknown as DatasetChartOptions
         },
         alignItems: {
             type: String as PropType<'left' | 'right' | 'center'>,
@@ -68,17 +75,17 @@ export default defineComponent({
         }
     },
     methods: {
-        onMouseEnter(item: ChartDataset, index: number) {
+        onMouseEnter(item: LegendItem, index: number) {
             if (!item.hidden) {
                 this.$emit('on-hover', item, index)
             }
         },
-        onMouseLeave(item: ChartDataset, index: number) {
+        onMouseLeave(item: LegendItem, index: number) {
             if (!item.hidden) {
                 this.$emit('on-leave', item, index)
             }
         },
-        hideData(event: Event, item: ChartDataset, index: number) {
+        hideData(event: Event, item: LegendItem, index: number) {
             this.$emit(
                 'hide',
                 {
@@ -88,11 +95,7 @@ export default defineComponent({
                 index
             )
         },
-        getColor: (item: ChartDataset) => {
-            if ((item.backgroundColor as any)?.replace) {
-                return getColor((item.backgroundColor as any).replace('--', ''))
-            }
-        }
+        getColor
     }
 })
 </script>

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

@@ -40,8 +40,14 @@
                     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"
@@ -61,7 +67,7 @@
                             type="hidden"
                             :name="name"
                             :value="displayValue"
-                        />
+                        >
                     </div>
                 </div>
             </div>

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

@@ -231,7 +231,7 @@ export default defineComponent({
         getOptionLabel(option: any) {
             return getLabel(option) ?? this.getOptionValue(option)
         },
-        getOptionHtml(option: DlSelectOptionType | DlSelectedValueType) {
+        getOptionHtml(option: DlSelectOptionType) {
             const label = `${this.getOptionLabel(option)}`
             let highlightedHtml = label
 

package/src/components/compound/DlSelect/types.ts

@@ -1,5 +1,4 @@
-type Dictionary = { [key: string]: any }
-export interface DlSelectOption extends Dictionary {
+export interface DlSelectOption {
     label: string
     value: any
     key?: string

package/src/components/compound/DlSlider/useSlider.ts

@@ -53,10 +53,7 @@ export const dragType = {
 }
 
 export const useSliderProps = {
-    name: {
-        type: String,
-        default: null as string
-    },
+    ...useFormProps,
     text: {
         type: String,
         default: ''