@rt-tools/ui-kit-v2 0.5.0 → 0.7.0

package/src/lib/components/markdown-text/CONTEXT.md

@@ -0,0 +1,40 @@
+# `rt-markdown-text`
+
+Текст, написанный разметкой, показанный узлами: заголовки, списки, таблицы, цитаты и код вместо
+частокола знаков.
+
+```html
+<rt-markdown-text [text]="record.text" />
+```
+
+| вход   | тип              | умолчание      |
+| ------ | ---------------- | -------------- |
+| `text` | `string \| null` | **обязателен** |
+
+Выходов нет.
+
+## Главное, что нужно знать
+
+**Перечень разметки закрыт и зашит.** Компонент понимает заголовки, абзацы, списки — простые и
+нумерованные, — таблицы, цитаты, код строкой и блоком, жирный, курсив, зачёркнутый и ссылку.
+Настроить перечень нечем: вход один — сам текст.
+
+**Всё, чего в перечне нет, остаётся видимым текстом.** Сырой HTML не вычищается, а не
+разбирается вовсе: узла для него разборщик не строит, и присланная строка видна как есть.
+Отсюда же — картинки в вывод не попадают, а ссылка становится ссылкой только при схеме `http`,
+`https` или `mailto`.
+
+**Присланная строка в страницу не отдаётся ни разу.** Компонент рисует дерево узлов, которое
+вернул разбор; другого пути у текста внутрь страницы нет.
+
+## Края
+
+- **Одиночный перенос строки остаётся переносом.** По правилам `.md` он схлопнулся бы в пробел,
+  но тексты, которые сюда приходят, пишут строками осмысленно.
+- **Блок кода не раскрашивается по языкам.** Слово языка у ограды разбирается и на вид не
+  влияет: раскраска потребовала бы второй библиотеки в рантайме.
+- **Таблица и блок кода прокручиваются вбок сами** и ширину родителя не растягивают.
+- **Таблица рисуется своей разметкой, а не `rt-table`.** У той колонки объявляются заранее
+  директивами, а число столбцов здесь приходит из текста.
+- **Пустой текст не рисует ничего** — ни пустого абзаца, ни отступа: показывать или прятать
+  заголовок раздела, решает потребитель.

package/src/lib/components/markdown-text/rt-markdown-text.component.scss

@@ -0,0 +1,130 @@
+@layer rt-kit.components {
+    .rt-markdown-text {
+        --rt-markdown-text-radius: var(--rt-radius-sm);
+        --rt-markdown-text-border-width: var(--rt-border-width-thin);
+
+        display: flex;
+        min-width: 0;
+        max-width: 100%;
+        flex-direction: column;
+        color: var(--rt-color-text-primary);
+        font-family: var(--rt-font-family-sans);
+        font-size: var(--rt-text-xs);
+        font-weight: var(--rt-font-weight-regular);
+        gap: var(--rt-space-sm);
+        letter-spacing: var(--rt-letter-spacing-wide);
+        line-height: var(--rt-leading-snug);
+
+        &__heading {
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-weight: var(--rt-font-weight-semibold);
+
+            &--level--1 {
+                font-size: var(--rt-text-lg);
+            }
+
+            &--level--2 {
+                font-size: var(--rt-text-md);
+            }
+
+            &--level--3,
+            &--level--4,
+            &--level--5,
+            &--level--6 {
+                font-size: var(--rt-text-sm);
+            }
+        }
+
+        &__paragraph {
+            margin: 0;
+        }
+
+        &__list {
+            padding-left: var(--rt-space-md);
+            margin: 0;
+            list-style: disc;
+
+            &--ordered {
+                list-style: decimal;
+            }
+        }
+
+        &__item {
+            &--level--1 {
+                margin-left: var(--rt-space-md);
+            }
+
+            &--level--2 {
+                margin-left: var(--rt-space-lg);
+            }
+        }
+
+        &__quote {
+            padding-left: var(--rt-space-sm);
+            border-left: var(--rt-markdown-text-border-width) solid var(--rt-color-border-default);
+            margin: 0;
+            color: var(--rt-color-text-muted);
+        }
+
+        &__code {
+            max-width: 100%;
+            padding: var(--rt-space-sm);
+            border-radius: var(--rt-markdown-text-radius);
+            margin: 0;
+            background: var(--rt-color-bg-subtle);
+            color: var(--rt-color-text-primary);
+            font-family: var(--rt-font-family-mono);
+            font-size: var(--rt-text-2xs);
+            line-height: var(--rt-leading-snug);
+            overflow-x: auto;
+        }
+
+        &__code-inline {
+            padding: 0 var(--rt-space-2xs);
+            border-radius: var(--rt-markdown-text-radius);
+            background: var(--rt-color-bg-subtle);
+            font-family: var(--rt-font-family-mono);
+            font-size: var(--rt-text-2xs);
+        }
+
+        &__table-scroll {
+            max-width: 100%;
+            overflow-x: auto;
+        }
+
+        &__table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        &__head-cell,
+        &__cell {
+            padding: var(--rt-space-2xs) var(--rt-space-sm);
+            border: var(--rt-markdown-text-border-width) solid var(--rt-color-border-default);
+            text-align: left;
+        }
+
+        &__head-cell {
+            color: var(--rt-color-text-muted);
+            font-weight: var(--rt-font-weight-semibold);
+        }
+
+        &__strong {
+            font-weight: var(--rt-font-weight-semibold);
+        }
+
+        &__emphasis {
+            font-style: italic;
+        }
+
+        &__strike {
+            text-decoration: line-through;
+        }
+
+        &__link {
+            color: var(--rt-color-text-link);
+            text-decoration: underline;
+        }
+    }
+}

