Something went wrong. Try again.
A simple to-do app focused on tasks that can be completed within a specific time span. taskline.tobinio.dev
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051<script setup lang="ts"> const weekDays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const range = defineModel<{ start: number; end: number }>("range", { default: () => ({ start: 0, end: 6 }), });
let selectingStart = true; function onSelectDay(index: number) { let start = range.value.start; let end = range.value.end;
if (selectingStart) { start = index;
if (end < index) { end = index; }
selectingStart = false; } else { end = index;
if (end < start) { [start, end] = [end, start]; }
selectingStart = true; }
range.value = { start, end }; }</script>
<template> <div class="border-secondary bg-secondary flex flex-wrap gap-px rounded border" > <button v-for="(day, index) in weekDays" type="button" :key="day" :data-selected="index >= range.start && index <= range.end" class="bg-surface data-[selected=true]:bg-secondary flex h-7 flex-1 cursor-pointer items-center justify-center p-1" @click="onSelectDay(index)" > {{ day }} </button> </div></template>