@finema/core 1.3.14 → 1.3.16

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/dist/module.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@finema/core",
3
- "version": "1.3.14",
3
+ "version": "1.3.16",
4
4
  "configKey": "core",
5
5
  "compatibility": {
6
6
  "nuxt": "^3.7.4"
package/dist/module.mjs CHANGED
@@ -2,7 +2,7 @@ import { defineNuxtModule, createResolver, installModule, addPlugin, addComponen
2
2
  import { merge } from 'lodash-es';
3
3
 
4
4
  const name = "@finema/core";
5
- const version = "1.3.14";
5
+ const version = "1.3.16";
6
6
 
7
7
  const colors = {
8
8
  black: "#20243E",
@@ -21,6 +21,7 @@ import Datepicker from '@vuepic/vue-datepicker'
21
21
  import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
22
22
  import { type IDateTimeFieldProps } from '#core/components/Form/InputDateTime/date_time_field.types'
23
23
  import { TimeHelper, useFieldHOC } from '#imports'
24
+ import '@vuepic/vue-datepicker/dist/main.css'
24
25
 
25
26
  const props = withDefaults(defineProps<IDateTimeFieldProps>(), {})
26
27
  const emits = defineEmits<(event: 'change', value: string) => void>()
@@ -11,1272 +11,4 @@
11
11
  --color-primary-900: 32 36 62;
12
12
  --color-primary-950: 32 36 62;
13
13
  --color-primary-DEFAULT: 54 117 251;
14
-
15
-
16
- /*General*/
17
- --dp-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans",
18
- "Helvetica Neue", sans-serif;
19
- --dp-border-radius: 4px; /*Configurable border-radius*/
20
- --dp-cell-border-radius: 4px; /*Specific border radius for the calendar cell*/
21
- --dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/
22
-
23
- /*Sizing*/
24
- --dp-button-height: 35px; /*Size for buttons in overlays*/
25
- --dp-month-year-row-height: 35px; /*Height of the month-year select row*/
26
- --dp-month-year-row-button-size: 35px; /*Specific height for the next/previous buttons*/
27
- --dp-button-icon-height: 20px; /*Icon sizing in buttons*/
28
- --dp-cell-size: 35px; /*Width and height of calendar cell*/
29
- --dp-cell-padding: 5px; /*Padding in the cell*/
30
- --dp-common-padding: 10px; /*Common padding used*/
31
- --dp-input-icon-padding: 35px; /*Padding on the left side of the input if icon is present*/
32
- --dp-input-padding: 6px 30px 6px 12px; /*Padding in the input*/
33
- --dp-menu-min-width: 260px; /*Adjust the min width of the menu*/
34
- --dp-action-buttons-padding: 2px 5px; /*Adjust padding for the action buttons in action row*/
35
- --dp-row-margin: 5px 0; /*Adjust the spacing between rows in the calendar*/
36
- --dp-calendar-header-cell-padding: 0.5rem; /*Adjust padding in calendar header cells*/
37
- --dp-two-calendars-spacing: 10px; /*Space between multiple calendars*/
38
- --dp-overlay-col-padding: 3px; /*Padding in the overlay column*/
39
- --dp-time-inc-dec-button-size: 32px; /*Sizing for arrow buttons in the time picker*/
40
- --dp-menu-padding: 6px 8px; /*Menu padding*/
41
-
42
- /*Font sizes*/
43
- --dp-font-size: 1rem; /*Default font-size*/
44
- --dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/
45
- --dp-time-font-size: 0.8rem; /*Font size in the time picker*/
46
-
47
- /*Transitions*/
48
- --dp-animation-duration: 0.1s; /*Transition duration*/
49
- --dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1); /*Timing on menu appear animation*/
50
- --dp-transition-timing: ease-out; /*Timing on slide animations*/
51
- --dp-background-color: #fff;
52
- --dp-text-color: #212121;
53
- --dp-hover-color: #f3f3f3;
54
- --dp-hover-text-color: #212121;
55
- --dp-hover-icon-color: #959595;
56
- --dp-primary-color: #1976d2;
57
- --dp-primary-disabled-color: #6bacea;
58
- --dp-primary-text-color: #f8f5f5;
59
- --dp-secondary-color: #c0c4cc;
60
- --dp-border-color: #ddd;
61
- --dp-menu-border-color: #ddd;
62
- --dp-border-color-hover: #aaaeb7;
63
- --dp-disabled-color: #f6f6f6;
64
- --dp-scroll-bar-background: #f3f3f3;
65
- --dp-scroll-bar-color: #959595;
66
- --dp-success-color: #76d275;
67
- --dp-success-color-disabled: #a3d9b1;
68
- --dp-icon-color: #959595;
69
- --dp-danger-color: #ff6f60;
70
- --dp-marker-color: #ff6f60;
71
- --dp-tooltip-color: #fafafa;
72
- --dp-disabled-color-text: #8e8e8e;
73
- --dp-highlight-color: rgb(25 118 210 / 10%);
74
- --dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3);
75
- --dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121);
76
- --dp-range-between-border-color: var(--dp-hover-color, #f3f3f3);
77
14
  }
