@dataloop-ai/components 0.20.175-ds-v3.2 → 0.20.175-ds-v3.4
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/DlDateTime/DlDateTimeRange/DateTimeRangeContent.vue +177 -0
- package/src/components/compound/DlDateTime/DlDateTimeRange/DlDateTimeRange.vue +88 -99
- package/src/components/compound/DlDateTime/DlDateTimeRange/types.ts +5 -0
- package/src/components/compound/DlTable/DlTable.vue +9 -2
- package/src/demos/DlDateTimeRangeDemo.vue +20 -0
package/package.json
CHANGED
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="dl-date-time-range--card">
|
|
3
|
+
<div v-if="mode === 'multi'" class="dl-date-time-range--card_sidebar">
|
|
4
|
+
<card-sidebar
|
|
5
|
+
v-if="typeState === 'day'"
|
|
6
|
+
:options="sidebarDayOptions"
|
|
7
|
+
:current-option="currentSidebarOption"
|
|
8
|
+
@click="handleDayTypeOptionClick"
|
|
9
|
+
/>
|
|
10
|
+
<card-sidebar
|
|
11
|
+
v-else
|
|
12
|
+
:options="sidebarMonthOptions"
|
|
13
|
+
:current-option="currentSidebarOption"
|
|
14
|
+
@click="handleMonthTypeOptionClick"
|
|
15
|
+
/>
|
|
16
|
+
</div>
|
|
17
|
+
<div
|
|
18
|
+
class="dl-date-time-range--card_content"
|
|
19
|
+
:style="cardContentStyles"
|
|
20
|
+
>
|
|
21
|
+
<dl-date-picker
|
|
22
|
+
:model-value="dateInterval"
|
|
23
|
+
:type="typeState"
|
|
24
|
+
:available-range="availableRange"
|
|
25
|
+
:disabled="isInputDisabled"
|
|
26
|
+
:normalize-calendars="normalizeCalendars"
|
|
27
|
+
:active-date-from="activeDateFrom"
|
|
28
|
+
:active-date-to="activeDateTo"
|
|
29
|
+
@update:model-value="updateDateIntervalWithAutoClose"
|
|
30
|
+
@update:from-to-date="updateFromToDate"
|
|
31
|
+
/>
|
|
32
|
+
<dl-time-picker
|
|
33
|
+
v-if="showTime && typeState === 'day'"
|
|
34
|
+
:disabled="isInputDisabled"
|
|
35
|
+
:model-value="dateInterval"
|
|
36
|
+
@update:model-value="updateDateInterval"
|
|
37
|
+
/>
|
|
38
|
+
|
|
39
|
+
<dl-button
|
|
40
|
+
v-if="!hideClearButton"
|
|
41
|
+
size="s"
|
|
42
|
+
outlined
|
|
43
|
+
class="dl-date-time-range--button"
|
|
44
|
+
@click="handleClear"
|
|
45
|
+
>
|
|
46
|
+
<span style="text-transform: capitalize"> Clear </span>
|
|
47
|
+
</dl-button>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</template>
|
|
51
|
+
|
|
52
|
+
<script lang="ts">
|
|
53
|
+
import { defineComponent, PropType } from 'vue-demi'
|
|
54
|
+
import { DlTimePicker } from '../DlTimePicker'
|
|
55
|
+
import { DateInterval } from '../types'
|
|
56
|
+
import CardSidebar from './CardSidebar.vue'
|
|
57
|
+
import { DayTypeOption, MonthTypeOption } from './types'
|
|
58
|
+
import DlDatePicker from '../DlDatePicker/DlDatePicker.vue'
|
|
59
|
+
import { CalendarDate } from '../DlDatePicker/models/CalendarDate'
|
|
60
|
+
import { DlButton } from '../../../basic'
|
|
61
|
+
|
|
62
|
+
export default defineComponent({
|
|
63
|
+
components: {
|
|
64
|
+
CardSidebar,
|
|
65
|
+
DlDatePicker,
|
|
66
|
+
DlTimePicker,
|
|
67
|
+
DlButton
|
|
68
|
+
},
|
|
69
|
+
props: {
|
|
70
|
+
mode: {
|
|
71
|
+
type: String as PropType<'single' | 'multi'>,
|
|
72
|
+
required: true
|
|
73
|
+
},
|
|
74
|
+
typeState: {
|
|
75
|
+
type: String as PropType<'day' | 'month'>,
|
|
76
|
+
required: true
|
|
77
|
+
},
|
|
78
|
+
sidebarDayOptions: {
|
|
79
|
+
type: Array as PropType<DayTypeOption[]>,
|
|
80
|
+
required: true
|
|
81
|
+
},
|
|
82
|
+
sidebarMonthOptions: {
|
|
83
|
+
type: Array as PropType<MonthTypeOption[]>,
|
|
84
|
+
required: true
|
|
85
|
+
},
|
|
86
|
+
currentSidebarOption: {
|
|
87
|
+
type: String,
|
|
88
|
+
required: true
|
|
89
|
+
},
|
|
90
|
+
dateInterval: {
|
|
91
|
+
type: Object as PropType<DateInterval | null>,
|
|
92
|
+
default: null
|
|
93
|
+
},
|
|
94
|
+
availableRange: {
|
|
95
|
+
type: Object as PropType<Partial<DateInterval> | null>,
|
|
96
|
+
default: null
|
|
97
|
+
},
|
|
98
|
+
isInputDisabled: {
|
|
99
|
+
type: Boolean,
|
|
100
|
+
default: false
|
|
101
|
+
},
|
|
102
|
+
normalizeCalendars: {
|
|
103
|
+
type: Boolean,
|
|
104
|
+
default: false
|
|
105
|
+
},
|
|
106
|
+
activeDateFrom: {
|
|
107
|
+
type: Object as PropType<CalendarDate | null>,
|
|
108
|
+
default: null
|
|
109
|
+
},
|
|
110
|
+
activeDateTo: {
|
|
111
|
+
type: Object as PropType<CalendarDate | null>,
|
|
112
|
+
default: null
|
|
113
|
+
},
|
|
114
|
+
showTime: {
|
|
115
|
+
type: Boolean,
|
|
116
|
+
default: false
|
|
117
|
+
},
|
|
118
|
+
cardContentStyles: {
|
|
119
|
+
type: Object as PropType<Record<string, any>>,
|
|
120
|
+
default: () => ({})
|
|
121
|
+
},
|
|
122
|
+
hideClearButton: {
|
|
123
|
+
type: Boolean,
|
|
124
|
+
default: false
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
emits: [
|
|
128
|
+
'day-type-option-click',
|
|
129
|
+
'month-type-option-click',
|
|
130
|
+
'update-date-interval',
|
|
131
|
+
'update-date-interval-with-auto-close',
|
|
132
|
+
'update-from-to-date',
|
|
133
|
+
'clear'
|
|
134
|
+
],
|
|
135
|
+
methods: {
|
|
136
|
+
handleDayTypeOptionClick(option: DayTypeOption) {
|
|
137
|
+
this.$emit('day-type-option-click', option)
|
|
138
|
+
},
|
|
139
|
+
handleMonthTypeOptionClick(option: MonthTypeOption) {
|
|
140
|
+
this.$emit('month-type-option-click', option)
|
|
141
|
+
},
|
|
142
|
+
updateDateInterval(value: DateInterval | null) {
|
|
143
|
+
this.$emit('update-date-interval', value)
|
|
144
|
+
},
|
|
145
|
+
updateDateIntervalWithAutoClose(value: DateInterval) {
|
|
146
|
+
this.$emit('update-date-interval-with-auto-close', value)
|
|
147
|
+
},
|
|
148
|
+
updateFromToDate(value?: { from: CalendarDate; to: CalendarDate }) {
|
|
149
|
+
this.$emit('update-from-to-date', value)
|
|
150
|
+
},
|
|
151
|
+
handleClear() {
|
|
152
|
+
this.$emit('clear')
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
})
|
|
156
|
+
</script>
|
|
157
|
+
|
|
158
|
+
<style lang="scss" scoped>
|
|
159
|
+
.dl-date-time-range--card {
|
|
160
|
+
background-color: var(--dl-color-bg);
|
|
161
|
+
z-index: 1;
|
|
162
|
+
display: flex;
|
|
163
|
+
border-radius: 2px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.dl-date-time-range--card_content {
|
|
167
|
+
width: var(--card-content-width);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.dl-date-time-range--button {
|
|
171
|
+
display: flex;
|
|
172
|
+
margin-left: auto;
|
|
173
|
+
width: fit-content;
|
|
174
|
+
margin-right: 16px;
|
|
175
|
+
margin-bottom: 16px;
|
|
176
|
+
}
|
|
177
|
+
</style>
|
|
@@ -1,104 +1,71 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :id="uuid" class="dl-date-time-range">
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
:width="width"
|
|
8
|
-
>
|
|
9
|
-
<dl-menu
|
|
10
|
-
ref="dateTimeRangeMenu"
|
|
11
|
-
anchor="bottom middle"
|
|
12
|
-
self="top middle"
|
|
13
|
-
:offset="[0, 5]"
|
|
3
|
+
<template v-if="isInputMode">
|
|
4
|
+
<date-input
|
|
5
|
+
:text="dateInputText"
|
|
6
|
+
:input-style="dateInputStyle"
|
|
14
7
|
:disabled="disabled"
|
|
8
|
+
:width="width"
|
|
15
9
|
>
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
/>
|
|
51
|
-
<dl-time-picker
|
|
52
|
-
v-if="showTime && typeState === 'day'"
|
|
53
|
-
:disabled="isInputDisabled"
|
|
54
|
-
:model-value="dateInterval"
|
|
55
|
-
@update:model-value="updateDateInterval"
|
|
56
|
-
/>
|
|
57
|
-
|
|
58
|
-
<dl-button
|
|
59
|
-
size="s"
|
|
60
|
-
outlined
|
|
61
|
-
class="dl-date-time-range--button"
|
|
62
|
-
@click="handleClearAction"
|
|
63
|
-
>
|
|
64
|
-
<span style="text-transform: capitalize">
|
|
65
|
-
Clear
|
|
66
|
-
</span>
|
|
67
|
-
</dl-button>
|
|
68
|
-
</div>
|
|
69
|
-
</div>
|
|
70
|
-
</dl-menu>
|
|
71
|
-
</date-input>
|
|
10
|
+
<dl-menu
|
|
11
|
+
ref="dateTimeRangeMenu"
|
|
12
|
+
anchor="bottom middle"
|
|
13
|
+
self="top middle"
|
|
14
|
+
:offset="[0, 5]"
|
|
15
|
+
:disabled="disabled"
|
|
16
|
+
>
|
|
17
|
+
<date-time-range-content
|
|
18
|
+
v-bind="dateTimeRangeContentProps"
|
|
19
|
+
@day-type-option-click="handleDayTypeOptionClick"
|
|
20
|
+
@month-type-option-click="handleMonthTypeOptionClick"
|
|
21
|
+
@update-date-interval="updateDateInterval"
|
|
22
|
+
@update-date-interval-with-auto-close="
|
|
23
|
+
updateDateIntervalWithAutoClose
|
|
24
|
+
"
|
|
25
|
+
@update-from-to-date="updateFromToDate"
|
|
26
|
+
@clear="handleClearAction"
|
|
27
|
+
/>
|
|
28
|
+
</dl-menu>
|
|
29
|
+
</date-input>
|
|
30
|
+
</template>
|
|
31
|
+
<template v-else>
|
|
32
|
+
<date-time-range-content
|
|
33
|
+
v-bind="dateTimeRangeContentProps"
|
|
34
|
+
@day-type-option-click="handleDayTypeOptionClick"
|
|
35
|
+
@month-type-option-click="handleMonthTypeOptionClick"
|
|
36
|
+
@update-date-interval="updateDateInterval"
|
|
37
|
+
@update-date-interval-with-auto-close="
|
|
38
|
+
updateDateIntervalWithAutoClose
|
|
39
|
+
"
|
|
40
|
+
@update-from-to-date="updateFromToDate"
|
|
41
|
+
@clear="handleClearAction"
|
|
42
|
+
/>
|
|
43
|
+
</template>
|
|
72
44
|
</div>
|
|
73
45
|
</template>
|
|
74
46
|
<script lang="ts">
|
|
75
|
-
import { DlTimePicker } from '../DlTimePicker'
|
|
76
47
|
import { DateInterval } from '../types'
|
|
77
|
-
import CardSidebar from './CardSidebar.vue'
|
|
78
48
|
import {
|
|
79
49
|
DayTypeOption,
|
|
80
50
|
DAY_SIDEBAR_OPTION,
|
|
81
51
|
MonthTypeOption,
|
|
82
|
-
MONTH_SIDEBAR_OPTION
|
|
52
|
+
MONTH_SIDEBAR_OPTION,
|
|
53
|
+
DATETIME_RANGE_VIEW_MODE
|
|
83
54
|
} from './types'
|
|
84
55
|
import { CustomDate } from '../DlDatePicker/models/CustomDate'
|
|
85
|
-
import DlDatePicker from '../DlDatePicker/DlDatePicker.vue'
|
|
86
56
|
import { CalendarDate } from '../DlDatePicker/models/CalendarDate'
|
|
87
57
|
import DateInput from './DateInput.vue'
|
|
58
|
+
import DateTimeRangeContent from './DateTimeRangeContent.vue'
|
|
88
59
|
import { DlMenu } from '../../../essential'
|
|
89
|
-
import { DlButton } from '../../../basic'
|
|
90
60
|
import { defineComponent, PropType } from 'vue-demi'
|
|
91
61
|
import { isInRange } from '../DlDatePicker/utils'
|
|
92
62
|
import { v4 } from 'uuid'
|
|
93
63
|
|
|
94
64
|
export default defineComponent({
|
|
95
65
|
components: {
|
|
96
|
-
CardSidebar,
|
|
97
|
-
DlDatePicker,
|
|
98
|
-
DlTimePicker,
|
|
99
66
|
DateInput,
|
|
100
|
-
|
|
101
|
-
|
|
67
|
+
DateTimeRangeContent,
|
|
68
|
+
DlMenu
|
|
102
69
|
},
|
|
103
70
|
model: {
|
|
104
71
|
prop: 'modelValue',
|
|
@@ -152,6 +119,14 @@ export default defineComponent({
|
|
|
152
119
|
shouldClearSelectFirstOption: {
|
|
153
120
|
type: Boolean,
|
|
154
121
|
default: false
|
|
122
|
+
},
|
|
123
|
+
viewMode: {
|
|
124
|
+
type: String as PropType<DATETIME_RANGE_VIEW_MODE>,
|
|
125
|
+
default: DATETIME_RANGE_VIEW_MODE.input
|
|
126
|
+
},
|
|
127
|
+
hideClearButton: {
|
|
128
|
+
type: Boolean,
|
|
129
|
+
default: false
|
|
155
130
|
}
|
|
156
131
|
},
|
|
157
132
|
emits: ['update:model-value', 'set-type', 'change'],
|
|
@@ -437,6 +412,27 @@ export default defineComponent({
|
|
|
437
412
|
return {
|
|
438
413
|
'--card-content-width': this.datePickerCardWidth
|
|
439
414
|
}
|
|
415
|
+
},
|
|
416
|
+
isInputMode(): boolean {
|
|
417
|
+
return this.viewMode === DATETIME_RANGE_VIEW_MODE.input
|
|
418
|
+
},
|
|
419
|
+
dateTimeRangeContentProps() {
|
|
420
|
+
return {
|
|
421
|
+
mode: this.mode,
|
|
422
|
+
typeState: this.typeState,
|
|
423
|
+
sidebarDayOptions: this.sidebarDayOptions,
|
|
424
|
+
sidebarMonthOptions: this.sidebarMonthOptions,
|
|
425
|
+
currentSidebarOption: this.currentSidebarOption,
|
|
426
|
+
dateInterval: this.dateInterval,
|
|
427
|
+
availableRange: this.availableRange,
|
|
428
|
+
isInputDisabled: this.isInputDisabled,
|
|
429
|
+
normalizeCalendars: this.normalizeCalendars,
|
|
430
|
+
activeDateFrom: this.activeDateFrom,
|
|
431
|
+
activeDateTo: this.activeDateTo,
|
|
432
|
+
showTime: this.showTime,
|
|
433
|
+
cardContentStyles: this.cardContentStyles,
|
|
434
|
+
hideClearButton: this.hideClearButton
|
|
435
|
+
}
|
|
440
436
|
}
|
|
441
437
|
},
|
|
442
438
|
watch: {
|
|
@@ -524,6 +520,14 @@ export default defineComponent({
|
|
|
524
520
|
from: value.from,
|
|
525
521
|
to: new Date(value.to)
|
|
526
522
|
}
|
|
523
|
+
// When in multi mode, update sidebar option to custom if user manually selects date
|
|
524
|
+
if (this.mode === 'multi') {
|
|
525
|
+
this.currentSidebarOption =
|
|
526
|
+
this.typeState === 'day'
|
|
527
|
+
? DAY_SIDEBAR_OPTION.custom
|
|
528
|
+
: MONTH_SIDEBAR_OPTION.custom
|
|
529
|
+
this.isInputDisabled = false
|
|
530
|
+
}
|
|
527
531
|
}
|
|
528
532
|
this.$emit('update:model-value', value)
|
|
529
533
|
this.$emit('change', value)
|
|
@@ -535,13 +539,18 @@ export default defineComponent({
|
|
|
535
539
|
updateDateIntervalWithAutoClose(value: DateInterval) {
|
|
536
540
|
this.updateDateInterval(value)
|
|
537
541
|
|
|
538
|
-
if (
|
|
542
|
+
if (
|
|
543
|
+
this.autoClose &&
|
|
544
|
+
this.viewMode === DATETIME_RANGE_VIEW_MODE.input
|
|
545
|
+
) {
|
|
539
546
|
const dateTimeRangeMenu = this.$refs[
|
|
540
547
|
'dateTimeRangeMenu'
|
|
541
548
|
] as unknown as {
|
|
542
549
|
hide: () => void
|
|
543
550
|
}
|
|
544
|
-
dateTimeRangeMenu
|
|
551
|
+
if (dateTimeRangeMenu) {
|
|
552
|
+
dateTimeRangeMenu.hide()
|
|
553
|
+
}
|
|
545
554
|
}
|
|
546
555
|
},
|
|
547
556
|
handleDayTypeOptionClick(option: DayTypeOption) {
|
|
@@ -583,25 +592,5 @@ export default defineComponent({
|
|
|
583
592
|
.dl-date-time-range {
|
|
584
593
|
display: flex;
|
|
585
594
|
justify-content: center;
|
|
586
|
-
|
|
587
|
-
&--card {
|
|
588
|
-
background-color: var(--dl-color-bg);
|
|
589
|
-
z-index: 1;
|
|
590
|
-
display: flex;
|
|
591
|
-
border-radius: 2px;
|
|
592
|
-
border-radius: 2px;
|
|
593
|
-
}
|
|
594
|
-
|
|
595
|
-
&--card_content {
|
|
596
|
-
width: var(--card-content-width);
|
|
597
|
-
}
|
|
598
|
-
|
|
599
|
-
&--button {
|
|
600
|
-
display: flex;
|
|
601
|
-
margin-left: auto;
|
|
602
|
-
width: fit-content;
|
|
603
|
-
margin-right: 16px;
|
|
604
|
-
margin-bottom: 16px;
|
|
605
|
-
}
|
|
606
595
|
}
|
|
607
596
|
</style>
|
|
@@ -236,7 +236,7 @@
|
|
|
236
236
|
class="dl-table__progress"
|
|
237
237
|
>
|
|
238
238
|
<th
|
|
239
|
-
:colspan="
|
|
239
|
+
:colspan="colspanForProgressBar"
|
|
240
240
|
class="relative-position"
|
|
241
241
|
>
|
|
242
242
|
<dl-progress-bar indeterminate :color="color" />
|
|
@@ -635,7 +635,7 @@
|
|
|
635
635
|
class="dl-table__progress"
|
|
636
636
|
>
|
|
637
637
|
<th
|
|
638
|
-
:colspan="
|
|
638
|
+
:colspan="colspanForProgressBar"
|
|
639
639
|
class="relative-position"
|
|
640
640
|
>
|
|
641
641
|
<dl-progress-bar indeterminate :color="color" />
|
|
@@ -1751,6 +1751,12 @@ export default defineComponent({
|
|
|
1751
1751
|
)
|
|
1752
1752
|
})
|
|
1753
1753
|
|
|
1754
|
+
const colspanForProgressBar = computed(() => {
|
|
1755
|
+
return (
|
|
1756
|
+
colspanWithExpandableRow.value - (hasDraggableRows.value ? 0 : 1)
|
|
1757
|
+
)
|
|
1758
|
+
})
|
|
1759
|
+
|
|
1754
1760
|
const { columnToSort, computedSortMethod, sort } = useTableSort(
|
|
1755
1761
|
props as unknown as DlTableProps,
|
|
1756
1762
|
computedPagination,
|
|
@@ -2139,6 +2145,7 @@ export default defineComponent({
|
|
|
2139
2145
|
computedColspan,
|
|
2140
2146
|
colspanWithActionsRow,
|
|
2141
2147
|
colspanWithExpandableRow,
|
|
2148
|
+
colspanForProgressBar,
|
|
2142
2149
|
virtualScrollClasses,
|
|
2143
2150
|
sortableOptions,
|
|
2144
2151
|
getRowKey,
|
|
@@ -176,6 +176,26 @@
|
|
|
176
176
|
@change="handleModelValueUpdate"
|
|
177
177
|
/>
|
|
178
178
|
</div>
|
|
179
|
+
<div style="width: 500px; margin-top: 30px">
|
|
180
|
+
<div style="margin-bottom: 10px; font-weight: bold">
|
|
181
|
+
Inline Mode
|
|
182
|
+
</div>
|
|
183
|
+
<dl-date-time-range
|
|
184
|
+
v-model="date"
|
|
185
|
+
:type="type"
|
|
186
|
+
width="100%"
|
|
187
|
+
:available-range="range ? availableRange : null"
|
|
188
|
+
:mode="mode"
|
|
189
|
+
:show-time="showTime"
|
|
190
|
+
:auto-close="autoClose"
|
|
191
|
+
:including-current-month="includesCurrentMonthEnd"
|
|
192
|
+
:should-clear-select-first-option="shouldClearSelectFirstOption"
|
|
193
|
+
:disabled-type="type === 'day' ? 'month' : 'day'"
|
|
194
|
+
view-mode="inline"
|
|
195
|
+
@set-type="handleSetType"
|
|
196
|
+
@change="handleModelValueUpdate"
|
|
197
|
+
/>
|
|
198
|
+
</div>
|
|
179
199
|
</div>
|
|
180
200
|
</template>
|
|
181
201
|
<script lang="ts">
|