@rt-tools/ui-kit-v2 0.41.0 → 0.43.0

package/src/lib/components/tabs/rt-tabs-more-menu.scss

@@ -0,0 +1,126 @@
+@layer rt-kit.components {
+    /* Панель рисуется в CDK Overlay, вне блока вкладок: свойства объявлены на ней самой. */
+    .rt-tabs-more-menu {
+        --rt-tabs-more-menu-radius: var(--rt-overlay-menu-radius);
+        --rt-tabs-more-menu-border-width: var(--rt-border-width-thin);
+        --rt-tabs-more-menu-shadow: var(--rt-overlay-menu-shadow);
+        --rt-tabs-more-menu-row-radius: var(--rt-radius-sm);
+        --rt-tabs-more-menu-close-radius: var(--rt-radius-full);
+        --rt-tabs-more-menu-max-height: 282px;
+
+        display: flex;
+        overflow: hidden auto;
+        width: var(--rt-size-60);
+        max-height: var(--rt-tabs-more-menu-max-height);
+        box-sizing: border-box;
+        flex-direction: column;
+        padding: var(--rt-overlay-menu-padding-y) var(--rt-space-xs);
+        border: var(--rt-tabs-more-menu-border-width) solid var(--rt-color-border-subtle);
+        border-radius: var(--rt-tabs-more-menu-radius);
+        background: var(--rt-overlay-menu-bg);
+        box-shadow: var(--rt-tabs-more-menu-shadow);
+
+        &__row {
+            display: flex;
+            min-height: var(--rt-overlay-menu-item-min-height);
+            flex: none;
+            align-items: center;
+            border-radius: var(--rt-tabs-more-menu-row-radius);
+            padding-inline-end: var(--rt-space-2);
+
+            &:hover:not(.rt-tabs-more-menu__row--disabled) {
+                background: var(--rt-color-bg-hover);
+            }
+
+            &--disabled {
+                opacity: var(--rt-opacity-disabled);
+            }
+
+            &--invalid {
+                color: var(--rt-color-state-danger);
+            }
+        }
+
+        &__pick {
+            display: flex;
+            min-width: 0;
+            flex: 1 1 auto;
+            align-items: center;
+            padding: var(--rt-overlay-menu-item-padding-y) var(--rt-overlay-menu-item-padding-x);
+            border: 0;
+            background: none;
+            color: var(--rt-color-text-primary);
+            cursor: pointer;
+            font-family: inherit;
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-overlay-menu-item-weight);
+            gap: var(--rt-space-sm);
+            outline: none;
+            text-align: start;
+
+            &:focus-visible {
+                background: var(--rt-color-bg-hover);
+            }
+
+            &[aria-disabled='true'] {
+                cursor: default;
+            }
+
+            .rt-tabs-more-menu__row--invalid & {
+                color: inherit;
+            }
+        }
+
+        &__icon {
+            flex: none;
+        }
+
+        &__label {
+            overflow: hidden;
+            min-width: 0;
+            flex: 1 1 auto;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__badge {
+            flex: none;
+            color: var(--rt-color-text-muted);
+        }
+
+        &__close {
+            display: inline-flex;
+            width: var(--rt-size-5);
+            height: var(--rt-size-5);
+            flex: none;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: 0;
+            border-radius: var(--rt-tabs-more-menu-close-radius);
+            background: transparent;
+            color: var(--rt-color-text-muted);
+            cursor: pointer;
+
+            /* Крестик виден у строки под указателем и у строки с фокусом клавиатуры. Прячется
+               прозрачностью, а не display: строка не меняет ширину, кнопка остаётся в обходе Tab. */
+            opacity: 0;
+
+            .rt-tabs-more-menu__row:hover &,
+            .rt-tabs-more-menu__row:focus-within & {
+                opacity: 1;
+            }
+
+            /* Без наведения — на касании — крестик виден всегда: невидимая кнопка закрыла бы
+               вкладку там, где человек хотел её выбрать. */
+            @media (hover: none) {
+                opacity: 1;
+            }
+
+            &:hover {
+                background: var(--rt-color-bg-hover);
+                color: var(--rt-color-text-primary);
+            }
+        }
+    }
+}

