2 <Button :class="{ on: state.status }" @click="click()">
7 <script setup lang="ts">
8 import { ref } from 'vue'
9 import Button from '@/components/buttons/Button.vue'
10 import { getFromLocalStorage, setToLocalStorage } from '@/composables'
12 const props = defineProps<{
20 const $emit = defineEmits(['clicked'])
22 const id = props.shared === true ? `shared-toggle-button-${props.id}` : `toggle-button-${props.id}`
24 const state = ref<{ status: boolean }>({
25 status: getFromLocalStorage<boolean>(id, props.status ?? false)
28 const click = (): void => {
29 if (props.shared === true) {
30 for (const key in localStorage) {
31 if (key !== id && key.startsWith('shared-toggle-button-')) {
32 setToLocalStorage<boolean>(key, false)
33 state.value.status = getFromLocalStorage<boolean>(key, false)
37 setToLocalStorage<boolean>(id, !getFromLocalStorage<boolean>(id, props.status ?? false))
38 state.value.status = getFromLocalStorage<boolean>(id, props.status ?? false)
39 if (getFromLocalStorage<boolean>(id, props.status ?? false)) {
44 $emit('clicked', getFromLocalStorage<boolean>(id, props.status ?? false))
50 background-color: lightgrey;