new modal single file component

README.md

@@ -5,8 +5,10 @@ ASCIIBIRD DEVELOPMENT - TAKING FLIGHT
 # FOCUSING ON NOW
 
 * Modals
+ * Edit current ascii
+ * Asciibird options
+ * Tool options
 
-* Export to clipboard
 * Encodings
 
 * Toolbar stuff / Brush Size
@@ -23,6 +25,10 @@ ASCIIBIRD DEVELOPMENT - TAKING FLIGHT
 * Update text colours without deleting the block
 * Floating pattlets, resizeable and remembers positions
 * .ASB file, but it's not gzipped yet just json.
+* Export mIRC to clipboard
+
+* Modals
+ * New ascii modal
 
 # KILLER ASCIIBIRD FEATURES TO DO
 

src/Dashboard.vue

@@ -1,11 +1,11 @@
 <template>
   <div id="app">
-    <NewAscii :showNewAsciiModal="showNewAsciiModal" />
+    <NewAscii />
 
     <context-menu :display="showContextMenu" ref="menu">
       <ul>
         <li
-          @click="showNewAsciiModal = !showNewAsciiModal"
+          @click="$store.commit('openModal', 'new-ascii')"
           class="ml-1"
           @contextmenu.prevent
         >

src/components/modals/NewAscii.vue

@@ -1,52 +1,51 @@
 <template>
-    <t-modal
-      name="create-ascii-modal"
-      header="Create new ASCII"
-      :clickToClose="false"
-      :escToClose="true"
-      @before-closed="closeNewASCII"
-    >
-      Width
-      <t-input
-        type="number"
-        name="width"
-        v-model="forms.createAscii.width"
-        min="1"
-      />
+  <t-modal
+    name="create-ascii-modal"
+    header="Create new ASCII"
+    :clickToClose="false"
+    :escToClose="true"
+    @before-closed="closeNewASCII"
+  >
+    Width
+    <t-input
+      type="number"
+      name="width"
+      v-model="forms.createAscii.width"
+      min="1"
+    />
 
-      Height
-      <t-input
-        type="number"
-        name="height"
-        v-model="forms.createAscii.height"
-        min="1"
-      />
+    Height
+    <t-input
+      type="number"
+      name="height"
+      v-model="forms.createAscii.height"
+      min="1"
+    />
 
-      Title
-      <t-input
-        type="text"
-        name="title"
-        v-model="forms.createAscii.title"
-        max="128"
-      />
+    Title
+    <t-input
+      type="text"
+      name="title"
+      v-model="forms.createAscii.title"
+      max="128"
+    />
 
-      <template v-slot:footer>
-        <div
-          class="flex justify-between"
-          @click="$modal.hide('create-ascii-modal')"
-        >
-          <t-button type="button"> Cancel </t-button>
-          <t-button type="button" @click="createNewASCII()"> Ok </t-button>
-        </div>
-      </template>
-    </t-modal>
+    <template v-slot:footer>
+      <div
+        class="flex justify-between"
+        @click="$modal.hide('create-ascii-modal')"
+      >
+        <t-button type="button"> Cancel </t-button>
+        <t-button type="button" @click="createNewASCII()"> Ok </t-button>
+      </div>
+    </template>
+  </t-modal>
 </template>
 
 <script>
 export default {
   name: "NewAsciiModal",
   created() {},
-  prop: ['showNewAsciiModal'],
   data: () => ({
     forms: {
       createAscii: {
@@ -56,13 +55,15 @@ export default {
       },
     },
   }),
+  computed: {
+    showNewAsciiModal() {
+      return this.$store.getters.modalState.newAscii;
+    },
+  },
   watch: {
-      showNewAsciiModal(val, old) {
-          console.log(val, old)
-          if (val === true) {
-              this.createClick()
-          }
-      }
+    showNewAsciiModal(val, old) {
+      this.createClick()
+    },
   },
   methods: {
     createClick() {
@@ -94,8 +95,9 @@ export default {
       }
 
       this.$store.commit("newAsciibirdMeta", payload);
+      this.$store.commit('openModal', 'new-ascii')
       this.$modal.hide("create-ascii-modal");
-      this.show = false
+      this.show = false;
     },
     closeNewASCII({ params, cancel }) {
       this.forms.createAscii.width = 5;

src/store/index.js

@@ -10,6 +10,9 @@ const vuexLocal = new VuexPersistence({
 export default new Vuex.Store({
 
   state: {
+    modalState: {
+      newAscii: false,
+    },
     // The various options of ASCIIBIRD will eventually
     // end up in its own modal I guess
     options: {
@@ -205,9 +208,19 @@ export default new Vuex.Store({
       state.toolbarState.brushSizeHeight = payload.brushSizeHeight;
       state.toolbarState.brushSizeWidth = payload.brushSizeWidth;
     },
+    openModal(state, type) {
+      switch (type) {
+        case 'new-ascii':
+          state.modalState.newAscii = !state.modalState.newAscii
+        break;
+
+
+      }
+    }
   },
   getters: {
     getState: (state) => state,
+    modalState: (state) => state.modalState,
     getOptions: (state) => state.options,
     getToolbarIcons: (state) => state.toolbarIcons,
     getToolbarState: (state) => state.toolbarState,