@veritree/ui 0.89.1 → 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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veritree/ui",
3
- "version": "0.89.1",
3
+ "version": "0.89.3",
4
4
  "description": "veritree ui library",
5
5
  "type": "module",
6
6
  "main": "index.js",
@@ -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;
@@ -386,17 +403,24 @@ export default {
386
403
  }
387
404
  }
388
405
 
389
- /* .vdp-datepicker__calendar .picker-view {
390
- width: inherit;
391
- } */
406
+ .vdp-datepicker__calendar .picker-view {
407
+ min-height: 256px;
408
+ display: flex;
409
+ flex-direction: column;
410
+ }
392
411
 
393
412
  .vdp-datepicker__calendar .picker-view .cells-wrapper {
394
413
  overflow: hidden;
395
414
  position: relative;
415
+ width: 100%;
416
+ flex-grow: 1;
417
+ display: flex;
418
+ flex-direction: column;
396
419
  }
397
420
 
398
421
  .vdp-datepicker__calendar .picker-view .cells-wrapper .picker-cells {
399
422
  transition: all 0.25s ease-in-out;
423
+ flex-grow: 1;
400
424
  }
401
425
 
402
426
  .vdp-datepicker__calendar .picker-view .slide-right-enter-active {
@@ -406,6 +430,8 @@ export default {
406
430
  .vdp-datepicker__calendar .picker-view .slide-right-leave-active {
407
431
  position: absolute;
408
432
  top: 0;
433
+ left: 0;
434
+ right: 0;
409
435
  }
410
436
 
411
437
  .vdp-datepicker__calendar .picker-view .slide-right-enter {
@@ -423,6 +449,8 @@ export default {
423
449
  .vdp-datepicker__calendar .picker-view .slide-left-leave-active {
424
450
  position: absolute;
425
451
  top: 0;
452
+ left: 0;
453
+ right: 0;
426
454
  }
427
455
 
428
456
  .vdp-datepicker__calendar .picker-view .slide-left-enter {