tristan
82c4cfaa90
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>
105 lines
2.8 KiB
Vue
105 lines
2.8 KiB
Vue
<template>
|
|
<div class="grid grid-cols-1 items-start gap-6 p-4 md:grid-cols-2">
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
|
<MalioInputTextArea/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Avec label + hint</h2>
|
|
<MalioInputTextArea
|
|
v-model="hintValue"
|
|
label="Description"
|
|
hint="Ajoutez un contexte clair"
|
|
:size="4"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Avec icône</h2>
|
|
<MalioInputTextArea
|
|
v-model="iconValue"
|
|
label="Commentaire"
|
|
icon-name="mdi:comment-text-outline"
|
|
:size="3"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Erreur / Succès</h2>
|
|
<div class="space-y-4">
|
|
<MalioInputTextArea
|
|
v-model="errorValue"
|
|
label="Message"
|
|
error="Le message est trop court"
|
|
:size="3"
|
|
/>
|
|
<MalioInputTextArea
|
|
v-model="successValue"
|
|
label="Message"
|
|
success="Message valide"
|
|
:size="3"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Readonly / Disabled</h2>
|
|
<div class="space-y-4">
|
|
<MalioInputTextArea
|
|
model-value="Contenu en lecture seule"
|
|
label="Readonly"
|
|
readonly
|
|
:size="3"
|
|
/>
|
|
<MalioInputTextArea
|
|
model-value="Champ indisponible"
|
|
label="Disabled"
|
|
disabled
|
|
:size="3"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Resize avec limites</h2>
|
|
<MalioInputTextArea
|
|
v-model="resizeValue"
|
|
label="Notes"
|
|
resize="both"
|
|
:size="4"
|
|
:min-resize-width="300"
|
|
:max-resize-width="700"
|
|
:min-resize-height="120"
|
|
:max-resize-height="280"
|
|
hint="Resize limite en largeur et hauteur"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Compteur (interne au composant)</h2>
|
|
<MalioInputTextArea
|
|
v-model="counterValue"
|
|
label="Message"
|
|
:size="5"
|
|
:max-length="120"
|
|
:show-counter="true"
|
|
hint="Le compteur est en bas a gauche"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref} from 'vue'
|
|
import MalioInputTextArea from '../../../../app/components/malio/input/InputTextArea.vue'
|
|
|
|
const hintValue = ref('')
|
|
const iconValue = ref('')
|
|
const errorValue = ref('abc')
|
|
const successValue = ref('Contenu ok')
|
|
const resizeValue = ref('Vous pouvez redimensionner ce champ.')
|
|
const counterValue = ref('')
|
|
|
|
</script>
|