Skip to content

Commit 10f76e6

Browse files
RomanTsukanovRomanTsukanov
committed
Update the example and README
1 parent ea50d93 commit 10f76e6

12 files changed

+78
-137
lines changed

‎README.md

+35-38
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,43 @@
1-
# example
1+
# SurveyJS + Vue 3 Quickstart Template
22

3-
This template should help get you started developing with Vue 3 in Vite.
3+
SurveyJS is a set of JavaScript components that allow you and your users to build surveys / forms, store them in your database, and visualize survey results for data analysis. This quick start template uses Vue 3 and the following SurveyJS components:
44

5-
## Recommended IDE Setup
5+
- [SurveyJS Form Library](https://surveyjs.io/form-library/documentation/overview)
6+
- [Survey Creator / Form Builder](https://surveyjs.io/survey-creator/documentation/overview)
7+
- [SurveyJS PDF Generator](https://surveyjs.io/pdf-generator/documentation/overview)
8+
- [SurveyJS Dashboard](https://surveyjs.io/dashboard/documentation/overview)
69

7-
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
10+
> NOTE: If you are looking for a similar quickstart template for a Vue 2 application, refer to the following project: [SurveyJS + Vue 2 Quickstart Template](https://github.com/surveyjs/surveyjs_vue_quickstart/).
811
9-
## Type Support for `.vue` Imports in TS
12+
## Run the application
1013

11-
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
12-
13-
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
14-
15-
1. Disable the built-in TypeScript Extension
16-
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
17-
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
18-
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
19-
20-
## Customize configuration
21-
22-
See [Vite Configuration Reference](https://vitejs.dev/config/).
23-
24-
## Project Setup
25-
26-
```sh
27-
npm install
28-
```
29-
30-
### Compile and Hot-Reload for Development
31-
32-
```sh
14+
```bash
15+
git clone https://github.com/surveyjs/surveyjs_vue3_quickstart.git
16+
cd surveyjs_vue3_quickstart
17+
npm i
3318
npm run dev
3419
```
3520

36-
### Type-Check, Compile and Minify for Production
37-
38-
```sh
39-
npm run build
40-
```
41-
42-
### Lint with [ESLint](https://eslint.org/)
43-
44-
```sh
45-
npm run lint
46-
```
21+
Open http://localhost:5173/ in your web browser.
22+
23+
## Template structure
24+
25+
This template covers most basic use cases. You can find code examples for them in the following files:
26+
27+
- Create a standalone survey
28+
- [data/survey_json.js](data/survey_json.js)
29+
- [src/components/Survey.vue](src/components/Survey.vue)
30+
- Add Survey Creator to a page
31+
- [src/components/Creator.vue](src/components/Creator.vue)
32+
- Export a survey to a PDF document
33+
- [src/components/PDFGenerator.vue](src/components/PDFGenerator.vue)
34+
- Visualize survey results
35+
- As charts
36+
- [data/dashboard_data.js](data/dashboard_data.js)
37+
- [src/components/Dashboard.vue](src/components/Dashboard.vue)
38+
- As a table (modern browsers)
39+
- [data/dashboard_data.js](data/dashboard_data.js)
40+
- [src/components/DashboardTabulator.vue](src/components/DashboardTabulator.vue)
41+
- As a table (old browsers)
42+
- [data/dashboard_data.js](data/dashboard_data.js)
43+
- [src/views/DashboardDatatables.vue](src/components/DashboardDatatables.vue)

‎data/analytics_data.js renamed to ‎data/dashboard_data.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ export const json = {
138138
visibleIf: '{useproduct} = "Yes"',
139139
title: "Which of our components do you use?",
140140
isRequired: true,
141-
choices: ["Survey Library (Runner)", "Survey Creator", "Export to PDF", "SurveyJS Analytics"]
141+
choices: ["Form Library", "Survey Creator", "PDF Generator", "SurveyJS Dashboard"]
142142
}, {
143143
type: "checkbox",
144144
name: "supported_devices",

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<link rel="icon" href="/favicon.ico">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Vite App</title>
7+
<title>SurveyJS + Vue 3</title>
88
</head>
99
<body>
1010
<div id="app"></div>

‎src/App.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,23 @@ import "bootstrap/dist/css/bootstrap.css";
77
<nav class="navbar navbar-default">
88
<div class="container-fluid">
99
<div class="navbar-header">
10-
<a class="navbar-brand" href="/">SurveyJS + Vue</a>
10+
<a class="navbar-brand" href="/">SurveyJS + Vue 3</a>
1111
</div>
1212
<ul class="nav navbar-nav">
1313
<li>
1414
<router-link to="/">Home</router-link>
1515
</li>
1616
<li>
17-
<router-link to="/survey">Survey</router-link>
17+
<router-link to="/survey">Form Library</router-link>
1818
</li>
1919
<li>
2020
<router-link to="/creator">Survey Creator</router-link>
2121
</li>
2222
<li>
23-
<router-link to="/exportpdf">PDF Export</router-link>
23+
<router-link to="/exportpdf">PDF Generator</router-link>
2424
</li>
2525
<li>
26-
<router-link to="/analytics">Analytics</router-link>
26+
<router-link to="/analytics">Dashboard</router-link>
2727
</li>
2828
<li>
2929
<router-link to="/analyticstabulator">Results Table</router-link>

‎src/components/Creator.vue

+3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<script lang="ts" setup>
22
import { SurveyCreatorModel } from 'survey-creator-core';
3+
import { json } from "../../data/survey_json.js";
4+
35
const creator = new SurveyCreatorModel({});
6+
creator.JSON = json;
47
</script>
58
<template>
69
<div style="position: fixed; top: 52px; left: 0; width: 100vw; bottom: 0">

‎src/components/Analytics.vue renamed to ‎src/components/Dashboard.vue

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
<template>
22
<div>
3-
<h1>Survey Analytics</h1>
3+
<h1>SurveyJS Dashboard</h1>
44
<div id="summaryContainer"></div>
55
</div>
66
</template>
77

88
<script lang="ts" setup>
99
import { Model } from "survey-core";
1010
import { VisualizationPanel } from "survey-analytics";
11-
import { json, data } from "../../data/analytics_data";
11+
import { json, data } from "../../data/dashboard_data";
1212
import { ref, computed, onMounted } from "vue";
1313
1414
import "survey-analytics/survey.analytics.min.css";
1515
1616
const survey = new Model(json);
1717
1818
onMounted(() => {
19-
const surveyAnalytics = new VisualizationPanel(
19+
const dashboard = new VisualizationPanel(
2020
survey.getAllQuestions(),
2121
data
2222
);
23-
surveyAnalytics.render(
23+
dashboard.render(
2424
document.getElementById("summaryContainer") as HTMLElement
2525
);
2626
});
2727
</script>
28+
../../data/dashboard_data

‎src/components/AnalyticsDatatables.vue renamed to ‎src/components/DashboardDatatables.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<h1>Survey Analytics - Table View (old browsers support)</h1>
3+
<h1>SurveyJS Dashboard - Table View (old browsers support)</h1>
44
<span>Uses DataTables (compatible with IE10+)</span>
55
<div id="tableContainer"></div>
66
</div>
@@ -10,7 +10,7 @@
1010
import { ref, computed, onMounted } from "vue";
1111
import { Model } from "survey-core";
1212
import { DataTables } from "survey-analytics/survey.analytics.datatables";
13-
import { json, data } from "../../data/analytics_data";
13+
import { json, data } from "../../data/dashboard_data";
1414
1515
import $ from "jquery";
1616
import "datatables.net/js/jquery.dataTables.js";
@@ -28,7 +28,7 @@ const survey = new Model(json);
2828
2929
onMounted(() => {
3030
DataTables.initJQuery($);
31-
const surveyAnalyticsDataTables = new DataTables(survey, data);
32-
surveyAnalyticsDataTables.render(document.getElementById("tableContainer") as HTMLElement);
31+
const dashboardDataTables = new DataTables(survey, data);
32+
dashboardDataTables.render(document.getElementById("tableContainer") as HTMLElement);
3333
});
34-
</script>
34+
</script>../../data/dashboard_data

‎src/components/AnalyticsTabulator.vue renamed to ‎src/components/DashboardTabulator.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<h1>Survey Analytics - Table View</h1>
3+
<h1>SurveyJS Dashboard - Table View</h1>
44
<span>Uses Tabulator supported only by modern browsers.</span>
55
<div id="tableContainer"></div>
66
</div>
@@ -18,16 +18,16 @@ window["XLSX"] = XLSX;
1818
1919
import { Tabulator } from "survey-analytics/survey.analytics.tabulator";
2020
21-
import { json, data } from "../../data/analytics_data";
21+
import { json, data } from "../../data/dashboard_data";
2222
2323
import "survey-analytics/survey.analytics.tabulator.min.css";
2424
import "tabulator-tables/dist/css/tabulator.min.css";
2525
2626
const survey = new Model(json);
2727
2828
onMounted(() => {
29-
const surveyAnalyticsTabulator = new Tabulator(survey, data);
30-
surveyAnalyticsTabulator.render(document.getElementById("tableContainer") as HTMLElement);
29+
const dashboardTabulator = new Tabulator(survey, data);
30+
dashboardTabulator.render(document.getElementById("tableContainer") as HTMLElement);
3131
});
3232
33-
</script>
33+
</script>../../data/dashboard_data

‎src/components/Home.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@
33
<div class="col-lg-3 centered">
44
<img src="../../assets/logo.png" />
55
</div>
6-
<h1>SurveyJS + Vue Quickstart Template</h1>
6+
<h1>SurveyJS + Vue 3 Quickstart Template</h1>
77
<div class="col-lg-9 jumbotron">
88
<p>
99
SurveyJS is a set of JavaScript components that allow you and your users to build surveys / forms, store them in your database, and visualize survey results for data analysis. This quick start template uses the following SurveyJS components:
1010
</p>
1111
<ul>
12-
<li><a href="https://surveyjs.io/Documentation/Library?id=LibraryOverview" target="_blank">SurveyJS Library / Runner</a></li>
13-
<li><a href="https://surveyjs.io/Documentation/Survey-Creator?id=Survey-Creator-Overview" target="_blank">Survey Creator / Form Builder</a></li>
14-
<li><a href="https://surveyjs.io/Documentation/Pdf-Export?id=PdfExportOverview" target="_blank">PDF Export</a></li>
15-
<li><a href="https://surveyjs.io/Documentation/Analytics?id=AnalyticsOverview" target="_blank">Survey Analytics</a></li>
12+
<li><a href="https://surveyjs.io/form-library/documentation/overview" target="_blank">SurveyJS Form Library</a></li>
13+
<li><a href="https://surveyjs.io/survey-creator/documentation/overview" target="_blank">Survey Creator / Form Builder</a></li>
14+
<li><a href="https://surveyjs.io/pdf-generator/documentation/overview" target="_blank">SurveyJS PDF Generator</a></li>
15+
<li><a href="https://surveyjs.io/dashboard/documentation/overview" target="_blank">SurveyJS Dashboard</a></li>
1616
</ul>
1717
</div>
1818
</div>

‎src/components/ExportToPDF.vue renamed to ‎src/components/PDFGenerator.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<div class="container">
3-
<h1>SurveyJS PDF Export</h1>
3+
<h1>SurveyJS PDF Generator</h1>
44
<div class="jumbotron">
5-
<p>SurveyJS PDF Export is a client-side extension over the SurveyJS Library that enables users to save surveys as PDF documents.</p>
5+
<p>SurveyJS PDF Generator is a client-side extension over the SurveyJS Form Library that enables users to save surveys as PDF documents.</p>
66
<p>NOTE: Dynamic elements and characteristics (visibility, validation, navigation buttons) are not supported.</p>
77
<p>Click the button below to export survey to a PDF document.</p>
88
<button v-on:click="savePDF">Save as PDF</button>

‎src/components/Survey.vue

+4-64
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,10 @@
11
<script setup lang="ts">
2-
import { Model } from "survey-core";
3-
import("survey-core/defaultV2.css");
2+
import { Model } from "survey-core";
3+
import { json } from "../../data/survey_json.js";
44
5-
let json = {
6-
focusFirstQuestionAutomatic: true,
7-
"title": "Minimum data reporting form – for suspected and probable cases of COVID-19",
8-
"pages": [{
9-
"name": "page1",
10-
"navigationTitle": "Sign In",
11-
"navigationDescription": "... to continue purchasing.",
12-
"elements": [
13-
{
14-
"name": "q1",
15-
type: "text"
16-
}
17-
]
18-
}, {
19-
"name": "page2",
20-
"navigationTitle": "Shipping",
21-
"title": "Shipping",
22-
"navigationDescription": "Enter shipping information.",
23-
"elements": [
24-
{
25-
"type": "radiogroup",
26-
"name": "q1",
27-
"title": "Select a shipping method.",
28-
"choices": ["FedEx", "DHL", "USP", "In-Store Pickup"]
29-
},
30-
]
31-
}, {
32-
"name": "page3",
33-
"navigationTitle": "Payment",
34-
"navigationDescription": "Select a payment method.",
35-
"elements": [
36-
{
37-
"name": "q1",
38-
type: "text"
39-
}
40-
]
41-
}, {
42-
"name": "page4",
43-
"navigationTitle": "Gift Options",
44-
"navigationDescription": "Choose your gift.",
45-
"elements": [
46-
{
47-
"name": "q1",
48-
type: "text"
49-
}
50-
]
51-
}, {
52-
"name": "page5",
53-
"navigationTitle": "Place Order",
54-
"navigationDescription": "Finish your purchasing.",
55-
"elements": [{
56-
"name": "q1",
57-
type: "text"
58-
}]
59-
}],
60-
"showProgressBar": "top",
61-
// "progressBarType": "buttons"
62-
"progressBarType": "pages"
63-
};
64-
65-
let survey = new Model(json)
5+
const survey = new Model(json);
666
</script>
677

688
<template>
69-
<SurveyComponent :survey="survey"></SurveyComponent>
9+
<SurveyComponent :model="survey"></SurveyComponent>
7010
</template>

‎src/router/index.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { createRouter, createWebHistory } from 'vue-router'
33
import Home from "../components/Home.vue"
44
import Survey from "../components/Survey.vue"
55
import Creator from "../components/Creator.vue"
6-
import ExportToPDF from "../components/ExportToPDF.vue"
7-
import Analytics from "../components/Analytics.vue"
8-
import AnalyticsTabulator from "../components/AnalyticsTabulator.vue"
9-
import AnalyticsDatatables from "../components/AnalyticsDatatables.vue"
6+
import PDFGenerator from "../components/PDFGenerator.vue"
7+
import Dashboard from "../components/Dashboard.vue"
8+
import DashboardTabulator from "../components/DashboardTabulator.vue"
9+
import DashboardDatatables from "../components/DashboardDatatables.vue"
1010

1111

1212
const router = createRouter({
@@ -15,10 +15,10 @@ const router = createRouter({
1515
{ path: "/", component: Home },
1616
{ path: "/survey", component: Survey },
1717
{ path: "/creator", component: Creator },
18-
{ path: "/exportpdf", component: ExportToPDF },
19-
{ path: "/analytics", component: Analytics },
20-
{ path: "/analyticstabulator", component: AnalyticsTabulator },
21-
{ path: "/analyticsdatatables", component: AnalyticsDatatables },
18+
{ path: "/exportpdf", component: PDFGenerator },
19+
{ path: "/analytics", component: Dashboard },
20+
{ path: "/analyticstabulator", component: DashboardTabulator },
21+
{ path: "/analyticsdatatables", component: DashboardDatatables },
2222
]
2323
})
2424

0 commit comments

Comments
 (0)