@rt-tools/ui-kit 0.6.0 → 0.7.0

package/package.json

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

package/src/lib/ui-kit/side-menu/menu/rtui-side-menu.component.scss

@@ -266,7 +266,12 @@ $side-menu: (
             // Component-local elevation token for the slide-out sub-menu drawer.
             --rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);
 
-            position: relative;
+            // Расположение шторки оставлено за Material: `absolute` с растяжкой по верху и низу, а
+            // место под боковую шторку оно освобождает отступом на содержимом контейнера. Стоявший
+            // здесь `relative` возвращал шторку в поток, она вставала над содержимым, и контейнер
+            // получал вдвое большую высоту прокрутки. Прокручивать его хватало одного
+            // `scrollIntoView` на активном пункте подменю: панель уезжала вверх на ширину рельсы и
+            // обратно не возвращалась.
             width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));
             min-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));
             height: 100%;
@@ -364,8 +369,12 @@ $side-menu: (
                 // справа от значка и четыре у самого префикса. В узкой панели это половина
                 // строки запроса, поэтому зазор сведён к одной ступени. Ручки под него у поля
                 // формы нет: правится сам отступ значка.
+                // Слева отступ равен тому, с каким стоит крестик очистки у правого края поля:
+                // измерено в витрине, у крестика 9,59 пикселя — своей геометрией кнопки, а не
+                // ступенью. Ближайшая ступень — десять; расхождение в 0,41 пикселя глазом не
+                // видно, а прежние двенадцать читались как перекос лупы внутрь поля.
                 &::ng-deep .mat-mdc-form-field-icon-prefix > .mat-icon {
-                    padding: 0 var(--rt-spacing-4) 0 var(--rt-spacing-12);
+                    padding: 0 var(--rt-spacing-4) 0 var(--rt-spacing-10);
                 }
             }
 

package/src/lib/ui-kit/side-menu/menu-sub-item/rtui-side-menu-sub-item.component.scss

@@ -42,6 +42,17 @@
             min-width: min(var(--rt-side-menu-sub-menu-item-width), 100%);
         }
 
+        // Пункт под подсветкой клавиатуры. Отмечен рамкой, а не заливкой: заливка здесь уже занята
+        // активным адресом, и два разных смысла одним видом читались бы как один.
+        // Толщина стоит числом: у этого кита набор токенов разводит только цвета рамок, шкалы
+        // толщин в нём нет вовсе — взятый оттуда токен приходит пустым, и рамка не рисуется вовсе.
+        // Так и вышло: первый кадр показал список без единой отметки.
+        &--highlighted {
+            border-radius: var(--rt-radius-xl);
+            outline: 2px solid var(--rt-border-focus);
+            outline-offset: -2px;
+        }
+
         .rtui-side-menu-sub-item-title {
             display: flex;
             align-items: center;
@@ -109,6 +120,14 @@
                 background-color: var(--mat-list-active-indicator-color);
             }
 
