| 1 | <script setup lang="ts"> |
| 2 | import { useVModel } from '@vueuse/core' |
| 3 | import { computed } from 'vue' |
| 4 | import { configs } from '../env' |
| 5 | import Modal from './Modal.vue' |
| 6 | |
| 7 | const props = defineProps({ |
| 8 | modelValue: { |
| 9 | default: false, |
| 10 | }, |
| 11 | }) |
| 12 | |
| 13 | const emit = defineEmits(['update:modelValue']) |
| 14 | const value = useVModel(props, 'modelValue', emit) |
| 15 | const hasInfo = computed(() => typeof configs.info === 'string') |
| 16 | </script> |
| 17 | |
| 18 | <template> |
| 19 | <Modal v-model="value" class="px-6 py-4"> |
| 20 | <div class="slidev-info-dialog slidev-layout flex flex-col gap-4 text-base"> |
| 21 | <div |
| 22 | v-if="hasInfo" |
| 23 | class="mb-4" |
| 24 | v-html="configs.info" |
| 25 | /> |
| 26 | <a |
| 27 | href="https://github.com/slidevjs/slidev" |
| 28 | target="_blank" |
| 29 | class="!opacity-100 !border-none !text-current" |
| 30 | > |
| 31 | <div class="flex gap-1 children:my-auto"> |
| 32 | <div class="opacity-50 text-sm mr-2">Powered by</div> |
| 33 | <img |
| 34 | class="w-5 h-5" |
| 35 | src="../assets/logo.png" |
| 36 | alt="Slidev logo" |
| 37 | > |
| 38 | <div style="color: #2082A6"> |
| 39 | <b>Sli</b>dev |
| 40 | </div> |
| 41 | </div> |
| 42 | </a> |
| 43 | </div> |
| 44 | </Modal> |
| 45 | </template> |
| 46 | |
| 47 | <style lang="postcss"> |
| 48 | .slidev-info-dialog { |
| 49 | @apply !p-4 max-w-150; |
| 50 | } |
| 51 | </style> |
| 52 |