ui/web/src/components/buttons/ToggleButton.vue

   1 <template>
   2   <Button
   3     :class="{ on: state.status }"
   4     @click="click()"
   5   >
   6     <slot />
   7   </Button>
   8 </template>
   9
  10 <script setup lang="ts">
  11 import Button from '@/components/buttons/Button.vue'
  12 import { getFromLocalStorage, setToLocalStorage } from '@/composables'
  13 import { ref } from 'vue'
  14
  15 const props = defineProps<{
  16   id: string
  17   off?: () => void
  18   on?: () => void
  19   shared?: boolean
  20   status?: boolean
  21 }>()
  22
  23 const $emit = defineEmits(['clicked'])
  24
  25 const id = props.shared === true ? `shared-toggle-button-${props.id}` : `toggle-button-${props.id}`
  26
  27 const state = ref<{ status: boolean }>({
  28   status: getFromLocalStorage<boolean>(id, props.status ?? false),
  29 })
  30
  31 const click = (): void => {
  32   if (props.shared === true) {
  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)
  42   if (getFromLocalStorage<boolean>(id, props.status ?? false)) {
  43     props.on?.()
  44   } else {
  45     props.off?.()
  46   }
  47   $emit('clicked', getFromLocalStorage<boolean>(id, props.status ?? false))
  48 }
  49 </script>
  50
  51 <style>
  52 .on {
  53   background-color: lightgrey;
  54   border-style: inset;
  55 }
  56 </style>