@gouvfr/dsfr-roller/src/node/directive/doc/filter-leaf-directive.js

Le module `dsfr-roller` permet de publier le site de documentation du Système de Design de l’État - DSFR

import { Node } from '../../node.js'

class FilterLeafDirective extends Node {
  constructor (data) {
    super(data);
  }

  structure (data) {
    return {
      type: 'htmlContainer',
      tagName: 'div',
      classes: ['dsfr-doc-filter'],
      attributes: {
        'data-fr-filter': data.properties.id,
        'data-fr-filter-subitem': data.properties.subItem || '',
      },
      children: [
        {
          type: 'leafDirective',
          name: 'fr-search',
          properties: {
            id: `filter-${data.properties.id}`,
            inputId: `filter-${data.properties.id}-input`,
            inputClasses: ['dsfr-doc-filter-input'],
            buttonId: `filter-${data.properties.id}-button`,
            buttonClasses: ['dsfr-doc-filter-button'],
            label: data.properties.label,
            title: data.properties.title,
          }
        },
        ...(data.properties.select ? [
          {
            type: 'htmlContainer',
            tagName: 'div',
            classes: ['dsfr-doc-filter-select', 'fr-select-group'],
            children: [
              {
                type: 'htmlContainer',
                tagName: 'label',
                classes: ['fr-label'],
                attributes: {
                  for: `filter-${data.properties.select}-select`
                },
                children: [
                  {
                    type: 'text',
                    value: data.properties.selectLabel
                  }
                ]
              },
              {
                type: 'htmlContainer',
                tagName: 'select',
                classes: ['fr-select'],
                attributes: {
                  id: `filter-${data.properties.select}-select`,
                  name: `filter-${data.properties.select}-select`,
                  'data-fr-filter-select': data.properties.select
                },
                children: data.properties.selectOptions.map(option => ({
                  type: 'htmlContainer',
                  tagName: 'option',
                  attributes: {
                    value: option.value
                  },
                  children: [{
                    type: 'text',
                    value: option.label
                  }]
                }))
              }
            ]
          }
        ] : [])
      ],
    };
  }
}

FilterLeafDirective.NAME = 'dsfr-doc-filter';

export { FilterLeafDirective };