Merge pull request #113 from ditdot-dev/disable-progress-bar

Disable progress bar option

Author: phre1

examples/questionnaire/Example.vue

@@ -120,9 +120,9 @@
             id: 'multiple_choice',
             tagline: "FYI, You can always go back 👈, use the up arrow on the bottom.",
             title: 'Multiple choice question:',
+            helpTextShow: false,
             type: QuestionType.MultipleChoice,
             multiple: false,
-            helpText: ' ',
             allowOther: true,
             required: true,
             options: [

examples/quiz/Example.vue

@@ -134,6 +134,7 @@
           new QuestionModel({
             id: 'html_2',
             title: '<label> is associated with <input> using the "name" attribute.',
+            helpTextShow: false,
             type: QuestionType.MultipleChoice,
             required: true,
             multiple: false, 
@@ -234,7 +235,7 @@
           new QuestionModel({
             id: 'ux_2',
             title: 'Error messages are bad because they confuse users.',
-            helpText: ' ',
+            helpTextShow: false,
             type: QuestionType.MultipleChoice,
             multiple: false,
             required: true,
@@ -278,7 +279,7 @@
           new QuestionModel({
             id: 'ux_4',
             title: 'Inline validation should have a real time feedback.',
-            helpText: ' ',
+            helpTextShow: false,
             type: QuestionType.MultipleChoice,
             multiple: false,
             required: true,

src/components/FlowForm.vue

@@ -53,7 +53,7 @@
 
     <div class="f-footer">
       <div class="footer-inner-wrap">
-        <div class="f-progress" v-bind:class="{'not-started': percentCompleted === 0, 'completed': percentCompleted === 100}">
+        <div v-if="progressbar" class="f-progress" v-bind:class="{'not-started': percentCompleted === 0, 'completed': percentCompleted === 100}">
           <div class="f-progress-bar">
             <div class="f-progress-bar-inner" v-bind:style="'width: ' + percentCompleted + '%;'"></div>
           </div>
@@ -136,6 +136,10 @@
       language: {
         type: LanguageModel,
         default: () => new LanguageModel()
+      },
+      progressbar: {
+        type: Boolean, 
+        default: true
       }
     },
     data() {

src/components/Question.vue

@@ -28,7 +28,7 @@
             </span>
           </template>
 
-          <span class="f-sub" v-if="question.subtitle || question.type === QuestionType.LongText || question.type === QuestionType.MultipleChoice">
+          <span class="f-sub" v-if="showHelperText">
             <span v-if="question.subtitle">{{ question.subtitle }}</span>
 
             <span class="f-help" v-if="question.type === QuestionType.LongText && !isMobile" v-html="question.helpText || language.formatString(language.longTextHelpText)"></span>
@@ -240,6 +240,16 @@
         classes['field-' + this.question.type.toLowerCase().substring(8)] = true
 
         return classes
+      },
+
+      showHelperText() {
+        if (this.question.subtitle) {
+          return true
+        }
+        if (this.question.type === QuestionType.LongText || this.question.type === QuestionType.MultipleChoice) {
+          return this.question.helpTextShow
+        }
+        return false
       }
     }
   }

src/models/QuestionModel.js

@@ -72,6 +72,7 @@ export default class QuestionModel {
     this.content = null
     this.inline = false
     this.helpText = null
+    this.helpTextShow = true;
 
     Object.assign(this, options)