SIMAI Framework — от утилиты до умного компонента

<section class="grid gap-3 p-2 md:p-4 bg-surface-0 color-on-surface" data-layout-demo>
  <header class="flex flex-col md:flex-row md:items-cross-end justify-between gap-2">
    <div class="grid gap-1/3">
      <p class="m-0 color-primary text-1/2 weight-8">ОДИН НАБОР ДАННЫХ</p>
      <h2 class="m-0 sf-h-3">Запуск новой версии</h2>
    </div>
    <div class="inline-flex p-1/2 radius-1/2 border border-outline-variant bg-surface-container" role="group" aria-label="Представление данных">
      <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1 segment-start" data-layout="list"><span class="sf-button-text-container">Список</span></button>
      <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1 segment-middle" data-layout="cards"><span class="sf-button-text-container">Карточки</span></button>
      <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1 segment-end" data-layout="focus"><span class="sf-button-text-container">Фокус</span></button>
    </div>
  </header>
  <div class="p-2 md:p-3 radius-2 border border-outline-variant bg-surface-container">
    <article class="grid gap-2" data-project>
      <header class="flex flex-wrap items-cross-center justify-between gap-1 p-1 radius-1 bg-primary-container color-on-primary-container" data-summary>
        <div class="grid gap-1/3"><p class="m-0 color-on-surface-variant">Версия 5.4</p><h3 class="m-0 sf-h-4">Готовность команды</h3></div>
        <span class="p-x-1 p-y-1/3 radius-rounded bg-success-container color-on-success-container text-1/2 weight-8">В графике</span>
      </header>
      <div class="flex flex-col gap-1" data-items>
        <section class="grid grid-col-2 items-cross-center gap-1 p-1 radius-1 border border-outline-variant bg-surface-0" data-item><div class="grid gap-1/3"><strong>Интерфейсы</strong><span class="color-on-surface-variant text-1/2">Готовые экраны</span></div><b class="color-primary text-2 bold" data-value>18/24</b></section>
        <section class="grid grid-col-2 items-cross-center gap-1 p-1 radius-1 border border-outline-variant bg-surface-0" data-item><div class="grid gap-1/3"><strong>Компоненты</strong><span class="color-on-surface-variant text-1/2">Проверено тестами</span></div><b class="color-primary text-2 bold" data-value>92%</b></section>
        <section class="grid grid-col-2 items-cross-center gap-1 p-1 radius-1 border border-outline-variant bg-surface-0" data-item><div class="grid gap-1/3"><strong>Документация</strong><span class="color-on-surface-variant text-1/2">Описанные сценарии</span></div><b class="color-primary text-2 bold" data-value>36</b></section>
      </div>
    </article>
  </div>
  <footer class="flex flex-wrap items-cross-center gap-1 color-on-surface-variant text-1/2">
    <span>Применены классы:</span>
    <code class="p-x-1 p-y-1/3 radius-1/2 bg-primary-container color-on-primary-container weight-7" data-recipe aria-live="polite">flex flex-col gap-1</code>
  </footer>
</section>

const demo = document.querySelector('[data-layout-demo]');
const project = demo.querySelector('[data-project]');
const summary = demo.querySelector('[data-summary]');
const items = demo.querySelector('[data-items]');
const cards = [...demo.querySelectorAll('[data-item]')];
const values = [...demo.querySelectorAll('[data-value]')];
const recipe = demo.querySelector('[data-recipe]');
const buttons = [...demo.querySelectorAll('[data-layout]')].filter((item) => item.tagName === 'BUTTON');

const modes = {
  list: {
    project: 'grid gap-2',
    summary: 'flex flex-wrap items-cross-center justify-between gap-1 p-2 radius-1 bg-primary-container color-on-primary-container',
    items: 'flex flex-col gap-1',
    card: 'grid grid-col-2 items-cross-center gap-1 p-2 radius-1 border border-outline-variant bg-surface-0',
    value: 'color-primary text-2 bold',
    recipe: 'flex flex-col gap-1'
  },
  cards: {
    project: 'grid gap-2',
    summary: 'flex flex-wrap items-cross-center justify-between gap-1 p-2 radius-1 bg-primary-container color-on-primary-container',
    items: 'grid grid-col-1 sm:grid-col-3 gap-2',
    card: 'flex flex-col justify-between gap-2 p-2 radius-1 border border-outline-variant bg-surface-0',
    value: 'color-primary text-3 bold',
    recipe: 'grid grid-col-1 sm:grid-col-3 gap-2'
  },
  focus: {
    project: 'grid grid-col-1 md:grid-col-3 gap-2',
    summary: 'flex flex-col justify-between gap-2 p-2 radius-1 bg-primary-container color-on-primary-container md:col-span-1',
    items: 'grid grid-col-1 sm:grid-col-2 gap-1 md:col-span-2',
    card: 'grid grid-col-2 items-cross-center gap-1 p-2 radius-1 border border-outline-variant bg-surface-0',
    value: 'color-primary text-2 bold',
    recipe: 'grid grid-col-1 md:grid-col-3 gap-2'
  }
};

function select(layout) {
  const mode = modes[layout];
  project.className = mode.project;
  summary.className = mode.summary;
  items.className = mode.items;
  cards.forEach((card) => card.className = mode.card);
  values.forEach((value) => value.className = mode.value);
  recipe.textContent = mode.recipe;
  buttons.forEach((button) => {
    const active = button.dataset.layout === layout;
    button.classList.toggle('active', active);
    button.setAttribute('aria-pressed', active ? 'true' : 'false');
  });
}

buttons.forEach((button) => button.addEventListener('click', () => select(button.dataset.layout)));
select('list');