package/src/lib/components/menu/rt-menu-confirm-dialog.component.scss

@@ -1,36 +1,38 @@
-/* rt-menu-confirm-dialog — confirm-модалка деструктивного пункта rt-menu-item.
-   ViewEncapsulation.None — селекторы префиксованы `.rt-menu-confirm-dialog`.
-   Frame (фон/радиус/тень) даёт rt-dialog; здесь — только layout контента. */
+@layer rt-kit.components {
+    /* rt-menu-confirm-dialog — confirm-модалка деструктивного пункта rt-menu-item.
+       ViewEncapsulation.None — селекторы префиксованы `.rt-menu-confirm-dialog`.
+       Frame (фон/радиус/тень) даёт rt-dialog; здесь — только layout контента. */
 
-.rt-menu-confirm-dialog {
-    display: flex;
-    box-sizing: border-box;
-    flex-direction: column;
-    padding: var(--rt-space-xl);
-    gap: var(--rt-space-lg);
-
-    &__text {
+    .rt-menu-confirm-dialog {
         display: flex;
+        box-sizing: border-box;
         flex-direction: column;
-        gap: var(--rt-space-sm);
-    }
+        padding: var(--rt-space-xl);
+        gap: var(--rt-space-lg);
 
-    &__title {
-        margin: 0;
-        color: var(--rt-color-text-primary);
-        font-size: var(--rt-text-md);
-        font-weight: var(--rt-font-weight-bold);
-    }
+        &__text {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-sm);
+        }
 
-    &__message {
-        margin: 0;
-        color: var(--rt-color-text-secondary);
-        font-size: var(--rt-text-sm);
-    }
+        &__title {
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-bold);
+        }
 
-    &__footer {
-        display: flex;
-        justify-content: flex-end;
-        gap: var(--rt-space-sm);
+        &__message {
+            margin: 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+        }
+
+        &__footer {
+            display: flex;
+            justify-content: flex-end;
+            gap: var(--rt-space-sm);
+        }
     }
 }

package/src/lib/components/menu/rt-menu-item.component.scss

