@dataloop-ai/components 0.18.73 → 0.18.75

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/compound/DlDropdownButton/DlDropdownButton.vue +9 -3
  3. package/src/components/compound/DlTreeTable/DlTreeTable.vue +51 -31
  4. package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue +2 -2
  5. package/src/demos/DlDropdownButtonDemo.vue +23 -0
  6. package/src/demos/DlTreeTableDemo.vue +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.18.73",
3
+ "version": "0.18.75",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/components/compound/DlDropdownButton/DlDropdownButton.vue CHANGED
@@ -61,7 +61,7 @@
61
61
  ? 'var(--dl-color-disabled)'
62
62
  : outlined && !textColor
63
63
  ? 'var(--dl-color-secondary)'
64
- : textColor || 'var(--dl-color-white)'
64
+ : computedTextColor || 'var(--dl-color-white)'
65
65
  }`"
66
66
  />
67
67
  <dl-icon
@@ -174,10 +174,12 @@ import {
174
174
  onMounted,
175
175
  getCurrentInstance,
176
176
  Ref,
177
- PropType
177
+ PropType,
178
+ toRefs
178
179
  } from 'vue-demi'
179
180
  import { v4 } from 'uuid'
180
181
  import { DlTextTransformOptions } from '../../shared/types'
182
+ import { getColor } from '../../../utils'
181
183
 
182
184
  export default defineComponent({
183
185
  name: 'DlDropdownButton',
@@ -258,6 +260,7 @@ export default defineComponent({
258
260
  setup(props, { emit }) {
259
261
  const vm = getCurrentInstance()
260
262
  const proxy = vm!.proxy!
263
+ const { textColor } = toRefs(props)
261
264
 
262
265
  const showing = ref<boolean>(!!props.modelValue) as Ref<boolean>
263
266
  const menuRef = ref(null)
@@ -416,6 +419,8 @@ export default defineComponent({
416
419
  return 'dl-color-white'
417
420
  })
418
421
 
422
+ const computedTextColor = computed(() => getColor(textColor.value))
423
+
419
424
  return {
420
425
  uuid: `dl-dropdown-button-${v4()}`,
421
426
  identifierClass,
@@ -438,7 +443,8 @@ export default defineComponent({
438
443
  setHighlightedIndex,
439
444
  handleSelectedItem,
440
445
  cssVars,
441
- getIconColor
446
+ getIconColor,
447
+ computedTextColor
442
448
  }
443
449
  }
444
450
  })
package/src/components/compound/DlTreeTable/DlTreeTable.vue CHANGED
@@ -35,60 +35,76 @@
35
35
  @update:model-value="onMultipleSelectionSet"
36
36
  />
37
37
  </template>
38
- <template #table-body="props">
38
+ <template #table-body="tableBodyProps">
39
39
  <template v-if="virtualScroll && !isEmpty">
40
40
  <DlTrTreeView
41
- :row="props.item"
41
+ :row="tableBodyProps.item"
42
42
  :is-row-selected="
43
- isRowSelected(rowKey, getRowKey(props.item))
43
+ isRowSelected(rowKey, getRowKey(tableBodyProps.item))
44
44
  ? 'selected'
45
45
  : ''
46
46
  "
47
47
  :has-any-action="dlTableRef.hasAnyAction"
48
48
  :no-hover="dlTableRef.noHover"
49
- :page-index="props.index"
49
+ :page-index="tableBodyProps.index"
50
50
  :has-draggable-rows="dlTableRef.hasDraggableRows"
51
51
  :has-selection-mode="dlTableRef.hasSelectionMode"
52
52
  :bind-body-selection="
53
53
  dlTableRef.getBodySelectionScope({
54
- key: getRowKey(props.item),
55
- row: props.item,
56
- rowIndex: props.index
54
+ key: getRowKey(tableBodyProps.item),
55
+ row: tableBodyProps.item,
56
+ pageIndex: tableBodyProps.index
57
57
  })
58
58
  "
59
59
  :bind-body-cell-scope="
60
- dlTableRef.getBodyCellScope({
61
- key: getRowKey(props.item),
62
- row: props.item,
63
- rowIndex: props.index
64
- })
60
+ (col) =>
61
+ dlTableRef.getBodyCellScope({
62
+ key: getRowKey(tableBodyProps.item),
63
+ row: tableBodyProps.item,
64
+ pageIndex: tableBodyProps.index,
65
+ col
66
+ })
65
67
  "
66
68
  :color="color"
67
69
  :computed-cols="dlTableRef.computedCols"
68
70
  :slot-name="dlTableRef.slotNames"
69
71
  :computed-rows="computedRows"
70
- :model-value="isRowSelected(rowKey, getRowKey(props.item))"
72
+ :model-value="
73
+ isRowSelected(rowKey, getRowKey(tableBodyProps.item))
74
+ "
71
75
  @update:model-value="
72
76
  (adding, evt) =>
73
- updateSelectionHierarchy(adding, evt, props.item)
77
+ updateSelectionHierarchy(
78
+ adding,
79
+ evt,
80
+ tableBodyProps.item
81
+ )
74
82
  "
75
83
  @rowClick="
76
- dlTableRef.onTrClick($event, props.item, props.index)
84
+ dlTableRef.onTrClick(
85
+ $event,
86
+ tableBodyProps.item,
87
+ tableBodyProps.index
88
+ )
77
89
  "
78
90
  @rowDoubleClick="
79
- dlTableRef.onTrDblClick($event, props.item, props.index)
91
+ dlTableRef.onTrDblClick(
92
+ $event,
93
+ tableBodyProps.item,
94
+ tableBodyProps.index
95
+ )
80
96
  "
81
97
  @rowContextMenu="
82
98
  dlTableRef.onTrContextMenu(
83
99
  $event,
84
- props.item,
85
- props.index
100
+ tableBodyProps.item,
101
+ tableBodyProps.index
86
102
  )
87
103
  "
88
104
  @updateExpandedRow="
89
105
  updateExpandedRow(
90
- !props.item.expanded,
91
- getRowKey(props.item)
106
+ !tableBodyProps.item.expanded,
107
+ getRowKey(tableBodyProps.item)
92
108
  )
93
109
  "
94
110
  >
@@ -100,9 +116,10 @@
100
116
  :name="getSlotByName(templateCol.name)"
101
117
  v-bind="
102
118
  dlTableRef.getBodyCellScope({
103
- key: getRowKey(props.item),
104
- row: props.item,
105
- rowIndex: props.index
119
+ key: getRowKey(tableBodyProps.item),
120
+ row: tableBodyProps.item,
121
+ pageIndex: tableBodyProps.index,
122
+ col: templateCol
106
123
  })
107
124
  "
108
125
  />
@@ -115,6 +132,7 @@
115
132
  v-for="(row, rowIndex) in computedRows"
116
133
  :key="rowIndex"
117
134
  :row="row"
135
+ :row-index="rowIndex"
118
136
  :row-key="rowKey"
119
137
  :is-row-selected="
120
138
  isRowSelected(rowKey, getRowKey(row))
@@ -123,22 +141,23 @@
123
141
  "
124
142
  :has-any-action="dlTableRef.hasAnyAction"
125
143
  :no-hover="dlTableRef.noHover"
126
- :row-index="rowIndex"
127
144
  :has-draggable-rows="dlTableRef.hasDraggableRows"
128
145
  :has-selection-mode="dlTableRef.hasSelectionMode"
129
146
  :bind-body-selection="
130
147
  dlTableRef.getBodySelectionScope({
131
148
  key: getRowKey(row),
132
149
  row,
133
- rowIndex
150
+ pageIndex: rowIndex
134
151
  })
135
152
  "
136
153
  :bind-body-cell-scope="
137
- dlTableRef.getBodyCellScope({
138
- key: getRowKey(row),
139
- row,
140
- rowIndex
141
- })
154
+ (col) =>
155
+ dlTableRef.getBodyCellScope({
156
+ key: getRowKey(row),
157
+ row,
158
+ pageIndex: rowIndex,
159
+ col
160
+ })
142
161
  "
143
162
  :color="color"
144
163
  :computed-cols="dlTableRef.computedCols"
@@ -170,7 +189,8 @@
170
189
  dlTableRef.getBodySelectionScope({
171
190
  key: getRowKey(row),
172
191
  row,
173
- rowIndex
192
+ col: templateCol,
193
+ pageIndex: rowIndex
174
194
  })
175
195
  "
176
196
  />
package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue CHANGED
@@ -54,7 +54,7 @@
54
54
  </template>
55
55
  <span v-else>
56
56
  <slot
57
- v-bind="bindBodyCellScope"
57
+ v-bind="bindBodyCellScope(col)"
58
58
  :name="getSlotByName(col.name)"
59
59
  />
60
60
  </span>
@@ -109,7 +109,7 @@ export default defineComponent({
109
109
  },
110
110
  rowIndex: {
111
111
  type: Number,
112
- default: null
112
+ required: true
113
113
  },
114
114
  hasDraggableRows: {
115
115
  type: Boolean,
package/src/demos/DlDropdownButtonDemo.vue CHANGED
@@ -333,6 +333,29 @@
333
333
  </dl-dropdown-button>
334
334
  </div>
335
335
  </div>
336
+
337
+ <div style="margin-top: 20px; display: flex; flex-direction: column">
338
+ Button with text color with split
339
+ <dl-dropdown-button
340
+ auto-close
341
+ split
342
+ outlined
343
+ text-color="red"
344
+ :label="outlinedLabel"
345
+ @handleSelectedItem="handleOutlinedSelect"
346
+ >
347
+ <dl-list>
348
+ <dl-list-item
349
+ v-for="val in ['Photos', 'Videos', 'Articles']"
350
+ :key="val"
351
+ clickable
352
+ @click="handleOutlinedSelect(val)"
353
+ >
354
+ <dl-item-section> {{ val }} </dl-item-section>
355
+ </dl-list-item>
356
+ </dl-list>
357
+ </dl-dropdown-button>
358
+ </div>
336
359
  </div>
337
360
  </template>
338
361
 
package/src/demos/DlTreeTableDemo.vue CHANGED
@@ -127,6 +127,7 @@
127
127
  @selectedItems="selectedItems"
128
128
  >
129
129
  <template #body-cell-calories="prop">
130
+ {{ log(prop) }}
130
131
  <span style="color: green; margin-right: 10px">
131
132
  calories: {{ prop.row.calories }}
132
133
  </span>