77 lines
2.2 KiB
Vue
77 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { useListStore } from "@/stores/lists";
|
|
import { ArrowBigRightDashIcon, DicesIcon, HistoryIcon } from "@lucide/vue";
|
|
import { generateSlug } from "random-word-slugs";
|
|
import { onBeforeMount, ref } from "vue";
|
|
import { onBeforeRouteUpdate } from "vue-router";
|
|
import RecentItem from "@/components/RecentItem.vue";
|
|
|
|
const listNameInput = ref<string>(generateSlug(4));
|
|
|
|
const { lists: recentLists } = useListStore();
|
|
|
|
function onRandom() {
|
|
listNameInput.value = generateSlug(4);
|
|
}
|
|
|
|
function onInput() {
|
|
listNameInput.value = listNameInput.value
|
|
.normalize("NFD")
|
|
.replace(/[\s_]/g, "-")
|
|
.replace(/[^a-z0-9-]/g, "")
|
|
.toLowerCase();
|
|
}
|
|
|
|
function updateTitle() {
|
|
document.title = "Tout Doux";
|
|
}
|
|
|
|
onBeforeMount(updateTitle);
|
|
onBeforeRouteUpdate(updateTitle);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="italic mt-4 text-xl font-extralight">
|
|
{{ $t("home") }}<br />{{ $t("call_to_action") }}
|
|
</div>
|
|
<div class="flex gap-2 mt-4">
|
|
<input
|
|
v-model="listNameInput"
|
|
type="text"
|
|
:placeholder="$t('new_task_hint')"
|
|
class="input grow"
|
|
@input="onInput"
|
|
/>
|
|
<button class="btn btn-square" @click="onRandom">
|
|
<dices-icon />
|
|
</button>
|
|
</div>
|
|
<div class="mt-4">
|
|
<router-link
|
|
class="btn btn-lg"
|
|
:class="listNameInput.trim().length === 0 ? 'btn-disabled' : ''"
|
|
:to="`/${listNameInput.trim()}`"
|
|
>
|
|
<arrow-big-right-dash-icon class="inline" />
|
|
{{ $t("home_button") }}
|
|
</router-link>
|
|
</div>
|
|
<div
|
|
v-if="recentLists.length"
|
|
class="mt-4 -mb-4 lh collapse collapse-arrow font-light text-sm"
|
|
>
|
|
<input id="recent-dropdown p-0" type="checkbox" />
|
|
<div class="collapse-title p-0 content-center">
|
|
<history-icon class="inline" :size="16" />
|
|
{{ $t("recent") }}
|
|
</div>
|
|
<div class="collapse-content">
|
|
<recent-item
|
|
v-for="(list, i) in recentLists"
|
|
:key="`recent-${i}`"
|
|
:list="list"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|