@dataloop-ai/components 0.17.66 → 0.17.68

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.
Files changed (9) hide show
  1. package/package.json +1 -1
  2. package/src/components/basic/DlEllipsis/DlEllipsis.vue +61 -36
  3. package/src/components/compound/DlCharts/charts/DlDoughnutChart/DlDoughnutChart.vue +17 -0
  4. package/src/components/compound/DlCharts/charts/DlDoughnutChart/components/DlDoughnutChartLegend.vue +8 -17
  5. package/src/components/compound/DlTable/DlTable.vue +5 -7
  6. package/src/components/compound/DlTable/hooks/tablePagination.ts +8 -5
  7. package/src/components/shared/DlVirtualScroll/DlVirtualScroll.vue +35 -4
  8. package/src/demos/DlTableDemo.vue +0 -3
  9. package/src/demos/DlVirtualScrollDemo.vue +3 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.17.66",
3
+ "version": "0.17.68",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/components/basic/DlEllipsis/DlEllipsis.vue CHANGED
@@ -1,10 +1,14 @@
1
1
  <template>
2
- <div
3
- ref="dlEllipsisRef"
4
- class="dl-ellipsis"
5
- >
6
- <span class="dl-ellipsis__left">
7
- {{ leftText }}
2
+ <div class="dl-ellipsis">
3
+ <span
4
+ ref="dlEllipsisRef"
5
+ class="dl-ellipsis__left"
6
+ >
7
+ <slot
8
+ v-if="hasDefaultSlot"
9
+ name="default"
10
+ />
11
+ <span v-else>{{ leftText }}</span>
8
12
  </span>
9
13
  <span
10
14
  v-if="rightText"
@@ -12,8 +16,18 @@
12
16
  >
13
17
  {{ rightText }}
14
18
  </span>
15
- <dl-tooltip v-if="hasEllipsis && tooltip">
16
- {{ fullText }}
19
+ <dl-tooltip
20
+ v-if="shouldShowTooltip"
21
+ :max-width="'max-content'"
22
+ :self="tooltipPosition"
23
+ :anchor="tooltipPosition"
24
+ :offset="tooltipOffset"
25
+ >
26
+ <slot
27
+ v-if="hasDefaultSlot"
28
+ name="default"
29
+ />
30
+ <span v-else>{{ fullText }}</span>
17
31
  </dl-tooltip>
18
32
  </div>
19
33
  </template>
