@dataloop-ai/components 0.19.220 → 0.19.222
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -98,6 +98,11 @@ import { TDoughnutWithOriginalColor } from './types/TDoughnutWithOriginalColor'
|
|
|
98
98
|
import DlEmptyState from '../../../../basic/DlEmptyState/DlEmptyState.vue'
|
|
99
99
|
import { DlEmptyStateProps } from '../../../../basic/DlEmptyState/types'
|
|
100
100
|
|
|
101
|
+
type SetupParams = {
|
|
102
|
+
attrs: { onItemClick?: (index: number) => void }
|
|
103
|
+
listeners?: { itemClick?: (index: number) => void }
|
|
104
|
+
}
|
|
105
|
+
|
|
101
106
|
export default defineComponent({
|
|
102
107
|
name: 'DlDoughnutChart',
|
|
103
108
|
components: {
|
|
@@ -132,7 +137,7 @@ export default defineComponent({
|
|
|
132
137
|
default: () => doughnutChartEmptyStateProps
|
|
133
138
|
}
|
|
134
139
|
},
|
|
135
|
-
setup(props,
|
|
140
|
+
setup(props, params: SetupParams) {
|
|
136
141
|
/** Data */
|
|
137
142
|
const doughnutChartRef = ref(null)
|
|
138
143
|
const dlDoughnutChartWidgetRef = ref(null)
|
|
@@ -280,8 +285,6 @@ export default defineComponent({
|
|
|
280
285
|
)
|
|
281
286
|
defaultOptions.animation = mergedAnimation.value
|
|
282
287
|
|
|
283
|
-
type ItemClickHandler = (index: number) => void
|
|
284
|
-
|
|
285
288
|
const doughnutOptions = computed(() =>
|
|
286
289
|
merge(
|
|
287
290
|
{
|
|
@@ -308,7 +311,10 @@ export default defineComponent({
|
|
|
308
311
|
}
|
|
309
312
|
},
|
|
310
313
|
onClick: (e: Event & { chart: ChartJS }) => {
|
|
311
|
-
|
|
314
|
+
const itemClick =
|
|
315
|
+
params.attrs.onItemClick ??
|
|
316
|
+
params.listeners?.itemClick
|
|
317
|
+
if (itemClick) {
|
|
312
318
|
const intersects =
|
|
313
319
|
e.chart.getElementsAtEventForMode(
|
|
314
320
|
e,
|
|
@@ -317,9 +323,7 @@ export default defineComponent({
|
|
|
317
323
|
false
|
|
318
324
|
)
|
|
319
325
|
if (intersects.length > 0) {
|
|
320
|
-
|
|
321
|
-
intersects[0].index
|
|
322
|
-
)
|
|
326
|
+
itemClick(intersects[0].index)
|
|
323
327
|
}
|
|
324
328
|
}
|
|
325
329
|
}
|
|
@@ -29,13 +29,10 @@
|
|
|
29
29
|
class="dialog-wrapper--draggable-icon"
|
|
30
30
|
color="dl-color-medium"
|
|
31
31
|
icon="icon-dl-drag"
|
|
32
|
-
size="
|
|
32
|
+
:size="`${draggableOptions.draggableIconSize}px`"
|
|
33
33
|
@mousedown="startDragElement"
|
|
34
34
|
/>
|
|
35
|
-
<div
|
|
36
|
-
v-if="hasHeader"
|
|
37
|
-
class="header"
|
|
38
|
-
>
|
|
35
|
+
<div v-if="hasHeader" class="header">
|
|
39
36
|
<slot name="header" />
|
|
40
37
|
</div>
|
|
41
38
|
<div
|
|
@@ -45,29 +42,17 @@
|
|
|
45
42
|
'content--fullheight': fullHeight
|
|
46
43
|
}"
|
|
47
44
|
>
|
|
48
|
-
<slot
|
|
49
|
-
v-if="!isEmpty"
|
|
50
|
-
name="body"
|
|
51
|
-
/>
|
|
45
|
+
<slot v-if="!isEmpty" name="body" />
|
|
52
46
|
<dl-empty-state
|
|
53
47
|
v-if="isEmpty && emptyStateProps"
|
|
54
48
|
v-bind="emptyStateProps"
|
|
55
49
|
>
|
|
56
|
-
<template
|
|
57
|
-
v-
|
|
58
|
-
#[slot]="props"
|
|
59
|
-
>
|
|
60
|
-
<slot
|
|
61
|
-
:name="slot"
|
|
62
|
-
v-bind="props"
|
|
63
|
-
/>
|
|
50
|
+
<template v-for="(_, slot) in $slots" #[slot]="props">
|
|
51
|
+
<slot :name="slot" v-bind="props" />
|
|
64
52
|
</template>
|
|
65
53
|
</dl-empty-state>
|
|
66
54
|
</div>
|
|
67
|
-
<div
|
|
68
|
-
v-if="hasFooter"
|
|
69
|
-
class="footer"
|
|
70
|
-
>
|
|
55
|
+
<div v-if="hasFooter" class="footer">
|
|
71
56
|
<slot name="footer" />
|
|
72
57
|
</div>
|
|
73
58
|
</div>
|
|
@@ -126,6 +111,7 @@ export default defineComponent({
|
|
|
126
111
|
originalX: number
|
|
127
112
|
originalY: number
|
|
128
113
|
draggableCursor: string
|
|
114
|
+
draggableIconSize: number
|
|
129
115
|
}
|
|
130
116
|
visibleDragIcon: boolean
|
|
131
117
|
} {
|
|
@@ -139,7 +125,8 @@ export default defineComponent({
|
|
|
139
125
|
draggableY: 0,
|
|
140
126
|
originalX: 0,
|
|
141
127
|
originalY: 0,
|
|
142
|
-
draggableCursor: 'pointer'
|
|
128
|
+
draggableCursor: 'pointer',
|
|
129
|
+
draggableIconSize: 12
|
|
143
130
|
},
|
|
144
131
|
visibleDragIcon: false
|
|
145
132
|
}
|
|
@@ -154,9 +141,11 @@ export default defineComponent({
|
|
|
154
141
|
? '1px solid var(--dl-color-separator)'
|
|
155
142
|
: 'none',
|
|
156
143
|
'--dl-dialog-box-drag-icon-left': `${
|
|
157
|
-
typeof this.width === 'string'
|
|
144
|
+
(typeof this.width === 'string'
|
|
158
145
|
? parseInt(this.width)
|
|
159
|
-
: this.width /
|
|
146
|
+
: this.width) /
|
|
147
|
+
2 -
|
|
148
|
+
this.draggableOptions.draggableIconSize / 2
|
|
160
149
|
}px`,
|
|
161
150
|
'--dialog-z-index':
|
|
162
151
|
`${this.zIndex}` ?? 'var(--dl-z-index-dialog)'
|