58 lines
1.6 KiB
Vue
58 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { ArrowBigRightDashIcon, DicesIcon } from "@lucide/vue";
|
|
import { generateSlug } from "random-word-slugs";
|
|
import { onBeforeMount, ref } from "vue";
|
|
import { onBeforeRouteUpdate } from "vue-router";
|
|
|
|
const listNameInput = ref<string>(generateSlug(4));
|
|
|
|
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">
|
|
<div
|
|
class="mb-4 italic text-xl font-extralight"
|
|
>{{ $t('home') }}<br/>{{ $t('call_to_action') }}</div>
|
|
<div class="flex gap-2 mb-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 px-4"
|
|
:class="listNameInput.trim().length === 0 ? 'btn-disabled' : ''"
|
|
:to="`/${listNameInput.trim()}`"
|
|
>
|
|
<arrow-big-right-dash-icon class="inline" />
|
|
{{ $t("home_button") }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|