fix: implement fragment

myparcelnl · Oct 12, 2023 · 3d08ad9 · 3d08ad9
1 parent 8d99526
commit 3d08ad9
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 91 deletions.
diff --git a/src/.vuepress/theme/client/components/global/Integration.vue b/src/.vuepress/theme/client/components/global/Integration.vue
@@ -15,8 +15,10 @@
         'rounded-lg',
         'transition-all',
       ]">
-      <div
+      <Fragment
         v-if="data.image"
+        :component="data.url ? AutoLink : 'div'"
+        :item="data.url"
         class="flex grow px-3 py-5 relative"
         :class="[
           data.classes,
@@ -30,14 +32,13 @@
           :src="`/integrations/${data.image}`"
           role="none"
           image-class="m-auto"
-          :url="data.url"
           :alt="`${data.title} logo`" />
         <Icon
           v-if="data.internal"
           title="Maintained by MyParcel"
           icon="myparcel"
           class="absolute right-2 text-xl top-1" />
-      </div>
+      </Fragment>
 
       <div class="border-t dark:bg-zinc-800 p-3">
         <span
@@ -71,47 +72,28 @@
   </div>
 </template>
 
-<script lang="ts">
-import {computed, type ComputedRef, defineComponent, type PropType} from 'vue';
+<script lang="ts" setup>
+import {computed, type ComputedRef} from 'vue';
 import {type IntegrationDefinition, useIntegrations} from '@mptheme/client/composables/useIntegrations';
 import {useTranslate} from '@mptheme/client/composables';
 import MPImg from '@mptheme/client/components/global/MPImg.vue';
-import AutoLink from '@mptheme/client/components/global/AutoLink.vue';
 import Icon from '@mptheme/client/components/common/icon/Icon.vue';
+import Fragment from '../Fragment.vue';
+import AutoLink from './AutoLink.vue';
 
-export default defineComponent({
-  name: 'Integration',
-  components: {
-    AutoLink,
-    Icon,
-    MPImg,
-  },
-
-  props: {
-    name: {
-      type: String,
-      default: null,
-    },
-
-    integration: {
-      type: Object as PropType<IntegrationDefinition>,
-      default: null,
-    },
-  },
-
-  setup: (props) => {
-    if (!props.name && !props.integration) {
-      throw new Error('Either a name or integration prop must be provided to use <Integration />.');
-    }
+const props = defineProps<{
+  name?: string;
+  integration?: IntegrationDefinition;
+}>();
 
-    const translate = useTranslate();
-    const integrations = useIntegrations();
+if (!props.name && !props.integration) {
+  throw new Error('Either a name or integration prop must be provided to use <Integration />.');
+}
 
-    const data: ComputedRef<IntegrationDefinition> = computed(() => {
-      return props.integration ?? integrations.value.find(({name}) => name === props.name);
-    });
+const translate = useTranslate();
+const integrations = useIntegrations();
 
-    return {translate, data};
-  },
+const data: ComputedRef<IntegrationDefinition> = computed(() => {
+  return props.integration ?? integrations.value.find(({name}) => name === props.name)!;
 });
 </script>
diff --git a/src/.vuepress/theme/client/components/global/MPImg.vue b/src/.vuepress/theme/client/components/global/MPImg.vue
@@ -4,62 +4,28 @@
       v-if="loading"
       class="animate-pulse bg-black bg-opacity-5 dark:bg-white h-full rounded w-full" />
 
-    <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"
-        :class="[
-          imageClass,
-          {
-            'no-style': noStyle,
-          },
-        ]"
-        :alt="alt"
-        @dragstart.prevent="null"
-        @loadstart="onLoadStart"
-        @load="onLoad"
-        @error="onError" />
-    </Fragment>
+    <img
+      :src="src"
+      class="max-h-full"
+      :class="[
+        imageClass,
+        {
+          'no-style': noStyle,
+        },
+      ]"
+      :alt="alt"
+      @dragstart.prevent="null"
+      @loadstart="onLoadStart"
+      @load="onLoad"
+      @error="onError" />
   </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';
+import {type PropType, defineComponent, ref} from 'vue';
 
 export default defineComponent({
   name: 'MPImg',
-  components: {
-    AutoLink,
-    Fragment,
-  },
-
   props: {
     src: {
       type: String,
@@ -76,11 +42,6 @@ export default defineComponent({
       default: null,
     },
 
-    url: {
-      type: String,
-      default: null,
-    },
-
     /**
      * Ignore the default styles added to images on a content page.
      */