@privyid/persona 0.18.0 → 0.19.0

package/dist/components/avatar/utils/create-image.mjs

@@ -4,7 +4,7 @@ export function createText(text, size, bgColor, textColor) {
   return `data:image/svg+xml,<svg height="${size}" width="${size}" xmlns="http://www.w3.org/2000/svg"><rect fill="${encodeURIComponent(bgColor)}" x="0" y="0" height="${size}" width="${size}"></rect><text fill="${encodeURIComponent(textColor)}" dominant-baseline="central" text-anchor="middle" x="50%" y="50%" font-family="sans-serif" font-weight="600">${encodeURIComponent(text)}</text></svg>`;
 }
 export function createSpinner(width = 50, height = width) {
-  return `data:image/svg+xml,<svg v-once data-testid="spinner" class="spinner spinner-basic" width="${width}" height="${height}" viewBox="0 0 19 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><rect class="spinner-basic__bar" x="8.125" width="2.5" height="6.25" rx="1.25" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="15.1202" y="1.86199" width="2.5" height="6.25" rx="1.25" transform="rotate(45 15.1202 1.86199)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.125s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="18.75" y="8.125" width="2.5" height="6.25" rx="1.25" transform="rotate(90 18.75 8.125)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.250s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="16.888" y="15.1202" width="2.5" height="6.25" rx="1.25" transform="rotate(135 16.888 15.1202)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.375s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="8.125" y="12.5" width="2.5" height="6.25" rx="1.25" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.500s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="6.2814" y="10.7008" width="2.5" height="6.25" rx="1.25" transform="rotate(45 6.2814 10.7008)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.625s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="6.25" y="8.125" width="2.5" height="6.25" rx="1.25" transform="rotate(90 6.25 8.125)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.750s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="8.04917" y="6.2814" width="2.5" height="6.25" rx="1.25" transform="rotate(135 8.04917 6.2814)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.875s" repeatCount="indefinite" /></rect></svg>`;
+  return `data:image/svg+xml,<svg class="spinner spinner-basic" width="${width}" height="${height}" viewBox="0 0 19 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g transform="translate(4.75 4.75) scale(.5)"><rect class="spinner-basic__bar" x="8.125" width="2.5" height="6.25" rx="1.25" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="15.1202" y="1.86199" width="2.5" height="6.25" rx="1.25" transform="rotate(45 15.1202 1.86199)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.125s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="18.75" y="8.125" width="2.5" height="6.25" rx="1.25" transform="rotate(90 18.75 8.125)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.250s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="16.888" y="15.1202" width="2.5" height="6.25" rx="1.25" transform="rotate(135 16.888 15.1202)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.375s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="8.125" y="12.5" width="2.5" height="6.25" rx="1.25" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.500s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="6.2814" y="10.7008" width="2.5" height="6.25" rx="1.25" transform="rotate(45 6.2814 10.7008)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.625s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="6.25" y="8.125" width="2.5" height="6.25" rx="1.25" transform="rotate(90 6.25 8.125)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.750s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="8.04917" y="6.2814" width="2.5" height="6.25" rx="1.25" transform="rotate(135 8.04917 6.2814)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.875s" repeatCount="indefinite" /></rect></g></svg>`;
 }
 export function getAlias(name) {
   return name.split(" ").slice(0, 2).map((c) => c.at(0)).join("").toUpperCase();

package/dist/components/breadcrumbs/Breadcrumb.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import { defineComponent } from "vue-demi";
+import { defineComponent, provide } from "vue-demi";
 import BreadcrumbItem from "./BreadcrumbItem.vue";
 import BreadcrumbItemDropdown from "./BreadcrumbItemDropdown.vue";
 import DropdownItem from "../dropdown/DropdownItem.vue";
@@ -49,6 +49,10 @@ export default defineComponent({
       default: () => {
       }
     }
+  },
+  setup(_, { slots }) {
+    if (slots.divider)
+      provide("divider", slots.divider);
   }
 });
 </script>

package/dist/components/breadcrumbs/Breadcrumb.vue.d.ts

@@ -17,7 +17,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         };
         default: () => void;
     };
