Upgrade webpack, remove service worker, other small optimizations

WebConfigGenerator/src/App.vue

@@ -2,15 +2,15 @@
     <div id="app">
         <div class="head">
             <a href="#" class="logo">
-                <img src="static/logo.png" alt="asf logo">
+                <img src="./assets/logo.png" alt="asf logo">
             </a>
             <h1 class="text-center" v-html="$t('app.name')"></h1>
         </div>
         <div class="menu">
             <ul>
-                <li><a href="#" :class="{ active: $route.path === '/' }" v-html="$t('link.home')"></a></li>
-                <li><a href="#asf" :class="{ active: $route.path === '/asf' }" v-html="$t('link.asf')"></a></li>
-                <li><a href="#bot" :class="{ active: $route.path === '/bot' }" v-html="$t('link.bot')"></a></li>
+                <li><router-link :to="{ name: 'home' }" active-class="active" v-html="$t('link.home')" exact></router-link></li>
+                <li><router-link :to="{ name: 'asf-config' }" active-class="active" v-html="$t('link.asf')"></router-link></li>
+                <li><router-link :to="{ name: 'bot-config' }" active-class="active" v-html="$t('link.bot')"></router-link></li>
             </ul>
         </div>
 

WebConfigGenerator/src/app.js

@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+
+import App from './App.vue';
+import i18nSettings from './i18n.js';
+import router from './router.js';
+
+Vue.use(VueI18n);
+const i18n = new VueI18n(i18nSettings);
+
+new Vue({
+    el: '#app',
+    router,
+    i18n,
+    template: '<App/>',
+    components: { App }
+});

WebConfigGenerator/src/components/ASFConfig.vue

@@ -24,25 +24,25 @@
 </template>
 
 <script>
-    import { each } from 'lodash';
-    import Config from './mixin/Config.vue';
+  import { each } from 'lodash';
+  import Config from './mixin/Config.vue';
 
