Commit | Line | Data |
---|---|---|
2610da71 JB |
1 | <template> |
2 | <Button :class="{ on: state.status }" @click="click()"> | |
3 | <slot></slot> | |
4 | </Button> | |
5 | </template> | |
6 | ||
7 | <script setup lang="ts"> | |
8 | import { ref } from 'vue' | |
84ec8d34 | 9 | |
2610da71 JB |
10 | import Button from '@/components/buttons/Button.vue' |
11 | import { getFromLocalStorage, setToLocalStorage } from '@/composables' | |
12 | ||
13 | const props = defineProps<{ | |
14 | id: string | |
15 | status?: boolean | |
16 | shared?: boolean | |
17 | on?: () => void | |
18 | off?: () => void | |
19 | }>() | |
20 | ||
83468764 JB |
21 | const $emit = defineEmits(['clicked']) |
22 | ||
2610da71 JB |
23 | const id = props.shared === true ? `shared-toggle-button-${props.id}` : `toggle-button-${props.id}` |
24 | ||
cf959670 | 25 | const state = ref<{ status: boolean }>({ |
2610da71 JB |
26 | status: getFromLocalStorage<boolean>(id, props.status ?? false) |
27 | }) | |
28 | ||
29 | const click = (): void => { | |
240fa4da | 30 | if (props.shared === true) { |
2610da71 JB |
31 | for (const key in localStorage) { |
32 | if (key !== id && key.startsWith('shared-toggle-button-')) { | |
33 | setToLocalStorage<boolean>(key, false) | |
34 | state.value.status = getFromLocalStorage<boolean>(key, false) | |
35 | } | |
36 | } | |
37 | } | |
38 | setToLocalStorage<boolean>(id, !getFromLocalStorage<boolean>(id, props.status ?? false)) | |
39 | state.value.status = getFromLocalStorage<boolean>(id, props.status ?? false) | |
2610da71 JB |
40 | if (getFromLocalStorage<boolean>(id, props.status ?? false)) { |
41 | props.on?.() | |
42 | } else { | |
43 | props.off?.() | |
44 | } | |
83468764 | 45 | $emit('clicked', getFromLocalStorage<boolean>(id, props.status ?? false)) |
2610da71 JB |
46 | } |
47 | </script> | |
48 | ||
49 | <style> | |
50 | .on { | |
51 | background-color: lightgrey; | |
754d8199 | 52 | border-style: inset; |
2610da71 JB |
53 | } |
54 | </style> |