@privyid/persona 0.16.0 → 0.17.0

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

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

package/dist/components/navbar/Navbar.vue

@@ -94,6 +94,7 @@ export default defineComponent({
   --p-navbar-padding-y: theme(spacing.3);
   --p-navbar-bg: theme(backgroundColor.default.DEFAULT);
   --p-navbar-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
+  --p-navbar-shadow: theme(boxShadow.lg);
 
   @apply bg-[color:var(--p-navbar-bg)] relative px-[var(--p-navbar-padding-x)] py-[var(--p-navbar-padding-y)] flex items-center flex-wrap transition-shadow duration-150 ease-in-out;
   @apply dark:bg-[color:var(--p-navbar-bg-dark)];
@@ -107,7 +108,7 @@ export default defineComponent({
   }
 
   &&--shadow {
-    @apply shadow-lg transition-shadow duration-150 ease-in-out;
+    @apply shadow-[var(--p-navbar-shadow)] transition-shadow duration-150 ease-in-out;
   }
 
   &&--expand {

package/dist/components/pdf-object/PdfObject.vue.d.ts

@@ -116,9 +116,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:height"?: ((...args: any[]) => any) | undefined;
 }, {
     y: number;
-    x: number;
     width: number;
     height: number;
+    x: number;
     autofocus: boolean;
     maxHeight: number;
     maxWidth: number;

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

@@ -147,17 +147,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: number;
     };
 }>>, {
+    size: number;
     color: string;
     text: string;
-    size: number;
     modelValue: string | File;
     label: string;
     modelModifiers: ModelModifier;
+    width: number;
+    height: number;
     font: string;
     padding: number;
     lineHeight: number;
-    width: number;
-    height: number;
     labelColor: string;
     minSize: number;
     maxSize: number;

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

@@ -71,9 +71,9 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: number;
     };
 }>> & {
+    onLoaded?: ((...args: any[]) => any) | undefined;
     onError?: ((...args: any[]) => any) | undefined;
     onReady?: ((...args: any[]) => any) | undefined;
-    onLoaded?: ((...args: any[]) => any) | undefined;
     "onError-password"?: ((...args: any[]) => any) | undefined;
     "onUpdate:page"?: ((...args: any[]) => any) | undefined;
     "onUpdate:scale"?: ((...args: any[]) => any) | undefined;

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

@@ -0,0 +1,125 @@
+<template>
+  <div
+    class="progress-indicator"
+    data-testid="progress-indicator"
+    :class="classNames">
+    <div class="progress-indicator__container">
+      <template
+        v-for="i in nums"
+        :key="i">
+        <div
+          class="progress-indicator__item"
+          data-testid="progress-indicator-item"
+          @click="setValue(i)" />
+      </template>
+    </div>
+    <div
+      :style="activeStyle"
+      class="progress-indicator__item progress-indicator__item--active"
+      data-testid="progress-indicator-item-active" />
+  </div>
+</template>
+
+<script>
+import { useVModel } from "../input";
+import { useToNumber } from "@vueuse/core";
+import { useClamp } from "@vueuse/math";
+import {
+  computed,
+  defineComponent,
+  toRef
+} from "vue-demi";
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Number,
+      default: 1
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    length: {
+      type: [Number, String],
+      default: 6
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit }) {
+    const model = useVModel(props);
+    const nums = useToNumber(toRef(props, "length"), { nanToZero: true, method: "parseInt" });
+    const active = useClamp(model, 1, nums);
+    const classNames = computed(() => {
+      const result = [];
+      if (props.direction)
+        result.push(`progress-indicator--${props.direction}`);
+      return result;
+    });
+    const activeStyle = computed(() => {
+      if (props.direction === "vertical") {
+        return {
+          transform: `translateY(calc((100% + .25rem) * ${active.value - 1}))`,
+          height: `calc((100% - (.25rem * (${nums.value} - 1))) / ${nums.value} )`
+        };
+      }
+      return { transform: `translateX(calc((100% + .25rem) * ${active.value - 1}))` };
+    });
+    function setValue(value) {
+      active.value = value;
+      emit("change", value);
+    }
+    return {
+      nums,
+      setValue,
+      activeStyle,
+      classNames
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.progress-indicator {
+  @apply relative;
+
+  &__container {
+    @apply flex flex-1;
+  }
+
+  &__item {
+    @apply bg-gray-50/30 cursor-pointer;
+
+    &--active {
+      @apply absolute top-0 left-0 transition-transform;
+      @apply bg-gray-50 pointer-events-none;
+    }
+  }
+
+  &--horizontal {
+    .progress-indicator__container {
+      @apply justify-center space-x-1;
+    }
+
+    .progress-indicator__item {
+      @apply w-2 h-2 rounded-full;
+    }
+  }
+
+  &--vertical {
+    @apply h-full;
+
+    .progress-indicator__container {
+      @apply flex-col space-y-1 h-full;
+    }
+
+    .progress-indicator__item {
+      @apply w-2 h-full rounded-full;
+    }
+  }
+
+}
+</style>

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

@@ -0,0 +1,42 @@
+import { StyleValue, PropType } from 'vue-demi';
+import { DirectionVariant } from '../steps';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: PropType<DirectionVariant>;
+        default: string;
+    };
+    length: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}, {
+    nums: import("vue-demi").ComputedRef<number>;
+    setValue: (value: number) => void;
+    activeStyle: import("vue-demi").ComputedRef<StyleValue>;
+    classNames: import("vue-demi").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: PropType<DirectionVariant>;
+        default: string;
+    };
+    length: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    length: string | number;
+    modelValue: number;
+    direction: DirectionVariant;
+}, {}>;
+export default _default;

