@dataloop-ai/components 0.18.74 → 0.18.76

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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/components/compound/DlSlider/DlSlider.vue +83 -61
  3. package/src/components/compound/DlSlider/sliderStyles.scss +2 -2
  4. package/src/components/compound/DlTreeTable/DlTreeTable.vue +51 -31
  5. package/src/components/compound/DlTreeTable/views/DlTrTreeView.vue +2 -2
  6. package/src/demos/DlSliderDemo.vue +13 -6
  7. 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.74",
3
+ "version": "0.18.76",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/components/compound/DlSlider/DlSlider.vue CHANGED
@@ -5,23 +5,23 @@
5
5
  :style="sliderStyles"
6
6
  >
7
7
  <div
8
- v-if="editable"
9
- class="slider editable"
10
- data-test="editable-slider"
8
+ v-if="slim"
9
+ class="slider slim"
10
+ data-test="slim-slider"
11
11
  >
12
12
  <span class="text capitalize">{{ text }}</span>
13
13
  <dl-slider-input
14
- v-model="sliderValue"
14
+ v-model="value"
15
15
  :min="min"
16
16
  :max="max"
17
17
  :readonly="readonly"
18
18
  :disabled="disabled"
19
19
  :style="{ marginRight: '10px' }"
20
- data-test="editable-slider-input"
20
+ data-test="slim-slider-input"
21
21
  />
22
22
  <div class="slider-bar-container">
23
23
  <dl-slider-base
24
- v-model.number="sliderValue"
24
+ v-model.number="value"
25
25
  :min="min"
26
26
  :max="max"
27
27
  :step="step"
@@ -37,8 +37,8 @@
37
37
  </div>
38
38
  <div
39
39
  v-else
40
- class="slider non-editable"
41
- data-test="non-editable-slider"
40
+ class="slider non-slim"
41
+ data-test="non-slim-slider"
42
42
  >
43
43
  <div class="header">
44
44
  <div class="row text capitalize">
@@ -60,24 +60,24 @@
60
60
  size="12px"
61
61
  label="Reset"
62
62
  :disabled="disabled || readonly"
63
- data-test="non-editable-slider-button"
63
+ data-test="non-slim-slider-button"
64
64
  @click="handleResetButtonClick"
65
65
  />
66
66
  <dl-slider-input
67
67
  id="slider-input"
68
- v-model="sliderValue"
68
+ v-model="value"
69
69
  :min="min"
70
70
  :max="max"
71
71
  :readonly="readonly"
72
72
  :disabled="disabled"
73
- data-test="non-editable-slider-input"
74
- @change="handleChange"
73
+ data-test="non-slim-slider-input"
74
+ @change="onChange"
75
75
  />
76
76
  </div>
77
77
  </div>
78
78
  <div class="slider-bar-container">
79
79
  <dl-slider-base
80
- v-model.number="sliderValue"
80
+ v-model.number="value"
81
81
  :min="min"
82
82
  :max="max"
83
83
  :step="step"
@@ -87,7 +87,7 @@
87
87
  :disabled="disabled"
88
88
  :snap="snap"
89
89
  :name="name"
90
- @change="handleChange"
90
+ @change="onChange"
91
91
  />
92
92
  </div>
93
93
  </div>
@@ -95,7 +95,7 @@
95
95
  </template>
96
96
 
97
97
  <script lang="ts">
98
- import { defineComponent } from 'vue-demi'
98
+ import { computed, defineComponent, ref, toRefs, watch } from 'vue-demi'
99
99
  import { DlSliderBase, DlSliderInput } from './components/'
100
100
  import { DlButton } from '../../basic'
101
101
  import { DlIcon } from '../../essential'
