@dative-gpi/foundation-shared-components 1.0.78 → 1.0.79
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.
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSCol>
|
|
3
|
+
<FSRow
|
|
4
|
+
v-if="$props.showHeader"
|
|
5
|
+
:wrap="false"
|
|
6
|
+
>
|
|
7
|
+
<FSCol
|
|
8
|
+
v-for="i in 7"
|
|
9
|
+
:key="i"
|
|
10
|
+
:style="{
|
|
11
|
+
minWidth: `calc((100% - 8px * 7) / 7)`,
|
|
12
|
+
maxWidth: `calc((100% - 8px * 7) / 7)`
|
|
13
|
+
}"
|
|
14
|
+
align="center-center"
|
|
15
|
+
>
|
|
16
|
+
{{ day(i - 1) }}
|
|
17
|
+
</FSCol>
|
|
18
|
+
</FSRow>
|
|
19
|
+
<FSRow>
|
|
20
|
+
<FSCol
|
|
21
|
+
v-for="date in days"
|
|
22
|
+
:key="$props.month + $props.year + date.date.toISOString()"
|
|
23
|
+
:style="{
|
|
24
|
+
minWidth: `calc((100% - 8px * 7) / 7)`,
|
|
25
|
+
maxWidth: `calc((100% - 8px * 7) / 7)`
|
|
26
|
+
}"
|
|
27
|
+
align="center-center"
|
|
28
|
+
height="hug"
|
|
29
|
+
>
|
|
30
|
+
<slot
|
|
31
|
+
name="day"
|
|
32
|
+
v-bind="date"
|
|
33
|
+
/>
|
|
34
|
+
</FSCol>
|
|
35
|
+
</FSRow>
|
|
36
|
+
</FSCol>
|
|
37
|
+
</template>
|
|
38
|
+
|
|
39
|
+
<script lang="ts">
|
|
40
|
+
import { startOfWeek, endOfWeek, endOfMonth, isSameDay, isBefore, isAfter, isSameMonth, addDays } from "date-fns";
|
|
41
|
+
import { defineComponent, computed } from "vue";
|
|
42
|
+
|
|
43
|
+
import { useTranslations } from "@dative-gpi/bones-ui";
|
|
44
|
+
|
|
45
|
+
import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
|
|
46
|
+
|
|
47
|
+
import FSRow from "../FSRow.vue";
|
|
48
|
+
import FSCol from "../FSCol.vue";
|
|
49
|
+
|
|
50
|
+
export default defineComponent({
|
|
51
|
+
name: "FSCalendarHeader",
|
|
52
|
+
components: {
|
|
53
|
+
FSRow,
|
|
54
|
+
FSCol
|
|
55
|
+
},
|
|
56
|
+
props: {
|
|
57
|
+
year: {
|
|
58
|
+
type: Number,
|
|
59
|
+
required: true
|
|
60
|
+
},
|
|
61
|
+
month: {
|
|
62
|
+
type: Number,
|
|
63
|
+
required: true
|
|
64
|
+
},
|
|
65
|
+
showHeader: {
|
|
66
|
+
type: Boolean,
|
|
67
|
+
default: true
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
setup(props) {
|
|
71
|
+
const { $tr } = useTranslations();
|
|
72
|
+
|
|
73
|
+
const { getMachineOffset } = useAppTimeZone();
|
|
74
|
+
|
|
75
|
+
const day = (i: number) => {
|
|
76
|
+
switch(i)
|
|
77
|
+
{
|
|
78
|
+
case 0 : return $tr("ui.common.monday", "Monday");
|
|
79
|
+
case 1 : return $tr("ui.common.tuesday", "Tuesday");
|
|
80
|
+
case 2 : return $tr("ui.common.wednesday", "Wednesday");
|
|
81
|
+
case 3 : return $tr("ui.common.thursday", "Thursday");
|
|
82
|
+
case 4 : return $tr("ui.common.friday", "Friday");
|
|
83
|
+
case 5 : return $tr("ui.common.saturday", "Saturday");
|
|
84
|
+
case 6 : return $tr("ui.common.sunday", "Sunday");
|
|
85
|
+
default: return "";
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
const firstDayOfMonth = computed(() => {
|
|
90
|
+
const date = new Date(props.year, props.month - 1, 1);
|
|
91
|
+
const offset = getMachineOffset();
|
|
92
|
+
|
|
93
|
+
date.setTime(date.getTime() + offset);
|
|
94
|
+
|
|
95
|
+
return date;
|
|
96
|
+
})
|
|
97
|
+
|
|
98
|
+
const firstMonday = computed(() => {
|
|
99
|
+
const day = new Date(firstDayOfMonth.value);
|
|
100
|
+
|
|
101
|
+
const date = startOfWeek(day, { weekStartsOn: 1 });
|
|
102
|
+
|
|
103
|
+
const offset = getMachineOffset();
|
|
104
|
+
|
|
105
|
+
date.setTime(date.getTime() + offset);
|
|
106
|
+
|
|
107
|
+
return date;
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
const endDayOfMonth = computed(() => {
|
|
111
|
+
const day = new Date(firstDayOfMonth.value);
|
|
112
|
+
|
|
113
|
+
const date = endOfMonth(day);
|
|
114
|
+
|
|
115
|
+
const offset = getMachineOffset();
|
|
116
|
+
|
|
117
|
+
date.setTime(date.getTime() + offset);
|
|
118
|
+
|
|
119
|
+
return date;
|
|
120
|
+
});
|
|
121
|
+
|
|
122
|
+
const lastSunday = computed(() => {
|
|
123
|
+
const day = new Date(endDayOfMonth.value);
|
|
124
|
+
|
|
125
|
+
const date = endOfWeek(day, { weekStartsOn: 1 });
|
|
126
|
+
|
|
127
|
+
const offset = getMachineOffset();
|
|
128
|
+
|
|
129
|
+
date.setTime(date.getTime() + offset);
|
|
130
|
+
|
|
131
|
+
return date;
|
|
132
|
+
});
|
|
133
|
+
|
|
134
|
+
const days = computed(() => {
|
|
135
|
+
const result = [];
|
|
136
|
+
|
|
137
|
+
let currentDay = new Date(firstMonday.value);
|
|
138
|
+
const today = new Date();
|
|
139
|
+
|
|
140
|
+
while (currentDay <= lastSunday.value) {
|
|
141
|
+
result.push({
|
|
142
|
+
date: new Date(currentDay),
|
|
143
|
+
isToday: isSameDay(currentDay, today),
|
|
144
|
+
isPast: isBefore(currentDay, today) && !isSameDay(currentDay, today),
|
|
145
|
+
isFutur: isAfter(currentDay, today) && !isSameDay(currentDay, today),
|
|
146
|
+
isPreviousMonth: isBefore(currentDay, firstDayOfMonth.value),
|
|
147
|
+
isNextMonth: isAfter(currentDay, endDayOfMonth.value),
|
|
148
|
+
isCurrentMonth: isSameMonth(currentDay, firstDayOfMonth.value)
|
|
149
|
+
});
|
|
150
|
+
|
|
151
|
+
currentDay = addDays(currentDay, 1);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
return result;
|
|
155
|
+
});
|
|
156
|
+
|
|
157
|
+
return {
|
|
158
|
+
day,
|
|
159
|
+
days
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
}
|
|
163
|
+
});
|
|
164
|
+
</script>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSRow>
|
|
3
|
+
<FSSimpleMonthSelector
|
|
4
|
+
width="hug"
|
|
5
|
+
:year="$props.year"
|
|
6
|
+
:month="$props.month"
|
|
7
|
+
@update:year="$emit('update:year', $event)"
|
|
8
|
+
@update:month="$emit('update:month', $event)"
|
|
9
|
+
@update="$emit('update', $event)"
|
|
10
|
+
/>
|
|
11
|
+
<FSButton
|
|
12
|
+
:label="$tr('ui.common.today', 'Today')"
|
|
13
|
+
icon="mdi-calendar-today"
|
|
14
|
+
@click="onToday"
|
|
15
|
+
/>
|
|
16
|
+
</FSRow>
|
|
17
|
+
</template>
|
|
18
|
+
|
|
19
|
+
<script lang="ts">
|
|
20
|
+
import { defineComponent } from "vue";
|
|
21
|
+
|
|
22
|
+
import FSRow from "../FSRow.vue";
|
|
23
|
+
import FSButton from "../FSButton.vue";
|
|
24
|
+
|
|
25
|
+
import FSSimpleMonthSelector from "./FSSimpleMonthSelector.vue";
|
|
26
|
+
|
|
27
|
+
export default defineComponent({
|
|
28
|
+
name: "FSCalendarHeader",
|
|
29
|
+
components: {
|
|
30
|
+
FSRow,
|
|
31
|
+
FSButton,
|
|
32
|
+
FSSimpleMonthSelector
|
|
33
|
+
},
|
|
34
|
+
props: {
|
|
35
|
+
year: {
|
|
36
|
+
type: Number,
|
|
37
|
+
required: true
|
|
38
|
+
},
|
|
39
|
+
month: {
|
|
40
|
+
type: Number,
|
|
41
|
+
required: true
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
setup(_props, { emit }) {
|
|
45
|
+
const onToday = () => {
|
|
46
|
+
const now = new Date();
|
|
47
|
+
emit("update:year", now.getFullYear());
|
|
48
|
+
emit("update:month", now.getMonth() + 1);
|
|
49
|
+
emit("update", {
|
|
50
|
+
year: now.getFullYear(),
|
|
51
|
+
month: now.getMonth() + 1
|
|
52
|
+
});
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
return {
|
|
56
|
+
onToday
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
</script>
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSRow
|
|
3
|
+
align="center-center"
|
|
4
|
+
>
|
|
5
|
+
<FSButtonPreviousIcon
|
|
6
|
+
@click="onPrevious"
|
|
7
|
+
/>
|
|
8
|
+
<FSRow>
|
|
9
|
+
<!-- TODO : mettre un VMenu sur le FSColor pour pouvoir changer d'année plus vite -->
|
|
10
|
+
<FSColor
|
|
11
|
+
:border="false"
|
|
12
|
+
padding="0px 30px"
|
|
13
|
+
:color="$props.color"
|
|
14
|
+
width="100%"
|
|
15
|
+
:height="[40, 36]"
|
|
16
|
+
style="min-width: 210px;"
|
|
17
|
+
>
|
|
18
|
+
<FSRow
|
|
19
|
+
width="100%"
|
|
20
|
+
height="100%"
|
|
21
|
+
align="center-center"
|
|
22
|
+
>
|
|
23
|
+
<FSSpan
|
|
24
|
+
font="text-h3"
|
|
25
|
+
>
|
|
26
|
+
{{ monthToString($props.month) }}
|
|
27
|
+
</FSSpan>
|
|
28
|
+
<FSSpan
|
|
29
|
+
font="text-h3"
|
|
30
|
+
>
|
|
31
|
+
{{ $props.year }}
|
|
32
|
+
</FSSpan>
|
|
33
|
+
</FSRow>
|
|
34
|
+
</FSColor>
|
|
35
|
+
</FSRow>
|
|
36
|
+
<FSButtonNextIcon
|
|
37
|
+
@click="onNext"
|
|
38
|
+
/>
|
|
39
|
+
</FSRow>
|
|
40
|
+
</template>
|
|
41
|
+
|
|
42
|
+
<script lang="ts">
|
|
43
|
+
import { defineComponent } from "vue";
|
|
44
|
+
|
|
45
|
+
import { useTranslations } from "@dative-gpi/bones-ui";
|
|
46
|
+
import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
47
|
+
|
|
48
|
+
import FSRow from "../FSRow.vue";
|
|
49
|
+
import FSSpan from "../FSSpan.vue";
|
|
50
|
+
import FSColor from "../FSColor.vue";
|
|
51
|
+
|
|
52
|
+
import FSButtonNextIcon from "../buttons/FSButtonNextIcon.vue";
|
|
53
|
+
import FSButtonPreviousIcon from "../buttons/FSButtonPreviousIcon.vue";
|
|
54
|
+
|
|
55
|
+
export default defineComponent({
|
|
56
|
+
name: "FSMonthSelector",
|
|
57
|
+
components: {
|
|
58
|
+
FSRow,
|
|
59
|
+
FSSpan,
|
|
60
|
+
FSColor,
|
|
61
|
+
FSButtonNextIcon,
|
|
62
|
+
FSButtonPreviousIcon
|
|
63
|
+
},
|
|
64
|
+
props: {
|
|
65
|
+
color: {
|
|
66
|
+
type: String,
|
|
67
|
+
required: false,
|
|
68
|
+
default: ColorEnum.Primary
|
|
69
|
+
},
|
|
70
|
+
month: {
|
|
71
|
+
type: Number,
|
|
72
|
+
required: true
|
|
73
|
+
},
|
|
74
|
+
year: {
|
|
75
|
+
type: Number,
|
|
76
|
+
required: true
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
emits: ["update:month", "update:year", "update"],
|
|
80
|
+
setup(props, { emit }) {
|
|
81
|
+
const { $tr } = useTranslations();
|
|
82
|
+
|
|
83
|
+
const monthToString = (month: number) => {
|
|
84
|
+
switch(month) {
|
|
85
|
+
case 1:
|
|
86
|
+
return $tr("ui.common.january", "January");
|
|
87
|
+
case 2:
|
|
88
|
+
return $tr("ui.common.february", "February");
|
|
89
|
+
case 3:
|
|
90
|
+
return $tr("ui.common.march", "March");
|
|
91
|
+
case 4:
|
|
92
|
+
return $tr("ui.common.april", "April");
|
|
93
|
+
case 5:
|
|
94
|
+
return $tr("ui.common.may", "May");
|
|
95
|
+
case 6:
|
|
96
|
+
return $tr("ui.common.june", "June");
|
|
97
|
+
case 7:
|
|
98
|
+
return $tr("ui.common.july", "July");
|
|
99
|
+
case 8:
|
|
100
|
+
return $tr("ui.common.august", "August");
|
|
101
|
+
case 9:
|
|
102
|
+
return $tr("ui.common.september", "September");
|
|
103
|
+
case 10:
|
|
104
|
+
return $tr("ui.common.october", "October");
|
|
105
|
+
case 11:
|
|
106
|
+
return $tr("ui.common.november", "November");
|
|
107
|
+
case 12:
|
|
108
|
+
return $tr("ui.common.december", "December");
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
const onNext = () => {
|
|
113
|
+
emit("update:month", props.month === 12 ? 1 : props.month + 1);
|
|
114
|
+
emit("update:year", props.month === 12 ? props.year + 1 : props.year);
|
|
115
|
+
emit("update", {
|
|
116
|
+
month: props.month === 12 ? 1 : props.month + 1,
|
|
117
|
+
year: props.month === 12 ? props.year + 1 : props.year
|
|
118
|
+
})
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
const onPrevious = () => {
|
|
122
|
+
emit("update:month", props.month === 1 ? 12 : props.month - 1);
|
|
123
|
+
emit("update:year", props.month === 1 ? props.year - 1 : props.year);
|
|
124
|
+
emit("update", {
|
|
125
|
+
month: props.month === 1 ? 12 : props.month - 1,
|
|
126
|
+
year: props.month === 1 ? props.year - 1 : props.year
|
|
127
|
+
})
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
return {
|
|
131
|
+
monthToString,
|
|
132
|
+
onNext,
|
|
133
|
+
onPrevious
|
|
134
|
+
};
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
</script>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dative-gpi/foundation-shared-components",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.79",
|
|
5
5
|
"description": "",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"author": "",
|
|
11
11
|
"license": "ISC",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@dative-gpi/foundation-shared-domain": "1.0.
|
|
14
|
-
"@dative-gpi/foundation-shared-services": "1.0.
|
|
13
|
+
"@dative-gpi/foundation-shared-domain": "1.0.79",
|
|
14
|
+
"@dative-gpi/foundation-shared-services": "1.0.79"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"@dative-gpi/bones-ui": "^1.0.0",
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"sass": "1.71.1",
|
|
36
36
|
"sass-loader": "13.3.2"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "2886eb5a54f6c71aab410a871de2fcbabd394e92"
|
|
39
39
|
}
|