fix: feedback

myparcelnl · Oct 12, 2023 · 927ddff · 927ddff
1 parent ebfeb4a
commit 927ddff
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 5 deletions.
diff --git a/src/.vuepress/theme/client/components/Fragment.vue b/src/.vuepress/theme/client/components/Fragment.vue
@@ -0,0 +1,23 @@
+<template>
+  <component
+    :is="component"
+    v-if="component">
+    <slot />
+  </component>
+  <slot v-else />
+</template>
+
+<script lang="ts">
+import {type PropType, defineComponent} from 'vue';
+import {type ComponentOrHtmlElement} from '../../../../../types/types';
+
+export default defineComponent({
+  name: 'Fragment',
+  props: {
+    component: {
+      type: [String, Object] as PropType<ComponentOrHtmlElement>,
+      default: null,
+    },
+  },
+});
+</script>
diff --git a/src/.vuepress/theme/client/components/global/MPImg.vue b/src/.vuepress/theme/client/components/global/MPImg.vue
@@ -4,10 +4,32 @@
       v-if="loading"
       class="animate-pulse bg-black bg-opacity-5 dark:bg-white h-full rounded w-full" />
 
-    <component
-      :is="url ? 'a' : 'span'"
-      :href="url || ''"
-      class="flex flex-grow">
+    <Fragment :component="url ? 'AutoLink' : null">
+      <Suspense>
+        <AutoLink
+          :href="url || ''"
+          :item="{
+            text: alt,
+            link: url,
+          }"
+          class="flex flex-grow">
+          <img
+            :src="src"
+            class="max-h-full"
+            :class="[
+              imageClass,
+              {
+                'no-style': noStyle,
+              },
+            ]"
+            :alt="alt"
+            @dragstart.prevent="null"
+            @loadstart="onLoadStart"
+            @load="onLoad"
+            @error="onError" />
+        </AutoLink>
+      </Suspense>
+
       <img
         :src="src"
         class="max-h-full"
@@ -22,15 +44,22 @@
         @loadstart="onLoadStart"
         @load="onLoad"
         @error="onError" />
-    </component>
+    </Fragment>
   </div>
 </template>
 
 <script lang="ts">
 import {PropType, defineComponent, ref} from 'vue';
+import AutoLink from '@mptheme/client/components/global/AutoLink.vue';
+import Fragment from '@mptheme/client/components/Fragment.vue';
 
 export default defineComponent({
   name: 'MPImg',
+  components: {
+    AutoLink,
+    Fragment,
+  },
+
   props: {
     src: {
       type: String,

diff --git a/types/types.d.ts b/types/types.d.ts
@@ -11,5 +11,7 @@ declare interface SidebarItemV1 {
 
 declare type SidebarV1ConfigArray = (SidebarItemV1 | string)[];
 
+export type ComponentOrHtmlElement = string | Component | undefined;
+
 declare const __VUEPRESS_DEV__: boolean;
 declare const __VUEPRESS_SSR__: boolean;