package/src/lib/components/tabs/rt-tabs-more.component.scss

@@ -0,0 +1,29 @@
+@layer rt-kit.components {
+    /* Пункт стоит в ряду последним; пустой остаётся в разметке, чтобы ряд знал его ширину заранее. */
+    .rt-tabs-more {
+        --rt-tabs-more-dot-radius: var(--rt-radius-full);
+
+        display: inline-flex;
+        order: 9999;
+
+        &--idle {
+            position: absolute;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            visibility: hidden;
+        }
+
+        .rt-tab-item__trigger--open {
+            background-color: var(--rt-color-bg-hover);
+            color: var(--rt-color-text-primary);
+        }
+
+        .rt-tab-item__more-dot {
+            width: var(--rt-size-2);
+            height: var(--rt-size-2);
+            border-radius: var(--rt-tabs-more-dot-radius);
+            background-color: var(--rt-color-state-danger);
+        }
+    }
+}

package/src/lib/components/tabs/rt-tabs.component.scss

@@ -74,6 +74,11 @@
                 justify-content: space-between;
             }
 
+            /* Режим «Ещё»: полоса не прокручивается, лишние вкладки стоят в меню. */
+            &--more {
+                overflow-x: clip;
+            }
+
             /* Полосу рисует общий элемент, и своя полоса выбранной вкладки гаснет. У неверной
                вкладки своя полоса остаётся: она красная и у невыбранной. */
             &--ink .rt-tab-item--selected:not(.rt-tab-item--invalid):after {
@@ -110,67 +115,6 @@
             }
         }
 
-        &__rest {
-            position: absolute;
-            z-index: 1;
-            top: 0;
-            bottom: 0;
-            display: flex;
-            width: var(--rt-control-height-lg);
-            align-items: center;
-            justify-content: center;
-            background-color: var(--rt-color-bg-surface);
-            color: var(--rt-color-text-muted);
-            cursor: pointer;
-            transition: color var(--rt-tabs-transition-duration) linear;
-            visibility: hidden;
-
-            &:hover {
-                color: var(--rt-color-text-primary);
-            }
-
-            &--before {
-                left: 0;
-                border-right: var(--rt-tabs-border-width) solid var(--rt-color-border-default);
-            }
-
-            &--after {
-                right: 0;
-                border-left: var(--rt-tabs-border-width) solid var(--rt-color-border-default);
-            }
-
-            &--visible {
-                visibility: visible;
-            }
-        }
-
-        /* Стрелки в своих местах: при переполнении обе стоят по краям, полоса между ними уже.
-           Стрелка в сторону, куда прокручивать некуда, бледнеет и не нажимается. Черта снизу
-           продолжает черту полосы под стрелками. */
-        &__tab-list-wrapper--inline {
-            align-items: stretch;
-
-            .rt-tabs__rest {
-                position: static;
-                display: none;
-                flex-shrink: 0;
-                border: 0;
-                border-bottom: var(--rt-tabs-border-width) solid var(--rt-color-border-default);
-                background-color: transparent;
-            }
-
-            &.rt-tabs__tab-list-wrapper--overflowing .rt-tabs__rest {
-                display: flex;
-                visibility: visible;
-            }
-
-            .rt-tabs__rest--inactive {
-                color: var(--rt-color-text-disabled);
-                cursor: default;
-                pointer-events: none;
-            }
-        }
-
         &__controls {
             display: flex;
             flex-shrink: 0;
@@ -299,6 +243,14 @@
             translate: 0 var(--rt-tab-item-border-width);
         }
 
+        /* Вкладка меню остаётся в разметке ради замера: ряд читает её ширину при каждом пересчёте. */
+        &--in-more {
+            position: absolute;
+            top: 0;
+            left: 0;
+            visibility: hidden;
+        }
+
         &:hover:not(.rt-tab-item--disabled, .rt-tab-item--selected) {
             background-color: var(--rt-color-bg-hover);
             color: var(--rt-color-text-primary);
@@ -466,5 +418,10 @@
             max-width: 100%;
             flex: 1 1 auto;
         }
