Toggle Starred

This commit is contained in:
taskylizard
2023-11-12 13:39:41 +05:30
parent 054e91e6ff
commit d58d95b768
10 changed files with 92 additions and 109 deletions

View File

@@ -2,6 +2,7 @@
import Field from "./CardField.vue";
import Modal from "./Modal.vue";
import InputField from "./InputField.vue";
import ToggleStarred from "./ToggleStarred.vue";
</script>
<template>
@@ -20,11 +21,11 @@ import InputField from "./InputField.vue";
<Modal />
</template>
</InputField>
<!-- <InputField id="toggle-starred" label="Toggle Starred"> -->
<!-- <template #display> -->
<!-- <button class="p-[4px 8px] text-xl i-carbon:star"></button> -->
<!-- </template> -->
<!-- </InputField> -->
<InputField id="toggle-starred" label="Toggle Starred">
<template #display>
<ToggleStarred />
</template>
</InputField>
</div>
</template>

View File

@@ -0,0 +1,13 @@
<script setup lang="ts">
const toggleStarred = () => document.documentElement.classList.toggle("starred-only");
</script>
<template>
<button class="p-[4px 8px] text-xl i-carbon:star" @click="toggleStarred()" />
</template>
<style>
.starred-only li:not(.starred) {
display: none;
}
</style>