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

   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
  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
  21 const $emit = defineEmits(['clicked'])
  22
  23 const id = props.shared === true ? `shared-toggle-button-${props.id}` : `toggle-button-${props.id}`
  24
  25 const state = ref<{ status: boolean }>({
  26   status: getFromLocalStorage<boolean>(id, props.status ?? false)
  27 })
  28
  29 const click = (): void => {
  30   if (props.shared === true) {
  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)
  40   if (getFromLocalStorage<boolean>(id, props.status ?? false)) {
  41     props.on?.()
  42   } else {
  43     props.off?.()
  44   }
  45   $emit('clicked', getFromLocalStorage<boolean>(id, props.status ?? false))
  46 }
  47 </script>
  48
  49 <style>
  50 .on {
  51   background-color: lightgrey;
  52   border-style: inset;
  53 }
  54 </style>