+
+        /* Замер ряда «Ещё» берёт ширину по содержимому: растянутая заполнила бы ряд целиком. */
+        .rt-tabs__tab-list--measure > &--stretch {
+            flex-grow: 0;
+        }
     }
 }

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

@@ -18,9 +18,12 @@
 | `listMinWidth` / `listMaxWidth` / `listDefaultWidth`    | `number \| string` | 240 / 480 / 320 |
 | `asideMinWidth` / `asideMaxWidth` / `asideDefaultWidth` | `number \| string` | 280 / 560 / 360 |
 | `centerMinWidth`                                        | `number \| string` | 360             |
+| `singleColumnBreakpoint`                                | `number \| null`   | `null`          |
+| `asideOverlayWidth`                                     | `number \| string` | 540             |
 
 Выход: `backClicked`. API панели: `openAside()`, `closeAside()`, `toggleAside()`,
-`toggleAsideCollapsed()`, сигналы `asideOpen()`, `asideCollapsed()`, `listWidth()`, `asideWidth()`.
+`toggleAsideCollapsed()`, сигналы `asideOpen()`, `asideCollapsed()`, `asideOverlay()`, `listWidth()`,
+`asideWidth()`.
 
 ## Главное, что нужно знать
 
@@ -34,6 +37,13 @@
 **Стрелки у правой ручки работают зеркально**: `ArrowLeft` расширяет панель подробностей, потому
 что она растёт влево.
 
+**Порог одной колонки задаёт `singleColumnBreakpoint`.** Без входа порог держат стили: 768. С
+входом одна колонка остаётся только на месте не шире него. Выше порога список и середина стоят
+рядом. Пока место не шире 1080, панель подробностей открывается поверх окна: боковая панель шириной
+`asideOverlayWidth` с затемнением и кнопкой «Закрыть». Её закрывают кнопка, затемнение и Esc, после
+этого `asideOpen()` возвращает `false`. Сигнал `asideOverlay()` говорит, что панель сейчас
+открывается так. Порог выше 1080 не задают: третья колонка появляется на 1080.
+
 ## Края
 
 - Ширина всегда зажимается в границы — и при перетаскивании, и с клавиатуры.

package/src/lib/components/workspace/rt-workspace.component.scss

@@ -123,12 +123,19 @@
             }
         }
 
+        // Порог одной колонки по умолчанию. С порогом из входа вид считает компонент: класс
+        // `--breakpoint` снимает эти правила, а класс `--single` ниже ставит те же по своему числу
         @include bp.place-max(768px) {
-            &__list {
+            &:not(.rt-workspace--breakpoint) .rt-workspace__list {
                 flex-basis: 100%;
             }
         }
 
+        // Панель сведений открыта поверх окна боковой панелью: своей колонки и места она не держит
+        &__aside--overlay {
+            display: none;
+        }
+
         @include bp.place-min(1080px) {
             &__aside {
                 overflow: hidden;
@@ -140,7 +147,25 @@
             }
         }
 
-        &--has-active {
+        &--single {
+            .rt-workspace__list {
+                flex-basis: 100%;
+            }
+
+            &.rt-workspace--has-active .rt-workspace__list {
+                display: none;
+            }
+
+            &.rt-workspace--has-active .rt-workspace__center {
+                flex-basis: 100%;
+            }
+
+            &.rt-workspace--cards {
+                gap: 0;
+            }
+        }
+
+        &--has-active:not(.rt-workspace--breakpoint) {
             @include bp.place-max(768px) {
                 .rt-workspace__list {
                     display: none;
@@ -204,7 +229,9 @@
             }
 
             @include bp.place-max(768px) {
-                gap: 0;
+                &:not(.rt-workspace--breakpoint) {
+                    gap: 0;
+                }
             }
         }
 
@@ -224,4 +251,25 @@
             }
         }
     }
