Merge branch 'master' into feature/CV2-4435

surveyjs · Sep 7, 2023 · b88a132 · b88a132
2 parents 59a305a + df38058
commit b88a132
Show file tree

Hide file tree

Showing 55 changed files with 489 additions and 302 deletions.
diff --git 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.106](https://github.com/surveyjs/survey-library/compare/v1.9.105...v1.9.106) (2023-09-06)
+
 ## [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)

diff --git a/docs/customize-question-types-create-custom-widgets.md b/docs/customize-question-types-create-custom-widgets.md
@@ -1,12 +1,4 @@
-# Create Custom Widget: Add into SurveyJS your own question
-
-- [When do you need a custom widget?](#needs)
-- [Create simple custom widget](#simplewidget)
-  - [Add functionality into existing question](#addfunctionality)
-  - [Add a new property into existing question](#addnewproperty)
-  - [Add new question using custom widget](#newquestion)
-  - [Totally replace the existing question input by custom widget](#replacequestion)
-- [Custom widget API](#api)
+# Create Custom Widgets in jQuery and Knockout
 
 <div id="needs"></div>
 

diff --git a/docs/design-survey-configure-question-titles.md b/docs/design-survey-configure-question-titles.md
@@ -60,8 +60,7 @@ You can arrange the question title, number, and required mark in different seque
 const surveyJson = {
   // ...
   "questionTitlePattern": "numTitleRequire", // 1. Question Title *
-  "questionTitlePattern": "numRequireTitle", // 1. * Question Title
-  "questionTitlePattern": "requireNumTitle", // * 1. Question Title
+  "questionTitlePattern": "numRequireTitle", // 1. * Question Title  
   "questionTitlePattern": "numTitle",        // 1. Question Title
 }
 ```

diff --git a/docs/sidebar.json b/docs/sidebar.json
@@ -112,7 +112,7 @@
         },
         {
           "Name": "customize-question-types-create-custom-widgets",
-          "Title": "Create Custom Widgets"
+          "Title": "Create Custom Widgets in jQuery and Knockout"
         },
         {
           "Name": "customize-question-types-third-party-component-integration-angular",

diff --git a/examples/knockout/index.html b/examples/knockout/index.html
@@ -8,12 +8,12 @@
 
     <!-- <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"> -->
     <!-- <script src="../../build/survey-core/plugins/bootstrap-integration.js"></script> -->
-    <link rel="stylesheet" href="../../build/survey-knockout/survey.css" />
-    <!-- <link rel="stylesheet" href="../../build/survey-knockout/modern.css" /> -->
-    <link rel="stylesheet" href="../../build/survey-knockout/defaultV2.css" />
+    <!-- <link rel="stylesheet" href="../../build/survey-core/survey.css" /> -->
+    <!-- <link rel="stylesheet" href="../../build/survey-core/modern.css" /> -->
+    <link rel="stylesheet" href="../../build/survey-core/defaultV2.css" />
     <script src="../../build/survey-core/survey.core.js"></script>
-    <script src="../../build/survey-knockout/survey.ko.js"></script>
-    <!-- <script src="../../build/survey-knockout-ui/survey-knockout-ui.js"></script> -->
+    <!-- <script src="../../build/survey-knockout/survey.ko.js"></script> -->
+    <script src="../../build/survey-knockout-ui/survey-knockout-ui.js"></script>
 </head>
 
   <body>

diff --git a/examples/react/index.html b/examples/react/index.html
@@ -14,10 +14,12 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
 
     <!-- <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"> -->
-    <!-- <link rel="stylesheet" href="../../build/survey-react/survey.css" /> -->
-    <!-- <link rel="stylesheet" href="../../build/survey-react/modern.css" /> -->
-    <link rel="stylesheet" href="../../build/survey-react/defaultV2.css" />
-    <script src="../../build/survey-react/survey.react.js"></script>
+    <!-- <link rel="stylesheet" href="../../build/survey-core/survey.css" /> -->
+    <!-- <link rel="stylesheet" href="../../build/survey-core/modern.css" /> -->
+    <link rel="stylesheet" href="../../build/survey-core/defaultV2.css" />
+    <script src="../../build/survey-core/survey.core.js"></script>
+    <!-- <script src="../../build/survey-react/survey.react.js"></script> -->
+    <script src="../../build/survey-react-ui/survey-react-ui.js"></script>
   </head>
 
   <body>

diff --git a/examples/react/index.js b/examples/react/index.js
@@ -1031,7 +1031,7 @@ function init() {
 
   //Survey.StylesManager.applyTheme("default");
   //Survey.StylesManager.applyTheme("modern");
-  Survey.StylesManager.applyTheme("defaultV2");
+  // Survey.StylesManager.applyTheme("defaultV2");
 
   var model = new Survey.Model(json);
   //model.setDesignMode(true);
@@ -1048,7 +1048,7 @@ function init() {
     });
 
   ReactDOM.render(
-    <Survey.Survey model={model} />,
+    <SurveyReact.Survey model={model} />,
     document.getElementById("surveyElement")
   );
 }

diff --git 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.105",
+  "version": "1.9.106",
   "name": "survey-library",
   "private": true,
   "devDependencies": {

diff --git 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.106](https://github.com/surveyjs/surveyjs/compare/v1.9.105...v1.9.106) (2023-09-06)
+
 ## [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)

diff --git 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.105",
+  "version": "1.9.106",
   "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-angular-ui/src/base-angular.ts b/packages/survey-angular-ui/src/base-angular.ts
@@ -90,7 +90,7 @@ export abstract class BaseAngular<T extends Base = Base> extends EmbeddedViewCon
     this.beforeUpdate();
     if (key && this.getPropertiesToUpdateSync().indexOf(key) > -1) {
       this.detectChanges();
-      this.afterUpdate();
+      this.afterUpdate(true);
     } else {
       queueMicrotask(() => {
         if (!this.isDestroyed) {
@@ -121,7 +121,7 @@ export abstract class BaseAngular<T extends Base = Base> extends EmbeddedViewCon
     }
     this.setIsRendering(true);
   }
-  protected afterUpdate(): void {
+  protected afterUpdate(isSync: boolean = false): void {
     if (this.getShouldReattachChangeDetector()) {
       this.getChangeDetectorRef().reattach();
     }

diff --git a/packages/survey-angular-ui/src/components-container.component.html b/packages/survey-angular-ui/src/components-container.component.html
@@ -2,13 +2,13 @@
   <ng-container *ngIf="isNeedRenderWrapper">
     <div *ngIf="components.length > 0" class="sv-components-column">
       <ng-container *ngFor="let component of components">
-        <ng-template [component]="{ name: component.component, data: { survey: survey, model: component.data } }"></ng-template>
+        <ng-template [component]="{ name: component.component, data: { survey: survey, container: container, model: component.data } }"></ng-template>
       </ng-container>
     </div>
   </ng-container>
   <ng-container *ngIf="!isNeedRenderWrapper && components.length > 0">
     <ng-container *ngFor="let component of components">
-      <ng-template [component]="{ name: component.component, data: { survey: survey, model: component.data } }"></ng-template>
+      <ng-template [component]="{ name: component.component, data: { survey: survey, container: container, model: component.data } }"></ng-template>
     </ng-container>
   </ng-container>
 </ng-template>
diff --git a/packages/survey-angular-ui/src/components/popup/popup-container.component.ts b/packages/survey-angular-ui/src/components/popup/popup-container.component.ts
@@ -33,6 +33,10 @@ export class PopupBaseContainerComponent<T extends PopupBaseViewModel = PopupBas
     popupModalModel.apply();
   }
 
+  protected override getPropertiesToUpdateSync(): string[] {
+    return ["height"];
+  }
+
   protected override getShouldReattachChangeDetector(): boolean {
     return false;
   }
@@ -41,13 +45,15 @@ export class PopupBaseContainerComponent<T extends PopupBaseViewModel = PopupBas
     this.changeDetectorRef.detectChanges();
   }
 
-  protected override afterUpdate(): void {
-    super.afterUpdate();
-    if (!this.prevIsVisible && this.model.isVisible) {
-      this.model.updateOnShowing();
-    }
-    if (this.prevIsVisible !== this.model.isVisible) {
-      this.prevIsVisible = this.model.isVisible;
+  protected override afterUpdate(isSync: boolean = false): void {
+    super.afterUpdate(isSync);
+    if(!isSync) {
+      if (!this.prevIsVisible && this.model.isVisible) {
+        this.model.updateOnShowing();
+      }
+      if (this.prevIsVisible !== this.model.isVisible) {
+        this.prevIsVisible = this.model.isVisible;
+      }
     }
   }
   public clickInside(event: any) {

diff --git a/packages/survey-angular-ui/src/components/progress/default/progress.component.html b/packages/survey-angular-ui/src/components/progress/default/progress.component.html
@@ -1,5 +1,5 @@
 <ng-template #template>
-  <div [class]="model.getProgressCssClasses()">
+  <div [class]="model.getProgressCssClasses(container)">
     <div [class]="model.css.progressBar" [style.width]="model.progressValue + '%'"
         role="progressbar" aria-valuemin="0" aria-valuemax="100">
         <span [class]="getProgressTextInBarCss(model.css)">

diff --git a/packages/survey-angular-ui/src/components/progress/default/progress.component.ts b/packages/survey-angular-ui/src/components/progress/default/progress.component.ts
@@ -8,6 +8,7 @@ import { EmbeddedViewContentComponent } from "../../../embedded-view-content.com
   templateUrl: "./progress.component.html"
 })
 export class ProgressDefaultComponent extends EmbeddedViewContentComponent {
+  @Input() container?: string;
   @Input() model: any;
   getProgressTextInBarCss(css: any): string {
     return SurveyProgressModel.getProgressTextInBarCss(css);

diff --git 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.106](https://github.com/surveyjs/survey-library/compare/v1.9.105...v1.9.106) (2023-09-06)
+
 ## [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)

diff --git 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.105",
+  "version": "1.9.106",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

diff --git a/packages/survey-vue3-ui/src/components/Container.vue b/packages/survey-vue3-ui/src/components/Container.vue
@@ -5,6 +5,7 @@
         <component
           :is="component.component"
           :survey="survey"
+          :container="container"
           :model="component.data"
         ></component>
       </template>

diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
@@ -24,6 +24,7 @@ import { onMounted, onUnmounted, ref } from "vue";
 
 const props = defineProps<{
   model: ActionContainer;
+  container?: string;
   handleClick?: boolean;
 }>();
 const root = ref<HTMLDivElement>(null as any as HTMLDivElement);

diff --git a/packages/survey-vue3-ui/src/components/progress/Progress.vue b/packages/survey-vue3-ui/src/components/progress/Progress.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="survey.getProgressCssClasses()">
+  <div :class="survey.getProgressCssClasses(container)">
     <div
       :class="survey.css.progressBar"
       :style="{ width: progress }"
@@ -23,6 +23,7 @@ import { SurveyModel, SurveyProgressModel } from "survey-core";
 
 const props = defineProps<{
   survey: SurveyModel;
+  container?: string;
   css?: any;
 }>();
 const progress = computed(() => props.survey.progressValue + "%");

diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts
@@ -103,6 +103,7 @@ import TimerPanel from "./TimerPanel.vue";
 import LoadingIndicator from "./components/LoadingIndicator.vue";
 
 import {
+  SurveyModel,
   doKey2ClickBlur,
   doKey2ClickDown,
   doKey2ClickUp,
@@ -111,6 +112,8 @@ import {
 import type { App } from "vue";
 export { useBase, useLocString, useQuestion } from "./base";
 
+SurveyModel.platform = "vue3";
+
 function registerComponents(app: App) {
   app.component("SurveyComponent", SurveyVue);
   app.component("PopupSurveyComponent", PopupSurvey);

diff --git a/src/base.ts b/src/base.ts
@@ -485,6 +485,8 @@ export class Base {
     if(!prop || prop.isCustom && this.isCreating) return undefined;
     const dValue = prop.defaultValue;
     if (!this.isPropertyEmpty(dValue) && !Array.isArray(dValue)) return dValue;
+    const locStr = this.localizableStrings ? this.localizableStrings[name] : undefined;
+    if(locStr && locStr.localizationName) return this.getLocalizationString(locStr.localizationName);
     if (prop.type == "boolean" || prop.type == "switch") return false;
     if (prop.isCustom && !!prop.onGetValue) return prop.onGetValue(this);
     return undefined;

diff --git a/src/defaultV2-theme/blocks/sd-body.scss b/src/defaultV2-theme/blocks/sd-body.scss
@@ -93,16 +93,6 @@
   gap: calcSize(2);
 }
 
-.sd-body__progress {
-  margin-bottom: calcSize(4);
-}
-
-.sd-body__progress--top {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-}
-
 .sd-body--empty {
   min-height: 400px;
   text-align: center;
@@ -158,6 +148,7 @@
     &:hover {
       background-color: $background-dark;
     }
+
     &:focus {
       box-shadow: 0 0 0 2px $primary;
     }

diff --git a/src/defaultV2-theme/blocks/sd-file.scss b/src/defaultV2-theme/blocks/sd-file.scss
@@ -74,6 +74,10 @@
   cursor: pointer;
 }
 
+.sd-file__wrapper {
+  width: max-content;
+}
+
 .sd-question--answered {
   .sd-file__drag-area-placeholder {
     display: none;

diff --git a/src/defaultV2-theme/blocks/sd-input.scss b/src/defaultV2-theme/blocks/sd-input.scss
@@ -22,6 +22,14 @@
   outline: none;
 }
 
+//for IPHONE
+input,
+textarea {
+  &.sd-input:disabled:not(.sd-input--disabled) {
+    opacity: 1;
+  }
+}
+
 .sd-input--disabled {
   background-color: $editor-background;
   -webkit-user-select: none;
@@ -38,8 +46,8 @@
   user-select: none;
 }
 
-.sd-input--disabled,
-.sd-input--disabled::placeholder {
+.sd-input.sd-input--disabled,
+.sd-input.sd-input--disabled::placeholder {
   color: $foreground;
   opacity: 0.25;
 }

diff --git a/src/defaultV2-theme/blocks/sd-progress.scss b/src/defaultV2-theme/blocks/sd-progress.scss
@@ -27,4 +27,15 @@
   @media only screen and (max-width: calcSize(125)) {
     margin-left: 10px;
   }
+}
+
+.sd-body__progress--top {
+  margin-bottom: calcSize(4);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+.sd-body__progress--bottom .sd-progress__text {
+  margin-top: calcSize(-3.5);
 }
diff --git a/src/defaultV2-theme/blocks/sd-row.scss b/src/defaultV2-theme/blocks/sd-row.scss
@@ -27,19 +27,22 @@
 }
 
 .sd-row--multiple {
-  row-gap: var(--sd-base-vertical-padding);
+  row-gap: calcSize(2);
   margin-left: calc(-1 * var(--sd-base-padding));
   width: calc(100% + var(--sd-base-padding));
   flex-wrap: wrap;
 
   &>div {
     box-sizing: border-box;
     padding-left: calcSize(2);
+    display: flex;
+    align-items: stretch;
   }
 }
 
 .sd-panel {
   .sd-row--multiple {
+    row-gap: var(--sd-base-vertical-padding);
     &>div {
       padding-left: var(--sd-base-padding);
     }
@@ -61,13 +64,7 @@
     margin-left: calc(-1 * var(--sd-base-padding));
     width: calc(100% + var(--sd-base-padding));
   }
-  .sd-row__panel {
-    height: 100%
-  }
 
-  .sd-row__question {
-    height: 100%
-  }
 }
 
 .sd-row__panel {