Files
pihkaal-me/app/components/Settings/BottomScreen/Menus/Clock/Date.vue

59 lines
1.1 KiB
Vue

<script setup lang="ts">
import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
import { useIntervalFn } from "@vueuse/core";
const store = useSettingsStore();
const { assets } = useAssets();
const { onRender } = useScreen();
const now = ref(new Date());
useIntervalFn(() => {
now.value = new Date();
}, 1000);
const handleCancel = () => {
store.closeSubMenu();
};
const handleConfirm = () => {
store.closeSubMenu();
};
onRender((ctx) => {
assets.images.home.topScreen.background.draw(ctx, 0, 0);
});
defineOptions({ render: () => null });
</script>
<template>
<NumberInput
:model-value="now.getMonth() + 1"
title="Month"
:x="1 * 16 - 1"
:disabled="true"
/>
<NumberInput
:model-value="now.getDate()"
title="Day"
:x="5 * 16 - 1"
:disabled="true"
/>
<NumberInput
:model-value="now.getFullYear()"
title="Year"
:digits="4"
:x="9 * 16 - 1"
:disabled="true"
/>
<CommonButtons
:y-offset="0"
b-label="Cancel"
a-label="Confirm"
@activate-b="handleCancel"
@activate-a="handleConfirm"
/>
</template>