@rt-tools/ui-kit 0.5.0 → 0.6.0

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@rt-tools/ui-kit",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",
   "dependencies": {
     "tslib": "^2.8.0",
-    "@rt-tools/core": "^0.3.1",
-    "@rt-tools/store": "^0.3.1",
+    "@rt-tools/core": "^0.5.0",
+    "@rt-tools/store": "^0.3.2",
     "@rt-tools/utils": "^0.4.0"
   },
   "peerDependencies": {
-    "@rt-tools/core": "^0.3.1",
-    "@rt-tools/store": "^0.3.1",
+    "@rt-tools/core": "^0.5.0",
+    "@rt-tools/store": "^0.3.2",
     "@rt-tools/utils": "^0.4.0",
     "@angular/cdk": "^22.0.0",
     "@angular/common": "^22.0.0",

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

@@ -46,6 +46,15 @@ $side-menu: (
             track-color: var(--rt-bg-base-strong),
             thumb-color: var(--rt-bg-base-emphasis-soft),
         ),
+    // Ручка тяги: видимая полоса и зона, которой она захватывается курсором, — два разных числа.
+    // Пока они были одним, попасть в четыре пикселя удавалось не с первого раза, а промах мимо
+    // ручки попадает в панель подменю — то есть вместо тяги человек нажимает пункт. Зона шире
+    // втрое и стоит по центру прежнего места: видимое от этого не двигается ни на пиксель.
+    resizer: (
+            width: 0.25rem,
+            grab-width: 0.75rem,
+            hover-color: var(--rt-border-neutral-default),
+        ),
 );
 
 :host(.rtui-side-menu--pinned) {
@@ -71,6 +80,10 @@ $side-menu: (
     // и выражение, повторённое у каждого, разъезжается на первой же правке одного из них.
     --rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));
 
+    // Правый край панели подменю на экране: отступ полосы значков плюс её показанная ширина.
+    // Тем же числом стоит ручка тяги, и повторённое у неё выражение разошлось бы с этим.
+    --rt-side-menu-panel-edge: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width));
+
     // Полоса прокрутки обоих списков меню — полосы значков и подменю. Оформляется здесь, а не у
     // прокручиваемой области: вид остальных её экранов от этой правки не двигается. Правило
     // пробивает инкапсуляцию, потому что прокручивается внутренний узел области, а полоса
@@ -204,15 +217,36 @@ $side-menu: (
     // уносит в свою область содержимого. Снаружи ручка идёт от края экрана до края, и стоит она
     // там, где кончается панель: отступ полосы значков плюс ширина самой панели.
     .rtui-side-menu-resizer {
+        // Свес — половина лишней ширины, на которую зона захвата шире видимой полосы. Его
+        // используют два места: сам узел, сдвинутый влево на эту величину, и полоса внутри него,
+        // отступающая на неё же. Выражение, повторённое у обоих, расходится на первой же правке
+        // одного.
+        --rt-side-menu-resizer-overhang: calc((var(--rt-side-menu-resizer-grab-width) - var(--rt-side-menu-resizer-width)) / 2);
+
+        // Отступ узла от правого края панели: своя ширина полосы плюс свес слева от неё.
+        --rt-side-menu-resizer-inset: calc(var(--rt-side-menu-resizer-width) + var(--rt-side-menu-resizer-overhang));
+
+        // Узел занимает зону захвата целиком и стоит так, чтобы прежняя полоса осталась на своём
+        // месте: лишняя ширина расходится поровну в обе стороны от неё.
         position: fixed;
         z-index: 3;
-        left: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width) - 0.25rem);
-        width: 0.25rem;
+        left: calc(var(--rt-side-menu-panel-edge) - var(--rt-side-menu-resizer-inset));
+        width: var(--rt-side-menu-resizer-grab-width);
         cursor: col-resize;
         inset-block: 0;
 
-        &:hover {
-            background-color: var(--rt-border-neutral-default);
+        // Красится не сам узел, а полоса внутри него: закрашенная зона захвата стала бы втрое
+        // толще прежней линии и читалась бы другим оформлением, а не тем же с большей мишенью.
+        &:before {
+            position: absolute;
+            left: var(--rt-side-menu-resizer-overhang);
+            width: var(--rt-side-menu-resizer-width);
+            content: '';
+            inset-block: 0;
+        }
+
+        &:hover:before {
+            background-color: var(--rt-side-menu-resizer-hover-color);
         }
     }
 