@@ -133,7 +133,7 @@ export default defineComponent({
133
133
  type: Boolean,
134
134
  default: false
135
135
  },
136
- editable: {
136
+ slim: {
137
137
  type: Boolean,
138
138
  default: false
139
139
  },
@@ -185,60 +185,82 @@ export default defineComponent({
185
185
  }
186
186
  },
187
187
  emits: ['update:model-value', 'change'],
188
- data() {
189
- const val =
190
- this.modelValue === null
191
- ? this.min
192
- : between(this.modelValue, this.min, this.max)
188
+ setup(props, { emit }) {
189
+ const { modelValue, min, max, textColor, width, thumbSize, color } =
190
+ toRefs(props)
191
+ const initialValue = ref(
192
+ modelValue.value === null
193
+ ? min.value
194
+ : between(modelValue.value, min.value, max.value)
195
+ )
196
+ const displaySliderInput = ref(false)
193
197
 
194
- return {
195
- uuid: `dl-slider-${v4()}`,
196
- initialValue: val,
197
- value: val,
198
- displaySliderInput: false
199
- }
200
- },
201
- computed: {
202
- valueUpdate(): string {
203
- return `${this.modelValue}|${this.min}|${this.max}`
204
- },
205
- sliderValue: {
206
- get(): number {
207
- return this.value
198
+ const value = computed({
199
+ get: () => {
200
+ return modelValue.value === null
201
+ ? min.value
202
+ : between(modelValue.value, min.value, max.value)
208
203
  },
209
- set(val: number | string): void {
210
- this.$emit(
211
- 'update:model-value',
212
- typeof val === 'number' ? val : null
204
+ set(val: number) {
205
+ console.log(
206
+ '@@@ intial, cur',
207
+ initialValue.value,
208
+ modelValue.value
213
209
  )
210
+ console.log(`@@@ model value update `, val)
211
+ if (val === modelValue.value) {
212
+ return
213
+ }
214
+ emit('update:model-value', val)
215
+ emit('change', val)
214
216
  }
215
- },
216
- sliderStyles(): Record<string, any> {
217
+ })
218
+
219
+ const sliderStyles = computed<Record<string, any>>(() => {
217
220
  return {
218
- '--text-color': getColor(this.textColor, 'dl-color-darker'),
219
- '--width': this.width,
220
- '--thumb-size': parseInt(this.thumbSize) / 2 + 'px',
221
- '--color': getColor(this.color, 'dl-color-secondary')
221
+ '--text-color': getColor(textColor.value, 'dl-color-darker'),
222
+ '--width': width.value,
223
+ '--thumb-size': parseInt(thumbSize.value) / 2 + 'px',
224
+ '--color': getColor(color.value, 'dl-color-secondary')
222
225
  }
226
+ })
227
+
228
+ const onChange = (val: number) => {
229
+ value.value = between(val, min.value, max.value)
223
230
  }
224
- },
225
- watch: {
226
- valueUpdate() {
227
- this.value =
228
- this.modelValue === null
229
- ? this.min
230
- : between(this.modelValue, this.min, this.max)
231
+
232
+ const handleResetButtonClick = () => {
233
+ onChange(initialValue.value)
231
234
  }
232
- },
233
- methods: {
234
- handleChange(value: number) {
235
- if (this.sliderValue === value) return
236
235
 
237
- this.$emit('change', value)
238
- this.sliderValue = value
239
- },
240
- handleResetButtonClick() {
241
- this.handleChange(this.initialValue)
236
+ watch(
237
+ modelValue,
238
+ () => {
239
+ if (modelValue.value === value.value) {
240
+ return
241
+ }
242
+
243
+ if (modelValue.value === null) {
244
+ value.value = min.value
245
+ } else {
246
+ value.value = between(
247
+ modelValue.value,
248
+ min.value,
249
+ max.value
250
+ )
251
+ }
252
+ },
253
+ { immediate: true }
254
+ )
255
+
256
+ return {
257
+ uuid: `dl-slider-${v4()}`,
258
+ initialValue,
259
+ value,
260
+ sliderStyles,
261
+ displaySliderInput,
262
+ onChange,
263
+ handleResetButtonClick
242
264
  }
243
265
  }
244
266
  })
package/src/components/compound/DlSlider/sliderStyles.scss CHANGED
@@ -85,12 +85,12 @@
85
85
  }
86
86
  }
87
87
 
88
- .editable {
88
+ .slim {
89
89
  align-items: center;
90
90
  flex-direction: row;
91
91
  }
92
92
 
93
- .non-editable {
93
+ .non-slim {
94
94
  flex-direction: column;
95
95
 
96
96
  & .header {
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/DlSliderDemo.vue CHANGED
@@ -7,14 +7,14 @@
7
7
  :step="1"
8
8
  :min="-100"
9
9
  :max="100"
10
- :editable="editable"
10
+ :slim="slim"
11
11
  :readonly="readonly"
12
12
  :disabled="disabled"
13
13
  @change="handleChange"
14
14
  />
15
15
  <div>
16
- <button @click="editable = !editable">
17
- Editable: {{ editable }}
16
+ <button @click="slim = !slim">
17
+ slim: {{ slim }}
18
18
  </button>
19
19
  <button @click="readonly = !readonly">
20
20
  Readonly: {{ readonly }}
@@ -23,6 +23,10 @@
23
23
  Disable: {{ disabled }}
24
24
  </button>
25
25
  </div>
26
+ <div>
27
+ Events: <br>
28
+ {{ events }}
29
+ </div>
26
30
  </div>
27
31
  </template>
28
32
 
@@ -37,20 +41,23 @@ export default defineComponent({
37
41
  },
38
42
  data() {
39
43
  return {
40
- value: 0,
41
- editable: false,
44
+ value: null,
45
+ slim: false,
42
46
  disabled: false,
43
- readonly: false
47
+ readonly: false,
48
+ events: []
44
49
  }
45
50
  },
46
51
  watch: {
47
52
  value(newValue, oldValue) {
48
53
  console.log(`@@@ model value update ${oldValue} to ${newValue}`)
54
+ this.events[0] = `@@@ model value update ${oldValue} to ${newValue}`
49
55
  }
50
56
  },
51
57
  methods: {
52
58
  handleChange(value: number) {
53
59
  console.log(`@@@ handling change ${value}`)
60
+ this.events[1] = `@@@ handling change ${value}`
54
61
  }
55
62
  },
56
63
  template: 'dl-slider-demo'
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>