@dataloop-ai/components 0.20.256 → 0.20.258-udmf.0
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 +1 -1
- package/src/components/compound/DlDialogBox/components/DlDialogBoxHeader.vue +10 -5
- package/src/components/compound/DlInput/DlInput.vue +65 -11
- package/src/components/compound/DlInput/DlTextInput.vue +6 -6
- package/src/components/compound/DlSelect/DlSelect.vue +6 -10
- package/src/components/compound/DlStepper/components/DlStepperHeader.vue +1 -1
package/package.json
CHANGED
|
@@ -77,15 +77,20 @@ export default defineComponent({
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
.title {
|
|
80
|
-
font-
|
|
80
|
+
font-family: var(--dl-typography-header-h5-font-family);
|
|
81
|
+
font-size: var(--dl-typography-header-h5-font-size);
|
|
82
|
+
line-height: var(--dl-typography-header-h5-line-height);
|
|
83
|
+
font-weight: var(--dl-typography-header-h5-font-weight);
|
|
81
84
|
margin: 0;
|
|
82
|
-
color: var(--
|
|
83
|
-
line-height: 2rem !important;
|
|
85
|
+
color: var(--dell-gray-800);
|
|
84
86
|
}
|
|
85
87
|
|
|
86
88
|
.subtitle {
|
|
87
|
-
font-
|
|
88
|
-
|
|
89
|
+
font-family: var(--dl-typography-body-body3-font-family);
|
|
90
|
+
font-size: var(--dl-typography-body-body3-font-size);
|
|
91
|
+
line-height: var(--dl-typography-body-body3-line-height);
|
|
92
|
+
font-weight: var(--dl-typography-body-body3-font-weight);
|
|
93
|
+
color: var(--dell-gray-600);
|
|
89
94
|
margin: 0;
|
|
90
95
|
}
|
|
91
96
|
|
|
@@ -74,7 +74,26 @@
|
|
|
74
74
|
>
|
|
75
75
|
<slot name="prepend" />
|
|
76
76
|
</div>
|
|
77
|
+
<input
|
|
78
|
+
v-if="isPasswordType"
|
|
79
|
+
ref="input"
|
|
80
|
+
:value="modelValue"
|
|
81
|
+
:type="showPass ? 'text' : 'password'"
|
|
82
|
+
:class="inputClasses"
|
|
83
|
+
:placeholder="placeholder"
|
|
84
|
+
:style="stylesInput"
|
|
85
|
+
:disabled="disabled"
|
|
86
|
+
:readonly="readonly"
|
|
87
|
+
:maxlength="maxLength"
|
|
88
|
+
@input="onNativeInput"
|
|
89
|
+
@focus="onNativeFocus"
|
|
90
|
+
@blur="onNativeBlur"
|
|
91
|
+
@keydown="onKeydown"
|
|
92
|
+
@keyup.enter="onNativeEnterPress"
|
|
93
|
+
@mouseover="onHover"
|
|
94
|
+
/>
|
|
77
95
|
<div
|
|
96
|
+
v-else
|
|
78
97
|
ref="input"
|
|
79
98
|
:contenteditable="contenteditable"
|
|
80
99
|
:class="inputClasses"
|
|
@@ -857,6 +876,11 @@ export default defineComponent({
|
|
|
857
876
|
})
|
|
858
877
|
|
|
859
878
|
const onModelValueChange = (val: string | number) => {
|
|
879
|
+
if (type.value === 'password') {
|
|
880
|
+
isInternalChange.value = false
|
|
881
|
+
return
|
|
882
|
+
}
|
|
883
|
+
|
|
860
884
|
if (val !== null && val !== undefined) {
|
|
861
885
|
if (val === input.value.innerHTML) {
|
|
862
886
|
return
|
|
@@ -888,6 +912,10 @@ export default defineComponent({
|
|
|
888
912
|
return
|
|
889
913
|
}
|
|
890
914
|
|
|
915
|
+
if (type.value === 'password') {
|
|
916
|
+
return
|
|
917
|
+
}
|
|
918
|
+
|
|
891
919
|
nextTick(() => {
|
|
892
920
|
if (firstTime.value) {
|
|
893
921
|
if (readonly.value || disabled.value) {
|
|
@@ -924,7 +952,7 @@ export default defineComponent({
|
|
|
924
952
|
|
|
925
953
|
const prevInputValue = ref('')
|
|
926
954
|
watch([disabled, readonly], (value) => {
|
|
927
|
-
if (!input.value) {
|
|
955
|
+
if (!input.value || type.value === 'password') {
|
|
928
956
|
return
|
|
929
957
|
}
|
|
930
958
|
|
|
@@ -1023,9 +1051,6 @@ export default defineComponent({
|
|
|
1023
1051
|
if (this.hasPrepend && this.hasAppend) {
|
|
1024
1052
|
classes.push('dl-input__input--both-adornments')
|
|
1025
1053
|
}
|
|
1026
|
-
if (this.type === 'password' && !this.showPass) {
|
|
1027
|
-
classes.push('dl-input__input--password')
|
|
1028
|
-
}
|
|
1029
1054
|
|
|
1030
1055
|
if (this.disabled) {
|
|
1031
1056
|
classes.push('dl-input__input--disabled')
|
|
@@ -1063,6 +1088,9 @@ export default defineComponent({
|
|
|
1063
1088
|
this.size === (InputSizes.small as TInputSizes)
|
|
1064
1089
|
)
|
|
1065
1090
|
},
|
|
1091
|
+
isPasswordType(): boolean {
|
|
1092
|
+
return this.type === 'password'
|
|
1093
|
+
},
|
|
1066
1094
|
hasPrepend(): boolean {
|
|
1067
1095
|
return !!this.$slots.prepend
|
|
1068
1096
|
},
|
|
@@ -1165,6 +1193,10 @@ export default defineComponent({
|
|
|
1165
1193
|
|
|
1166
1194
|
this.$emit('keydown', e)
|
|
1167
1195
|
|
|
1196
|
+
if (this.isPasswordType) {
|
|
1197
|
+
return
|
|
1198
|
+
}
|
|
1199
|
+
|
|
1168
1200
|
if (e.key !== 'Backspace') {
|
|
1169
1201
|
/**
|
|
1170
1202
|
* Allow only numbers
|
|
@@ -1270,6 +1302,24 @@ export default defineComponent({
|
|
|
1270
1302
|
this.$emit('blur', e)
|
|
1271
1303
|
this.handleValueTrim()
|
|
1272
1304
|
},
|
|
1305
|
+
onNativeInput(e: Event): void {
|
|
1306
|
+
const target = e.target as HTMLInputElement
|
|
1307
|
+
const value = target.value
|
|
1308
|
+
this.$emit('input', value, e)
|
|
1309
|
+
this.$emit('update:model-value', value)
|
|
1310
|
+
},
|
|
1311
|
+
onNativeFocus(e: FocusEvent): void {
|
|
1312
|
+
this.focused = true
|
|
1313
|
+
this.$emit('focus', e)
|
|
1314
|
+
},
|
|
1315
|
+
onNativeBlur(e: FocusEvent): void {
|
|
1316
|
+
this.focused = false
|
|
1317
|
+
this.$emit('blur', e)
|
|
1318
|
+
},
|
|
1319
|
+
onNativeEnterPress(e: KeyboardEvent): void {
|
|
1320
|
+
const target = e.target as HTMLInputElement
|
|
1321
|
+
this.$emit('enter', target.value, e)
|
|
1322
|
+
},
|
|
1273
1323
|
onEnterPress(e: any): void {
|
|
1274
1324
|
this.$emit('enter', e.target.innerText, e)
|
|
1275
1325
|
},
|
|
@@ -1280,7 +1330,11 @@ export default defineComponent({
|
|
|
1280
1330
|
this.$emit('update:model-value', clearValue)
|
|
1281
1331
|
|
|
1282
1332
|
const inputRef = this.$refs.input as HTMLInputElement
|
|
1283
|
-
|
|
1333
|
+
if (this.isPasswordType) {
|
|
1334
|
+
inputRef.value = ''
|
|
1335
|
+
} else {
|
|
1336
|
+
inputRef.innerHTML = ''
|
|
1337
|
+
}
|
|
1284
1338
|
inputRef.focus()
|
|
1285
1339
|
},
|
|
1286
1340
|
onPassShowClick(): void {
|
|
@@ -1497,14 +1551,14 @@ export default defineComponent({
|
|
|
1497
1551
|
height: 18px;
|
|
1498
1552
|
}
|
|
1499
1553
|
&--m {
|
|
1500
|
-
height:
|
|
1554
|
+
height: 32px;
|
|
1501
1555
|
}
|
|
1502
1556
|
}
|
|
1503
1557
|
|
|
1504
1558
|
&__input {
|
|
1505
1559
|
display: inline-block;
|
|
1506
1560
|
font-family: var(--dl-typography-body-body2-font-family);
|
|
1507
|
-
border
|
|
1561
|
+
border: none;
|
|
1508
1562
|
border-radius: 0px;
|
|
1509
1563
|
white-space: var(--dl-input-white-space);
|
|
1510
1564
|
font-size: var(--dl-typography-body-body2-font-size);
|
|
@@ -1556,12 +1610,12 @@ export default defineComponent({
|
|
|
1556
1610
|
&--m {
|
|
1557
1611
|
height: 12px;
|
|
1558
1612
|
line-height: 12px;
|
|
1559
|
-
padding-top:
|
|
1560
|
-
padding-bottom:
|
|
1613
|
+
padding-top: 10px;
|
|
1614
|
+
padding-bottom: 10px;
|
|
1561
1615
|
}
|
|
1562
1616
|
&--medium {
|
|
1563
|
-
padding-top:
|
|
1564
|
-
padding-bottom:
|
|
1617
|
+
padding-top: 10px;
|
|
1618
|
+
padding-bottom: 10px;
|
|
1565
1619
|
}
|
|
1566
1620
|
|
|
1567
1621
|
&--s {
|
|
@@ -815,12 +815,12 @@ export default defineComponent({
|
|
|
815
815
|
}
|
|
816
816
|
|
|
817
817
|
&--m {
|
|
818
|
-
padding-top:
|
|
819
|
-
padding-bottom:
|
|
818
|
+
padding-top: 9px;
|
|
819
|
+
padding-bottom: 9px;
|
|
820
820
|
}
|
|
821
821
|
&--medium {
|
|
822
|
-
padding-top:
|
|
823
|
-
padding-bottom:
|
|
822
|
+
padding-top: 9px;
|
|
823
|
+
padding-bottom: 9px;
|
|
824
824
|
}
|
|
825
825
|
|
|
826
826
|
&--s {
|
|
@@ -890,11 +890,11 @@ export default defineComponent({
|
|
|
890
890
|
}
|
|
891
891
|
|
|
892
892
|
&--m {
|
|
893
|
-
height:
|
|
893
|
+
height: 32px;
|
|
894
894
|
}
|
|
895
895
|
|
|
896
896
|
&--medium {
|
|
897
|
-
height:
|
|
897
|
+
height: 32px;
|
|
898
898
|
}
|
|
899
899
|
|
|
900
900
|
&--s {
|
|
@@ -1387,12 +1387,12 @@ export default defineComponent({
|
|
|
1387
1387
|
}
|
|
1388
1388
|
|
|
1389
1389
|
&--m {
|
|
1390
|
-
padding-top:
|
|
1391
|
-
padding-bottom:
|
|
1390
|
+
padding-top: 9px;
|
|
1391
|
+
padding-bottom: 9px;
|
|
1392
1392
|
}
|
|
1393
1393
|
&--medium {
|
|
1394
|
-
padding-top:
|
|
1395
|
-
padding-bottom:
|
|
1394
|
+
padding-top: 9px;
|
|
1395
|
+
padding-bottom: 9px;
|
|
1396
1396
|
}
|
|
1397
1397
|
|
|
1398
1398
|
&--s {
|
|
@@ -1520,11 +1520,11 @@ export default defineComponent({
|
|
|
1520
1520
|
}
|
|
1521
1521
|
|
|
1522
1522
|
&--m {
|
|
1523
|
-
height:
|
|
1523
|
+
height: 32px;
|
|
1524
1524
|
}
|
|
1525
1525
|
|
|
1526
1526
|
&--medium {
|
|
1527
|
-
height:
|
|
1527
|
+
height: 32px;
|
|
1528
1528
|
}
|
|
1529
1529
|
|
|
1530
1530
|
&--s {
|
|
@@ -1554,10 +1554,6 @@ export default defineComponent({
|
|
|
1554
1554
|
border: 0;
|
|
1555
1555
|
outline: none;
|
|
1556
1556
|
background: none;
|
|
1557
|
-
color: var(--dl-color-darker);
|
|
1558
|
-
font-family: 'Roboto', sans-serif;
|
|
1559
|
-
font-size: 12px;
|
|
1560
|
-
height: 14px;
|
|
1561
1557
|
|
|
1562
1558
|
&.hidden {
|
|
1563
1559
|
position: absolute;
|