Documentation des composants

<%- include('../ui/button', {
  label: 'Enregistrer',
  variant: 'regular',
  color: 'primary',
  size: 'md',
  shape: 'default',
  iconName: 'check',
  customSize: '3rem',
  type: 'button',
  href: '/action',
  id: 'save-button',
  iconLeft: 'save',
  iconRight: 'arrow-right',
  attrs: { 'data-action': 'save', 'aria-label': 'Enregistrer' },
  class: 'w-full sm:w-auto',
  disabled: false,
  loading: false,
}) %>

<%- include('../ui/badge', {
  label: 'Nouveau',
  variant: 'soft',
  color: 'success',
  iconName: 'sparkles',
  class: 'w-full',
}) %>

<%- include('../ui/alert', {
  variant: 'warning',
  title: 'Attention',
  message: '<p>Contenu <strong>HTML</strong> de l’alerte.</p>',
  dismissible: true,
  dismissLabel: 'Fermer l’alerte',
  class: 'w-full',
}) %>

<%- include('../ui/spinner', {
  size: "md",
  class: 'w-full',
}) %>

<%- include('../ui/skeleton', {
  type: 'custom',
  lines: 4,
  items: 3,
  body: '<div class="ui-skeleton h-12 w-full"></div>',
  class: 'w-full',
}) %>

<%- include('../ui/card', {
  title: 'Titre du composant',
  subtitle: 'Description secondaire',
  image: { src: '/images/example.jpg', alt: 'Illustration', position: 'top', aspect: '16 / 9', class: 'object-cover', mediaClass: 'bg-muted', loading: 'lazy' },
  imageAlt: 'Illustration',
  imagePosition: 'top',
  imageAspect: '16 / 9',
  imageClass: 'object-cover',
  imageMediaClass: 'bg-muted',
  footer: '<button type="button" class="ui-btn ui-btn-regular ui-btn-md">Valider</button>',
  body: '<p>Contenu HTML du composant.</p>',
  class: 'w-full',
}) %>

<%- include('../ui/modal', {
  id: 'example-modal',
  title: 'Titre du composant',
  titleIcon: 'info',
  body: '<p>Contenu HTML du composant.</p>',
  size: 'lg',
  class: 'w-full',
  footerHidden: false,
  buttons: [
      { label: 'Annuler', variant: 'ghost', color: 'muted', size: 'sm', close: true },
      { label: 'Enregistrer', variant: 'regular', color: 'primary', size: 'md', shape: 'default', iconLeft: 'save', iconRight: 'arrow-right', type: 'submit', id: 'save', class: 'font-semibold', attrs: { 'data-action': 'save' }, disabled: false },
    ],
  footer: '<button type="button" class="ui-btn ui-btn-regular ui-btn-md">Valider</button>',
}) %>

<%- include('../ui/drawer', {
  id: 'example-drawer',
  title: 'Titre du composant',
  titleIcon: 'info',
  body: '<p>Contenu HTML du composant.</p>',
  side: 'right',
  width: { base: 'calc(100vw - 2rem)', sm: '24rem', lg: '32rem' },
  responsive: { source: '#drawer-content', breakpoints: ['base', 'sm', 'md'], media: '(max-width: 1023px)', controls: true },
  class: 'w-full',
}) %>

<%- include('../ui/sliding-drawer', {
  id: 'example-sliding-drawer',
  body: '<p>Contenu HTML du composant.</p>',
  side: 'right',
  size: 'full',
  overlay: true,
  handle: 'icon',
  handleIcon: 'panel-right',
  handleText: 'Ouvrir',
  handleAriaLabel: 'Ouvrir le panneau',
  radiusClass: 'rounded-l-xl',
  radius: '1rem',
  edgeInset: '1rem',
  responsive: { source: '#sliding-content', breakpoints: ['base', 'sm', 'md'], controls: true },
  class: 'w-full',
}) %>

