Yuri UI Components

Une bibliothèque de composants Angular personnalisables et faciles à utiliser pour vos applications web modernes.

Installation

npm install yuri-ui --save

Composants disponibles

Autocomplete

Un composant d'autocomplétion flexible et personnalisable avec support pour le regroupement et les templates personnalisés.

Fonctionnalités

• Recherche en temps réel
• Regroupement des résultats
• Templates personnalisables pour les éléments, groupes et messages "aucun résultat"
• Navigation au clavier
• Mise en surbrillance des termes recherchés
• Support pour le nettoyage de la recherche

Utilisation

Autocomplete - Utilisation basique

import { Component } from '@angular/core';
import { AutocompleteComponent } from 'yuri-ui';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [AutocompleteComponent],
  template: `
    <yuri-autocomplete
      [data]="items"
      placeholder="Rechercher..."
      (select)="onItemSelect($event)"
    ></yuri-autocomplete>
  `
})
export class DemoComponent {
  items = [
    { id: 1, name: 'Campaign Name Fintory', group: 'Campaigns' },
    { id: 2, name: 'Fintory Campaign Name', group: 'Campaigns' },
    { id: 3, name: 'Product Name Fintory', group: 'Products' },
    { id: 4, name: 'Fintory Product Name', group: 'Products' }
  ];

  onItemSelect(item: any) {
    console.log('Item sélectionné:', item);
  }
}

Autocomplete - Avec templates personnalisés

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AutocompleteComponent } from 'yuri-ui';

@Component({
  selector: 'app-custom-demo',
  standalone: true,
  imports: [CommonModule, AutocompleteComponent],
  template: `
    <yuri-autocomplete
      [data]="items"
      [customItemTemplate]="customItem"
      [customGroupTemplate]="customGroup"
      [customNoResultsTemplate]="noResults"
      (select)="onItemSelect($event)"
    ></yuri-autocomplete>

    <!-- Template pour les éléments -->
    <ng-template #customItem let-item let-searchText="searchText">
      <div style="display: flex; align-items: center;">
        <div *ngIf="item.group === 'Campaigns'" style="margin-right: 12px; color: #6366F1;">
          <!-- Icône de campagne ici -->
        </div>
        <div>
          <div [innerHTML]="highlightText(item.name, searchText)"></div>
          <div style="font-size: 12px; color: #6B7280;">ID: {{ item.id }}</div>
        </div>
      </div>
    </ng-template>

    <!-- Autres templates... -->
  `
})
export class CustomDemoComponent {
  // ...
}

Options de configuration

Autocomplete Component

| Propriété | Type | Description | Valeur par défaut | |-----------|------|-------------|------------------| | data | any[] | Les données à afficher dans la liste déroulante | [] | | displayField | string | Le champ à utiliser pour afficher le texte | 'name' | | valueField | string | Le champ à utiliser comme valeur | 'id' | | groupField | string | Le champ à utiliser pour le regroupement | 'group' | | minChars | number | Nombre minimum de caractères pour déclencher la recherche | 1 | | maxResults | number | Nombre maximum de résultats à afficher | 10 | | clearable | boolean | Afficher ou non le bouton d'effacement | true | | placeholder | string | Texte d'instruction dans le champ de recherche | 'Search' | | customItemTemplate | TemplateRef | Template personnalisé pour les éléments | null | | customGroupTemplate | TemplateRef | Template personnalisé pour les en-têtes de groupe | null | | customNoResultsTemplate | TemplateRef | Template personnalisé pour le message "aucun résultat" | null |

Événements

| Événement | Description | Paramètres | |-----------|-------------|------------| | select | Déclenché lorsqu'un élément est sélectionné | L'élément sélectionné | | search | Déclenché lorsque le texte de recherche change | Le texte de recherche | | clear | Déclenché lorsque la recherche est effacée | Aucun |

Développement

Cloner le projet

git clone https://github.com/votre-username/yuri-ui.git
cd yuri-ui
npm install

Construire la bibliothèque

ng build yuri-ui

Démarrer l'application de démonstration

ng serve demo-app

Contribution

Les contributions sont les bienvenues ! N'hésitez pas à soumettre des pull requests, à signaler des bugs ou à proposer de nouvelles fonctionnalités.

Licence

MIT# yuri-ui

yuri-ui