Update Quiz and Multipage survey examples to Vue3

get-started-creator/angular/angular.json

@@ -45,8 +45,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2.5mb",
-                  "maximumError": "2.5mb"
+                  "maximumWarning": "3.0mb",
+                  "maximumError": "3.0mb"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -112,4 +112,4 @@
     }
   },
   "defaultProject": "get-started-creator-angular"
-}
+}

get-started-creator/react/package.json

@@ -24,6 +24,14 @@
       "react-app/jest"
     ]
   },
+  "cssnano": {
+    "preset": [
+      "default",
+      {
+        "calc": false
+      }
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -36,4 +44,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

get-started-library/jquery/index.html

@@ -5,11 +5,7 @@
     <meta charset="utf-8">
     <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>
     <script type="text/javascript" src="index.js"></script>

get-started-library/knockout/index.html

@@ -5,12 +5,8 @@
     <meta charset="utf-8">
     <script type="text/javascript" src="https://unpkg.com/knockout/build/output/knockout-latest.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-core/survey.core.min.js"></script>
     <script type="text/javascript" src="https://unpkg.com/survey-knockout-ui/survey-knockout-ui.min.js"></script>
     <script type="text/javascript" src="index.js"></script>

get-started-library/react/src/App.js

@@ -1,9 +1,6 @@
 import { useCallback } from 'react';
 
-// Default V2 theme
 import 'survey-core/defaultV2.min.css';
-// Modern theme
-// import 'survey-core/modern.min.css';
 import { Model } from 'survey-core';
 import { Survey } from 'survey-react-ui';
 

get-started-library/vue/src/components/MyFirstSurvey.vue

@@ -3,10 +3,7 @@
 </template>
 
 <script>
-  // Default V2 theme
-import 'survey-core/defaultV2.min.css';
-// Modern theme
-// import 'survey-core/modern.min.css';
+import 'survey-core/defaultV2.css';
 import { Model } from 'survey-core';
 import { Survey } from 'survey-vue-ui';
 

get-started-library/vue/vue.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = {
+  chainWebpack: config => {
+    config.plugin('optimize-css').tap(([options]) => {
+      options.cssnanoOptions.preset[1].calc = false;
+      return [options];
+    })
+  }
+}

get-started-library/vue3/package.json

@@ -10,7 +10,7 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
   },
   "dependencies": {
-    "survey-vue3-ui": "^1.9.102",
+    "survey-vue3-ui": "latest",
     "vue": "^3.3.4"
   },
   "devDependencies": {

legacy-angular/form-library/README.md

@@ -38,10 +38,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-angular/defaultV2.min.css",
-              // Modern theme
-              // "node_modules/survey-angular/modern.min.css"
+              "node_modules/survey-angular/defaultV2.min.css"
             ],
             // ...
           }

multi-page-survey/vue/README.md

@@ -1,4 +1,4 @@
-# Create a Multi-Page Survey (SurveyJS for Vue)
+# Create a Multi-Page Survey (SurveyJS for Vue 2)
 
 This example is used in the following help topic: [Create a Multi-Page Survey](https://surveyjs.io/Documentation/Library?id=design-survey-create-a-multi-page-survey).
 

multi-page-survey/vue3/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

multi-page-survey/vue3/README.md

@@ -0,0 +1,15 @@
+# Create a Multi-Page Survey - Vue 3
+
+This example is used in the following help topic: [Create a Multi-Page Survey](https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey).
+
+## Project setup
+
+```
+npm install
+```
+
+## Compile and hot-reload for development
+
+```
+npm run dev
+```

multi-page-survey/vue3/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

multi-page-survey/vue3/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SurveyJS for Vue - Multi-Page Survey</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>