Skip to content

Commit de6ca12

Browse files
committed
Add link option
1 parent e5bc5a7 commit de6ca12

File tree

5 files changed

+53
-4
lines changed

5 files changed

+53
-4
lines changed

examples/questionnaire/Example.vue

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
7070
// Import necessary components and classes
7171
import FlowForm from '../../src/components/FlowForm.vue'
72-
import QuestionModel, { QuestionType, ChoiceOption } from '../../src/models/QuestionModel'
72+
import QuestionModel, { QuestionType, ChoiceOption, LinkOption } from '../../src/models/QuestionModel'
7373
import LanguageModel from '../../src/models/LanguageModel'
7474
// If using the npm package, use the following line instead of the ones above.
7575
// import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
@@ -90,6 +90,15 @@
9090
id: 'first_name',
9191
tagline: "Hi! Welcome to our demo survey 😊",
9292
title: 'What is your first name?',
93+
link: [
94+
new LinkOption({
95+
url: "https://www.ditdot.hr/",
96+
anchor: 'I am a DITDOT official page link',
97+
}),
98+
new LinkOption({
99+
url: "https://github.com/ditdot-dev/vue-flow-form",
100+
})
101+
],
93102
type: QuestionType.Text,
94103
required: true,
95104
placeholder: 'Start typing here...'

src/assets/css/common.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -326,6 +326,22 @@ span.f-answered{
326326
height: auto;
327327
}
328328

329+
/*links*/
330+
331+
.link a {
332+
display: inline-block;
333+
height: 1.5rem;
334+
margin-right: 10px;
335+
color: inherit;
336+
border-bottom: 1px solid;
337+
338+
}
339+
340+
.link a:hover {
341+
border-bottom: none;
342+
}
343+
344+
329345
/*typography*/
330346
li,
331347
p,

src/components/Question.vue

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,16 @@
4949
/>
5050
</div>
5151
</div>
52-
<p v-if="question.description" class="description">{{ question.description }}</p>
52+
<p v-if="question.description ||question.link" class="description">
53+
{{ question.description }}
54+
<span v-if="question.link">
55+
<span class="link"
56+
v-for="(link, index) in question.link"
57+
v-bind:key="'m' + index" v-html="link.formatLink()">
58+
</span>
59+
</span>
60+
</p>
61+
5362
</div>
5463
<div class="animate fade-in f-enter" v-if="showOkButton()">
5564
<button
@@ -85,7 +94,7 @@
8594
*/
8695
8796
import LanguageModel from '../models/LanguageModel'
88-
import QuestionModel, { QuestionType } from '../models/QuestionModel'
97+
import QuestionModel, { QuestionType, LinkOption } from '../models/QuestionModel'
8998
import FlowFormDropdownType from './QuestionTypes/DropdownType.vue'
9099
import FlowFormEmailType from './QuestionTypes/EmailType.vue'
91100
import FlowFormLongTextType from './QuestionTypes/LongTextType.vue'

src/main.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Import vue component
22
import FlowForm from './components/FlowForm.vue'
3-
import QuestionModel, { QuestionType, ChoiceOption } from './models/QuestionModel'
3+
import QuestionModel, { QuestionType, ChoiceOption, LinkOption } from './models/QuestionModel'
44
import LanguageModel from './models/LanguageModel'
55

66
// IE11 Object.assign polyfill
@@ -36,5 +36,6 @@ export {
3636
QuestionModel,
3737
QuestionType,
3838
ChoiceOption,
39+
LinkOption,
3940
LanguageModel
4041
}

src/models/QuestionModel.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,19 @@ export class ChoiceOption {
4747
}
4848
}
4949

50+
export class LinkOption {
51+
constructor(options) {
52+
this.url = ''
53+
this.anchor = 'Link'
54+
this.target = '_blank'
55+
56+
Object.assign(this, options)
57+
}
58+
formatLink() {
59+
return `<a href=${this.url} target=${this.target}>${this.anchor}</a>`
60+
}
61+
}
62+
5063
export default class QuestionModel {
5164
constructor(options) {
5265
this.id = null
@@ -72,6 +85,7 @@ export default class QuestionModel {
7285
this.content = null
7386
this.inline = false
7487
this.helpText = null
88+
this.link = []
7589

7690
Object.assign(this, options)
7791

0 commit comments

Comments
 (0)