Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added main system to navigate time

Browse Source
This commit is contained in:
Alexis
2024-03-31 16:34:14 +02:00
parent d903b371b2
commit a4b2fa271b
2 changed files with 165 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/HomeView.vue
View File

@@ -1,11 +1,49 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { useCalendar } from '@/stores/calendar'
const c = useCalendar()
const { config, incrementMonth, decrementMonth, setMonth, incrementYear, decrementYear } =
useCalendar()
const monthTarget = ref(0)
</script>
<template>
<main class="container">
<h1 class="text-3xl font-bold">{{ c }}</h1>
<pre>
{{ config }}
</pre>
<div class="grid gap-2">
<div class="flex gap-2">
<button class="bg-slate-800 py-2 px-4 rounded-sm" @click="incrementMonth()">Month +</button>
<button class="bg-slate-800 py-2 px-4 rounded-sm" @click="decrementMonth()">Month -</button>
</div>
<div class="flex gap-2">
<button class="bg-slate-800 py-2 px-4 rounded-sm" @click="incrementYear()">Year +</button>
<button class="bg-slate-800 py-2 px-4 rounded-sm" @click="decrementYear()">Year -</button>
</div>
<div class="flex gap-2">
<button class="bg-slate-800 py-2 px-4 rounded-sm" @click="incrementYear(100)">
Century +
</button>
<button class="bg-slate-800 py-2 px-4 rounded-sm" @click="decrementYear(100)">
Century -
</button>
</div>
<div class="flex gap-2">
<button class="bg-slate-800 py-2 px-4 rounded-sm" @click="incrementYear(1000)">
Millenia +
</button>
<button class="bg-slate-800 py-2 px-4 rounded-sm" @click="decrementYear(1000)">
Millenia -
</button>
</div>
<div class="flex gap-2">
<input class="bg-slate-900" type="number" v-model="monthTarget" />
<button class="bg-slate-800 py-2 px-4 rounded-sm" @click="setMonth(monthTarget)">
Set Month
</button>
</div>
</div>
</main>
</template>