diff --git a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts index 2c43438c5b..1315c463b3 100644 --- a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts @@ -201,7 +201,7 @@ export class TabDesignerPlugin implements ICreatorPlugin { } constructor(private creator: SurveyCreatorModel) { - creator.addPluginTab("designer", this); + creator.addTab({ name: "designer", plugin: this, iconName: "icon-config" }); this.tabControlModel = new TabControlModel(this.creator.sidebar); this.propertyGrid = new PropertyGridModel(undefined, creator, creator.getPropertyGridDefinition()); this.showOneCategoryInPropertyGrid = creator.showOneCategoryInPropertyGrid; @@ -287,7 +287,7 @@ export class TabDesignerPlugin implements ICreatorPlugin { }); this.propertyGrid.survey.onPageVisibleChanged.add((sender: SurveyModel, options: PageVisibleChangedEvent) => { const action = this.tabControlModel.topToolbar.getActionById(options.page.name); - if(!!action) { + if (!!action) { action.visible = options.page.isVisible; } }); diff --git a/packages/survey-creator-core/src/components/tabs/json-editor-ace.ts b/packages/survey-creator-core/src/components/tabs/json-editor-ace.ts index 10777307da..e9f3ba63d0 100644 --- a/packages/survey-creator-core/src/components/tabs/json-editor-ace.ts +++ b/packages/survey-creator-core/src/components/tabs/json-editor-ace.ts @@ -113,7 +113,7 @@ export class TabJsonEditorAcePlugin implements ICreatorPlugin { constructor(creator: SurveyCreatorModel) { super(creator); - creator.addPluginTab("json", this, undefined, "svc-tab-json-editor-ace"); + creator.addTab({ name: "json", plugin: this, iconName: "icon-codeeditor-24x24", componentName: "svc-tab-json-editor-ace" }); } protected createModel( creator: SurveyCreatorModel diff --git a/packages/survey-creator-core/src/components/tabs/json-editor-textarea.ts b/packages/survey-creator-core/src/components/tabs/json-editor-textarea.ts index 28237691ab..4d4937af18 100644 --- a/packages/survey-creator-core/src/components/tabs/json-editor-textarea.ts +++ b/packages/survey-creator-core/src/components/tabs/json-editor-textarea.ts @@ -89,7 +89,7 @@ export class TabJsonEditorTextareaPlugin implements ICreatorPlugin { constructor(creator: SurveyCreatorModel) { super(creator); - creator.addPluginTab("json", this, undefined, "svc-tab-json-editor-textarea"); + creator.addTab({ name: "json", plugin: this, iconName: "icon-codeeditor-24x24", componentName: "svc-tab-json-editor-textarea" }); } protected createModel( creator: SurveyCreatorModel diff --git a/packages/survey-creator-core/src/components/tabs/logic-plugin.ts b/packages/survey-creator-core/src/components/tabs/logic-plugin.ts index 49a3355475..f22ba50eb2 100644 --- a/packages/survey-creator-core/src/components/tabs/logic-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/logic-plugin.ts @@ -13,7 +13,7 @@ export class TabLogicPlugin implements ICreatorPlugin { private fastEntryAction: Action; public model: SurveyLogicUI; constructor(private creator: SurveyCreatorModel) { - creator.addPluginTab("logic", this); + creator.addTab({ name: "logic", plugin: this, iconName: "icon-logic-24x24" }); this.createActions().forEach(action => creator.toolbar.actions.push(action)); } public activate(): void { diff --git a/packages/survey-creator-core/src/components/tabs/test-plugin.ts b/packages/survey-creator-core/src/components/tabs/test-plugin.ts index 728e163307..7c83470050 100644 --- a/packages/survey-creator-core/src/components/tabs/test-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/test-plugin.ts @@ -89,7 +89,7 @@ export class TabTestPlugin implements ICreatorPlugin { } constructor(private creator: SurveyCreatorModel) { - creator.addPluginTab("preview", this); + creator.addTab({ name: "preview", plugin: this, iconName: "icon-preview" }); this.setPreviewTheme(this.creator.previewTheme); this.createActions().forEach(action => creator.toolbar.actions.push(action)); } diff --git a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts index f32c220e59..21c7409b49 100644 --- a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts @@ -244,7 +244,7 @@ export class ThemeTabPlugin implements ICreatorPlugin { } constructor(private creator: SurveyCreatorModel) { - creator.addPluginTab("theme", this); + creator.addTab({ name: "theme", plugin: this, iconName: "icon-theme" }); this.simulatorCssClasses = surveyCss[defaultThemeName]; this.tabControlModel = new TabControlModel(this.creator.sidebar); this.createActions().forEach(action => creator.toolbar.actions.push(action)); diff --git a/packages/survey-creator-core/src/components/tabs/translation-plugin.ts b/packages/survey-creator-core/src/components/tabs/translation-plugin.ts index 7ecc4d3153..d2ef0bff6f 100644 --- a/packages/survey-creator-core/src/components/tabs/translation-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/translation-plugin.ts @@ -40,7 +40,7 @@ export class TabTranslationPlugin implements ICreatorPlugin { } constructor(private creator: SurveyCreatorModel) { - creator.addPluginTab("translation", this); + creator.addTab({ name: "translation", plugin: this, iconName: "icon-language" }); this.showOneCategoryInPropertyGrid = creator.showOneCategoryInPropertyGrid; this.tabControlModel = new TabControlModel(this.creator.sidebar); this.sidebarTab = this.creator.sidebar.addPage("translation"); diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts index 8efc9a708a..bd232b5fc6 100644 --- a/packages/survey-creator-core/src/creator-base.ts +++ b/packages/survey-creator-core/src/creator-base.ts @@ -10,7 +10,7 @@ import { addIconsToThemeSet, SvgThemeSets } from "survey-core"; -import { ICreatorPlugin, ISurveyCreatorOptions, settings, ICollectionItemAllowOperations } from "./creator-settings"; +import { ICreatorPlugin, ISurveyCreatorOptions, settings, ICollectionItemAllowOperations, ITabOptions } from "./creator-settings"; import { editorLocalization, setupLocale } from "./editorLocalization"; import { SurveyJSON5 } from "./json5"; import { DragDropChoices } from "survey-core"; @@ -461,14 +461,7 @@ export class SurveyCreatorModel extends Base protected plugins: { [name: string]: ICreatorPlugin } = {}; /** - * Adds a custom tab to Survey Creator. - * - * [View Demo](https://surveyjs.io/survey-creator/examples/modify-tab-bar/ (linkStyle)) - * @param name A unique tab ID. - * @param plugin An object that allows you to handle user interactions with the tab. - * @param title A tab caption. If `title` is undefined, the `name` argument value is displayed instead. To localize the caption, add its translations to the `ed` object within [localization dictionaries](https://github.com/surveyjs/survey-creator/tree/90de47d2c9da49b06a7f97414026d70f7acf05c6/packages/survey-creator-core/src/localization) and pass `ed.propertyName` as the `title` argument. - * @param componentName The name of the component that renders tab markup. Default value: `"svc-tab-" + name`. - * @param index A zero-based index that specifies the tab's position relative to other tabs. + * @deprecated Use the [`addTab(tabOptions)`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#addTab) method instead. */ public addPluginTab( name: string, @@ -477,7 +470,48 @@ export class SurveyCreatorModel extends Base componentName?: string, index?: number ) { - this.tabbedMenu.addTab(name, plugin, title, componentName, index); + this.tabbedMenu.addTab(name, plugin, title, undefined, componentName, index); + this.addPlugin(name, plugin); + } + /** + * Adds a custom tab to Survey Creator. + * + * This method accepts an `ITabOptions` object with the following properties: + * + * - `name`: `string`\ + * A unique tab ID. + * + * - `plugin`: `ICreatorPlugin`\ + * An object that allows you to handle user interactions with the tab. + * + * - `title`: `string`\ + * *(Optional)* A tab caption. If `title` is undefined, the `name` property value is displayed instead. To localize the caption, add its translations to the `ed` object within [localization dictionaries](https://github.com/surveyjs/survey-creator/tree/90de47d2c9da49b06a7f97414026d70f7acf05c6/packages/survey-creator-core/src/localization) and pass `ed.propertyName` as the `title` property. + * + * - `iconName`: `string`\ + * *(Optional)* An [icon name](https://surveyjs.io/form-library/documentation/icons). Icons are used when the tab bar doesn't have enough width to display tab titles. + * + * - `componentName`: `string`\ + * *(Optional)* The name of the component that renders tab markup. Default value: `"svc-tab-" + name`. + * + * - `index`: `number`\ + * *(Optional)* A zero-based index that specifies the tab's position relative to other tabs. + * + * [View Demo](https://surveyjs.io/survey-creator/examples/modify-tab-bar/ (linkStyle)) + * @param tabOptions An object that configures the custom tab. + */ + public addTab(tabOptions: ITabOptions) { + let { + name, + plugin, + title, + iconName, + componentName, + index + } = tabOptions; + if (!name || !plugin) { + throw new Error("Plugin or name is not set"); + } + this.tabbedMenu.addTab(name, plugin, title, iconName, componentName, index); this.addPlugin(name, plugin); } public addPlugin(name: string, plugin: ICreatorPlugin): void { diff --git a/packages/survey-creator-core/src/creator-settings.ts b/packages/survey-creator-core/src/creator-settings.ts index ebd004f68c..7b58e264e2 100644 --- a/packages/survey-creator-core/src/creator-settings.ts +++ b/packages/survey-creator-core/src/creator-settings.ts @@ -1,4 +1,5 @@ -import { Base, IAction, ItemValue, +import { + Base, IAction, ItemValue, JsonObjectProperty, MatrixDropdownColumn, Question, SurveyModel, ILocalizableString, PopupBaseViewModel, SurveyElement } from "survey-core"; @@ -202,7 +203,15 @@ export interface ICreatorPlugin { dispose?: () => void; onDesignerSurveyPropertyChanged?: (obj: Base, propName: string) => void; model: Base; - showOneCategoryInPropertyGrid?: boolean; +} + +export interface ITabOptions { + name: string; + plugin: ICreatorPlugin; + title?: string; + iconName?: string; + componentName?: string; + index?: number; } export interface ISurveyCreatorOptions { diff --git a/packages/survey-creator-core/src/tabbed-menu.ts b/packages/survey-creator-core/src/tabbed-menu.ts index a2ed4db6cd..b99d3bee24 100644 --- a/packages/survey-creator-core/src/tabbed-menu.ts +++ b/packages/survey-creator-core/src/tabbed-menu.ts @@ -8,17 +8,6 @@ export interface ITabbedMenuItem extends IAction { renderTab?: () => any; } -const tabsIcons = { - designer: "icon-config", - theme: "icon-theme", - json: "icon-codeeditor-24x24", - translation: "icon-language", - preview: "icon-preview", - logic: "icon-logic-24x24", - customembeded: "icon-embedsurvey-24x24", - default: "icon-undefined-24x24" -}; - export class TabbedMenuItem extends Action implements ITabbedMenuItem { constructor(item: ITabbedMenuItem) { super(item); @@ -59,6 +48,7 @@ export class TabbedMenuContainer extends AdaptiveActionContainer public addTab(name: string, plugin: ICreatorPlugin, title?: string, + iconName?: string, componentName?: string, index?: number) { const tabName = name === "test" ? "preview" : name; @@ -69,7 +59,7 @@ export class TabbedMenuContainer extends AdaptiveActionContainer title: title, componentContent: componentName ? componentName : "svc-tab-" + name, data: plugin, - iconName: tabsIcons[tabName] || tabsIcons["default"], + iconName: iconName || "icon-undefined-24x24", action: () => { this.creator.switchTab(name); }, active: this.creator.viewType === name, disableHide: this.creator.viewType === name