Merge pull request #6832 from kodadot/beta

kodadot · Aug 20, 2023 · 63d4be4 · 63d4be4
2 parents 1474e85 + c948392
commit 63d4be4
Show file tree

Hide file tree

Showing 16 changed files with 370 additions and 683 deletions.
diff --git a/components/redirect/RedirectModal.vue b/components/redirect/RedirectModal.vue
@@ -69,7 +69,7 @@ const handleRedirect = () => {
 </style>
 
 <style lang="scss">
-.redirect-modal .modal-content {
-  width: auto;
+.redirect-modal {
+  z-index: 1000;
 }
 </style>
diff --git a/components/redirect/useRedirectModal.ts b/components/redirect/useRedirectModal.ts
@@ -6,6 +6,7 @@ import {
   isExternal,
 } from '@/utils/url'
 import { useEventListener } from '@vueuse/core'
+import type { Ref } from 'vue/types'
 
 function isWhiteList(url: string) {
   const urlObj = new URL(url)
@@ -29,17 +30,16 @@ const showModal = (url: string, i18n: VueI18n, modal) => {
   modal.open({
     component: RedirectModal,
     canCancel: ['outside', 'escape'],
-    rootClass: 'redirect-modal',
+    rootClass: 'redirect-modal neo-modal',
     props: {
       url,
       i18n,
     },
   })
 }
 
-export const useRedirectModal = (target: string) => {
+export const useRedirectModal = (element: Ref<HTMLElement | null>) => {
   const { $i18n, $neoModal } = useNuxtApp()
-  const _dom = computed(() => document.querySelector(target) || document.body)
 
   const handleLink = (event: Event) => {
     let ele = event.target as HTMLLinkElement
@@ -56,7 +56,7 @@ export const useRedirectModal = (target: string) => {
     }
   }
 
-  useEventListener(_dom.value, 'click', handleLink)
+  useEventListener(element, 'click', handleLink)
 }
 
 export default useRedirectModal
diff --git a/components/shared/Markdown.vue b/components/shared/Markdown.vue
@@ -1,5 +1,6 @@
 <template>
   <VueMarkdown
+    ref="markdown"
     :source="source"
     :options="highlightOptions"
     class="content-markdown" />
@@ -10,11 +11,13 @@ import VueMarkdown from 'vue-markdown-render'
 import hljs from 'highlight.js'
 import { useRedirectModal } from '@/components/redirect/useRedirectModal'
 
+const markdown = ref<HTMLElement | null>(null)
+
 defineProps<{
   source: string
 }>()
 
-useRedirectModal('.content-markdown')
+useRedirectModal(markdown)
 
 const highlightOptions = {
   html: true,