Merge branch 'master' of github.com:surveyjs/survey-library into bug/…

…6205-popup-height-after-filtering
surveyjs · Aug 16, 2023 · 47b772e · 47b772e
2 parents 5c9f834 + 85fa674
commit 47b772e
Show file tree

Hide file tree

Showing 303 changed files with 2,874 additions and 799 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 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.103](https://github.com/surveyjs/survey-library/compare/v1.9.102...v1.9.103) (2023-08-15)
+
+## [1.9.102](https://github.com/surveyjs/survey-library/compare/v1.9.101...v1.9.102) (2023-08-08)
+
 ## [1.9.101](https://github.com/surveyjs/survey-library/compare/v1.9.100...v1.9.101) (2023-08-02)
 
 ## [1.9.100](https://github.com/surveyjs/survey-library/compare/v1.9.99...v1.9.100) (2023-07-26)

diff --git a/build-scripts/survey-vue-ui/README.md b/build-scripts/survey-vue-ui/README.md
@@ -1,4 +1,4 @@
-# SurveyJS Vue Form Library
+# SurveyJS Vue Form Library (Vue 2)
 
 [![Build Status](https://dev.azure.com/SurveyJS/SurveyJS%20Integration%20Tests/_apis/build/status/SurveyJS%20Library?branchName=master)](https://dev.azure.com/SurveyJS/SurveyJS%20Integration%20Tests/_build/latest?definitionId=7&branchName=master)
 [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](LICENSE)
@@ -14,6 +14,8 @@
 
 A free and open-source MIT-licensed JavaScript form builder library that allows you to design dynamic, data-driven, multi-language survey forms and run them in your Vue applications.
 
+> **NOTE**: This package contains a version of SurveyJS Form Library for Vue 2. If you are looking for a Vue 3 version, refer to the [survey-vue3-ui](https://www.npmjs.com/package/survey-vue3-ui) npm package.
+
 ## Features
 
 - Dynamic forms, surveys, polls, and quizzes for your JavaScript application
@@ -29,7 +31,7 @@ A free and open-source MIT-licensed JavaScript form builder library that allows
 
 ## Get Started
 
-To get started with SurveyJS Vue Form Library, refer to the following tutorial: [Add a Survey to a Vue Application](https://surveyjs.io/Documentation/Library?id=get-started-vue).
+To get started with SurveyJS Vue Form Library, refer to the following tutorial: [Add a Survey to a Vue 2 Application](https://surveyjs.io/form-library/documentation/get-started-vue#add-a-survey-to-a-vue-2-application).
 
 ## Resources
 

diff --git a/docs/design-survey-conditional-logic.md b/docs/design-survey-conditional-logic.md
@@ -4,24 +4,7 @@ description: Learn how to implement branching and skip logic and add dynamic tex
 ---
 # Conditional Logic and Dynamic Texts
 
-This help topic describes how to implement custom conditional logic and add dynamic texts to your survey. Refer to the following sections for details:
-
-- [Dynamic Texts](#dynamic-texts)
-  - [Question Values](#question-values)
-  - [Variables](#variables)
-  - [Calculated Values](#calculated-values)
-- [Expressions](#expressions)
-  - [Built-In Functions](#built-in-functions)
-  - [Custom Functions](#custom-functions)
-    - [Implement a Custom Function](#implement-a-custom-function)
-    - [Access Survey Elements Within a Custom Function](#access-survey-elements-within-a-custom-function)
-    - [Asynchronous Functions](#asynchronous-functions)
-- [Conditional Visibility](#conditional-visibility)
-  - [Question Visibility](#question-visibility)
-  - [Item Visibility (Choices, Columns, Rows)](#item-visibility-choices-columns-rows)
-    - [Specify Visibility Conditions for Individual Items](#specify-visibility-conditions-for-individual-items)
-    - [Combine Visibility Conditions](#combine-visibility-conditions)
-- [Conditional Survey Logic (Triggers)](#conditional-survey-logic-triggers)
+This help topic describes how to implement custom conditional logic and add dynamic texts to your survey.
 
 ## Dynamic Texts
 
@@ -272,7 +255,55 @@ Returns the current date or a date shifted from the current by a given number of
 - `"expression": "today()"`
 - `"expression": "today(2)"`
 
-[View Source Code](https://github.com/surveyjs/survey-library/blob/68eb0054dc83d2f45a6daa1042bf7440c8faf007/src/functionsfactory.ts#L257-L264 (linkStyle))  
+[View Source Code](https://github.com/surveyjs/survey-library/blob/68eb0054dc83d2f45a6daa1042bf7440c8faf007/src/functionsfactory.ts#L257-L264 (linkStyle))
+
+---
+
+#### `year`
+
+*Definition*: `year(date?: Date): number`
+
+Returns the year of a given date.
+
+*Example*: `"expression": "year({birthdate})"`
+
+[View Source Code](https://github.com/surveyjs/survey-library/blob/b7ff8f2bde82ed09e948fa89b965cb0cad5f19cb/src/functionsfactory.ts#L323-L326 (linkStyle))
+
+---
+
+#### `month`
+
+*Definition*: `month(date?: Date): number`
+
+Returns the month of a given date as a value from 1 (January) to 12 (December).
+
+*Example*: `"expression": "month({birthdate})"`
+
+[View Source Code](https://github.com/surveyjs/survey-library/blob/b7ff8f2bde82ed09e948fa89b965cb0cad5f19cb/src/functionsfactory.ts#L329-L332 (linkStyle))
+
+---
+
+#### `day`
+
+*Definition*: `day(date?: Date): number`
+
+Returns the day of the month for a given date as a value from 1 to 31.
+
+*Example*: `"expression": "day({birthdate})"`
+
+[View Source Code](https://github.com/surveyjs/survey-library/blob/b7ff8f2bde82ed09e948fa89b965cb0cad5f19cb/src/functionsfactory.ts#L335-L338 (linkStyle))
+
+---
+
+#### `weekday`
+
+*Definition*: `weekday(date?: Date): number`
+
+Returns the day of the week for a given date as a value from 0 (Sunday) to 6 (Saturday).
+
+*Example*: `"expression": "weekday({birthdate})"`
+
+[View Source Code](https://github.com/surveyjs/survey-library/blob/b7ff8f2bde82ed09e948fa89b965cb0cad5f19cb/src/functionsfactory.ts#L341-L344 (linkStyle))
 
 ---
 

diff --git a/docs/design-survey-create-a-simple-survey.md b/docs/design-survey-create-a-simple-survey.md
@@ -206,7 +206,7 @@ export class AppComponent implements OnInit {
 </details>
 
 <details>
-    <summary>Vue</summary> 
+    <summary>Vue 2</summary> 
 
 ```js
 <template>
@@ -242,6 +242,29 @@ export default {
 ```
 </details>
 
+<details>
+    <summary>Vue 3</summary> 
+
+```html
+<script setup lang="ts">
+import { Model } from 'survey-core';
+
+const surveyJson = {
+  // ...
+};
+const survey = new Model(surveyJson);
+</script>
+
+<template>
+  <!-- Render the survey inside the page -->
+  <SurveyComponent :model="survey" />
+
+  <!-- Render the survey in a pop-up window -->
+  <PopupSurveyComponent :model="survey" :isExpanded="true" />
+</template>
+```
+</details>
+
 <details>
     <summary>React</summary> 
 

diff --git a/docs/get-started-angular.md b/docs/get-started-angular.md
@@ -43,11 +43,11 @@ npm install survey-angular-ui --save
 
 ## Configure Styles
 
-SurveyJS ships with the Modern and Default V2 UI themes illustrated below.
+SurveyJS Form Library is shipped with several predefined themes illustrated below and a flexible theme customization mechanism based on CSS variables.
 
 ![Themes in SurveyJS Form Library](images/survey-library-themes.png)
 
-Open the `angular.json` file and reference a style sheet that implements the required theme:
+To add SurveyJS themes to your Angular application, open the `angular.json` file and reference the Form Library style sheet:
 
 ```js
 {
@@ -64,10 +64,7 @@ Open the `angular.json` file and reference a style sheet that implements the req
             // ...
             "styles": [
               "src/styles.css",
-              // Default V2 theme
               "node_modules/survey-core/defaultV2.min.css",
-              // Modern theme
-              // "node_modules/survey-core/modern.min.css"
             ],
             // ...
           }
@@ -78,7 +75,9 @@ Open the `angular.json` file and reference a style sheet that implements the req
 }
 ```
 
-For more information about SurveyJS themes, refer to the following help topic: [Themes & Styles](https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles).
+This style sheet applies the Default theme. If you want to apply a different predefined theme or create a custom theme, refer to the following help topic for detailed instructions: [Themes & Styles](https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles).
+
+> Previous to v1.9.100, SurveyJS also supplied the Modern theme, which is now obsolete. Please migrate to one of the predefined themes or create a custom theme.
 
 ## Create a Model
 
@@ -276,16 +275,23 @@ export class AppComponent implements OnInit {
 }
 
 function saveSurveyResults(url, json) {
-  const request = new XMLHttpRequest();
-  request.open('POST', url);
-  request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
-  request.addEventListener('load', () => {
-    // Handle "load"
-  });
-  request.addEventListener('error', () => {
-    // Handle "error"
+  fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    },
+    body: JSON.stringify(json)
+  })
+  .then(response => {
+    if (response.ok) {
+      // Handle success
+    } else {
+      // Handle error
+    }
+  })
+  .catch(error => {
+    // Handle error
   });
-  request.send(JSON.stringify(json));
 }
 ```
 

diff --git a/docs/get-started-jquery.md b/docs/get-started-jquery.md
@@ -24,29 +24,26 @@ As a result, you will create a survey displayed below:
 
 ## Link SurveyJS Resources
 
-SurveyJS Form Library ships with a script and several style sheets that implement the Modern and Default V2 themes illustrated below:
-
-![Themes in SurveyJS Form Library](images/survey-library-themes.png)
-
-Insert links to the script and one of the style sheets within the `<head>` tag on your HTML page _after_ the jQuery link:
+SurveyJS Form Library resources include a script and a style sheet. Insert links to them within the `<head>` tag on your HTML page _after_ the jQuery link:
 
 ```html
 <head>
     <!-- ... -->
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
-    <!-- Default V2 theme -->
     <link href="https://unpkg.com/survey-jquery/defaultV2.min.css" type="text/css" rel="stylesheet">
-
-    <!-- Modern theme -->
-    <!-- <link href="https://unpkg.com/survey-jquery/modern.min.css" type="text/css" rel="stylesheet"> -->
-
     <script type="text/javascript" src="https://unpkg.com/survey-jquery/survey.jquery.min.js"></script>
     <!-- ... -->
 </head>
 ```
 
-For more information about SurveyJS themes, refer to the following help topic: [Themes & Styles](https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles).
+The style sheet above applies the Default theme. SurveyJS Form Library is shipped with several more predefined themes illustrated below and a flexible theme customization mechanism based on CSS variables.
+
+![Themes in SurveyJS Form Library](images/survey-library-themes.png)
+
+If you want to apply a predefined theme different from Default or create a custom theme, refer to the following help topic for detailed instructions: [Themes & Styles](https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles).
+
+> Previous to v1.9.100, SurveyJS also supplied the Modern theme, which is now obsolete. Please migrate to one of the predefined themes or create a custom theme.
 
 ## Create a Model
 
@@ -200,16 +197,23 @@ function surveyComplete (sender) {
 }
 
 function saveSurveyResults(url, json) {
-    const request = new XMLHttpRequest();
-    request.open('POST', url);
-    request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
-    request.addEventListener('load', () => {
-        // Handle "load"
-    });
-    request.addEventListener('error', () => {
-        // Handle "error"
+    fetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        },
+        body: JSON.stringify(json)
+    })
+    .then(response => {
+        if (response.ok) {
+            // Handle success
+        } else {
+            // Handle error
+        }
+    })
+    .catch(error => {
+        // Handle error
     });
-    request.send(JSON.stringify(json));
 }
 
 const survey = new Survey.Model(surveyJson);

diff --git a/docs/get-started-knockout.md b/docs/get-started-knockout.md
@@ -23,30 +23,27 @@ As a result, you will create a survey displayed below:
 
 ## Link SurveyJS Resources
 
-The SurveyJS Form Library for Knockout consists of two parts: `survey-core` (platform-independent code) and `survey-knockout-ui` (view models). Each part includes scripts and style sheets that implement the Modern and Default V2 themes illustrated below:
-
-![Themes in SurveyJS Form Library](images/survey-library-themes.png)
-
-Insert links to the scripts and style sheets within the `<head>` tag on your HTML page _after_ the Knockout link:
+SurveyJS Form Library for Knockout consists of two parts: `survey-core` (platform-independent code) and `survey-knockout-ui` (view models). Each part is distributed as a script, while `survey-core` also includes a style sheet. Insert links to these resources within the `<head>` tag on your HTML page _after_ the Knockout link:
 
 ```html
 <head>
     <!-- ... -->
     <script type="text/javascript" src="https://unpkg.com/knockout/build/output/knockout-latest.js"></script>
 
-    <!-- Default V2 theme -->
-    <link href="https://unpkg.com/survey-knockout/defaultV2.min.css" type="text/css" rel="stylesheet">
-
-    <!-- Modern theme -->
-    <!-- <link href="https://unpkg.com/survey-knockout/modern.min.css" type="text/css" rel="stylesheet"> -->
-
+    <link href="https://unpkg.com/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet">
     <script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
     <script type="text/javascript" src="https://unpkg.com/survey-knockout-ui/survey-knockout-ui.min.js"></script>
     <!-- ... -->
 </head>
 ```
 
-For more information about SurveyJS themes, refer to the following help topic: [Themes & Styles](https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles).
+The style sheet above applies the Default theme. SurveyJS Form Library is shipped with several more predefined themes illustrated below and a flexible theme customization mechanism based on CSS variables.
+
+![Themes in SurveyJS Form Library](images/survey-library-themes.png)
+
+If you want to apply a predefined theme different from Default or create a custom theme, refer to the following help topic for detailed instructions: [Themes & Styles](https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles).
+
+> Previous to v1.9.100, SurveyJS also supplied the Modern theme, which is now obsolete. Please migrate to one of the predefined themes or create a custom theme.
 
 ## Create a Model
 
@@ -208,16 +205,23 @@ function surveyComplete (sender) {
 }
 
 function saveSurveyResults(url, json) {
-    const request = new XMLHttpRequest();
-    request.open('POST', url);
-    request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
-    request.addEventListener('load', () => {
-        // Handle "load"
-    });
-    request.addEventListener('error', () => {
-        // Handle "error"
+    fetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        },
+        body: JSON.stringify(json)
+    })
+    .then(response => {
+        if (response.ok) {
+            // Handle success
+        } else {
+            // Handle error
+        }
+    })
+    .catch(error => {
+        // Handle error
     });
-    request.send(JSON.stringify(json));
 }
 
 const survey = new Survey.Model(surveyJson);