@@ -34,63 +48,74 @@ export default defineComponent({
34
48
  */
35
49
  text: {
36
50
  type: String,
37
- required: true
51
+ default: ''
38
52
  },
39
53
  /**
40
54
  * Allows to split the text in two parts
41
55
  */
42
56
  split: {
43
57
  type: Boolean,
44
- default: false,
45
- required: false
58
+ default: false
46
59
  },
47
60
  /**
48
61
  * Position of the split in the text, % of the text length
49
62
  */
50
63
  splitPosition: {
51
64
  type: Number,
52
- required: false,
53
65
  default: 0.5,
54
- validator: (value: number) => value >= 0 && value <= 1
66
+ validator: (value) => value >= 0 && value <= 1
55
67
  },
56
68
  /**
57
69
  * Tooltip to be displayed when the text is truncated
58
70
  */
59
71
  tooltip: {
60
72
  type: Boolean,
61
- default: true,
62
- required: false
73
+ default: true
74
+ },
75
+ tooltipPosition: {
76
+ type: String,
77
+ default: 'top middle'
78
+ },
79
+ tooltipOffset: {
80
+ type: Array,
81
+ default: () => [0, 25]
63
82
  }
64
83
  },
65
- setup(props) {
66
- const { text, split } = props
84
+ setup(props, ctx) {
85
+ const dlEllipsisRef = ref(null)
86
+ const { hasEllipsis } = useSizeObserver(dlEllipsisRef)
67
87
 
68
- const splitPositionsRef = computed(() => {
69
- return Math.min(
70
- Math.max(props.splitPosition, 1),
71
- props.splitPosition
72
- )
88
+ const hasDefaultSlot = computed(() => !!ctx.slots.default)
89
+ const splitIndex = computed(() => {
90
+ if (!props.text.length) return null
91
+ return props.split
92
+ ? Math.round(props.text.length * props.splitPosition)
93
+ : props.text.length
73
94
  })
74
-
75
- const dlEllipsisRef = ref(null)
76
- const splitIndex = computed(() =>
77
- split
78
- ? Math.round(text.length * splitPositionsRef.value)
79
- : text.length
95
+ const leftText = computed(() => {
96
+ if (splitIndex.value !== null) {
97
+ return props.text.slice(0, splitIndex.value)
98
+ }
99
+ return ''
100
+ })
101
+ const rightText = computed(() => {
102
+ if (splitIndex.value !== null) {
103
+ return props.text.slice(splitIndex.value)
104
+ }
105
+ return ''
106
+ })
107
+ const shouldShowTooltip = computed(
108
+ () => hasEllipsis.value && props.tooltip
80
109
  )
81
-
82
- const leftText = computed(() => text.slice(0, splitIndex.value))
83
- const rightText = computed(() => text.slice(splitIndex.value))
84
-
85
- const { hasEllipsis } = useSizeObserver(dlEllipsisRef)
86
- const fullText = computed(() => text)
110
+ const fullText = computed(() => props.text)
87
111
 
88
112
  return {
113
+ hasDefaultSlot,
89
114
  leftText,
90
115
  rightText,
116
+ shouldShowTooltip,
91
117
  fullText,
92
- dlEllipsisRef,
93
- hasEllipsis
118
+ dlEllipsisRef
94
119
  }
95
120
  }
96
121
  })
package/src/components/compound/DlCharts/charts/DlDoughnutChart/DlDoughnutChart.vue CHANGED
@@ -269,6 +269,23 @@ export default defineComponent({
269
269
  plugins: {
270
270
  legend: {
271
271
  display: false
272
+ },
273
+ tooltip: {
274
+ yAlign: 'none',
275
+ callbacks: {
276
+ labelColor (
277
+ tooltipItem: { dataIndex: string | number },
278
+ chart: any
279
+ ) {
280
+ return {
281
+ backgroundColor:
282
+ chartRefValue.value.data.datasets[0]
283
+ .hoverBackgroundColor[
284
+ tooltipItem.dataIndex
285
+ ]
286
+ }
287
+ }
288
+ }
272
289
  }
273
290
  }
274
291
  },
package/src/components/compound/DlCharts/charts/DlDoughnutChart/components/DlDoughnutChartLegend.vue CHANGED
@@ -15,12 +15,6 @@
15
15
  @mouseenter="emitMouseOverLegend(index)"
16
16
  @mouseleave="emitMouseLeaveLegend(index)"
17
17
  >
18
- <dl-tooltip
19
- self="top middle"
20
- anchor="top middle"
21
- >
22
- {{ data.labels[index] }}
23
- </dl-tooltip>
24
18
  <div class="wrapper__legend__item__label">
25
19
  <div>
26
20
  <div
@@ -28,14 +22,12 @@
28
22
  :style="{ backgroundColor: getColor(index, badge) }"
29
23
  />
30
24
  </div>
31
- <dl-typography>
32
- <div
33
- :class="legendLabelClass"
34
- :style="{ color: getColor(index, text) }"
35
- >
36
- {{ data.labels[index] }}
37
- </div>
38
- </dl-typography>
25
+ <div
26
+ :class="legendLabelClass"
27
+ :style="{ color: getColor(index, text) }"
28
+ >
29
+ <dl-ellipsis :text="data.labels[index]" />
30
+ </div>
39
31
  </div>
40
32
  <div
41
33
  class="wrapper__legend__item__counter truncate"
@@ -50,7 +42,7 @@
50
42
 
51
43
  <script lang="ts">
52
44
  import { defineComponent, PropType } from 'vue-demi'
53
- import { DlTypography, DlTooltip } from '../../../../../essential'
45
+ import DlEllipsis from '../../../../../basic/DlEllipsis/DlEllipsis.vue'
54
46
  import { TDoughnutChartData } from '../types/TDoughnutChartData'
55
47
 
56
48
  enum EBadgeText {
@@ -62,8 +54,7 @@ type TBadgeText = EBadgeText.badge | EBadgeText.text
62
54
  export default defineComponent({
63
55
  name: 'DlDoughnutChartLegend',
64
56
  components: {
65
- DlTypography,
66
- DlTooltip
57
+ DlEllipsis
67
58
  },
68
59
  props: {
69
60
  data: {
package/src/components/compound/DlTable/DlTable.vue CHANGED
@@ -152,10 +152,12 @@
152
152
  : ''
153
153
  "
154
154
  :no-hover="noHover"
155
- @click="onTrClick($event, props.item, pageIndex)"
156
- @dblclick="onTrDblClick($event, props.item, pageIndex)"
155
+ @click="onTrClick($event, props.item, props.pageIndex)"
156
+ @dblclick="
157
+ onTrDblClick($event, props.item, props.pageIndex)
158
+ "
157
159
  @contextmenu="
158
- onTrContextMenu($event, props.item, pageIndex)
160
+ onTrContextMenu($event, props.item, props.pageIndex)
159
161
  "
160
162
  >
161
163
  <td
@@ -1069,10 +1071,6 @@ export default defineComponent({
1069
1071
  acc[p] = (props as Record<string, any>)[p]
1070
1072
  })
1071
1073
 
1072
- if (!acc.virtualScrollItemSize) {
1073
- acc.virtualScrollItemSize = props.dense === true ? 30 : 40
1074
- }
1075
-
1076
1074
  return acc
1077
1075
  })
1078
1076
 
package/src/components/compound/DlTable/hooks/tablePagination.ts CHANGED
@@ -61,10 +61,11 @@ export function useTablePaginationState(
61
61
  sortBy: null,
62
62
  descending: false,
63
63
  page: 1,
64
- rowsPerPage:
65
- props.rowsPerPageOptions.length > 0
66
- ? props.rowsPerPageOptions[0]
67
- : 5,
64
+ rowsPerPage: props.virtualScroll
65
+ ? 0
66
+ : props.rowsPerPageOptions.length > 0
67
+ ? props.rowsPerPageOptions[0]
68
+ : 5,
68
69
  min: 1,
69
70
  maxPages: 0,
70
71
  boundaryNumbers: true,
@@ -74,7 +75,9 @@ export function useTablePaginationState(
74
75
  itemsName: 'Rows',
75
76
  withLegend: true,
76
77
  withRowsPerPage: true,
77
- rowsPerPageOptions: props.rowsPerPageOptions
78
+ rowsPerPageOptions: props.virtualScroll
79
+ ? [0]
80
+ : props.rowsPerPageOptions
78
81
  },
79
82
  props.pagination
80
83
  )
package/src/components/shared/DlVirtualScroll/DlVirtualScroll.vue CHANGED
@@ -11,7 +11,8 @@ import {
11
11
  ref,
12
12
  watch,
13
13
  isVue2,
14
- h
14
+ h,
15
+ onUnmounted
15
16
  } from 'vue-demi'
16
17
  import getTableMiddle from '../../compound/DlTable/utils/getTableMiddle'
17
18
  import { listenOpts, mergeSlot } from '../../../utils'
@@ -54,7 +55,7 @@ export default defineComponent({
54
55
  },
55
56
 
56
57
  virtualScrollItemSize: {
57
- type: [Number, String],
58
+ type: Number,
58
59
  required: false,
59
60
  default: 0
60
61
  },
@@ -70,7 +71,7 @@ export default defineComponent({
70
71
  required: false,
71
72
  default: 0
72
73
  },
73
- tableColspan: { type: [Number, String], required: false, default: 1 },
74
+ tableColspan: { type: [Number, String], required: false, default: 100 },
74
75
  virtualScrollHorizontal: {
75
76
  type: Boolean,
76
77
  required: false,
@@ -101,6 +102,7 @@ export default defineComponent({
101
102
  setup(props, { slots, attrs }) {
102
103
  let localScrollTarget: HTMLElement | undefined
103
104
  const rootRef: Ref<HTMLElement | null> = ref(null)
105
+ const scrollSizeItem: Ref<number> = ref(40)
104
106
 
105
107
  const isDefined = (v: any) => v !== undefined && v !== null
106
108
 
@@ -112,6 +114,34 @@ export default defineComponent({
112
114
  : 0
113
115
  })
114
116
 
117
+ onMounted(() => {
118
+ window.addEventListener('load', setItemSize)
119
+ })
120
+
121
+ onUnmounted(() => window.removeEventListener('load', () => {}))
122
+
123
+ const setItemSize = () => {
124
+ scrollSizeItem.value = props.virtualScrollItemSize
125
+ ? props.virtualScrollItemSize
126
+ : typeof rootRef.value?.getElementsByClassName === 'function'
127
+ ? rootRef.value?.getElementsByClassName(
128
+ 'dl-virtual-scroll__content'
129
+ )[0].children[0].clientHeight
130
+ : 40
131
+ }
132
+
133
+ watch(
134
+ props,
135
+ () => {
136
+ setItemSize()
137
+ },
138
+ { deep: true }
139
+ )
140
+
141
+ const virtualScrollItemSizeComputed = computed(() => {
142
+ return scrollSizeItem.value
143
+ })
144
+
115
145
  const {
116
146
  virtualScrollSliceRange,
117
147
  localResetVirtualScroll,
@@ -120,7 +150,8 @@ export default defineComponent({
120
150
  } = useVirtualScroll({
121
151
  virtualScrollLength,
122
152
  getVirtualScrollTarget,
123
- getVirtualScrollEl
153
+ getVirtualScrollEl,
154
+ virtualScrollItemSizeComputed
124
155
  })
125
156
 
126
157
  const virtualScrollScope = computed(() => {
package/src/demos/DlTableDemo.vue CHANGED
@@ -222,7 +222,6 @@
222
222
  :selected="selected"
223
223
  :separator="separator"
224
224
  :draggable="draggable"
225
- class="sticky-header"
226
225
  :filter="filter"
227
226
  :selection="selection"
228
227
  :dense="dense"
@@ -233,9 +232,7 @@
233
232
  :columns="tableColumns"
234
233
  style="height: 500px"
235
234
  row-key="index"
236
- :pagination="{ rowsPerPage: 0 }"
237
235
  virtual-scroll
238
- :rows-per-page-options="[0]"
239
236
  @virtual-scroll="onScroll"
240
237
  />
241
238
  </div>
package/src/demos/DlVirtualScrollDemo.vue CHANGED
@@ -4,9 +4,6 @@
4
4
  <dl-virtual-scroll
5
5
  v-slot="{ item: row, index }"
6
6
  type="table"
7
- :virtual-scroll-item-size="48"
8
- :virtual-scroll-sticky-size-start="48"
9
- :virtual-scroll-sticky-size-end="32"
10
7
  :items="heavyList"
11
8
  style="height: 500px"
12
9
  @virtual-scroll="log"
@@ -27,9 +24,6 @@
27
24
  <dl-virtual-scroll
28
25
  v-slot="{ item, index }"
29
26
  style="max-width: 500px"
30
- :virtual-scroll-item-size="48"
31
- :virtual-scroll-sticky-size-start="48"
32
- :virtual-scroll-sticky-size-end="32"
33
27
  :items="horizontalList"
34
28
  virtual-scroll-horizontal
35
29
  >
@@ -47,9 +41,6 @@
47
41
  v-slot="{ item, index }"
48
42
  style="height: 300px"
49
43
  :items="basicList"
50
- :virtual-scroll-item-size="28"
51
- :virtual-scroll-sticky-size-start="28"
52
- :virtual-scroll-sticky-size-end="20"
53
44
  separator
54
45
  @virtual-scroll="log"
55
46
  >
@@ -69,9 +60,9 @@
69
60
  <dl-virtual-scroll
70
61
  style="height: 300px; gap: 20px"
71
62
  :items="customList"
72
- :virtual-scroll-item-size="293"
73
- :virtual-scroll-sticky-size-start="293"
74
- :virtual-scroll-sticky-size-end="200"
63
+ :virtual-scroll-item-size="295"
64
+ :virtual-scroll-sticky-size-start="20"
65
+ :virtual-scroll-sticky-size-end="20"
75
66
  separator
76
67
  @virtual-scroll="log"
77
68
  >