source: main/trunk/model-interfaces-dev/atea/ocr/src/components/TabBar.vue@ 35752

<template>
<div class="container">
    <div class="tabs">
        <div v-for="tab of tabs" :key="tab">
            <input type="radio" name="tabs" :id="tab.value" :value="tab.value" class="radio" v-model="internalSelected" />
            <label class="tab" :for="tab.value">{{ tab.label }}</label>
        </div>
    </div>
</div>
</template>

<style scoped lang="scss">
.container {
    display: flex;
    justify-content: flex-start;
    padding: 0;
    width: auto;
}

.tabs {
    display: flex;
}

.radio {
    display: none;

    &:checked {
        & + label {
            color: var(--bg-color);
            border-bottom: 2px solid var(--bg-color);
            background-color: rgba(var(--bg-color-raw), 0.05);
        }
    }
}

.tab {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0.4em 1em;
    min-width: 8em;
    min-height: 3em;

    font-size: 1.25rem;
    cursor: pointer;
    border: 2px solid transparent; // Prevents attempting to animate the border height

    transition-duration: 0.15s;
}
</style>

<script>
export default {
    name: "TabBar",
    props: {
        /** @type {Array<{label: String, id: String}} */
        tabs: Array,
        modelValue: String
    },
    emits: [
        "update:modelValue"
    ],
    computed: {
        internalSelected: {
            get() {
                return this.modelValue;
            },
            set(newValue) {
                this.$emit("update:modelValue", newValue);
            }
        }
    },
    watch: {
    },
    methods: {
    },
    beforeMount() {
        if (this.modelValue === null && this.tabs.length > 0) {
            this.$emit("update:modelValue", this.tabs[0].value);
        }
    }
}
</script>