Fix npm package and update README.md

Author: spinn

README.md

@@ -85,8 +85,7 @@ And then in your App.vue file:
 
 <script>
   // Import necessary components and classes
-  import FlowForm from 'vue-flow-form/src/components/FlowForm'
-  import QuestionModel, { QuestionType, ChoiceOption } from 'vue-flow-form/src/models/QuestionModel'
+  import FlowForm, { QuestionModel, QuestionType, ChoiceOption } from '@ditdot-dev/vue-flow-form'
 
   export default {
     name: 'example',
@@ -111,6 +110,12 @@ And then in your App.vue file:
     }
   }
 </script>
+<style>
+  /* Import Vue Flow Form base CSS */
+  @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.css';
+  /* Import Vue Flow Form theme CSS (optional) */
+  @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme.css';
+</style>
 ```
 
 ## JavaScript via CDN
@@ -144,11 +149,11 @@ var app = new Vue({
   data: function() {
     return {
       questions: [
-        new FlowForm.default.QuestionModel({
+        new FlowForm.QuestionModel({
           question: '...',
-          type: FlowForm.default.QuestionType.MultipleChoice,
+          type: FlowForm.QuestionType.MultipleChoice,
           options: [
-            new FlowForm.default.ChoiceOption({
+            new FlowForm.ChoiceOption({
               label: '...'
             })
           ]

package.json

@@ -2,7 +2,7 @@
   "name": "@ditdot-dev/vue-flow-form",
   "author": "DITDOT",
   "description": "Create conversational conditional-logic forms with Vue.js.",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "private": false,
   "repository": {
     "type": "git",

src/components/QuestionTypes/MultipleChoiceType.vue

@@ -6,7 +6,7 @@
         v-on:click="toggleAnswer(option)"
         v-bind:class="{'f-selected': option.selected}"
         v-bind:key="'m' + index"
-        v-bind:aria-label="language.ariaMultipleChoice|replace(':letter', getToggleKey(index))"
+        v-bind:aria-label="getLabel(index)"
         role="option"
       >
         <span class="f-key">{{ getToggleKey(index) }}</span>
@@ -116,6 +116,10 @@
         }
       },
 
+      getLabel(index) {
+        return this.language.ariaMultipleChoice.replace(':letter', this.getToggleKey(index))
+      },
+
       getToggleKey(index) {
         const key = 65 + index
 

src/main.js

@@ -26,8 +26,9 @@ if (GlobalVue) {
 }
 
 // To allow use as module (npm/webpack/etc.) export component
-export default {
-  FlowForm,
+export default FlowForm
+
+export {
   QuestionModel,
   QuestionType,
   ChoiceOption