feat: Ajout de composant (#23)
All checks were successful
Release / release (push) Successful in 1m14s
All checks were successful
Release / release (push) Successful in 1m14s
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Co-authored-by: kevin <kevin@yuno.malio.fr> Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr> Reviewed-on: #23 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #23.
This commit is contained in:
112
.playground/pages/composant/button/button.vue
Normal file
112
.playground/pages/composant/button/button.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Primary</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<MalioButton label="Valider" />
|
||||
<MalioButton label="Enregistrer" />
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<MalioButton label="Valider" button-class="bg-m-btn-primary-hover" />
|
||||
<MalioButton label="Valider" button-class="bg-m-btn-primary-hover" />
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<MalioButton label="Valider" button-class="bg-m-btn-primary-active" />
|
||||
<MalioButton label="Valider" button-class="bg-m-btn-primary-active" />
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<MalioButton label="Valider" disabled />
|
||||
<MalioButton label="Valider" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Secondary</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Default + icon</p>
|
||||
<MalioButton label="Modifier" variant="secondary" />
|
||||
<MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Hover + icon</p>
|
||||
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover" />
|
||||
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover" icon-name="mdi:pencil" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Active + icon</p>
|
||||
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active" />
|
||||
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active" icon-name="mdi:pencil" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
|
||||
<MalioButton label="Modifier" variant="secondary" disabled />
|
||||
<MalioButton label="Modifier" variant="secondary" disabled icon-name="mdi:pencil" icon-position="left" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Tertiary</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<MalioButton label="Voir plus" variant="tertiary" />
|
||||
<MalioButton label="Afficher" variant="tertiary" />
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" />
|
||||
<MalioButton label="Afficher" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" />
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" />
|
||||
<MalioButton label="Afficher" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" />
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<MalioButton label="Voir plus" variant="tertiary" disabled />
|
||||
<MalioButton label="Afficher" variant="tertiary" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Danger</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash" icon-position="left" />
|
||||
<MalioButton label="Supprimer" variant="danger" icon-name="mdi:cancel-bold" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" icon-name="mdi:trash" icon-position="left" />
|
||||
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" icon-name="mdi:cancel-bold" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" icon-name="mdi:trash" icon-position="left" />
|
||||
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" icon-name="mdi:cancel-bold" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<MalioButton label="Supprimer" variant="danger" disabled icon-name="mdi:trash" icon-position="left" />
|
||||
<MalioButton label="Supprimer" variant="danger" disabled icon-name="mdi:cancel-bold" icon-position="left" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Avec icône</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<MalioButton label="Valider" icon-name="mdi:check" />
|
||||
<MalioButton label="Icône à gauche" icon-name="mdi:arrow-left" icon-position="left" />
|
||||
<MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil-outline" />
|
||||
<MalioButton label="Annuler" variant="tertiary" icon-name="mdi:close" />
|
||||
<MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash-can-outline" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Largeur personnalisée</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<MalioButton label="Pleine largeur" button-class="w-full" />
|
||||
<MalioButton label="Compact" button-class="w-auto px-6" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
155
.playground/pages/composant/button/buttonIcon.vue
Normal file
155
.playground/pages/composant/button/buttonIcon.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Retour"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:pencil-outline"
|
||||
aria-label="Modifier"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:close"
|
||||
aria-label="Fermer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Icônes variées</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:download"
|
||||
aria-label="Télécharger"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:bell-outline"
|
||||
aria-label="Notifications"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:cog-outline"
|
||||
aria-label="Paramètres"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:view-grid-outline"
|
||||
aria-label="Grille"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:format-list-bulleted"
|
||||
aria-label="Liste"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:folder-outline"
|
||||
aria-label="Dossier"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Retour"
|
||||
disabled
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:pencil-outline"
|
||||
aria-label="Modifier"
|
||||
disabled
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:close"
|
||||
aria-label="Fermer"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Taille personnalisée</h2>
|
||||
<div class="flex items-center gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Petit"
|
||||
:icon-size="16"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Normal"
|
||||
:icon-size="24"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Grand"
|
||||
:icon-size="32"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Ghost</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Retour"
|
||||
variant="ghost"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:pencil-outline"
|
||||
aria-label="Modifier"
|
||||
variant="ghost"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:cancel-bold"
|
||||
aria-label="Fermer"
|
||||
variant="ghost"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Ghost désactivé</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Retour"
|
||||
variant="ghost"
|
||||
disabled
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:pencil-outline"
|
||||
aria-label="Modifier"
|
||||
variant="ghost"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec événement click</h2>
|
||||
<div class="flex items-center gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:plus"
|
||||
aria-label="Incrémenter"
|
||||
@click="counter++"
|
||||
/>
|
||||
<span class="text-lg font-semibold">{{ counter }}</span>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:minus"
|
||||
aria-label="Décrémenter"
|
||||
@click="counter--"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const counter = ref(0)
|
||||
</script>
|
||||
Reference in New Issue
Block a user