diff --git a/CHANGELOG.md b/CHANGELOG.md index 91aa43fbb1..48926996d4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines. +## [1.9.105](https://github.com/surveyjs/survey-library/compare/v1.9.104...v1.9.105) (2023-08-30) + ## [1.9.104](https://github.com/surveyjs/survey-library/compare/v1.9.103...v1.9.104) (2023-08-22) ## [1.9.103](https://github.com/surveyjs/survey-library/compare/v1.9.102...v1.9.103) (2023-08-15) diff --git a/package.json b/package.json index b1c1abea0e..fd89df41a7 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,7 @@ "testcafe:ci:angular": "testcafe -c 4 -q attemptLimit=5,successThreshold=1 chrome:headless testCafe/ --app \"http-server ./packages/survey-angular-ui/example/dist --proxy http://localhost:8080? -p 8080\" --selector-timeout 1500 --reporter minimal --env=angular", "prepare": "husky install" }, - "version": "1.9.104", + "version": "1.9.105", "name": "survey-library", "private": true, "devDependencies": { diff --git a/packages/survey-angular-ui/CHANGELOG.md b/packages/survey-angular-ui/CHANGELOG.md index 87fe46f2aa..da62c9ba23 100644 --- a/packages/survey-angular-ui/CHANGELOG.md +++ b/packages/survey-angular-ui/CHANGELOG.md @@ -2,6 +2,8 @@ All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines. +## [1.9.105](https://github.com/surveyjs/surveyjs/compare/v1.9.104...v1.9.105) (2023-08-30) + ## [1.9.104](https://github.com/surveyjs/surveyjs/compare/v1.9.103...v1.9.104) (2023-08-22) ## [1.9.103](https://github.com/surveyjs/surveyjs/compare/v1.9.102...v1.9.103) (2023-08-15) diff --git a/packages/survey-angular-ui/package.json b/packages/survey-angular-ui/package.json index 17c273d470..9edd7df37c 100644 --- a/packages/survey-angular-ui/package.json +++ b/packages/survey-angular-ui/package.json @@ -1,6 +1,6 @@ { "name": "survey-angular-ui", - "version": "1.9.104", + "version": "1.9.105", "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.", "keywords": [ "Survey", diff --git a/packages/survey-vue3-ui/CHANGELOG.md b/packages/survey-vue3-ui/CHANGELOG.md index 57b004ab2a..0c7c6ce529 100644 --- a/packages/survey-vue3-ui/CHANGELOG.md +++ b/packages/survey-vue3-ui/CHANGELOG.md @@ -2,6 +2,8 @@ All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines. +## [1.9.105](https://github.com/surveyjs/survey-library/compare/v1.9.104...v1.9.105) (2023-08-30) + ## [1.9.104](https://github.com/surveyjs/survey-library/compare/v1.9.103...v1.9.104) (2023-08-22) ## [1.9.103](https://github.com/surveyjs/survey-library/compare/v1.9.102...v1.9.103) (2023-08-15) diff --git a/packages/survey-vue3-ui/package.json b/packages/survey-vue3-ui/package.json index 4970437b52..355a297a3b 100644 --- a/packages/survey-vue3-ui/package.json +++ b/packages/survey-vue3-ui/package.json @@ -1,6 +1,6 @@ { "name": "survey-vue3-ui", - "version": "1.9.104", + "version": "1.9.105", "scripts": { "dev": "vite", "preview": "vite preview", diff --git a/src/actions/adaptive-container.ts b/src/actions/adaptive-container.ts index 56171503f1..25c88b0dc0 100644 --- a/src/actions/adaptive-container.ts +++ b/src/actions/adaptive-container.ts @@ -11,22 +11,30 @@ export class AdaptiveActionContainer extends ActionCo public isResponsivenessDisabled = false; private hideItemsGreaterN(visibleItemsCount: number) { - const actionsToHide = this.visibleActions.filter(action => !action.disableHide); + const actionsToHide = this.getActionsToHide(); visibleItemsCount = Math.max(visibleItemsCount, this.minVisibleItemsCount - (this.visibleActions.length - actionsToHide.length)); const hiddenItems: IAction[] = []; actionsToHide.forEach((item) => { if (visibleItemsCount <= 0) { - item.mode = "popup"; - hiddenItems.push(item.innerItem); + if(item.removePriority) { + item.mode = "removed"; + } else { + item.mode = "popup"; + hiddenItems.push(item.innerItem); + } } visibleItemsCount--; }); this.hiddenItemsListModel.setItems(hiddenItems); } + private getActionsToHide() { + return this.visibleActions.filter(action => !action.disableHide).sort((a, b) => a.removePriority || 0 - b.removePriority || 0); + } + private getVisibleItemsCount(availableSize: number): number { this.visibleActions.filter((action) => action.disableHide).forEach(action => availableSize -= action.minDimension); - const itemsSizes: number[] = this.visibleActions.filter(action => !action.disableHide).map((item) => item.minDimension); + const itemsSizes: number[] = this.getActionsToHide().map((item) => item.minDimension); let currSize: number = 0; for (var i = 0; i < itemsSizes.length; i++) { currSize += itemsSizes[i]; @@ -127,7 +135,7 @@ export class AdaptiveActionContainer extends ActionCo } else if (dimension < minSize) { this.setActionsMode("small"); this.hideItemsGreaterN(this.getVisibleItemsCount(dimension - dotsItemSize)); - this.dotsItem.visible = true; + this.dotsItem.visible = !!this.hiddenItemsListModel.actions.length; } else { this.updateItemMode(dimension, maxSize); } @@ -145,7 +153,10 @@ export class AdaptiveActionContainer extends ActionCo } } public setActionsMode(mode: actionModeType) { - this.actions.forEach((action) => (action.mode = mode)); + this.actions.forEach((action) => { + if(mode == "small" && action.disableShrink) return; + action.mode = mode; + }); } public dispose(): void { super.dispose(); diff --git a/src/actions/container.ts b/src/actions/container.ts index 4ee745a112..bb7b5c5a69 100644 --- a/src/actions/container.ts +++ b/src/actions/container.ts @@ -10,6 +10,7 @@ export let defaultActionBarCss = { defaultSizeMode: "sv-action-bar--default-size-mode", smallSizeMode: "sv-action-bar--small-size-mode", item: "sv-action-bar-item", + itemAsIcon: "sv-action-bar-item--icon", itemActive: "sv-action-bar-item--active", itemPressed: "sv-action-bar-item--pressed", itemIcon: "sv-action-bar-item__icon", diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts index 9475af7f7b..68bce2c0ef 100644 --- a/src/defaultCss/defaultV2Css.ts +++ b/src/defaultCss/defaultV2Css.ts @@ -15,6 +15,7 @@ export var defaultV2Css = { rootMobile: "sd-root-modern--mobile", rootReadOnly: "sd-root--readonly", rootCompact: "sd-root--compact", + rootFitToContainer: "sd-root-modern--full-container", rootBackgroundImage: "sd-root_background-image", container: "sd-container-modern", header: "sd-title sd-container-modern__title", diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss index 8bd76689d2..0eb898e9e9 100644 --- a/src/defaultV2-theme/blocks/sd-table.scss +++ b/src/defaultV2-theme/blocks/sd-table.scss @@ -88,7 +88,7 @@ text-align: center; &:not(.sd-table__cell--empty):not(.sd-table__cell--actions):not(:empty) { - min-width: calcSize(14); + min-width: calcSize(15); } } @@ -149,33 +149,29 @@ padding: calcSize(1.5) calcSize(1); &:not(.sd-table__cell--empty) { - min-width: calcSize(14); + min-width: calcSize(15); } } .sd-matrixdropdown .sd-table__cell--header.sd-table__cell--empty { - min-width: calcSize(14); - width: calcSize(14); + min-width: calcSize(15); } .sd-matrixdropdown .sd-table__cell--header.sd-table__cell--action { - min-width: calcSize(2); - width: calcSize(2); + min-width: calcSize(3); + width: calcSize(3); } .sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty) { - min-width: calcSize(14); - width: calcSize(14); + min-width: calcSize(15); &.sd-table__cell--dropdown, &.sd-table__cell--rating { min-width: calcSize(22); - width: calcSize(22); } &.sd-table__cell--boolean { min-width: calcSize(18); - width: calcSize(18); } } @@ -197,6 +193,8 @@ &:not(.sd-table__cell--drag):first-of-type { padding-left: 0; + width: calcSize(4); + min-width: calcSize(4); } } @@ -359,7 +357,7 @@ } .sd-matrixdropdown.sd-table { - table-layout: fixed; + //table-layout: fixed; } @mixin table_responsive { diff --git a/src/defaultV2-theme/defaultV2.fontless.scss b/src/defaultV2-theme/defaultV2.fontless.scss index 16b6af30b8..1748a4885d 100644 --- a/src/defaultV2-theme/defaultV2.fontless.scss +++ b/src/defaultV2-theme/defaultV2.fontless.scss @@ -95,6 +95,39 @@ body { } } +.sd-root-modern.sd-root-modern--full-container { + width: 100%; + height: 100%; + overflow: auto; + + * { + scrollbar-width: thin; + scrollbar-color: $border transparent; + } + + &::-webkit-scrollbar { + width: 12px; + height: 12px; + background-color: transparent; + } + + &::-webkit-scrollbar-thumb { + border: 4px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + border-radius: 32px; + background-color: $border; + } + + &::-webkit-scrollbar-track { + background: transparent; + } + + &::-webkit-scrollbar-thumb:hover { + border: 2px solid rgba(0, 0, 0, 0); + background-color: $foreground-light; + } +} + .sd-root-modern--mobile { --sd-timer-size: calc(9 * #{$base-unit}); } diff --git a/src/question_matrixdropdownbase.ts b/src/question_matrixdropdownbase.ts index c84938277d..d2e95b6964 100644 --- a/src/question_matrixdropdownbase.ts +++ b/src/question_matrixdropdownbase.ts @@ -7,10 +7,8 @@ import { IElement, IQuestion, ISurveyData, ISurvey, ISurveyImpl, ITextProcessor, import { SurveyElement } from "./survey-element"; import { TextPreProcessorValue, QuestionTextProcessor } from "./textPreProcessor"; import { ItemValue } from "./itemvalue"; -import { surveyLocalization } from "./surveyStrings"; import { QuestionFactory } from "./questionfactory"; import { ILocalizableOwner, LocalizableString } from "./localizablestring"; -import { getCurrecyCodes } from "./question_expression"; import { FunctionFactory } from "./functionsfactory"; import { PanelModel } from "./panel"; import { settings } from "./settings"; @@ -18,7 +16,7 @@ import { KeyDuplicationError } from "./error"; import { SurveyModel } from "./survey"; import { SurveyError } from "./survey-error"; import { CssClassBuilder } from "./utils/cssClassBuilder"; -import { MatrixDropdownColumn } from "./question_matrixdropdowncolumn"; +import { IMatrixColumnOwner, MatrixDropdownColumn } from "./question_matrixdropdowncolumn"; import { QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable } from "./question_matrixdropdownrendered"; export interface IMatrixDropdownData { @@ -681,7 +679,6 @@ implements ISurveyData, ISurveyImpl, ILocalizableOwner { var columns = this.data.columns; for (var i = 0; i < columns.length; i++) { var column = columns[i]; - if (!column.isVisible) continue; var cell = this.createCell(column); this.cells.push(cell); var cellValue = this.getCellValue(value, column.name); @@ -783,7 +780,7 @@ export class MatrixDropdownTotalRowModel extends MatrixDropdownRowModelBase { /** * A base class for the [QuestionMatrixDropdownModel](https://surveyjs.io/form-library/documentation/questionmatrixdropdownmodel) and [QuestionMatrixDynamicModel](https://surveyjs.io/form-library/documentation/questionmatrixdynamicmodel) classes. */ -export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel implements IMatrixDropdownData { +export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel implements IMatrixDropdownData, IMatrixColumnOwner { public static get defaultCellType() { return settings.matrix.defaultCellType; } @@ -1258,11 +1255,16 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel, properties: HashTable - ) { + ): void { if (!this.generatedVisibleRows) return; var newValues = this.getRowConditionValues(values); var rows = this.generatedVisibleRows; @@ -1375,7 +1377,8 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel(); @@ -1418,14 +1421,12 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel): void { const choices = q.visibleChoices; diff --git a/src/question_matrixdropdowncolumn.ts b/src/question_matrixdropdowncolumn.ts index 51837a1b37..5b6468fa27 100644 --- a/src/question_matrixdropdowncolumn.ts +++ b/src/question_matrixdropdowncolumn.ts @@ -27,6 +27,7 @@ export interface IMatrixColumnOwner extends ILocalizableOwner { oldValue: any ): void; onShowInMultipleColumnsChanged(column: MatrixDropdownColumn): void; + onColumnVisibilityChanged(column: MatrixDropdownColumn): void; getCellType(): string; getCustomCellType(column: MatrixDropdownColumn, row: MatrixDropdownRowModelBase, cellType: string): string; onColumnCellTypeChanged(column: MatrixDropdownColumn): void; @@ -122,7 +123,6 @@ export class MatrixDropdownColumn extends Base private templateQuestionValue: Question; private colOwnerValue: IMatrixColumnOwner = null; private indexValue = -1; - private _isVisible = true; private _hasVisibleCell = true; private _visiblechoices: Array; @@ -131,6 +131,7 @@ export class MatrixDropdownColumn extends Base this.createLocalizableString("totalFormat", this); this.createLocalizableString("cellHint", this); this.registerPropertyChangedHandlers(["showInMultipleColumns"], () => { this.doShowInMultipleColumnsChanged(); }); + this.registerPropertyChangedHandlers(["visible"], () => { this.doColumnVisibilityChanged(); }); this.updateTemplateQuestion(); this.name = name; if (title) { @@ -201,17 +202,23 @@ export class MatrixDropdownColumn extends Base this.colOwner.onColumnCellTypeChanged(this); } } - public get templateQuestion() { + public get templateQuestion(): Question { return this.templateQuestionValue; } public get value() { return this.templateQuestion.name; } - public get isVisible() { - return this._isVisible; + //For filtering columns + public get isVisible(): boolean { + return true; } - public setIsVisible(newVal: boolean): void { - this._isVisible = newVal; + public get isColumnVisible(): boolean { + if(this.isDesignMode) return true; + return this.visible && this.hasVisibleCell; + } + public get visible(): boolean { return this.getPropertyValue("visible"); } + public set visible(val: boolean) { + this.setPropertyValue("visible", val); } public get hasVisibleCell(): boolean { return this._hasVisibleCell; @@ -616,14 +623,19 @@ export class MatrixDropdownColumn extends Base } } - private doShowInMultipleColumnsChanged() { - if (this.colOwner != null && !this.isLoadingFromJson) { + private doShowInMultipleColumnsChanged(): void { + if (this.colOwner != null) { this.colOwner.onShowInMultipleColumnsChanged(this); } if (this.templateQuestion) { this.templateQuestion.autoOtherMode = this.isShowInMultipleColumns; } } + private doColumnVisibilityChanged(): void { + if (this.colOwner != null && !this.isDesignMode) { + this.colOwner.onColumnVisibilityChanged(this); + } + } private getProperties(curCellType: string): Array { return Serializer.getDynamicPropertiesByObj(this, curCellType); } @@ -710,6 +722,7 @@ Serializer.addClass( } }, "width", + { name: "visible:switch", default: true, overridingProperty: "visibleIf" }, "visibleIf:condition", "enableIf:condition", "requiredIf:condition", diff --git a/src/question_matrixdropdownrendered.ts b/src/question_matrixdropdownrendered.ts index 490e90eab3..9e90227500 100644 --- a/src/question_matrixdropdownrendered.ts +++ b/src/question_matrixdropdownrendered.ts @@ -408,7 +408,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base { if (this.matrix.isColumnLayoutHorizontal) { for (var i = 0; i < this.matrix.visibleColumns.length; i++) { var column = this.matrix.visibleColumns[i]; - if (!column.hasVisibleCell) continue; + if (!column.isColumnVisible) continue; if (this.matrix.IsMultiplyColumn(column)) { this.createMutlipleColumnsHeader(column); } else { @@ -450,7 +450,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base { var cells = this.matrix.visibleTotalRow.cells; for (var i = 0; i < cells.length; i++) { var cell = cells[i]; - if (!cell.column.hasVisibleCell) continue; + if (!cell.column.isColumnVisible) continue; if (this.matrix.IsMultiplyColumn(cell.column)) { this.createMutlipleColumnsFooter(this.footerRow, cell); } else { @@ -686,7 +686,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base { } for (var i = 0; i < row.cells.length; i++) { let cell = row.cells[i]; - if (!cell.column.hasVisibleCell) continue; + if (!cell.column.isColumnVisible) continue; if (this.matrix.IsMultiplyColumn(cell.column)) { this.createMutlipleEditCells(res, cell); } else { @@ -762,7 +762,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base { var renderedRows = []; for (var i = 0; i < columns.length; i++) { var col = columns[i]; - if (col.isVisible && col.hasVisibleCell) { + if (col.isColumnVisible) { if (this.matrix.IsMultiplyColumn(col)) { this.createMutlipleVerticalRows(renderedRows, col, i); } else { diff --git a/src/survey.ts b/src/survey.ts index 25a24071ed..116dbf1262 100644 --- a/src/survey.ts +++ b/src/survey.ts @@ -1130,6 +1130,8 @@ export class SurveyModel extends SurveyElementCore } @property() completedCss: string; @property() containerCss: string; + @property({ onSet: (newValue, target: SurveyModel) => { target.updateCss(); } }) fitToContainer: boolean; + private getNavigationCss(main: string, btn: string) { return new CssClassBuilder().append(main) .append(btn).toString(); @@ -4482,6 +4484,7 @@ export class SurveyModel extends SurveyElementCore .append(this.css.rootMobile, this.isMobile) .append(this.css.rootReadOnly, this.mode === "display") .append(this.css.rootCompact, this.isCompact) + .append(this.css.rootFitToContainer, this.fitToContainer) .toString(); } private resizeObserver: ResizeObserver; @@ -7454,6 +7457,7 @@ Serializer.addClass("survey", [ choices: ["auto", "static", "responsive"], }, { name: "width", visibleIf: (obj: any) => { return obj.widthMode === "static"; } }, + { name: "fitToContainer:boolean", default: false }, { name: "backgroundImage", visible: false }, { name: "backgroundImageFit", default: "cover", choices: ["auto", "contain", "cover"], visible: false }, { name: "backgroundImageAttachment", default: "scroll", choices: ["scroll", "fixed"], visible: false }, diff --git a/tests/jsonobjecttests.ts b/tests/jsonobjecttests.ts index bac1a2d9bd..0ce8ffd81e 100644 --- a/tests/jsonobjecttests.ts +++ b/tests/jsonobjecttests.ts @@ -2980,4 +2980,12 @@ QUnit.test("multipletextitem, name property should be required and unique", func const prop = Serializer.findProperty("multipletextitem", "name"); assert.equal(prop.isRequired, true, "name property is required"); assert.equal(prop.isUnique, true, "name property is unique"); +}); +QUnit.test("load matrix column, visible property", function (assert) { + const matrix = new QuestionMatrixDynamicModel("q1"); + const column = matrix.addColumn("col1"); + assert.equal(column.visible, true, "It is visible by default"); + column.fromJSON({ title: "column1", visible: false }); + assert.equal(column.title, "column1", "set column title correctly"); + assert.equal(column.visible, false, "column.visible is false"); }); \ No newline at end of file diff --git a/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html b/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html index 46b172af75..e426bad097 100644 --- a/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html +++ b/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html @@ -30,7 +30,7 @@
-
-
-
-
-