portal/app/resources/js/components/ui/DensityToggle.vue

<script setup lang="ts">
import { useDensity, type Density } from '../../composables/useDensity';

const { density, setDensity } = useDensity();

const emit = defineEmits<{ change: [Density] }>();

function pick(d: Density): void {
    setDensity(d);
    emit('change', d);
}
</script>

<template>
    <div class="ld-density-toggle" role="group" aria-label="Плотность таблицы">
        <button
            type="button"
            class="ld-density-toggle__btn"
            :class="{ 'ld-density-toggle__btn--active': density === 'compact' }"
            @click="pick('compact')"
        >
            Компакт
        </button>
        <button
            type="button"
            class="ld-density-toggle__btn"
            :class="{ 'ld-density-toggle__btn--active': density === 'comfortable' }"
            @click="pick('comfortable')"
        >
            Комфорт
        </button>
    </div>
</template>

<style scoped>
.ld-density-toggle {
    display: inline-flex;
    background: var(--liderra-surface);
    border: 1px solid var(--liderra-line);
    border-radius: var(--radius-8);
    padding: 2px;
}
.ld-density-toggle__btn {
    background: transparent;
    border: none;
    padding: 5px 10px;
    border-radius: var(--radius-6);
    font-size: 11px;
    color: var(--liderra-muted);
    cursor: pointer;
    font-family: inherit;
    transition:
        background 200ms cubic-bezier(0.16, 1, 0.3, 1),
        color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ld-density-toggle__btn--active {
    background: rgba(1, 32, 25, 0.08);
    color: var(--liderra-noir);
}
</style>