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