source: main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/ToggleButton.vue@ 35432

<template>
<button class="base" @click="toggle" :class="{ 'toggled': myValue }" type="button">
    <slot />
</button>
</template>

<style lang="scss" scoped>
.base {
    @extend .btn-fab;
    color: var(--primary-bg-color);
    background-color: var(--paper-color);
    box-shadow: var(--primary-box-shadow-thin);
}

.toggled {
    color: var(--primary-fg-color);
    background-color: var(--primary-bg-color);
}
</style>

<script>
export default {
    name: "ToggleButton",
    props: {
        modelValue: Boolean,
        reverseState: Boolean
    },
    emits: [ "update:modelValue" ],
    computed: {
        myValue: {
            get() {
                return this.reverseState ? !this.modelValue : this.modelValue;
            },
            set(newValue) {
                this.$emit("update:modelValue", this.reverseState ? !newValue : newValue);
            }
        }
    },
    methods: {
        toggle() {
            this.myValue = !this.myValue;
        }
    }
}
</script>