jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Extract modal component

Browse Source
This commit is contained in:
Jan Bader 2022-02-24 21:37:26 +00:00
parent b5a03b40db
commit d09f5be69b
3 changed files with 64 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/Button.vue
View File

@ -2,7 +2,9 @@
</script>
<template>
<button class="px-4 py-2 text-base font-medium rounded-md shadow-sm focus:outline-none focus:ring-2">
<slot></slot>
</button>
<button
class="px-4 py-2 text-base font-medium rounded-md shadow-sm focus:outline-none focus:ring-2"
>
<slot></slot>
</button>
</template>

54
web/src/components/Modal.vue Normal file
View File

@ -0,0 +1,54 @@
<script lang="ts" setup>
import Card from '../components/Card.vue';
import { ref } from "vue";
const props = defineProps<{
buttonText: string,
}>();
const emit = defineEmits<{
(e: 'submit'): void
}>();
const visible = ref(false);
function closeDialog() {
visible.value = false;
};
function openDialog() {
visible.value = true;
};
function submitDialog() {
visible.value = false;
emit("submit");
}
</script>
<template>
<Card>
<p class="w-24 text-center text-6xl">+</p>
<button class="text-lg" dark @click="openDialog">{{ buttonText }}</button>
</Card>
<div
v-if="visible"
class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"
>
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="mt-3 text-center">
<h3 class="mt-3 text-lg leading-6 font-medium text-gray-900">{{ buttonText }}</h3>
<slot></slot>
<div>
<slot name="actions">
<button
@click="closeDialog"
class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md w-1/2 shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
>Close</button>
<button
@click="submitDialog"
class="px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md w-1/2 shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
>Save</button>
</slot>
</div>
</div>
</div>
</div>
</template>

56
web/src/dialogs/NewBudget.vue
View File

@ -1,64 +1,18 @@
<script lang="ts" setup>
import Card from '../components/Card.vue';
import Modal from '../components/Modal.vue';
import { ref } from "vue";
import { useBudgetsStore } from '../stores/budget';
const dialog = ref(false);
const budgetName = ref("");
function saveBudget() {
useBudgetsStore().NewBudget(budgetName.value);
dialog.value = false;
};
function newBudget() {
dialog.value = true;
};
</script>
<template>
<Card>
<p class="w-24 text-center text-6xl">+</p>
<button class="text-lg" dark @click="newBudget">New Budget</button>
</Card>
<div v-if="dialog" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="mt-3 text-center">
<!--<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
<svg
class="h-6 w-6 text-green-600"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
</div>-->
<h3 class="mt-3 text-lg leading-6 font-medium text-gray-900">New Budget</h3>
<div class="mt-2 px-7 py-3">
<input
class="border-2"
type="text"
v-model="budgetName"
placeholder="Budget name"
required
/>
<!--<p class="text-sm text-gray-500">Account has been successfully registered!</p>-->
</div>
<div class="items-center px-4 py-3">
<button
@click="dialog = false"
class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md w-1/2 shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
>Close</button>
<button
class="px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md w-1/2 shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
@click="saveBudget"
>Save</button>
</div>
</div>
<Modal button-text="New Budget" @submit="saveBudget">
<div class="mt-2 px-7 py-3">
<input class="border-2" type="text" v-model="budgetName" placeholder="Budget name" required />
</div>
</div>
</Modal>
</template>