-    export default {
-        name: 'ASFConfig',
-        mixins: [Config],
-        data() { return { type: 'asf', filename: 'ASF.json' }; },
-        methods: {
-            processModelToJSON(model) {
-                if (model.Blacklist && model.Blacklist.length) {
-                    model.Blacklist = model.Blacklist.map(item => parseInt(item, 10)).filter(item => !isNaN(item) && item > 0);
-                }
-
-                each(model, (value, key) => {
-                    if (typeof value === 'string' && value === '') delete model[key];
-                });
-
-                return model;
-            }
+  export default {
+    name: 'ASFConfig',
+    mixins: [Config],
+    data() { return { type: 'asf', filename: 'ASF.json' }; },
+    methods: {
+      processModelToJSON(model) {
+        if (model.Blacklist && model.Blacklist.length) {
+          model.Blacklist = model.Blacklist.map(item => parseInt(item, 10)).filter(item => !isNaN(item) && item > 0);
         }
-    };
+
+        each(model, (value, key) => {
+          if (typeof value === 'string' && value === '') delete model[key];
+        });
+
+        return model;
+      }
+    }
+  };
 </script>

WebConfigGenerator/src/components/BotConfig.vue

@@ -24,30 +24,30 @@
 </template>
 
 <script>
-    import { each } from 'lodash';
-    import Config from './mixin/Config.vue';
+  import { each } from 'lodash';
+  import Config from './mixin/Config.vue';
 
-    export default {
-        name: 'BotConfig',
-        mixins: [Config],
-        data() { return { type: 'bot' }; },
-        computed: { filename() { return `${this.model.name}.json`; } },
-        methods: {
-            processModelToJSON(originalModel) {
-                const model = { ...originalModel }; // Need to clone that so we don't destroy `model.name`
+  export default {
+    name: 'BotConfig',
+    mixins: [Config],
+    data() { return { type: 'bot' }; },
+    computed: { filename() { return `${this.model.name}.json`; } },
+    methods: {
+      processModelToJSON(originalModel) {
+        const model = { ...originalModel }; // Need to clone that so we don't destroy `model.name`
 
-                if (model.GamesPlayedWhileIdle && model.GamesPlayedWhileIdle.length) {
-                    model.GamesPlayedWhileIdle = model.GamesPlayedWhileIdle.map(value => parseInt(value, 10)).filter(value => !isNaN(value) && value > 0);
-                }
-
-                each(model, (value, key) => {
-                    if (typeof value === 'string' && value === '') delete model[key];
-                });
-
-                if (model.name) delete model.name;
-
-                return model;
-            }
+        if (model.GamesPlayedWhileIdle && model.GamesPlayedWhileIdle.length) {
+          model.GamesPlayedWhileIdle = model.GamesPlayedWhileIdle.map(value => parseInt(value, 10)).filter(value => !isNaN(value) && value > 0);
         }
-    };
+
+        each(model, (value, key) => {
+          if (typeof value === 'string' && value === '') delete model[key];
+        });
+
+        if (model.name) delete model.name;
+
+        return model;
+      }
+    }
+  };
 </script>

WebConfigGenerator/src/components/Home.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script>
-    export default {};
+  export default {};
 </script>
 
-<style>
+<style lang="scss">
     .text-justify {
         text-align: justify;
     }

WebConfigGenerator/src/components/fields/CheckboxGroup.vue

@@ -9,10 +9,10 @@
 </template>
 
 <script>
-    import Input from '../mixin/Input.vue';
+  import Input from '../mixin/Input.vue';
 
-    export default {
-        mixins: [Input],
-        name: 'CheckboxGroup'
-    };
+  export default {
+    mixins: [Input],
+    name: 'CheckboxGroup'
+  };
 </script>

WebConfigGenerator/src/components/fields/InputCheckbox.vue

@@ -10,12 +10,12 @@
 </template>
 
 <script>
-    import Input from '../mixin/Input.vue';
+  import Input from '../mixin/Input.vue';
 
-    export default {
-        mixins: [Input],
-        name: 'InputCheckbox'
-    };
+  export default {
+    mixins: [Input],
+    name: 'InputCheckbox'
+  };
 </script>
 
 <style lang="scss">

WebConfigGenerator/src/components/fields/InputFlag.vue

@@ -16,7 +16,7 @@
             </div>
             <div class="col col-2">
                 <div class="form-input">
-                    <button class="button outline w100" @click.prevent="addElement">{{ $t("static.add") }}</button>
+                    <button class="button outline w100" @click.prevent="addElement">{{ $t('static.add') }}</button>
                 </div>
             </div>
         </div>
@@ -28,39 +28,39 @@
 </template>
 
 <script>
-    import Input from '../mixin/Input.vue';
+  import Input from '../mixin/Input.vue';
 
-    export default {
-        mixins: [Input],
-        name: 'InputFlag',
-        data() {
-            return {
-                items: [], // Vue doesn't work well with Sets...
-                flagValue: this.schema.defaultValue
-            };
-        },
-        methods: {
-            addElement() {
-                if (!this.flagValue && this.flagValue !== 0) return;
-                if (!this.items.includes(this.flagValue)) this.items.push(this.flagValue);
-                this.flagValue = this.schema.defaultValue;
-                this.value = this.items.reduce((el, sum) => { return el + sum; });
-            },
-            removeElement(index) {
-                this.items.splice(index, 1);
-                this.value = this.items.reduce((el, sum) => { return el + sum; });
-            },
-            resolveOption(toResolve, options) {
-                if (!options) return toResolve;
+  export default {
+    mixins: [Input],
+    name: 'InputFlag',
+    data() {
+      return {
+        items: [], // Vue doesn't work well with Sets...
+        flagValue: this.schema.defaultValue
+      };
+    },
+    methods: {
+      addElement() {
+        if (!this.flagValue && this.flagValue !== 0) return;
+        if (!this.items.includes(this.flagValue)) this.items.push(this.flagValue);
+        this.flagValue = this.schema.defaultValue;
+        this.value = this.items.reduce((el, sum) => { return el + sum; });
+      },
+      removeElement(index) {
+        this.items.splice(index, 1);
+        this.value = this.items.reduce((el, sum) => { return el + sum; });
+      },
+      resolveOption(toResolve, options) {
+        if (!options) return toResolve;
 
-                options.forEach(({ value, name }) => {
-                    if (toResolve === value) toResolve = name;
-                });
+        options.forEach(({ value, name }) => {
+          if (toResolve === value) toResolve = name;
+        });
 
-                return toResolve;
-            }
-        }
-    };
+        return toResolve;
+      }
+    }
+  };
 </script>
 
 <style lang="scss">

WebConfigGenerator/src/components/fields/InputMap.vue

@@ -27,7 +27,7 @@
             </div>
             <div class="col col-2">
                 <div class="form-input">
-                    <button class="button outline w100" @click.prevent="addElement">{{ $t("static.add") }}</button>
+                    <button class="button outline w100" @click.prevent="addElement">{{ $t('static.add') }}</button>
                 </div>
             </div>
         </div>
@@ -40,75 +40,75 @@
 </template>
 
 <script>
-    import { each } from 'lodash';
-    import Input from '../mixin/Input.vue';
+  import { each } from 'lodash';
+  import Input from '../mixin/Input.vue';
 
-    export default {
-        mixins: [Input],
-        name: 'InputMap',
-        computed: {
-            keyErrors() {
-                if (!this.schema.keyValidator) return [];
-                return this.validate(this.mapKey, this.schema.keyValidator);
-            },
-            keyInvalid() {
-                return this.keyErrors.length !== 0;
-            },
-            valueErrors() {
-                if (!this.schema.valueValidator) return [];
-                return this.validate(this.mapValue, this.schema.valueValidator);
-            },
-            valueInvalid() {
-                return this.valueErrors.length !== 0;
-            }
-        },
-        data() {
-            return {
-                items: {}, // Vue doesn't work well with Maps...
-                mapKey: this.schema.defaultKey,
-                mapValue: this.schema.defaultValue
-            };
-        },
-        methods: {
-            addElement() {
-                if (!this.mapValue && this.mapValue !== 0 || !this.mapKey && this.mapKey !== 0) return;
+  export default {
+    mixins: [Input],
+    name: 'InputMap',
+    computed: {
+      keyErrors() {
+        if (!this.schema.keyValidator) return [];
+        return this.validate(this.mapKey, this.schema.keyValidator);
+      },
+      keyInvalid() {
+        return this.keyErrors.length !== 0;
+      },
+      valueErrors() {
+        if (!this.schema.valueValidator) return [];
+        return this.validate(this.mapValue, this.schema.valueValidator);
+      },
+      valueInvalid() {
+        return this.valueErrors.length !== 0;
+      }
+    },
+    data() {
+      return {
+        items: {}, // Vue doesn't work well with Maps...
+        mapKey: this.schema.defaultKey,
+        mapValue: this.schema.defaultValue
+      };
+    },
+    methods: {
+      addElement() {
+        if (!this.mapValue && this.mapValue !== 0 || !this.mapKey && this.mapKey !== 0) return;
 
-                if (this.hasErrors()) return;
+        if (this.hasErrors()) return;
 
-                this.items[this.mapKey] = this.mapValue;
-                this.mapValue = this.schema.defaultValue;
-                this.mapKey = this.schema.defaultKey;
-                this.$emit('update', this.items, this.schema.field);
-            },
-            removeElement(key) {
-                this.$delete(this.items, key);
-                this.$emit('update', this.items, this.schema.field);
-            },
-            resolveOption(toResolve, options) {
-                if (!options) return toResolve;
+        this.items[this.mapKey] = this.mapValue;
+        this.mapValue = this.schema.defaultValue;
+        this.mapKey = this.schema.defaultKey;
+        this.$emit('update', this.items, this.schema.field);
+      },
+      removeElement(key) {
+        this.$delete(this.items, key);
+        this.$emit('update', this.items, this.schema.field);
+      },
+      resolveOption(toResolve, options) {
+        if (!options) return toResolve;
 
-                options.forEach(({ value, name }) => {
-                    if (toResolve === value) toResolve = name;
-                });
+        options.forEach(({ value, name }) => {
+          if (toResolve === value) toResolve = name;
+        });
 
-                return toResolve;
-            },
-            hasErrors() {
-                const invalid = this.keyInvalid || this.valueInvalid;
-                if (!invalid) return false;
+        return toResolve;
+      },
+      hasErrors() {
+        const invalid = this.keyInvalid || this.valueInvalid;
+        if (!invalid) return false;
 
-                const fields = [];
-                if (this.keyInvalid) each(this.$el.getElementsByClassName('map-key'), field => fields.push(field));
-                if (this.valueInvalid) each(this.$el.getElementsByClassName('map-value'), field => fields.push(field));
+        const fields = [];
+        if (this.keyInvalid) each(this.$el.getElementsByClassName('map-key'), field => fields.push(field));
+        if (this.valueInvalid) each(this.$el.getElementsByClassName('map-value'), field => fields.push(field));
 
-                clearTimeout(this.shakeTimeout);
-                each(fields, field => { field.classList.add('shake'); });
-                this.shakeTimeout = setTimeout(() => { each(fields, field => { field.classList.remove('shake'); }); }, 500);
+        clearTimeout(this.shakeTimeout);
+        each(fields, field => { field.classList.add('shake'); });
+        this.shakeTimeout = setTimeout(() => { each(fields, field => { field.classList.remove('shake'); }); }, 500);
 
-                return true;
-            }
-        }
-    };
+        return true;
+      }
+    }
+  };
 </script>
 
 <style lang="scss">

WebConfigGenerator/src/components/fields/InputNumber.vue

@@ -12,21 +12,21 @@
 </template>
 
 <script>
-    import Input from '../mixin/Input.vue';
+  import Input from '../mixin/Input.vue';
 
-    export default {
-        mixins: [Input],
-        name: 'InputNumber',
-        computed: {
-            errors() {
-                return this.validate(this.value);
-            },
-            valid() {
-                return this.errors.length === 0;
-            },
-            invalid() {
-                return this.errors.length !== 0;
-            }
-        }
-    };
+  export default {
+    mixins: [Input],
+    name: 'InputNumber',
+    computed: {
+      errors() {
+        return this.validate(this.value);
+      },
+      valid() {
+        return this.errors.length === 0;
+      },
+      invalid() {
+        return this.errors.length !== 0;
+      }
+    }
+  };
 </script>

WebConfigGenerator/src/components/fields/InputPassword.vue

@@ -11,21 +11,21 @@
 </template>
 
 <script>
-    import Input from '../mixin/Input.vue';
+  import Input from '../mixin/Input.vue';
 
-    export default {
-        mixins: [Input],
-        name: 'InputPassword',
-        computed: {
-            errors() {
-                return this.validate(this.value);
-            },
-            valid() {
-                return this.errors.length === 0;
-            },
-            invalid() {
-                return this.errors.length !== 0;
-            }
-        }
-    };
+  export default {
+    mixins: [Input],
+    name: 'InputPassword',
+    computed: {
+      errors() {
+        return this.validate(this.value);
+      },
+      valid() {
+        return this.errors.length === 0;
+      },
+      invalid() {
+        return this.errors.length !== 0;
+      }
+    }
+  };
 </script>

WebConfigGenerator/src/components/fields/InputSelect.vue

@@ -12,10 +12,10 @@
 </template>
 
 <script>
-    import Input from '../mixin/Input.vue';
+  import Input from '../mixin/Input.vue';
 
-    export default {
-        mixins: [Input],
-        name: 'InputSelect'
-    };
+  export default {
+    mixins: [Input],
+    name: 'InputSelect'
+  };
 </script>

WebConfigGenerator/src/components/fields/InputSet.vue

@@ -19,7 +19,7 @@
             </div>
             <div class="col col-2">
                 <div class="form-input">
-                    <button class="button outline w100" @click.prevent="addElement">{{ $t("static.add") }}</button>
+                    <button class="button outline w100" @click.prevent="addElement">{{ $t('static.add') }}</button>
                 </div>
             </div>
         </div>
@@ -31,61 +31,61 @@
 </template>
 
 <script>
-    import { each } from 'lodash';
-    import Input from '../mixin/Input.vue';
+  import { each } from 'lodash';
+  import Input from '../mixin/Input.vue';
 
-    export default {
-        mixins: [Input],
-        name: 'InputSet',
-        computed: {
-            errors() {
-                return this.schema.values ? [] : this.validate(this.setValue);
-            },
-            invalid() {
-                return this.errors.length !== 0;
-            }
-        },
-        data() {
-            return {
-                items: [], // Vue doesn't work well with Sets...
-                setValue: this.schema.defaultValue
-            };
-        },
-        methods: {
-            addElement() {
-                if (!this.setValue && this.setValue !== 0) return;
-                if (this.hasErrors()) return;
-                if (!this.items.includes(this.setValue)) this.items.push(this.setValue);
-                this.setValue = this.schema.defaultValue;
-                this.$emit('update', this.items, this.schema.field);
-            },
-            removeElement(index) {
-                this.items.splice(index, 1);
-                this.$emit('update', this.items, this.schema.field);
-            },
-            resolveOption(toResolve, options) {
-                if (!options) return toResolve;
+  export default {
+    mixins: [Input],
+    name: 'InputSet',
+    computed: {
+      errors() {
+        return this.schema.values ? [] : this.validate(this.setValue);
+      },
+      invalid() {
+        return this.errors.length !== 0;
+      }
+    },
+    data() {
+      return {
+        items: [], // Vue doesn't work well with Sets...
+        setValue: this.schema.defaultValue
+      };
+    },
+    methods: {
+      addElement() {
+        if (!this.setValue && this.setValue !== 0) return;
+        if (this.hasErrors()) return;
+        if (!this.items.includes(this.setValue)) this.items.push(this.setValue);
+        this.setValue = this.schema.defaultValue;
+        this.$emit('update', this.items, this.schema.field);
+      },
+      removeElement(index) {
+        this.items.splice(index, 1);
+        this.$emit('update', this.items, this.schema.field);
+      },
+      resolveOption(toResolve, options) {
+        if (!options) return toResolve;
 
-                options.forEach(({ value, name }) => {
-                    if (toResolve === value) toResolve = name;
-                });
+        options.forEach(({ value, name }) => {
+          if (toResolve === value) toResolve = name;
+        });
 
-                return toResolve;
-            },
-            hasErrors() {
-                if (!this.invalid) return false;
+        return toResolve;
+      },
+      hasErrors() {
+        if (!this.invalid) return false;
 
-                const fields = [];
-                each(this.$el.getElementsByClassName('set-value'), field => fields.push(field));
+        const fields = [];
+        each(this.$el.getElementsByClassName('set-value'), field => fields.push(field));
 
-                clearTimeout(this.shakeTimeout);
-                each(fields, field => { field.classList.add('shake'); });
-                this.shakeTimeout = setTimeout(() => { each(fields, field => { field.classList.remove('shake'); }); }, 500);
+        clearTimeout(this.shakeTimeout);
+        each(fields, field => { field.classList.add('shake'); });
+        this.shakeTimeout = setTimeout(() => { each(fields, field => { field.classList.remove('shake'); }); }, 500);
 
-                return true;
-            }
-        }
-    };
+        return true;
+      }
+    }
+  };
 </script>
 
 <style lang="scss">

WebConfigGenerator/src/components/fields/InputText.vue

@@ -11,21 +11,21 @@
 </template>
 
 <script>
-    import Input from '../mixin/Input.vue';
+  import Input from '../mixin/Input.vue';
 
-    export default {
-        mixins: [Input],
-        name: 'InputText',
-        computed: {
-            errors() {
-                return this.validate(this.value);
-            },
-            valid() {
-                return this.errors.length === 0;
-            },
-            invalid() {
-                return this.errors.length !== 0;
-            }
-        }
-    };
+  export default {
+    mixins: [Input],
+    name: 'InputText',
+    computed: {
+      errors() {
+        return this.validate(this.value);
+      },
+      valid() {
+        return this.errors.length === 0;
+      },
+      invalid() {
+        return this.errors.length !== 0;
+      }
+    }
+  };
 </script>

WebConfigGenerator/src/components/mixin/Config.vue

@@ -1,85 +1,85 @@
 <script>
-    import { each } from 'lodash';
+  import { each } from 'lodash';
 
-    import schema from '../../schema';
+  import schema from '../../schema';
 
-    const fieldComponents = {};
-    const fields = require.context('../fields', false, /^\.\/([\w-_]+)\.vue$/);
+  const fieldComponents = {};
+  const fields = require.context('../fields', false, /^\.\/([\w-_]+)\.vue$/);
 
-    each(fields.keys(), key => {
-        const name = key.replace(/^\.\//, '').replace(/\.vue/, '');
-        fieldComponents[name] = fields(key);
-    });
+  each(fields.keys(), key => {
+    const name = key.replace(/^\.\//, '').replace(/\.vue/, '');
+    fieldComponents[name] = fields(key).default;
+  });
 
-    export default {
-        data() {
-            const versions = [];
-            for (const version in schema) versions.push(version);
+  export default {
+    data() {
+      const versions = [];
+      for (const version in schema) versions.push(version);
 
-            const selectedVersion = sessionStorage.getItem('selectedVersion') || versions[0];
+      const selectedVersion = sessionStorage.getItem('selectedVersion') || versions[0];
 
-            return {
-                model: {},
-                displayAdvanced: false,
-                selectedVersion,
-                versions,
-                type: ''
-            };
-        },
-        computed: {
-            schema() {
-                return schema[this.selectedVersion][this.type] || {};
-            }
-        },
-        methods: {
-            updateModel(value, field) {
-                this.model[field] = value;
-            },
-            downloadJSON() {
-                if (!this.validateForm()) return;
+      return {
+        model: {},
+        displayAdvanced: false,
+        selectedVersion,
+        versions,
+        type: ''
+      };
+    },
+    computed: {
+      schema() {
+        return schema[this.selectedVersion][this.type] || {};
+      }
+    },
+    methods: {
+      updateModel(value, field) {
+        this.model[field] = value;
+      },
+      downloadJSON() {
+        if (!this.validateForm()) return;
 
-                const json = this.processModelToJSON(this.model);
-                const text = JSON.stringify(json, null, 2);
+        const json = this.processModelToJSON(this.model);
+        const text = JSON.stringify(json, null, 2);
 
-                this.downloadText(text, this.filename);
-            },
-            downloadText(text, filename) {
-                const element = document.createElement('a');
-                element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
-                element.setAttribute('download', filename);
+        this.downloadText(text, this.filename);
+      },
+      downloadText(text, filename) {
+        const element = document.createElement('a');
+        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+        element.setAttribute('download', filename);
 
-                element.style.display = 'none';
-                document.body.appendChild(element);
+        element.style.display = 'none';
+        document.body.appendChild(element);
 
-                element.click();
+        element.click();
 
-                document.body.removeChild(element);
-            },
-            toggleAdvanced() {
-                this.displayAdvanced = !this.displayAdvanced;
-            },
-            validateForm() {
-                const form = document.getElementsByTagName('form')[0];
+        document.body.removeChild(element);
+      },
+      toggleAdvanced() {
+        this.displayAdvanced = !this.displayAdvanced;
+      },
+      validateForm() {
+        const form = document.getElementsByTagName('form')[0];
 
-                const fields = document.getElementsByClassName('error');
-                if (!fields.length) return form.checkValidity();
+        const fields = document.getElementsByClassName('error');
+        if (!fields.length) return form.checkValidity();
 
-                clearTimeout(this.shakeTimeout);
-                each(fields, field => { field.classList.add('shake'); });
-                this.shakeTimeout = setTimeout(() => { each(fields, field => { field.classList.remove('shake'); }); }, 500);
-                return false;
-            },
-            processModelToJSON(model) {
-                return model;
-            }
-        },
-        watch: {
-            selectedVersion(version) {
-                sessionStorage.setItem('selectedVersion', version);
-            }
-        },
-        components: fieldComponents
-    };
+        clearTimeout(this.shakeTimeout);
+        each(fields, field => { field.classList.add('shake'); });
+        this.shakeTimeout = setTimeout(() => { each(fields, field => { field.classList.remove('shake'); }); }, 500);
+        return false;
+      },
+      processModelToJSON(model) {
+        return model;
+      }
+    },
+    watch: {
+      selectedVersion(version) {
+        sessionStorage.setItem('selectedVersion', version);
+      }
+    },
+    components: fieldComponents
+  };
 </script>
 
 <style lang="scss">

WebConfigGenerator/src/components/mixin/Input.vue

@@ -1,26 +1,26 @@
 <script>
-    import Validators from '../../validators';
+  import Validators from '../../validators';
 
-    export default {
-        props: ['schema'],
-        watch: {
-            value() {
-                this.$emit('update', this.value, this.schema.field);
-            }
-        },
-        data() {
-            return { value: this.schema.defaultValue };
-        },
-        methods: {
-            validate(value, validator) {
-                if (!validator && !this.schema.validator) {
-                    if (this.schema.required) return Validators.required(value, this.schema);
-                    return [];
-                }
-
-                if (!validator) return this.schema.validator(value, this.schema);
-                return validator(value, this.schema);
-            }
+  export default {
+    props: ['schema'],
+    watch: {
+      value() {
+        this.$emit('update', this.value, this.schema.field);
+      }
+    },
+    data() {
+      return { value: this.schema.defaultValue };
+    },
+    methods: {
+      validate(value, validator) {
+        if (!validator && !this.schema.validator) {
+          if (this.schema.required) return Validators.required(value, this.schema);
+          return [];
         }
-    };
+
+        if (!validator) return this.schema.validator(value, this.schema);
+        return validator(value, this.schema);
+      }
+    }
+  };
 </script>

WebConfigGenerator/src/main.js

@@ -1,29 +0,0 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue';
-import VueI18n from 'vue-i18n';
-
-import App from './App.vue';
-import i18nSettings from './i18n.js';
-import router from './router';
-
-Vue.config.productionTip = false;
-
-Vue.use(VueI18n);
-
-console.log(i18nSettings);
-
-const i18n = new VueI18n(i18nSettings);
-
-/* eslint-disable no-new */
-new Vue({
-    el: '#app',
-    router,
-    i18n,
-    template: '<App/>',
-    components: { App }
-});
-
-if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('service-worker.js');
-}

WebConfigGenerator/src/router.js

@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+
+Vue.use(Router);
+
+export default new Router({
+    routes: [
+        {
+            path: '/',
+            name: 'home',
+            component: () => import('./components/Home.vue')
+        },
+        {
+            path: '/asf',
+            name: 'asf-config',
+            component: () => import('./components/ASFConfig.vue')
+        },
+        {
+            path: '/bot',
+            name: 'bot-config',
+            component: () => import('./components/BotConfig.vue')
+        }
+    ]
+});

WebConfigGenerator/src/router/index.js

@@ -1,28 +0,0 @@
-import ASFConfig from '@/components/ASFConfig';
-import BotConfig from '@/components/BotConfig';
-import Home from '@/components/Home';
-
-import Vue from 'vue';
-import Router from 'vue-router';
-
-Vue.use(Router);
-
-export default new Router({
-    routes: [
-        {
-            path: '/',
-            name: 'Home',
-            component: Home
-        },
-        {
-            path: '/asf',
-            name: 'ASFConfig',
-            component: ASFConfig
-        },
-        {
-            path: '/bot',
-            name: 'BotConfig',
-            component: BotConfig
-        }
-    ]
-});