Plus de Bootstrap-Vue qui était trop buggé (270ed768) · Commits · lib / unicaen / vue

README.md

+0 −7

Original line number	Diff line number	Diff line
		@@ -41,13 +41,6 @@ statiques hautement optimisées pour la production.

		Vite est extensible via son API de plugin et son API JavaScript avec un support de typage complet.

		### [BootstrapVue](https://bootstrap-vue.org/)

		Version Next (l'officielle n'est pas encore compatible Vue3/BS5)

		Avec BootstrapVue, vous pouvez construire des projets web réactifs, axés sur les mobiles et accessibles ARIA
		en utilisant des composants Vue.js pour générer du HTML compatible Bootstrap

		### [Axios](https://axios-http.com/)

		Version 1

components/UCalendar.vue

0 → 100644

+236 −0

Original line number	Diff line number	Diff line
		<template>
		<div class="calendar">
		<div class="recherche">
		<div class="recherche btn-group">
		<button class="btn btn-light" id="prevMois" @click="prevMois" title="Mois précédant">
		<u-icon name="chevron-left"/>
		</button>

		<select class="form-select btn btn-light" id="otherMois" v-model="mois">
		<option v-for="m in listeMois()" :value="m.id">{{ m.libelle }}</option>
		</select>

		<select class="form-select btn btn-light" id="otherAnnee" v-model="annee">
		<option v-for="a in listeAnnees()" :value="a">{{ a }}</option>
		</select>

		<button class="btn btn-light" id="nextMois" @click="nextMois" title="Mois suivant">
		<u-icon name="chevron-right"/>
		</button>
		</div>
		</div>

		<table class="table table-bordered table-hover table-sm">
		<tr v-for="jour in listeJours" :data-jour="jour">
		<th class="nom-jour">
		{{ nomJour(jour) }}
		</th>
		<th class="numero-jour">
		<div class="num-jour badge bg-secondary rounded-circle">{{ jour < 10 ? '0' + jour.toString() : jour }}</div>
		</th>
		<td>
		<div class="event" :style="'border-color:'+event.color+';background-color:'+event.bgcolor" v-for="(event, index) in eventsByJour(jour)" :key="index">
		<component :is="event.component" :event="event"></component>
		</div>

		<div v-if="canAddEvent">
		<button @click="addEvent" :data-jour="jour" class="btn btn-light btn-sm">
		<u-icon name="plus"/>
		Nouvel événement
		</button>
		</div>
		</td>
		</tr>
		</table>
		</div>
		</template>

		<script>

		export default {
		name: 'UCalendar',
		props: {
		date: {type: Date, required: true},
		events: {type: Array, required: true},
		canAddEvent: {type: Boolean, required: true, default: true},
		},
		data()
		{
		const dateObj = new Date(this.date);

		return {
		mois: dateObj.getMonth() + 1,
		annee: dateObj.getFullYear(),
		};
		},
		computed: {
		listeJours()
		{
		const dateObj = new Date(this.date);

		dateObj.setDate(1);
		dateObj.setMonth(dateObj.getMonth() + 1);
		dateObj.setDate(dateObj.getDate() - 1);

		let nombreJours = dateObj.getDate();

		return Array.from({length: nombreJours}, (v, k) => k + 1)
		},
		},
		watch: {
		date: function (newVal, oldVal) { // watch it
		const dateObj = new Date(this.date);

		this.mois = dateObj.getMonth() + 1;
		this.annee = dateObj.getFullYear();
		},
		mois: function (newVal, oldVal) { // watch it
		const dateObj = new Date(this.date);
		dateObj.setMonth(newVal - 1);

		this.$emit('changeDate', dateObj);
		},
		annee: function (newVal, oldVal) { // watch it
		const dateObj = new Date(this.date);
		dateObj.setFullYear(newVal);

		this.$emit('changeDate', dateObj);
		}
		},
		methods: {
		nomJour(numJour)
		{
		const dateObj = new Date(this.date);
		dateObj.setDate(numJour);
		return dateObj.toLocaleString("fr-FR", {weekday: "short"});
		},

		listeMois()
		{
		let mois = [];

		const dateObj = new Date();

		for (let i = 1; i <= 12; i++) {
		dateObj.setMonth(i - 1);
		let nomMois = dateObj.toLocaleString("fr-FR", {month: "long"});
		mois.push({id: i, libelle: nomMois});
		}

		return mois;
		},

		listeAnnees()
		{
		const dateObj = new Date();
		const annee = dateObj.getFullYear();
		const range = 1;

		let annees = [];

		for (let a = annee - range; a <= annee + range; a++) {
		annees.push(a);
		}

		return annees;
		},

		addEvent(event)
		{
		const dateObj = new Date(this.date);
		dateObj.setDate(event.currentTarget.dataset.jour);

		this.$emit('addEvent', dateObj, event);
		},

		prevMois()
		{
		const dateObj = new Date(this.date);
		dateObj.setMonth(dateObj.getMonth() - 1);

		this.$emit('changeDate', dateObj);
		},

		nextMois()
		{
		const dateObj = new Date(this.date);
		dateObj.setMonth(dateObj.getMonth() + 1);

		this.$emit('changeDate', dateObj);
		},

		eventsByJour(jour)
		{
		const dateObj = new Date(this.date);

		let res = {};
		for (let e in this.events) {
		let event = this.events[e];
		if (event.date.getFullYear() === dateObj.getFullYear()
		&& event.date.getMonth() + 1 === dateObj.getMonth() + 1
		&& event.date.getDate() === jour
		) {
		res[e] = event;
		}
		}
		return res;
		},
		}
		}
		</script>

		<style scoped>

		.table tr {
		background-color: #f4f4f4;
		border-left: 1px #ddd solid;
		border-right: 1px #ddd solid;
		}

		.table-hover tr:hover {
		background-color: #f7f7f7;
		}

		.recherche {
		text-align: center;
		}

		.recherche .btn-group {
		box-shadow: none;
		margin: auto;
		}

		.recherche select.btn {
		padding-right: 3em;
		}

		th.nom-jour {
		width: 1%;
		padding-left: 3px;
		}

		th.numero-jour {
		width: 1%;
		padding-right: .5em;
		}

		.recherche {
		justify-content: center;
		padding-bottom: 5px;
		}


		.event {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 3px;
		border-left: 10px #bbb solid;
		border-right: 10px #bbb solid;
		}

		.event:hover {
		background-color: white;
		}

		</style>
		No newline at end of file