+            // Отметка подсветки — та же, что у пункта со ссылкой: заголовок папки попадает под
+            // ходьбу стрелками наравне с ним.
+            &--highlighted {
+                border-radius: var(--rt-radius-xl);
+                outline: 2px solid var(--rt-border-focus);
+                outline-offset: -2px;
+            }
+
             &__icon {
                 color: var(--mdc-list-list-item-leading-icon-color);
                 margin-inline: var(--mat-list-list-item-leading-icon-start-space) var(--mat-list-list-item-leading-icon-end-space);

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

@@ -164,11 +164,18 @@ declare class RtuiScrollableContainerComponent {
  * Меню, в котором стоит подпункт. Токен вместо самого компонента: подпункт брал его классом, а
  * меню объявляет подпункт в своих импортах — получался круг «меню → подпункт → меню».
  *
- * Подпункту нужно от меню два значения: какие пункты сейчас раскрыты и что набрано в поиске —
- * второе затем, чтобы отметить в подписи то, чем она совпала.
+ * Подпункту нужно от меню три значения: какие пункты сейчас отмечены активными, какие папки стоят
+ * раскрытыми и что набрано в поиске — последнее затем, чтобы отметить в подписи то, чем она совпала.
+ *
+ * Активность и раскрытость разошлись, когда поиск научился спускаться внутрь папок: активным
+ * остаётся адрес, на котором человек стоит, а раскрытой — всякая папка, в которой нашлось
+ * совпадение. Одно значение на двоих раскрывало бы только папку текущего адреса, то есть прятало бы
+ * ровно то, что человек искал.
  */
 interface IRtuiSideMenuHost {
     readonly activeMenuIds: Signal<Array<string | number>>;
+    readonly expandedMenuIds: Signal<Array<string | number>>;
+    readonly highlightedMenuId: Signal<string | number | null>;
     readonly subMenuQuery: Signal<string>;
 }
 declare const RTUI_SIDE_MENU: InjectionToken<IRtuiSideMenuHost>;
@@ -266,11 +273,9 @@ declare class RtuiSideMenuFooterDirective {
 declare class RtuiSideMenuComponent {
     #private;
     /**
-     * Ширина подменю в оформлении. Своего выбора нет — переменная не ставится вовсе, и ширину
-     * берёт набор токенов: своё число здесь подменило бы его молча.
-     */
-    /**
-     * Натянутая ширина панели. Кладётся своим свойством, а не тем, каким ширину задаёт
+     * Натянутая ширина панели. Своего выбора нет — переменная не ставится вовсе, и ширину берёт
+     * набор токенов: своё число здесь подменило бы его молча.
+     * Кладётся своим свойством, а не тем, каким ширину задаёт
      * потребитель: панель берёт наибольшее из двух, и заданная оформлением ширина остаётся нижним
      * пределом сама по себе. Числом в ките этот предел назвать нечем — ширину знает потребитель.
      */
@@ -297,6 +302,18 @@ declare class RtuiSideMenuComponent {
     protected readonly subMenuOpened: Signal<boolean>;
     /** Что видно в подменю: отобранные пункты того набора, который его сейчас наполняет. */
     protected readonly visibleSubMenuItems: Signal<ISideMenu.Item[]>;
+    /**
+     * Какие папки подменю стоят раскрытыми. Публично: подпункт берёт раскрытость отсюда — своей у
+     * него нет, а его собственная разметка вложена в него же на любую глубину.
+     *
+     * Пустой запрос отдаёт прежнюю раскрытость, ту, что была до набора: раскрытым остаётся только
+     * раздел текущего адреса. Непустой добавляет к ней все папки, в которых нашлось совпадение, —
+     * иначе результат поиска лежит за закрытым заголовком и человеку нужно нажать ещё раз, чтобы
+     * увидеть то, что он уже нашёл.
+     */
+    readonly expandedMenuIds: Signal<Array<string | number>>;
+    /** Пункт под подсветкой клавиатуры. Публично: отмечает его подпункт, своего состояния у него нет. */
+    readonly highlightedMenuId: Signal<string | number | null>;
     readonly headerTpl: Signal<TNullable<TemplateRef<Type<unknown>>>>;
     readonly footerTpl: Signal<TNullable<TemplateRef<Type<unknown>>>>;
     /** Что набрано в поиске. Публично: подпункт берёт запрос отсюда, чтобы отметить совпавшее. */
@@ -358,6 +375,12 @@ declare class RtuiSideMenuComponent {
      */
     onResizeStart(event: MouseEvent): void;
     onSubMenuSearch(query: string): void;
+    /**
+     * Нажата клавиша в поле поиска. Поле фокуса не теряет и раздаёт клавиши списку: иначе набор
+     * запроса прерывался бы на первой же стрелке. Умолчание отменяется только у съеденной клавиши —
+     * буквы уходят полю нетронутыми.
+     */
+    onSearchKeydown(event: KeyboardEvent): void;
     closeMobileMenu(): void;
     clickSubMenuAdditional({ data, event }: {
         data: ISideMenu.ItemData;
@@ -579,10 +602,22 @@ declare namespace IRtUiConfig {
          */
         appearance?: MatFormFieldAppearance;
     }
+    /** Per-instance-overridable defaults for the aside curtain. */
+    interface Aside {
+        /**
+         * Whether Esc closes an open curtain.
+         *
+         * The kit default is `false`: the key is pressed to lift a hint or to leave a field, and
+         * the whole panel closed together with what was entered. An application that needs the
+         * former behaviour names it here once instead of naming it at every call.
+         */
+        closeOnEscape?: boolean;
+    }
     /** Component-level settings. Each entry overrides `global` for that component only. */
     interface Components {
         button?: Button;
         dynamicSelectors?: DynamicSelectors;
+        aside?: Aside;
     }
     interface Config {
         global?: Global;