<%- include('../ui/anchor-nav', {
  id: 'example-anchor-nav',
  title: 'Titre du composant',
  items: [
      { id: 'overview', label: 'Vue générale' },
      { id: 'api', label: 'API' },
    ],
  targetSelector: 'section[id]',
  scrollContainer: '#scroll-container',
  offsetSelector: 'header',
  rootMargin: '-80px 0px -70% 0px',
  sticky: true,
  mobileDrawer: { id: 'page-nav-drawer', title: 'Sections', side: 'right' },
  class: 'w-full',
}) %>

<%# Sous-composants associés %>
<%- include('../ui/anchor-nav-trigger', {
  target: 'page-nav-drawer',
  label: 'Libellé',
  iconName: 'list',
  class: 'w-full',
}) %>

<%- include('../ui/nav', {
  items: [
      { label: 'Accueil', href: '/', iconLeft: 'home', active: true },
      { label: 'Action', type: 'button', iconRight: 'arrow-right', attrs: { 'data-action': 'open' } },
      { label: 'Information', type: 'text', disabled: true },
    ],
  orientation: "horizontal",
  variant: "pill",
  size: "md",
  gap: "sm",
  activeMode: "exact",
  wrap: true,
  overflowX: true,
  overflowPosition: "start",
  overflowFade: true,
  id: 'example-nav',
  ariaLabel: "Navigation",
  listClass: '',
  itemClass: '',
  linkClass: '',
  attrs: { 'data-example': 'complete' },
  class: 'w-full',
}) %>

<%- include('../ui/breadcrumbs', {
  id: 'example-breadcrumbs',
  ariaLabel: "Breadcrumb",
  items: [
      { label: 'Accueil', href: '/', icon: 'home' },
      { label: 'Composants', href: '/components', icon: 'blocks' },
      { label: 'Page courante', current: true },
    ],
  activeMode: "exact",
  mobileBehavior: "scroll",
  overflowPosition: "start",
  overflowFade: true,
  separatorIcon: "chevron-right",
  separator: 'separator',
  separatorHtml: 'separatorHtml',
  maxItems: 1,
  ellipsisLabel: "Pages masquees",
  class: 'w-full',
  listClass: '',
  itemClass: '',
  linkClass: '',
  currentClass: '',
  separatorClass: '',
  attrs: { 'data-example': 'complete' },
}) %>

<%- include('../ui/mega-menu', {
  id: 'example-mega-menu',
  items: [
      { label: 'Accueil', href: '/', iconLeft: 'home' },
      { label: 'Produits', icon: 'package', children: [
        { label: 'Plateforme', href: '/platform', description: 'Vue générale', icon: 'layers', badge: 'New', children: [
          { label: 'API', href: '/api', icon: 'braces', active: true },
        ] },
      ] },
    ],
  ariaLabel: "Navigation",
  orientation: "horizontal",
  variant: "pill",
  size: "md",
  gap: "sm",
  activeMode: "exact",
  wrap: true,
  overflowX: true,
  overflowPosition: "start",
  overflowFade: true,
  mobileTrigger: 'mobileTrigger',
  drawerMode: 'drawerMode',
  drawerBreakpoints: "base sm md",
  drawerMedia: 'drawerMedia',
  drawer: {},
  allLabel: "Tout voir",
  mobileTitle: 'mobileTitle',
  mobileThumbnails: true,
  linkAdapter: (item) => item.href,
  deobfuscate: true,
  panelClass: '',
  gridClass: '',
  rootClass: '',
  class: 'w-full',
  listClass: '',
  itemClass: '',
  linkClass: '',
  attrs: { 'data-example': 'complete' },
  openMode: "click",
}) %>

<%- include('../ui/accordion', {
  items: [
      { id: 'general', title: 'Général', content: '<p>Contenu HTML</p>', open: true },
      { id: 'advanced', title: 'Avancé', content: '<p>Autre contenu</p>' },
    ],
  mode: 'multiple',
  class: 'w-full',
}) %>

<%- include('../ui/collapse', {
  id: 'example-collapse',
  label: 'Libellé',
  trigger: '<button type="button" class="ui-btn ui-btn-outline ui-btn-md">Afficher</button>',
  body: '<p>Contenu HTML du composant.</p>',
  open: true,
  showIcon: true,
  duration: 200,
  responsive: { open: { base: false, lg: true } },
  class: 'w-full',
  triggerClass: '',
  panelClass: '',
  contentClass: '',
  disabled: false,
}) %>

