98 lines
3.8 KiB
Vue
98 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { ArrowDownUpIcon, Settings2Icon } from "@lucide/vue";
|
|
import { SortType } from "@/enums";
|
|
|
|
defineEmits<(e: "changeSort") => void>();
|
|
|
|
const sortType = defineModel<SortType>("sortType", { required: true });
|
|
const sortReverse = defineModel<boolean>("sortReverse", { required: true });
|
|
const showLastChecked = defineModel<boolean>("showLastChecked", {
|
|
required: true,
|
|
});
|
|
const showNextReset = defineModel<boolean>("showNextReset", { required: true });
|
|
const separateCompleted = defineModel<boolean>("separateCompleted", {
|
|
required: true,
|
|
});
|
|
const showMissed = defineModel<boolean>("showMissed", { required: true });
|
|
</script>
|
|
|
|
<template>
|
|
<div class="collapse collapse-arrow font-light text-sm">
|
|
<input id="options-dropdown p-0" type="checkbox" />
|
|
<div class="collapse-title p-0 content-center">
|
|
<settings-2-icon class="inline" :size="16" />
|
|
{{ $t("options.title") }}
|
|
</div>
|
|
<div class="collapse-content">
|
|
<div class="w-full flex flex-col gap-2 text-left overflow-scroll">
|
|
<label class="label">
|
|
<arrow-down-up-icon class="inline" />
|
|
{{ $t("options.sort_by") }}
|
|
<select
|
|
v-model="sortType"
|
|
class="select"
|
|
@change="$emit('changeSort')"
|
|
>
|
|
<option :value="SortType.CREATED_AT">
|
|
{{ $t("options.sort.created_at") }}
|
|
</option>
|
|
<option :value="SortType.UPDATED_AT">
|
|
{{ $t("options.sort.updated_at") }}
|
|
</option>
|
|
<option :value="SortType.CHECK_DATE">
|
|
{{ $t("options.sort.check_date") }}
|
|
</option>
|
|
<option :value="SortType.RESET_DATE">
|
|
{{ $t("options.sort.reset_date") }}
|
|
</option>
|
|
<option :value="SortType.NAME">
|
|
{{ $t("options.sort.name") }}
|
|
</option>
|
|
</select>
|
|
</label>
|
|
<label class="label text-wrap">
|
|
<input
|
|
v-model="sortReverse"
|
|
type="checkbox"
|
|
class="checkbox"
|
|
@change="$emit('changeSort')"
|
|
/>
|
|
{{ $t("options.reverse_sort") }}
|
|
</label>
|
|
<label class="label text-wrap">
|
|
<input
|
|
v-model="showLastChecked"
|
|
type="checkbox"
|
|
class="checkbox"
|
|
/>
|
|
{{ $t("options.last_checked") }}
|
|
</label>
|
|
<label class="label text-wrap">
|
|
<input
|
|
v-model="showNextReset"
|
|
type="checkbox"
|
|
class="checkbox"
|
|
/>
|
|
{{ $t("options.next_reset") }}
|
|
</label>
|
|
<label class="label text-wrap">
|
|
<input
|
|
v-model="separateCompleted"
|
|
type="checkbox"
|
|
class="checkbox"
|
|
/>
|
|
{{ $t("options.separate_completed") }}
|
|
</label>
|
|
<label class="label text-wrap">
|
|
<input
|
|
v-model="showMissed"
|
|
type="checkbox"
|
|
class="checkbox"
|
|
/>
|
|
{{ $t("options.missed") }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|