Skip to content

Commit 26a9f9e

Browse files
spinnspinn
committed
Merge branch 'master' into feature/vue3-support
# Conflicts: # package-lock.json # package.json # src/components/FlowForm.vue # src/components/QuestionTypes/BaseType.vue
2 parents f81092d + f042f77 commit 26a9f9e

27 files changed

+1527
-1236
lines changed

‎README.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Create conversational conditional-logic forms with Vue.js.
1212
<img src="https://www.ditdot.hr/demo/vff/visuals/v-form-green-full-rotate-02.png" alt="v-form screenshots">
1313
</p>
1414

15-
## Demo
15+
## Live Demos
1616

1717
* [Questionnaire example](https://www.ditdot.hr/demo/vff/questionnaire/)
1818
* [Support page example](https://www.ditdot.hr/demo/vff/support-page/)
@@ -26,8 +26,8 @@ Create conversational conditional-logic forms with Vue.js.
2626

2727
Requirements:
2828

29-
* [Node.js](https://nodejs.org/en/) version 8.9 or above (8.11.0+ recommended)
30-
* [npm](https://www.npmjs.com/get-npm) version 3+ (or [yarn](https://yarnpkg.com/lang/en/docs/install/) version 1.16+)
29+
* [Node.js](https://nodejs.org/en/) version 10.0.0 or above (12.0.0+ recommended)
30+
* [npm](https://www.npmjs.com/get-npm) version 5+ (or [yarn](https://yarnpkg.com/lang/en/docs/install/) version 1.16+)
3131
* [Git](https://git-scm.com/)
3232

3333
After checking the prerequisites, follow these simple steps to install and use Vue Form:
@@ -133,8 +133,8 @@ And then in your App.vue file:
133133
@import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.css';
134134
/* Import one of the Vue Flow Form CSS themes (optional) */
135135
@import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-minimal.css';
136-
@import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-green.css';
137-
@import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-purple.css';
136+
/* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-green.css'; */
137+
/* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-purple.css'; */
138138
</style>
139139
```
140140

@@ -145,13 +145,16 @@ HTML:
145145
```html
146146
<html>
147147
<head>
148+
<!-- Requires Vue version 2.6.x -->
148149
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
149150
<!-- Flow Form -->
150-
<script src="https://unpkg.com/@ditdot-dev/vue-flow-form@1.1.1"></script>
151+
<script src="https://unpkg.com/@ditdot-dev/vue-flow-form@1.1.6"></script>
151152
<!-- Flow Form base CSS -->
152-
<link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@1.1.1/dist/vue-flow-form.min.css">
153+
<link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@1.1.6/dist/vue-flow-form.min.css">
153154
<!-- Optional theme.css -->
154-
<link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@1.1.1/dist/vue-flow-form.theme-minimal.min.css">
155+
<link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@1.1.6/dist/vue-flow-form.theme-minimal.min.css">
156+
<!-- Optional font -->
157+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;900&amp;display=swap">
155158
</head>
156159
<body>
157160
<div id="app">
@@ -188,9 +191,6 @@ var app = new Vue({
188191
}
189192
});
190193
```
191-
## Browser Support
192-
193-
Modern browsers and IE11.
194194

195195
## Changelog
196196

‎examples/questionnaire/Example.vue‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
<template>
44
<div>
5-
<header>
5+
<header class="vff-header">
66
<div class="f-container">
77
<!-- Add custom logo here -->
8-
<svg class="logo" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet" viewBox="0 0 35.606 11.211">
8+
<svg class="f-logo" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet" viewBox="0 0 35.606 11.211">
99
<path d="M.134.837H3.21V8.01h4.203v2.18H.134V.837z"/>
1010
<path d="M11.875.59c1.48 0 2.668.448 3.567 1.344s1.35 2.052 1.35 3.47c0 1.48-.445 2.7-1.336 3.632S13.38 10.45 11.9 10.45c-1.678 0-2.954-.54-3.827-1.622-.717-.9-1.08-2.022-1.09-3.397-.01-1.36.39-2.484 1.193-3.374C9.06 1.08 10.292.59 11.875.59zm0 2.283c-.563 0-1.003.222-1.323.662-.338.467-.507 1.124-.507 1.972 0 .865.162 1.524.487 1.978a1.58 1.58 0 0 0 1.369.682c.588 0 1.04-.223 1.355-.668s.474-1.07.474-1.875c0-1.834-.62-2.75-1.855-2.75z"/>
1111
<path d="M21.565 7.078V5.055h4.217v5.163h-1.986l-.13-.908c-.693.76-1.617 1.142-2.777 1.142-1.383 0-2.488-.437-3.313-1.3s-1.243-2.03-1.252-3.464c-.01-1.462.385-2.65 1.18-3.567.875-1.012 2.11-1.518 3.7-1.518 1.21 0 2.207.303 3 .907s1.264 1.457 1.447 2.556h-2.92c-.207-.787-.73-1.182-1.57-1.182-.553 0-.988.236-1.303.707s-.475 1.153-.475 2.043c0 1.695.652 2.542 1.96 2.542.363 0 .695-.103.998-.306a1.29 1.29 0 0 0 .572-.784h-1.35v.002z"/>
@@ -20,18 +20,19 @@
2020
v-on:submit="onSubmit"
2121
v-bind:questions="questions"
2222
v-bind:language="language"
23+
v-bind:standalone="true"
2324
>
2425
<!-- Custom content for the Complete/Submit screen slots in the FlowForm component -->
2526
<!-- We've overriden the default "complete" slot content -->
2627
<template v-slot:complete>
27-
<div class="section-wrap">
28+
<div class="f-section-wrap">
2829
<p>
2930
<span class="fh2">Thank you. 🙏</span>
30-
<span class="section-text">
31+
<span class="f-section-text">
3132
Great work, the survey is completed, and our demo is done. You can review your answers or press submit.
3233
</span>
3334
</p>
34-
<p class="description">Note: No data will be saved and/or sent in this demo.</p>
35+
<p class="f-description">Note: No data will be saved and/or sent in this demo.</p>
3536
</div>
3637
</template>
3738

@@ -281,7 +282,7 @@
281282
this.questions.forEach(question => {
282283
if (question.title) {
283284
let answer = question.answer
284-
if (typeof answer === 'object') {
285+
if (Array.isArray(answer)) {
285286
answer = answer.join(', ')
286287
}
287288

‎examples/quiz/Example.vue‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
<template>
44
<div>
5-
<header>
5+
<header class="vff-header">
66
<div class="f-container">
77
<!-- Add custom logo here -->
8-
<svg xmlns="http://www.w3.org/2000/svg" width='150' height='30' fill='white' viewBox="0 0 361.3 69.57">
8+
<svg xmlns="http://www.w3.org/2000/svg" width='150' height='28' fill='white' viewBox="0 0 361.3 69.57">
99
<g data-name="Layer 2">
1010
<g data-name="Layer 1">
1111
<path d="M35.05 12.34h-22v9.88h20.24v10H13.08V54.7H0V2.36h35.05zM79 35q0 9.74-5.32 15.35t-15.07 5.6q-9.68 0-15-5.6T38.25 35q0-9.84 5.36-15.42t15-5.57q9.7 0 15 5.61T79 35zm-12.62.07a24.64 24.64 0 00-.58-5.85 10.88 10.88 0 00-1.6-3.75 6 6 0 00-2.46-2.05 7.91 7.91 0 00-3.13-.58 8.34 8.34 0 00-3 .51 5.82 5.82 0 00-2.46 2A10.8 10.8 0 0051.5 29a24.06 24.06 0 00-.63 6 23.19 23.19 0 00.6 5.85A11 11 0 0053 44.47a5.77 5.77 0 002.46 2 8.22 8.22 0 003.27.63 7.84 7.84 0 003-.63 5.68 5.68 0 002.45-1.9 11.19 11.19 0 001.65-3.64 24.4 24.4 0 00.58-5.88zM112.08 26.86h-1a9.16 9.16 0 00-2-.37c-.89-.08-1.88-.12-3-.12a16 16 0 00-4.06.56 36.9 36.9 0 00-4.13 1.34V54.7H85.57V15.22h12.31v5.66c.56-.51 1.34-1.16 2.33-1.95a23.8 23.8 0 012.73-1.88 15.17 15.17 0 013.11-1.39 11 11 0 013.36-.58h1.33c.49 0 .94.06 1.34.1zM164 54.7V35c0-1.94 0-3.59-.11-4.92a10 10 0 00-.63-3.27 3.59 3.59 0 00-1.63-1.85 6.93 6.93 0 00-3.12-.58 6.71 6.71 0 00-2.77.62 18.65 18.65 0 00-3 1.74v28h-12.4V35c0-1.92 0-3.56-.12-4.9a10.27 10.27 0 00-.65-3.29 3.59 3.59 0 00-1.63-1.85 6.84 6.84 0 00-3.08-.58 6.63 6.63 0 00-3 .71 21.81 21.81 0 00-2.82 1.65v28h-12.3V15.22h12.3v4.36a34.59 34.59 0 015.7-4 12.45 12.45 0 016-1.44 11.68 11.68 0 016.36 1.73 10.78 10.78 0 014.25 5.13 36.16 36.16 0 016.65-5.09 12.93 12.93 0 016.39-1.78 13.23 13.23 0 014.92.88 9.57 9.57 0 013.69 2.64 12.47 12.47 0 012.48 4.52 23.27 23.27 0 01.82 6.83v25.7zM254.85 68.55a32.87 32.87 0 01-4.24.78 65.92 65.92 0 01-6.66.24 21.07 21.07 0 01-7-1 12.93 12.93 0 01-4.83-2.94 11.81 11.81 0 01-2.9-4.43 17.71 17.71 0 01-1.11-5.52q-11.12-.49-17.49-7.7t-6.38-19.4q0-12.63 6.75-20t18.6-7.33q11.81 0 18.59 7.29t6.79 20a31.14 31.14 0 01-3.85 15.87 21.31 21.31 0 01-10.88 9.4c0 2.56.61 4.32 1.7 5.3s3 1.45 5.75 1.45a12.87 12.87 0 003.31-.46 13 13 0 002.55-.9h1.3zm-17-26.75a17.08 17.08 0 002.6-5.33 28.31 28.31 0 00.92-8 28.3 28.3 0 00-1-8 16.55 16.55 0 00-2.58-5.4 10 10 0 00-3.79-2.99 10.92 10.92 0 00-4.41-.94 10.72 10.72 0 00-4.39.87 10.51 10.51 0 00-3.8 3.07 16 16 0 00-2.62 5.42 28.41 28.41 0 00-1 8.05 28.14 28.14 0 001 8 16.17 16.17 0 002.6 5.33 9.8 9.8 0 003.76 3.12 11 11 0 004.43.93 10.61 10.61 0 004.5-1 9.77 9.77 0 003.76-3.13zM298.65 54.7h-12.3v-4.36a33.11 33.11 0 01-5.87 4.06 13.61 13.61 0 01-6.37 1.39q-5.87 0-9.15-3.71t-3.29-11.16v-25.7H274V34.8c0 2 .06 3.71.16 5a10.09 10.09 0 00.76 3.27 3.84 3.84 0 001.74 1.86 7 7 0 003.28.63 9.42 9.42 0 003.08-.63 13.4 13.4 0 003.29-1.72v-28h12.3zM320.73 9.6h-13V0h13zm-.35 45.1h-12.31V15.22h12.31zM361.3 54.7h-34.52v-8.12l18.84-22.11h-18v-9.25h33.29v8L342 45.28h19.3z"/>
@@ -19,15 +19,19 @@
1919
ref="flowform"
2020
v-on:complete="onComplete"
2121
v-on:submit="onQuizSubmit"
22+
v-on:timer="onTimer"
2223
v-bind:questions="questions"
2324
v-bind:language="language"
25+
v-bind:standalone="true"
26+
v-bind:timer="true"
27+
timer-start-step="html_1"
2428
>
2529
<!-- Custom content for the Complete/Submit screen slots in the FlowForm component -->
2630
<!-- We've overriden the default "complete" slot content -->
2731
<template v-slot:complete>
2832
<p>
2933
<span class="fh2">You did it!</span>
30-
<span v-if="!submitted" class="section-text">
34+
<span v-if="!submitted" class="f-section-text">
3135
Review your answers or press Calculate score to see your result.
3236
</span>
3337
</p>
@@ -52,6 +56,7 @@
5256
v-html="language.formatString(language.pressEnter)">
5357
</a>
5458
</div>
59+
<p class="text-success" v-if="submitted && time">Your time: {{ formattedTime }}</p>
5560
<p class="text-success" v-if="submitted && score < 4">"You scored {{ score }} out of {{ total }}. There's a lot of room for improvement."</p>
5661
<p class="text-success" v-else-if="submitted && score < 7">"You scored {{ score }} out of {{ total }}. Not bad at all!"</p>
5762
<p class="text-success" v-else-if="submitted && score <= total">"You scored {{ score }} out of {{ total }}. Wow, that's impressive!"</p>
@@ -84,6 +89,8 @@
8489
completed: false,
8590
score: 0,
8691
total: 8,
92+
time: 0,
93+
formattedTime: '',
8794
answers: {
8895
html_1: ['2', '3'],
8996
html_2: 'false',
@@ -137,7 +144,7 @@
137144
helpTextShow: false,
138145
type: QuestionType.MultipleChoice,
139146
required: true,
140-
multiple: false,
147+
multiple: false,
141148
options: [
142149
new ChoiceOption({
143150
label: 'True',
@@ -334,6 +341,11 @@
334341
335342
this.submitted = true
336343
this.calculateScore()
344+
},
345+
346+
onTimer(time, formattedTime) {
347+
this.time = formattedTime
348+
this.formattedTime = formattedTime
337349
}
338350
},
339351
}

‎examples/support-page/Example.vue‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,26 @@
99
v-bind:questions="questions"
1010
v-bind:language="language"
1111
v-bind:progressbar="false"
12+
v-bind:standalone="true"
1213
>
1314
<!-- Custom content for the Complete/Submit screen slots in the FlowForm component -->
1415
<!-- We've overriden the default "complete" slot content -->
1516
<template v-slot:complete>
16-
<div class="section-wrap">
17+
<div class="f-section-wrap">
1718
<div v-if="questions[0].answer === 'technical_issue'">
1819
<span class="f-tagline">Submit issue &gt; Step 3/3</span>
1920
<div v-if="loading">
20-
<span class="fh2">Please wait, submitting your ticket.</span>
21+
<span class="fh2">Please wait, submitting...</span>
2122
</div>
2223
<div v-else>
2324
<span class="fh2">Your ticket number is: {{ getTicket() }}</span>
24-
<p class="description"><span>Thank You 😊. Our support team will contact you as soon as possible.</span></p>
25+
<p class="f-description"><span>Thank You 😊. Our support team will contact you as soon as possible.</span></p>
2526
</div>
2627
</div>
2728
<div v-else>
2829
<span class="f-tagline">Support page &gt; Ticket status</span>
2930
<span class="fh2">Good news - the wheels are turning, your ticket is being processed!😉</span>
31+
<p class="f-description"><span>Have a great day!</span></p>
3032
</div>
3133
</div>
3234
</template>
@@ -52,7 +54,7 @@
5254
import QuestionModel, { QuestionType, ChoiceOption, LinkOption } from '../../src/models/QuestionModel'
5355
import LanguageModel from '../../src/models/LanguageModel'
5456
// If using the npm package, use the following line instead of the ones above.
55-
// import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
57+
// import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LinkOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
5658
5759
export default {
5860
name: 'example',
@@ -107,7 +109,7 @@
107109
],
108110
options: [
109111
new ChoiceOption({
110-
label: 'Yes, but still couldn’t find the answer.',
112+
label: 'Yes, but I couldn’t find the answer',
111113
value: 'faq_no'
112114
}),
113115
],
@@ -118,9 +120,9 @@
118120
new QuestionModel({
119121
id: 'enter_ticket',
120122
tagline: 'Support page > Ticket status',
121-
title: 'Please enter your 6-digit code',
122-
subtitle: 'You received this when you reported your problem',
123-
type: QuestionType.Number,
123+
title: 'Please enter your 6-digit code.',
124+
subtitle: 'You received this when you reported your problem.',
125+
type: QuestionType.Text,
124126
multiple: false,
125127
required: true,
126128
mask: '#-#-#-#-#-#',
@@ -132,7 +134,7 @@
132134
new QuestionModel({
133135
id: 'faq_no',
134136
tagline: 'Submit issue > Step 2/3',
135-
title: 'Please describe your problem',
137+
title: 'Please describe your problem.',
136138
type: QuestionType.LongText,
137139
required: true,
138140
placeholder: 'Start typing here...',
@@ -158,8 +160,6 @@
158160
const data = this.getData()
159161
160162
this.loading = true
161-
162-
/* eslint-disable-next-line no-unused-vars */
163163
164164
/*
165165
You can use Fetch API to send the data to your server, eg.:
@@ -187,7 +187,7 @@
187187
this.questions.forEach(question => {
188188
if (question.title) {
189189
let answer = question.answer
190-
if (typeof answer === 'object') {
190+
if (Array.isArray(answer)) {
191191
answer = answer.join(', ')
192192
}
193193

‎package-lock.json‎

Lines changed: 4 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
{
22
"name": "@ditdot-dev/vue-flow-form",
3-
"version": "1.1.1",
3+
"author": "DITDOT",
4+
"description": "Create conversational conditional-logic forms with Vue.js.",
5+
"version": "1.1.6",
46
"private": false,
57
"description": "Create conversational conditional-logic forms with Vue.js.",
68
"author": "DITDOT",
@@ -17,6 +19,22 @@
1719
"files": [
1820
"dist"
1921
],
22+
"scripts": {
23+
"serve": "vue-cli-service serve",
24+
"build": "vue-cli-service build",
25+
"build:npm": "rollup --config build/rollup.config.js && npm run cssmin",
26+
"cssmin": "postcss dist/vue-flow-form.theme-minimal.css -o dist/vue-flow-form.theme-minimal.min.css && postcss dist/vue-flow-form.theme-green.css -o dist/vue-flow-form.theme-green.min.css && postcss dist/vue-flow-form.theme-purple.css -o dist/vue-flow-form.theme-purple.min.css",
27+
"build:examples": "vue-cli-service build --dest dist/questionnaire examples/questionnaire/main.js && vue-cli-service build --dest dist/quiz examples/quiz/main.js && vue-cli-service build --dest dist/support-page examples/support-page/main.js"
28+
},
29+
"eslintConfig": {
30+
"root": true,
31+
"extends": [
32+
"plugin:vue/essential"
33+
],
34+
"rules": {
35+
"no-unused-vars": "off"
36+
}
37+
},
2038
"dependencies": {
2139
"es6-object-assign": "^1.1.0",
2240
"vue": "^3.0.0-beta.1",

0 commit comments

Comments
 (0)