Toggle Starred
This commit is contained in:
@@ -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>
|
||||
|
||||
|
13
.vitepress/theme/components/ToggleStarred.vue
Normal file
13
.vitepress/theme/components/ToggleStarred.vue
Normal 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>
|
Reference in New Issue
Block a user