78
-
79
- .dp__input_wrap {
80
- position: relative;
81
- width: 100%;
82
- box-sizing: unset
83
- }
84
-
85
- .dp__input_wrap:focus {
86
- border-color: var(--dp-border-color-hover);
87
- outline: none
88
- }
89
-
90
- .dp__input {
91
- background-color: var(--dp-background-color);
92
- border-radius: var(--dp-border-radius);
93
- font-family: var(--dp-font-family);
94
- border: 1px solid var(--dp-border-color);
95
- outline: none;
96
- transition: border-color .2s cubic-bezier(0.645, 0.045, 0.355, 1);
97
- width: 100%;
98
- font-size: var(--dp-font-size);
99
- line-height: calc(var(--dp-font-size) * 1.5);
100
- padding: var(--dp-input-padding);
101
- color: var(--dp-text-color);
102
- box-sizing: border-box
103
- }
104
-
105
- .dp__input::placeholder {
106
- opacity: .7
107
- }
108
-
109
- .dp__input:hover {
110
- border-color: var(--dp-border-color-hover)
111
- }
112
-
113
- .dp__input_reg {
114
- caret-color: rgba(0, 0, 0, 0)
115
- }
116
-
117
- .dp__input_focus {
118
- border-color: var(--dp-border-color-hover)
119
- }
120
-
121
- .dp__disabled {
122
- background: var(--dp-disabled-color)
123
- }
124
-
125
- .dp__disabled::placeholder {
126
- color: var(--dp-disabled-color-text)
127
- }
128
-
129
- .dp__input_icons {
130
- display: inline-block;
131
- width: var(--dp-font-size);
132
- height: var(--dp-font-size);
133
- stroke-width: 0;
134
- font-size: var(--dp-font-size);
135
- line-height: calc(var(--dp-font-size) * 1.5);
136
- padding: 6px 12px;
137
- color: var(--dp-icon-color);
138
- box-sizing: content-box
139
- }
140
-
141
- .dp__input_icon {
142
- cursor: pointer;
143
- position: absolute;
144
- top: 50%;
145
- inset-inline-start: 0;
146
- transform: translateY(-50%);
147
- color: var(--dp-icon-color)
148
- }
149
-
150
- .dp__clear_icon {
151
- position: absolute;
152
- top: 50%;
153
- inset-inline-end: 0;
154
- transform: translateY(-50%);
155
- cursor: pointer;
156
- color: var(--dp-icon-color)
157
- }
158
-
159
- .dp__input_icon_pad {
160
- padding-inline-start: var(--dp-input-icon-padding)
161
- }
162
-
163
- .dp__input_valid {
164
- box-shadow: 0 0 var(--dp-border-radius) var(--dp-success-color);
165
- border-color: var(--dp-success-color)
166
- }
167
-
168
- .dp__input_valid:hover {
169
- border-color: var(--dp-success-color)
170
- }
171
-
172
- .dp__input_invalid {
173
- box-shadow: 0 0 var(--dp-border-radius) var(--dp-danger-color);
174
- border-color: var(--dp-danger-color)
175
- }
176
-
177
- .dp__input_invalid:hover {
178
- border-color: var(--dp-danger-color)
179
- }
180
-
181
- .dp__menu {
182
- background: var(--dp-background-color);
183
- border-radius: var(--dp-border-radius);
184
- min-width: var(--dp-menu-min-width);
185
- font-family: var(--dp-font-family);
186
- font-size: var(--dp-font-size);
187
- user-select: none;
188
- border: 1px solid var(--dp-menu-border-color);
189
- box-sizing: border-box
190
- }
191
-
192
- .dp__menu::after {
193
- box-sizing: border-box
194
- }
195
-
196
- .dp__menu::before {
197
- box-sizing: border-box
198
- }
199
-
200
- .dp__menu:focus {
201
- border: 1px solid var(--dp-menu-border-color);
202
- outline: none
203
- }
204
-
205
- .dp--menu-wrapper {
206
- position: absolute;
207
- z-index: 99999
208
- }
209
-
210
- .dp__menu_inner {
211
- padding: var(--dp-menu-padding)
212
- }
213
-
214
- .dp--menu--inner-stretched {
215
- padding: 6px 0
216
- }
217
-
218
- .dp__menu_index {
219
- z-index: 99999
220
- }
221
-
222
- .dp__menu_readonly, .dp__menu_disabled {
223
- position: absolute;
224
- inset: 0;
225
- z-index: 999999
226
- }
227
-
228
- .dp__menu_disabled {
229
- background: rgba(255, 255, 255, .5);
230
- cursor: not-allowed
231
- }
232
-
233
- .dp__menu_readonly {
234
- background: rgba(0, 0, 0, 0);
235
- cursor: default
236
- }
237
-
238
- .dp__arrow_top {
239
- left: 50%;
240
- top: 0;
241
- height: 12px;
242
- width: 12px;
243
- background-color: var(--dp-background-color);
244
- position: absolute;
245
- border-inline-end: 1px solid var(--dp-menu-border-color);
246
- border-top: 1px solid var(--dp-menu-border-color);
247
- transform: translate(-50%, -50%) rotate(-45deg)
248
- }
249
-
250
- .dp__arrow_bottom {
251
- left: 50%;
252
- bottom: 0;
253
- height: 12px;
254
- width: 12px;
255
- background-color: var(--dp-background-color);
256
- position: absolute;
257
- border-inline-end: 1px solid var(--dp-menu-border-color);
258
- border-bottom: 1px solid var(--dp-menu-border-color);
259
- transform: translate(-50%, 50%) rotate(45deg)
260
- }
261
-
262
- .dp__action_extra {
263
- text-align: center;
264
- padding: 2px 0
265
- }
266
-
267
- .dp--preset-dates {
268
- padding: 5px;
269
- border-inline-end: 1px solid var(--dp-border-color)
270
- }
271
-
272
- @media only screen and (width <= 600px) {
273
- .dp--preset-dates {
274
- display: flex;
275
- align-self: center;
276
- border: none;
277
- overflow-x: auto;
278
- /*max-width: calc(var(--dp-menu-width) - var(--dp-action-row-padding) * 2)*/
279
- }
280
- }
281
-
282
- .dp__sidebar_left {
283
- padding: 5px;
284
- border-inline-end: 1px solid var(--dp-border-color)
285
- }
286
-
287
- .dp__sidebar_right {
288
- padding: 5px;
289
- margin-inline-end: 1px solid var(--dp-border-color)
290
- }
291
-
292
- .dp--preset-range {
293
- display: block;
294
- width: 100%;
295
- padding: 5px;
296
- text-align: left;
297
- white-space: nowrap;
298
- color: var(--dp-text-color);
299
- border-radius: var(--dp-border-radius);
300
- transition: var(--dp-common-transition)
301
- }
302
-
303
- .dp--preset-range:hover {
304
- background-color: var(--dp-hover-color);
305
- color: var(--dp-hover-text-color);
306
- cursor: pointer
307
- }
308
-
309
- @media only screen and (width <= 600px) {
310
- .dp--preset-range {
311
- border: 1px solid var(--dp-border-color);
312
- margin: 0 3px
313
- }
314
-
315
- .dp--preset-range:first-child {
316
- margin-left: 0
317
- }
318
-
319
- .dp--preset-range:last-child {
320
- margin-right: 0
321
- }
322
- }
323
-
324
- .dp__menu_content_wrapper {
325
- display: flex
326
- }
327
-
328
- @media only screen and (width <= 600px) {
329
- .dp__menu_content_wrapper {
330
- flex-direction: column-reverse
331
- }
332
- }
333
-
334
- .dp__calendar_header {
335
- position: relative;
336
- display: flex;
337
- justify-content: center;
338
- align-items: center;
339
- color: var(--dp-text-color);
340
- white-space: nowrap;
341
- font-weight: bold
342
- }
343
-
344
- .dp__calendar_header_item {
345
- text-align: center;
346
- flex-grow: 1;
347
- height: var(--dp-cell-size);
348
- padding: var(--dp-cell-padding);
349
- width: var(--dp-cell-size);
350
- box-sizing: border-box
351
- }
352
-
353
- .dp__calendar_row {
354
- display: flex;
355
- justify-content: center;
356
- align-items: center;
357
- margin: var(--dp-row-margin)
358
- }
359
-
360
- .dp__calendar_item {
361
- text-align: center;
362
- flex-grow: 1;
363
- box-sizing: border-box;
364
- color: var(--dp-text-color)
365
- }
366
-
367
- .dp__calendar {
368
- position: relative
369
- }
370
-
371
- .dp__calendar_header_cell {
372
- border-bottom: thin solid var(--dp-border-color);
373
- padding: var(--dp-calendar-header-cell-padding)
374
- }
375
-
376
- .dp__cell_inner {
377
- display: flex;
378
- align-items: center;
379
- text-align: center;
380
- justify-content: center;
381
- border-radius: var(--dp-cell-border-radius);
382
- height: var(--dp-cell-size);
383
- padding: var(--dp-cell-padding);
384
- width: var(--dp-cell-size);
385
- border: 1px solid rgba(0, 0, 0, 0);
386
- box-sizing: border-box;
387
- position: relative
388
- }
389
-
390
- .dp__cell_inner:hover {
391
- transition: all .2s
392
- }
393
-
394
- .dp__cell_auto_range_start, .dp__date_hover_start:hover, .dp__range_start {
395
- border-end-end-radius: 0;
396
- border-start-end-radius: 0
397
- }
398
-
399
- .dp__cell_auto_range_end, .dp__date_hover_end:hover, .dp__range_end {
400
- border-end-start-radius: 0;
401
- border-start-start-radius: 0
402
- }
403
-
404
- .dp__range_end, .dp__range_start, .dp__active_date {
405
- background: var(--dp-primary-color);
406
- color: var(--dp-primary-text-color)
407
- }
408
-
409
- .dp__cell_auto_range_end, .dp__cell_auto_range_start {
410
- border-top: 1px dashed var(--dp-primary-color);
411
- border-bottom: 1px dashed var(--dp-primary-color)
412
- }
413
-
414
- .dp__date_hover_end:hover, .dp__date_hover_start:hover, .dp__date_hover:hover {
415
- background: var(--dp-hover-color);
416
- color: var(--dp-hover-text-color)
417
- }
418
-
419
- .dp__cell_offset {
420
- color: var(--dp-secondary-color)
421
- }
422
-
423
- .dp__cell_disabled {
424
- color: var(--dp-secondary-color);
425
- cursor: not-allowed
426
- }
427
-
428
- .dp__range_between {
429
- background: var(--dp-range-between-dates-background-color);
430
- color: var(--dp-range-between-dates-text-color);
431
- border-radius: 0;
432
- border: 1px solid var(--dp-range-between-border-color)
433
- }
434
-
435
- .dp__range_between_week {
436
- background: var(--dp-primary-color);
437
- color: var(--dp-primary-text-color);
438
- border-radius: 0;
439
- border-top: 1px solid var(--dp-primary-color);
440
- border-bottom: 1px solid var(--dp-primary-color)
441
- }
442
-
443
- .dp__today {
444
- border: 1px solid var(--dp-primary-color)
445
- }
446
-
447
- .dp__week_num {
448
- color: var(--dp-secondary-color);
449
- text-align: center
450
- }
451
-
452
- .dp__cell_auto_range {
453
- border-radius: 0;
454
- border-top: 1px dashed var(--dp-primary-color);
455
- border-bottom: 1px dashed var(--dp-primary-color)
456
- }
457
-
458
- .dp__cell_auto_range_start {
459
- border-inline-start: 1px dashed var(--dp-primary-color)
460
- }
461
-
462
- .dp__cell_auto_range_end {
463
- border-inline-end: 1px dashed var(--dp-primary-color)
464
- }
465
-
466
- .dp__calendar_header_separator {
467
- width: 100%;
468
- height: 1px;
469
- background: var(--dp-border-color)
470
- }
471
-
472
- .dp__calendar_next {
473
- margin-inline-start: var(--dp-multi-calendars-spacing)
474
- }
475
-
476
- .dp__marker_line, .dp__marker_dot {
477
- height: 5px;
478
- background-color: var(--dp-marker-color);
479
- position: absolute;
480
- bottom: 0
481
- }
482
-
483
- .dp__marker_dot {
484
- width: 5px;
485
- border-radius: 50%;
486
- left: 50%;
487
- transform: translateX(-50%)
488
- }
489
-
490
- .dp__marker_line {
491
- width: 100%;
492
- left: 0
493
- }
494
-
495
- .dp__marker_tooltip {
496
- position: absolute;
497
- border-radius: var(--dp-border-radius);
498
- background-color: var(--dp-tooltip-color);
499
- padding: 5px;
500
- border: 1px solid var(--dp-border-color);
501
- z-index: 99999;
502
- box-sizing: border-box;
503
- cursor: default
504
- }
505
-
506
- .dp__tooltip_content {
507
- white-space: nowrap
508
- }
509
-
510
- .dp__tooltip_text {
511
- display: flex;
512
- align-items: center;
513
- flex-flow: row nowrap;
514
- color: var(--dp-text-color)
515
- }
516
-
517
- .dp__tooltip_mark {
518
- height: 5px;
519
- width: 5px;
520
- border-radius: 50%;
521
- background-color: var(--dp-text-color);
522
- color: var(--dp-text-color);
523
- margin-inline-end: 5px
524
- }
525
-
526
- .dp__arrow_bottom_tp {
527
- bottom: 0;
528
- height: 8px;
529
- width: 8px;
530
- background-color: var(--dp-tooltip-color);
531
- position: absolute;
532
- border-inline-end: 1px solid var(--dp-border-color);
533
- border-bottom: 1px solid var(--dp-border-color);
534
- transform: translate(-50%, 50%) rotate(45deg)
535
- }
536
-
537
- .dp__instance_calendar {
538
- position: relative;
539
- width: 100%
540
- }
541
-
542
- @media only screen and (width <= 600px) {
543
- .dp__flex_display {
544
- flex-direction: column
545
- }
546
- }
547
-
548
- .dp__cell_highlight {
549
- background-color: var(--dp-highlight-color)
550
- }
551
-
552
- .dp__month_year_row {
553
- display: flex;
554
- align-items: center;
555
- height: var(--dp-month-year-row-height);
556
- color: var(--dp-text-color);
557
- box-sizing: border-box
558
- }
559
-
560
- .dp__inner_nav {
561
- display: flex;
562
- align-items: center;
563
- justify-content: center;
564
- cursor: pointer;
565
- height: var(--dp-month-year-row-button-size);
566
- width: var(--dp-month-year-row-button-size);
567
- color: var(--dp-icon-color);
568
- text-align: center;
569
- border-radius: 50%
570
- }
571
-
572
- .dp__inner_nav svg {
573
- height: var(--dp-button-icon-height);
574
- width: var(--dp-button-icon-height)
575
- }
576
-
577
- .dp__inner_nav:hover {
578
- background: var(--dp-hover-color);
579
- color: var(--dp-hover-icon-color)
580
- }
581
-
582
- [dir=rtl] .dp__inner_nav {
583
- transform: rotate(180deg)
584
- }
585
-
586
- .dp__inner_nav_disabled:hover, .dp__inner_nav_disabled {
587
- background: var(--dp-disabled-color);
588
- color: var(--dp-disabled-color-text);
589
- cursor: not-allowed
590
- }
591
-
592
- .dp--year-select, .dp__month_year_select {
593
- text-align: center;
594
- cursor: pointer;
595
- height: var(--dp-month-year-row-height);
596
- display: flex;
597
- align-items: center;
598
- justify-content: center;
599
- border-radius: var(--dp-border-radius);
600
- box-sizing: border-box;
601
- color: var(--dp-text-color)
602
- }
603
-
604
- .dp--year-select:hover, .dp__month_year_select:hover {
605
- background: var(--dp-hover-color);
606
- color: var(--dp-hover-text-color);
607
- transition: var(--dp-common-transition)
608
- }
609
-
610
- .dp__month_year_select {
611
- width: 50%
612
- }
613
-
614
- .dp--year-select {
615
- width: 100%
616
- }
617
-
618
- .dp__month_year_wrap {
619
- display: flex;
620
- width: 100%
621
- }
622
-
623
- .dp__year_disable_select {
624
- justify-content: space-around
625
- }
626
-
627
- .dp__overlay {
628
- width: 100%;
629
- background: var(--dp-background-color);
630
- transition: opacity 1s ease-out;
631
- z-index: 99999;
632
- font-family: var(--dp-font-family);
633
- color: var(--dp-text-color);
634
- box-sizing: border-box
635
- }
636
-
637
- .dp--overlay-absolute {
638
- position: absolute;
639
- height: 100%;
640
- top: 0;
641
- left: 0
642
- }
643
-
644
- .dp--overlay-relative {
645
- position: relative
646
- }
647
-
648
- .dp__overlay_container::-webkit-scrollbar-track {
649
- box-shadow: var(--dp-scroll-bar-background);
650
- background-color: var(--dp-scroll-bar-background)
651
- }
652
-
653
- .dp__overlay_container::-webkit-scrollbar {
654
- width: 5px;
655
- background-color: var(--dp-scroll-bar-background)
656
- }
657
-
658
- .dp__overlay_container::-webkit-scrollbar-thumb {
659
- background-color: var(--dp-scroll-bar-color);
660
- border-radius: 10px
661
- }
662
-
663
- .dp__overlay:focus {
664
- border: none;
665
- outline: none
666
- }
667
-
668
- .dp__container_flex {
669
- display: flex
670
- }
671
-
672
- .dp__container_block {
673
- display: block
674
- }
675
-
676
- .dp__overlay_container {
677
- flex-direction: column;
678
- overflow-y: auto
679
- }
680
-
681
- .dp__time_picker_overlay_container {
682
- height: 100%
683
- }
684
-
685
- .dp__overlay_row {
686
- padding: 0;
687
- box-sizing: border-box;
688
- display: flex;
689
- margin-inline: auto auto;
690
- flex-wrap: wrap;
691
- max-width: 100%;
692
- width: 100%;
693
- align-items: center
694
- }
695
-
696
- .dp__flex_row {
697
- flex: 1
698
- }
699
-
700
- .dp__overlay_col {
701
- box-sizing: border-box;
702
- width: 33%;
703
- padding: var(--dp-overlay-col-padding);
704
- white-space: nowrap
705
- }
706
-
707
- .dp__overlay_cell_pad {
708
- padding: var(--dp-common-padding) 0
709
- }
710
-
711
- .dp__overlay_cell_active {
712
- cursor: pointer;
713
- border-radius: var(--dp-border-radius);
714
- text-align: center;
715
- background: var(--dp-primary-color);
716
- color: var(--dp-primary-text-color)
717
- }
718
-
719
- .dp__overlay_cell {
720
- cursor: pointer;
721
- border-radius: var(--dp-border-radius);
722
- text-align: center
723
- }
724
-
725
- .dp__overlay_cell:hover {
726
- background: var(--dp-hover-color);
727
- color: var(--dp-hover-text-color);
728
- transition: var(--dp-common-transition)
729
- }
730
-
731
- .dp__cell_in_between {
732
- background: var(--dp-hover-color);
733
- color: var(--dp-hover-text-color)
734
- }
735
-
736
- .dp__over_action_scroll {
737
- right: 5px;
738
- box-sizing: border-box
739
- }
740
-
741
- .dp__overlay_cell_disabled {
742
- cursor: not-allowed;
743
- background: var(--dp-disabled-color)
744
- }
745
-
746
- .dp__overlay_cell_disabled:hover {
747
- background: var(--dp-disabled-color)
748
- }
749
-
750
- .dp__overlay_cell_active_disabled {
751
- cursor: not-allowed;
752
- background: var(--dp-primary-disabled-color)
753
- }
754
-
755
- .dp__overlay_cell_active_disabled:hover {
756
- background: var(--dp-primary-disabled-color)
757
- }
758
-
759
- .dp__btn, .dp--qr-btn, .dp--time-invalid, .dp--time-overlay-btn {
760
- border: none;
761
- font: inherit;
762
- transition: var(--dp-common-transition);
763
- line-height: normal
764
- }
765
-
766
- .dp--year-mode-picker {
767
- display: flex;
768
- width: 100%;
769
- align-items: center;
770
- justify-content: space-between;
771
- height: var(--dp-cell-size)
772
- }
773
-
774
- .dp--tp-wrap {
775
- max-width: var(--dp-menu-min-width)
776
- }
777
-
778
- .dp__time_input {
779
- width: 100%;
780
- display: flex;
781
- align-items: center;
782
- justify-content: center;
783
- user-select: none;
784
- font-family: var(--dp-font-family);
785
- color: var(--dp-text-color)
786
- }
787
-
788
- .dp__time_col_reg_block {
789
- padding: 0 20px
790
- }
791
-
792
- .dp__time_col_reg_inline {
793
- padding: 0 10px
794
- }
795
-
796
- .dp__time_col_reg_with_button {
797
- padding: 0 15px
798
- }
799
-
800
- .dp__time_col_sec {
801
- padding: 0 10px
802
- }
803
-
804
- .dp__time_col_sec_with_button {
805
- padding: 0 5px
806
- }
807
-
808
- .dp__time_col {
809
- text-align: center;
810
- display: flex;
811
- align-items: center;
812
- justify-content: center;
813
- flex-direction: column
814
- }
815
-
816
- .dp__time_col_block {
817
- font-size: var(--dp-time-font-size)
818
- }
819
-
820
- .dp__time_display {
821
- cursor: pointer;
822
- color: var(--dp-text-color);
823
- border-radius: var(--dp-border-radius);
824
- display: flex;
825
- align-items: center;
826
- justify-content: center
827
- }
828
-
829
- .dp__time_display:hover:enabled {
830
- background: var(--dp-hover-color);
831
- color: var(--dp-hover-text-color)
832
- }
833
-
834
- .dp__time_display_block {
835
- padding: 0 3px
836
- }
837
-
838
- .dp__time_display_inline {
839
- padding: 5px
840
- }
841
-
842
- .dp__time_picker_inline_container {
843
- display: flex;
844
- width: 100%;
845
- justify-content: center
846
- }
847
-
848
- .dp__inc_dec_button {
849
- padding: 5px;
850
- margin: 0;
851
- height: var(--dp-time-inc-dec-button-size);
852
- width: var(--dp-time-inc-dec-button-size);
853
- display: flex;
854
- align-items: center;
855
- justify-content: center;
856
- cursor: pointer;
857
- border-radius: 50%;
858
- color: var(--dp-icon-color);
859
- box-sizing: border-box
860
- }
861
-
862
- .dp__inc_dec_button svg {
863
- height: var(--dp-time-inc-dec-button-size);
864
- width: var(--dp-time-inc-dec-button-size)
865
- }
866
-
867
- .dp__inc_dec_button:hover {
868
- background: var(--dp-hover-color);
869
- color: var(--dp-primary-color)
870
- }
871
-
872
- .dp__inc_dec_button_inline {
873
- width: 100%;
874
- padding: 0;
875
- height: 8px;
876
- cursor: pointer;
877
- display: flex;
878
- align-items: center
879
- }
880
-
881
- .dp__inc_dec_button_disabled:hover, .dp__inc_dec_button_disabled {
882
- background: var(--dp-disabled-color);
883
- color: var(--dp-disabled-color-text);
884
- cursor: not-allowed
885
- }
886
-
887
- .dp__pm_am_button {
888
- background: var(--dp-primary-color);
889
- color: var(--dp-primary-text-color);
890
- border: none;
891
- padding: var(--dp-common-padding);
892
- border-radius: var(--dp-border-radius);
893
- cursor: pointer
894
- }
895
-
896
- .dp__tp_inline_btn_bar {
897
- width: 100%;
898
- height: 4px;
899
- background-color: var(--dp-secondary-color);
900
- transition: var(--dp-common-transition);
901
- border-collapse: collapse
902
- }
903
-
904
- .dp__tp_inline_btn_top:hover .dp__tp_btn_in_r {
905
- background-color: var(--dp-primary-color);
906
- transform: rotate(12deg) scale(1.15) translateY(-2px)
907
- }
908
-
909
- .dp__tp_inline_btn_top:hover .dp__tp_btn_in_l {
910
- background-color: var(--dp-primary-color);
911
- transform: rotate(-12deg) scale(1.15) translateY(-2px)
912
- }
913
-
914
- .dp__tp_inline_btn_bottom:hover .dp__tp_btn_in_r {
915
- background-color: var(--dp-primary-color);
916
- transform: rotate(-12deg) scale(1.15) translateY(-2px)
917
- }
918
-
919
- .dp__tp_inline_btn_bottom:hover .dp__tp_btn_in_l {
920
- background-color: var(--dp-primary-color);
921
- transform: rotate(12deg) scale(1.15) translateY(-2px)
922
- }
923
-
924
- .dp--time-overlay-btn {
925
- background: none
926
- }
927
-
928
- .dp--time-invalid {
929
- background-color: var(--dp-disabled-color)
930
- }
931
-
932
- .dp__action_row {
933
- display: flex;
934
- align-items: center;
935
- width: 100%;
936
- padding: var(--dp-action-row-padding);
937
- box-sizing: border-box;
938
- color: var(--dp-text-color);
939
- flex-flow: row nowrap
940
- }
941
-
942
- .dp__action_row svg {
943
- height: var(--dp-button-icon-height);
944
- width: auto
945
- }
946
-
947
- .dp__selection_preview {
948
- display: block;
949
- color: var(--dp-text-color);
950
- font-size: var(--dp-preview-font-size);
951
- overflow: hidden;
952
- white-space: nowrap;
953
- text-overflow: ellipsis
954
- }
955
-
956
- .dp__action_buttons {
957
- display: flex;
958
- flex: 0;
959
- align-items: center;
960
- justify-content: flex-end;
961
- margin-inline-start: auto
962
- }
963
-
964
- .dp__action_button {
965
- display: inline-flex;
966
- align-items: center;
967
- background: rgba(0, 0, 0, 0);
968
- border: 1px solid rgba(0, 0, 0, 0);
969
- padding: var(--dp-action-buttons-padding);
970
- line-height: var(--dp-action-button-height);
971
- margin-inline-start: 3px;
972
- height: var(--dp-action-button-height);
973
- cursor: pointer;
974
- border-radius: var(--dp-border-radius);
975
- font-size: var(--dp-preview-font-size);
976
- font-family: var(--dp-font-family)
977
- }
978
-
979
- .dp__action_select {
980
- background: var(--dp-primary-color);
981
- color: var(--dp-primary-text-color)
982
- }
983
-
984
- .dp__action_select:hover {
985
- background: var(--dp-primary-color);
986
- transition: var(--dp-action-row-transtion)
987
- }
988
-
989
- .dp__action_select:disabled {
990
- background: var(--dp-primary-disabled-color);
991
- cursor: not-allowed
992
- }
993
-
994
- .dp__action_cancel {
995
- color: var(--dp-text-color);
996
- border: 1px solid var(--dp-border-color)
997
- }
998
-
999
- .dp__action_cancel:hover {
1000
- border-color: var(--dp-primary-color);
1001
- transition: var(--dp-action-row-transtion)
1002
- }
1003
-
1004
- .dp-quarter-picker-wrap {
1005
- display: flex;
1006
- flex-direction: column;
1007
- height: 100%;
1008
- min-width: var(--dp-menu-min-width)
1009
- }
1010
-
1011
- .dp--qr-btn {
1012
- width: 100%;
1013
- padding: var(--dp-common-padding)
1014
- }
1015
-
1016
- .dp--qr-btn:not(.dp--highlighted,.dp--qr-btn-active,.dp--qr-btn-disabled,.dp--qr-btn-between) {
1017
- background: none
1018
- }
1019
-
1020
- .dp--qr-btn:hover:not(.dp--qr-btn-active,.dp--qr-btn-disabled) {
1021
- background: var(--dp-hover-color);
1022
- color: var(--dp-hover-text-color);
1023
- transition: var(--dp-common-transition)
1024
- }
1025
-
1026
- .dp--quarter-items {
1027
- display: flex;
1028
- flex-direction: column;
1029
- flex: 1;
1030
- width: 100%;
1031
- height: 100%;
1032
- justify-content: space-evenly
1033
- }
1034
-
1035
- .dp--qr-btn-active {
1036
- background: var(--dp-primary-color);
1037
- color: var(--dp-primary-text-color)
1038
- }
1039
-
1040
- .dp--qr-btn-between {
1041
- background: var(--dp-hover-color);
1042
- color: var(--dp-hover-text-color)
1043
- }
1044
-
1045
- .dp--qr-btn-disabled {
1046
- cursor: not-allowed;
1047
- background: var(--dp-disabled-color)
1048
- }
1049
-
1050
- .dp--qr-btn-disabled:hover {
1051
- background: var(--dp-disabled-color)
1052
- }
1053
-
1054
- .dp__btn, .dp--time-overlay-btn, .dp--time-invalid, .dp--qr-btn {
1055
- border: none;
1056
- font: inherit;
1057
- transition: var(--dp-common-transition);
1058
- line-height: normal
1059
- }
1060
-
1061
- .dp--year-mode-picker {
1062
- display: flex;
1063
- width: 100%;
1064
- align-items: center;
1065
- justify-content: space-between;
1066
- height: var(--dp-cell-size)
1067
- }
1068
-
1069
- :root {
1070
- --dp-common-transition: all 0.1s ease-in;
1071
- --dp-menu-padding: 6px 8px;
1072
- --dp-animation-duration: 0.1s;
1073
- --dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1);
1074
- --dp-transition-timing: ease-out;
1075
- --dp-action-row-transtion: all 0.2s ease-in;
1076
- --dp-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
1077
- --dp-border-radius: 4px;
1078
- --dp-cell-border-radius: 4px;
1079
- --dp-transition-length: 22px;
1080
- --dp-transition-timing-general: 0.1s;
1081
- --dp-button-height: 35px;
1082
- --dp-month-year-row-height: 35px;
1083
- --dp-month-year-row-button-size: 25px;
1084
- --dp-button-icon-height: 20px;
1085
- --dp-calendar-wrap-padding: 0 5px;
1086
- --dp-cell-size: 35px;
1087
- --dp-cell-padding: 5px;
1088
- --dp-common-padding: 10px;
1089
- --dp-input-icon-padding: 35px;
1090
- --dp-input-padding: 6px 30px 6px 12px;
1091
- --dp-menu-min-width: 260px;
1092
- --dp-action-buttons-padding: 1px 6px;
1093
- --dp-row-margin: 5px 0;
1094
- --dp-calendar-header-cell-padding: 0.5rem;
1095
- --dp-multi-calendars-spacing: 10px;
1096
- --dp-overlay-col-padding: 3px;
1097
- --dp-time-inc-dec-button-size: 32px;
1098
- --dp-font-size: 1rem;
1099
- --dp-preview-font-size: 0.8rem;
1100
- --dp-time-font-size: 2rem;
1101
- --dp-action-button-height: 22px;
1102
- --dp-action-row-padding: 8px
1103
- }
1104
-
1105
- .dp__theme_dark {
1106
- --dp-background-color: #212121;
1107
- --dp-text-color: #fff;
1108
- --dp-hover-color: #484848;
1109
- --dp-hover-text-color: #fff;
1110
- --dp-hover-icon-color: #959595;
1111
- --dp-primary-color: #005cb2;
1112
- --dp-primary-disabled-color: #61a8ea;
1113
- --dp-primary-text-color: #fff;
1114
- --dp-secondary-color: #a9a9a9;
1115
- --dp-border-color: #2d2d2d;
1116
- --dp-menu-border-color: #2d2d2d;
1117
- --dp-border-color-hover: #aaaeb7;
1118
- --dp-disabled-color: #737373;
1119
- --dp-disabled-color-text: #d0d0d0;
1120
- --dp-scroll-bar-background: #212121;
1121
- --dp-scroll-bar-color: #484848;
1122
- --dp-success-color: #00701a;
1123
- --dp-success-color-disabled: #428f59;
1124
- --dp-icon-color: #959595;
1125
- --dp-danger-color: #e53935;
1126
- --dp-marker-color: #e53935;
1127
- --dp-tooltip-color: #3e3e3e;
1128
- --dp-highlight-color: rgb(0 92 178 / 20%);
1129
- --dp-range-between-dates-background-color: var(--dp-hover-color, #484848);
1130
- --dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);
1131
- --dp-range-between-border-color: var(--dp-hover-color, #fff)
1132
- }
1133
-
1134
- .dp__theme_light {
1135
- --dp-background-color: #fff;
1136
- --dp-text-color: #212121;
1137
- --dp-hover-color: #f3f3f3;
1138
- --dp-hover-text-color: #212121;
1139
- --dp-hover-icon-color: #959595;
1140
- --dp-primary-color: #1976d2;
1141
- --dp-primary-disabled-color: #6bacea;
1142
- --dp-primary-text-color: #f8f5f5;
1143
- --dp-secondary-color: #c0c4cc;
1144
- --dp-border-color: #ddd;
1145
- --dp-menu-border-color: #ddd;
1146
- --dp-border-color-hover: #aaaeb7;
1147
- --dp-disabled-color: #f6f6f6;
1148
- --dp-scroll-bar-background: #f3f3f3;
1149
- --dp-scroll-bar-color: #959595;
1150
- --dp-success-color: #76d275;
1151
- --dp-success-color-disabled: #a3d9b1;
1152
- --dp-icon-color: #959595;
1153
- --dp-danger-color: #ff6f60;
1154
- --dp-marker-color: #ff6f60;
1155
- --dp-tooltip-color: #fafafa;
1156
- --dp-disabled-color-text: #8e8e8e;
1157
- --dp-highlight-color: rgb(25 118 210 / 10%);
1158
- --dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3);
1159
- --dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121);
1160
- --dp-range-between-border-color: var(--dp-hover-color, #f3f3f3)
1161
- }
1162
-
1163
- .dp__flex {
1164
- display: flex;
1165
- align-items: center
1166
- }
1167
-
1168
- .dp__btn {
1169
- background: none
1170
- }
1171
-
1172
- .dp__main {
1173
- font-family: var(--dp-font-family);
1174
- user-select: none;
1175
- box-sizing: border-box;
1176
- position: relative;
1177
- width: 100%
1178
- }
1179
-
1180
- .dp__pointer {
1181
- cursor: pointer
1182
- }
1183
-
1184
- .dp__icon {
1185
- stroke: currentcolor;
1186
- fill: currentcolor
1187
- }
1188
-
1189
- .dp__button {
1190
- width: 100%;
1191
- text-align: center;
1192
- color: var(--dp-icon-color);
1193
- cursor: pointer;
1194
- display: flex;
1195
- align-items: center;
1196
- place-content: center center;
1197
- padding: var(--dp-common-padding);
1198
- box-sizing: border-box;
1199
- height: var(--dp-button-height)
1200
- }
1201
-
1202
- .dp__button.dp__overlay_action {
1203
- position: absolute;
1204
- bottom: 0
1205
- }
1206
-
1207
- .dp__button:hover {
1208
- background: var(--dp-hover-color);
1209
- color: var(--dp-hover-icon-color)
1210
- }
1211
-
1212
- .dp__button svg {
1213
- height: var(--dp-button-icon-height);
1214
- width: auto
1215
- }
1216
-
1217
- .dp__button_bottom {
1218
- border-bottom-left-radius: var(--dp-border-radius);
1219
- border-bottom-right-radius: var(--dp-border-radius)
1220
- }
1221
-
1222
- .dp__flex_display {
1223
- display: flex
1224
- }
1225
-
1226
- .dp__flex_display_with_input {
1227
- flex-direction: column;
1228
- align-items: flex-start
1229
- }
1230
-
1231
- .dp__relative {
1232
- position: relative
1233
- }
1234
-
1235
- .calendar-next-enter-active, .calendar-next-leave-active, .calendar-prev-enter-active, .calendar-prev-leave-active {
1236
- transition: all var(--dp-transition-timing-general) ease-out
1237
- }
1238
-
1239
- .calendar-next-enter-from {
1240
- opacity: 0;
1241
- transform: translateX(var(--dp-transition-length))
1242
- }
1243
-
1244
- .calendar-next-leave-to {
1245
- opacity: 0;
1246
- transform: translateX(calc(var(--dp-transition-length) * -1))
1247
- }
1248
-
1249
- .calendar-prev-enter-from {
1250
- opacity: 0;
1251
- transform: translateX(calc(var(--dp-transition-length) * -1))
1252
- }
1253
-
1254
- .calendar-prev-leave-to {
1255
- opacity: 0;
1256
- transform: translateX(var(--dp-transition-length))
1257
- }
1258
-
1259
- .dp-menu-appear-bottom-enter-active, .dp-menu-appear-bottom-leave-active, .dp-menu-appear-top-enter-active, .dp-menu-appear-top-leave-active, .dp-slide-up-enter-active, .dp-slide-up-leave-active, .dp-slide-down-enter-active, .dp-slide-down-leave-active {
1260
- transition: all var(--dp-animation-duration) var(--dp-transition-timing)
1261
- }
1262
-
1263
- .dp-menu-appear-top-enter-from, .dp-menu-appear-top-leave-to, .dp-slide-down-leave-to, .dp-slide-up-enter-from {
1264
- opacity: 0;
1265
- transform: translateY(var(--dp-transition-length))
1266
- }
1267
-
1268
- .dp-menu-appear-bottom-enter-from, .dp-menu-appear-bottom-leave-to, .dp-slide-down-enter-from, .dp-slide-up-leave-to {
1269
- opacity: 0;
1270
- transform: translateY(calc(var(--dp-transition-length) * -1))
1271
- }
1272
-
1273
- .dp--arrow-btn-nav {
1274
- transition: var(--dp-common-transition)
1275
- }
1276
-
1277
- .dp--highlighted {
1278
- background-color: var(--dp-highlight-color)
1279
- }
1280
-
1281
- /*# sourceMappingURL=main.css.map */
1282
-
@@ -1,4 +1,4 @@
1
- import dayjs from "dayjs";
1
+ import * as dayjs from "dayjs";
2
2
  import relativeTime from "dayjs/plugin/relativeTime";