+
+    // Обёртка панели поверх окна боксом не становится: рамка `rt-aside` остаётся ребёнком панели
+    // оверлея. Поля содержимого сняты: шаблон панели сведений писан под колонку без полей
+    .rt-workspace-aside-overlay {
+        display: contents;
+
+        .rt-aside__content {
+            display: flex;
+            flex-direction: column;
+            padding: 0;
+        }
+    }
+
+    // Панель сведений поверх окна держит свою ширину и на узком окне. Общая панель там занимает
+    // окно целиком, и затемнение под ней было бы негде нажать
+    @media (width <= 768px) {
+        .rt-aside-overlay.rt-workspace-aside-pane {
+            width: auto;
+            max-width: 100dvw;
+        }
+    }
 }

package/src/rich-editor/lib/components/chat/CONTEXT.md

@@ -48,12 +48,21 @@ rtChatMessageActions let-message>` рисуется в меню «…» у ре
 ставит курсор в конец. Файлы остаются, сигнала набора нет, закрытое поле текст не принимает.
 Работу метода показывает история `QuickReplies` страницы переписки: кнопка у поля ответа и
 подсказка в боковой панели ставят текст в поле, гостю ничего не уходит. Метод `draftText` читает
-текст поля без разметки и файлы не трогает.
+текст поля без разметки и файлы не трогает, а метод `draftFiles` отдаёт выбранные файлы.
 
 **Подпись на пузыре даёт приложение.** `dateLabel` стоит вместо времени, `dateIcon` на месте значка
 статуса. Значки ошибки отправки и недоставки остаются: они предупреждают. Подписи дней считаются от
 `createdAt`.
 
+**Перевод реплики показывает приложение, чат даёт место.** `translationLabel` стоит в строке времени
+перед временем: «Переведено · 12:58». `canShowTranslation` ставит под текстом кнопку «Показать
+перевод», нажатие уходит выходом `showTranslation`. Текст реплики чат не меняет. Пункт «Показать
+оригинал» приложение кладёт в меню реплики через `rtChatMessageActions`.
+
+**Загрузку и ошибку перевода тоже задаёт приложение.** `translationLoading` ставит перед кнопкой
+спиннер, кнопка приглушена и не нажимается. `translationError` выводит текст ошибки строкой над
+кнопкой, кнопка повторяет запрос. Оба поля работают только вместе с `canShowTranslation`.
+
 **Пузырь мессенджера не шире 85% ленты и не шире 320.** Предел стоит на пузыре, а не на строке:
 кнопки у реплики лежат рядом и не отнимают его ширину. Значок статуса 16, подпись и значок на своём
 пузыре без прозрачности, пузырь гостя белый с тенью. Боковой отступ чата 16, на узком месте 12.
@@ -62,7 +71,8 @@ rtChatMessageActions let-message>` рисуется в меню «…» у ре
 занимает, а без поля слота нет.
 
 **Удалённое сообщение остаётся в ленте** отдельной пометкой вместо текста: иначе непонятно, на
-что отвечали соседние реплики.
+что отвечали соседние реплики. Пузырь у него без заливки и без тени, поэтому в виде мессенджера
+своё удалённое сообщение не берёт белый цвет своей реплики: пометка, время и знак статуса приглушённые.
 
 ## Края
 

package/src/rich-editor/lib/components/chat/rt-chat-messenger.scss

@@ -130,12 +130,18 @@
                 line-height: round(1em * var(--rt-leading-snug), 1px);
             }
 
