71 lines
2.1 KiB
Vue
71 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { getRecentLists } from "@/lib/lists";
|
|
import { ArrowBigRightDashIcon, DicesIcon, HistoryIcon } from "@lucide/vue";
|
|
import { generateSlug } from "random-word-slugs";
|
|
import { defineAsyncComponent, onBeforeMount, ref } from "vue";
|
|
import { onBeforeRouteUpdate } from "vue-router";
|
|
const RecentItem = defineAsyncComponent(
|
|
() => import("@/components/RecentItem.vue"),
|
|
);
|
|
|
|
const listNameInput = ref<string>(generateSlug(4));
|
|
const recentLists = ref<string[]>(getRecentLists());
|
|
|
|
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="p-4 italic text-xl font-extralight"
|
|
>{{ $t('home') }}<br/>{{ $t('call_to_action') }}</div>
|
|
<div class="flex gap-2 p-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="w-full">
|
|
<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="collapse collapse-arrow font-light text-sm">
|
|
<input id="recent-dropdown" type="checkbox" />
|
|
<div class="collapse-title">
|
|
<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>
|