-}, unknown, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, void, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     items: {
         type: {
             (arrayLength: number): BreadcrumbItems[];

package/dist/components/breadcrumbs/BreadcrumbItem.vue

@@ -8,18 +8,24 @@
       :href="permalink">
       <slot />
     </component>
-    <IconChevron
+    <div
       v-if="!active"
-      data-testid="breadcrumbs-icon"
-      class="breadcrumbs__item__icon" />
+      data-testid="breadcrumbs-divider"
+      class="breadcrumbs__item__divider">
+      <component :is="divider" />
+    </div>
   </li>
 </template>
 
 <script>
-import { defineComponent, computed } from "vue-demi";
+import {
+  defineComponent,
+  computed,
+  inject,
+  h
+} from "vue-demi";
 import IconChevron from "@privyid/persona-icon/vue/chevron-right/20.vue";
 export default defineComponent({
-  components: { IconChevron },
   props: {
     href: {
       type: String,
@@ -48,10 +54,12 @@ export default defineComponent({
         return;
       return props.href;
     });
+    const divider = inject("divider", () => h(IconChevron));
     return {
       classNames,
       tagName,
-      permalink
+      permalink,
+      divider
     };
   }
 });
@@ -63,13 +71,13 @@ export default defineComponent({
     @apply inline-flex text-sm items-center capitalize;
 
     &:last-child {
-      & > .breadcrumbs__item__icon {
+      & > .breadcrumbs__item__divider {
         @apply hidden;
       }
     }
 
     &:not(:last-child) {
-      & > .breadcrumbs__item__icon {
+      & > .breadcrumbs__item__divider {
         @apply inline-flex ml-3;
       }
     }

package/dist/components/breadcrumbs/BreadcrumbItem.vue.d.ts

@@ -12,6 +12,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     classNames: import("vue-demi").ComputedRef<string[]>;
     tagName: import("vue-demi").ComputedRef<TagVariant>;
     permalink: import("vue-demi").ComputedRef<string | undefined>;
+    divider: () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
+        [key: string]: any;
+    }>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     href: {
         type: StringConstructor;

package/dist/components/breadcrumbs/BreadcrumbItemDropdown.vue

@@ -9,19 +9,26 @@
       size="xs">
       <slot />
     </Dropdown>
-    <IconChevron
+    <div
       v-if="!active"
-      data-testid="breadcrumbs-icon"
-      class="breadcrumbs__item__icon" />
+      data-testid="breadcrumbs-divider"
+      class="breadcrumbs__item__divider">
+      <component :is="divider" />
+    </div>
   </li>
 </template>
 
 <script>
-import { defineComponent, computed } from "vue-demi";
+import {
+  defineComponent,
+  computed,
+  inject,
+  h
+} from "vue-demi";
 import Dropdown from "../dropdown/Dropdown.vue";
 import IconChevron from "@privyid/persona-icon/vue/chevron-right/20.vue";
 export default defineComponent({
-  components: { Dropdown, IconChevron },
+  components: { Dropdown },
   props: {
     text: {
       type: String,
@@ -39,7 +46,8 @@ export default defineComponent({
         result.push("breadcrumbs__item--active");
       return result;
     });
-    return { classNames };
+    const divider = inject("divider", () => h(IconChevron));
+    return { classNames, divider };
   }
 });
 </script>

package/dist/components/breadcrumbs/BreadcrumbItemDropdown.vue.d.ts

@@ -9,6 +9,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
+    divider: () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
+        [key: string]: any;
+    }>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     text: {
         type: StringConstructor;

package/dist/components/button/Button.vue

@@ -1,9 +1,8 @@
 <template>
   <component
     :is="tagName"
-    :href="tagName === 'a' ? href : undefined"
-    :to="tagName === 'a' ? undefined : href"
-    :type="tagName === 'a' ? undefined : type"
+    :href="href"
+    :type="type"
     data-testid="btn"
     :class="classNames">
     <slot />
@@ -14,8 +13,7 @@
 import {
   computed,
   defineComponent,
-  inject,
-  resolveComponent
+  inject
 } from "vue-demi";
 import { BUTTONGROUP_SETTING } from "../button-group";
 import { INPUTGROUP_SETTING } from "../input-group";
@@ -72,12 +70,7 @@ export default defineComponent({
       return result;
     });
     const tagName = computed(() => {
-      if (props.href) {
-        if (typeof props.href === "string" && (props.href.startsWith("http") || props.href.startsWith("#")))
-          return "a";
-        return resolveComponent("router-link");
-      }
-      return "button";
+      return props.href ? "nuxt-link" : "button";
     });
     return { classNames, tagName };
   }

package/dist/components/button/Button.vue.d.ts

@@ -1,7 +1,7 @@
-import { PropType, type DefineComponent } from 'vue-demi';
+import { PropType } from 'vue-demi';
 import type { RouteLocationRaw } from 'vue-router';
-import { ColorVariant, SizeVariant, StyleVariant, TagVariant, TypeVariant } from '.';
-declare const _default: DefineComponent<{
+import { ColorVariant, SizeVariant, StyleVariant, TypeVariant } from '.';
+declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<StyleVariant>;
         default: string;
@@ -32,7 +32,7 @@ declare const _default: DefineComponent<{
     };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
-    tagName: import("vue-demi").ComputedRef<TagVariant | DefineComponent>;
+    tagName: import("vue-demi").ComputedRef<"button" | "nuxt-link">;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     variant: {
         type: PropType<StyleVariant>;
@@ -66,9 +66,9 @@ declare const _default: DefineComponent<{
     variant: StyleVariant;
     size: SizeVariant;
     type: TypeVariant;
-    icon: boolean;
     color: ColorVariant;
-    pill: boolean;
+    icon: boolean;
     href: RouteLocationRaw;
+    pill: boolean;
 }, {}>;
 export default _default;

package/dist/components/collapse/Collapse.vue

@@ -1,15 +1,11 @@
 <template>
-  <transition
-    name="collapse"
-    mode="out-in">
-    <div
-      v-show="model || isToggleable"
-      data-testid="collapse"
-      class="collapse"
-      :class="classNames">
-      <slot />
-    </div>
-  </transition>
+  <v-collapse
+    data-testid="collapse"
+    class="collapses"
+    :class="classNames"
+    :when="model || isToggleable">
+    <slot />
+  </v-collapse>
 </template>
 
 <script>
@@ -21,7 +17,9 @@ import {
 import { useVModel } from "../input";
 import { NAVBAR_SETTINGS } from "../navbar";
 import { useMediaQuery } from "@vueuse/core";
+import { Collapse } from "vue-collapsed";
 export default defineComponent({
+  components: { vCollapse: Collapse },
   props: {
     modelValue: {
       type: Boolean,
@@ -56,6 +54,8 @@ export default defineComponent({
       const result = [""];
       if (model.value)
         result.push("collapse--show");
+      else
+        result.push("collapse--hide");
       if (props.isNav)
         result.push("navbar--collapse");
       return result;
@@ -70,25 +70,7 @@ export default defineComponent({
 </script>
 
 <style lang="postcss">
-.collapse {
-  &&--show {
-    @apply block visible text-default;
-    @apply dark:text-dark-default;
-  }
-
-  &:not(&--show) {
-    @apply hidden;
-  }
-
-  &-enter-active,
-  &-leave-active {
-    @apply transition-[transform,opacity] origin-top duration-150 ease-in-out;
-  }
-
-  &-enter,
-  &-enter-from,
-  &-leave-to {
-    @apply scale-y-0 opacity-0;
-  }
+.collapses {
+  @apply transition-[height] duration-300 ease-out block;
 }
 </style>

package/dist/components/dropdown/Dropdown.vue.d.ts

@@ -131,15 +131,15 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     variant: StyleVariant;
     size: SizeVariant;
-    icon: boolean;
     color: ColorVariant;
-    pill: boolean;
+    icon: boolean;
+    divider: boolean;
     text: string;
+    pill: boolean;
     modelValue: boolean;
     disabled: boolean;
     placement: Placement;
     noCaret: boolean;
-    divider: boolean;
     menuClass: string | Record<string, any> | unknown[];
     buttonClass: string | Record<string, any> | unknown[];
     menuSize: MenuSizeVariant;

package/dist/components/input-file/InputFile.vue.d.ts

@@ -124,8 +124,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     disabled: boolean;
     readonly: boolean;
     modelModifiers: ModelModifier;
-    placeholder: string;
     multiple: boolean | MultipleType;
+    placeholder: string;
     maxlength: string | number;
     accept: string;
     clearOnCancel: boolean;

package/dist/components/label/Label.vue.d.ts

@@ -44,7 +44,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     variant: StyleVariant;
     size: SizeVariant;
-    dismissable: boolean;
     color: ColorVariant;
+    dismissable: boolean;
 }, {}>;
 export default _default;

package/dist/components/nav/Nav.vue

@@ -119,7 +119,9 @@ export default defineComponent({
       @apply dark:text-dark-subtle;
 
       &:hover,
-      &--active {
+      &--active,
+      &.router-link-active:not(.nav__link--exact),
+      &.router-link-exact-active.nav__link--exact {
         @apply text-default;
         @apply dark:text-dark-default;
       }
@@ -148,7 +150,9 @@ export default defineComponent({
     * with border-bottom
     */
     .nav__link {
-      &--active {
+      &--active,
+      &.router-link-active:not(.nav__link--exact),
+      &.router-link-exact-active.nav__link--exact {
         &:not(.nav__link--disabled) {
           @apply border-b-inverse;
           @apply dark:border-b-dark-inverse;
@@ -164,7 +168,9 @@ export default defineComponent({
       .nav__link {
         @apply border-y-0;
 
-        &--active {
+        &--active,
+        &.router-link-active:not(.nav__link--exact),
+        &.router-link-exact-active.nav__link--exact {
           &:not(.nav__link--disabled) {
             @apply border-r border-r-inverse rounded-tr-none;
             @apply dark:border-r-dark-inverse;
@@ -176,7 +182,9 @@ export default defineComponent({
         .nav__link {
           @apply border-r-0;
 
-          &--active {
+          &--active,
+          &.router-link-active:not(.nav__link--exact),
+          &.router-link-exact-active.nav__link--exact {
             &:not(.nav__link--disabled) {
               @apply border-l border-l-inverse rounded-tl-none;
               @apply dark:border-l-dark-inverse;
@@ -198,7 +206,9 @@ export default defineComponent({
     * except in bottom-side
     */
     .nav__link {
-      &--active {
+      &--active,
+      &.router-link-active:not(.nav__link--exact),
+      &.router-link-exact-active.nav__link--exact {
         &:not(.nav__link--disabled) {
           @apply border-t-default border-x-default bg-base;
           @apply dark:border-t-dark-default dark:border-x-dark-default dark:bg-dark-base;
@@ -212,7 +222,9 @@ export default defineComponent({
     */
     &.nav--vertical {
       .nav__link {
-        &--active {
+        &--active,
+        &.router-link-active:not(.nav__link--exact),
+        &.router-link-exact-active.nav__link--exact {
           &:not(.nav__link--disabled) {
             @apply border-l-default border-y-default border-r-transparent bg-base rounded-l rounded-r-none;
             @apply dark:border-l-dark-default dark:border-y-dark-default dark:border-r-transparent dark:bg-dark-base;
@@ -222,7 +234,9 @@ export default defineComponent({
 
       &.nav--align-right {
         .nav__link {
-          &--active {
+          &--active,
+          &.router-link-active:not(.nav__link--exact),
+          &.router-link-exact-active.nav__link--exact {
             &:not(.nav__link--disabled) {
               @apply border-r-default border-y-default border-l-transparent rounded-r rounded-l-none;
               @apply dark:border-r-dark-default dark:border-y-dark-default dark:border-l-transparent;
@@ -245,7 +259,9 @@ export default defineComponent({
     * with background
     */
     .nav__link {
-      &--active {
+      &--active,
+      &.router-link-active:not(.nav__link--exact),
+      &.router-link-exact-active.nav__link--exact {
         &:not(.nav__link--disabled) {
           @apply bg-base rounded-b;
           @apply dark:bg-dark-base;
@@ -260,7 +276,9 @@ export default defineComponent({
     */
     &.nav--condensed {
       .nav__link {
-        &--active {
+        &--active,
+        &.router-link-active:not(.nav__link--exact),
+        &.router-link-exact-active.nav__link--exact {
           @apply bg-transparent;
           @apply dark:bg-transparent;
         }

package/dist/components/nav/NavCollapse.vue

@@ -0,0 +1,78 @@
+<template>
+  <NavItem
+    ref="root"
+    class="nav__collapse"
+    :class="{ 'nav__collapse--expand': isExpand }"
+    data-testid="nav-collapse"
+    v-bind="$attrs"
+    @click.prevent="toggleExpand">
+    <template #icon>
+      <IconMore class="nav__collapse__icon" />
+    </template>
+    {{ isExpand ? showLessText : showMoreText }}
+  </NavItem>
+  <Collapse :model-value="isExpand">
+    <slot />
+  </Collapse>
+</template>
+
+<script>
+import Collapse from "../collapse/Collapse.vue";
+import NavItem from "../nav/NavItem.vue";
+import IconMore from "@privyid/persona-icon/vue/chevron-down/20.vue";
+import {
+  defineComponent,
+  onMounted,
+  ref
+} from "vue-demi";
+import { templateRef } from "@vueuse/core";
+export default defineComponent({
+  components: {
+    Collapse,
+    NavItem,
+    IconMore
+  },
+  props: {
+    showMoreText: {
+      type: String,
+      default: "More"
+    },
+    showLessText: {
+      type: String,
+      default: "Less"
+    }
+  },
+  setup() {
+    const nav = templateRef("root");
+    const isExpand = ref(false);
+    function toggleExpand() {
+      isExpand.value = !isExpand.value;
+    }
+    onMounted(() => {
+      if (nav.value.$el) {
+        isExpand.value = nav.value.$el.querySelectorAll(".router-link-active:not(.nav__link--exact),.router-link-exact-active.nav__link--exact").length > 0;
+      }
+    });
+    return {
+      isExpand,
+      toggleExpand
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.nav__collapse {
+  @apply select-none;
+
+  &__icon {
+    @apply transition-transform duration-150 ease-in-out;
+  }
+
+  &--expand {
+    .nav__collapse__icon {
+      @apply rotate-180;
+    }
+  }
+}
+</style>

package/dist/components/nav/NavCollapse.vue.d.ts

@@ -0,0 +1,26 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    showMoreText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showLessText: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    isExpand: import("vue-demi").Ref<boolean>;
+    toggleExpand: () => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    showMoreText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showLessText: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    showMoreText: string;
+    showLessText: string;
+}, {}>;
+export default _default;

package/dist/components/nav/NavItem.vue

@@ -3,11 +3,9 @@
     data-testid="nav-item"
     class="nav__item"
     :class="navItemClass">
-    <component
-      :is="tagName"
+    <nuxt-link
       data-testid="nav-link"
-      :href="isExternalLink ? link : undefined"
-      :to="isExternalLink ? undefined : href"
+      :href="link"
       :target="target"
       :class="[classNames, linkClass]">
       <span
@@ -22,15 +20,14 @@
         class="nav__link__label">
         <slot />
       </span>
-    </component>
+    </nuxt-link>
   </li>
 </template>
 
 <script>
 import {
   computed,
-  defineComponent,
-  resolveComponent
+  defineComponent
 } from "vue-demi";
 export default defineComponent({
   props: {
@@ -57,6 +54,10 @@ export default defineComponent({
         Object
       ],
       default: void 0
+    },
+    exact: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, { slots }) {
@@ -68,6 +69,8 @@ export default defineComponent({
         result.push("nav__link--disabled");
       if (slots.icon)
         result.push("nav__link--icon");
+      if (props.exact)
+        result.push("nav__link--exact");
       return result;
     });
     const navItemClass = computed(() => {
@@ -84,20 +87,10 @@ export default defineComponent({
         permalink = props.href;
       return permalink;
     });
-    const isExternalLink = computed(() => {
-      return !props.href || typeof props.href === "string" && (props.href.startsWith("http") || props.href.startsWith("#"));
-    });
-    const tagName = computed(() => {
-      if (isExternalLink.value)
-        return "a";
-      return resolveComponent("router-link");
-    });
     return {
       classNames,
       navItemClass,
-      link,
-      isExternalLink,
-      tagName
+      link
     };
   }
 });

package/dist/components/nav/NavItem.vue.d.ts

@@ -21,12 +21,14 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
+    exact: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
     navItemClass: import("vue-demi").ComputedRef<string[]>;
     link: import("vue-demi").ComputedRef<string | undefined>;
-    isExternalLink: import("vue-demi").ComputedRef<boolean>;
-    tagName: import("vue-demi").ComputedRef<string | import("vue-demi").ConcreteComponent<{}, any, any, import("vue-demi").ComputedOptions, import("vue-demi").MethodOptions>>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     active: {
         type: BooleanConstructor;
@@ -48,11 +50,16 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
+    exact: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     href: RouteLocationRaw;
     active: boolean;
     disabled: boolean;
     target: string | undefined;
+    exact: boolean;
     linkClass: string | Record<string, any> | unknown[];
 }, {}>;
 export default _default;