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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit-v2",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",

package/src/lib/components/data-table/CONTEXT.md

@@ -80,6 +80,11 @@
 глифом шрифта Material Symbols, как первый кит. Шрифт кит не везёт: глиф виден, где его подключило
 приложение.
 
+**Размер значка ячейки задаёт поле `icon.size` колонки:** `sm`, `md` или `lg`, без поля — `lg`;
+значение не из списка, пришедшее из сохранённых настроек мимо типов, тоже рисуется как `lg`.
+Ячейка сама ставит ступени значка `--rt-icon-step-*`, и глиф читает те же свойства: значок набора
+и глиф в одной колонке одного размера, даже если предок сменил ступени для своих детей.
+
 ## Части семейства
 
 | Часть                             | Что делает                                                          |

package/src/lib/components/data-table/cell/rt-data-table-cell.component.scss

@@ -8,6 +8,12 @@
         --rt-data-table-cell-transition-duration: var(--rt-duration-fast);
         --rt-data-table-cell-glyph-size: var(--rt-size-6);
 
+        /* Значок набора в ячейке идёт теми же ступенями, что глиф: предок, сменивший ступень
+           значка для своих детей, иначе развёл бы их размеры в одной колонке. */
+        --rt-icon-step-sm: var(--rt-size-4);
+        --rt-icon-step-md: var(--rt-size-5);
+        --rt-icon-step-lg: var(--rt-size-6);
+
         position: relative;
         display: flex;
         width: 100%;
@@ -34,6 +40,15 @@
             &--filled {
                 font-variation-settings: 'FILL' 1;
             }
+
+            /* Размер значка из описания колонки — те же ступени, что у значка кита в ячейке. */
+            &--sm {
+                --rt-data-table-cell-glyph-size: var(--rt-icon-step-sm);
+            }
+
+            &--md {
+                --rt-data-table-cell-glyph-size: var(--rt-icon-step-md);
+            }
         }
 
         &__prefix,

package/src/lib/components/data-table/stories/component/test-data-table-matrix.component.scss

@@ -0,0 +1,10 @@
+@layer rt-kit.components {
+    /* Пояснение под матрицей: почему в колонке глифа видно начало слова, а не значок. Ширина —
+       две ступени по 400px, чтобы строка не тянулась на всю витрину. */
+    .app-data-table-matrix__note {
+        max-width: calc(var(--rt-size-100) * 2);
+        color: var(--rt-color-text-muted);
+        font-size: var(--rt-text-sm);
+        line-height: var(--rt-leading-relaxed);
+    }
+}

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