<%- include('../ui/dropdown', {
  id: 'example-dropdown',
  trigger: '<button class="ui-btn ui-btn-outline ui-btn-md">Actions</button>',
  items: [
      { label: 'Modifier', icon: 'pencil', href: '/edit' },
      { type: 'separator' },
      { label: 'Supprimer', icon: 'trash-2', danger: true, attrs: { 'data-action': 'delete' } },
    ],
  placement: "bottom-start",
  class: 'w-full',
  portal: true,
  portalBreakpoints: [],
  portalMedia: 'portalMedia',
}) %>

<%- include('../ui/tooltip', {
  id: 'example-tooltip',
  content: 'Information complémentaire',
  placement: 'top',
  trigger: '<button type="button" class="ui-btn ui-btn-ghost ui-btn-sm">Aide</button>',
  class: 'w-full',
}) %>

<%- include('../ui/popover', {
  id: 'example-popover',
  trigger: '<button type="button" class="ui-btn ui-btn-outline ui-btn-md">Détails</button>',
  body: '<p>Contenu HTML du composant.</p>',
  placement: 'bottom-start',
  class: 'w-full',
  portal: true,
  portalBreakpoints: ['base', 'sm'],
  portalMedia: '(max-width: 639px)',
}) %>

<%- include('../ui/toast-container') %>

<script type="module">
window.UI.toast({
  title: 'Enregistrement terminé',
  message: 'Les modifications ont été enregistrées.',
  variant: 'success',
  duration: 4000,
  position: 'top-right',
});
</script>

<%- include('../ui/tabs', {
  id: 'example-tabs',
  items: [
      { id: 'account', label: 'Compte', icon: 'user', iconPosition: 'start', content: '<p>Compte</p>', active: true },
      { id: 'security', label: 'Sécurité', icon: 'lock', iconPosition: 'end', content: '<p>Sécurité</p>' },
    ],
  class: 'w-full',
}) %>

<%- include('../ui/table', {
  id: 'example-table',
  columns: [
      { key: 'name', label: 'Nom', sortable: true, align: 'left', width: '16rem', personalization: { hideable: false, pinnable: true, defaultVisible: true, defaultPin: 'left' } },
      { key: 'status', label: 'Statut', align: 'center', personalization: { hideable: true, pinnable: true } },
    ],
  rows: [
      { name: 'Alice', status: 'Active', rowDataAttributes: { url: '/users/1' }, cellDataAttributes: { status: { state: 'active' } } },
    ],
  tableTitle: {},
  tableTitleAs: "h2",
  sort: {},
  selectable: { key: 'id', name: 'selected[]', selected: ['1'], disabledKey: 'locked', dataAttribute: 'selectionValue', sticky: true },
  rowsLimit: { value: 25, defaultValue: 25, options: [10, 25, 50, 100], name: 'limit', label: 'Lignes', persist: true, storageKey: 'users:limit' },
  personalization: { persist: true, storageKey: 'users:columns', label: 'Colonnes', resetLabel: 'Réinitialiser', titleLabel: 'Personnaliser', description: 'Choisissez les colonnes', pinLabels: { free: 'Libre', left: 'Gauche', right: 'Droite' } },
  ariaLabels: {},
  sticky: { header: true, topRows: 1, leftColumns: 1, rightColumns: 1, maxScrollHeight: '32rem', breakpoints: { base: { header: true }, lg: { leftColumns: 2 } } },
  striped: true,
  compact: true,
  caption: 'caption',
  empty: "Aucune donnée",
  class: 'w-full',
}) %>

