113 lines
2.1 KiB
Vue
113 lines
2.1 KiB
Vue
<template>
|
|
<t-modal
|
|
name="new-ascii-modal"
|
|
header="Create new ASCII"
|
|
:click-to-close="false"
|
|
:esc-to-close="true"
|
|
@closed="$store.commit('closeModal', 'new-ascii')"
|
|
>
|
|
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"
|
|
/>
|
|
|
|
Title
|
|
<t-input
|
|
type="text"
|
|
name="title"
|
|
v-model="forms.createAscii.title"
|
|
max="128"
|
|
/>
|
|
|
|
<template v-slot:footer>
|
|
<div
|
|
class="flex justify-between"
|
|
@click="$store.commit('closeModal', 'new-ascii')"
|
|
>
|
|
<t-button
|
|
type="button"
|
|
class="p-2"
|
|
>
|
|
Cancel
|
|
</t-button>
|
|
<t-button
|
|
type="button"
|
|
class="p-2"
|
|
@click="initiateNewAscii()"
|
|
>
|
|
Ok
|
|
</t-button>
|
|
</div>
|
|
</template>
|
|
</t-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import createNewASCII from "../../ascii";
|
|
|
|
export default {
|
|
name: "NewAsciiModal",
|
|
created() {},
|
|
mounted() {
|
|
if (this.showNewAsciiModal) {
|
|
this.open()
|
|
} else {
|
|
this.close()
|
|
}
|
|
},
|
|
data: () => ({
|
|
forms: {
|
|
createAscii: {
|
|
width: 80,
|
|
height: 30,
|
|
title: "ascii",
|
|
},
|
|
},
|
|
}),
|
|
computed: {
|
|
showNewAsciiModal() {
|
|
return this.$store.getters.modalState.newAscii;
|
|
},
|
|
},
|
|
watch: {
|
|
showNewAsciiModal(val) {
|
|
if (val === true) {
|
|
this.open();
|
|
}
|
|
|
|
if (val === false) {
|
|
this.close();
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
open() {
|
|
this.$modal.show("new-ascii-modal");
|
|
this.forms.createAscii.title = `New ASCII ${
|
|
this.$store.getters.asciibirdMeta.length + 1
|
|
}`;
|
|
},
|
|
close() {
|
|
this.$modal.hide("new-ascii-modal");
|
|
this.forms.createAscii.width = 80;
|
|
this.forms.createAscii.height = 30;
|
|
this.forms.createAscii.title = "New ASCII";
|
|
},
|
|
initiateNewAscii() {
|
|
createNewASCII(this.forms);
|
|
},
|
|
},
|
|
};
|
|
</script>
|