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