@dataloop-ai/components 0.18.88 → 0.18.89

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/compound/DlSlider/DlSlider.vue +0 -6
  3. package/src/components/compound/DlTable/DlTable.vue +106 -83
  4. package/src/components/compound/DlTable/hooks/tablePagination.ts +18 -19
  5. package/src/components/compound/DlTable/utils/emits.ts +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.18.88",
3
+ "version": "0.18.89",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/components/compound/DlSlider/DlSlider.vue CHANGED
@@ -202,12 +202,6 @@ export default defineComponent({
202
202
  : between(modelValue.value, min.value, max.value)
203
203
  },
204
204
  set(val: number) {
205
- console.log(
206
- '@@@ intial, cur',
207
- initialValue.value,
208
- modelValue.value
209
- )
210
- console.log(`@@@ model value update `, val)
211
205
  if (val === modelValue.value) {
212
206
  return
213
207
  }
package/src/components/compound/DlTable/DlTable.vue CHANGED
@@ -150,104 +150,127 @@
150
150
  v-bind="props"
151
151
  >
152
152
  <template v-if="!isEmpty && !hasSlotBody">
153
- <DlTr
154
- :key="getRowKey(props.item)"
155
- :class="
156
- isRowSelected(getRowKey(props.item))
157
- ? 'selected'
158
- : hasAnyAction
159
- ? ' cursor-pointer'
153
+ <slot
154
+ v-bind="
155
+ getBodyScope({
156
+ key: getRowKey(props.item),
157
+ row: props.item,
158
+ pageIndex: props.pageIndex,
159
+ trClass: isRowSelected(
160
+ getRowKey(props.item)
161
+ )
162
+ ? 'selected'
160
163
  : ''
164
+ })
161
165
  "
162
- :no-hover="noHover"
163
- @click="
164
- onTrClick($event, props.item, props.pageIndex)
165
- "
166
- @dblclick="
167
- onTrDblClick(
168
- $event,
169
- props.item,
170
- props.pageIndex
171
- )
172
- "
173
- @contextmenu="
174
- onTrContextMenu(
175
- $event,
176
- props.item,
177
- props.pageIndex
178
- )
179
- "
166
+ :has-any-action="hasAnyAction"
167
+ name="row-body"
180
168
  >
181
- <td
182
- v-if="hasDraggableRows"
183
- class="dl-table__drag-icon"
184
- >
185
- <dl-icon
186
- class="draggable-icon"
187
- icon="icon-dl-drag"
188
- size="12px"
189
- />
190
- </td>
191
- <td
192
- v-if="hasSelectionMode"
193
- class="dl-table--col-auto-with"
169
+ <DlTr
170
+ :key="getRowKey(props.item)"
171
+ :class="
172
+ isRowSelected(getRowKey(props.item))
173
+ ? 'selected'
174
+ : hasAnyAction
175
+ ? ' cursor-pointer'
176
+ : ''
177
+ "
178
+ :no-hover="noHover"
179
+ @click="
180
+ onTrClick(
181
+ $event,
182
+ props.item,
183
+ props.pageIndex
184
+ )
185
+ "
186
+ @dblclick="
187
+ onTrDblClick(
188
+ $event,
189
+ props.item,
190
+ props.pageIndex
191
+ )
192
+ "
193
+ @contextmenu="
194
+ onTrContextMenu(
195
+ $event,
196
+ props.item,
197
+ props.pageIndex
198
+ )
199
+ "
194
200
  >
201
+ <td
202
+ v-if="hasDraggableRows"
203
+ class="dl-table__drag-icon"
204
+ >
205
+ <dl-icon
206
+ class="draggable-icon"
207
+ icon="icon-dl-drag"
208
+ size="12px"
209
+ />
210
+ </td>
211
+ <td
212
+ v-if="hasSelectionMode"
213
+ class="dl-table--col-auto-with"
214
+ >
215
+ <slot
216
+ name="body-selection"
217
+ v-bind="
218
+ getBodySelectionScope({
219
+ key: getRowKey(props.item),
220
+ row: props.item,
221
+ pageIndex: props.pageIndex
222
+ })
223
+ "
224
+ >
225
+ <DlCheckbox
226
+ :color="color"
227
+ :model-value="
228
+ isRowSelected(
229
+ getRowKey(props.item)
230
+ )
231
+ "
232
+ @update:model-value="
233
+ (adding, evt) =>
234
+ updateSelection(
235
+ [getRowKey(props.item)],
236
+ [props.item],
237
+ adding,
238
+ evt
239
+ )
240
+ "
241
+ />
242
+ </slot>
243
+ </td>
195
244
  <slot
196
- name="body-selection"
245
+ v-for="col in computedCols"
197
246
  v-bind="
198
- getBodySelectionScope({
247
+ getBodyCellScope({
199
248
  key: getRowKey(props.item),
200
249
  row: props.item,
201
- pageIndex: props.pageIndex
250
+ pageIndex: props.pageIndex,
251
+ col
202
252
  })
203
253
  "
254
+ :name="
255
+ hasSlotByName(`body-cell-${col.name}`)
256
+ ? `body-cell-${col.name}`
257
+ : 'body-cell'
258
+ "
204
259
  >
205
- <DlCheckbox
206
- :color="color"
207
- :model-value="
208
- isRowSelected(getRowKey(props.item))
209
- "
210
- @update:model-value="
211
- (adding, evt) =>
212
- updateSelection(
213
- [getRowKey(props.item)],
214
- [props.item],
215
- adding,
216
- evt
217
- )
218
- "
219
- />
260
+ <DlTd
261
+ :class="col.tdClass(props.item)"
262
+ :style="col.tdStyle(props.item)"
263
+ :no-hover="noHover"
264
+ >
265
+ {{ getCellValue(col, props.item) }}
266
+ </DlTd>
220
267
  </slot>
221
- </td>
222
- <slot
223
- v-for="col in computedCols"
224
- v-bind="
225
- getBodyCellScope({
226
- key: getRowKey(props.item),
227
- row: props.item,
228
- pageIndex: props.pageIndex,
229
- col
230
- })
231
- "
232
- :name="
233
- hasSlotByName(`body-cell-${col.name}`)
234
- ? `body-cell-${col.name}`
235
- : 'body-cell'
236
- "
237
- >
238
- <DlTd
239
- :class="col.tdClass(props.item)"
240
- :style="col.tdStyle(props.item)"
241
- :no-hover="noHover"
242
- >
243
- {{ getCellValue(col, props.item) }}
244
- </DlTd>
245
- </slot>
246
- </DlTr>
268
+ </DlTr>
269
+ </slot>
247
270
  </template>
248
271
  <DlTr v-if="isEmpty">
249
272
  <DlTd colspan="100%">
250
- <div class="flex justify-center">
273
+ <div class="flex justify-center full-width">
251
274
  <dl-empty-state v-bind="emptyStateProps">
252
275
  <template
253
276
  v-for="(_, slot) in $slots"
package/src/components/compound/DlTable/hooks/tablePagination.ts CHANGED
@@ -6,7 +6,8 @@ import {
6
6
  nextTick,
7
7
  Ref,
8
8
  ComputedRef,
9
- PropType
9
+ PropType,
10
+ toRefs
10
11
  } from 'vue-demi'
11
12
 
12
13
  export type TablePagination = {
@@ -45,9 +46,7 @@ export const useTablePaginationProps = {
45
46
  rowsPerPageOptions: {
46
47
  type: Array,
47
48
  default: () => [5, 7, 10, 15, 20, 25, 50, 100]
48
- },
49
-
50
- 'onUpdate:pagination': [Function, Array]
49
+ }
51
50
  }
52
51
 
53
52
  export function useTablePaginationState(
@@ -56,16 +55,18 @@ export function useTablePaginationState(
56
55
  ) {
57
56
  const { props, emit } = vm
58
57
 
58
+ const { pagination, rowsPerPageOptions, virtualScroll } = toRefs(props)
59
+
59
60
  const innerPagination = ref(
60
61
  Object.assign(
61
62
  {
62
63
  sortBy: null,
63
64
  descending: false,
64
65
  page: 1,
65
- rowsPerPage: props.virtualScroll
66
+ rowsPerPage: virtualScroll.value
66
67
  ? 0
67
- : props.rowsPerPageOptions.length > 0
68
- ? props.rowsPerPageOptions[0]
68
+ : rowsPerPageOptions.value.length > 0
69
+ ? rowsPerPageOptions.value[0]
69
70
  : 5,
70
71
  min: 1,
71
72
  maxPages: 0,
@@ -76,16 +77,16 @@ export function useTablePaginationState(
76
77
  itemsName: 'Rows',
77
78
  withLegend: true,
78
79
  withRowsPerPage: true,
79
- rowsPerPageOptions: props.virtualScroll
80
+ rowsPerPageOptions: virtualScroll.value
80
81
  ? [0]
81
- : props.rowsPerPageOptions
82
+ : rowsPerPageOptions.value
82
83
  },
83
- props.pagination
84
+ pagination.value
84
85
  )
85
86
  )
86
87
 
87
88
  watch(
88
- () => props.pagination,
89
+ pagination,
89
90
  (pag) => {
90
91
  innerPagination.value = Object.assign(innerPagination.value, pag)
91
92
  },
@@ -93,10 +94,10 @@ export function useTablePaginationState(
93
94
  )
94
95
 
95
96
  const computedPagination = computed(() => {
96
- const pag = props['onUpdate:pagination']
97
+ const pag = pagination.value
97
98
  ? {
98
99
  ...innerPagination.value,
99
- ...props.pagination
100
+ ...pagination.value
100
101
  }
101
102
  : innerPagination.value
102
103
 
@@ -123,11 +124,11 @@ export function useTablePaginationState(
123
124
  return
124
125
  }
125
126
 
126
- if (props.pagination && props['onUpdate:pagination']) {
127
- emit('update:pagination', newPagination)
128
- } else {
127
+ if (!props.pagination) {
129
128
  innerPagination.value = newPagination
130
129
  }
130
+
131
+ emit('update:pagination', newPagination)
131
132
  }
132
133
 
133
134
  return {
@@ -221,9 +222,7 @@ export function useTablePagination(
221
222
  }
222
223
  })
223
224
 
224
- if (props['onUpdate:pagination']) {
225
- emit('update:pagination', { ...computedPagination.value })
226
- }
225
+ emit('update:pagination', { ...computedPagination.value })
227
226
 
228
227
  return {
229
228
  firstRowIndex,
package/src/components/compound/DlTable/utils/emits.ts CHANGED
@@ -10,6 +10,7 @@ export const emits = [
10
10
  'th-click',
11
11
  'row-dblclick',
12
12
  'row-contextmenu',
13
+ 'update:pagination',
13
14
  ...useTableRowExpandEmits,
14
15
  ...useTableRowSelectionEmits
15
16
  ]