3
3
  import utc from "dayjs/plugin/utc";
4
4
  import duration from "dayjs/plugin/duration";
@@ -16,7 +16,7 @@ export class TimeHelper {
16
16
  return time;
17
17
  }
18
18
  try {
19
- const newTime = dayjs(time).subtract(7, "hour").format(dateTimeFormat);
19
+ const newTime = dayjs.default(time).subtract(7, "hour").format(dateTimeFormat);
20
20
  return timeWrapper(newTime, time);
21
21
  } catch (e) {
22
22
  return time.toString();
@@ -27,57 +27,57 @@ export class TimeHelper {
27
27
  return time;
28
28
  }
29
29
  try {
30
- const newTime = dayjs(time).add(7, "hour").format(dateTimeFormat);
30
+ const newTime = dayjs.default(time).add(7, "hour").format(dateTimeFormat);
31
31
  return timeWrapper(newTime, time);
32
32
  } catch (e) {
33
33
  return time;
34
34
  }
35
35
  };
36
36
  static getCurrentDate = () => {
37
- const newTime = dayjs().format(dateFormat);
37
+ const newTime = dayjs.default().format(dateFormat);
38
38
  return timeWrapper(newTime, "");
39
39
  };
40
40
  static getDateFormTime = (time) => {
41
41
  if (!time) {
42
42
  return time;
43
43
  }
44
- const newTime = dayjs(time).format(dateFormat);
44
+ const newTime = dayjs.default(time).format(dateFormat);
45
45
  return timeWrapper(newTime, time);
46
46
  };
