Update examples (add ESLint rules and npm instructions)

Author: spinn

examples/questionnaire/Example.vue

@@ -68,6 +68,8 @@
   import FlowForm from '../../src/components/FlowForm.vue'
   import QuestionModel, { QuestionType, ChoiceOption } 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'
 
   export default {
     name: 'example',
@@ -155,6 +157,7 @@
           }),
           new QuestionModel({
             id: 'break_1',
+            /* eslint-disable-next-line no-unused-vars */
             content(h) {
               return <span>
                 <span class="fh2">Awesome, thank you. 🙏</span>
@@ -188,6 +191,7 @@
           }),
            new QuestionModel({
             id: 'path_a',
+            /* eslint-disable-next-line no-unused-vars */
             content(h) {
               return <span>
                 <span class="fh2">Excellent choice! 🥳</span>
@@ -242,11 +246,13 @@
         }
       },
 
+      /* eslint-disable-next-line no-unused-vars */
       onComplete(completed, questionList) {
         // This method is called whenever the "completed" status is changed.
         this.completed = completed
       },
 
+      /* eslint-disable-next-line no-unused-vars */
       onSubmit(questionList) {
         // This method will only be called if you don't override the
         // completeButton slot.
@@ -256,6 +262,7 @@
       onSendData() {
         this.submitted = true
 
+        /* eslint-disable-next-line no-unused-vars */
         const data = this.getData()
         /*
           You can use Fetch API to send the data to your server, eg.:
@@ -296,4 +303,7 @@
 
 <style lang="css">
   @import './branding.css';
+  /* If using the npm package, use the following lines instead of the one above */
+  /* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.css'; */
+  /* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme.css'; */
 </style>

examples/quiz/Example.vue

@@ -66,6 +66,8 @@
   import FlowForm from '../../src/components/FlowForm.vue'
   import QuestionModel, { QuestionType, ChoiceOption} 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'
 
   export default {
     name: 'example',
@@ -94,6 +96,7 @@
           new QuestionModel({
             id: 'start',
             subtitle: '8 questions',
+            /* eslint-disable-next-line no-unused-vars */
             content(h) {
               return <span>
                 <span class="fh2">How much do you know about forms?</span>
@@ -199,6 +202,7 @@
             ]
           }),
           new QuestionModel({
+            /* eslint-disable-next-line no-unused-vars */
             content(h) {
               return <span>
                 <span class="fh2">Excellent! You are halfway through.</span>
@@ -297,14 +301,15 @@
       }
     },
     methods: {
+      /* eslint-disable-next-line no-unused-vars */
       onComplete(completed, questionList) {
         // This method is called whenever the "completed" status is changed.
         this.completed = completed
       },
 
       arrayEquals(a, b) {
-        return Array.isArray(a) &&Array.isArray(b) && a.length === b.length &&
-               a.every((val, index) => val === b[index])
+        return Array.isArray(a) && Array.isArray(b) && a.length === b.length &&
+          a.every((val, index) => val === b[index])
       },
 
       calculateScore() {
@@ -335,4 +340,7 @@
 
 <style lang="css">
   @import './branding.css';
+  /* If using the npm package, use the following lines instead of the one above */
+  /* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.css'; */
+  /* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme.css'; */
 </style>