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

Extract Input component and add some dark color tags

Browse Source
This commit is contained in:
Jan Bader 2022-03-02 19:48:24 +00:00
parent 2b3afbf448
commit 6fcd555493
5 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@
import { ref, watch } from "vue"
import { GET } from "../api";
import { useBudgetsStore } from "../stores/budget";
import Input from "./Input.vue";
export interface Suggestion {
ID: string
@ -77,14 +78,15 @@ function clear() {
<template>
<div>
<input
<Input
type="text"
class="border-b-2 border-black"
@keypress="keypress"
v-if="id == undefined"
v-model="SearchQuery"
/>
<span @click="clear" v-if="id != undefined" class="bg-gray-300">{{ text }}</span>
<div v-if="Suggestions.length > 0" class="absolute bg-gray-400 w-64 p-2">
<span @click="clear" v-if="id != undefined" class="bg-gray-300 dark:bg-gray-700">{{ text }}</span>
<div v-if="Suggestions.length > 0" class="absolute bg-gray-400 dark:bg-gray-600 w-64 p-2">
<span
v-for="suggestion in Suggestions"
class="block"

1
web/src/components/DateInput.vue
View File

@ -26,6 +26,7 @@ function selectAll(event: FocusEvent) {
<template>
<input
class="dark:bg-slate-900"
type="date"
ref="input"
v-bind:value="dateToYYYYMMDD(modelValue)"

10
web/src/components/Input.vue Normal file
View File

@ -0,0 +1,10 @@
<script lang="ts" setup>
const props = defineProps(["modelValue"]);
</script>
<template>
<input
v-model="modelValue"
@input="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
class="dark:bg-slate-900">
</template>

20
web/src/components/TransactionEditRow.vue
View File

@ -4,6 +4,8 @@ import Autocomplete from './Autocomplete.vue'
import { useAccountStore } from '../stores/budget-account'
import DateInput from "./DateInput.vue";
import { useTransactionsStore } from "../stores/transactions";
import Input from "./Input.vue";
import Button from "./Button.vue";
const props = defineProps<{
transactionid: string
@ -37,28 +39,28 @@ function saveTransaction(e: MouseEvent) {
<template>
<tr>
<td style="width: 90px;" class="text-sm">
<td class="text-sm">
<DateInput class="border-b-2 border-black" v-model="TX.Date" />
</td>
<td style="max-width: 150px;">
<td>
<Autocomplete v-model:text="TX.Payee" v-model:id="TX.PayeeID" v-model:type="payeeType" model="payees" />
</td>
<td style="max-width: 200px;">
<td>
<Autocomplete v-model:text="TX.Category" v-model:id="TX.CategoryID" model="categories" />
</td>
<td>
<input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
<Input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
</td>
<td style="width: 80px;" class="text-right">
<input
<td class="text-right">
<Input
class="text-right block w-full border-b-2 border-black"
type="currency"
v-model="TX.Amount"
/>
</td>
<td style="width: 20px;">
<input type="submit" @click="saveTransaction" value="Save" />
<td>
<Button class="bg-blue-500" @click="saveTransaction">Save</Button>
</td>
<td style="width: 20px;"></td>
<td></td>
</tr>
</template>

5
web/src/components/TransactionInputRow.vue
View File

@ -4,6 +4,7 @@ import Autocomplete from '../components/Autocomplete.vue'
import { Transaction, useTransactionsStore } from "../stores/transactions";
import DateInput from "./DateInput.vue";
import Button from "./Button.vue";
import Input from "./Input.vue";
const props = defineProps<{
budgetid: string
@ -65,11 +66,11 @@ function saveTransaction(e: MouseEvent) {
<Autocomplete v-model:text="TX.Category" v-model:id="TX.CategoryID" model="categories" />
</td>
<td class="col-span-2">
<input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
<Input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
</td>
<label class="md:hidden">Amount</label>
<td class="text-right">
<input
<Input
class="text-right block w-full border-b-2 border-black"
type="currency"
v-model="TX.Amount"