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

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

@@ -11,6 +11,12 @@ export declare namespace IRtStepper {
   type Orientation = 'horizontal' | 'vertical';
   /** Состояние шага в вертикальном списке; `neutral` — у всех шагов, когда текущего нет. */
   type StepState = 'complete' | 'current' | 'upcoming' | 'neutral';
+  /** Отрезок полосы под подписью текущего шага: начало и ширина в процентах, выравнивание в нём. */
+  interface LabelSegment {
+    readonly start: number;
+    readonly size: number;
+    readonly anchor: 'start' | 'center' | 'end';
+  }
   /** Обстановка шаблона подписи: шаг и его номер с нуля. */
   interface LabelContext {
     readonly $implicit: Step;
@@ -47,8 +53,11 @@ interface IStepItem {
  * текущего шага. Шаги задаются через input `steps` (массив `IRtStepper.Step`
  * со связкой label + description), активный шаг — через `currentIndex`.
  *
- * Активная точка увеличена и подсвечивается янтарным; над ней висит подпись
- * текущего шага (тоже янтарная, выравнивается по краю на крайних шагах).
+ * Активная точка увеличена и подсвечивается янтарным; над ней стоит подпись
+ * текущего шага (тоже янтарная): по центру над точкой, на крайних шагах у края
+ * полосы, у среднего шага возле края — тоже у ближнего края. За полосу подпись не
+ * выходит, длинная переносится. Полоса тянется по ширине места, шагов сколько угодно;
+ * отступ точек от краёв задаёт приложение свойством `--rt-stepper-inset`.
  * Пройденные точки и заполненная часть полосы — progress-цвет; будущие точки
  * и трек — приглушённый цвет (в dark-теме оба ухода от яркого синего). Под
  * полосой — описание текущего шага, многоабзацное (`\n\n`). Сам список названий
@@ -79,11 +88,16 @@ export declare class RtStepperComponent {
    */
   protected readonly items: Signal<readonly IStepItem[]>;
   /**
-   * Якорь подписи текущего шага: подпись висит над активной точкой и не должна
-   * вылезать за края рельсы. Первый шаг — выравнивание по левому краю точки,
-   * последний — по правому, остальные центрируются над точкой.
+   * Отрезок полосы под подписью текущего шага: подпись центрирована над точкой и не выходит за
+   * полосу, на первом шаге прижата к началу, на последнем к концу. Средний шаг, у которого над
+   * точкой меньше половины полосы, прижимается к ближнему краю. Считает чистая функция рядом.
+   */
+  protected readonly labelSegment: Signal<IRtStepper.LabelSegment>;
+  /**
+   * Состояние каждой точки по зажатому номеру — тому же, что у подписи и заполнения: при номере
+   * за пределами набора текущей становится последняя точка, а не ни одна.
    */
-  protected readonly labelAnchor: Signal<'start' | 'center' | 'end'>;
+  protected readonly points: Signal<readonly IRtStepper.StepState[]>;
   /** Абзацы описания текущего шага: бэк отдаёт плоскую строку, делим по `\n\n`. */
   protected readonly descriptionParagraphs: Signal<readonly string[]>;
   readonly steps: InputSignal<readonly IRtStepper.Step[]>;

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

@@ -17,12 +17,57 @@ export declare namespace IRtTabs {
    * переводят фокус, а открывают Enter и Space.
    */
   type Activation = 'auto' | 'manual';
+  /** Что делать, когда вкладки не встают: прокручивать полосу (`scroll`) или уносить лишние в меню (`more`). */
+  type Overflow = 'scroll' | 'more';
+  /** У каких вкладок ряда виден крестик. */
+  type CloseOn = 'all' | 'selected';
+  /** Контекст шаблона меню вкладки: id вкладки, на которой нажали правую кнопку. */
+  interface ContextMenuContext {
+    readonly $implicit: Id;
+  }
+  /** Что нужно ряду от полосы. Тип вкладки — параметр: директива сама читает эту модель. */
+  interface MoreRowDeps<TAB> {
+    readonly enabled: Signal<boolean>;
+    readonly visible: Signal<readonly TAB[]>;
+    readonly selectedId: Signal<Id | null>;
+    readonly limit: Signal<number>;
+  }
+  /** Вкладка ряда с замеренной шириной: вход подбора ряда в режиме «Ещё». */
+  interface MoreSlot {
+    readonly id: Id;
+    readonly width: number;
+    readonly pinned: boolean;
+  }
+  /** Замеры полосы: всё, из чего подбирается ряд. */
+  interface MoreFit {
+    readonly slots: ReadonlyArray<MoreSlot>;
+    readonly selectedId: Id | null;
+    readonly moreWidth: number;
+    readonly available: number;
+    /** Сколько вкладок вместе с закреплёнными может стоять в ряду; без значения — сколько влезет. */
+    readonly limit?: number;
+  }
+  /** Видимость стрелок прокрутки у краёв полосы. */
+  interface RestShown {
+    readonly before: boolean;
+    readonly after: boolean;
+  }
+  /** Раскладка: ряд в порядке показа и вкладки меню в порядке объявления. */
+  interface MoreLayout {
+    readonly row: ReadonlyArray<Id>;
+    readonly more: ReadonlyArray<Id>;
+  }
   /**
    * Где стоят стрелки прокрутки переполненной полосы: `overlay` — поверх вкладок, только в ту
    * сторону, куда можно прокрутить; `inline` — обе в своих местах по краям, полоса между ними уже,
    * стрелка в сторону, куда прокручивать некуда, неактивна.
    */
   type ScrollArrows = 'overlay' | 'inline';
+  /**
+   * Вид стрелки прокрутки: `block` — квадрат во всю высоту полосы, базовый вид вкладок;
+   * `compact` — кнопка 24 со скруглением и тенью, под которой текст крайней вкладки гаснет.
+   */
+  type ArrowLook = 'block' | 'compact';
   /**
    * На сколько сдвигает полосу одно нажатие на стрелку: `fixed` — на 80 px, как прежде; `page` —
    * на видимую ширину, `third` — на её треть, как у Material.
@@ -105,6 +150,10 @@ export declare class RtTabDirective {
   readonly tooltip: InputSignal<string>;
   /** Вкладку можно закрыть: крестик в шапке и клавиша Delete поднимают `tabClose` у `rt-tabs`. */
   readonly closable: InputSignalWithTransform<boolean, BooleanInput>;
+  /** Закреплённая вкладка: в режиме «Ещё» стоит первой и в меню не уходит. */
+  readonly pinned: InputSignalWithTransform<boolean, BooleanInput>;
+  /** Пункты меню вкладки по правой кнопке. Нет шаблона — у вкладки остаётся меню браузера. */
+  readonly contextMenu: InputSignal<TemplateRef<IRtTabs.ContextMenuContext> | null>;
   /** Подсказка крестика закрываемой вкладки. Пусто — подсказки нет. */
   readonly closeTooltip: InputSignal<string>;
   /** Сторона подсказки крестика. Не задана — сторона подсказки по умолчанию. */
@@ -132,6 +181,8 @@ export declare class RtTabDirective {
    * Крестик — отдельная кнопка, и без имени диктор назвал бы её просто «кнопка».
    */
   readonly closeLabel: Signal<string>;
+  /** Какая иконка рисуется: своя, а у закреплённой без своей — кнопка закрепления. */
+  readonly shownIcon: Signal<IRtIcon.Name | null>;
   /** У вкладки есть иконка — по имени кита или по значку Material. */
   readonly hasIcon: Signal<boolean>;
   /** Бейдж стоит над иконкой: попросили `overlay`, бейдж есть и есть над чем стоять. */
@@ -225,6 +276,16 @@ export declare class RtTabDirective {
       "required": false;
       "isSignal": true;
     };
+    "pinned": {
+      "alias": "pinned";
+      "required": false;
+      "isSignal": true;
+    };
+    "contextMenu": {
+      "alias": "contextMenu";
+      "required": false;
+      "isSignal": true;
+    };
     "closeTooltip": {
       "alias": "closeTooltip";
       "required": false;
@@ -242,6 +303,8 @@ export declare class RtTabDirective {
  * `ease-in-out` и `cubic-bezier(…)`. Непонятное значение читается как `ease-out`.
  */
 declare function rtTabsEasing(value: string): (progress: number) => number;
+/** Какие стрелки прокрутки видны у полосы: есть куда прокручивать назад и вперёд. */
+declare function rtTabsRestShown(list: HTMLElement): IRtTabs.RestShown;
 /** Куда прокрутить полосу нажатием на стрелку: на шаг `step` от `from`, не дальше края. */
 declare function rtTabsPageTarget(list: HTMLElement, from: number, back: boolean, step: IRtTabs.ScrollStep): number;
 /**
@@ -261,6 +324,8 @@ declare class RtTabsScroller {
   constructor(win: Window | null, host: HTMLElement, list: () => ElementRef<HTMLElement> | undefined);
   /** Положение, от которого считать следующий шаг: цель идущей прокрутки или текущее. */
   from(): number;
+  /** Ставит полосу на цель: сразу (`instant`) или плавно. `null` — вкладка уже видна целиком. */
+  place(target: number | null, instant: boolean): void;
   /** Прокручивает полосу к `left`; новая прокрутка заменяет идущую. */
   to(left: number): void;
   /**
@@ -312,6 +377,26 @@ export declare class RtTabsControlDirective {
     };
   }, {}, never, never, true, never>;
 }
+/** Сколько вкладок по умолчанию стоит в ряду режима «Ещё». */
+declare const RT_TABS_MORE_LIMIT: number;
+/** Модификатор полосы на время замера: растянутые вкладки сжимаются до своего содержимого. */
+declare const RT_TABS_MEASURE_CLASS: string;
+/**
+ * Ряд вкладок в режиме «Ещё»: замеряет полосу, отдаёт решение чистой функции и держит раскладку.
+ * Вкладка из меню остаётся в разметке, только скрытая: её ширину ряд читает при каждом пересчёте.
+ */
+declare class RtTabsMoreRow {
+  #private;
+  /** Вкладки меню. */
+  readonly ids: Signal<ReadonlySet<IRtTabs.Id>>;
+  /** Место вкладки в ряду: порядок показа расходится с порядком объявления. */
+  readonly order: Signal<ReadonlyMap<IRtTabs.Id, number>>;
+  /** Вкладки меню в порядке объявления. */
+  readonly moreTabs: Signal<readonly RtTabDirective[]>;
+  /** Вкладки ряда в порядке показа: по ним ходят клавиши, и за ними едет полоса выбранной. */
+  readonly rowTabs: Signal<readonly RtTabDirective[]>;
+  constructor(win: Window | null, list: Signal<ElementRef<HTMLElement> | undefined>, deps: IRtTabs.MoreRowDeps<RtTabDirective>);
+}
 /** Признак, по которому пользователь просит обходиться без движения. */
 declare const RT_TABS_REDUCED_MOTION: string;
 /** Куда сдвигается содержимое: к вкладке правее (`forward`) или левее (`backward`). */
@@ -457,11 +542,13 @@ export declare class RtTabsComponent {
    * асинхронную загрузку/смену набора вкладок.
    */
   protected readonly selectedId: Signal<IRtTabs.Id | null>;
+  /** Режим «Ещё» работает только в горизонтальной полосе. */
+  protected readonly moreMode: Signal<boolean>;
   /** Активная вкладка целиком (для рендера панели). */
   protected readonly activeTab: Signal<RtTabDirective | null>;
   /**
    * Вкладка в таб-порядке: та, на которую стрелками перевели фокус в ручном режиме, иначе
-   * активная. Фокус на вкладке, которой больше нет или которая отключилась, не держится.
+   * активная. Фокус на вкладке, которой больше нет, которая отключилась или ушла в меню, не держится.
    */
   protected readonly focusId: Signal<IRtTabs.Id | null>;
   /** Видны ли стрелки прокрутки слева/справа (только горизонтальная полоса). */
@@ -472,6 +559,8 @@ export declare class RtTabsComponent {
   protected readonly tabListRef: Signal<ElementRef<HTMLElement> | undefined>;
   /** Смена панелей: прежняя уходит в сторону, обратную переходу, новая въезжает следом. */
   protected readonly panels: RtTabsPanels;
+  /** Ряд и меню режима «Ещё». */
+  protected readonly more: RtTabsMoreRow;
   /** Полоса выбранной вкладки: одна на всю полосу, переезжает при смене выбора. */
   protected readonly ink: RtTabsInk;
   /** Контролируемый активный id. `null` — компонент сам выбирает первую вкладку. */
@@ -482,6 +571,8 @@ export declare class RtTabsComponent {
   readonly stretch: InputSignalWithTransform<boolean, BooleanInput>;
   /** Плотные вкладки: отступ 8 по бокам, чтобы в узкую панель влезло больше вкладок */
   readonly dense: InputSignalWithTransform<boolean, BooleanInput>;
+  /** У каких вкладок ряда виден крестик. Строки меню «Ещё» его показывают всегда. */
+  readonly closeOn: InputSignal<IRtTabs.CloseOn>;
   /** Скроллить область контента при переполнении. */
   readonly contentScrollable: InputSignalWithTransform<boolean, BooleanInput>;
   /**
@@ -497,8 +588,14 @@ export declare class RtTabsComponent {
   readonly preserveContent: InputSignalWithTransform<boolean, BooleanInput>;
   /** Стрелки и Home/End открывают вкладку сразу (`auto`) или только переводят фокус (`manual`). */
   readonly activation: InputSignal<IRtTabs.Activation>;
+  /** Вкладки не встают: полоса прокручивается (`scroll`) или лишние уходят в меню «Ещё» (`more`). */
+  readonly overflow: InputSignal<IRtTabs.Overflow>;
+  /** Предел вкладок в ряду «Ещё» вместе с закреплёнными; выбранная из меню встаёт на место последней. */
+  readonly moreLimit: InputSignalWithTransform<number, unknown>;
   /** Стрелки прокрутки поверх вкладок (`overlay`) или в своих местах по краям полосы (`inline`). */
   readonly scrollArrows: InputSignal<IRtTabs.ScrollArrows>;
+  /** Вид стрелки: квадрат во всю высоту полосы (`block`) или компактная кнопка 24 (`compact`). */
+  readonly arrowLook: InputSignal<IRtTabs.ArrowLook>;
   /** Шаг нажатия на стрелку: 80 px (`fixed`), видимая ширина полосы (`page`) или её треть (`third`), как у Material. */
   readonly scrollStep: InputSignal<IRtTabs.ScrollStep>;
   /**
@@ -519,6 +616,8 @@ export declare class RtTabsComponent {
   protected selectTab(id: IRtTabs.Id): void;
   /** Крестик: нажатие не выбирает вкладку; фокус с крестика после закрытия уходит на вкладку, не на страницу. */
   protected onCloseClick(event: MouseEvent, tab: RtTabDirective): void;
+  /** Крестик строки меню: фокус остаётся на месте, выбор не меняется. */
+  protected onMoreClose(tab: RtTabDirective): void;
   /**
    * Навигация по вкладкам с клавиатуры. Шаг считается от вкладки в фокусе: в ручном режиме она
    * не совпадает с активной. Enter и Space ловит сама кнопка — они дают click и выбор.
@@ -552,6 +651,11 @@ export declare class RtTabsComponent {
       "required": false;
       "isSignal": true;
     };
+    "closeOn": {
+      "alias": "closeOn";
+      "required": false;
+      "isSignal": true;
+    };
     "contentScrollable": {
       "alias": "contentScrollable";
       "required": false;
@@ -572,11 +676,26 @@ export declare class RtTabsComponent {
       "required": false;
       "isSignal": true;
     };
+    "overflow": {
+      "alias": "overflow";
+      "required": false;
+      "isSignal": true;
+    };
+    "moreLimit": {
+      "alias": "moreLimit";
+      "required": false;
+      "isSignal": true;
+    };
     "scrollArrows": {
       "alias": "scrollArrows";
       "required": false;
       "isSignal": true;
     };
+    "arrowLook": {
+      "alias": "arrowLook";
+      "required": false;
+      "isSignal": true;
+    };
     "scrollStep": {
       "alias": "scrollStep";
       "required": false;

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

@@ -7,6 +7,8 @@ export declare namespace IRtWorkspace {
   interface PanelApi {
     asideCollapsed: Signal<boolean>;
     asideOpen: Signal<boolean>;
+    /** Панель сведений открывается поверх окна боковой панелью с затемнением */
+    asideOverlay: Signal<boolean>;
     toggleAsideCollapsed(): void;
     openAside(): void;
     closeAside(): void;
@@ -15,6 +17,12 @@ export declare namespace IRtWorkspace {
   interface SlotContext {
     $implicit: PanelApi;
   }
+  /** Что получает панель сведений, открытая поверх окна */
+  interface AsideOverlayData {
+    template: TemplateRef<SlotContext>;
+    context: SlotContext;
+    width: number;
+  }
   interface PersistedState {
     listWidth: number;
     asideWidth: number;
@@ -43,6 +51,8 @@ export declare class RtWorkspaceAsideDirective {
   static ɵfac: i0.ɵɵFactoryDeclaration<RtWorkspaceAsideDirective, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<RtWorkspaceAsideDirective, "[rtWorkspaceAside]", never, {}, {}, never, never, true, never>;
 }
+/** Что принимает вход порога: число, строка атрибута или `null` */
+type TBreakpointInput = number | string | null;
 export declare class RtWorkspaceComponent implements IRtWorkspace.PanelApi {
   #private;
   protected readonly t: Signal<TRtKitLabelMap>;
@@ -51,6 +61,8 @@ export declare class RtWorkspaceComponent implements IRtWorkspace.PanelApi {
   protected readonly asideSlot: Signal<RtWorkspaceAsideDirective | undefined>;
   protected readonly resizing: Signal<boolean>;
   protected readonly slotContext: IRtWorkspace.SlotContext;
+  /** Одна колонка по порогу из входа; без входа вид держат стили, и здесь всегда `false` */
+  protected readonly singleColumn: Signal<boolean>;
   readonly storageKey: InputSignal<string | null>;
   readonly hasActive: InputSignalWithTransform<boolean, BooleanInput>;
   /** Колонки стоят отдельными карточками с зазором, без линий между ними */
@@ -62,7 +74,16 @@ export declare class RtWorkspaceComponent implements IRtWorkspace.PanelApi {
   readonly asideMaxWidth: InputSignalWithTransform<number, number | string>;
   readonly asideDefaultWidth: InputSignalWithTransform<number, number | string>;
   readonly centerMinWidth: InputSignalWithTransform<number, number | string>;
+  /**
+   * Порог одной колонки, пиксели места страницы. Без входа порог держат стили: 768. С входом
+   * выше порога список и середина стоят рядом, а панель сведений, которой не хватает места
+   * третьей колонкой, открывается поверх окна. Порог выше 1080 смысла не имеет.
+   */
+  readonly singleColumnBreakpoint: InputSignalWithTransform<number | null, TBreakpointInput>;
+  /** Ширина панели сведений, открытой поверх окна */
+  readonly asideOverlayWidth: InputSignalWithTransform<number, number | string>;
   readonly backClicked: OutputEmitterRef<void>;
+  readonly asideOverlay: Signal<boolean>;
   readonly listWidth: Signal<number>;
   readonly asideWidth: Signal<number>;
   readonly asideCollapsed: Signal<boolean>;
@@ -128,7 +149,18 @@ export declare class RtWorkspaceComponent implements IRtWorkspace.PanelApi {
       "required": false;
       "isSignal": true;
     };
+    "singleColumnBreakpoint": {
+      "alias": "singleColumnBreakpoint";
+      "required": false;
+      "isSignal": true;
+    };
+    "asideOverlayWidth": {
+      "alias": "asideOverlayWidth";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "backClicked": "backClicked";
   }, ["listSlot", "centerSlot", "asideSlot"], never, true, never>;
-}
+}
+export {};