fix du style des buttons et fix de l'issue sur l'uppercase dans les btns

[VachetVirginie]

Description

ToDo:

Playground

<template>
	<HeaderBar :navigation-items="navigationItems"/>
	<div>
		<ChipList :items="chiplistItems"/>
	</div>
	<div>
		<DataList
			:items="itemsWithActions"
			@click:item-action=""
		/>
	</div>
	<h2>Back Btn</h2>
	<div class="d-flex justify-sm-space-between">
		<BackBtn/>
		<VSheet class="pa-4" color="primary">
			<BackBtn dark/>
		</VSheet>

		<BackBtn>
			<template #default> Précédent</template>

			<template #icon>
				<VIcon>
					{{ backIcon }}
				</VIcon>
			</template>
		</BackBtn>
	</div>
	<h2>User Menu Btn</h2>
	<div class="d-flex justify-sm-space-between">
		<UserMenuBtn
			additional-information="Information supplémentaire"
			full-name="Virginie Beauchesne"
		/>
		<UserMenuBtn full-name="Édith Cartier">
			<VListItem
				v-for="(item, index) in items"
				:key="index"
			>
				<VListItemTitle>{{ item }}</VListItemTitle>
			</VListItem>
		</UserMenuBtn>
		<br/><br/>
		<UserMenuBtn
			additional-information="Information supplémentaire"
			full-name="Virginie Beauchesne"
			mobile-version
		/>
		<br/><br/>
		<UserMenuBtn
			:vuetify-options="vuetifyOptionsUserMenuBtn"
			full-name="Édith Cartier"
		>
			<VListItem
				v-for="(item, index) in items"
				:key="index"
			>
				<VListItemTitle>{{ item }}</VListItemTitle>
			</VListItem>
		</UserMenuBtn>
		<br/><br/>
		<UserMenuBtn full-name="Édith Cartier">
			<template #content>
				<VSheet>
					<div class="pa-1">
						<VListItem
							v-for="(item, index) in items"
							:key="index"
						>
							<VListItemTitle>{{ item }}</VListItemTitle>
						</VListItem>
					</div>

					<VDivider/>

					<VBtn
						block
						class="primary-text font-weight-bold justify-start px-4"
						height="56px"
						large
						variant="text"
					>
						<VIcon
							class="mr-2"
							color="primary"
						>
							{{ logoutIcon }}
						</VIcon>

						Lien perso
					</VBtn>
				</VSheet>
			</template>
		</UserMenuBtn>
	</div>
	<h2>France connect Btn</h2>
	<div class="d-flex justify-sm-space-between">
		<FranceConnectBtn href="https://app.franceconnect.gouv.fr/"/>
		<br/>
		<FranceConnectBtn
			connect-plus
			href="https://app.franceconnect.gouv.fr/"
		/>
	</div>
	<h2>CopyBtn</h2>
	<div class="d-flex justify-sm-space-between">
		<CopyBtn
			label="Copier le numéro de dossier"
			text-to-copy="example-2"
		/>
		<CopyBtn
			:text-to-copy="() => 'example-1'"
			label="Copier le numéro de dossier"
		/>

		<CopyBtn
			label="Copier le numéro de dossier"
			text-to-copy="example-2"
		/>

		<CopyBtn
			hide-tooltip
			label="Copier le numéro de patient"
			text-to-copy="example-3"
		/>

		<CopyBtn
			:tooltip-duration="5000"
			label="Copier le numéro de patient"
			text-to-copy="example-4"
		/>

		<CopyBtn
			label="Copier le numéro de ticket"
			text-to-copy="example-6"
		>
			<template #icon>
				<VIcon>
					{{ mdiContentDuplicate }}
				</VIcon>
			</template>

			<template #tooltip>
				Le texte a bien été copié
			</template>
		</CopyBtn>

		<CopyBtn
			:vuetify-options="vuetifyOptions"
			label="Copier le numéro d'utilisateur"
			text-to-copy="example-5"
		/>
	</div>

	<h2>SelectBtnField</h2>
	<div class="d-flex justify-sm-space-between">
		<SelectBtnField
			v-model="selectBtnFieldvalue"
			:items="selectBtnFielItems"
			hint="Par défaut, le moyen de contact est l’email."
			label="Moyen de contact"
		/>

		<SelectBtnField
			v-model="selectBtnFieldvalue"
			:items="selectBtnFielItems"
			label="Moyen de contact"
			multiple
		/>

		<SelectBtnField
			v-model="selectBtnFieldvalue"
			:items="selectBtnFielItems"
			inline
			label="Moyen de contact"
		/>
	</div>
	<div class="d-flex justify-left mt-4">
		<SelectBtnField
			v-model="selectBtnFieldvalue"
			v-model:error="error"
			v-model:error-messages="errorMessages"
			:items="selectBtnFielItems"
			label="Moyen de contact"
		/>

		<VBtn
			class="mt-3"
			color="primary"
			@click="resetExample"
		>
			Réinitialiser
		</VBtn>
	</div>