<%- include('../ui/code', {
  id: 'example-code',
  language: 'ejs',
  code: '<h1>Titre</h1>',
  title: 'Titre du composant',
  copyLabel: "Copier",
  copiedLabel: "Copié !",
  copyAriaLabel: 'copyAriaLabel',
  copyIconLeft: 'copy',
  copyIconRight: 'check',
  copyButtonVariant: "outline",
  copyButtonColor: "primary",
  copyButtonSize: "sm",
  copyButtonClass: '',
  copyButton: true,
  languageBadgeVariant: "primary-soft",
  lineNumbers: true,
  wrap: true,
  wrapButton: true,
  wrapButtonLabel: "Retour à la ligne automatique",
  preClass: '',
  class: 'w-full',
}) %>

<%- include('../ui/pagination', {
  id: 'example-pagination',
  page: 1,
  totalPages: 1,
  totalItems: 1,
  itemsPerPage: 1,
  siblings: 1,
  boundaries: 1,
  showAllThreshold: 10,
  name: 'pagination',
  href: '/destination',
  showSummary: true,
  summaryLabel: "sur",
  ariaLabel: "Pagination",
  previousLabel: "Précédent",
  nextLabel: "Suivant",
  previousAriaLabel: "Page précédente",
  nextAriaLabel: "Page suivante",
  class: 'w-full',
}) %>

<%- include('../ui/filters', {
  method: "GET",
  submitMode: "form",
  submitOnChange: true,
  showReset: true,
  showTitle: true,
  responsive: { drawer: true, breakpoints: ['base', 'sm', 'md'], drawerId: 'filters-drawer', drawerTitle: 'Filtres', side: 'right', width: { base: 'calc(100vw - 2rem)', sm: '26rem' }, submitOnChange: false },
  componentFallbacks: { selectSearch: 'select', autocomplete: 'text' },
  debounce: 150,
  asyncTarget: "",
  responseType: 'responseType',
  id: 'example-filters',
  action: "",
  fields: [
      { type: 'search', name: 'q', label: 'Recherche', placeholder: 'Mot-clé' },
      { type: 'select-search', name: 'status', label: 'Statut', options: [{ value: 'active', label: 'Actif' }] },
      { type: 'autocomplete', name: 'owner', label: 'Responsable', fetchUrl: '/api/users' },
      { type: 'datepicker', name: 'period', label: 'Période', mode: 'range' },
      { type: 'switch', name: 'active', label: 'Actifs uniquement' },
      { type: 'custom', name: 'custom', html: '<strong>Champ libre</strong>' },
    ],
  activeFilters: [{ label: 'Statut', value: 'Actif', href: '/users', name: 'status', class: 'font-medium' }],
  fieldsClass: '',
  actionsClass: '',
  activeFiltersClass: '',
  labels: {},
  resetHref: "action en GET",
  class: 'w-full',
}) %>

<%- include('../ui/datepicker', {
  mode: 'range',
  type: 'datetime',
  rangeDisplay: "full",
  compactSeparator: ",",
  panelMonths: 2,
  locale: "fr-FR",
  firstDayOfWeek: 1,
  timePrecision: 'minute',
  id: 'example-datepicker',
  name: 'datepicker',
  startName: "${name}_start",
  endName: "${name}_end",
  label: 'Libellé',
  value: '',
  startValue: '',
  endValue: '',
  placeholder: 'Sélectionner…',
  startPlaceholder: "Début",
  endPlaceholder: "Fin",
  rangeSeparator: "-",
  min: 'min',
  max: 'max',
  clearable: true,
  required: true,
  disabled: false,
  readonly: false,
  helpText: 'Texte d’aide',
  errorText: '',
  triggerClass: '',
  panelClass: '',
  attrs: { 'data-context': 'booking' },
  labels: { clear: 'Effacer', today: "Aujourd’hui", previousMonth: 'Mois précédent', nextMonth: 'Mois suivant' },
  class: 'w-full',
}) %>

