Add link option

Author: EkaterinaVu

examples/questionnaire/Example.vue

@@ -69,7 +69,7 @@
 
   // Import necessary components and classes
   import FlowForm from '../../src/components/FlowForm.vue'
-  import QuestionModel, { QuestionType, ChoiceOption } from '../../src/models/QuestionModel'
+  import QuestionModel, { QuestionType, ChoiceOption, LinkOption } from '../../src/models/QuestionModel'
   import LanguageModel from '../../src/models/LanguageModel'
   // If using the npm package, use the following line instead of the ones above.
   // import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
@@ -90,6 +90,15 @@
             id: 'first_name',
             tagline: "Hi! Welcome to our demo survey 😊",
             title: 'What is your first name?',
+            link: [
+              new LinkOption({
+                url: "https://www.ditdot.hr/",
+                anchor: 'I am a DITDOT official page link', 
+              }), 
+              new LinkOption({
+                url: "https://github.com/ditdot-dev/vue-flow-form", 
+              })
+            ],
             type: QuestionType.Text,
             required: true,
             placeholder: 'Start typing here...'

src/assets/css/common.css

@@ -326,6 +326,22 @@ span.f-answered{
   height: auto;
 }
 
+/*links*/
+
+.link a {
+  display: inline-block;
+  height: 1.5rem;
+  margin-right: 10px;
+  color: inherit;
+  border-bottom: 1px solid;
+  
+}
+
+.link a:hover {
+ border-bottom: none;
+}
+
+
 /*typography*/
 li,
 p,

src/components/Question.vue

@@ -49,7 +49,16 @@
             />
           </div>
         </div>
-        <p v-if="question.description" class="description">{{ question.description }}</p>
+        <p v-if="question.description ||question.link" class="description">
+          {{ question.description }}
+          <span v-if="question.link">
+            <span class="link"
+            v-for="(link, index) in question.link" 
+            v-bind:key="'m' + index" v-html="link.formatLink()">
+            </span>
+          </span>
+        </p>
+
       </div>
       <div class="animate fade-in f-enter" v-if="showOkButton()">
         <button 
@@ -85,7 +94,7 @@
   */
 
   import LanguageModel from '../models/LanguageModel'
-  import QuestionModel, { QuestionType } from '../models/QuestionModel'
+  import QuestionModel, { QuestionType, LinkOption } from '../models/QuestionModel'
   import FlowFormDropdownType from './QuestionTypes/DropdownType.vue'
   import FlowFormEmailType from './QuestionTypes/EmailType.vue'
   import FlowFormLongTextType from './QuestionTypes/LongTextType.vue'

src/main.js

@@ -1,6 +1,6 @@
 // Import vue component
 import FlowForm from './components/FlowForm.vue'
-import QuestionModel, { QuestionType, ChoiceOption } from './models/QuestionModel'
+import QuestionModel, { QuestionType, ChoiceOption, LinkOption } from './models/QuestionModel'
 import LanguageModel from './models/LanguageModel'
 
 // IE11 Object.assign polyfill
@@ -36,5 +36,6 @@ export {
   QuestionModel,
   QuestionType,
   ChoiceOption,
+  LinkOption,
   LanguageModel
 }

src/models/QuestionModel.js

@@ -47,6 +47,19 @@ export class ChoiceOption {
   }
 }
 
+export class LinkOption {
+  constructor(options) {
+    this.url = ''
+    this.anchor = 'Link'
+    this.target = '_blank'
+
+    Object.assign(this, options)
+  }
+  formatLink() {
+    return `<a href=${this.url} target=${this.target}>${this.anchor}</a>`
+  }
+}
+
 export default class QuestionModel {
   constructor(options) {
     this.id = null
@@ -72,6 +85,7 @@ export default class QuestionModel {
     this.content = null
     this.inline = false
     this.helpText = null
+    this.link = []
 
     Object.assign(this, options)