@privyid/persona 0.18.0 → 0.20.0

package/dist/components/heading/Heading.vue

@@ -2,6 +2,7 @@
   <component
     :is="elementNames"
     data-testid="heading"
+    class="heading"
     :class="classNames">
     <slot />
   </component>
@@ -73,16 +74,31 @@ export default defineComponent({
     * Weight variant
     * of heading
     */
-
-    :where(&--normal, &--medium, &--bold) {
+    &:not([class^='text-'], [class*='text-']) {
       @apply text-default;
       @apply dark:text-dark-default;
     }
 
+    &--thin {
+      @apply font-thin;
+    }
+
+    &--extralight {
+      @apply font-extralight;
+    }
+
+    &--light {
+      @apply font-light;
+    }
+
     &--normal {
       @apply font-normal;
     }
 
+    &--semibold {
+      @apply font-semibold;
+    }
+
     &--medium {
       @apply font-medium;
     }
@@ -91,6 +107,14 @@ export default defineComponent({
       @apply font-bold;
     }
 
+    &--extrabold {
+      @apply font-extrabold;
+    }
+
+    &--black {
+      @apply font-black;
+    }
+
     /**
     * Text transform
     * of heading

package/dist/components/heading/index.d.ts

@@ -1,3 +1,3 @@
 export type ElementVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type WeightVariant = 'normal' | 'medium' | 'bold';
+export type WeightVariant = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
 export type TransformVariant = 'normalcase' | 'lowercase' | 'capitalize' | 'uppercase';

package/dist/components/input/Input.vue.d.ts

@@ -27,7 +27,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     containerClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
     accept: {
@@ -65,7 +65,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     containerClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
     accept: {

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/input-pin/InputPin.vue.d.ts

@@ -72,8 +72,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    error: boolean;
     length: string | number;
+    error: boolean;
     size: SizeVariant;
     modelValue: string;
     disabled: boolean;

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

@@ -43,8 +43,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     onDismissed?: ((...args: any[]) => any) | undefined;
 }, {
     variant: StyleVariant;
-    size: SizeVariant;
     dismissable: boolean;
+    size: SizeVariant;
     color: ColorVariant;
 }, {}>;
 export default _default;

package/dist/components/list-group/ListGroupItem.vue

@@ -76,7 +76,7 @@ export default defineComponent({
     }
 
     a& {
-      @apply cursor-pointer text-default hover:bg-default-alpha;
+      @apply no-underline hover:no-underline cursor-pointer text-default hover:bg-default-alpha;
       @apply dark:text-dark-default dark:hover:bg-dark-default-alpha;
     }
 

package/dist/components/main/Main.vue

@@ -5,56 +5,59 @@
 </template>
 
 <style lang="postcss">
-:root {
+.main {
   --p-spacer: 1rem;
-}
 
-/**
-* Heading
-*/
-h1, h2, h3, h4, h5, h6 {
-  --p-heading-margin-bottom: calc(var(--p-spacer) * .5);
-  @apply mb-[var(--p-heading-margin-bottom)];
-}
+  /**
+  * Heading
+  */
+  h1, h2, h3, h4, h5, h6 {
+    --p-heading-margin-bottom: calc(var(--p-spacer) * .5);
+    @apply mb-[var(--p-heading-margin-bottom)];
+  }
 
-/**
-* Permalink
-*/
-a {
-  --p-color-link-hover: darken(theme(textColor.link), 5%);
-  --p-color-dark-link-hover: darken(theme(textColor.link), 5%);
-  @apply underline text-link hover:text-[color:var(--p-color-link-hover)];
-  @apply dark:text-dark-link hover:dark:text-[color:var(--p-color-dark-link-hover)];
-}
+  /**
+  * Permalink
+  */
+  a {
+    &:not(.navbar__brand, .sidebar__brand, .dropdown__item, .list-group__item, .btn, .nav__link, .breadcrumbs__item__link) {
+      --p-color-link-hover: darken(theme(textColor.link), 5%);
+      --p-color-dark-link-hover: darken(theme(textColor.link), 5%);
+      @apply underline text-link hover:text-[color:var(--p-color-link-hover)];
+      @apply dark:text-dark-link hover:dark:text-[color:var(--p-color-dark-link-hover)];
+    }
+  }
 
-/**
-* Paragraph
-*/
-p {
-  --p-paragraph-margin-bottom: var(--p-spacer);
-  @apply mt-0 mb-[var(--p-paragraph-margin-bottom)] text-base text-default;
-  @apply dark:text-dark-default;
-}
+  /**
+  * Paragraph
+  */
+  p {
+    --p-paragraph-margin-bottom: var(--p-spacer);
+    @apply mt-0 mb-[var(--p-paragraph-margin-bottom)] text-base text-default;
+    @apply dark:text-dark-default;
+  }
 
-/**
-* Small
-*/
-small {
-  @apply text-tn;
-}
+  /**
+  * Small
+  */
+  small {
+    @apply text-tn;
+  }
 
-/**
-* Strong
-*/
-strong {
-  @apply font-bold;
-}
+  /**
+  * Strong
+  */
+  strong {
+    @apply font-bold;
+  }
 
-/**
-* Caption
-*/
-caption {
-  @apply text-xs text-muted;
-  @apply dark:text-dark-muted;
+  /**
+  * Caption
+  */
+  caption {
+    @apply text-xs text-muted;
+    @apply dark:text-dark-muted;
+  }
 }
+
 </style>

package/dist/components/modal/Modal.vue.d.ts

@@ -91,9 +91,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
-    size: SizeVariant;
     dismissable: boolean;
     banner: boolean;
+    size: SizeVariant;
     text: string;
     modelValue: boolean;
     title: string;

package/dist/components/nav/Nav.vue

@@ -3,10 +3,12 @@
     data-testid="nav"
     :class="classNames">
     <li
-      v-if="title"
       class="nav__title">
-      <span class="nav__title__item">
+      <span
+        class="nav__title__item"
+        :class="[ (!title && titleActionLabel) ? 'justify-end' : 'justify-between' ]">
         <Caption
+          v-if="title"
           weight="bold"
           transform="capitalize">
           {{ title }}
@@ -84,7 +86,7 @@ export default defineComponent({
         result.push(`nav--align-${props.align}`);
       if (props.vertical)
         result.push("nav--vertical");
-      if (props.title)
+      if (props.title || props.titleActionLabel)
         result.push("nav--has-title");
       if (props.condensed)
         result.push("nav--condensed");
@@ -119,7 +121,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 +152,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 +170,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 +184,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 +208,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 +224,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 +236,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 +261,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 +278,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;
         }
@@ -367,7 +387,7 @@ export default defineComponent({
     @apply absolute left-5 top-0 text-base w-[calc(100%-1.75rem)]; /* 1.25rem + 0.75rem (padding) */
 
     &__item {
-      @apply flex items-center w-full justify-between space-x-2;
+      @apply flex items-center w-full space-x-2;
     }
 
     .caption {

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
     };
   }
 });
@@ -125,7 +118,7 @@ export default defineComponent({
   }
 
   &__link {
-    @apply block relative py-[10px] px-3 -mb-[1px] border border-transparent rounded-t text-base font-normal cursor-pointer hover:no-underline text-subtle hover:text-default;
+    @apply block relative py-[10px] px-3 -mb-[1px] border border-transparent rounded-t text-base font-normal cursor-pointer no-underline hover:no-underline text-subtle hover:text-default;
     @apply dark:text-dark-subtle hover:dark:text-dark-default;
 
     &&--active {

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

@@ -18,15 +18,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     linkClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         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;
@@ -45,14 +47,19 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     linkClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         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;

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

@@ -32,7 +32,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     menuClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
     menuSize: {
@@ -75,7 +75,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     menuClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
     menuSize: {
@@ -90,13 +90,13 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     variant: StyleVariant;
-    size: SizeVariant;
     icon: boolean;
+    size: SizeVariant;
+    divider: boolean;
     text: string;
     modelValue: boolean;
     placement: Placement;
     noCaret: boolean;
-    divider: boolean;
     menuClass: string | Record<string, any> | unknown[];
     menuSize: MenuSizeVariant;
 }, {}>;