Keep filters mutually exclusive

This commit is contained in:
Eason Li 2026-01-05 09:23:46 +08:00
parent 01dfd2ec26
commit e427ae92ba
2 changed files with 23 additions and 4 deletions

View file

@ -1,8 +1,15 @@
<script setup lang="ts">
import Switch from './Switch.vue'
const toggleIndexes = () =>
document.documentElement.classList.toggle('indexes-only')
const toggleIndexes = () => {
const root = document.documentElement
const enabling = !root.classList.contains('indexes-only')
root.classList.toggle('indexes-only')
if (enabling && root.classList.contains('starred-only')) {
root.classList.remove('starred-only')
}
}
</script>
<template>

View file

@ -3,9 +3,17 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'
import Switch from './Switch.vue'
const isDisabled = ref(false)
const switchKey = ref(0)
const syncDisabled = () => {
isDisabled.value = document.documentElement.classList.contains('indexes-only')
const root = document.documentElement
const disabled = root.classList.contains('indexes-only')
isDisabled.value = disabled
if (disabled && root.classList.contains('starred-only')) {
root.classList.remove('starred-only')
switchKey.value += 1
}
}
let observer: MutationObserver | undefined
@ -28,7 +36,11 @@ const toggleStarred = () => {
</script>
<template>
<Switch :class="{ disabled: isDisabled }" @click="toggleStarred()" />
<Switch
:key="switchKey"
:class="{ disabled: isDisabled }"
@click="toggleStarred()"
/>
</template>
<style>