| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- transition(name='modal-fade')
- .fixed.inset-0.overflow-y-auto.z-50(
- v-if='isVisible'
- role='dialog'
- :aria-labelledby='titleId'
- aria-modal='true'
- )
- .flex.items-end.justify-center.min-h-screen.pt-4.px-4.pb-20.text-center(class='sm:block sm:p-0')
- //- Оверлей :cite[8]
- .fixed.inset-0.bg-gray-600.bg-opacity-75.transition-opacity(
- @click='closeModal'
- :class='{ "cursor-pointer": closeOnOverlay }'
- aria-hidden='true'
- )
- //- Вертикальное выравнивание
- span.hidden(class='sm:inline-block sm:align-middle sm:h-screen' aria-hidden='true') ​
- //- Контент модального окна
- .inline-block.align-bottom.bg-white.rounded-lg.text-left.overflow-hidden.shadow-xl.transform.transition-all(
- class='dark:bg-gray-800 sm:my-8 sm:align-middle sm:max-w-lg sm:w-full'
- :class='contentClass'
- role='document'
- )
- .modal-content
- //- Заголовок
- .modal-header.bg-primary.p-6(class='sm:px-6')
- .flex.items-center.justify-between
- h3.text-lg.leading-6.font-medium.text-white(:id='titleId')
- slot(name='title') {{ title }}
- button.modal-close.p-2.rounded-full.transition-colors(
- @click='closeModal'
- class='hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white'
- aria-label='Закрыть окно'
- )
- svg.w-5.h-5.text-white(fill='none' stroke='currentColor' viewBox='0 0 24 24')
- path(stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12')
- //- Тело модального окна
- .modal-body.p-6(class='sm:px-6')
- slot(name='body')
- .prose.max-w-none(v-if='content' v-html='content' class="class-dark:prose-invert")
- //- Футер (опционально)
- .modal-footer.bg-gray-50.p-6.flex.justify-end.space-x-3(
- class='dark:bg-gray-700 sm:px-6'
- v-if='showFooter'
- )
- slot(name='footer')
- button.secondary-btn.px-4.py-2.text-sm.font-medium.rounded-lg.transition-colors(
- @click='closeModal'
- class='bg-gray-300 text-gray-700 hover:bg-gray-400 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500'
- ) Отмена
- button.primary-btn.px-4.py-2.text-sm.font-medium.rounded-lg.transition-colors(
- @click='handleConfirm'
- class='bg-accent text-white hover:bg-yellow-600'
- ) Подтвердить
|
