vue-pult/docs/migration/header/SHIFT_BUTTON.md

Документация по переносу кнопки "Смена" в хедере

Общая структура в React

• Расположение: В AppHeader.tsx, правая часть flex, первая кнопка.
• Тип: Button элемент с @click={onOpenShift}, title="Открыть смену".
• Зависимости: Tailwind CSS, lucide-react (Calendar icon).
• JSX: Смена .

Элементы

• Иконка: Calendar (w-4 h-4, белая).
• Текст: "Смена" (text-sm).
• Title: "Открыть смену" (tooltip).
• Handler: onOpenShift — вызывает модал ShiftModal.

Стили (Tailwind примеры)

• Основной: bg-blue-600 text-white px-3 py-1.5 rounded text-sm transition-colors.
• Hover: hover:bg-blue-700.
• Responsive: text-xs на mobile, min-height 44px touch.

Взаимодействие

• Клик: Вызывает props.onOpenShift, открывает ShiftModal для управления сменой.
• В Dashboard: .

Vue маппинг

• : <button @click="onOpenShift" class="bg-blue-600 hover:bg-blue-700 ..." title="Открыть смену"> Смена .
• defineProps: { onOpenShift: Function }.
• Импорт: import { Calendar } from 'lucide-vue-next'.