@dataloop-ai/components 0.19.154 → 0.19.155
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
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
:
|
|
4
|
-
style="display: block"
|
|
5
|
-
>
|
|
6
|
-
<div
|
|
7
|
-
:style="cssVars"
|
|
8
|
-
:class="rootContainerClasses"
|
|
9
|
-
>
|
|
2
|
+
<div :id="uuid" style="display: block">
|
|
3
|
+
<div :style="cssVars" :class="rootContainerClasses">
|
|
10
4
|
<div class="row full-width full-height">
|
|
11
5
|
<div
|
|
12
6
|
:class="`${isSmall ? 'col' : 'row full-width'} top`"
|
|
@@ -30,7 +24,8 @@
|
|
|
30
24
|
v-if="required"
|
|
31
25
|
:class="asteriskClasses"
|
|
32
26
|
>
|
|
33
|
-
*</span
|
|
27
|
+
*</span
|
|
28
|
+
>
|
|
34
29
|
{{
|
|
35
30
|
!required && optional ? ' (Optional)' : null
|
|
36
31
|
}}
|
|
@@ -47,10 +42,7 @@
|
|
|
47
42
|
</dl-tooltip>
|
|
48
43
|
</span>
|
|
49
44
|
</div>
|
|
50
|
-
<div
|
|
51
|
-
v-if="!!topMessage.length && !isSmall"
|
|
52
|
-
class="break"
|
|
53
|
-
/>
|
|
45
|
+
<div v-if="!!topMessage.length && !isSmall" class="break" />
|
|
54
46
|
<div
|
|
55
47
|
v-if="!!topMessage.length"
|
|
56
48
|
:class="{
|
|
@@ -84,7 +76,7 @@
|
|
|
84
76
|
</div>
|
|
85
77
|
<div
|
|
86
78
|
ref="input"
|
|
87
|
-
:contenteditable="
|
|
79
|
+
:contenteditable="contenteditable"
|
|
88
80
|
:class="inputClasses"
|
|
89
81
|
:placeholder="placeholder"
|
|
90
82
|
@input="onChange"
|
|
@@ -93,15 +85,11 @@
|
|
|
93
85
|
@keydown="onKeydown"
|
|
94
86
|
@keyup.enter="onEnterPress"
|
|
95
87
|
@paste="handlePaste"
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
'placeholder-string--disabled': disabled
|
|
102
|
-
}"
|
|
103
|
-
>{{ spanText }}</span>
|
|
104
|
-
</div>
|
|
88
|
+
@mouseover="onHover"
|
|
89
|
+
/>
|
|
90
|
+
<dl-tooltip v-if="showTooltip">
|
|
91
|
+
{{ spanText }}
|
|
92
|
+
</dl-tooltip>
|
|
105
93
|
<div
|
|
106
94
|
v-if="
|
|
107
95
|
hasAppend ||
|
|
@@ -113,10 +101,7 @@
|
|
|
113
101
|
'dl-input__adornment-container--pos-right'
|
|
114
102
|
]"
|
|
115
103
|
>
|
|
116
|
-
<slot
|
|
117
|
-
v-if="hasAppend"
|
|
118
|
-
name="append"
|
|
119
|
-
/>
|
|
104
|
+
<slot v-if="hasAppend" name="append" />
|
|
120
105
|
<span
|
|
121
106
|
v-if="showClearButton"
|
|
122
107
|
class="dl-input__adornment-container--clear"
|
|
@@ -181,7 +166,7 @@
|
|
|
181
166
|
v-if="item.image"
|
|
182
167
|
:src="item.image"
|
|
183
168
|
class="dl-input__suggestion--image"
|
|
184
|
-
|
|
169
|
+
/>
|
|
185
170
|
<span
|
|
186
171
|
v-for="(word, index) in getSuggestWords(
|
|
187
172
|
item.suggestion,
|
|
@@ -193,7 +178,9 @@
|
|
|
193
178
|
word.highlighted
|
|
194
179
|
}"
|
|
195
180
|
>
|
|
196
|
-
<span v-if="word.value[0] === ' '"
|
|
181
|
+
<span v-if="word.value[0] === ' '"
|
|
182
|
+
> </span
|
|
183
|
+
>
|
|
197
184
|
{{ word.value }}
|
|
198
185
|
<span
|
|
199
186
|
v-if="
|
|
@@ -201,7 +188,8 @@
|
|
|
201
188
|
word.value.length - 1
|
|
202
189
|
] === ' '
|
|
203
190
|
"
|
|
204
|
-
> </span
|
|
191
|
+
> </span
|
|
192
|
+
>
|
|
205
193
|
</span>
|
|
206
194
|
</dl-list-item>
|
|
207
195
|
</dl-list>
|
|
@@ -260,10 +248,7 @@
|
|
|
260
248
|
</div>
|
|
261
249
|
</div>
|
|
262
250
|
</div>
|
|
263
|
-
<div
|
|
264
|
-
v-if="files.length"
|
|
265
|
-
class="dl-input__files"
|
|
266
|
-
>
|
|
251
|
+
<div v-if="files.length" class="dl-input__files">
|
|
267
252
|
<input-file-element
|
|
268
253
|
v-for="file in files"
|
|
269
254
|
:key="file.id"
|
|
@@ -282,10 +267,7 @@
|
|
|
282
267
|
style="--dl-dialog-box-content-padding: 0"
|
|
283
268
|
>
|
|
284
269
|
<template #body>
|
|
285
|
-
<img
|
|
286
|
-
class="dl-input__zoom-image"
|
|
287
|
-
:src="currentZoomImage"
|
|
288
|
-
>
|
|
270
|
+
<img class="dl-input__zoom-image" :src="currentZoomImage" />
|
|
289
271
|
</template>
|
|
290
272
|
</dl-dialog-box>
|
|
291
273
|
<dl-dialog-box
|
|
@@ -321,10 +303,7 @@
|
|
|
321
303
|
</dl-dialog-box-footer>
|
|
322
304
|
</template>
|
|
323
305
|
</dl-dialog-box>
|
|
324
|
-
<div
|
|
325
|
-
v-if="hasAction"
|
|
326
|
-
class="dl-input__action"
|
|
327
|
-
>
|
|
306
|
+
<div v-if="hasAction" class="dl-input__action">
|
|
328
307
|
<slot name="action" />
|
|
329
308
|
</div>
|
|
330
309
|
</div>
|
|
@@ -892,8 +871,14 @@ export default defineComponent({
|
|
|
892
871
|
(val: string | number) => {
|
|
893
872
|
nextTick(() => {
|
|
894
873
|
if (firstTime.value) {
|
|
874
|
+
if (readonly.value || disabled.value) {
|
|
875
|
+
prevInputValue.value = String(val)
|
|
876
|
+
input.value.innerHTML = placeHolderHTML.value
|
|
877
|
+
} else {
|
|
878
|
+
onModelValueChange(val)
|
|
879
|
+
}
|
|
880
|
+
|
|
895
881
|
firstTime.value = false
|
|
896
|
-
onModelValueChange(val)
|
|
897
882
|
return
|
|
898
883
|
}
|
|
899
884
|
debouncedOnModelValueChange.value(val)
|
|
@@ -902,6 +887,36 @@ export default defineComponent({
|
|
|
902
887
|
{ immediate: true }
|
|
903
888
|
)
|
|
904
889
|
|
|
890
|
+
const placeHolderHTML = computed<string>(() => {
|
|
891
|
+
let classes = ''
|
|
892
|
+
if (showPlaceholder.value) {
|
|
893
|
+
classes += 'placeholder-string'
|
|
894
|
+
}
|
|
895
|
+
if (disabled.value) {
|
|
896
|
+
classes += ' placeholder-string--disabled'
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
return `<span class="${classes}">${spanText.value}</span>`
|
|
900
|
+
})
|
|
901
|
+
|
|
902
|
+
const contenteditable = computed<boolean>(() => {
|
|
903
|
+
return !disabled.value && !readonly.value
|
|
904
|
+
})
|
|
905
|
+
|
|
906
|
+
const prevInputValue = ref('')
|
|
907
|
+
watch([disabled, readonly], (value) => {
|
|
908
|
+
if (!input.value) {
|
|
909
|
+
return
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
if (value[0] || value[1]) {
|
|
913
|
+
prevInputValue.value = input.value.innerHTML
|
|
914
|
+
input.value.innerHTML = placeHolderHTML.value
|
|
915
|
+
} else {
|
|
916
|
+
input.value.innerHTML = prevInputValue.value
|
|
917
|
+
}
|
|
918
|
+
})
|
|
919
|
+
|
|
905
920
|
return {
|
|
906
921
|
suggestItems,
|
|
907
922
|
highlightedIndex,
|
|
@@ -920,7 +935,8 @@ export default defineComponent({
|
|
|
920
935
|
spanText,
|
|
921
936
|
handleValueTrim: debouncedHandleValueTrim,
|
|
922
937
|
onModelValueChange: debouncedOnModelValueChange,
|
|
923
|
-
isInternalChange
|
|
938
|
+
isInternalChange,
|
|
939
|
+
contenteditable
|
|
924
940
|
}
|
|
925
941
|
},
|
|
926
942
|
data() {
|
|
@@ -932,7 +948,8 @@ export default defineComponent({
|
|
|
932
948
|
currentZoomImage: null,
|
|
933
949
|
currentFile: null,
|
|
934
950
|
newFileName: null,
|
|
935
|
-
focused: false
|
|
951
|
+
focused: false,
|
|
952
|
+
showTooltip: false
|
|
936
953
|
}
|
|
937
954
|
},
|
|
938
955
|
computed: {
|
|
@@ -1110,6 +1127,18 @@ export default defineComponent({
|
|
|
1110
1127
|
}
|
|
1111
1128
|
},
|
|
1112
1129
|
methods: {
|
|
1130
|
+
onHover() {
|
|
1131
|
+
const inputRef = this.$refs.input as HTMLInputElement
|
|
1132
|
+
if (!inputRef) {
|
|
1133
|
+
return
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
if (inputRef?.scrollWidth > inputRef?.clientWidth) {
|
|
1137
|
+
this.showTooltip = true
|
|
1138
|
+
} else {
|
|
1139
|
+
this.showTooltip = false
|
|
1140
|
+
}
|
|
1141
|
+
},
|
|
1113
1142
|
onKeydown(e: KeyboardEvent) {
|
|
1114
1143
|
if (e.key !== 'Backspace') {
|
|
1115
1144
|
/**
|
|
@@ -1314,7 +1343,6 @@ export default defineComponent({
|
|
|
1314
1343
|
<style scoped lang="scss">
|
|
1315
1344
|
[contenteditable='true']:empty:before {
|
|
1316
1345
|
content: attr(placeholder);
|
|
1317
|
-
pointer-events: none;
|
|
1318
1346
|
display: inline;
|
|
1319
1347
|
opacity: 0.5;
|
|
1320
1348
|
-webkit-text-security: none;
|
|
@@ -1416,7 +1444,6 @@ export default defineComponent({
|
|
|
1416
1444
|
&--disabled {
|
|
1417
1445
|
border-color: var(--dl-color-separator);
|
|
1418
1446
|
color: var(--dl-color-disabled);
|
|
1419
|
-
pointer-events: none;
|
|
1420
1447
|
cursor: not-allowed;
|
|
1421
1448
|
}
|
|
1422
1449
|
&--s {
|
|
@@ -1521,7 +1548,7 @@ export default defineComponent({
|
|
|
1521
1548
|
.placeholder-string--disabled,
|
|
1522
1549
|
&--disabled {
|
|
1523
1550
|
color: var(--dl-color-disabled);
|
|
1524
|
-
|
|
1551
|
+
cursor: not-allowed;
|
|
1525
1552
|
}
|
|
1526
1553
|
}
|
|
1527
1554
|
|
|
@@ -19,46 +19,32 @@
|
|
|
19
19
|
:disabled="disabledInput"
|
|
20
20
|
/>
|
|
21
21
|
</div>
|
|
22
|
-
<div>
|
|
23
|
-
<input v-model="textVal"
|
|
22
|
+
<div style="max-width: 150px">
|
|
23
|
+
<input v-model="textVal" />
|
|
24
24
|
<div>This is to test v-model reactivity</div>
|
|
25
25
|
<dl-input
|
|
26
26
|
v-model="textVal"
|
|
27
27
|
placeholder="Test reactivity"
|
|
28
|
+
:disabled="disabledInput"
|
|
28
29
|
/>
|
|
29
30
|
<dl-input
|
|
30
31
|
v-model="textVal"
|
|
31
32
|
placeholder="Test reactivity disabled"
|
|
32
33
|
disabled
|
|
33
34
|
/>
|
|
34
|
-
<dl-input
|
|
35
|
-
|
|
36
|
-
disabled
|
|
37
|
-
/>
|
|
38
|
-
<dl-input
|
|
39
|
-
v-model="textVal"
|
|
40
|
-
readonly
|
|
41
|
-
/>
|
|
35
|
+
<dl-input v-model="textVal" disabled />
|
|
36
|
+
<dl-input v-model="textVal" readonly />
|
|
42
37
|
</div>
|
|
43
38
|
|
|
44
39
|
<div>
|
|
45
40
|
<div>With auto trim</div>
|
|
46
41
|
|
|
47
|
-
<dl-input
|
|
48
|
-
v-model="trimmedValue"
|
|
49
|
-
auto-trim
|
|
50
|
-
/>
|
|
42
|
+
<dl-input v-model="trimmedValue" auto-trim />
|
|
51
43
|
</div>
|
|
52
44
|
|
|
53
|
-
<dl-input
|
|
54
|
-
placeholder="placeholder input readonly"
|
|
55
|
-
readonly
|
|
56
|
-
/>
|
|
45
|
+
<dl-input placeholder="placeholder input readonly" readonly />
|
|
57
46
|
|
|
58
|
-
<dl-input
|
|
59
|
-
placeholder="placeholder input disabled"
|
|
60
|
-
disabled
|
|
61
|
-
/>
|
|
47
|
+
<dl-input placeholder="placeholder input disabled" disabled />
|
|
62
48
|
|
|
63
49
|
<dl-input
|
|
64
50
|
style="width: 500px"
|
|
@@ -135,7 +121,7 @@
|
|
|
135
121
|
style="display: none"
|
|
136
122
|
type="file"
|
|
137
123
|
@change="addFile"
|
|
138
|
-
|
|
124
|
+
/>
|
|
139
125
|
</template>
|
|
140
126
|
</dl-input>
|
|
141
127
|
<dl-input
|
|
@@ -172,10 +158,7 @@
|
|
|
172
158
|
optional
|
|
173
159
|
/>
|
|
174
160
|
<p>input in a row with button</p>
|
|
175
|
-
<div
|
|
176
|
-
class="row"
|
|
177
|
-
style="align-items: center"
|
|
178
|
-
>
|
|
161
|
+
<div class="row" style="align-items: center">
|
|
179
162
|
<dl-input
|
|
180
163
|
max-width="220px"
|
|
181
164
|
class="input-parts"
|
|
@@ -184,17 +167,9 @@
|
|
|
184
167
|
dense
|
|
185
168
|
size="s"
|
|
186
169
|
/>
|
|
187
|
-
<dl-button
|
|
188
|
-
dense
|
|
189
|
-
flat
|
|
190
|
-
icon="icon-dl-add"
|
|
191
|
-
size="m"
|
|
192
|
-
/>
|
|
170
|
+
<dl-button dense flat icon="icon-dl-add" size="m" />
|
|
193
171
|
</div>
|
|
194
|
-
<div
|
|
195
|
-
class="row"
|
|
196
|
-
style="align-items: center"
|
|
197
|
-
>
|
|
172
|
+
<div class="row" style="align-items: center">
|
|
198
173
|
<dl-input
|
|
199
174
|
max-width="220px"
|
|
200
175
|
class="input-parts"
|
|
@@ -204,12 +179,7 @@
|
|
|
204
179
|
expandable
|
|
205
180
|
size="s"
|
|
206
181
|
/>
|
|
207
|
-
<dl-button
|
|
208
|
-
dense
|
|
209
|
-
flat
|
|
210
|
-
icon="icon-dl-add"
|
|
211
|
-
size="m"
|
|
212
|
-
/>
|
|
182
|
+
<dl-button dense flat icon="icon-dl-add" size="m" />
|
|
213
183
|
</div>
|
|
214
184
|
<dl-input
|
|
215
185
|
:model-value="'Readonly text'"
|
|
@@ -223,12 +193,7 @@
|
|
|
223
193
|
<div style="align-items: center; width: 250px; overflow: scroll">
|
|
224
194
|
<dl-input class="input-parts">
|
|
225
195
|
<template #action>
|
|
226
|
-
<dl-button
|
|
227
|
-
dense
|
|
228
|
-
flat
|
|
229
|
-
icon="icon-dl-add"
|
|
230
|
-
size="m"
|
|
231
|
-
/>
|
|
196
|
+
<dl-button dense flat icon="icon-dl-add" size="m" />
|
|
232
197
|
</template>
|
|
233
198
|
</dl-input>
|
|
234
199
|
</div>
|
|
@@ -241,12 +206,7 @@
|
|
|
241
206
|
tooltip="test me tooltip"
|
|
242
207
|
>
|
|
243
208
|
<template #action>
|
|
244
|
-
<dl-button
|
|
245
|
-
dense
|
|
246
|
-
flat
|
|
247
|
-
icon="icon-dl-add"
|
|
248
|
-
size="m"
|
|
249
|
-
/>
|
|
209
|
+
<dl-button dense flat icon="icon-dl-add" size="m" />
|
|
250
210
|
</template>
|
|
251
211
|
</dl-input>
|
|
252
212
|
</div>
|
|
@@ -260,12 +220,7 @@
|
|
|
260
220
|
size="small"
|
|
261
221
|
>
|
|
262
222
|
<template #action>
|
|
263
|
-
<dl-button
|
|
264
|
-
dense
|
|
265
|
-
flat
|
|
266
|
-
icon="icon-dl-add"
|
|
267
|
-
size="m"
|
|
268
|
-
/>
|
|
223
|
+
<dl-button dense flat icon="icon-dl-add" size="m" />
|
|
269
224
|
</template>
|
|
270
225
|
</dl-input>
|
|
271
226
|
</div>
|