| 1 | <script setup lang="ts"> |
| 2 | import { recomputeAllPoppers } from 'floating-vue' |
| 3 | import { onMounted, watchEffect } from 'vue' |
| 4 | import { useNav } from '../composables/useNav' |
| 5 | import PrintContainer from '../internals/PrintContainer.vue' |
| 6 | import { windowSize } from '../state' |
| 7 | |
| 8 | const { isPrintMode } = useNav() |
| 9 | |
| 10 | watchEffect(() => { |
| 11 | if (isPrintMode) |
| 12 | (document.body.parentNode as HTMLElement).classList.add('print') |
| 13 | else |
| 14 | (document.body.parentNode as HTMLElement).classList.remove('print') |
| 15 | }) |
| 16 | |
| 17 | onMounted(() => { |
| 18 | recomputeAllPoppers() |
| 19 | }) |
| 20 | </script> |
| 21 | |
| 22 | <template> |
| 23 | <div id="page-root" class="grid grid-cols-[1fr_max-content]"> |
| 24 | <PrintContainer |
| 25 | class="w-full h-full" |
| 26 | :style="{ background: 'var(--slidev-slide-container-background, black)' }" |
| 27 | :width="windowSize.width.value" |
| 28 | /> |
| 29 | <div id="twoslash-container" /> |
| 30 | </div> |
| 31 | </template> |
| 32 | |
| 33 | <style lang="postcss"> |
| 34 | html.print, |
| 35 | html.print body, |
| 36 | html.print #app { |
| 37 | height: auto; |
| 38 | overflow: auto; |
| 39 | } |
| 40 | html.print #page-root { |
| 41 | height: auto; |
| 42 | overflow: hidden; |
| 43 | } |
| 44 | html.print * { |
| 45 | -webkit-print-color-adjust: exact; |
| 46 | } |
| 47 | html.print { |
| 48 | width: 100%; |
| 49 | height: 100%; |
| 50 | overflow: visible; |
| 51 | } |
| 52 | html.print body { |
| 53 | margin: 0 auto; |
| 54 | border: 0; |
| 55 | padding: 0; |
| 56 | float: none; |
| 57 | overflow: visible; |
| 58 | } |
| 59 | </style> |
| 60 |