@ckeditor/ckeditor5-ai
Version:
AI features for CKEditor 5.
204 lines (203 loc) • 6.71 kB
TypeScript
/**
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* @module ai/aitabs/tabs/aitabsview
* @publicApi
*/
import { View, type ViewCollection } from '@ckeditor/ckeditor5-ui';
import { type ArrayOrItem, type Locale } from '@ckeditor/ckeditor5-utils';
import { TabButtonView } from './tabbuttonview.js';
import { TabPanelView } from './tabpanelview.js';
import '../../../theme/aitabs/tabs/tabsview.css';
export declare const AI_TABS_POSITIONS: readonly ["top", "left", "right"];
/**
* A view component that manages the tabs and their panels.
*
* @experimental **Experimental:** This is a production-ready API but may change in minor releases
* without the standard deprecation policy. Check the changelog for migration guidance.
*/
export declare class AITabsView extends View {
/**
* The collection of button views.
*/
buttonViews: ViewCollection<TabButtonView>;
/**
* The collection of panel views.
*/
panelViews: ViewCollection<TabPanelView>;
/**
* An additional CSS class added to the {@link #element}.
*
* @observable
*/
class?: string;
/**
* The ID of the active tab.
*
* See {@link #getTabIds}.
*
* @observable
*/
activeTab: string | null;
/**
* The position of the tabs.
*
* @observable
*/
side: typeof AI_TABS_POSITIONS[number];
/**
* Indicates whether the tabs view is maximized.
*
* @observable
*/
isMaximized: boolean;
/**
* Indicates whether clicking the active tab button collapses the panel.
*
* When `true`, clicking the active tab button deactivates the tab and adds the
* `ck-ai-tabs_collapsed` class to the view. When `false`, clicking the active tab
* button is a no-op.
*
* @observable
*/
collapsible: boolean;
/**
* Creates a new AITabsView instance.
*/
constructor(locale: Locale, options?: AITabsViewOptions);
/**
* Returns the IDs of all tabs as defined in the {@link #addTab} method.
*
* Also see: {@link #getTab}.
*
* @experimental **Experimental:** This is a production-ready API but may change in minor releases
* without the standard deprecation policy. Check the changelog for migration guidance.
* @returns {Array<string>} The IDs of all tabs.
*/
getTabIds(): Array<string>;
/**
* Returns the pair of tab button and panel of a specific id.
*
* Note: Use {@link #getTabIds} to learn how to get the IDs of all tabs.
*
* @experimental **Experimental:** This is a production-ready API but may change in minor releases
* without the standard deprecation policy. Check the changelog for migration guidance.
*/
getTab(tabId: string): {
button: TabButtonView;
panel: TabPanelView;
} | null;
/**
* Adds a new tab to the tabs view.
*
* Note: Use {@link #activateTab} to activate the tab after adding it.
*
* Note: You can hide or show the tab after adding it using {@link #hideTab} and {@link #showTab}.
*
* @experimental **Experimental:** This is a production-ready API but may change in minor releases
* without the standard deprecation policy. Check the changelog for migration guidance.
*/
addTab(config: AITabsAddTabOptions): {
button: TabButtonView;
panel: TabPanelView;
};
/**
* Activates a tab by its ID.
*
* Note: Use {@link #getTabIds} to learn how to get the IDs of all tabs.
*
* Note: If `null` is passed, the current active tab will be deactivated and its panel will be hidden.
*
* @experimental **Experimental:** This is a production-ready API but may change in minor releases
* without the standard deprecation policy. Check the changelog for migration guidance.
*/
activateTab(id: string | null): void;
/**
* Toggles the active state of a tab. If the tab is active, it becomes inactive
* (the `ck-ai-tabs_collapsed` class is added to the view). Otherwise it becomes active.
*
* Has no effect when {@link #collapsible} is `false` and the tab is already active.
*
* The collapsed state is handled by built-in styles. You may target the
* `ck-ai-tabs_collapsed` class to customize the appearance.
*/
toggleTabPanel(id: string): void;
/**
* Shows the tab of a specific id.
*
* Note: Use {@link #getTabIds} to learn how to get the IDs of all tabs.
*
* @experimental **Experimental:** This is a production-ready API but may change in minor releases
* without the standard deprecation policy. Check the changelog for migration guidance.
*/
showTab(id: string): void;
/**
* Hides the tab of a specific id.
*
* Note: Use {@link #getTabIds} to learn how to get the IDs of all tabs.
*
* @experimental **Experimental:** This is a production-ready API but may change in minor releases
* without the standard deprecation policy. Check the changelog for migration guidance.
*/
hideTab(id: string): void;
}
/**
* The event that fires when a tab is activated.
*/
export type AITabsActivateTabEvent = {
name: 'activateTab' | `activateTab:${string}`;
args: [{
newTab: string | null;
oldTab: string | null;
}];
};
/**
* The options for the `AITabsView#addTab()` method.
*/
export type AITabsAddTabOptions = {
/**
* The unique ID of the tab.
*/
id: string;
/**
* The label of the tab button.
*/
buttonLabel: string;
/**
* The icon of the tab button. See {@link module:ui/button/buttonview~ButtonView#icon} to learn more.
*/
buttonIcon?: string;
/**
* The order of the tab. If not provided, the tab will be added to the end of the tabs list.
*/
order?: number;
/**
* The content of the tab. If not provided, the tab will be empty.
*/
content?: View;
};
/**
* The options for the `AITabsView` class constructor.
*/
export type AITabsViewOptions = {
/**
* Additional children of the tabs view.
*/
children?: Array<View>;
/**
* The position of the tabs.
*/
side?: typeof AI_TABS_POSITIONS[number];
/**
* An additional CSS class added to the {@link module:ai/aitabs/tabs/aitabsview~AITabsView#element}.
*/
class?: ArrayOrItem<string>;
/**
* Whether clicking the active tab button collapses the panel.
*
* Defaults to `false`.
*/
collapsible?: boolean;
};