Refactor and add DialogForm

Author: dark-flames

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.1.0",
     "@luogu-dev/markdown-it-katex": "^0.0.1",
+    "axios": "^0.18.0",
     "codemirror": "^5.39.0",
     "highlight.js": "^9.12.0",
     "katex": "^0.9.0",

src/components/MarkdownPalettes.vue renamed to src/MarkdownPalettes.vue

@@ -178,17 +178,17 @@
 import '@fortawesome/fontawesome-free/css/solid.css'
 import '@fortawesome/fontawesome-free/css/fontawesome.css'
 
-import Dialog from './Dialog.vue'
+import Dialog from './components/Dialog/Dialog.vue'
 
-import InputAreaMixin from './InputAreaMixin'
-import PreviewAreaMixin from './PreviewAreaMixin'
-import ToolbarMixin from './ToolbarMixin'
-import ActionMixin from './ActionMixin'
+import InputAreaMixin from './mixins/InputAreaMixin'
+import PreviewAreaMixin from './mixins/PreviewAreaMixin'
+import ToolbarMixin from './mixins/ToolbarMixin'
+import ActionMixin from './mixins/ActionMixin'
 
-import { defaultConfig, getConfig } from './DefaultConfig'
-import { contentParserFactory } from './ContentParserFactory'
-import InjectLnParser from './plugins/InjectLnParser.js'
-import { getText } from './i18n'
+import { defaultConfig, getConfig } from './utils/DefaultConfig'
+import { contentParserFactory } from './parsers/ContentParserFactory'
+import InjectLnParser from './parsers/InjectLnParser.js'
+import { getText } from './utils/i18n'
 
 export default {
     name: 'markdown-palettes',

src/components/dialog-input-components/AbstractInputComponent.js renamed to src/components/Dialog/AbstractDialogComponent.js

@@ -10,11 +10,7 @@
                     </div>
 
                     <form class="mp-dialog-body" @submit.prevent="finish">
-                        <div class="mp-dialog-form">
-                            <div class="mp-dialog-field" v-for="field in request.body" :key="field.name">
-                                <component :is="field.type || field.component" :request-field="field" v-model="responseData[field.name]"></component>
-                            </div>
-                        </div>
+                        <dialog-form :fields="this.request.body" v-model="responseData"></dialog-form>
 
                         <div class="mp-dialog-footer">
                             <div>
@@ -71,11 +67,6 @@
         padding-bottom: 10px;
     }
 
-    .mp-dialog-field {
-        margin: 10px 8px;
-        overflow:auto;
-    }
-
     .mp-dialog-footer {
         overflow:auto;
     }
@@ -114,7 +105,7 @@
 </style>
 
 <script>
-import DialogComponents from './dialog-input-components/components'
+import DialogForm from './DialogForm'
 
 export default {
     name: 'editor-dialog',
@@ -146,7 +137,7 @@ export default {
             this.$emit('finish', this.response)
         }
     },
-    components: DialogComponents,
+    components: { DialogForm },
     inject: ['t']
 }
 </script>

src/components/Dialog.vue renamed to src/components/Dialog/Dialog.vue

@@ -18,13 +18,13 @@
 </style>
 
 <script>
-import abstractInputComponent from './AbstractInputComponent'
+import AbstractDialogComponent from './AbstractDialogComponent'
 import CodeMirror from 'codemirror'
 import 'codemirror/lib/codemirror.css'
 
 export default {
     name: 'dialog-codemirror',
-    extends: abstractInputComponent,
+    extends: AbstractDialogComponent,
     data () {
         return {
             editor: null

src/components/dialog-input-components/CodeMirror.vue renamed to src/components/Dialog/DialogCodeMirror.vue

@@ -0,0 +1,11 @@
+import DialogInput from './DialogInput'
+import DialogSelect from './DialogSelect'
+import DialogCodeMirror from './DialogCodeMirror'
+import DialogFile from './DialogFile'
+
+export default {
+    'dialog-input': DialogInput,
+    'dialog-select': DialogSelect,
+    'dialog-codemirror': DialogCodeMirror,
+    'dialog-file': DialogFile
+}

src/components/Dialog/DialogComponentMap.js

@@ -0,0 +1,45 @@
+<template>
+    <div class="mp-dialog-input">
+        <label>{{ title }}</label>
+        <input type="file" name="picture" @change="handleFile">
+    </div>
+</template>
+
+<style scoped>
+    .mp-dialog-input {
+        overflow: auto;
+    }
+
+    .mp-dialog-input label {
+        float: left;
+        padding-top: 5px;
+        vertical-align: top;
+        margin-right: 10px;
+        width: 20%;
+        font-size: 14px;
+        color: #666;
+    }
+
+    .mp-dialog-input input {
+        float: left;
+        width: 70%;
+        color: #999;
+        padding: 8px;
+        border: 1px solid #ddd;
+    }
+</style>
+
+<script>
+import abstractInputComponent from './AbstractDialogComponent'
+
+export default {
+    name: 'file',
+    extends: abstractInputComponent,
+    methods: {
+        async handleFile (event) {
+            let file = event.target.files[0]
+            this.fieldValue = await this.param.callback(file)
+        }
+    }
+}
+</script>

src/components/Dialog/DialogFile.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="dialog-form">
+        <div class="mp-dialog-field" v-for="field in fields" :key="field.name">
+            <component :is="field.type || field.component" :request-field="field" v-model="data[field.name]"></component>
+        </div>
+    </div>
+</template>
+
+<script>
+import DialogComponents from './DialogComponentMap'
+
+export default {
+    name: 'dialog-form',
+    props: {
+        fields: {
+            type: Array,
+            required: true
+        },
+        value: {
+            type: Object,
+            required: true
+        }
+    },
+    model: {
+        prop: 'value',
+        event: 'change'
+    },
+    computed: {
+        data: {
+            get () {
+                return this.value
+            },
+            set (value) {
+                this.$emit('change', value)
+            }
+        }
+    },
+    methods: {
+        close () {
+            this.$emit('close')
+        },
+        finish () {
+            this.$emit('finish', this.response)
+        }
+    },
+    components: DialogComponents,
+    inject: ['t']
+}
+</script>
+
+<style scoped>
+    .mp-dialog-field {
+        margin: 10px 8px;
+        overflow:auto;
+    }
+</style>

src/components/Dialog/DialogForm.vue

@@ -30,10 +30,10 @@
 </style>
 
 <script>
-import abstractInputComponent from './AbstractInputComponent'
+import AbstractDialogComponent from './AbstractDialogComponent'
 
 export default {
     name: 'dialog-input',
-    extends: abstractInputComponent
+    extends: AbstractDialogComponent
 }
 </script>

src/components/dialog-input-components/Input.vue renamed to src/components/Dialog/DialogInput.vue

@@ -2,7 +2,7 @@
     <div class="mp-dialog-select">
         <label>{{ title }}</label>
         <select v-model="value">
-            <option v-for="option in param.options" :value="option.value">{{ t(option.title) }}</option>
+            <option v-for="option in param.options" :key="option.title" :value="option.value">{{ t(option.title) }}</option>
         </select>
     </div>
 </template>
@@ -33,10 +33,10 @@
 </style>
 
 <script>
-import abstractInputComponent from './AbstractInputComponent'
+import AbstractDialogComponent from './AbstractDialogComponent'
 
 export default {
     name: 'dialog-select',
-    extends: abstractInputComponent
+    extends: AbstractDialogComponent
 }
 </script>