@@ -283,10 +317,17 @@ $side-menu: (
         &--pinned {
             position: relative;
             left: 0;
-            width: var(--rt-side-menu-sub-menu-shown-width);
+            width: 0;
             height: 100%;
             flex: 0 0 auto;
 
+            // Ширину закреплённая панель занимает, только пока ей есть что показать. Ширина,
+            // поставленная одним лишь закреплением, оставляла пустую полосу слева от страницы на
+            // каждом адресе, у которого разделов нет: панели там не видно, а место она держала.
+            &.rtui-sub-side-menu--opened {
+                width: var(--rt-side-menu-sub-menu-shown-width);
+            }
+
             .rtui-sub-side-menu-content {
                 box-shadow: none;
 

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

@@ -10,9 +10,9 @@ import { OverlayRef, ComponentType, ConnectedPosition, CdkOverlayOrigin } from '
 import { ComponentType as ComponentType$1 } from '@angular/cdk/portal';
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import { MatButtonAppearance } from '@angular/material/button';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
 import * as i1 from '@angular/material/tooltip';
 import { TooltipPosition } from '@angular/material/tooltip';
-import { MatFormFieldAppearance } from '@angular/material/form-field';
 import { MatSnackBarConfig, MatSnackBarRef } from '@angular/material/snack-bar';
 import { EPosition, OSTypes } from '@rt-tools/core';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
@@ -568,9 +568,21 @@ declare namespace IRtUiConfig {
         radius?: IRtuiButton.Radius;
         appearance?: IRtuiButton.Appearance;
     }
+    /** Per-instance-overridable defaults for the dynamic selectors family. */
+    interface DynamicSelectors {
+        /**
+         * Appearance every form field of the family renders with.
+         *
+         * The family nests: a selector holds an input, an input opens a popup, a popup holds a
+         * list. Set once here, the look reaches all of them; passed as an input, it has to be
+         * repeated at every use, and the one that was missed differs from the rest.
+         */
+        appearance?: MatFormFieldAppearance;
+    }
     /** Component-level settings. Each entry overrides `global` for that component only. */
     interface Components {
         button?: Button;
+        dynamicSelectors?: DynamicSelectors;
     }
     interface Config {
         global?: Global;
@@ -1510,8 +1522,22 @@ declare abstract class RtuiDynamicSelectorsDirective {
     placeholderIcon: InputSignalWithTransform<string, string>;
     /** Placeholder description */
     placeholderDescription: InputSignalWithTransform<string, string>;
-    /** Material elements appearance */
-    appearance: InputSignal<MatFormFieldAppearance>;
+    /**
+     * Material elements appearance.
+     *
+     * Пустота умолчанием, а не прежнее значение: значение, оставленное умолчанием входа, побеждает
+     * настройку всегда — вход задан, и цепочка разрешения на нём кончается, а настройка не
+     * срабатывает ни разу и выглядит сломанной.
+     */
+    appearance: InputSignal<MatFormFieldAppearance | undefined>;
+    /**
+     * Вид поля, с которым семейство рисуется: вход на месте, потом раздел настройки, потом
+     * умолчание кита.
+     *
+     * Считается один раз здесь, а шаблоны читают готовое: повторённая в каждом из пяти шаблонов
+     * семейства, эта цепочка разъехалась бы с настройкой в первом же месте, куда забыли заглянуть.
+     */
+    readonly resolvedAppearance: Signal<MatFormFieldAppearance>;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtuiDynamicSelectorsDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<RtuiDynamicSelectorsDirective, never, never, { "buttonTitle": { "alias": "buttonTitle"; "required": false; "isSignal": true; }; "isSingleSelection": { "alias": "isSingleSelection"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "useNameBreaking": { "alias": "useNameBreaking"; "required": false; "isSignal": true; }; "useTitleCase": { "alias": "useTitleCase"; "required": false; "isSignal": true; }; "isPlaceholderIconOutlined": { "alias": "isPlaceholderIconOutlined"; "required": false; "isSignal": true; }; "isDeleteButtonShown": { "alias": "isDeleteButtonShown"; "required": false; "isSignal": true; }; "isListDraggable": { "alias": "isListDraggable"; "required": false; "isSignal": true; }; "placeholderIcon": { "alias": "placeholderIcon"; "required": false; "isSignal": true; }; "placeholderDescription": { "alias": "placeholderDescription"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -1854,7 +1880,13 @@ declare class RtuiDynamicSelectorSelectedListComponent<ENTITY extends Record<str
     isDeleteButtonShown: InputSignalWithTransform<boolean, BooleanInput>;
     /** Indicates is items editable */
     isItemsEditable: InputSignalWithTransform<boolean, BooleanInput>;
-    /** Material elements appearance */
+    /**
+     * Material elements appearance.
+     *
+     * Значение приходит уже разрешённым — от того, кто список рисует: вложенный компонент,
+     * разрешающий вид заново, заводит свою цепочку, и вид поля внутри списка отличается от вида
+     * поля под ним. Прежнее умолчание оставлено на случай одиночного употребления списка.
+     */
     appearance: InputSignal<MatFormFieldAppearance>;
     readonly deleteFromSelectedAction: OutputEmitterRef<ENTITY[KEY]>;
     readonly dropAction: OutputEmitterRef<CdkDragDrop<ENTITY[]>>;