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

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

@@ -0,0 +1,22 @@
+# `rt-toolbar`
+
+Полоса действий с тремя слотами. Слоты объявляются директивами на `ng-template`.
+
+```html
+<rt-toolbar dense>
+    <ng-template rtToolbarLeft><rt-icon-button icon="arrow-left" ariaLabel="Назад" /></ng-template>
+    <ng-template rtToolbarCenter><h3>Заявка №12</h3></ng-template>
+    <ng-template rtToolbarRight><rt-menu … /></ng-template>
+</rt-toolbar>
+```
+
+| вход    | тип       | умолчание |
+| ------- | --------- | --------- |
+| `dense` | `boolean` | `false`   |
+
+Выходов нет.
+
+## Главное, что нужно знать
+
+**Без единого слота панель не рисуется вовсе** — ни одного узла в DOM. Необъявленный слот тоже
+не создаёт пустой полосы: пустая полоса занимала бы место и растягивала соседние.

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

@@ -0,0 +1,34 @@
+# `[rtTooltip]`
+
+```html
+<button rtButton rtTooltipPlacement="top" [rtTooltip]="'Удалить строку'">…</button>
+<rt-icon-button icon="ico-trash" ariaLabel="Удалить" tooltip="Удалить" />
+```
+
+| вход                 | тип                           | умолчание |
+| -------------------- | ----------------------------- | --------- |
+| `rtTooltip`          | `string \| null \| undefined` | `''`      |
+| `rtTooltipPlacement` | `'top' \| 'bottom'`           | `'top'`   |
+
+Выходов нет. Панель — `rt-tooltip` в оверлее CDK, `role="tooltip"`.
+
+## Главное, что нужно знать
+
+**Пустой текст выключает директиву целиком.** `''`, пробелы, `null`, `undefined` — всё это
+no-op, а не пустая панель под курсором. Поэтому директиву вешают на иконочные кнопки
+безусловно и «включают», выставив строку. Вход принимает `null`/`undefined` и нормализует их
+сам — так `[rtTooltip]="value | date"` не ломает строгую типизацию шаблона.
+
+**Подсказка появляется с задержкой 300 мс.** Она гасит мелькание при быстром проходе курсора по
+ряду кнопок. Уход курсора до истечения задержки не показывает ничего.
+
+## Как этим пользоваться
+
+- Показывают и наведение, и фокус с клавиатуры; прячут уход курсора, потеря фокуса и **клик**
+  (панель мешала бы смотреть на результат нажатия).
+- `rt-icon-button` уже несёт эту директиву — там достаточно входа `tooltip`.
+- Подсказка не заменяет `aria-label`: она вспомогательная, а имя контрола задаётся отдельно.
+
+## Рядом
+
+- [`[rtPopover]`](../popover/CONTEXT.md) — когда в панель нужно положить разметку.

package/src/lib/components/welcome-dialog/CONTEXT.md

@@ -0,0 +1,20 @@
+# `rt-welcome-dialog`
+
+Приветственное окно с текстом и одной кнопкой. Открывается через
+[`RtDialogService`](../dialog/CONTEXT.md).
+
+```typescript
+this.#dialog.open<RtWelcomeDialogComponent, IRtWelcomeDialog.Data>(RtWelcomeDialogComponent, {
+    data: { message: 'Добро пожаловать\n\nЗдесь появятся ваши заявки.', ctaLabel: 'Поехали' },
+});
+```
+
+Данные приходят токеном `RT_DIALOG_DATA`: `message`, необязательный `ctaLabel`.
+
+## Главное, что нужно знать
+
+**Заголовок компонент выбирает сам — это первый абзац сообщения.** Приветствие приходит одной
+строкой из настроек приложения, и делить её на заголовок и текст приходится здесь: абзацы
+разделяются пустой строкой, пустые отбрасываются.
+
+Без данных окно рисуется пустым, но не падает — остаётся одна кнопка.

package/src/lib/components/welcome-dialog/rt-welcome-dialog.component.scss

@@ -1,7 +1,11 @@
 /* Welcome-модалка первого входа — открывается через RtDialogService.open().
-   rt-dialog даёт styled-frame, контент внутри получает свой padding. */
+   rt-dialog даёт styled-frame, контент внутри получает свой padding.
 
