@veritree/ui 0.89.2 → 0.89.3
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
|
@@ -38,6 +38,11 @@
|
|
|
38
38
|
<IconChevronRight />
|
|
39
39
|
</template>
|
|
40
40
|
</Datepicker>
|
|
41
|
+
<div class="flex mt-2">
|
|
42
|
+
<VTButton size="small" variant="secondary" @click.prevent="onClear"
|
|
43
|
+
>Clear</VTButton
|
|
44
|
+
>
|
|
45
|
+
</div>
|
|
41
46
|
</VTPopoverContent>
|
|
42
47
|
</VTPopover>
|
|
43
48
|
</template>
|
|
@@ -188,6 +193,15 @@ export default {
|
|
|
188
193
|
},
|
|
189
194
|
|
|
190
195
|
onInput() {
|
|
196
|
+
this.cancel();
|
|
197
|
+
},
|
|
198
|
+
|
|
199
|
+
onClear() {
|
|
200
|
+
this.valueModel = null;
|
|
201
|
+
this.cancel();
|
|
202
|
+
},
|
|
203
|
+
|
|
204
|
+
cancel() {
|
|
191
205
|
this.$refs.trigger.cancel();
|
|
192
206
|
},
|
|
193
207
|
},
|
|
@@ -201,10 +215,8 @@ export default {
|
|
|
201
215
|
|
|
202
216
|
.vdp-datepicker {
|
|
203
217
|
font-size: 14px;
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
.vdp-datepicker__calendar .today {
|
|
207
|
-
background-color: #f2f2f2;
|
|
218
|
+
width: 268px;
|
|
219
|
+
max-width: 100%;
|
|
208
220
|
}
|
|
209
221
|
|
|
210
222
|
.vdp-datepicker__calendar {
|
|
@@ -216,11 +228,16 @@ export default {
|
|
|
216
228
|
& button:disabled {
|
|
217
229
|
color: #ddd;
|
|
218
230
|
}
|
|
231
|
+
|
|
232
|
+
.today {
|
|
233
|
+
background-color: #f2f2f2;
|
|
234
|
+
}
|
|
219
235
|
}
|
|
220
236
|
|
|
221
237
|
/* header */
|
|
222
238
|
.vdp-datepicker__calendar header {
|
|
223
239
|
display: flex;
|
|
240
|
+
margin-bottom: 0.25rem;
|
|
224
241
|
|
|
225
242
|
& button {
|
|
226
243
|
border: none;
|
|
@@ -317,8 +334,6 @@ export default {
|
|
|
317
334
|
border-radius: 50%;
|
|
318
335
|
/* height: 2rem; */
|
|
319
336
|
aspect-ratio: 1 / 1;
|
|
320
|
-
width: 2.5rem;
|
|
321
|
-
height: 2.5rem;
|
|
322
337
|
}
|
|
323
338
|
}
|
|
324
339
|
|
|
@@ -388,17 +403,24 @@ export default {
|
|
|
388
403
|
}
|
|
389
404
|
}
|
|
390
405
|
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
406
|
+
.vdp-datepicker__calendar .picker-view {
|
|
407
|
+
min-height: 256px;
|
|
408
|
+
display: flex;
|
|
409
|
+
flex-direction: column;
|
|
410
|
+
}
|
|
394
411
|
|
|
395
412
|
.vdp-datepicker__calendar .picker-view .cells-wrapper {
|
|
396
413
|
overflow: hidden;
|
|
397
414
|
position: relative;
|
|
415
|
+
width: 100%;
|
|
416
|
+
flex-grow: 1;
|
|
417
|
+
display: flex;
|
|
418
|
+
flex-direction: column;
|
|
398
419
|
}
|
|
399
420
|
|
|
400
421
|
.vdp-datepicker__calendar .picker-view .cells-wrapper .picker-cells {
|
|
401
422
|
transition: all 0.25s ease-in-out;
|
|
423
|
+
flex-grow: 1;
|
|
402
424
|
}
|
|
403
425
|
|
|
404
426
|
.vdp-datepicker__calendar .picker-view .slide-right-enter-active {
|
|
@@ -408,6 +430,8 @@ export default {
|
|
|
408
430
|
.vdp-datepicker__calendar .picker-view .slide-right-leave-active {
|
|
409
431
|
position: absolute;
|
|
410
432
|
top: 0;
|
|
433
|
+
left: 0;
|
|
434
|
+
right: 0;
|
|
411
435
|
}
|
|
412
436
|
|
|
413
437
|
.vdp-datepicker__calendar .picker-view .slide-right-enter {
|
|
@@ -425,6 +449,8 @@ export default {
|
|
|
425
449
|
.vdp-datepicker__calendar .picker-view .slide-left-leave-active {
|
|
426
450
|
position: absolute;
|
|
427
451
|
top: 0;
|
|
452
|
+
left: 0;
|
|
453
|
+
right: 0;
|
|
428
454
|
}
|
|
429
455
|
|
|
430
456
|
.vdp-datepicker__calendar .picker-view .slide-left-enter {
|