Skip to content

Commit 863821a

Browse files
spinnspinn
committed
Fix SectionBreak issues
1 parent 4bb9c93 commit 863821a

File tree

9 files changed

+70
-96
lines changed

9 files changed

+70
-96
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ $ npm install -g @vue/cli
6565
$ yarn global add @vue/cli
6666
```
6767

68-
And then create a project (refer to [Vue CLI documentation](https://cli.vuejs.org/guide/) and [issue tracker](https://github.com/vuejs/vue-cli/issues) for potential problems on Windows):
68+
And then create a project (refer to [Vue CLI documentation](https://cli.vuejs.org/guide/) and [issue tracker](https://github.com/vuejs/vue-cli/issues) for potential problems on Windows):
6969

7070
```shell
7171
$ vue create my-project
@@ -103,7 +103,7 @@ And then in your App.vue file:
103103
questions: [
104104
// QuestioModel array
105105
new QuestionModel({
106-
question: 'Question',
106+
title: 'Question',
107107
type: QuestionType.MultipleChoice,
108108
options: [
109109
new ChoiceOption({
@@ -162,7 +162,7 @@ var app = new Vue({
162162
}),
163163
questions: [
164164
new FlowForm.QuestionModel({
165-
question: 'Question',
165+
title: 'Question',
166166
type: FlowForm.QuestionType.MultipleChoice,
167167
options: [
168168
new FlowForm.ChoiceOption({

‎babel.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module.exports = {
22
presets: [
3-
['@vue/app', {
3+
['@vue/app', {
44
useBuiltIns: "entry"
55
}]
66
]

‎examples/questionnaire/Example.vue‎

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -85,38 +85,38 @@
8585
questions: [
8686
new QuestionModel({
8787
id: 'first_name',
88-
title: "Hi! Welcome to our demo survey 😊",
89-
question: 'What is your first name?',
88+
tagline: "Hi! Welcome to our demo survey 😊",
89+
title: 'What is your first name?',
9090
type: QuestionType.Text,
9191
required: true,
9292
placeholder: 'Start typing here...'
9393
}),
9494
new QuestionModel({
9595
id: 'email',
96-
title: "Nice to meet you 👀, let's continue",
97-
question: "Provide an example email.",
96+
tagline: "Nice to meet you 👀, let's continue",
97+
title: "Provide an example email.",
9898
type: QuestionType.Email,
9999
required: true,
100100
placeholder: 'Start typing here...'
101101
}),
102102
new QuestionModel({
103103
id: 'phone',
104-
question: 'Doing great! 👍 Go ahead and try with a phone number.',
104+
title: 'Doing great! 👍 Go ahead and try with a phone number.',
105105
type: QuestionType.Phone,
106106
required: true,
107107
mask: '(###) ###-####'
108108
}),
109109
new QuestionModel({
110110
id: 'movies',
111-
question: 'List your favorite movies. 🍿',
111+
title: 'List your favorite movies. 🍿',
112112
type: QuestionType.LongText,
113113
required: true,
114114
placeholder: 'Start typing here...'
115115
}),
116116
new QuestionModel({
117117
id: 'multiple_choice',
118-
title: "FYI, You can always go back 👈, use the up arrow on the bottom.",
119-
question: 'Multiple choice question:',
118+
tagline: "FYI, You can always go back 👈, use the up arrow on the bottom.",
119+
title: 'Multiple choice question:',
120120
type: QuestionType.MultipleChoice,
121121
multiple: false,
122122
allowOther: true,
@@ -135,7 +135,7 @@
135135
}),
136136
new QuestionModel({
137137
id: 'multiple_choices',
138-
question: 'Multiple choices question:',
138+
title: 'Multiple choices question:',
139139
type: QuestionType.MultipleChoice,
140140
multiple: true,
141141
helpText: 'Select all that apply. 👇',
@@ -157,20 +157,15 @@
157157
}),
158158
new QuestionModel({
159159
id: 'break_1',
160-
/* eslint-disable-next-line no-unused-vars */
161-
content(h) {
162-
return <span>
163-
<span class="fh2">Awesome, thank you. 🙏</span>
164-
<span class="section-text">You arrived at the section break of our little demo survey. To continue exploring, just press enter or use the continue button.</span>
165-
</span>
166-
},
160+
title: 'Awesome, thank you. 🙏',
161+
content: 'You arrived at the section break of our little demo survey. To continue exploring, just press enter or use the continue button.',
167162
description: 'Note: We will take a look at our multiple path feature next.',
168163
type: QuestionType.SectionBreak
169164
}),
170165
new QuestionModel({
171166
id: 'choose_path',
172-
title: "Where would you like to go? 🤔",
173-
question: 'Choose your path:',
167+
tagline: "Where would you like to go? 🤔",
168+
title: 'Choose your path:',
174169
type: QuestionType.Dropdown,
175170
multiple: false,
176171
placeholder: 'Select',
@@ -191,22 +186,17 @@
191186
}),
192187
new QuestionModel({
193188
id: 'path_a',
194-
/* eslint-disable-next-line no-unused-vars */
195-
content(h) {
196-
return <span>
197-
<span class="fh2">Excellent choice! 🥳</span>
198-
<span class="section-text">Press enter or use the continue button for the final submit screen.</span>
199-
</span>
200-
},
189+
title: 'Excellent choice! 🥳',
190+
content: 'Press enter or use the continue button for the final submit screen.',
201191
type: QuestionType.SectionBreak,
202192
jump: {
203193
_other: '_submit'
204194
}
205195
}),
206196
new QuestionModel({
207197
id: 'path_b',
208-
title: "Path B",
209-
question: 'Hmm, are you sure?',
198+
tagline: "Path B",
199+
title: 'Hmm, are you sure?',
210200
subtitle: 'Path A sounds like a winner! 😉',
211201
type: QuestionType.MultipleChoice,
212202
multiple: false,
@@ -284,13 +274,13 @@
284274
}
285275
286276
this.questions.forEach(question => {
287-
if (question.question) {
277+
if (question.title) {
288278
let answer = question.answer
289279
if (typeof answer === 'object') {
290280
answer = answer.join(', ')
291281
}
292282
293-
data.questions.push(question.question)
283+
data.questions.push(question.title)
294284
data.answers.push(answer)
295285
}
296286
})

‎examples/quiz/Example.vue‎

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -95,20 +95,15 @@
9595
questions: [
9696
new QuestionModel({
9797
id: 'start',
98-
subtitle: '8 questions',
99-
/* eslint-disable-next-line no-unused-vars */
100-
content(h) {
101-
return <span>
102-
<span class="fh2">How much do you know about forms?</span>
103-
<span class="section-text">Test how well you know HTML forms in the first quiz section.</span>
104-
</span>
105-
},
98+
tagline: '8 questions',
99+
title: 'How much do you know about forms?',
100+
content: 'Test how well you know HTML forms in the first quiz section.',
106101
type: QuestionType.SectionBreak,
107102
required: true,
108103
}),
109104
new QuestionModel({
110105
id: 'html_1',
111-
question: "Which of the following are valid input field types? ",
106+
title: "Which of the following are valid input field types? ",
112107
helpText: 'Choose all answers that apply.',
113108
type: QuestionType.MultipleChoice,
114109
required: true,
@@ -134,7 +129,7 @@
134129
}),
135130
new QuestionModel({
136131
id: 'html_2',
137-
question: '<label> is associated with <input> using the "name" attribute.',
132+
title: '<label> is associated with <input> using the "name" attribute.',
138133
type: QuestionType.MultipleChoice,
139134
required: true,
140135
multiple: false,
@@ -151,7 +146,7 @@
151146
}),
152147
new QuestionModel({
153148
id: 'html_3',
154-
question: 'Which HTML element is used to define a dropdown list?',
149+
title: 'Which HTML element is used to define a dropdown list?',
155150
subtitle: "Which one sounds right? There's only one right answer.",
156151
type: QuestionType.MultipleChoice,
157152
required: true,
@@ -164,7 +159,7 @@
164159
new ChoiceOption({
165160
label: '<select>',
166161
value: '2'
167-
}),
162+
}),
168163
new ChoiceOption({
169164
label: '<fieldset>',
170165
value: '3'
@@ -177,7 +172,7 @@
177172
}),
178173
new QuestionModel({
179174
id: 'html_4',
180-
question: 'To which elements can :invalid pseudo class be applied?',
175+
title: 'To which elements can :invalid pseudo class be applied?',
181176
type: QuestionType.MultipleChoice,
182177
multiple: true,
183178
helpText: 'Select one or more correct answers.',
@@ -202,18 +197,13 @@
202197
]
203198
}),
204199
new QuestionModel({
205-
/* eslint-disable-next-line no-unused-vars */
206-
content(h) {
207-
return <span>
208-
<span class="fh2">Excellent! You are halfway through.</span>
209-
<span class="section-text">Form UX is important too. Test your form usability knowledge in the following section. </span>
210-
</span>
211-
},
200+
title: 'Excellent! You are halfway through.',
201+
content: 'Form UX is important too. Test your form usability knowledge in the following section.',
212202
type: QuestionType.SectionBreak
213203
}),
214204
new QuestionModel({
215205
id: 'ux_1',
216-
question: 'How to reduce the perceived complexity of the long form?',
206+
title: 'How to reduce the perceived complexity of the long form?',
217207
type: QuestionType.MultipleChoice,
218208
multiple: true,
219209
helpText: 'Select all that apply.',
@@ -239,7 +229,7 @@
239229
}),
240230
new QuestionModel({
241231
id: 'ux_2',
242-
question: 'Error messages are bad because they confuse users.',
232+
title: 'Error messages are bad because they confuse users.',
243233
type: QuestionType.MultipleChoice,
244234
multiple: false,
245235
required: true,
@@ -256,7 +246,7 @@
256246
}),
257247
new QuestionModel({
258248
id: 'ux_3',
259-
question: 'How to make the input format clear?',
249+
title: 'How to make the input format clear?',
260250
type: QuestionType.MultipleChoice,
261251
multiple: false,
262252
subtitle: 'Select one correct answer.',
@@ -282,7 +272,7 @@
282272
}),
283273
new QuestionModel({
284274
id: 'ux_4',
285-
question: 'Inline validation should have a real time feedback.',
275+
title: 'Inline validation should have a real time feedback.',
286276
type: QuestionType.MultipleChoice,
287277
multiple: false,
288278
required: true,
@@ -314,7 +304,7 @@
314304
315305
calculateScore() {
316306
this.questions.forEach(question => {
317-
if (question.question) {
307+
if (question.type !== QuestionType.SectionBreak) {
318308
let answer = question.answer
319309
if (typeof answer === 'object') {
320310
answer.sort((a, b) => a - b)

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@ditdot-dev/vue-flow-form",
33
"author": "DITDOT",
44
"description": "Create conversational conditional-logic forms with Vue.js.",
5-
"version": "1.0.7",
5+
"version": "1.0.8",
66
"private": false,
77
"repository": {
88
"type": "git",

‎src/assets/css/common.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ span.faux-form {
274274
margin-top: 28px;
275275
}
276276

277-
span.f-sub + .f-answer.full-width{
277+
span.f-sub + .f-answer.full-width, div.field-sectionbreaktype .f-answer {
278278
margin-top: 14px
279279
}
280280

‎src/components/Question.vue‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,30 @@
33
<template>
44
<div class="animate q-form" v-bind:class="mainClasses">
55
<div class="q-inner" ref="qinner">
6-
<div v-bind:class="{'section-wrap':question.type === QuestionType.SectionBreak}">
6+
<div v-bind:class="{'section-wrap': question.type === QuestionType.SectionBreak}">
77
<div v-bind:class="{'fh2': question.type !== QuestionType.SectionBreak}">
8-
<span class="f-title" v-if="question.title">{{ question.title }}</span>
9-
10-
<span class="f-text" v-if="question.question">
11-
{{ question.question }}&nbsp;
12-
<!-- Required questions are marked by an asterisk (*) -->
13-
<span class="f-required" v-if="question.required" v-bind:aria-label="language.ariaRequired" role="note"><span aria-hidden="true">*</span></span>
14-
15-
<span v-if="question.inline" class="f-answer">
16-
<component
17-
ref="questionComponent"
18-
v-bind:is="question.type"
19-
v-bind:question="question"
20-
v-bind:language="language"
21-
v-model="dataValue"
22-
v-bind:active="active"
23-
v-on:next="onEnter"
24-
/>
8+
<span class="f-title" v-if="question.tagline">{{ question.tagline }}</span>
9+
10+
<template v-if="question.title">
11+
<span class="fh2" v-if="question.type === QuestionType.SectionBreak">{{ question.title }}</span>
12+
<span class="f-text" v-else>
13+
{{ question.title }}&nbsp;
14+
<!-- Required questions are marked by an asterisk (*) -->
15+
<span class="f-required" v-if="question.required" v-bind:aria-label="language.ariaRequired" role="note"><span aria-hidden="true">*</span></span>
16+
17+
<span v-if="question.inline" class="f-answer">
18+
<component
19+
ref="questionComponent"
20+
v-bind:is="question.type"
21+
v-bind:question="question"
22+
v-bind:language="language"
23+
v-model="dataValue"
24+
v-bind:active="active"
25+
v-on:next="onEnter"
26+
/>
27+
</span>
2528
</span>
26-
</span>
29+
</template>
2730

2831
<span class="f-sub" v-if="question.subtitle || question.type === QuestionType.LongText || question.multiple">
2932
<span v-if="question.subtitle">{{ question.subtitle }}</span>
@@ -196,7 +199,7 @@
196199
'fade-in-up': !this.reverse
197200
}
198201
199-
classes['field-' + this.question.type.toLowerCase()] = true
202+
classes['field-' + this.question.type.toLowerCase().substring(8)] = true
200203
201204
return classes
202205
}

‎src/components/QuestionTypes/SectionBreakType.vue‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
<template>
2+
<div class="f-content" v-if="question.content">
3+
<span class="section-text">{{ question.content }}</span>
4+
</div>
5+
</template>
6+
17
<script>
28
/*
39
Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
@@ -11,21 +17,6 @@
1117
export default {
1218
extends: BaseType,
1319
name: QuestionType.SectionBreak,
14-
render(h) {
15-
if (typeof this.question.content === 'function') {
16-
const c = this.question.content(h)
17-
18-
return <div class="f-content">
19-
{c}
20-
</div>
21-
}
22-
23-
if (this.question.content) {
24-
return <div domPropsInnerHTML={this.question.content} class="f-content"></div>
25-
}
26-
27-
return '<div>a</div>'
28-
},
2920
methods: {
3021
isValid() {
3122
return true

0 commit comments

Comments
 (0)