@privyid/persona 0.18.0 → 0.19.0

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

@@ -92,11 +92,11 @@ declare const _default: import("vue-demi").DefineComponent<{
     variant: StyleVariant;
     size: SizeVariant;
     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/select/Select.vue

@@ -15,6 +15,8 @@
         :placeholder="placeholder"
         :disabled="disabled"
         :readonly="readonly"
+        :clearable="clearable"
+        @clear.prevent="onClear"
         @focus="onFocus">
         <template
           v-if="!noCaret"
@@ -171,6 +173,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
     size: {
       type: String,
       default: "md"
@@ -209,7 +215,8 @@ export default defineComponent({
     const items = props.adapter.setup(context);
     const localModel = ref(findSelected(items.value, props.modelValue));
     const toggleOpen = () => {
-      isOpen.value = !isOpen.value;
+      if (!props.disabled && !props.readonly)
+        isOpen.value = !isOpen.value;
     };
     const classNames = computed(() => {
       const result = [];
@@ -239,7 +246,7 @@ export default defineComponent({
       localModel.value = item;
       emit("change", item);
       emit("update:selected", item);
-      emit("update:modelValue", item.value);
+      emit("update:modelValue", item?.value);
       if (isOpen.value)
         emit("userInput", item);
     }
@@ -247,8 +254,14 @@ export default defineComponent({
       if (!props.disabled && !props.readonly)
         isOpen.value = true;
     }
+    function onClear() {
+      if (isOpen.value)
+        keyword.value = "";
+      else
+        select();
+    }
     function isSelected(item) {
-      return isEqual(item.value, localModel.value.value);
+      return isEqual(item.value, localModel.value?.value);
     }
     watch(isOpen, (value) => {
       if (!value)
@@ -272,6 +285,7 @@ export default defineComponent({
       toggleOpen,
       select,
       onFocus,
+      onClear,
       isSelected
     };
   }

package/dist/components/select/Select.vue.d.ts

@@ -46,6 +46,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     size: {
         type: PropType<SizeVariant>;
         default: string;
@@ -65,8 +69,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     search: import("vue-demi").WritableComputedRef<string>;
     items: import("vue-demi").Ref<SelectItem[]>;
     toggleOpen: () => void;
-    select: (item: SelectItem) => void;
+    select: (item?: SelectItem) => void;
     onFocus: () => void;
+    onClear: () => void;
     isSelected: (item: SelectItem) => boolean;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:selected" | "userInput")[], "change" | "update:modelValue" | "update:selected" | "userInput", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
@@ -112,6 +117,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     size: {
         type: PropType<SizeVariant>;
         default: string;
@@ -140,6 +149,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     placeholder: string;
     noCaret: boolean;
     selected: SelectItem;
+    clearable: boolean;
     emptyText: string;
     loadingText: string;
     sectionLabel: string;

package/dist/components/sidebar/SidebarNav.vue

@@ -3,9 +3,12 @@
     v-if="title"
     class="sidebar__title"
     data-testid="sidebar-title"
-    :class="{ 'sidebar__title__collapsible' : (collapsible && type !== 'narrow') }"
+    :class="{
+      'sidebar__title__collapsible': (collapsible && type !== 'narrow'),
+      'sidebar__title--collapsed': !isExpand,
+    }"
     v-bind="$attrs"
-    @click.prevent="collapse">
+    @click.prevent="toggleExpand">
     <Caption
       weight="bold"
       transform="capitalize">
@@ -24,17 +27,22 @@
       data-testid="sidebar-title-caret"
       class="sidebar__title__caret" />
   </div>
-  <Nav
+  <Collapse
     v-if="!bottom"
-    class="sidebar__nav"
-    data-testid="sidebar-nav"
-    vertical
-    :title="title"
-    :variant="variant"
-    :condensed="condensed"
-    :align="align">
-    <slot />
-  </Nav>
+    :model-value="isExpand">
+    <Nav
+      ref="root"
+      class="sidebar__nav"
+      :class="{ 'sidebar__nav--collapsed' : !isExpand }"
+      data-testid="sidebar-nav"
+      vertical
+      :title="title"
+      :variant="variant"
+      :condensed="condensed"
+      :align="align">
+      <slot />
+    </Nav>
+  </Collapse>
   <template v-else>
     <div class="sidebar__bottom">
       <Nav
@@ -56,19 +64,22 @@
 import {
   computed,
   defineComponent,
-  inject
+  inject,
+  ref
 } from "vue-demi";
 import Nav from "../nav/Nav.vue";
 import Caption from "../caption/Caption.vue";
 import Text from "../text/Text.vue";
 import { SIDEBAR_SETTINGS } from ".";
+import Collapse from "../collapse/Collapse.vue";
 import IconArrow from "@privyid/persona-icon/vue/chevron-down/16.vue";
 export default defineComponent({
   components: {
     Nav,
     Caption,
     Text,
-    IconArrow
+    IconArrow,
+    Collapse
   },
   inheritAttrs: false,
   props: {
@@ -102,25 +113,24 @@ export default defineComponent({
     const variant = settings?.variant;
     const align = settings?.align;
     const type = settings?.type;
+    const isExpand = ref(true);
     const classNames = computed(() => {
       const result = [""];
       if (props.bottom)
         result.push("sidebar__nav--bottom");
       return result;
     });
-    function collapse(event) {
-      if (props.collapsible && props.title && type !== "narrow") {
-        const title = event.target.closest(".sidebar__title");
-        title?.classList.toggle("sidebar__title--collapsed");
-        title?.nextElementSibling?.classList.toggle("sidebar__nav--collapsed");
-      }
+    function toggleExpand() {
+      if (props.collapsible)
+        isExpand.value = !isExpand.value;
     }
     return {
+      isExpand,
       variant,
       align,
       type,
       classNames,
-      collapse
+      toggleExpand
     };
   }
 });
@@ -140,10 +150,6 @@ export default defineComponent({
     .nav__title {
       @apply hidden;
     }
-
-    &&--collapsed {
-      @apply hidden;
-    }
   }
 
   &&--narrow {
@@ -215,7 +221,7 @@ export default defineComponent({
     @apply relative z-1 flex items-center justify-between -mb-9 px-3 mt-5;
 
     &__collapsible {
-      @apply cursor-pointer;
+      @apply cursor-pointer select-none;
     }
 
     &__caret {
@@ -224,7 +230,7 @@ export default defineComponent({
 
     &&--collapsed {
       .sidebar__title__caret {
-        @apply rotate-0 ease-in-out duration-150;
+        @apply rotate-0;
       }
     }
 

package/dist/components/sidebar/SidebarNav.vue.d.ts

@@ -24,11 +24,12 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }, {
+    isExpand: import("vue-demi").Ref<boolean>;
     variant: import("../nav").StyleVariant | undefined;
     align: import("../nav").AlignVariant | undefined;
     type: import(".").TypeVariant | undefined;
     classNames: import("vue-demi").ComputedRef<string[]>;
-    collapse: (event: Event) => void;
+    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<{
     title: {
         type: StringConstructor;

package/dist/components/sidebar-menu/SidebarMenu.vue

@@ -46,6 +46,7 @@
                 v-for="(submenu, x) in item.submenu"
                 :key="x"
                 :href="submenu.url"
+                :exact="submenu.exact"
                 v-bind="submenu.attrs">
                 {{ submenu.label }}
               </NavItem>
@@ -55,6 +56,7 @@
             v-else
             v-bind="item.attrs"
             :href="item.url"
+            :exact="item.exact"
             :class="{
               'nav__item--no-label': !item.label,
               'nav__item--no-icon': !item.icon
@@ -73,17 +75,11 @@
             {{ item.label }}
           </NavItem>
         </template>
-        <NavItem
+        <NavCollapse
           v-if="menu.maxLength"
-          data-testid="sidebar-toggle"
-          @click.prevent="toggle">
-          <template #icon>
-            <IconLess v-if="expand" />
-            <IconMore v-else />
-          </template>
-          {{ expand ? showLessText : showMoreText }}
-        </NavItem>
-        <div v-show="expand">
+          :show-less-text="showLessText"
+          :show-more-text="showMoreText"
+          data-testid="sidebar-toggle">
           <template
             v-for="(item, i) in menu.items?.slice(menu.maxLength, menu.items.length)"
             :key="i">
@@ -107,6 +103,7 @@
                   v-for="(submenu, x) in item.submenu"
                   :key="x"
                   :href="submenu.url"
+                  :exact="submenu.exact"
                   v-bind="submenu.attrs">
                   {{ submenu.label }}
                 </NavItem>
@@ -116,6 +113,7 @@
               v-else
               v-bind="item.attrs"
               :href="item.url"
+              :exact="item.exact"
               :class="{
                 'nav__item--no-label': !item.label,
                 'nav__item--no-icon' : !item.icon,
@@ -134,7 +132,7 @@
               {{ item.label }}
             </NavItem>
           </template>
-        </div>
+        </NavCollapse>
       </template>
       <!-- ENDIF -->
 
@@ -162,6 +160,7 @@
                 v-for="(submenu, x) in item.submenu"
                 :key="x"
                 :href="submenu.url"
+                :exact="submenu.exact"
                 v-bind="submenu.attrs">
                 {{ submenu.label }}
               </NavItem>
@@ -171,6 +170,7 @@
             v-else
             v-bind="item.attrs"
             :href="item.url"
+            :exact="item.exact"
             :class="{
               'nav__item--no-label': !item.label,
               'nav__item--no-icon': !item.icon,
@@ -201,13 +201,13 @@
 
 <script>
 import {
-  defineComponent,
-  ref
+  defineComponent
 } from "vue-demi";
 import Sidebar from "../sidebar/Sidebar.vue";
 import SidebarNav from "../sidebar/SidebarNav.vue";
 import NavItem from "../nav/NavItem.vue";
 import NavSubItem from "../nav/NavSubItem.vue";
+import NavCollapse from "../nav/NavCollapse.vue";
 import IconMore from "@privyid/persona-icon/vue/chevron-down/16.vue";
 import IconLess from "@privyid/persona-icon/vue/chevron-up/16.vue";
 export default defineComponent({
@@ -216,6 +216,7 @@ export default defineComponent({
     SidebarNav,
     NavItem,
     NavSubItem,
+    NavCollapse,
     IconMore,
     IconLess
   },
@@ -256,16 +257,6 @@ export default defineComponent({
       type: String,
       default: "Less"
     }
-  },
-  setup() {
-    const expand = ref(false);
-    function toggle() {
-      expand.value = !expand.value;
-    }
-    return {
-      expand,
-      toggle
-    };
   }
 });
 </script>

package/dist/components/sidebar-menu/SidebarMenu.vue.d.ts

@@ -40,10 +40,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-}, {
-    expand: import("vue-demi").Ref<boolean>;
-    toggle: () => 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<{
+}, 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<{
     menus: {
         type: PropType<Menu[]>;
         default: () => never[];
@@ -87,8 +84,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     align: AlignVariant;
     toggleable: ToggleableVariant;
     sticky: boolean;
-    menus: Menu[];
     showMoreText: string;
     showLessText: string;
+    menus: Menu[];
 }, {}>;
 export default _default;

package/dist/components/sidebar-menu/index.d.ts

@@ -18,7 +18,7 @@ export interface SubMenu {
     /**
      * Menu URL
      */
-    url: string;
+    url?: string;
     /**
      * Access Role
      */
@@ -27,6 +27,11 @@ export interface SubMenu {
      * Additional Attribute
      */
     attrs?: AdditionalAttr;
+    /**
+     * Active on exact match
+     * @default false
+     */
+    exact?: boolean;
 }
 export interface MenuItem {
     /**
@@ -40,7 +45,7 @@ export interface MenuItem {
     /**
      * Menu URL
      */
-    url: string;
+    url?: string;
     /**
      * Menu Icon
      */
@@ -61,6 +66,11 @@ export interface MenuItem {
      * Additional attribute
      */
     attrs?: AdditionalAttr;
+    /**
+     * Active on exact match
+     * @default false
+     */
+    exact?: boolean;
 }
 export interface Menu {
     /**
@@ -77,14 +87,17 @@ export interface Menu {
     titleActionUrl?: string;
     /**
      * Enable collapse
+     * @default false
      */
     collapsible?: boolean;
     /**
      * Set to bottom
+     * @default false
      */
     bottom?: boolean;
     /**
      * Enable condensed mode
+     * @default false
      */
     condensed?: boolean;
     /**
@@ -107,6 +120,11 @@ export interface Menu {
      * Additional Attribute
      */
     attrs?: AdditionalAttr;
+    /**
+     * Active on exact match
+     * @default false
+     */
+    exact?: boolean;
 }
 /**
  * Define menus

package/dist/components/signature-draw/SignatureDraw.vue

@@ -1,26 +1,39 @@
 <template>
-  <component
-    :is="view"
-    :model-value="modelValue"
-    :model-modifiers="modelModifiers"
-    :width="width"
-    :height="height"
-    :color="color"
-    :placeholder="placeholder"
-    :reset-label="resetLabel"
-    :open-draw-label="openDrawLabel"
-    :close-draw-label="closeDrawLabel"
-    @update:model-value="$emit('update:modelValue', $event)" />
+  <template v-if="ready">
+    <component
+      :is="view"
+      :model-value="modelValue"
+      :model-modifiers="modelModifiers"
+      :width="width"
+      :height="height"
+      :color="color"
+      :placeholder="placeholder"
+      :reset-label="resetLabel"
+      :open-draw-label="openDrawLabel"
+      :close-draw-label="closeDrawLabel"
+      @update:model-value="$emit('update:modelValue', $event)" />
+  </template>
+  <template v-else>
+    <div class="signature-draw">
+      <img
+        class="signature-draw__fallback"
+        :src="createSpinner(width, height)"
+        alt="signature-draw">
+    </div>
+  </template>
 </template>
 
 <script>
-import { useMediaQuery } from "@vueuse/core";
 import {
   computed,
-  defineComponent
+  defineComponent,
+  onMounted,
+  ref
 } from "vue-demi";
 import SignatureDrawMobile from "./SignatureDrawMobile.vue";
 import SignatureDrawDesktop from "./SignatureDrawDesktop.vue";
+import { useMediaQuery } from "@vueuse/core";
+import { createSpinner } from "../avatar/utils/create-image";
 export default defineComponent({
   props: {
     modelValue: {
@@ -66,11 +79,27 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup() {
+    const ready = ref(false);
     const isDesktop = useMediaQuery("(min-width: 768px)");
     const view = computed(() => {
       return isDesktop.value ? SignatureDrawDesktop : SignatureDrawMobile;
     });
-    return { view };
+    onMounted(() => {
+      ready.value = true;
+    });
+    return {
+      view,
+      ready,
+      createSpinner
+    };
   }
 });
 </script>
+
+<style lang="postcss">
+.signature-draw {
+  &__fallback {
+    @apply border rounded border-dashed;
+  }
+}
+</style>

package/dist/components/signature-draw/SignatureDraw.vue.d.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue-demi';
 import { ModelModifier } from '../dropzone';
+import { createSpinner } from '../avatar/utils/create-image';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: (StringConstructor | {
@@ -42,6 +43,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     view: import("vue-demi").ComputedRef<any>;
+    ready: import("vue-demi").Ref<boolean>;
+    createSpinner: typeof createSpinner;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: (StringConstructor | {