47
47
  static getDateFormTimeWithLocal = (time) => {
48
48
  if (!time) {
49
49
  return time;
50
50
  }
51
- const newTime = dayjs(TimeHelper.toLocal(time)).format(dateFormat);
51
+ const newTime = dayjs.default(TimeHelper.toLocal(time)).format(dateFormat);
52
52
  return timeWrapper(newTime, time);
53
53
  };
54
54
  static getISODateTimeFormTime = (time) => {
55
55
  if (!time) {
56
56
  return time;
57
57
  }
58
- const testTime = dayjs(time).format(dateTimeFormat);
58
+ const testTime = dayjs.default(time).format(dateTimeFormat);
59
59
  if (isTimeError(testTime)) {
60
60
  return time;
61
61
  }
62
- const newTime = dayjs(time).toISOString();
62
+ const newTime = dayjs.default(time).toISOString();
63
63
  return isTimeError(newTime) || !newTime ? time : newTime;
64
64
  };
65
65
  static getDateTimeFormTime = (time) => {
66
66
  if (!time) {
67
67
  return time;
68
68
  }
69
- const newTime = dayjs(time).format(dateTimeFormat);
69
+ const newTime = dayjs.default(time).format(dateTimeFormat);
70
70
  return timeWrapper(newTime, time);
71
71
  };
72
72
  static getTimeFormTime = (time) => {
73
73
  if (!time) {
74
74
  return time;
75
75
  }
76
- const newTime = dayjs(time).format(timeFormat);
76
+ const newTime = dayjs.default(time).format(timeFormat);
77
77
  return timeWrapper(newTime, time);
78
78
  };
79
79
  static getCurrentDateTime = () => {
80
- const newTime = dayjs().format(dateTimeFormat);
80
+ const newTime = dayjs.default().format(dateTimeFormat);
81
81
  return timeWrapper(newTime, "");
82
82
  };
83
83
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@finema/core",
3
- "version": "1.3.14",
3
+ "version": "1.3.16",
4
4
  "repository": "https://gitlab.finema.co/finema/ui-kit",
5
5
  "license": "MIT",
6
6
  "author": "Finema Development Team",