@rt-tools/ui-kit-v2 0.4.0 → 0.6.0

package/src/lib/components/table/settings-aside/rt-table-settings-aside.component.scss

@@ -1,7 +1,9 @@
-/* rt-table-settings-aside — ViewEncapsulation.None (common/ui). Своей раскладки нет:
-   chrome даёт rt-aside, тело — rt-table-settings-panel. `.rt-table-settings-aside` —
-   сам хост, и он не должен добавлять бокс между асайдом и его местом в overlay. */
+@layer rt-kit.components {
+    /* rt-table-settings-aside — ViewEncapsulation.None (common/ui). Своей раскладки нет:
+       chrome даёт rt-aside, тело — rt-table-settings-panel. `.rt-table-settings-aside` —
+       сам хост, и он не должен добавлять бокс между асайдом и его местом в overlay. */
 
-.rt-table-settings-aside {
-    display: contents;
+    .rt-table-settings-aside {
+        display: contents;
+    }
 }

package/src/lib/components/table/settings-panel/rt-table-settings-panel.component.scss

@@ -1,77 +1,87 @@
-/* rt-table-settings-panel — ViewEncapsulation.None (common/ui): правила таргетируют
-   BEM-класс блока, как во всём ките. */
-.rt-table-settings-panel {
-    &__list {
-        display: flex;
-        min-width: 320px;
-        flex-direction: column;
-        padding: 0;
-        margin: 0;
-        gap: var(--rt-space-2xs);
-        list-style: none;
-    }
-
-    &__row {
-        display: flex;
-        align-items: center;
-        padding: var(--rt-space-2xs) var(--rt-space-xs);
-        border: var(--rt-border-width-thin) solid var(--rt-color-border-default);
-        border-radius: var(--rt-radius-md);
-        background-color: var(--rt-color-bg-surface);
-        gap: var(--rt-space-sm);
+@layer rt-kit.components {
+    /* rt-table-settings-panel — ViewEncapsulation.None (common/ui): правила таргетируют
+       BEM-класс блока, как во всём ките. */
+    .rt-table-settings-panel {
+        --rt-table-settings-panel-row-radius: var(--rt-radius-md);
+        --rt-table-settings-panel-row-border-width: var(--rt-border-width-thin);
+        --rt-table-settings-panel-row-shadow: var(--rt-shadow-card);
 
-        &--hidden {
-            color: var(--rt-color-text-muted);
+        &__list {
+            display: flex;
+            min-width: 320px;
+            flex-direction: column;
+            padding: 0;
+            margin: 0;
+            gap: var(--rt-space-2xs);
+            list-style: none;
         }
 
-        &.cdk-drag-preview {
-            box-shadow: var(--rt-shadow-card);
-        }
+        &__row {
+            /* Строка при перетаскивании уезжает в .cdk-drag-preview вне блока:
+               свойство объявляется на ней самой, а не в корне. */
+            --rt-table-settings-panel-drag-duration: var(--rt-duration-base);
 
-        &.cdk-drag-placeholder {
-            opacity: 0.4;
-        }
+            display: flex;
+            align-items: center;
+            padding: var(--rt-space-2xs) var(--rt-space-xs);
+            border: var(--rt-table-settings-panel-row-border-width) solid var(--rt-color-border-default);
+            border-radius: var(--rt-table-settings-panel-row-radius);
+            background-color: var(--rt-color-bg-surface);
+            gap: var(--rt-space-sm);
+
+            &--hidden {
+                color: var(--rt-color-text-muted);
+            }
+
+            &.cdk-drag-preview {
+                box-shadow: var(--rt-table-settings-panel-row-shadow);
+            }
+
+            &.cdk-drag-placeholder {
+                opacity: 0.4;
+            }
 
-        &.cdk-drag-animating {
-            transition: transform var(--rt-duration-base) cubic-bezier(0, 0, 0.2, 1);
+            &.cdk-drag-animating {
+                transition: transform var(--rt-table-settings-panel-drag-duration) cubic-bezier(0, 0, 0.2, 1);
+            }
         }
-    }
 
-    &__handle {
-        display: inline-flex;
-        width: 24px;
-        height: 24px;
-        align-items: center;
-        justify-content: center;
-        padding: 0;
-        border: none;
-        background: none;
-        cursor: grab;
+        &__handle {
+            display: inline-flex;
+            width: 24px;
+            height: 24px;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: none;
+            background: none;
+            cursor: grab;
+
+            &:active {
+                cursor: grabbing;
+            }
 
-        &:active {
-            cursor: grabbing;
+            &--placeholder {
+                cursor: default;
+            }
         }
 
-        &--placeholder {
-            cursor: default;
+        &__label {
+            overflow: hidden;
+            min-width: 0;
+            flex: 1;
+            font-size: var(--rt-text-sm);
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
-    }
 
-    &__label {
-        overflow: hidden;
-        min-width: 0;
-        flex: 1;
-        font-size: var(--rt-text-sm);
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        &__toggle {
+            margin-left: auto;
+        }
     }
 
-    &__toggle {
-        margin-left: auto;
+    /* Плавающий клон строки во время перетаскивания (CDK монтирует его в body). */
+    .cdk-drop-list-dragging .rt-table-settings-panel__row:not(.cdk-drag-placeholder) {
+        transition: transform var(--rt-table-settings-panel-drag-duration) cubic-bezier(0, 0, 0.2, 1);
     }
 }
-
-/* Плавающий клон строки во время перетаскивания (CDK монтирует его в body). */
-.cdk-drop-list-dragging .rt-table-settings-panel__row:not(.cdk-drag-placeholder) {
-    transition: transform var(--rt-duration-base) cubic-bezier(0, 0, 0.2, 1);
-}

package/src/lib/components/table/sort-header/CONTEXT.md

@@ -0,0 +1,40 @@
+# `rt-table-sort-header`
+
+Заголовок сортируемой колонки. Ставится атрибутом на ячейку шапки таблицы, а ключ колонки —
+тот же, что в `cdkColumnDef` и в `[columnsConfig]`.
+
+```html
+<th *cdkHeaderCellDef cdk-header-cell rtSortHeader="checkIn">Заезд</th>
+```
+
+| вход           | тип      | умолчание    |
+| -------------- | -------- | ------------ |
+| `rtSortHeader` | `string` | обязательный |
+
+## Главное, что нужно знать
+
+**Сортируемость объявляет таблица, а не заголовок.** Колонка получает кнопку только когда
+помечена `sortable` в `[columnsConfig]`; иначе заголовок остаётся обычной подписью, и лишнего
+элемента управления в шапке не появляется.
+
+**Направление читается с самой ячейки.** `aria-sort` стоит на `<th>`, а не на кнопке внутри:
+скринридер объявляет порядок вместе с колонкой. Глазами то же самое показывает стрелка — обе
+стрелки без сортировки, одна выбранная при ней.
+
+**Порядок ходит по кругу из трёх состояний:** по возрастанию → по убыванию → без сортировки.
+Третье нужно, чтобы вернуть исходный порядок, не перезагружая список.
+
+**Подпись проецируется внутрь кнопки** и служит её доступным именем — отдельного `aria-label`
+у кнопки нет и не должно быть.
+
+## Края
+
+- Блок BEM объявлен в шаблоне, а не только классом на хосте: `rtElem` внутри требует блока в
+  своём инжекторе, и без него компонент не поднимался вовсе — потребитель получал `NG0201`.
+- Сортировка по соседней колонке эту не помечает: `aria-sort` у неё остаётся `none`, а стрелка
+  возвращается к нейтральной.
+
+## Рядом
+
+- [`rt-table`](../CONTEXT.md) — таблица, у которой заголовок спрашивает порядок и которой
+  сообщает о нажатии.

package/src/lib/components/table/sort-header/rt-table-sort-header.component.scss

@@ -1,39 +1,41 @@
-/* rt-table-sort-header — заголовок сортируемой колонки внутри rt-table.
-   ViewEncapsulation.None: классы доступны без scope-attrs, токены --rt-* наследуются. */
+@layer rt-kit.components {
+    /* rt-table-sort-header — заголовок сортируемой колонки внутри rt-table.
+       ViewEncapsulation.None: классы доступны без scope-attrs, токены --rt-* наследуются. */
 
-.rt-table-sort-header {
-    &__button {
-        display: inline-flex;
-        align-items: center;
-        padding: 0;
-        border: none;
-        background: none;
-        color: inherit;
-        cursor: pointer;
-        font: inherit;
-        gap: var(--rt-space-xs);
-        text-align: inherit;
+    .rt-table-sort-header {
+        &__button {
+            display: inline-flex;
+            align-items: center;
+            padding: 0;
+            border: none;
+            background: none;
+            color: inherit;
+            cursor: pointer;
+            font: inherit;
+            gap: var(--rt-space-xs);
+            text-align: inherit;
 
-        &:hover {
-            color: var(--rt-color-text-primary);
-        }
+            &:hover {
+                color: var(--rt-color-text-primary);
+            }
 
-        &:focus-visible {
-            outline: 2px solid var(--rt-color-action-primary);
-            outline-offset: 2px;
+            &:focus-visible {
+                outline: 2px solid var(--rt-color-action-primary);
+                outline-offset: 2px;
+            }
         }
-    }
 
-    &__icon {
-        flex: 0 0 auto;
-        color: var(--rt-color-text-muted);
-    }
+        &__icon {
+            flex: 0 0 auto;
+            color: var(--rt-color-text-muted);
+        }
 
-    &__button--active {
-        color: var(--rt-color-text-primary);
+        &__button--active {
+            color: var(--rt-color-text-primary);
 
-        .rt-table-sort-header__icon {
-            color: var(--rt-color-action-primary);
+            .rt-table-sort-header__icon {
+                color: var(--rt-color-action-primary);
+            }
         }
     }
 }

package/src/lib/components/tabs/CONTEXT.md

@@ -41,6 +41,11 @@
 **Идентификатор, которого нет, откатывается на первую доступную вкладку.** То же с отключённой:
 активной она стать не может. Так вкладка из старой ссылки не оставляет пустой экран.
 
+**Контрол шапки объявляется `[rtTabsControl]` на `<ng-template>`.** Сторона задаётся значением
+директивы: `rtTabsControl="left"` слева, `[rtTabsControl]="side"` — вычисленной стороной. Без
+значения контрол встаёт справа — пустая строка приводится к правой стороне намеренно, иначе
+`<ng-template rtTabsControl>` не попадал бы ни в один слот и пропадал из шапки вовсе.
+
 ## Клавиатура и доступность
 
 - Стрелки (влево/вправо, а в вертикальной раскладке вверх/вниз) перешагивают отключённые вкладки