package/dist/components/radio/Radio.vue

@@ -288,8 +288,8 @@ export default defineComponent({
 
     &:hover,
     &:focus-visible {
-      @apply bg-subtle;
-      @apply dark:bg-dark-subtle;
+      @apply bg-default-alpha;
+      @apply dark:bg-dark-default-alpha;
     }
   }
 }

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

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

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

@@ -4,7 +4,7 @@ import { Adapter } from './adapter/adapter';
 import { SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: string;
     };
     selected: {
@@ -62,7 +62,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     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: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: string;
     };
     selected: {
@@ -114,8 +114,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:selected"?: ((...args: any[]) => any) | undefined;
     onUserInput?: ((...args: any[]) => any) | undefined;
 }, {
-    size: SizeVariant;
     error: boolean;
+    size: SizeVariant;
     modelValue: string | number | boolean | Record<string, any> | unknown[] | Date;
     disabled: boolean;
     readonly: boolean;

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

@@ -18,8 +18,116 @@
       :bottom="menu.bottom"
       :condensed="menu.condensed"
       :collapsible="menu.collapsible">
+      <!-- IF: Menu has maxlength -->
+      <template
+        v-if="menu.maxLength">
+        <template
+          v-for="(item, i) in menu.items?.slice(0, menu.maxLength)"
+          :key="i">
+          <NavSubItem
+            v-if="item.submenu"
+            data-testid="sidebar-submenu"
+            :text="item.label"
+            :collapsible="item.collapsible">
+            <template #icon>
+              <template v-if="item.icon && typeof item.icon === 'string'">
+                <img
+                  :src="item.icon"
+                  alt="icon-menu">
+              </template>
+              <template v-else-if="item.icon">
+                <component :is="item.icon" />
+              </template>
+            </template>
+            <SidebarNav :condensed="menu.condensed">
+              <NavItem
+                v-for="(submenu, x) in item.submenu"
+                :key="x"
+                :href="submenu.url">
+                {{ submenu.label }}
+              </NavItem>
+            </SidebarNav>
+          </NavSubItem>
+          <NavItem
+            v-else
+            :href="item.url"
+            :class="{ 'nav__item--no-label' : !item.label, 'nav__item--no-icon' : !item.icon }">
+            <template
+              #icon>
+              <template v-if="item.icon && typeof item.icon === 'string'">
+                <img
+                  :src="item.icon"
+                  alt="icon-menu">
+              </template>
+              <template v-else-if="item.icon">
+                <component :is="item.icon" />
+              </template>
+            </template>
+            {{ item.label }}
+          </NavItem>
+        </template>
+        <NavItem
+          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">
+          <template
+            v-for="(item, i) in menu.items?.slice(menu.maxLength, menu.items.length)"
+            :key="i">
+            <NavSubItem
+              v-if="item.submenu"
+              :text="item.label"
+              :collapsible="item.collapsible">
+              <template #icon>
+                <template v-if="item.icon && typeof item.icon === 'string'">
+                  <img
+                    :src="item.icon"
+                    alt="icon-menu">
+                </template>
+                <template v-else-if="item.icon">
+                  <component :is="item.icon" />
+                </template>
+              </template>
+              <SidebarNav :condensed="menu.condensed">
+                <NavItem
+                  v-for="(submenu, x) in item.submenu"
+                  :key="x"
+                  :href="submenu.url">
+                  {{ submenu.label }}
+                </NavItem>
+              </SidebarNav>
+            </NavSubItem>
+            <NavItem
+              v-else
+              :href="item.url"
+              :class="{ 'nav__item--no-label' : !item.label, 'nav__item--no-icon' : !item.icon }">
+              <template
+                #icon>
+                <template v-if="item.icon && typeof item.icon === 'string'">
+                  <img
+                    :src="item.icon"
+                    alt="icon-menu">
+                </template>
+                <template v-else-if="item.icon">
+                  <component :is="item.icon" />
+                </template>
+              </template>
+              {{ item.label }}
+            </NavItem>
+          </template>
+        </div>
+      </template>
+      <!-- ENDIF -->
+
       <template
         v-for="(item, i) in menu.items"
+        v-else
         :key="i">
         <NavSubItem
           v-if="item.submenu"
@@ -72,17 +180,24 @@
 </template>
 
 <script>
-import { defineComponent } from "vue-demi";
+import {
+  defineComponent,
+  ref
+} 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 IconMore from "@privyid/persona-icon/vue/chevron-down/16.vue";
+import IconLess from "@privyid/persona-icon/vue/chevron-up/16.vue";
 export default defineComponent({
   components: {
     Sidebar,
     SidebarNav,
     NavItem,
-    NavSubItem
+    NavSubItem,
+    IconMore,
+    IconLess
   },
   props: {
     menus: {
@@ -108,7 +223,29 @@ export default defineComponent({
     toggleable: {
       type: String,
       default: void 0
+    },
+    length: {
+      type: [Number, String],
+      default: void 0
+    },
+    showMoreText: {
+      type: String,
+      default: "More"
+    },
+    showLessText: {
+      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

@@ -28,7 +28,22 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<ToggleableVariant>;
         default: undefined;
     };
-}, 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<{
+    length: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    showMoreText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showLessText: {
+        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<{
     menus: {
         type: PropType<Menu[]>;
         default: () => never[];
@@ -53,12 +68,27 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<ToggleableVariant>;
         default: undefined;
     };
+    length: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    showMoreText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showLessText: {
+        type: StringConstructor;
+        default: string;
+    };
 }>>, {
     fixed: boolean;
+    length: string | number;
     type: TypeVariant;
     align: AlignVariant;
     toggleable: ToggleableVariant;
     sticky: boolean;
     menus: Menu[];
+    showMoreText: string;
+    showLessText: string;
 }, {}>;
 export default _default;

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

@@ -4,12 +4,14 @@ export interface SubMenu {
     name: string;
     label: string;
     url: string;
+    access?: string | string[];
 }
 export interface MenuItem {
     name: string;
     label?: string;
     url: string;
     icon?: string | Component;
+    access?: string | string[];
     collapsible?: boolean;
     submenu?: SubMenu[];
 }
@@ -22,5 +24,6 @@ export interface Menu {
     condensed?: boolean;
     items?: MenuItem[];
     align?: AlignVariant;
+    maxLength?: number;
 }
 export declare function defineMenu(menus: Menu[]): Menu[];

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

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="view"
-    v-model="model"
+    :model-value="modelValue"
     :model-modifiers="modelModifiers"
     :width="width"
     :height="height"
@@ -9,7 +9,8 @@
     :placeholder="placeholder"
     :reset-label="resetLabel"
     :open-draw-label="openDrawLabel"
-    :close-draw-label="closeDrawLabel" />
+    :close-draw-label="closeDrawLabel"
+    @update:model-value="$emit('update:modelValue', $event)" />
 </template>
 
 <script>
@@ -18,7 +19,6 @@ import {
   computed,
   defineComponent
 } from "vue-demi";
-import { useVModel } from "../input";
 import SignatureDrawMobile from "./SignatureDrawMobile.vue";
 import SignatureDrawDesktop from "./SignatureDrawDesktop.vue";
 export default defineComponent({
@@ -65,13 +65,12 @@ export default defineComponent({
     event: "update:modelValue"
   },
   emits: ["update:modelValue"],
-  setup(props) {
-    const model = useVModel(props);
+  setup() {
     const isDesktop = useMediaQuery("(min-width: 768px)");
     const view = computed(() => {
       return isDesktop.value ? SignatureDrawDesktop : SignatureDrawMobile;
     });
-    return { view, model };
+    return { view };
   }
 });
 </script>

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

@@ -42,7 +42,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     view: import("vue-demi").ComputedRef<any>;
-    model: import("vue-demi").Ref<string | File>;
 }, 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 | {

package/dist/components/signature-text/SignatureText.vue.d.ts

@@ -88,9 +88,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     text: string;
     modelValue: string | File;
     modelModifiers: ModelModifier;
-    font: string;
     width: number;
     height: number;
+    font: string;
     maxlength: string | number;
     maxwords: string | number;
 }, {}>;