@explorer-1/vue 1.1.16 → 1.1.18

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @explorer-1/vue
 
+## 1.1.18
+
+### Patch Changes
+
+- 008fc92: Fixing NuxtLink resolution error in BaseLink
+
+## 1.1.17
+
+### Patch Changes
+
+- 873cf1d: Fixing bug in AttractionCard with nested BaseLink components
+
 ## 1.1.16
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/AttractionCard/AttractionCard.vue

@@ -94,7 +94,7 @@ const props = defineProps({
     >
       <div class="col-span-9">
         <div
-          v-if="theme"
+          v-if="props.theme"
           class="text-subtitle-sm md:text-subtitle mb-3 md:mb-5 text-gray-mid-dark"
         >
           {{ props.theme }}
@@ -121,6 +121,7 @@ const props = defineProps({
           </div>
           <BaseLink
             v-if="props.url"
+            custom-element-type="div"
             class="mt-5"
             variant="primary"
             :href="props.url"
@@ -135,7 +136,7 @@ const props = defineProps({
       >
         <BaseImagePlaceholder aspect-ratio="square">
           <BaseImage
-            v-if="props.image.src"
+            v-if="props.image?.src"
             :src="props.image.src.url"
             :width="props.image.src.width"
             :height="props.image.src.height"
@@ -154,6 +155,7 @@ const props = defineProps({
         </div>
         <BaseLink
           v-if="props.url"
+          custom-element-type="div"
           class="mt-5"
           variant="primary"
           :href="props.url"

package/src/components/BaseLink/BaseLink.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, type PropType } from 'vue'
+import { defineComponent, resolveComponent, type PropType } from 'vue'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
 import { eventBus } from './../../utils/eventBus'
@@ -30,6 +30,13 @@ export default defineComponent({
     MixinAnimationCaret
   },
   props: {
+    /** Override html element (useful for things that should look like a link but aren't links) */
+    customElementType: {
+      type: String,
+      default: undefined,
+      validator: (prop: string): boolean => ['span', 'button', 'div'].includes(prop)
+    },
+    /** Style of link: primary, secondary, default, none */
     variant: {
       type: String as PropType<VariantsKey>,
       required: false,
@@ -141,6 +148,10 @@ export default defineComponent({
   ],
   computed: {
     ...mapStores(useThemeStore),
+    dynamicLinkComponent() {
+      // Resolves the NuxtLink component for Vue 3's dynamic <component> binding
+      return this.customElementType || resolveComponent('NuxtLink')
+    },
     computedVariants() {
       if (this.usePrimaryColor) {
         return primaryColorVariants
@@ -263,7 +274,8 @@ export default defineComponent({
 <template>
   <div>
     <!-- annoyingly repetive due to complexities around `to` and @click.native -->
-    <nuxt-link
+    <component
+      :is="dynamicLinkComponent"
       v-if="computedTo"
       class="group"
       :class="computedClass"
@@ -302,8 +314,9 @@ export default defineComponent({
       <template v-else>
         <slot></slot>
       </template>
-    </nuxt-link>
-    <a
+    </component>
+    <component
+      :is="customElementType || 'a'"
       v-else-if="computedHref"
       :href="computedHref"
       class="group"
@@ -341,6 +354,6 @@ export default defineComponent({
       <template v-else>
         <slot></slot>
       </template>
-    </a>
+    </component>
   </div>
 </template>