<%- include('../ui/planning', {
  id: 'example-planning',
  items: [{ id: 'event-1', title: 'Intervention', subtitle: 'Client', start: '2026-07-21T09:00', end: '2026-07-21T10:30', resourceId: 'tech-1', color: '#2563eb', status: 'planned', class: 'priority', href: '/events/1', dataAttrs: { customerId: '42' } }],
  resources: [{ id: 'tech-1', label: 'Alice Martin', avatar: 'AM', color: '#2563eb' }],
  view: "week",
  currentDate: "aujourd'hui",
  minDate: 'minDate',
  maxDate: 'maxDate',
  firstDayOfWeek: 1,
  showWeekNumber: true,
  dayStartHour: 7,
  dayEndHour: 20,
  slotMinutes: 60,
  locale: "fr-FR",
  timezone: "timezone navigateur",
  compact: { base: true, lg: false },
  compactViews: [],
  dayCompactMode: "resource-focus",
  legend: true,
  enableFullscreen: true,
  fullscreenCompact: true,
  fullscreenToolbarSticky: true,
  loading: false,
  errorText: '',
  labels: { today: "Aujourd'hui", empty: 'Aucun événement', retry: 'Réessayer' },
  cta: { label: 'Nouvelle intervention', href: '/events/new', iconLeft: 'plus', variant: 'regular', color: 'primary' },
  resourceFilters: "",
  class: 'w-full',
  resourceSticky: { base: false, md: true },
  hourSticky: { base: true },
  surfaceMaxHeight: { base: '24rem', md: '40rem' },
}) %>

<%- include('../ui/input', {
  label: 'Libellé',
  type: "text",
  class: 'w-full',
  inputClass: '',
  attrs: { 'data-example': 'complete' },
  id: 'example-input',
  name: 'input',
  placeholder: 'Sélectionner…',
  value: '',
  helpText: 'Texte d’aide',
  errorText: '',
  required: true,
  disabled: false,
}) %>

<%- include('../ui/textarea', {
  id: 'example-textarea',
  name: 'textarea',
  label: 'Libellé',
  placeholder: 'Sélectionner…',
  value: '',
  rows: [],
  helpText: 'Texte d’aide',
  errorText: '',
  required: true,
  disabled: false,
  inputClass: '',
  class: 'w-full',
}) %>

<%- include('../ui/select', {
  id: 'example-select',
  name: 'select',
  label: 'Libellé',
  options: [
      { value: '', label: 'Sélectionner…' },
      { label: 'Groupe', options: [{ value: 'one', label: 'Option 1' }, { value: 'two', label: 'Option 2', disabled: true }] },
    ],
  value: '',
  helpText: 'Texte d’aide',
  errorText: '',
  required: true,
  disabled: false,
  inputClass: '',
  attrs: { 'data-action': 'change-status' },
  class: 'w-full',
}) %>

<%- include('../ui/checkbox', {
  id: 'example-checkbox',
  name: 'checkbox',
  label: 'Libellé',
  checked: true,
  disabled: false,
  helpText: 'Texte d’aide',
  value: '',
  class: 'w-full',
}) %>

<%- include('../ui/switch', {
  value: '',
  labelPosition: "right",
  attrs: { 'data-example': 'complete' },
  class: 'w-full',
  id: 'example-switch',
  name: 'switch',
  label: 'Libellé',
  description: 'description',
  errorText: '',
  checked: true,
  disabled: false,
  required: true,
  inputClass: '',
  trackClass: '',
  thumbClass: '',
  labelClass: '',
  descriptionClass: '',
}) %>

<%- include('../ui/radio', {
  name: 'radio',
  label: 'Libellé',
  options: [
      { value: 'email', label: 'E-mail', checked: true },
      { value: 'sms', label: 'SMS', disabled: true },
    ],
  class: 'w-full',
}) %>

<%- include('../ui/select-search', {
  id: 'example-select-search',
  name: 'select-search',
  label: 'Libellé',
  options: [
      { value: 'active', label: 'Actif' },
      { value: 'paused', label: 'Suspendu', disabled: true },
    ],
  value: '',
  placeholder: 'Sélectionner…',
  searchPlaceholder: "Rechercher…",
  emptyText: "Aucun résultat",
  portal: true,
  portalBreakpoints: ['base', 'sm'],
  portalMedia: '(max-width: 639px)',
  class: 'w-full',
  helpText: 'Texte d’aide',
  errorText: '',
  required: true,
  disabled: false,
}) %>