<UploadWorkflow></UploadWorkflow>
	<h2>DownloadBtn</h2>
	<div class="d-flex justify-sm-space-between">
		<DownloadBtn
			:fallback-filename="fallbackFilename"
			:file-promise="getFileFromApi"
			notification="Super !"
		>
			Télécharger mon attestation
		</DownloadBtn>

		<DownloadBtn
			:file-promise="getFileFromApi"
			:outlined="false"
			:vuetify-options="vuetifyOptions"
			class="text-primary"
			color="white"
			tile
			width="396px"
		>
			<VIcon
				:class="{ 'd-none': $vuetify.display.smAndDown }"
				class="flex-shrink-0 mr-2"
				color="grey"
			>
				{{ fileIcon }}
			</VIcon>

			justificatif.txt

			<VSpacer class="ml-2"/>

			<VIcon
				class="flex-shrink-0"
				color="primary"
			>
				{{ downloadIcon }}
			</VIcon>
		</DownloadBtn>
	</div>

	<h2>LangBtn</h2>
	<div class="d-flex justify-sm-space-between">
		<LangBtn v-model="value1"/>
		{{ value1 }}
		<br/><br/>
		<LangBtn
			v-model="value2"
			:available-languages="[
				'fr',
				'en',
				'de',
				'zh'
			]"
		/>
		{{ value2 }}
	</div>
	<h2> Error Pages </h2>

	<ErrorPage
		btn-route="/"
		code="500"
		message="La page ne fonctionne pas correctement."
		page-title="Erreur serveur"
	/>

	<ErrorPage
		code="404"
		message="Il semblerait qu’il y ait eu une erreur !"
		no-btn
		page-title="Page non trouvée"
	/>

	<ErrorPage
		btn-route="/"
		code="404"
		message="Cette page n’existe pas ou a été déplacée."
		page-title="Page non trouvée"
	/>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import {mdiChevronLeft, mdiContentDuplicate, mdiDownload, mdiFile, mdiLogout} from "@mdi/js";
import {
	BackBtn,
	BackToTopBtn,
	ChipList,
	CopyBtn,
	DataList,
	DownloadBtn,
	ErrorPage,
	FranceConnectBtn,
	LangBtn,
	SelectBtnField,
	UserMenuBtn,
	HeaderBar
} from "@/main";

import {SelectBtnItem} from '@/patterns/SelectBtnField/types';
import {AxiosRequestHeaders, AxiosResponse, InternalAxiosRequestConfig} from 'axios';
import UploadWorkflow from "@/patterns/UploadWorkflow/UploadWorkflow.vue";


const file: Blob = new Blob(['Hello, world!'], {type: 'text/plain'});

export default defineComponent({
	components: {
		UploadWorkflow,
		ErrorPage,
		UserMenuBtn,
		BackBtn,
		FranceConnectBtn,
		CopyBtn,
		BackToTopBtn,
		SelectBtnField,
		DownloadBtn,
		LangBtn,
		ChipList,
		DataList,
		HeaderBar
	},
	data() {
		return {
			navigationItems: [
				{
					label: "Accueil",
				},
				{
					label: "Mes projets",
				},
				{
					label: "Mes outils",
				},
			],
			itemsWithActions: [
			{
				key: 'Nom',
				value: 'Dupont',
			},
			{
				key: 'Prénom',
				value: 'Paul',
			},
			{
				key: 'Date de naissance',
				value: '24/09/1970',
				action: 'Modifier',
			},
		],
			chiplistItems
	:
		[
			{text: 'Item 1', value: 'item1'},
			{text: 'Item 2', value: 'item2'},
			{text: 'Item 3', value: 'item3'},
		],
			backIcon
	:
		mdiChevronLeft,
			mdiContentDuplicate
	:
		mdiContentDuplicate,
			logoutIcon
	:
		mdiLogout,
			items
	:
		[
			'Administration',
			'Profil',
			'Paramètres'
		],
			vuetifyOptions
	:
		{
			menu: {
				location: 'bottom center',
					offset
			:
				2
			}
		,
			btn: {
				density: 'default'
			}
		,
			icon: {
				color: 'indigo'
			}
		}
	,
		vuetifyOptionsUserMenuBtn: {
			menu: {
				minWidth: '264px',
					maxWidth
			:
				'264px'
			}
		,
			btn: {
				variant: 'outlined',
			}
		,
			icon: {
				color: 'primary'
			}
		,
			logoutIcon: {
				class

			:
				'd-none'
			}
		}
	,
		selectBtnFieldvalue: [] as string[] | null,
			selectBtnFielItems
	:
		[
			{
				text: 'Email',
				value: 'email'
			},
			{
				text: 'Courrier',
				value: 'courrier'
			},
			{
				text: 'SMS',
				value: 'sms'
			},
			{
				text: 'Autre',
				value: 'other',
				unique: true
			}
		] as SelectBtnItem[],
			error
	:
		true,
			errorMessages
	:
		[] as string[],

			downloadIcon
	:
		mdiDownload,
			fileIcon
	:
		mdiFile,
			useFallback
	:
		true,

			value1
	:
		'fr',
			value2
	:
		'en',
	}
	},
	computed: {
		fallbackFilename(): string {
			return this.useFallback ? 'test.txt' : '';
		}
	},
	methods: {
		resetExample(): void {
			this.selectBtnFieldvalue = null;
			this.error = true;
			this.errorMessages = ['Le champ est requis.'];
		},

		getFileFromApi(): Promise<AxiosResponse<Blob>> {
			return new Promise((resolve) => {
				const config: InternalAxiosRequestConfig<any> = {
					headers: {} as AxiosRequestHeaders,
				};
				resolve({
					data: file,
					status: 200,
					statusText: 'OK',
					headers: {},
					config: config,
				});
			});
		},
	}
});
</script>

[DavidFyon]

A tester sur le SK (des composants surchargent surement le style)
A gérer côté variable Vuetify ?

Apres fixs des autres bugs

[4dr1en]