@privyid/persona 0.17.1 → 0.19.0

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,7 +3,7 @@
     data-testid="nav-item"
     class="nav__item"
     :class="navItemClass">
-    <a
+    <nuxt-link
       data-testid="nav-link"
       :href="link"
       :target="target"
@@ -20,7 +20,7 @@
         class="nav__link__label">
         <slot />
       </span>
-    </a>
+    </nuxt-link>
   </li>
 </template>
 
@@ -40,7 +40,7 @@ export default defineComponent({
       default: false
     },
     href: {
-      type: String,
+      type: [String, Object],
       default: void 0
     },
     target: {
@@ -54,6 +54,10 @@ export default defineComponent({
         Object
       ],
       default: void 0
+    },
+    exact: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, { slots }) {
@@ -65,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(() => {

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

@@ -1,4 +1,5 @@
 import { PropType } from 'vue-demi';
+import { type RouteLocationRaw } from 'vue-router';
 declare const _default: import("vue-demi").DefineComponent<{
     active: {
         type: BooleanConstructor;
@@ -9,7 +10,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     href: {
-        type: StringConstructor;
+        type: PropType<RouteLocationRaw>;
         default: undefined;
     };
     target: {
@@ -20,6 +21,10 @@ 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[]>;
@@ -34,7 +39,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     href: {
-        type: StringConstructor;
+        type: PropType<RouteLocationRaw>;
         default: undefined;
     };
     target: {
@@ -45,11 +50,16 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
+    exact: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
-    href: string;
+    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

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

package/dist/components/nav/NavSubItem.vue

@@ -1,12 +1,13 @@
 <template>
   <li
+    ref="root"
     data-testid="nav-subitem"
     class="nav__subitem"
     :class="classNames">
     <div
       class="nav__subitem__parent"
       data-testid="nav-subitem-parent"
-      @click.prevent="collapse">
+      @click.prevent="toggleExpand">
       <span
         v-if="$slots.icon"
         class="nav__link__icon">
@@ -19,7 +20,9 @@
         v-if="collapsible"
         class="nav__link__caret" />
     </div>
-    <slot />
+    <Collapse :model-value="isExpand">
+      <slot />
+    </Collapse>
   </li>
 </template>
 
@@ -27,12 +30,16 @@
 import {
   defineComponent,
   computed,
-  inject
+  inject,
+  ref,
+  onMounted
 } from "vue-demi";
 import { SIDEBAR_SETTINGS } from "../sidebar";
 import IconArrow from "@privyid/persona-icon/vue/chevron-down/16.vue";
+import { templateRef } from "@vueuse/core";
+import Collapse from "../collapse/Collapse.vue";
 export default defineComponent({
-  components: { IconArrow },
+  components: { IconArrow, Collapse },
   props: {
     text: {
       type: String,
@@ -45,22 +52,36 @@ export default defineComponent({
   },
   setup(props, { slots }) {
     const settings = inject(SIDEBAR_SETTINGS, void 0, true);
-    const type = settings?.type;
+    const root = templateRef("root");
+    const collapsible = computed(() => props.collapsible && settings?.type !== "narrow");
+    const isExpand = ref(!props.collapsible);
     const classNames = computed(() => {
       const result = [];
       if (slots.icon)
         result.push("nav__subitem--icon");
-      if (props.collapsible && type !== "narrow")
-        result.push("nav__subitem--collapsible nav__subitem--collapsed");
+      if (collapsible.value) {
+        result.push("nav__subitem--collapsible");
+        if (isExpand.value)
+          result.push("nav__subitem--expanded");
+        else
+          result.push("nav__subitem--collapsed");
+      }
       return result;
     });
-    function collapse(event) {
-      if (props.collapsible && type !== "narrow") {
-        const container = event.target.closest("li");
-        container?.classList.toggle("nav__subitem--collapsed");
-      }
+    function toggleExpand() {
+      if (collapsible.value)
+        isExpand.value = !isExpand.value;
     }
-    return { classNames, collapse };
+    onMounted(() => {
+      if (collapsible.value && root.value) {
+        isExpand.value = root.value.querySelectorAll(".router-link-active:not(.nav__link--exact),.router-link-exact-active.nav__link--exact").length > 0;
+      }
+    });
+    return {
+      classNames,
+      toggleExpand,
+      isExpand
+    };
   }
 });
 </script>
@@ -95,13 +116,8 @@ export default defineComponent({
       }
 
       &.nav__subitem--collapsed {
-        > .sidebar__nav,
-        > .nav {
-          @apply hidden;
-        }
-
         .nav__link__caret {
-          @apply rotate-0 ease-in-out duration-150;
+          @apply rotate-0;
         }
       }
     }

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

@@ -9,7 +9,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
-    collapse: (event: Event) => void;
+    toggleExpand: () => void;
+    isExpand: import("vue-demi").Ref<boolean>;
 }, 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/navbar/Navbar.vue.d.ts

@@ -48,8 +48,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    variant: StyleVariant;
     fixed: boolean;
+    variant: StyleVariant;
     toggleable: ToggleableVariant | undefined;
     condensed: boolean;
     sticky: boolean;

package/dist/components/navbar/NavbarToggle.vue

@@ -21,8 +21,8 @@ import {
   computed
 } from "vue-demi";
 import Button from "../button/Button.vue";
-import IconMenu from "@carbon/icons-vue/lib/menu/20";
-import IconClose from "@carbon/icons-vue/lib/close/20";
+import IconMenu from "@privyid/persona-icon/vue/menu-burger/20.vue";
+import IconClose from "@privyid/persona-icon/vue/close/20.vue";
 import { NAVBAR_SETTINGS } from ".";
 export default defineComponent({
   components: {

package/dist/components/pagination/Pagination.vue

@@ -124,8 +124,8 @@ import {
 } from "vue-demi";
 import Button from "../button/Button.vue";
 import Select from "../select/Select.vue";
-import IconPrev from "@carbon/icons-vue/lib/chevron--left/20";
-import IconNext from "@carbon/icons-vue/lib/chevron--right/20";
+import IconPrev from "@privyid/persona-icon/vue/chevron-left/20.vue";
+import IconNext from "@privyid/persona-icon/vue/chevron-right/20.vue";
 import { useVModel } from "../input";
 import { usePagination } from ".";
 import { getPageRange } from "./utils/calculate-page";

package/dist/components/pagination/Pagination.vue.d.ts

@@ -194,8 +194,8 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     variant: NavigationVariant;
     modelValue: number;
-    perPage: number;
     total: number;
+    perPage: number;
     displayLimit: number;
     quickJump: boolean;
     showCounter: boolean;

package/dist/components/pdf-text/PdfText.vue.d.ts

@@ -148,8 +148,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>>, {
     size: number;
-    text: string;
     color: string;
+    text: string;
     modelValue: string | File;
     label: string;
     modelModifiers: ModelModifier;

package/dist/components/pdf-viewer/PdfNavigation.vue

@@ -56,10 +56,10 @@ import {
   defineComponent
 } from "vue-demi";
 import { usePdfContext } from ".";
-import IconZoomIn from "@carbon/icons-vue/lib/zoom--in/16";
-import IconZoomOut from "@carbon/icons-vue/lib/zoom--out/16";
-import IconPrev from "@carbon/icons-vue/lib/chevron--up/16";
-import IconNext from "@carbon/icons-vue/lib/chevron--down/16";
+import IconZoomIn from "@privyid/persona-icon/vue/zoom-in/20.vue";
+import IconZoomOut from "@privyid/persona-icon/vue/zoom-out/20.vue";
+import IconPrev from "@privyid/persona-icon/vue/chevron-up/20.vue";
+import IconNext from "@privyid/persona-icon/vue/chevron-down/20.vue";
 import pButton from "../button/Button.vue";
 import pDivider from "../divider/Divider.vue";
 import pSelect from "../select/Select.vue";

package/dist/components/pdf-viewer/PdfViewer.vue

@@ -186,8 +186,7 @@ export default defineComponent({
     onError((error_) => {
       if (error_.name === "PasswordException")
         emit("error-password", error_);
-      else
-        emit("error", error_);
+      emit("error", error_);
     });
     onReady((pdfViewer) => {
       emit("ready", pdfViewer);

package/dist/components/pdf-viewer/PdfViewer.vue.d.ts

@@ -22,11 +22,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     ratio: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     offsetTop: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
 }, {
@@ -63,11 +63,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     ratio: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     offsetTop: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
 }>> & {

package/dist/components/progress-indicator/ProgressIndicator.vue.d.ts

@@ -10,7 +10,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     length: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
 }, {
@@ -28,7 +28,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     length: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
 }>> & {

package/dist/components/radio/Radio.vue

@@ -45,7 +45,7 @@
 
 <script>
 import { useVModel } from ".";
-import IconCheck from "@carbon/icons-vue/lib/checkmark/16";
+import IconCheck from "@privyid/persona-icon/vue/checkmark/20.vue";
 import {
   computed,
   defineComponent

package/dist/components/radio/Radio.vue.d.ts

@@ -10,11 +10,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {
@@ -43,11 +43,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {