akkoma-fe/src/components/settings_modal/helpers/boolean_setting.vue

<template>
  <label
    class="BooleanSetting"
  >
    <Checkbox
      :checked="state"
      @change="update"
      :disabled="disabled"
    >
      <span
        v-if="!!$slots.default"
        class="label"
        >
        <slot />
      </span>
      <ModifiedIcon :changed="isChanged" />
    </Checkbox>
  </label>
</template>

<script>
import { get, set } from 'lodash'
import Checkbox from 'src/components/checkbox/checkbox.vue'
import ModifiedIcon from './modified_icon.vue'
export default {
  props: [
    'path',
    'disabled'
  ],
  components: {
    Checkbox,
    ModifiedIcon
  },
  computed: {
    pathDefault () {
      const [firstSegment, ...rest] = this.path.split('.')
      return [firstSegment + 'DefaultValue', ...rest].join('.')
    },
    state () {
      return get(this.$parent, this.path)
    },
    isChanged () {
      return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
    }
  },
  methods: {
    update (e) {
      set(this.$parent, this.path, e)
    }
  }
}
</script>

<style lang="scss">
.BooleanSetting {
}
</style>