@amsom-habitat/amsom-textarea

Composant Vue 3 de zone de texte enrichie, basé sur Bootstrap, développé pour les applications AMSOM Habitat.

Installation

npm install @amsom-habitat/amsom-textarea

Utilisation

<script>
import AmsomTextarea from '@amsom-habitat/amsom-textarea'

export default {
  components: { AmsomTextarea },
  data() {
    return { texte: '' }
  }
}
</script>

<template>
  <AmsomTextarea v-model="texte" label="Mon champ" />
</template>

Props

| Prop | Type | Défaut | Description | |-----------------|-----------|------------------------------|----------------------------------------------------------| | id | String | 'input-textarea' | Attribut id du <textarea> | | modelValue | String | '' | Valeur liée via v-model | | label | String | '' | Libellé affiché au-dessus du champ | | placeholder | String | 'Entrez votre texte ici...'| Placeholder du <textarea> | | rows | Number | 10 | Nombre de lignes visibles | | cols | Number | 30 | Nombre de colonnes | | maxlength | Number | 1000 | Nombre maximum de caractères (affiché dans le compteur) | | mutedText | String | null | Texte d'aide grisé affiché à gauche du compteur | | inputSize | String | 'md' | Taille Bootstrap : 'sm', 'md', 'lg' | | inputRounded | Boolean | false | Applique des bords arrondis au champ | | floatingLabel | Boolean | false | Active le mode floating label de Bootstrap | | required | Boolean | false | Marque le champ comme obligatoire (astérisque rouge) | | style | String | '' | Style CSS inline appliqué au <textarea> |

Événements

| Événement | Payload | Description | |--------------------|----------------|----------------------------------------------------------| | update:modelValue| String | Émis à chaque modification de la valeur (v-model) | | keyupTextearea | KeyboardEvent| Émis sur chaque keyup dans le champ | | ctrlEnter | KeyboardEvent| Émis sur Ctrl+Entrée (la touche Entrée seule fait un saut de ligne) |

Slots

#sous-texte

Remplace le mutedText par défaut sous le champ. Le slot expose mutedText si vous souhaitez l'afficher conditionnellement.

<AmsomTextarea v-model="texte" muted-text="Texte par défaut">
  <template #sous-texte="{ mutedText }">
    <a href="#" @click.prevent="texte = texteExemple">Compléter le contenu</a>
  </template>
</AmsomTextarea>

Développement

npm install        # installer les dépendances
npm run dev        # démarrer le serveur de développement Vite
npm run storybook  # lancer Storybook
npm run build      # compiler la bibliothèque
npm run lint       # vérifier le code avec ESLint