@rt-tools/ui-kit 0.6.1 → 0.7.1

package/package.json

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

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

@@ -369,8 +369,23 @@ $side-menu: (
                 // справа от значка и четыре у самого префикса. В узкой панели это половина
                 // строки запроса, поэтому зазор сведён к одной ступени. Ручки под него у поля
                 // формы нет: правится сам отступ значка.
+                // Слева отступ равен тому, с каким стоит крестик очистки у правого края поля:
+                // измерено в витрине, у крестика 9,59 пикселя — своей геометрией кнопки, а не
+                // ступенью. Ближайшая ступень — десять; расхождение в 0,41 пикселя глазом не
+                // видно, а прежние двенадцать читались как перекос лупы внутрь поля.
+                // Отступ отмеряется от края поля, а не от того, что останется после обёртки:
+                // боковой отступ обёртки готового поля зависит от набора, который взял кит, и в
+                // приложении-потребителе он двенадцать пикселей при нуле в витрине. Правка
+                // одного значка сходилась поэтому только здесь, а у потребителя лупа стояла в
+                // двадцати двух пикселях против 9,6 у крестика. Обнулено — и отступ значка
+                // становится всем отступом лупы, где бы кит ни стоял.
+                &::ng-deep .mat-mdc-text-field-wrapper,
+                &::ng-deep .mat-mdc-form-field-icon-prefix {
+                    padding-left: 0;
+                }
+
                 &::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);
                 }
             }
 
@@ -392,9 +407,15 @@ $side-menu: (
         --mat-form-field-container-vertical-padding: var(--rt-spacing-8);
 
         // Зазор между значком и запросом сведён к ступени по той же причине, что и на широком
-        // экране: готовое поле разводит их на шестнадцать пикселей.
+        // экране: готовое поле разводит их на шестнадцать пикселей. Отступ слева и обнуление
+        // отступа обёртки — те же, что и там: поле одно и то же, и разъезжаться им незачем.
+        &::ng-deep .mat-mdc-text-field-wrapper,
+        &::ng-deep .mat-mdc-form-field-icon-prefix {
+            padding-left: 0;
+        }
+
         &::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;