From d50cae5ed61b5c8edc7fcc98e033c225e0e5fb3f Mon Sep 17 00:00:00 2001 From: Dmitry Kuzin Date: Thu, 30 Jan 2025 19:50:10 +0400 Subject: [PATCH 1/7] Move tabbed menu inside container of paneldynamic --- .../default-theme/blocks/sd-paneldynamic.scss | 27 +++++-- .../survey-core/src/defaultCss/defaultCss.ts | 1 + .../survey-core/src/question_paneldynamic.ts | 80 ++++++++++--------- .../src/reactquestion_paneldynamic.tsx | 1 + 4 files changed, 67 insertions(+), 42 deletions(-) diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss index 1f6d2326e7..05373aee05 100644 --- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss +++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss @@ -174,11 +174,25 @@ margin-bottom: calcSize(-1); } } - +.sd-paneldynamic__tabs-container { + padding-top: calcSize(3); + .sd-tabs-toolbar { + margin: 0 0 -1px calcSize(-2); + width: calc(100% + 4 * #{$base-unit}); + } + &:after { + content: " "; + display: block; + height: 1px; + position: relative; + background: $border-light; + bottom: 0; + inset-inline-start: calc(-1 * var(--sd-base-padding)); + width: calc(100% + 2 * var(--sd-base-padding)); + } +} .sd-tabs-toolbar.sv-action-bar { align-items: flex-start; - margin: calcSize(1) 0 -1px calcSize(-2); - width: calc(100% + 4 * #{$base-unit}); z-index: 1; } @@ -277,13 +291,16 @@ .sd-question__title ~ .sd-tabs-toolbar { margin-top: calcSize(3); } - .sd-paneldynamic__header.sd-element__header.sd-paneldynamic__header-tab { padding-bottom: 0; } +.sd-element--collapsed .sd-paneldynamic__header.sd-element__header.sd-paneldynamic__header-tab { + padding-bottom: calcSize(2); +} + .sd-paneldynamic__header.sd-element__header.sd-paneldynamic__header-tab::after { - bottom: 0; + content: none; } .sd-question--paneldynamic.sd-element--with-frame { diff --git a/packages/survey-core/src/defaultCss/defaultCss.ts b/packages/survey-core/src/defaultCss/defaultCss.ts index ddf4194378..1b52997496 100644 --- a/packages/survey-core/src/defaultCss/defaultCss.ts +++ b/packages/survey-core/src/defaultCss/defaultCss.ts @@ -127,6 +127,7 @@ export var defaultCss = { progressBtnIcon: "icon-progressbuttonv2", noEntriesPlaceholder: "sd-paneldynamic__placeholder sd-question__placeholder", compact: "sd-element--with-frame sd-element--compact", + tabsContainer: "sd-paneldynamic__tabs-container", tabsRoot: "sd-tabs-toolbar", tabsLeft: "sd-tabs-toolbar--left", tabsRight: "sd-tabs-toolbar--right", diff --git a/packages/survey-core/src/question_paneldynamic.ts b/packages/survey-core/src/question_paneldynamic.ts index 00ef09dea3..7e1b1549a1 100644 --- a/packages/survey-core/src/question_paneldynamic.ts +++ b/packages/survey-core/src/question_paneldynamic.ts @@ -123,6 +123,16 @@ class QuestionPanelDynamicItemTextProcessor extends QuestionTextProcessor { } } +interface IPanelDynamicTabbedMenuItem extends IAction { + panelId: string; +} +class PanelDynamicTabbedMenuItem extends Action { + public panelId: string; + constructor(innerItem: IPanelDynamicTabbedMenuItem) { + super(innerItem); + } +} + export class QuestionPanelDynamicItem implements ISurveyData, ISurveyImpl { public static ItemVariableName = "panel"; public static ParentItemVariableName = "parentpanel"; @@ -1292,7 +1302,7 @@ export class QuestionPanelDynamicModel extends Question public set tabAlign(val: "center" | "left" | "right") { this.setPropertyValue("tabAlign", val); if (this.isRenderModeTab) { - this.additionalTitleToolbar.containerCss = this.getAdditionalTitleToolbarCss(); + this.tabbedMenu.containerCss = this.getTabbedMenuCss(); } } public get isRenderModeList(): boolean { @@ -1301,12 +1311,6 @@ export class QuestionPanelDynamicModel extends Question public get isRenderModeTab(): boolean { return this.displayMode === "tab"; } - get hasTitleOnLeftTop(): boolean { - if (this.isRenderModeTab && this.visiblePanelCount > 0) return true; - if (!this.hasTitle) return false; - const location = this.getTitleLocation(); - return location === "left" || location === "top"; - } public setVisibleIndex(value: number): number { if (!this.isVisible) return 0; const onSurveyNumbering = this.showQuestionNumbers === "onSurvey"; @@ -1677,8 +1681,8 @@ export class QuestionPanelDynamicModel extends Question for (var i = 0; i < panels.length; i++) { panels[i].locStrsChanged(); } - if (this.additionalTitleToolbar) { - this.additionalTitleToolbar.locStrsChanged(); + if (this.tabbedMenu) { + this.tabbedMenu.locStrsChanged(); } } public clearIncorrectValues() { @@ -2398,8 +2402,8 @@ export class QuestionPanelDynamicModel extends Question const showTab = this.isRenderModeTab && !!this.visiblePanelCount; return new CssClassBuilder() .append(this.cssClasses.header) - .append(this.cssClasses.headerTop, this.hasTitleOnTop || showTab) - .append(this.cssClasses.headerTab, showTab) + .append(this.cssClasses.headerTop, this.hasTitleOnTop) + .append(this.cssClasses.headerTab, this.hasTitleOnTop && showTab) .toString(); } public getPanelWrapperCss(panel: PanelModel): string { @@ -2455,20 +2459,20 @@ export class QuestionPanelDynamicModel extends Question if (!!panel && panel.needResponsiveWidth()) return true; return false; } - private additionalTitleToolbarValue: AdaptiveActionContainer; - public get hasAdditionalTitleToolbar(): boolean { + private tabbedMenuValue: AdaptiveActionContainer; + public get hasTabbedMenu(): boolean { return this.isRenderModeTab && this.visiblePanels.length > 0; } - protected getAdditionalTitleToolbar(): AdaptiveActionContainer | null { + public get tabbedMenu(): AdaptiveActionContainer | null { if (!this.isRenderModeTab) return null; - if (!this.additionalTitleToolbarValue) { - this.additionalTitleToolbarValue = new AdaptiveActionContainer(); - this.additionalTitleToolbarValue.dotsItem.popupModel.showPointer = false; - this.additionalTitleToolbarValue.dotsItem.popupModel.verticalPosition = "bottom"; - this.additionalTitleToolbarValue.dotsItem.popupModel.horizontalPosition = "center"; + if (!this.tabbedMenuValue) { + this.tabbedMenuValue = new AdaptiveActionContainer(); + this.tabbedMenuValue.dotsItem.popupModel.showPointer = false; + this.tabbedMenuValue.dotsItem.popupModel.verticalPosition = "bottom"; + this.tabbedMenuValue.dotsItem.popupModel.horizontalPosition = "center"; this.updateElementCss(false); } - return this.additionalTitleToolbarValue; + return this.tabbedMenuValue; } private footerToolbarValue: ActionContainer; @@ -2563,19 +2567,21 @@ export class QuestionPanelDynamicModel extends Question return options.title; }; locTitle.sharedData = this.locTemplateTabTitle; - const isActive = this.getPanelVisibleIndexById(panel.id) === this.currentIndex; - const newItem = new Action({ - id: panel.id, + const panelId = panel.id; + const isActive = this.getPanelVisibleIndexById(panelId) === this.currentIndex; + const newItem = new PanelDynamicTabbedMenuItem({ + id: `${this.id}_tab_${panelId}`, + panelId: panelId, pressed: isActive, locTitle: locTitle, disableHide: isActive, action: () => { - this.currentIndex = this.getPanelVisibleIndexById(newItem.id); + this.currentIndex = this.getPanelVisibleIndexById(panelId); } }); return newItem; } - private getAdditionalTitleToolbarCss(cssClasses?: any): string { + private getTabbedMenuCss(cssClasses?: any): string { const css = cssClasses ?? this.cssClasses; return new CssClassBuilder() .append(css.tabsRoot) @@ -2588,8 +2594,8 @@ export class QuestionPanelDynamicModel extends Question if (!this.isRenderModeTab) return; if (this.currentIndex < 0 || this.currentIndex >= this.visiblePanelCount) return; const panel = this.visiblePanelsCore[this.currentIndex]; - this.additionalTitleToolbar.renderedActions.forEach(action => { - const isActive = action.id === panel.id; + this.tabbedMenu.renderedActions.forEach(action => { + const isActive = action.panelId === panel.id; action.pressed = isActive; action.disableHide = isActive; //should raise update if dimensions are not changed but action is active now @@ -2606,20 +2612,20 @@ export class QuestionPanelDynamicModel extends Question for (let i = 0; i < visPanels.length; i++) { this.visiblePanelsCore.forEach(panel => items.push(this.createTabByPanel(visPanels[i], i))); } - this.additionalTitleToolbar.setItems(items); + this.tabbedMenu.setItems(items); } private addTabFromToolbar(panel: PanelModel, index: number) { if (!this.isRenderModeTab) return; const newItem = this.createTabByPanel(panel, index); - this.additionalTitleToolbar.actions.splice(index, 0, newItem); + this.tabbedMenu.actions.splice(index, 0, newItem); this.updateTabToolbarItemsPressedState(); } private removeTabFromToolbar(panel: PanelModel) { if (!this.isRenderModeTab) return; - const removedItem = this.additionalTitleToolbar.getActionById(panel.id); + const removedItem = this.tabbedMenu.getActionById(panel.id); if (!removedItem) return; - this.additionalTitleToolbar.actions.splice(this.additionalTitleToolbar.actions.indexOf(removedItem), 1); + this.tabbedMenu.actions.splice(this.tabbedMenu.actions.indexOf(removedItem), 1); this.updateTabToolbarItemsPressedState(); } get showLegacyNavigation(): boolean { @@ -2636,12 +2642,12 @@ export class QuestionPanelDynamicModel extends Question protected calcCssClasses(css: any): any { const classes = super.calcCssClasses(css); - const additionalTitleToolbar = this.additionalTitleToolbar; - if (!!additionalTitleToolbar) { - additionalTitleToolbar.containerCss = this.getAdditionalTitleToolbarCss(classes); - additionalTitleToolbar.cssClasses = classes.tabs; - additionalTitleToolbar.dotsItem.cssClasses = classes.tabs; - additionalTitleToolbar.dotsItem.popupModel.contentComponentData.model.cssClasses = css.list; + const tabbedMenu = this.tabbedMenu; + if (!!tabbedMenu) { + tabbedMenu.containerCss = this.getTabbedMenuCss(classes); + tabbedMenu.cssClasses = classes.tabs; + tabbedMenu.dotsItem.cssClasses = classes.tabs; + tabbedMenu.dotsItem.popupModel.contentComponentData.model.cssClasses = css.list; } return classes; } diff --git a/packages/survey-react-ui/src/reactquestion_paneldynamic.tsx b/packages/survey-react-ui/src/reactquestion_paneldynamic.tsx index 626ab3e1f0..c9d1066c2a 100644 --- a/packages/survey-react-ui/src/reactquestion_paneldynamic.tsx +++ b/packages/survey-react-ui/src/reactquestion_paneldynamic.tsx @@ -68,6 +68,7 @@ export class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase { const noEntriesPlaceholder = this.renderPlaceholder(); return (
+ {this.question.hasTabbedMenu ?
: null } {noEntriesPlaceholder} {navTop}
From 37897c46f78fe0d6271e911644ca8f776cd026c3 Mon Sep 17 00:00:00 2001 From: Dmitry Kuzin Date: Tue, 4 Feb 2025 18:15:25 +0400 Subject: [PATCH 2/7] Fix unit tests --- .../survey-core/src/question_paneldynamic.ts | 5 +- .../tests/question_paneldynamic_tests.ts | 57 +++++++++++-------- 2 files changed, 36 insertions(+), 26 deletions(-) diff --git a/packages/survey-core/src/question_paneldynamic.ts b/packages/survey-core/src/question_paneldynamic.ts index 7e1b1549a1..3dc5b2d4ce 100644 --- a/packages/survey-core/src/question_paneldynamic.ts +++ b/packages/survey-core/src/question_paneldynamic.ts @@ -2401,8 +2401,7 @@ export class QuestionPanelDynamicModel extends Question public get cssHeader(): string { const showTab = this.isRenderModeTab && !!this.visiblePanelCount; return new CssClassBuilder() - .append(this.cssClasses.header) - .append(this.cssClasses.headerTop, this.hasTitleOnTop) + .append(super.getCssHeader(this.cssClasses)) .append(this.cssClasses.headerTab, this.hasTitleOnTop && showTab) .toString(); } @@ -2623,7 +2622,7 @@ export class QuestionPanelDynamicModel extends Question } private removeTabFromToolbar(panel: PanelModel) { if (!this.isRenderModeTab) return; - const removedItem = this.tabbedMenu.getActionById(panel.id); + const removedItem = this.tabbedMenu.actions.find(a => a.panelId == panel.id); if (!removedItem) return; this.tabbedMenu.actions.splice(this.tabbedMenu.actions.indexOf(removedItem), 1); this.updateTabToolbarItemsPressedState(); diff --git a/packages/survey-core/tests/question_paneldynamic_tests.ts b/packages/survey-core/tests/question_paneldynamic_tests.ts index d006f17643..b2074f4185 100644 --- a/packages/survey-core/tests/question_paneldynamic_tests.ts +++ b/packages/survey-core/tests/question_paneldynamic_tests.ts @@ -20,6 +20,7 @@ import { AnimationGroup, AnimationTab } from "../src/utils/animation"; import { SurveyElement } from "../src/survey-element"; import { setOldTheme } from "./oldTheme"; import { DynamicPanelValueChangingEvent } from "../src/survey-events-api"; +import { AdaptiveActionContainer } from "../src/actions/adaptive-container"; export default QUnit.module("Survey_QuestionPanelDynamic"); QUnit.test("Create panels based on template on setting value", function( @@ -5782,8 +5783,8 @@ QUnit.test("renderMode: tab, issue#5829", function (assert) { ], }); const panel = survey.getQuestionByName("relatives"); - const panelTabToolbar = panel.additionalTitleToolbar; - assert.ok(!!panel["additionalTitleToolbarValue"], "additionalTitleToolbarValue exist"); + const panelTabToolbar = panel.tabbedMenu as AdaptiveActionContainer; + assert.ok(!!panel["tabbedMenuValue"], "tabbedMenuValue exist"); assert.ok(panel.isRenderModeTab, "isRenderModeTab"); assert.equal(panel.currentIndex, 0, "currentIndex is 0"); assert.equal(panelTabToolbar.actions.length, 2, "2 panels"); @@ -5828,7 +5829,7 @@ QUnit.test("renderMode: tab, check panelTabToolbar containerCss issue#5829", fun const panel = survey.getQuestionByName("relatives"); survey.css = defaultCss; panel.cssClasses; - const panelTabToolbar = panel.additionalTitleToolbar; + const panelTabToolbar = panel.tabbedMenu as AdaptiveActionContainer; assert.equal(panelTabToolbar.containerCss, "sd-tabs-toolbar sd-tabs-toolbar--left", "tabAlign value is left"); panel.tabAlign = "right"; @@ -5860,7 +5861,7 @@ QUnit.test("renderMode: tab check disableHide property", function (assert) { ], }); const panel = survey.getQuestionByName("relatives"); - const panelTabToolbar = panel.additionalTitleToolbar; + const panelTabToolbar = panel.tabbedMenu as AdaptiveActionContainer; assert.equal(panelTabToolbar.actions[0].disableHide, true); assert.equal(panelTabToolbar.actions[1].disableHide, false); @@ -5891,7 +5892,7 @@ QUnit.test("renderMode: tab check disableHide property", function (assert) { assert.equal(log, "->raised->raised"); }); -QUnit.test("renderMode: tab check hasAdditionalTitleToolbar property", function (assert) { +QUnit.test("renderMode: tab check hasTabbedMenu property", function (assert) { const survey = new SurveyModel({ elements: [ { @@ -5908,11 +5909,11 @@ QUnit.test("renderMode: tab check hasAdditionalTitleToolbar property", function ], }); const panel = survey.getQuestionByName("relatives"); - assert.notOk(panel.hasAdditionalTitleToolbar); + assert.notOk(panel.hasTabbedMenu); panel.addPanel(1); - assert.ok(panel.hasAdditionalTitleToolbar); + assert.ok(panel.hasTabbedMenu); panel.addPanel(2); - assert.ok(panel.hasAdditionalTitleToolbar); + assert.ok(panel.hasTabbedMenu); }); QUnit.test("question.cssHeader class", function (assert) { @@ -5941,6 +5942,7 @@ QUnit.test("question.cssHeader class", function (assert) { assert.equal(panel.cssHeader, "sv-paneldynamic__header sv_header"); panel.renderMode = "tab"; + panel.titleLocation = "top"; assert.equal(panel.cssHeader, "sv-paneldynamic__header sv_header sv-paneldynamic__header-tab"); panel.removePanelUI(0); @@ -5997,10 +5999,18 @@ QUnit.test("question.hasTitleOnLeftTop class", function (assert) { assert.equal(panel.panels.length, 1, "There is one panel"); assert.equal(panel.panels[0].visible, true, "There is one visiblePanel"); assert.equal(panel.visiblePanelCount, 1, "There is one visible panel count"); - assert.equal(panel.hasTitleOnLeftTop, true, "panelCount is 1"); + assert.equal(panel.hasTitleOnLeftTop, false, "title location should be independent on tabs visibility - tabs are visible and title location is hidden"); + panel.titleLocation = "top"; + assert.equal(panel.hasTitleOnLeftTop, true, "title location should be independent on tabs visibility - tabs are visible and title location is top"); + + panel.titleLocation = "hidden"; panel.renderMode = undefined; - assert.equal(panel.hasTitleOnLeftTop, false, "renderMode is default"); + assert.equal(panel.hasTitleOnLeftTop, false, "title location should be independent on tabs visibility - tabs are invisible and title location is hidden"); + + panel.titleLocation = "top"; + assert.equal(panel.hasTitleOnLeftTop, true, "title location should be independent on tabs visibility - tabs are invisible and title location top"); + }); QUnit.test("Pass isMobile to the nested questions", function (assert) { const survey = new SurveyModel({ @@ -6123,7 +6133,7 @@ QUnit.test("Pass isMobile to the nested questions", function (assert) { const innerMatrix = dynPanel.panels[0].elements[0] as QuestionMatrixModel; assert.equal(innerMatrix.isMobile, true, "innerMatrix is mobile"); }); -QUnit.test("renderMode: tab, additionalTitleToolbar&titles", function (assert) { +QUnit.test("renderMode: tab, tabbedMenu&titles", function (assert) { const survey = new SurveyModel({ elements: [ { type: "paneldynamic", @@ -6137,7 +6147,7 @@ QUnit.test("renderMode: tab, additionalTitleToolbar&titles", function (assert) { }], }); const panel = survey.getQuestionByName("panel"); - const panelTabToolbar = panel.additionalTitleToolbar; + const panelTabToolbar = panel.tabbedMenu as AdaptiveActionContainer; assert.ok(panelTabToolbar.actions[0].locTitle.owner, "Owner is set"); assert.equal(panelTabToolbar.actions[0].locTitle.textOrHtml, "Panel 1"); assert.equal(panelTabToolbar.actions[1].locTitle.textOrHtml, "Panel 2"); @@ -6148,7 +6158,7 @@ QUnit.test("renderMode: tab, additionalTitleToolbar&titles", function (assert) { assert.equal(panelTabToolbar.actions[0].locTitle.textOrHtml, "#1 q1-value"); assert.equal(panelTabToolbar.actions[1].locTitle.textOrHtml, "#2 "); }); -QUnit.test("renderMode: tab, additionalTitleToolbar&templateTabTitle in JSON", function (assert) { +QUnit.test("renderMode: tab, tabbedMenu&templateTabTitle in JSON", function (assert) { const survey = new SurveyModel({ elements: [ { type: "paneldynamic", @@ -6163,7 +6173,7 @@ QUnit.test("renderMode: tab, additionalTitleToolbar&templateTabTitle in JSON", f }], }); const panel = survey.getQuestionByName("panel"); - const panelTabToolbar = panel.additionalTitleToolbar; + const panelTabToolbar = panel.tabbedMenu as AdaptiveActionContainer; assert.equal(panelTabToolbar.actions[0].locTitle.textOrHtml, "#1 "); assert.equal(panelTabToolbar.actions[1].locTitle.textOrHtml, "#2 "); let counter = 0; @@ -6188,7 +6198,7 @@ QUnit.test("renderMode: tab, additionalTitleToolbar&templateTabTitle in JSON", f assert.equal(panelTabToolbar.actions[0].locTitle.textOrHtml, "#1 q1-value"); assert.equal(panelTabToolbar.actions[1].locTitle.textOrHtml, "#2 q3-value!"); }); -QUnit.test("renderMode: tab, additionalTitleToolbar&titles&survey.onGetPanelDynamicTabTitle", function (assert) { +QUnit.test("renderMode: tab, tabbedMenu&titles&survey.onGetPanelDynamicTabTitle", function (assert) { const survey = new SurveyModel({ elements: [ { type: "paneldynamic", @@ -6208,7 +6218,7 @@ QUnit.test("renderMode: tab, additionalTitleToolbar&titles&survey.onGetPanelDyna } }); const panel = survey.getQuestionByName("panel"); - const panelTabToolbar = panel.additionalTitleToolbar; + const panelTabToolbar = panel.tabbedMenu as AdaptiveActionContainer; assert.ok(panelTabToolbar.actions[0].locTitle.owner, "Owner is set"); assert.equal(panelTabToolbar.actions[0].locTitle.textOrHtml, "First tab"); assert.equal(panelTabToolbar.actions[1].locTitle.textOrHtml, "Panel 2"); @@ -6320,7 +6330,7 @@ QUnit.test("survey.onDynamicPanelCurrentIndexChanged", function (assert) { assert.equal(panelIndex, 2, "panelIndex #4"); assert.equal(panelIndexOf, 2, "panelIndexOf #4"); }); -QUnit.test("templateVisibleIf & renderMode: tab, additionalTitleToolbar&templateTabTitle in JSON", function (assert) { +QUnit.test("templateVisibleIf & renderMode: tab, tabbedMenu&templateTabTitle in JSON", function (assert) { const survey = new SurveyModel({ elements: [ { type: "paneldynamic", @@ -6336,7 +6346,7 @@ QUnit.test("templateVisibleIf & renderMode: tab, additionalTitleToolbar&template }], }); const panel = survey.getQuestionByName("panel"); - const panelTabToolbar = panel.additionalTitleToolbar; + const panelTabToolbar = panel.tabbedMenu as AdaptiveActionContainer; assert.equal(panelTabToolbar.actions.length, 0, "All tabs are invisible"); panel.value = [{ q1: "b" }, { q1: "c" }, { q1: "a" }]; assert.equal(panelTabToolbar.actions.length, 1, "One tab is visible"); @@ -6369,7 +6379,7 @@ QUnit.test("templateVisibleIf & renderMode: tab, templateTabTitle&tabTitlePlaceh }], }); const panel = survey.getQuestionByName("panel"); - const panelTabToolbar = panel.additionalTitleToolbar; + const panelTabToolbar = panel.tabbedMenu as AdaptiveActionContainer; assert.equal(panelTabToolbar.actions.length, 2, "There are two panels"); assert.equal(panelTabToolbar.actions[0].locTitle.textOrHtml, "Empty value", "#1"); assert.equal(panelTabToolbar.actions[1].locTitle.textOrHtml, "Empty value", "#2"); @@ -6386,7 +6396,7 @@ QUnit.test("templateVisibleIf & renderMode: tab, templateTabTitle&tabTitlePlaceh assert.equal(panelTabToolbar.actions[0].locTitle.textOrHtml, "item1", "#9"); assert.equal(panelTabToolbar.actions[1].locTitle.textOrHtml, "New Panel", "#10"); }); -QUnit.test("templateVisibleIf & additionalTitleToolbar", function (assert) { +QUnit.test("templateVisibleIf & tabbedMenu", function (assert) { const survey = new SurveyModel({ elements: [ { type: "paneldynamic", @@ -6451,12 +6461,13 @@ QUnit.test("templateVisibleIf & tabs action click, bug#8430", function (assert) }], }); const panel = survey.getQuestionByName("panel"); - assert.equal(panel.additionalTitleToolbar.visibleActions.length, 4, "There are 4 visible tabs"); + const tabbedMenu = panel.tabbedMenu as AdaptiveActionContainer; + assert.equal(tabbedMenu.visibleActions.length, 4, "There are 4 visible tabs"); panel.panels[1].getQuestionByName("q1").value = "a"; assert.equal(panel.currentIndex, 0, "Current Index 0"); const panelId = panel.panels[2].id; - assert.equal(panel.additionalTitleToolbar.visibleActions.length, 3, "There are 3 visible tabs"); - panel.additionalTitleToolbar.visibleActions[1].action(); + assert.equal(tabbedMenu.visibleActions.length, 3, "There are 3 visible tabs"); + tabbedMenu.visibleActions[1].action(); assert.equal(panel.currentIndex, 1, "Current Index 1"); assert.equal(panel.currentPanel.id, panelId, "Select the correct panel"); }); From 99dd3be6af7700254be012668dd499947fac6ee7 Mon Sep 17 00:00:00 2001 From: Dmitry Kuzin Date: Tue, 4 Feb 2025 18:21:43 +0400 Subject: [PATCH 3/7] Update etalons for markup tests --- ...paneldynamic-progress-tab-center.snap.html | 150 ++++++++++++------ .../paneldynamic-progress-tab-left.snap.html | 150 ++++++++++++------ .../paneldynamic-progress-tab-right.snap.html | 150 ++++++++++++------ 3 files changed, 312 insertions(+), 138 deletions(-) diff --git a/tests/markup/snapshots/paneldynamic-progress-tab-center.snap.html b/tests/markup/snapshots/paneldynamic-progress-tab-center.snap.html index a32f568005..05fc5d1e6e 100644 --- a/tests/markup/snapshots/paneldynamic-progress-tab-center.snap.html +++ b/tests/markup/snapshots/paneldynamic-progress-tab-center.snap.html @@ -1,46 +1,104 @@ -
-
-
- -
-
-
-
- -
-
-
-
- -
- -
-
-
-
\ No newline at end of file +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
1 of 2
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
\ No newline at end of file diff --git a/tests/markup/snapshots/paneldynamic-progress-tab-left.snap.html b/tests/markup/snapshots/paneldynamic-progress-tab-left.snap.html index da4fb46ac3..1d6a97f7bd 100644 --- a/tests/markup/snapshots/paneldynamic-progress-tab-left.snap.html +++ b/tests/markup/snapshots/paneldynamic-progress-tab-left.snap.html @@ -1,46 +1,104 @@ -
-
-
- -
-
-
-
- -
-
-
-
- -
- -
-
-
-
\ No newline at end of file +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
1 of 2
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
\ No newline at end of file diff --git a/tests/markup/snapshots/paneldynamic-progress-tab-right.snap.html b/tests/markup/snapshots/paneldynamic-progress-tab-right.snap.html index 0113e7dc4d..3a3f1efcaf 100644 --- a/tests/markup/snapshots/paneldynamic-progress-tab-right.snap.html +++ b/tests/markup/snapshots/paneldynamic-progress-tab-right.snap.html @@ -1,46 +1,104 @@ -
-
-
- -
-
-
-
- -
-
-
-
- -
- -
-
-
-
\ No newline at end of file +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
1 of 2
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
\ No newline at end of file From 91af12588f6425253dcc44abf38d96d77166dccb Mon Sep 17 00:00:00 2001 From: Dmitry Kuzin Date: Tue, 4 Feb 2025 18:26:28 +0400 Subject: [PATCH 4/7] Update templates in Vue --- packages/survey-vue3-ui/src/PanelDynamic.vue | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/survey-vue3-ui/src/PanelDynamic.vue b/packages/survey-vue3-ui/src/PanelDynamic.vue index 7115580e37..234ca91ac3 100644 --- a/packages/survey-vue3-ui/src/PanelDynamic.vue +++ b/packages/survey-vue3-ui/src/PanelDynamic.vue @@ -1,5 +1,14 @@