<%- include('../ui/autocomplete', {
  id: 'example-autocomplete',
  name: 'autocomplete',
  label: 'Libellé',
  value: '',
  selectedId: '',
  fetchUrl: 'fetchUrl',
  fetchByIdUrl: 'fetchByIdUrl',
  keyName: "label",
  idKey: "id",
  minChars: 1,
  debounce: 300,
  emptyText: "Aucun résultat",
  portal: true,
  portalBreakpoints: [],
  portalMedia: 'portalMedia',
  class: 'w-full',
  placeholder: 'Sélectionner…',
  helpText: 'Texte d’aide',
  errorText: '',
  required: true,
  disabled: false,
}) %>

<%- include('../ui/upload', {
  id: 'example-upload',
  name: 'upload',
  label: 'Libellé',
  accept: 'image/*,.pdf',
  multiple: true,
  maxSize: 5242880,
  placeholder: 'Sélectionner…',
  subtext: 'subtext',
  hint: 'hint',
  preview: true,
  existingFiles: [
      { name: 'document.pdf', size: 184200, url: '/uploads/document.pdf', type: 'application/pdf' },
    ],
  class: 'w-full',
  helpText: 'Texte d’aide',
  errorText: '',
  required: true,
  disabled: false,
}) %>

<%- include('../ui/signature', {
  value: '',
  height: 180,
  strokeColor: '#111827',
  strokeWidth: 2.5,
  backgroundColor: '#ffffff',
  outputType: 'image/png',
  id: 'example-signature',
  name: 'signature',
  label: 'Libellé',
  placeholder: 'Sélectionner…',
  clearLabel: "Effacer",
  emptyMessage: "Signature requise.",
  helpText: 'Texte d’aide',
  errorText: '',
  required: true,
  disabled: false,
  readonly: false,
  class: 'w-full',
}) %>

<%- include('../ui/timeline', {
  items: [
      { date: '21 juillet', title: 'Création', body: '<p>Dossier créé.</p>', nodeIcon: 'check', nodeStep: 1, status: 'success', active: true },
    ],
  body: include('../ui/timeline-item', { title: 'Markup libre', body: '<strong>HTML</strong>' }),
  layout: "vertical",
  step: 'step',
  class: 'w-full',
}) %>

<%# Sous-composants associés %>
<%- include('../ui/timeline-item', {
  date: 'date',
  title: 'Titre du composant',
  body: include('../ui/timeline-item', { title: 'Markup libre', body: '<strong>HTML</strong>' }),
  nodeIcon: 'check',
  nodeStep: 1,
  status: 'success',
  active: true,
  class: 'w-full',
}) %>

<%- include('../ui/progress', {
  value: 65,
  size: "md",
  color: "primary",
  label: 'Libellé',
  showValue: true,
  textPosition: 'top-left',
  striped: true,
  animated: true,
  indeterminate: true,
  class: 'w-full',
  attrs: { 'data-task-id': '42' },
}) %>

<%- include('../ui/chart', {
  id: 'example-chart',
  type: "line",
  data: { labels: ['Jan', 'Fév'], datasets: [{ label: 'Ventes', data: [12, 19], gaugeMax: 100 }] },
  options: { responsive: true, plugins: { legend: { display: true } } },
  preset: 'preset',
  height: 240,
  emptyText: "No data",
  ariaLabel: "Chart",
  lazy: true,
  class: 'w-full',
}) %>

<%- include('../ui/editor', {
  id: 'example-editor',
  name: 'editor',
  label: 'Libellé',
  value: '',
  toolbar: 'full',
  height: 220,
  resizable: true,
  lazy: true,
  labels: { tooltipVisit: 'URL :', tooltipEnterLink: 'Lien :', tooltipEdit: 'Modifier', tooltipSave: 'Appliquer', tooltipRemove: 'Retirer' },
  class: 'w-full',
  placeholder: 'Sélectionner…',
  helpText: 'Texte d’aide',
  errorText: '',
  required: true,
  disabled: false,
}) %>