Package "Select beautiful"

npm install @fractalcms/aurelia-select-beautiful

Ajouter le composant dans dans l'application Aurelia

import Aurelia from 'aurelia';
import { MyApp } from './my-app';
import { SelectBeautiful } from '@fractalcms/aurelia-select-beautiful';

Aurelia
  .register(SelectBeautiful)
  .app(MyApp)
  .start();

Ajout des style CSS

Le composant ne surcharge aucun style global et ne s’injecte pas automatiquement.

Pour appliquer ses styles, importez simplement la feuille CSS dans votre fichier global SCSS ou CSS :

@import "@fractalcms/aurelia-select-beautiful/dist/styles/select-beautiful.css";

Cette méthode est compatible avec Webpack, Vite et Aurelia CLI.

Elle garantit que vos styles de site ne sont jamais altérés.

Select multiple avec le thème "green"

<select multiple fractalcms-select-beautiful.bind="{ theme: 'green'}">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Select simple

<select fractalcms-select-beautiful="">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

1. Recherche textuelle dynamique
2. Navigation clavier (↑, ↓, Entrée, Échap)
3. Sélection multiple avec suppression
4. Accessibilité ARIA (live region, multiselect, etc.)

1. `soft` *(par défaut)* => Clair, doux et neutre => `theme: 'soft'`
2. `dark` => Fond sombre, texte clair => `theme: 'dark'`
3. `blue` => Accent bleu professionnel => `theme: 'blue'`
4. `red` => Accent rouge moderne => `theme: 'red'`
5. `green` => Accent vert équilibré => `theme: 'green'`
6. `custom` => Thème utilisateur (voir ci-dessous) => `theme: 'custom'`

Le thème custom est utilisé afin de permettre l'ajout d'une CSS personnalisée.

Ce mode vous permet d’adapter le composant à la charte graphique de votre application sans modifier le code source du package.

<select fractalcms-select-beautiful.bind="{theme: 'custom'}" multiple>
  <option value="1" selected>Nouveauté</option>
  <option value="2">Vert</option>
</select>

Exemple de style à ajouter dans vos Styles CSS

.theme-custom.select-beautiful {
  .select-beautiful--item---item {
    border: 2px solid #ff9900;
    color: #ff9900;
  }

  .select-beautiful--item---item-close {
    background-color: #fff5e6;
    color: #ff9900;
    border: 2px solid #ff9900;
  }

  .select-beautiful--search---input {
    border: 2px solid #ff9900;
  }

  .select-beautiful--search---list--items {
    border: 2px solid #ff9900;

    &---option[aria-selected="true"] {
      background-color: #ff9900;
      color: white;
    }
  }
}

1. `theme` : type:`Enum`, valeur par défaut : `'soft'` , description : Selection du thème
2. `searchPlaceholder` : type:`string` , valeur par défaut : `'Rechercher'` , description : Texte de recherche
3. `searchInputName` : type:`string` , valeur par défaut : `'model[search]'` , description : Nom de l'input de recherche
4. `removeText` : type:`string` , valeur par défaut : `'retiré'` , description : ARIA texte quand une options est enlevée
5. `removeAllText` : type:`string` , valeur par défaut : `'Toutes les sélections ont été supprimées'`, description : ARIA texte quand toutes les options sont enlevées
6. `addText` : type:`string` , valeur par défaut : `'ajouté'` , description : ARIA texte quand une option est ajoutée
7. `eventChangeItemName` : type:`string` , valeur par défaut : `'fractalcms-select-change'` , description : Nom de l'évènement envoyé au changement du select

1. aria-live pour annoncer les ajouts/suppressions
2. aria-multiselectable et aria-selected sur les options
3. aria-activedescendant pour la navigation clavier
4. Support total pour lecteurs d’écran

# Installation des dépendances
npm install

# Build complet
npm run build

# Watch (TypeScript + SCSS)
npm run watch