components/UDate.vue

0 → 100644

+54 −0

Original line number	Diff line number	Diff line
		<template>
		{{ formatted }}
		</template>

		<script>
		export default {
		name: "UDate",
		props: {
		'value': {required: false, type: [String,Date]},
		'format': {required: false, type: String},
		},
		mounted(){
		this.formatted = this.formatage(this.value);
		},
		data(){
		return {
		formatted: undefined,
		};
		},
		watch: {
		'value': function(val){
		this.formatted = this.formatage(val);
		},
		},
		methods: {
		formatage(val){
		if (val === undefined) {
		return undefined;
		}
		let date = new Date(val);

		const year = date.getFullYear();
		const month = (date.getMonth() + 1).toString().padStart(2, '0');
		const day = date.getDate().toString().padStart(2, '0');
		const hour = date.getHours().toString().padStart(2, '0');
		const min = date.getMinutes().toString().padStart(2, '0');
		const sec = date.getSeconds().toString().padStart(2, '0');

		switch(this.format){
		case 'datetime':
		return `${day}/${month}/${year} à ${hour}:${min}`;
		case 'time':
		return `${hour}:${min}:${sec}`;
		}
		// format 0 : DATE par défaut
		return `${day}/${month}/${year}`;
		}
		},
		}
		</script>

		<style scoped>

		</style>
		No newline at end of file

components/UIcon.vue

0 → 100644

+17 −0

Original line number	Diff line number	Diff line
		<template>
		<i :class="`fas fa-${name} text-${variant}`"></i>
		</template>

		<script>
		export default {
		name: "UIcon",
		props: {
		name: {required: true, type: String},
		variant: {required: false, type: String},
		},
		}
		</script>

		<style scoped>

		</style>
		No newline at end of file

components/UModal.vue

0 → 100644

+34 −0

Original line number	Diff line number	Diff line
		<template>
		<div class="modal fade" :id="id" tabindex="-1" aria-hidden="true">
		<div class="modal-dialog">
		<div class="modal-content">
		<div class="modal-header">
		<h5 class="modal-title">{{ title }}</h5>
		<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">
		<slot name="body"></slot>
		</div>
		<div class="modal-footer">
		<slot name="footer"></slot>
		<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
		</div>
		</div>
		</div>
		</div>
		</template>

		<script>

		export default {
		name: "UModal",
		props: {
		id: {required: true, type: String},
		title: {required: true, type: String},
		},
		}
		</script>

		<style scoped>

		</style>
		No newline at end of file