add initial AddSectionDialog

cateditor/src/components/AddSectionDialog.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="text-xs-center">
+    <v-dialog v-model="show" width="300">
+      <v-form v-model="valid">
+        <v-card>
+          <DialogHeading title="Add Section">
+            <v-btn icon @click="show = false" class="ma-0 pa-0">
+              <v-icon color="white">clear</v-icon>
+            </v-btn>
+          </DialogHeading>
+
+          <v-card-text>
+            <v-text-field
+              :rules="[v => !!v || 'Required']"
+              v-model="name"
+              label="Name"
+              autofocus
+              required>
+            </v-text-field>
+          </v-card-text>
+
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn flat @click="show = false">Cancel</v-btn>
+            <v-btn
+              :disabled="!valid"
+              color="primary"
+              flat
+              @click="show = false">OK</v-btn>
+            <v-spacer></v-spacer>
+          </v-card-actions>
+        </v-card>
+      </v-form>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import DialogHeading from './DialogHeading'
+
+// https://stackoverflow.com/questions/48035310/open-a-vuetify-dialog-from-a-component-template-in-vuejs
+export default {
+  components: {
+    DialogHeading,
+  },
+  data: () => ({
+    name: '',
+    valid: false,
+  }),
+  props: {
+    value: Boolean,
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      }
+    },
+  }
+}
+</script>
+
+<style>
+
+</style>