-:host {
+   ViewEncapsulation.None. Хост адресуется по имени элемента, а не по классу
+   блока: класс `.rt-welcome-dialog` висит и на `<rt-welcome-dialog>`, и на
+   обёртке содержимого внутри него, поэтому правила обёртки вложены в хост. */
+
+rt-welcome-dialog {
     display: contents;
 
     .rt-welcome-dialog {

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

@@ -0,0 +1,46 @@
+# `rt-workspace`
+
+Трёхколоночный рабочий стол: список, карточка, панель подробностей. Колонки тянутся мышью и
+клавиатурой, ширины запоминаются.
+
+```html
+<rt-workspace storageKey="inbox" [hasActive]="!!active()" (backClicked)="clearActive()">
+    <ng-template rtWorkspaceList let-api><rt-thread-list … /></ng-template>
+    <ng-template rtWorkspaceCenter><app-card /></ng-template>
+    <ng-template rtWorkspaceAside><rt-workspace-details … /></ng-template>
+</rt-workspace>
+```
+
+| вход                                                    | тип                | умолчание       |
+| ------------------------------------------------------- | ------------------ | --------------- |
+| `storageKey`                                            | `string \| null`   | `null`          |
+| `hasActive`                                             | `boolean`          | `false`         |
+| `listMinWidth` / `listMaxWidth` / `listDefaultWidth`    | `number \| string` | 240 / 480 / 320 |
+| `asideMinWidth` / `asideMaxWidth` / `asideDefaultWidth` | `number \| string` | 280 / 560 / 360 |
+| `centerMinWidth`                                        | `number \| string` | 360             |
+
+Выход: `backClicked`. API панели: `openAside()`, `closeAside()`, `toggleAside()`,
+`toggleAsideCollapsed()`, сигналы `asideOpen()`, `asideCollapsed()`, `listWidth()`, `asideWidth()`.
+
+## Главное, что нужно знать
+
+**Без `storageKey` ширины не запоминаются.** С ключом они переживают пересоздание компонента:
+раскладку рабочего стола настраивают один раз, и сбрасывать её на каждом заходе было бы хуже.
+
+**Ручки — полноценные разделители**: `role="separator"`, в таб-порядке, стрелки двигают их с
+шагом 16px, двойной клик возвращает умолчание. Текущая ширина и границы объявлены через
+`aria-valuenow/min/max`.
+
+**Стрелки у правой ручки работают зеркально**: `ArrowLeft` расширяет панель подробностей, потому
+что она растёт влево.
+
+## Края
+
+- Ширина всегда зажимается в границы — и при перетаскивании, и с клавиатуры.
+- На узком экране появляется полоса с кнопками «назад» и «подробности» (только при `hasActive`);
+  «назад» закрывает панель подробностей и поднимает событие.
+- `asideCollapsed` — это «свернуть на широком экране», `asideOpen` — «показать на узком».
+
+## Рядом
+
+- [`rt-workspace-details`](../workspace-details/CONTEXT.md) — типовое наполнение правой панели.

package/src/lib/components/workspace-details/CONTEXT.md

@@ -0,0 +1,42 @@
+# `rt-workspace-details`
+
+Типовое наполнение правой панели рабочего стола: перечень полей, суммы, переключатели, переход
+по этапам, история и кнопки действий.
+
+```html
+<rt-workspace-details
+    title="Заявка №12"
+    [rows]="rows()"
+    [money]="money()"
+    [toggles]="toggles()"
+    [transition]="transition()"
+    [audit]="audit()"
+    [actions]="actions()"
+    [loading]="loading()"
+    (toggleChange)="onToggle($event)"
+    (transitionSubmit)="moveStage($event)"
+    (auditLoadMore)="loadMoreAudit()"
+    (actionClicked)="runAction($event)" />
+```
+
+Входы: `title`, `entityId`, `loading`, `busy`, `rows`, `agentEdit`, `money`, `toggles`,
+`toggleHint`, `transition`, `audit`, `actions`, `error`.
+Выходы: `toggleChange`, `agentReassign`, `transitionSubmit`, `transitionSuccessClose`,
+`transitionErrorClose`, `auditLoadMore`, `actionClicked`.
+
+## Главное, что нужно знать
+
+**Вкладки появляются только вместе с переходом или историей.** Пока есть одни поля, они рисуются
+сразу: одна вкладка вместо содержимого была бы лишним щелчком.
+
+**Ошибка не рисуется внутри панели — она уходит в [`NotificationBus`](../toast/CONTEXT.md).**
+Панель узкая, и сообщение в ней сдвигало бы данные; тост показывает ошибку поверх. Одна и та же
+строка не повторяется на каждой перерисовке.
+
+## Края
+
+- `loading` подменяет заглушками значения полей и сумм, подписи остаются.
+- Действие с `confirm` открывает [`[rtConfirm]`](../confirm-popover/CONTEXT.md), и
+  `actionClicked` приходит только после подтверждения.
+- Смена исполнителя (`agentEdit`) — отдельный сценарий с выбором и подтверждением; событие
+  `agentReassign` отдаёт идентификатор нового исполнителя.

package/src/styles/_semantic.scss

@@ -1,6 +1,11 @@
-/* Semantic design tokens — light defaults. */
+/* Semantic design tokens — light defaults.
 
-:root {
+   Тело вынесено в @mixin по той же причине, что и у тёмной темы: набор нужен не
+   только на `:root`, но и на отдельном контейнере. Без этого светлую половину
+   пары «светлая ↔ тёмная» нельзя показать, пока приложение стоит в тёмной теме, —
+   контейнер унаследует тёмные значения, и обе половины покажут одно и то же. */
+
+@mixin rt-theme-light-tokens {
     /* Background */
     --rt-color-bg-page: var(--rt-neutral-50);
     --rt-color-bg-surface: var(--rt-neutral-0);
@@ -287,6 +292,10 @@
     --rt-field-value-empty-color: var(--rt-color-text-muted);
 }
 
+:root {
+    @include rt-theme-light-tokens;
+}
+
 /* На тач-устройствах инпут не меньше 16px: WebKit (весь iOS, включая Chrome)
    зумит страницу при фокусе на поле с font-size < 16px — отсюда горизонтальный
    сдвиг вёрстки. Десктоп сохраняет плотный 14px. */

package/styles/tokens.css

@@ -192,7 +192,12 @@
   --rt-bp-xl: 1380px;
 }
 
-/* Semantic design tokens — light defaults. */
+/* Semantic design tokens — light defaults.
+
+   Тело вынесено в @mixin по той же причине, что и у тёмной темы: набор нужен не
+   только на `:root`, но и на отдельном контейнере. Без этого светлую половину
+   пары «светлая ↔ тёмная» нельзя показать, пока приложение стоит в тёмной теме, —
+   контейнер унаследует тёмные значения, и обе половины покажут одно и то же. */
 :root {
   /* Background */
   --rt-color-bg-page: var(--rt-neutral-50);
@@ -653,10 +658,16 @@ html.rt-theme-dark .rt-logo {
   --rt-btn-color: var(--rt-color-on-disabled, #6b7280);
   cursor: not-allowed;
 }
+.rt-button {
+  /* `flex-shrink: 0` — иконке заданного размера. Без него в кнопке, которой ширину
+     навязали снаружи (пункт меню `rt-split-button` берёт её от панели), лейбл давит
+     на иконку, и та сжимается до нуля: место занято, а иконки не видно. */
+}
 .rt-button__icon {
   display: inline-flex;
   width: var(--rt-btn-icon-size);
   height: var(--rt-btn-icon-size);
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   font-size: var(--rt-btn-icon-size);
@@ -774,6 +785,20 @@ html.rt-theme-dark .rt-logo {
   --rt-btn-icon-size: 1.125rem;
   --rt-btn-spinner-size: 1.125rem;
 }
+.rt-button--xl {
+  --rt-btn-height: 60px;
+  --rt-btn-padding: 0 1.75rem;
+  --rt-btn-font-size: 1.125rem;
+  --rt-btn-icon-size: 1.25rem;
+  --rt-btn-spinner-size: 1.25rem;
+}
+.rt-button--2xl {
+  --rt-btn-height: 70px;
+  --rt-btn-padding: 0 2rem;
+  --rt-btn-font-size: 1.1875rem;
+  --rt-btn-icon-size: 1.375rem;
+  --rt-btn-spinner-size: 1.375rem;
+}
 .rt-button--icon-only {
   width: var(--rt-btn-height);
   padding: 0;