-            .rt-chat__message--own .rt-chat__message-text,
-            .rt-chat__message--own .rt-chat__message-date,
-            .rt-chat__message--own .rt-chat__message-status {
+            // Снятая реплика стоит без заливки: белый цвет заливки ей не даётся, тени под пустым
+            // пузырём тоже нет
+            .rt-chat__message--own:not(.rt-chat__message--deleted) .rt-chat__message-text,
+            .rt-chat__message--own:not(.rt-chat__message--deleted) .rt-chat__message-date,
+            .rt-chat__message--own:not(.rt-chat__message--deleted) .rt-chat__message-status {
                 color: var(--rt-color-action-on-primary);
             }
 
+            .rt-chat__message--deleted {
+                box-shadow: none;
+            }
+
             .rt-chat__message-footer {
                 justify-content: flex-end;
             }

package/src/rich-editor/lib/components/chat/rt-chat-translation.scss

@@ -0,0 +1,92 @@
+// Перевод реплики: кнопка «Показать перевод» под текстом, её загрузка и строка ошибки. Подпись
+// перевода стоит в строке времени и своих правил не имеет. Лежит отдельно от стилей чата, чтобы
+// файлы уместились в предел длины.
+@layer rt-kit.components {
+    .rt-chat {
+        --rt-chat-translate-outline-width: var(--rt-border-width-medium);
+        --rt-chat-translate-radius: var(--rt-radius-xs);
+        --rt-chat-translate-gap: var(--rt-space-2);
+
+        // Кнопка и строка ошибки прижаты к тексту и друг к другу: зазор пузыря между ними снят, как
+        // у строк одного абзаца
+        &__message-translate,
+        &__message-translate-error {
+            align-self: flex-start;
+            font-size: var(--rt-text-xs);
+            line-height: round(1em * var(--rt-leading-snug), 1px);
+            margin-block-start: calc(-1 * var(--rt-chat-translate-gap));
+            text-align: start;
+        }
+
+        &__message-translate-error {
+            color: var(--rt-color-state-error-text);
+
+            // Ошибки нет: пустой узел не держит строку и зазор пузыря
+            &:empty {
+                display: none;
+            }
+        }
+
+        &__message-translate {
+            display: inline-flex;
+            align-items: center;
+            padding: 0;
+            border: 0;
+            border-radius: var(--rt-chat-translate-radius);
+            background: transparent;
+            color: var(--rt-color-action-primary);
+            cursor: pointer;
+            font-family: inherit;
+            font-weight: var(--rt-font-weight-medium);
+            gap: var(--rt-space-1);
+
+            &:hover {
+                text-decoration: underline;
+            }
+
+            &:focus-visible {
+                outline: var(--rt-chat-translate-outline-width) solid var(--rt-color-border-focus);
+            }
+
+            // Перевод загружается: кнопка приглушена и не нажимается
+            &--loading,
+            &--loading:hover {
+                color: var(--rt-chat-bubble-date);
+                cursor: default;
+                text-decoration: none;
+            }
+        }
+
+        // Спиннер виден только при загрузке. Селектор из двух классов: правило самого спиннера
+        // ставит ему показ тем же весом
+        &__message-translate &__message-translate-spinner {
+            display: none;
+        }
+
+        &__message-translate--loading &__message-translate-spinner {
+            display: inline-flex;
+        }
+
+        &--messenger {
+            --rt-chat-translate-gap: var(--rt-space-0-5);
+
+            // На заливке цвета действия синяя кнопка и красная ошибка не читаются: они белые
+            .rt-chat__message--own .rt-chat__message-translate-error {
+                color: var(--rt-color-action-on-primary);
+            }
+
+            .rt-chat__message--own .rt-chat__message-translate {
+                color: var(--rt-color-action-on-primary);
+                text-decoration: underline;
+
+                &:focus-visible {
+                    outline-color: var(--rt-color-action-on-primary);
+                }
+            }
+
+            .rt-chat__message--own .rt-chat__message-translate--loading {
+                text-decoration: none;
+            }
+        }
+    }
+}

package/types/rt-tools-ui-kit-v2-calendar.d.ts

@@ -38,12 +38,24 @@ export declare namespace IRtCalendar {
     key: string;
     day: Day;
   }
-  /** View-модель месяца: подпись, пустые ячейки до первого дня, дни. */
+  /** День соседнего месяца в начале или в конце сетки: бледный, не нажимается. */
+  interface OutsideDay {
+    key: string;
+    dayOfMonth: number;
+    /** День за границей выбора — ещё и зачёркнут. */
+    crossed: boolean;
+  }
+  /**
+   * View-модель месяца: подпись, пустые ячейки до первого дня, дни. Дни соседних месяцев
+   * необязательны: заданы — встают на место пустых ячеек и дописывают последнюю неделю.
+   */
   interface Month {
     key: string;
     label: string;
     leadingBlanks: readonly number[];
     days: readonly Day[];
+    leadingDays?: readonly OutsideDay[];
+    trailingDays?: readonly OutsideDay[];
   }
 }
 export declare class RtCalendarComponent {