Merge pull request #138 from ditdot-dev/feature/no-ok-button

Feature/no ok button

Author: phre1

examples/questionnaire/Example.vue

@@ -126,6 +126,7 @@
             multiple: false,
             allowOther: true,
             required: true,
+            nextStepOnAnswer: true,
             options: [
               new ChoiceOption({
                 label: 'Answer 1'

examples/quiz/Example.vue

@@ -145,6 +145,7 @@
             type: QuestionType.MultipleChoice,
             required: true,
             multiple: false, 
+            nextStepOnAnswer: true,
              options: [
               new ChoiceOption({
                 label: 'True', 
@@ -163,6 +164,7 @@
             type: QuestionType.MultipleChoice,
             required: true,
             multiple: false, 
+            nextStepOnAnswer: true,
             options: [
               new ChoiceOption({
                 label: '<form>', 
@@ -246,6 +248,7 @@
             type: QuestionType.MultipleChoice,
             multiple: false,
             required: true,
+            nextStepOnAnswer: true,
             options: [
               new ChoiceOption({
                 label: 'True', 
@@ -264,6 +267,7 @@
             multiple: false,
             helpText: 'Select one correct answer.',
             required: true,
+            nextStepOnAnswer: true,
             options: [
               new ChoiceOption({
                 label: 'Add progress bar to the form', 
@@ -290,6 +294,7 @@
             type: QuestionType.MultipleChoice,
             multiple: false,
             required: true,
+            nextStepOnAnswer: true,
             options: [
               new ChoiceOption({
                 label: 'True', 

src/assets/css/common.css

@@ -584,7 +584,7 @@ header.vff-header svg.f-logo {
 }
 
 .vff ul.f-radios li {
-  padding: .58em .68em;
+  padding: .6em .68em;
   margin: .5em 0 .6em;
   font-weight: 300;
   line-height: 1.24;

src/components/Question.vue

@@ -220,6 +220,14 @@
           return this.active
         }
 
+        if (this.question.allowOther && this.question.other) {
+          return true
+        }
+
+        if (QuestionType.MultipleChoice && !this.question.multiple && this.question.nextStepOnAnswer) {
+          return false
+        }
+      
         if (!q || !this.dataValue) {
           return false
         }

src/components/QuestionTypes/BaseType.vue

@@ -31,7 +31,7 @@
         allowedChars: null,
         alwaysAllowedKeys: ['ArrowLeft', 'ArrowRight', 'Delete', 'Backspace'],
         focused: false,
-        canReceiveFocus: false,
+        canReceiveFocus: false
       }
     },
     mounted() {
@@ -166,6 +166,11 @@
             return v.trim().length > 0
           }
 
+          if (Array.isArray(v)) {
+            // Don't allow empty arrays
+            return v.length > 0
+          }
+
           // All other non-null values are allowed to pass through
           return true
         }

src/components/QuestionTypes/MultipleChoiceType.vue

@@ -54,21 +54,25 @@
   export default {
     extends: BaseType,
     name: QuestionType.MultipleChoice,
+
     data() {
       return {
         editingOther: false
       }
     },
+
     mounted() {
       if (this.question.multiple) {
         this.dataValue = []
       }
 
       this.addKeyListener()
     },
+
     beforeDestroy() {
       this.removeKeyListener()
     },
+
     watch: {
       active(value) {
         if (value) {
@@ -82,6 +86,7 @@
         }
       }
     },
+    
     methods: {
       addKeyListener() {
         this.removeKeyListener()
@@ -162,8 +167,12 @@
         } else {
           this.dataValue = option.selected ? option.choiceValue() : null
         }
-
+      
         this.setAnswer(this.dataValue)
+        
+        if (this.isValid() && this.question.nextStepOnAnswer && !this.question.multiple) {
+          setTimeout(() => this.$emit('next'), 350)
+        }
       },
 
       _removeAnswer(value) {

src/models/QuestionModel.js

@@ -93,6 +93,7 @@ export default class QuestionModel {
     this.descriptionLink = []
     this.min = null
     this.max = null
+    this.nextStepOnAnswer = false
 
     Object.assign(this, options)