@dataloop-ai/components 0.19.218 → 0.19.220

package/package.json

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

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

@@ -132,7 +132,7 @@ export default defineComponent({
             default: () => doughnutChartEmptyStateProps
         }
     },
-    setup(props) {
+    setup(props, { attrs }) {
         /** Data */
         const doughnutChartRef = ref(null)
         const dlDoughnutChartWidgetRef = ref(null)
@@ -280,6 +280,8 @@ export default defineComponent({
         )
         defaultOptions.animation = mergedAnimation.value
 
+        type ItemClickHandler = (index: number) => void
+
         const doughnutOptions = computed(() =>
             merge(
                 {
@@ -304,6 +306,22 @@ export default defineComponent({
                                 }
                             }
                         }
+                    },
+                    onClick: (e: Event & { chart: ChartJS }) => {
+                        if (attrs.onItemClick) {
+                            const intersects =
+                                e.chart.getElementsAtEventForMode(
+                                    e,
+                                    'nearest',
+                                    { intersect: true },
+                                    false
+                                )
+                            if (intersects.length > 0) {
+                                ;(attrs.onItemClick as ItemClickHandler)(
+                                    intersects[0].index
+                                )
+                            }
+                        }
                     }
                 },
                 defaultOptions

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

@@ -425,6 +425,13 @@ export default defineComponent({
         selectChildren: {
             type: Boolean,
             default: true
+        },
+        /**
+         * the label to show when items are selected
+         */
+        selectedResourceLabel: {
+            type: String,
+            default: 'Selected Items'
         }
     },
     emits: [
@@ -616,7 +623,7 @@ export default defineComponent({
                 return getLabelOfSelectedOption(valueToSearch, this.options)
             }
             return this.modelValueLength > 0
-                ? `${this.modelValueLength} Selected Items`
+                ? `${this.modelValueLength} ${this.selectedResourceLabel}`
                 : this.computedPlaceholder
         },
         computedAllItemsLabel(): string {

package/src/demos/DlChartDoughnutDemo.vue

@@ -5,6 +5,7 @@
                 <DlDoughnutChart
                     :data="doughnutLessData"
                     :animation="doughnutAnimation"
+                    @itemClick="handleItemClick"
                 >
                     <template #default="{ item, index }">
                         <span style="color: tomato">
@@ -230,7 +231,12 @@ export default defineComponent({
         return {
             doughnutData,
             doughnutLessData,
-            doughnutAnimation
+            doughnutAnimation,
+            handleItemClick: (index: number) => {
+                alert(
+                    `You clicked ${doughnutLessData.datasets[0].data[index]} 🍅`
+                )
+            }
         }
     }
 })