| 1 | <template> |
| 2 | <div class="license-viewer flex items-center justify-center gap-4" :class="{ 'has-side': !!key }"> |
| 3 | <div class="main-box"> |
| 4 | <LicenseFeatures |
| 5 | :hide-key="!!key" |
| 6 | :license-data="details" |
| 7 | class="h-full" |
| 8 | :class="{ 'mt-8': !key }" |
| 9 | @license-key-loaded="licenseKeyLoaded" |
| 10 | /> |
| 11 | </div> |
| 12 | <div class="side-box"> |
| 13 | <n-scrollbar style="max-width: 100%"> |
| 14 | <LicenseDetails v-if="key" hide-features class="min-h-full" @license-loaded="licenseLoaded" /> |
| 15 | </n-scrollbar> |
| 16 | </div> |
| 17 | </div> |
| 18 | </template> |
| 19 | |
| 20 | <script setup lang="ts"> |
| 21 | import type { License, LicenseKey } from "@/types/license.d" |
| 22 | import { NScrollbar } from "naive-ui" |
| 23 | import { ref } from "vue" |
| 24 | import LicenseDetails from "./LicenseDetails.vue" |
| 25 | import LicenseFeatures from "./LicenseFeatures.vue" |
| 26 | |
| 27 | const emit = defineEmits<{ |
| 28 | (e: "licenseKeyLoaded", value: LicenseKey): void |
| 29 | }>() |
| 30 | |
| 31 | const key = ref<LicenseKey | undefined>(undefined) |
| 32 | const details = ref<License | undefined>(undefined) |
| 33 | |
| 34 | function licenseKeyLoaded(licenseKey: LicenseKey) { |
| 35 | key.value = licenseKey |
| 36 | emit("licenseKeyLoaded", licenseKey) |
| 37 | } |
| 38 | |
| 39 | function licenseLoaded(license: License) { |
| 40 | details.value = license |
| 41 | } |
| 42 | </script> |
| 43 | |
| 44 | <style lang="scss" scoped> |
| 45 | .license-viewer { |
| 46 | height: 100%; |
| 47 | |
| 48 | .main-box { |
| 49 | width: 450px; |
| 50 | min-width: 300px; |
| 51 | } |
| 52 | .side-box { |
| 53 | overflow: hidden; |
| 54 | transition: all 0.3s var(--bezier-ease); |
| 55 | border-radius: var(--border-radius); |
| 56 | } |
| 57 | &.has-side { |
| 58 | align-items: stretch; |
| 59 | .side-box { |
| 60 | flex-grow: 1; |
| 61 | } |
| 62 | } |
| 63 | |
| 64 | @media (max-width: 800px) { |
| 65 | flex-direction: column; |
| 66 | |
| 67 | .main-box { |
| 68 | width: unset; |
| 69 | min-width: unset; |
| 70 | max-width: unset; |
| 71 | } |
| 72 | } |
| 73 | } |
| 74 | </style> |