@dative-gpi/foundation-shared-components 1.0.78 → 1.0.80
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/components/calendar/FSSimpleCalendar.vue +164 -0
- package/components/calendar/FSSimpleCalendarHeader.vue +60 -0
- package/components/calendar/FSSimpleMonthSelector.vue +137 -0
- package/components/lists/FSDataTableUI.vue +2 -2
- package/components/views/FSSimpleView.vue +1 -1
- package/package.json +4 -4
|
@@ -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>
|
|
@@ -832,7 +832,7 @@ export default defineComponent({
|
|
|
832
832
|
mode: {
|
|
833
833
|
type: String as PropType<"table" | "iterator">,
|
|
834
834
|
required: false,
|
|
835
|
-
default: "
|
|
835
|
+
default: "table"
|
|
836
836
|
},
|
|
837
837
|
disableTable: {
|
|
838
838
|
type: Boolean,
|
|
@@ -894,7 +894,7 @@ export default defineComponent({
|
|
|
894
894
|
const innerSearch: Ref<string | null> = ref(null);
|
|
895
895
|
const innerRowsPerPage = ref(props.rowsPerPage);
|
|
896
896
|
const innerSortBy = ref(props.sortBy);
|
|
897
|
-
const innerMode = ref(props.mode);
|
|
897
|
+
const innerMode = ref(props.disableTable ? "iterator" : props.disableIterator ? "table" : props.mode);
|
|
898
898
|
const innerPage = ref(props.page);
|
|
899
899
|
const showFilters = ref(false);
|
|
900
900
|
const resetable = ref(false);
|
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.80",
|
|
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.80",
|
|
14
|
+
"@dative-gpi/foundation-shared-services": "1.0.80"
|
|
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": "4a15362451742764c98999b9eace312e162cd193"
|
|
39
39
|
}
|