@@ -47,7 +47,19 @@ rtChatMessageActions let-message>` рисуется в меню «…» у ре
 **Готовый текст подставляет метод `setDraft`.** Он заменяет черновик во всех трёх полях ответа и
 ставит курсор в конец. Файлы остаются, сигнала набора нет, закрытое поле текст не принимает.
 Работу метода показывает история `QuickReplies` страницы переписки: кнопка у поля ответа и
-подсказка в боковой панели ставят текст в поле, гостю ничего не уходит.
+подсказка в боковой панели ставят текст в поле, гостю ничего не уходит. Метод `draftText` читает
+текст поля без разметки и файлы не трогает.
+
+**Подпись на пузыре даёт приложение.** `dateLabel` стоит вместо времени, `dateIcon` на месте значка
+статуса. Значки ошибки отправки и недоставки остаются: они предупреждают. Подписи дней считаются от
+`createdAt`.
+
+**Пузырь мессенджера не шире 85% ленты и не шире 320.** Предел стоит на пузыре, а не на строке:
+кнопки у реплики лежат рядом и не отнимают его ширину. Значок статуса 16, подпись и значок на своём
+пузыре без прозрачности, пузырь гостя белый с тенью. Боковой отступ чата 16, на узком месте 12.
+
+**Слот `rtChatComposerBar` стоит над рамкой поля ответа** во всех видах поля. Пустой слот места не
+занимает, а без поля слота нет.
 
 **Удалённое сообщение остаётся в ленте** отдельной пометкой вместо текста: иначе непонятно, на
 что отвечали соседние реплики.

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

@@ -1,5 +1,7 @@
 // Вид мессенджера чата: метки дней, ряд кнопок под полем, пузыри мягкие, свой — цвета действия.
 // Лежит отдельно от стилей чата, чтобы оба файла уместились в предел длины.
+@use '../../../../styles/breakpoints' as bp;
+
 @layer rt-kit.components {
     .rt-chat {
         --rt-chat-day-label-radius: var(--rt-radius-full);
@@ -32,20 +34,25 @@
             }
         }
 
-        // Вид мессенджера: пузырь мягкий, свой — цвета действия, пузырь гостя серый на белой ленте,
-        // время и знак доставки справа внизу
+        // Вид мессенджера: пузырь мягкий, свой — цвета действия, пузырь гостя белый с тенью на белой
+        // ленте, время и знак доставки справа внизу
         &--messenger {
             --rt-chat-bubble-radius: var(--rt-radius-xl);
             --rt-chat-bubble-corner-radius: var(--rt-radius-sm);
             --rt-chat-messenger-border-width: var(--rt-border-width-thin);
             --rt-chat-messenger-panel-radius: var(--rt-radius-lg);
             --rt-chat-messenger-actions-shadow: var(--rt-shadow-sm);
+            --rt-chat-bubble-in-shadow: var(--rt-shadow-sm);
             --rt-chat-bubble-own-bg: var(--rt-color-action-primary);
-            --rt-chat-bubble-in-bg: var(--rt-color-bg-subtle);
+            --rt-chat-bubble-in-bg: var(--rt-color-bg-surface);
 
             box-sizing: border-box;
             padding: var(--rt-space-4);
 
+            @include bp.place-max(bp.$rt-bp-md) {
+                padding: calc(var(--rt-space-2) + var(--rt-space-1));
+            }
+
             // Высоту шапке дают имя и строка под ним, плотная полоса панели здесь не нужна
             .rt-chat__header {
                 --rt-toolbar-height: auto;
@@ -69,12 +76,29 @@
                 > :first-child {
                     margin-block-start: auto;
                 }
+
+                @include bp.place-max(bp.$rt-bp-sm) {
+                    padding-inline: calc(var(--rt-space-2) + var(--rt-space-1));
+                }
+            }
+
+            // Строка занимает всю ленту: кнопки у реплики стоят рядом и не отнимают ширину пузыря
+            .rt-chat__message-row {
+                width: 100%;
+                max-width: 100%;
+            }
+
+            .rt-chat__message-row--own {
+                justify-content: flex-end;
             }
 
             .rt-chat__message {
+                max-width: round(min(85%, 320px), 1px);
+                box-sizing: border-box;
                 padding: var(--rt-space-2) calc(var(--rt-space-2) + var(--rt-space-1)) var(--rt-space-1);
                 border-radius: var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius)
                     var(--rt-chat-bubble-corner-radius);
+                box-shadow: var(--rt-chat-bubble-in-shadow);
                 gap: var(--rt-space-0-5);
             }
 
@@ -103,7 +127,7 @@
 
             .rt-chat__message-text {
                 font-size: var(--rt-text-sm);
-                line-height: round(1em * var(--rt-leading-tight), 1px);
+                line-height: round(1em * var(--rt-leading-snug), 1px);
             }
 
             .rt-chat__message--own .rt-chat__message-text,
@@ -112,15 +136,6 @@
                 color: var(--rt-color-action-on-primary);
             }
 
-            // На своём пузыре время и галочки тише текста: время прозрачнее, галочки чуть плотнее
-            .rt-chat__message--own .rt-chat__message-date {
-                opacity: 0.75;
-            }
-
-            .rt-chat__message--own .rt-chat__message-status {
-                opacity: 0.85;
-            }
-
             .rt-chat__message-footer {
                 justify-content: flex-end;
             }
@@ -143,7 +158,6 @@
 
             .rt-chat__message-date {
                 font-size: var(--rt-text-2xs);
-                line-height: round(1em * var(--rt-leading-tight), 1px);
             }
 
             .rt-chat__message-author {

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

@@ -176,6 +176,24 @@
             }
         }
 
+        &__composer-bar {
+            display: flex;
+            flex: 0 0 auto;
+            flex-direction: column;
+
+            // Колонка держит шаг `--rt-space-4`, а полоса стоит вплотную к полю: 8px по кадру
+            margin-block-end: calc(var(--rt-space-2) - var(--rt-space-4));
+
+            &:empty {
+                display: none;
+            }
+
+            &:not(:empty) + .rt-chat__composer,
+            &:not(:empty) + .rt-chat__composer-rich {
+                margin-top: 0;
+            }
+        }
+
         &__footer-slot {
             display: flex;
             flex-direction: column;
@@ -298,14 +316,17 @@
 
         &__message-footer {
             display: flex;
+            min-width: 0;
             align-items: center;
             gap: var(--rt-space-1);
         }
 
         &__message-date {
+            min-width: 0;
             color: var(--rt-chat-bubble-date);
             font-size: var(--rt-text-xs);
             line-height: var(--rt-leading-none);
+            overflow-wrap: anywhere;
         }
 
         // Пер-месседж статус своего сообщения: часы / двойной чек / «!»+retry.

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

@@ -128,6 +128,8 @@ export declare namespace IRtDataTable {
     tooltip?: string;
     icon?: IRtDataTable.Icon;
   }
+  /** Размер значка ячейки — ступень значка кита. */
+  type IconSize = 'sm' | 'md' | 'lg';
   /**
    * Значок колонки. Имя — имя первого кита; рисует его набор кита через перечень соответствий,
    * а шаблон значка, отданный приложением, рисует его сам.
@@ -138,6 +140,11 @@ export declare namespace IRtDataTable {
     tooltip?: string;
     visible?: boolean;
     placement?: 'left' | 'right';
+    /**
+     * Размер значка в ячейке: `sm` — 16px, `md` — 20px, `lg` — 24px. Без поля значок 24px, как
+     * был. Шапка колонки его не читает.
+     */
+    size?: IRtDataTable.IconSize;
     /**
      * Контурный рисунок вместо залитого, как у первого кита: без признака значок колонки залит.
      * Заливку рисует материальный набор; свой набор кита рисует значок одним рисунком.

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

@@ -172,7 +172,17 @@ export declare class RtDataTableCellComponent<T = Record<string, unknown>> {
    * приложение, а без шрифта на месте значка стоит его имя.
    */
   protected readonly glyph: Signal<string | null>;
-  /** Залитый глиф — как залитый значок набора: контурным его делает `outlined` колонки. */
+  /**
+   * Размер значка из описания колонки; без него 24px, как было. Описание колонки приходит и из
+   * сохранённых настроек, мимо типов: размер не из списка тоже даёт 24px, иначе значок набора
+   * взял бы свою ступень, а глиф остался бы прежним.
+   */
+  protected readonly iconSize: Signal<IRtDataTable.IconSize>;
+  /**
+   * Залитый глиф — как залитый значок набора: контурным его делает `outlined` колонки. Размер
+   * глифа идёт той же ступенью, что значок набора; 24px задаёт сам элемент, и для `lg` своего
+   * признака нет.
+   */
   protected readonly glyphMods: Signal<Record<string, boolean>>;
   protected readonly iconContext: Signal<IRtDataTableIconContext<T> | null>;
   /**

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

@@ -146,6 +146,8 @@ export declare class RtMessageComposerComponent {
   focus(): void;
   /** Заменяет черновик и ставит курсор в конец; выбранные файлы остаются. */
   setDraft(text: string): void;
+  /** Текст поля без разметки: форматирование читается как обычный текст, файлы сюда не входят. */
+  draftText(): string;
   protected onKeydown(event: KeyboardEvent): void;
   protected stop(): void;
   protected openPicker(): void;
@@ -291,6 +293,13 @@ export declare namespace IRtChat {
     delta?: IQuillDelta | null;
     /** ISO-дата создания. */
     createdAt: string;
+    /** Готовая подпись вместо времени `createdAt`. Подписи дней считаются от `createdAt` и так. */
+    dateLabel?: string;
+    /**
+     * Значок на месте значка статуса, размером как он. Статусы «не ушло» и «не доставлено»
+     * сильнее: их значок предупреждает об ошибке.
+     */
+    dateIcon?: IRtIcon.Name;
     /** URL вложения (если есть) — наличие включает карточку файла. */
     fileUrl?: string | null;
     /** Имя вложения для отображения в карточке. */
@@ -534,6 +543,8 @@ export declare class RtChatComponent {
    * текст. Выбранные файлы остаются, сигнала набора нет, закрытое поле не меняется.
    */
   setDraft(text: string): void;
+  /** Текст поля ответа в виде, который сейчас на экране. Файлы сюда не входят, поля нет — пустая строка. */
+  draftText(): string;
   protected onSubmit(): void;
   protected onComposerKeydown(event: KeyboardEvent): void;
   /** Релей submit'а от `rt-message-composer` (rich-режим) наружу как `send`. */
@@ -677,7 +688,7 @@ export declare class RtChatComponent {
     "expandedChange": "expandedChange";
     "deleteMessage": "deleteMessage";
     "retryMessage": "retryMessage";
-  }, ["messageActions", "messageButtons"], ["[rtChatHeaderActions]", "[rtChatComposerTools]", "[rtChatFooter]"], true, never>;
+  }, ["messageActions", "messageButtons"], ["[rtChatHeaderActions]", "[rtChatComposerBar]", "[rtChatComposerTools]", "[rtChatFooter]"], true, never>;
 }
 /**
  * Есть ли у реплики хотя бы одно доступное действие потребителя.