@@ -1,54 +1,59 @@
-/* rt-menu-item — пункт меню rt-menu. ViewEncapsulation.None.
-   Host (`<rt-menu-item>`) несёт класс блока и сам является кликабельной зоной. */
-
-.rt-menu-item {
-    display: flex;
-    width: 100%;
-    box-sizing: border-box;
-    align-items: center;
-    padding: var(--rt-space-sm) var(--rt-space-md);
-    border-radius: var(--rt-radius-sm);
-    color: var(--rt-color-text-primary);
-    cursor: pointer;
-    font-size: var(--rt-text-sm);
-    gap: var(--rt-space-sm);
-    text-align: start;
-    transition: background-color var(--rt-duration-fast) ease;
-
-    &:hover {
-        background: var(--rt-color-bg-hover);
-    }
+@layer rt-kit.components {
+    /* rt-menu-item — пункт меню rt-menu. ViewEncapsulation.None.
+       Host (`<rt-menu-item>`) несёт класс блока и сам является кликабельной зоной. */
+
+    .rt-menu-item {
+        --rt-menu-item-radius: var(--rt-radius-sm);
+        --rt-menu-item-transition-duration: var(--rt-duration-fast);
+
+        display: flex;
+        width: 100%;
+        box-sizing: border-box;
+        align-items: center;
+        padding: var(--rt-space-sm) var(--rt-space-md);
+        border-radius: var(--rt-menu-item-radius);
+        color: var(--rt-color-text-primary);
+        cursor: pointer;
+        font-size: var(--rt-text-sm);
+        gap: var(--rt-space-sm);
+        text-align: start;
+        transition: background-color var(--rt-menu-item-transition-duration) ease;
 
-    &:focus-visible {
-        background: var(--rt-color-bg-hover);
-        outline: none;
-    }
+        &:hover {
+            background: var(--rt-color-bg-hover);
+        }
 
-    &__icon {
-        flex-shrink: 0;
-        color: var(--rt-color-text-muted);
-    }
+        &:focus-visible {
+            background: var(--rt-color-bg-hover);
+            outline: none;
+        }
 
-    &__label {
-        flex: 1 1 auto;
-        white-space: nowrap;
-    }
+        &__icon {
+            flex-shrink: 0;
+            color: var(--rt-color-text-muted);
+        }
 
-    &--danger {
-        color: var(--rt-color-state-error-text);
+        &__label {
+            flex: 1 1 auto;
+            white-space: nowrap;
+        }
 
-        .rt-menu-item__icon {
+        &--danger {
             color: var(--rt-color-state-error-text);
+
+            .rt-menu-item__icon {
+                color: var(--rt-color-state-error-text);
+            }
         }
-    }
 
-    &--disabled {
-        color: var(--rt-color-text-muted);
-        cursor: default;
-        opacity: 0.5;
+        &--disabled {
+            color: var(--rt-color-text-muted);
+            cursor: default;
+            opacity: 0.5;
 
-        &:hover {
-            background: transparent;
+            &:hover {
+                background: transparent;
+            }
         }
     }
 }

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

@@ -1,19 +1,27 @@
-/* rt-menu — dropdown-меню действий. ViewEncapsulation.None.
-   Триггер живёт в host'е, панель (`__panel`) рендерится в CDK Overlay. */
+@layer rt-kit.components {
+    /* rt-menu — dropdown-меню действий. ViewEncapsulation.None.
+       Триггер живёт в host'е, панель (`__panel`) рендерится в CDK Overlay. */
 
-.rt-menu {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    .rt-menu {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
 
-    &__panel {
-        display: flex;
-        min-width: 180px;
-        flex-direction: column;
-        padding: var(--rt-space-xs);
-        border: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
-        border-radius: var(--rt-radius-md);
-        background: var(--rt-color-bg-surface);
-        box-shadow: var(--rt-shadow-lg);
+        &__panel {
+            /* Панель рисуется в CDK Overlay, вне поддерева блока: свойство
+               объявляется на ней самой — с корня блока оно бы не докатилось. */
+            --rt-menu-panel-radius: var(--rt-radius-md);
+            --rt-menu-panel-border-width: var(--rt-border-width-thin);
+            --rt-menu-panel-shadow: var(--rt-shadow-lg);
+
+            display: flex;
+            min-width: 180px;
+            flex-direction: column;
+            padding: var(--rt-space-xs);
+            border: var(--rt-menu-panel-border-width) solid var(--rt-color-border-subtle);
+            border-radius: var(--rt-menu-panel-radius);
+            background: var(--rt-color-bg-surface);
+            box-shadow: var(--rt-menu-panel-shadow);
+        }
     }
 }

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

@@ -1,61 +1,65 @@
-/* rt-message — alert/banner в common/ui. ViewEncapsulation.None.
-   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-message` висит
-   и на `<rt-message>`, и на корне шаблона, поэтому правила блока вложены в хост —
-   так они достаются только корню шаблона. */
-
-rt-message {
-    display: block;
-
-    .rt-message {
-        display: flex;
-        align-items: flex-start;
-        padding: var(--rt-space-3) var(--rt-space-4);
-        border-radius: var(--rt-radius-md);
-        background: var(--rt-color-state-info-bg);
-        color: var(--rt-color-state-info);
-        font-size: var(--rt-text-sm);
-        gap: var(--rt-space-2);
-        line-height: var(--rt-leading-normal);
-
-        &--severity--info {
+@layer rt-kit.components {
+    /* rt-message — alert/banner в common/ui. ViewEncapsulation.None.
+       Хост адресуется по имени элемента, а не по классу блока: класс `.rt-message` висит
+       и на `<rt-message>`, и на корне шаблона, поэтому правила блока вложены в хост —
+       так они достаются только корню шаблона. */
+
+    rt-message {
+        display: block;
+
+        .rt-message {
+            --rt-message-radius: var(--rt-radius-md);
+
+            display: flex;
+            align-items: flex-start;
+            padding: var(--rt-space-4) var(--rt-space-4);
+            border-radius: var(--rt-message-radius);
             background: var(--rt-color-state-info-bg);
             color: var(--rt-color-state-info);
-        }
+            font-size: var(--rt-text-sm);
+            gap: var(--rt-space-2);
+            line-height: var(--rt-leading-normal);
 
-        &--severity--success {
-            background: var(--rt-color-state-success-bg);
-            color: var(--rt-color-state-success);
-        }
+            &--severity--info {
+                background: var(--rt-color-state-info-bg);
+                color: var(--rt-color-state-info);
+            }
 
-        &--severity--warning {
-            background: var(--rt-color-state-warning-bg);
-            color: var(--rt-color-state-warning);
-        }
+            &--severity--success {
+                background: var(--rt-color-state-success-bg);
+                color: var(--rt-color-state-success);
+            }
 
-        &--severity--danger {
-            background: var(--rt-color-state-danger-bg);
-            color: var(--rt-color-state-danger);
-        }
+            &--severity--warning {
+                background: var(--rt-color-state-warning-bg);
+                color: var(--rt-color-state-warning);
+            }
 
-        &--severity--secondary,
-        &--severity--neutral {
-            background: var(--rt-color-bg-subtle);
-            color: var(--rt-color-text-primary);
-        }
+            &--severity--danger {
+                background: var(--rt-color-state-danger-bg);
+                color: var(--rt-color-state-danger);
+            }
 
-        &__icon {
-            flex-shrink: 0;
-            margin-block-start: var(--rt-space-0-5);
-        }
+            &--severity--secondary,
+            &--severity--neutral {
+                background: var(--rt-color-bg-subtle);
+                color: var(--rt-color-text-primary);
+            }
 
-        &__body {
-            min-width: 0;
-            flex: 1 1 auto;
-        }
+            &__icon {
+                flex-shrink: 0;
+                margin-block-start: var(--rt-space-0-5);
+            }
+
+            &__body {
+                min-width: 0;
+                flex: 1 1 auto;
+            }
 
-        &__close {
-            flex-shrink: 0;
-            margin-inline-start: auto;
+            &__close {
+                flex-shrink: 0;
+                margin-inline-start: auto;
+            }
         }
     }
 }

package/src/lib/components/message-composer/CONTEXT.md

@@ -18,7 +18,7 @@
 | `accept`               | `string`               | `''`                     |
 | `sending` / `disabled` | `boolean`              | `false`                  |
 | `formatting`           | `boolean`              | `false`                  |
-| `toolbar`              | `IRtRichEditorToolbar` | `'full'`                 |
+| `toolbar`              | `TRtRichEditorToolbar` | `'full'`                 |
 | `minRows` / `maxRows`  | `number`               | 1 / 6                    |
 | `droppedFiles`         | `File[] \| null`       | `null`                   |
 

package/src/lib/components/message-composer/rt-message-composer.component.scss

@@ -1,59 +1,65 @@
-.rt-message-composer {
-    display: flex;
-    flex-direction: column;
-    padding: var(--rt-space-3);
-    border: var(--rt-border-width-thin) solid var(--rt-color-border-default);
-    border-radius: var(--rt-radius-md);
-    background: var(--rt-color-bg-surface-default, transparent);
-    gap: var(--rt-space-2);
-
-    &:focus-within {
-        border-color: var(--rt-color-border-strong, var(--rt-color-border-default));
-    }
+@layer rt-kit.components {
+    .rt-message-composer {
+        --rt-message-composer-radius: var(--rt-radius-md);
+        --rt-message-composer-border-width: var(--rt-border-width-thin);
+        --rt-message-composer-divider-width: var(--rt-border-width-thin);
+
+        display: flex;
+        flex-direction: column;
+        padding: var(--rt-space-4);
+        border: var(--rt-message-composer-border-width) solid var(--rt-color-border-default);
+        border-radius: var(--rt-message-composer-radius);
+        background: var(--rt-color-bg-surface);
+        gap: var(--rt-space-2);
 
-    &__input {
-        padding: 0;
-        border: 0;
-        margin: 0;
-        background: transparent;
-        color: inherit;
-        font: inherit;
-        font-size: var(--rt-text-sm);
-        inline-size: 100%;
-        line-height: var(--rt-leading-snug);
-        outline: 0;
-        resize: none;
-
-        &::placeholder {
-            color: var(--rt-color-text-muted);
+        &:focus-within {
+            border-color: var(--rt-color-border-strong);
         }
 
-        &:disabled {
-            cursor: not-allowed;
+        &__input {
+            padding: 0;
+            border: 0;
+            margin: 0;
+            background: transparent;
+            color: inherit;
+            font: inherit;
+            font-size: var(--rt-text-sm);
+            inline-size: 100%;
+            line-height: var(--rt-leading-snug);
+            outline: 0;
+            resize: none;
+
+            &::placeholder {
+                color: var(--rt-color-text-muted);
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+            }
         }
-    }
 
-    &__files {
-        display: flex;
-        flex-direction: column;
-        gap: var(--rt-space-1);
-    }
+        &__files {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-1);
+        }
 
-    // Разделитель тянется на всю ширину бокса — компенсируем горизонтальный padding.
-    &__divider {
-        background: var(--rt-color-border-default);
-        block-size: var(--rt-border-width-thin);
-        margin-inline: calc(-1 * var(--rt-space-3));
-    }
+        // Разделитель тянется на всю ширину бокса — компенсируем горизонтальный padding.
+        &__divider {
+            background: var(--rt-color-border-default);
+            block-size: var(--rt-message-composer-divider-width);
+            margin-inline: calc(-1 * var(--rt-space-4));
+        }
 
-    &__controls {
-        display: flex;
-        align-items: center;
-        gap: var(--rt-space-2);
-    }
+        &__controls {
+            display: flex;
+            align-items: center;
+            gap: var(--rt-space-2);
+        }
 
-    // Кнопка отправки всегда у правого края, даже когда attach скрыт.
-    &__send {
-        margin-inline-start: auto;
+        // Кнопка отправки всегда у правого края, даже когда attach скрыт.
+        &__send {
+            margin-inline-start: auto;
+        }
     }
 }

package/src/lib/components/money-list/rt-money-list.component.scss

@@ -1,11 +1,15 @@
-/* rt-money-list — финансовый блок на подложке (ViewEncapsulation.None).
-   Селектор bare `.rt-money-list` (класс на host). */
+@layer rt-kit.components {
+    /* rt-money-list — финансовый блок на подложке (ViewEncapsulation.None).
+       Селектор bare `.rt-money-list` (класс на host). */
 
-.rt-money-list {
-    display: flex;
-    flex-direction: column;
-    padding: var(--rt-space-md);
-    border-radius: var(--rt-radius-md);
-    background: var(--rt-color-bg-subtle);
-    gap: var(--rt-space-xs);
+    .rt-money-list {
+        --rt-money-list-radius: var(--rt-radius-md);
+
+        display: flex;
+        flex-direction: column;
+        padding: var(--rt-space-md);
+        border-radius: var(--rt-money-list-radius);
+        background: var(--rt-color-bg-subtle);
+        gap: var(--rt-space-xs);
+    }
 }