UNPKG

20.3 kBTypeScriptView Raw
1import { Message } from '@lumino/messaging';
2import { ISignal } from '@lumino/signaling';
3import { ElementARIAAttrs, ElementDataset, ElementInlineStyle, VirtualElement } from '@lumino/virtualdom';
4import { Title } from './title';
5import { Widget } from './widget';
6/**
7 * A widget which displays titles as a single row or column of tabs.
8 *
9 * #### Notes
10 * If CSS transforms are used to rotate nodes for vertically oriented
11 * text, then tab dragging will not work correctly. The `tabsMovable`
12 * property should be set to `false` when rotating nodes from CSS.
13 */
14export declare class TabBar<T> extends Widget {
15 /**
16 * Construct a new tab bar.
17 *
18 * @param options - The options for initializing the tab bar.
19 */
20 constructor(options?: TabBar.IOptions<T>);
21 /**
22 * Dispose of the resources held by the widget.
23 */
24 dispose(): void;
25 /**
26 * A signal emitted when the current tab is changed.
27 *
28 * #### Notes
29 * This signal is emitted when the currently selected tab is changed
30 * either through user or programmatic interaction.
31 *
32 * Notably, this signal is not emitted when the index of the current
33 * tab changes due to tabs being inserted, removed, or moved. It is
34 * only emitted when the actual current tab node is changed.
35 */
36 readonly currentChanged: ISignal<this, TabBar.ICurrentChangedArgs<T>>;
37 /**
38 * A signal emitted when a tab is moved by the user.
39 *
40 * #### Notes
41 * This signal is emitted when a tab is moved by user interaction.
42 *
43 * This signal is not emitted when a tab is moved programmatically.
44 */
45 readonly tabMoved: ISignal<this, TabBar.ITabMovedArgs<T>>;
46 /**
47 * A signal emitted when a tab is clicked by the user.
48 *
49 * #### Notes
50 * If the clicked tab is not the current tab, the clicked tab will be
51 * made current and the `currentChanged` signal will be emitted first.
52 *
53 * This signal is emitted even if the clicked tab is the current tab.
54 */
55 readonly tabActivateRequested: ISignal<this, TabBar.ITabActivateRequestedArgs<T>>;
56 /**
57 * A signal emitted when the tab bar add button is clicked.
58 */
59 readonly addRequested: ISignal<this, void>;
60 /**
61 * A signal emitted when a tab close icon is clicked.
62 *
63 * #### Notes
64 * This signal is not emitted unless the tab title is `closable`.
65 */
66 readonly tabCloseRequested: ISignal<this, TabBar.ITabCloseRequestedArgs<T>>;
67 /**
68 * A signal emitted when a tab is dragged beyond the detach threshold.
69 *
70 * #### Notes
71 * This signal is emitted when the user drags a tab with the mouse,
72 * and mouse is dragged beyond the detach threshold.
73 *
74 * The consumer of the signal should call `releaseMouse` and remove
75 * the tab in order to complete the detach.
76 *
77 * This signal is only emitted once per drag cycle.
78 */
79 readonly tabDetachRequested: ISignal<this, TabBar.ITabDetachRequestedArgs<T>>;
80 /**
81 * The renderer used by the tab bar.
82 */
83 readonly renderer: TabBar.IRenderer<T>;
84 /**
85 * The document to use with the tab bar.
86 *
87 * The default is the global `document` instance.
88 */
89 readonly document: Document | ShadowRoot;
90 /**
91 * Whether the tabs are movable by the user.
92 *
93 * #### Notes
94 * Tabs can always be moved programmatically.
95 */
96 tabsMovable: boolean;
97 /**
98 * Whether the titles can be user-edited.
99 *
100 */
101 /**
102 * Set whether titles can be user edited.
103 *
104 */
105 titlesEditable: boolean;
106 /**
107 * Whether a tab can be deselected by the user.
108 *
109 * #### Notes
110 * Tabs can be always be deselected programmatically.
111 */
112 allowDeselect: boolean;
113 /**
114 * The selection behavior when inserting a tab.
115 */
116 insertBehavior: TabBar.InsertBehavior;
117 /**
118 * The selection behavior when removing a tab.
119 */
120 removeBehavior: TabBar.RemoveBehavior;
121 /**
122 * Get the currently selected title.
123 *
124 * #### Notes
125 * This will be `null` if no tab is selected.
126 */
127 /**
128 * Set the currently selected title.
129 *
130 * #### Notes
131 * If the title does not exist, the title will be set to `null`.
132 */
133 currentTitle: Title<T> | null;
134 /**
135 * Get the index of the currently selected tab.
136 *
137 * #### Notes
138 * This will be `-1` if no tab is selected.
139 */
140 /**
141 * Set the index of the currently selected tab.
142 *
143 * #### Notes
144 * If the value is out of range, the index will be set to `-1`.
145 */
146 currentIndex: number;
147 /**
148 * Get the name of the tab bar.
149 */
150 /**
151 * Set the name of the tab bar.
152 */
153 name: string;
154 /**
155 * Get the orientation of the tab bar.
156 *
157 * #### Notes
158 * This controls whether the tabs are arranged in a row or column.
159 */
160 /**
161 * Set the orientation of the tab bar.
162 *
163 * #### Notes
164 * This controls whether the tabs are arranged in a row or column.
165 */
166 orientation: TabBar.Orientation;
167 /**
168 * Whether the add button is enabled.
169 */
170 /**
171 * Set whether the add button is enabled.
172 */
173 addButtonEnabled: boolean;
174 /**
175 * A read-only array of the titles in the tab bar.
176 */
177 readonly titles: ReadonlyArray<Title<T>>;
178 /**
179 * The tab bar content node.
180 *
181 * #### Notes
182 * This is the node which holds the tab nodes.
183 *
184 * Modifying this node directly can lead to undefined behavior.
185 */
186 readonly contentNode: HTMLUListElement;
187 /**
188 * The tab bar add button node.
189 *
190 * #### Notes
191 * This is the node which holds the add button.
192 *
193 * Modifying this node directly can lead to undefined behavior.
194 */
195 readonly addButtonNode: HTMLDivElement;
196 /**
197 * Add a tab to the end of the tab bar.
198 *
199 * @param value - The title which holds the data for the tab,
200 * or an options object to convert to a title.
201 *
202 * @returns The title object added to the tab bar.
203 *
204 * #### Notes
205 * If the title is already added to the tab bar, it will be moved.
206 */
207 addTab(value: Title<T> | Title.IOptions<T>): Title<T>;
208 /**
209 * Insert a tab into the tab bar at the specified index.
210 *
211 * @param index - The index at which to insert the tab.
212 *
213 * @param value - The title which holds the data for the tab,
214 * or an options object to convert to a title.
215 *
216 * @returns The title object added to the tab bar.
217 *
218 * #### Notes
219 * The index will be clamped to the bounds of the tabs.
220 *
221 * If the title is already added to the tab bar, it will be moved.
222 */
223 insertTab(index: number, value: Title<T> | Title.IOptions<T>): Title<T>;
224 /**
225 * Remove a tab from the tab bar.
226 *
227 * @param title - The title for the tab to remove.
228 *
229 * #### Notes
230 * This is a no-op if the title is not in the tab bar.
231 */
232 removeTab(title: Title<T>): void;
233 /**
234 * Remove the tab at a given index from the tab bar.
235 *
236 * @param index - The index of the tab to remove.
237 *
238 * #### Notes
239 * This is a no-op if the index is out of range.
240 */
241 removeTabAt(index: number): void;
242 /**
243 * Remove all tabs from the tab bar.
244 */
245 clearTabs(): void;
246 /**
247 * Release the mouse and restore the non-dragged tab positions.
248 *
249 * #### Notes
250 * This will cause the tab bar to stop handling mouse events and to
251 * restore the tabs to their non-dragged positions.
252 */
253 releaseMouse(): void;
254 /**
255 * Handle the DOM events for the tab bar.
256 *
257 * @param event - The DOM event sent to the tab bar.
258 *
259 * #### Notes
260 * This method implements the DOM `EventListener` interface and is
261 * called in response to events on the tab bar's DOM node.
262 *
263 * This should not be called directly by user code.
264 */
265 handleEvent(event: Event): void;
266 /**
267 * A message handler invoked on a `'before-attach'` message.
268 */
269 protected onBeforeAttach(msg: Message): void;
270 /**
271 * A message handler invoked on an `'after-detach'` message.
272 */
273 protected onAfterDetach(msg: Message): void;
274 /**
275 * A message handler invoked on an `'update-request'` message.
276 */
277 protected onUpdateRequest(msg: Message): void;
278 /**
279 * Handle the `'dblclick'` event for the tab bar.
280 */
281 private _evtDblClick;
282 /**
283 * Handle the `'keydown'` event for the tab bar.
284 */
285 private _evtKeyDown;
286 /**
287 * Handle the `'mousedown'` event for the tab bar.
288 */
289 private _evtMouseDown;
290 /**
291 * Handle the `'mousemove'` event for the tab bar.
292 */
293 private _evtMouseMove;
294 /**
295 * Handle the `'mouseup'` event for the document.
296 */
297 private _evtMouseUp;
298 /**
299 * Release the mouse and restore the non-dragged tab positions.
300 */
301 private _releaseMouse;
302 /**
303 * Adjust the current index for a tab insert operation.
304 *
305 * This method accounts for the tab bar's insertion behavior when
306 * adjusting the current index and emitting the changed signal.
307 */
308 private _adjustCurrentForInsert;
309 /**
310 * Adjust the current index for a tab move operation.
311 *
312 * This method will not cause the actual current tab to change.
313 * It silently adjusts the index to account for the given move.
314 */
315 private _adjustCurrentForMove;
316 /**
317 * Adjust the current index for a tab remove operation.
318 *
319 * This method accounts for the tab bar's remove behavior when
320 * adjusting the current index and emitting the changed signal.
321 */
322 private _adjustCurrentForRemove;
323 /**
324 * Handle the `changed` signal of a title object.
325 */
326 private _onTitleChanged;
327 private _name;
328 private _currentIndex;
329 private _titles;
330 private _orientation;
331 private _document;
332 private _titlesEditable;
333 private _previousTitle;
334 private _dragData;
335 private _addButtonEnabled;
336 private _tabMoved;
337 private _currentChanged;
338 private _addRequested;
339 private _tabCloseRequested;
340 private _tabDetachRequested;
341 private _tabActivateRequested;
342}
343/**
344 * The namespace for the `TabBar` class statics.
345 */
346export declare namespace TabBar {
347 /**
348 * A type alias for a tab bar orientation.
349 */
350 type Orientation = /**
351 * The tabs are arranged in a single row, left-to-right.
352 *
353 * The tab text orientation is horizontal.
354 */ 'horizontal'
355 /**
356 * The tabs are arranged in a single column, top-to-bottom.
357 *
358 * The tab text orientation is horizontal.
359 */
360 | 'vertical';
361 /**
362 * A type alias for the selection behavior on tab insert.
363 */
364 type InsertBehavior = /**
365 * The selected tab will not be changed.
366 */ 'none'
367 /**
368 * The inserted tab will be selected.
369 */
370 | 'select-tab'
371 /**
372 * The inserted tab will be selected if the current tab is null.
373 */
374 | 'select-tab-if-needed';
375 /**
376 * A type alias for the selection behavior on tab remove.
377 */
378 type RemoveBehavior = /**
379 * No tab will be selected.
380 */ 'none'
381 /**
382 * The tab after the removed tab will be selected if possible.
383 */
384 | 'select-tab-after'
385 /**
386 * The tab before the removed tab will be selected if possible.
387 */
388 | 'select-tab-before'
389 /**
390 * The previously selected tab will be selected if possible.
391 */
392 | 'select-previous-tab';
393 /**
394 * An options object for creating a tab bar.
395 */
396 interface IOptions<T> {
397 /**
398 * The document to use with the tab bar.
399 *
400 * The default is the global `document` instance.
401 */
402 document?: Document | ShadowRoot;
403 /**
404 * Name of the tab bar.
405 *
406 * This is used for accessibility reasons. The default is the empty string.
407 */
408 name?: string;
409 /**
410 * The layout orientation of the tab bar.
411 *
412 * The default is `horizontal`.
413 */
414 orientation?: TabBar.Orientation;
415 /**
416 * Whether the tabs are movable by the user.
417 *
418 * The default is `false`.
419 */
420 tabsMovable?: boolean;
421 /**
422 * Whether a tab can be deselected by the user.
423 *
424 * The default is `false`.
425 */
426 allowDeselect?: boolean;
427 /**
428 * Whether the titles can be directly edited by the user.
429 *
430 * The default is `false`.
431 */
432 titlesEditable?: boolean;
433 /**
434 * Whether the add button is enabled.
435 *
436 * The default is `false`.
437 */
438 addButtonEnabled?: boolean;
439 /**
440 * The selection behavior when inserting a tab.
441 *
442 * The default is `'select-tab-if-needed'`.
443 */
444 insertBehavior?: TabBar.InsertBehavior;
445 /**
446 * The selection behavior when removing a tab.
447 *
448 * The default is `'select-tab-after'`.
449 */
450 removeBehavior?: TabBar.RemoveBehavior;
451 /**
452 * A renderer to use with the tab bar.
453 *
454 * The default is a shared renderer instance.
455 */
456 renderer?: IRenderer<T>;
457 }
458 /**
459 * The arguments object for the `currentChanged` signal.
460 */
461 interface ICurrentChangedArgs<T> {
462 /**
463 * The previously selected index.
464 */
465 readonly previousIndex: number;
466 /**
467 * The previously selected title.
468 */
469 readonly previousTitle: Title<T> | null;
470 /**
471 * The currently selected index.
472 */
473 readonly currentIndex: number;
474 /**
475 * The currently selected title.
476 */
477 readonly currentTitle: Title<T> | null;
478 }
479 /**
480 * The arguments object for the `tabMoved` signal.
481 */
482 interface ITabMovedArgs<T> {
483 /**
484 * The previous index of the tab.
485 */
486 readonly fromIndex: number;
487 /**
488 * The current index of the tab.
489 */
490 readonly toIndex: number;
491 /**
492 * The title for the tab.
493 */
494 readonly title: Title<T>;
495 }
496 /**
497 * The arguments object for the `tabActivateRequested` signal.
498 */
499 interface ITabActivateRequestedArgs<T> {
500 /**
501 * The index of the tab to activate.
502 */
503 readonly index: number;
504 /**
505 * The title for the tab.
506 */
507 readonly title: Title<T>;
508 }
509 /**
510 * The arguments object for the `tabCloseRequested` signal.
511 */
512 interface ITabCloseRequestedArgs<T> {
513 /**
514 * The index of the tab to close.
515 */
516 readonly index: number;
517 /**
518 * The title for the tab.
519 */
520 readonly title: Title<T>;
521 }
522 /**
523 * The arguments object for the `tabDetachRequested` signal.
524 */
525 interface ITabDetachRequestedArgs<T> {
526 /**
527 * The index of the tab to detach.
528 */
529 readonly index: number;
530 /**
531 * The title for the tab.
532 */
533 readonly title: Title<T>;
534 /**
535 * The node representing the tab.
536 */
537 readonly tab: HTMLElement;
538 /**
539 * The current client X position of the mouse.
540 */
541 readonly clientX: number;
542 /**
543 * The current client Y position of the mouse.
544 */
545 readonly clientY: number;
546 }
547 /**
548 * An object which holds the data to render a tab.
549 */
550 interface IRenderData<T> {
551 /**
552 * The title associated with the tab.
553 */
554 readonly title: Title<T>;
555 /**
556 * Whether the tab is the current tab.
557 */
558 readonly current: boolean;
559 /**
560 * The z-index for the tab.
561 */
562 readonly zIndex: number;
563 }
564 /**
565 * A renderer for use with a tab bar.
566 */
567 interface IRenderer<T> {
568 /**
569 * A selector which matches the close icon node in a tab.
570 */
571 readonly closeIconSelector: string;
572 /**
573 * Render the virtual element for a tab.
574 *
575 * @param data - The data to use for rendering the tab.
576 *
577 * @returns A virtual element representing the tab.
578 */
579 renderTab(data: IRenderData<T>): VirtualElement;
580 }
581 /**
582 * The default implementation of `IRenderer`.
583 *
584 * #### Notes
585 * Subclasses are free to reimplement rendering methods as needed.
586 */
587 class Renderer implements IRenderer<any> {
588 /**
589 * A selector which matches the close icon node in a tab.
590 */
591 readonly closeIconSelector = ".lm-TabBar-tabCloseIcon";
592 /**
593 * Render the virtual element for a tab.
594 *
595 * @param data - The data to use for rendering the tab.
596 *
597 * @returns A virtual element representing the tab.
598 */
599 renderTab(data: IRenderData<any>): VirtualElement;
600 /**
601 * Render the icon element for a tab.
602 *
603 * @param data - The data to use for rendering the tab.
604 *
605 * @returns A virtual element representing the tab icon.
606 */
607 renderIcon(data: IRenderData<any>): VirtualElement;
608 /**
609 * Render the label element for a tab.
610 *
611 * @param data - The data to use for rendering the tab.
612 *
613 * @returns A virtual element representing the tab label.
614 */
615 renderLabel(data: IRenderData<any>): VirtualElement;
616 /**
617 * Render the close icon element for a tab.
618 *
619 * @param data - The data to use for rendering the tab.
620 *
621 * @returns A virtual element representing the tab close icon.
622 */
623 renderCloseIcon(data: IRenderData<any>): VirtualElement;
624 /**
625 * Create a unique render key for the tab.
626 *
627 * @param data - The data to use for the tab.
628 *
629 * @returns The unique render key for the tab.
630 *
631 * #### Notes
632 * This method caches the key against the tab title the first time
633 * the key is generated. This enables efficient rendering of moved
634 * tabs and avoids subtle hover style artifacts.
635 */
636 createTabKey(data: IRenderData<any>): string;
637 /**
638 * Create the inline style object for a tab.
639 *
640 * @param data - The data to use for the tab.
641 *
642 * @returns The inline style data for the tab.
643 */
644 createTabStyle(data: IRenderData<any>): ElementInlineStyle;
645 /**
646 * Create the class name for the tab.
647 *
648 * @param data - The data to use for the tab.
649 *
650 * @returns The full class name for the tab.
651 */
652 createTabClass(data: IRenderData<any>): string;
653 /**
654 * Create the dataset for a tab.
655 *
656 * @param data - The data to use for the tab.
657 *
658 * @returns The dataset for the tab.
659 */
660 createTabDataset(data: IRenderData<any>): ElementDataset;
661 /**
662 * Create the ARIA attributes for a tab.
663 *
664 * @param data - The data to use for the tab.
665 *
666 * @returns The ARIA attributes for the tab.
667 */
668 createTabARIA(data: IRenderData<any>): ElementARIAAttrs;
669 /**
670 * Create the class name for the tab icon.
671 *
672 * @param data - The data to use for the tab.
673 *
674 * @returns The full class name for the tab icon.
675 */
676 createIconClass(data: IRenderData<any>): string;
677 private _tabID;
678 private _tabKeys;
679 }
680 /**
681 * The default `Renderer` instance.
682 */
683 const defaultRenderer: Renderer;
684 /**
685 * A selector which matches the add button node in the tab bar.
686 */
687 const addButtonSelector = ".lm-TabBar-addButton";
688}
689//# sourceMappingURL=tabbar.d.ts.map
\No newline at end of file