@privyid/persona 0.19.0 → 0.20.0

package/dist/components/navbar/NavbarBrand.vue

@@ -22,7 +22,7 @@ export default defineComponent({
 <style lang="postcss">
   .navbar {
     &__brand {
-      @apply inline-block mr-4 text-xl py-1 font-medium text-default;
+      @apply inline-block mr-4 text-xl py-1 font-medium text-default no-underline cursor-pointer hover:no-underline;
       @apply dark:text-dark-default;
 
       img {

package/dist/components/navbar-menu/NavbarNavMenu.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent } from "vue-demi";
 import NavbarNav from "../navbar/NavbarNav.vue";
 export default defineComponent({
   components: { NavbarNav },

package/dist/components/navbar-menu/NavbarNavMenu.vue.d.ts

@@ -1,11 +1,11 @@
-import { PropType } from 'vue';
+import { PropType } from 'vue-demi';
 import { Menu } from '../sidebar-menu';
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue-demi").DefineComponent<{
     menus: {
         type: PropType<Menu[]>;
         default: () => Menu[];
     };
-}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").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<{
     menus: {
         type: PropType<Menu[]>;
         default: () => Menu[];

package/dist/components/pagination/index.mjs

@@ -13,7 +13,9 @@ export function usePagination(props) {
     return total.value <= 0 ? 0 : Math.ceil(total.value / perPage.value);
   });
   const rowRange = computed(() => {
-    return [total.value === 0 ? 0 : (page.value - 1) * perPage.value + 1, page.value * perPage.value > total.value ? total.value : page.value * perPage.value];
+    const start = Math.max((page.value - 1) * perPage.value + 1, 0);
+    const end = Math.min(page.value * perPage.value, total.value);
+    return [start, end];
   });
   const pageItems = computed(() => {
     if (totalPageCount.value === 0 || displayLimit.value < PAGE_PADDING)

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

@@ -216,7 +216,7 @@ export default defineComponent({
               object.value.style.position = "absolute";
               object.value.style.transform = `translate(${left}px, ${top}px) scale(${scale.value})`;
               object.value.style.zIndex = "10";
-            }, { ancestorScroll: false });
+            }, { ancestorScroll: false, animationFrame: true });
             onCleanup(cleanup);
           }
         } else

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

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

package/dist/components/pdf-viewer/utils/use-sticky.mjs

@@ -1,4 +1,7 @@
-import { useElementBounding } from "@vueuse/core";
+import {
+  useElementBounding,
+  useWindowSize
+} from "@vueuse/core";
 import {
   computed,
   ref,
@@ -18,10 +21,11 @@ export function useSticky(target, options = {}) {
     width,
     left
   } = useElementBounding(target);
+  const { height: windowHeight } = useWindowSize();
   watchEffect((onCleanup) => {
     if (enable.value && target.value) {
       if (top.value - offsetTop.value >= 0) {
-        target.value.style.setProperty("height", `${window.innerHeight - targetTop.value}px`);
+        target.value.style.setProperty("height", `${windowHeight.value - targetTop.value}px`);
         target.value.style.setProperty("width", "100%");
       } else {
         parent.value.style.setProperty("min-height", `${height.value}px`);
@@ -29,7 +33,7 @@ export function useSticky(target, options = {}) {
         target.value.style.setProperty("top", `${offsetTop.value}px`);
         target.value.style.setProperty("left", `${left.value}px`);
         target.value.style.setProperty("width", `${width.value}px`);
-        target.value.style.setProperty("height", `${window.innerHeight - offsetTop.value}px`);
+        target.value.style.setProperty("height", `${windowHeight.value - offsetTop.value}px`);
       }
       onCleanup(() => {
         parent.value.style.removeProperty("min-height");

package/dist/components/progressbar/Progressbar.vue

@@ -0,0 +1,110 @@
+<template>
+  <div
+    data-testid="progressbar"
+    role="progressbar"
+    class="progressbar"
+    :class="classNames"
+    :data-value="percentage">
+    <div
+      data-testid="progressbar-bar"
+      class="progressbar__bar"
+      :style="{ width }" />
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent } from "vue-demi";
+import { useProgressbar } from ".";
+export default defineComponent({
+  props: {
+    value: {
+      type: [Number, String],
+      default: 0
+    },
+    min: {
+      type: [Number, String],
+      default: 0
+    },
+    max: {
+      type: [Number, String],
+      default: 100
+    },
+    success: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
+    },
+    indeterminate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const percentage = useProgressbar(props);
+    const width = computed(() => {
+      if (props.success || props.error)
+        return "100%";
+      return `${percentage.value * 100}%`;
+    });
+    const classNames = computed(() => {
+      const result = [];
+      if (props.indeterminate)
+        result.push("progressbar--indeterminate");
+      if (props.error)
+        result.push("progressbar--error");
+      else if (props.success)
+        result.push("progressbar--success");
+      return result;
+    });
+    return {
+      width,
+      percentage,
+      classNames
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.progressbar {
+  @apply bg-base w-full h-1 rounded-full overflow-hidden;
+  @apply dark:bg-dark-base;
+
+  &__bar {
+    @apply transition-[width] will-change-[width] duration-75 ease-out;
+    @apply bg-info-emphasis rounded-full h-full origin-center;
+    @apply dark:bg-dark-info-emphasis;
+  }
+
+  &--indeterminate {
+    .progressbar__bar {
+      animation: 1s ease-in-out infinite alternate progressbar-bounce;
+    }
+  }
+
+  &--success &__bar {
+    @apply bg-success-emphasis;
+    @apply dark:bg-dark-success-emphasis;
+  }
+
+  &--error &__bar {
+    @apply bg-dark-danger-emphasis;
+    @apply dark:bg-dark-danger-emphasis;
+  }
+}
+
+@keyframes progressbar-bounce {
+  0% {
+    width: 40%;
+    transform: translateX(-75%);
+  }
+
+  100% {
+    width: 40%;
+    transform: translateX(225%);
+  }
+}
+</style>

package/dist/components/progressbar/Progressbar.vue.d.ts

@@ -0,0 +1,63 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    value: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    min: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    success: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    width: import("vue-demi").ComputedRef<string>;
+    percentage: import("vue-demi").ComputedRef<number>;
+    classNames: import("vue-demi").ComputedRef<string[]>;
+}, 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<{
+    value: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    min: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    success: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    value: string | number;
+    error: boolean;
+    success: boolean;
+    min: string | number;
+    max: string | number;
+    indeterminate: boolean;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,7 @@
+interface ProgressbarProp {
+    min: number | string;
+    max: number | string;
+    value: number | string;
+}
+export declare function useProgressbar(props: ProgressbarProp): import("vue-demi").ComputedRef<number>;
+export {};

package/dist/components/progressbar/index.mjs

@@ -0,0 +1,11 @@
+import { toRef, computed } from "vue-demi";
+import { useToNumber } from "@vueuse/core";
+export function useProgressbar(props) {
+  const min = useToNumber(toRef(props, "min"), { nanToZero: true });
+  const max = useToNumber(toRef(props, "max"), { nanToZero: true });
+  const value = useToNumber(toRef(props, "value"), { nanToZero: true });
+  const presentage = computed(() => {
+    return (value.value - min.value) / (max.value - min.value);
+  });
+  return presentage;
+}

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

package/dist/components/ringbar/Ringbar.vue

@@ -0,0 +1,148 @@
+<template>
+  <svg
+    data-testid="ringbar"
+    class="ringbar"
+    :class="classNames"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg">
+    <circle
+      class="ringbar__track"
+      cx="9"
+      cy="9"
+      r="8"
+      fill="transparent"
+      stroke-width="2px" />
+    <g class="ringbar__wrapper">
+      <circle
+        data-testid="ringbar-ring"
+        class="ringbar__ring"
+        cx="9"
+        cy="9"
+        r="8"
+        :stroke-dashoffset="(1 - presentage) * 50.2654825"
+        stroke-dasharray="50.2654825"
+        stroke-linecap="round"
+        stroke-width="2px"
+        fill="transparent" />
+    </g>
+  </svg>
+</template>
+
+<script>
+import { useProgressbar } from "../progressbar";
+import {
+  computed,
+  defineComponent
+} from "vue-demi";
+export default defineComponent({
+  props: {
+    value: {
+      type: [Number, String],
+      default: 0
+    },
+    min: {
+      type: [Number, String],
+      default: 0
+    },
+    max: {
+      type: [Number, String],
+      default: 100
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    indeterminate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const presentage = useProgressbar(props);
+    const classNames = computed(() => {
+      const result = [];
+      if (props.indeterminate)
+        result.push("ringbar--indeterminate");
+      if (props.size)
+        result.push(`ringbar--${props.size}`);
+      return result;
+    });
+    return {
+      presentage,
+      classNames
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.ringbar {
+  &__track {
+    @apply stroke-[color:theme(backgroundColor.base.DEFAULT)];
+    @apply dark:stroke-[color:theme(backgroundColor.dark.base)];
+  }
+
+  &__ring {
+    @apply transition-[stroke-dashoffset] will-change-[stroke-dashoffset] duration-75 ease-out;
+    @apply stroke-[color:theme(borderColor.info.emphasis)] origin-center;
+    @apply dark:stroke-[color:theme(borderColor.dark.info.emphasis)];
+  }
+
+  &__wrapper {
+    @apply origin-center -rotate-90;
+  }
+
+  &--indeterminate {
+    .ringbar__ring {
+      animation: 1.5s ease-in-out infinite spinner-ring;
+    }
+
+    .ringbar__wrapper {
+      animation: 2s spinner-spin linear infinite;
+    }
+  }
+
+  &--xs {
+    @apply w-4 h-4;
+  }
+
+  &--sm {
+    @apply w-5 h-5;
+  }
+
+  &--md {
+    @apply w-6 h-6;
+  }
+
+  &--lg {
+    @apply w-8 h-8;
+  }
+}
+
+@keyframes spinner-spin {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner-ring {
+  0% {
+    stroke-dashoffset: 45.2389342;
+    transform: rotate(0);
+  }
+
+  50% {
+    stroke-dashoffset: 5.02654825;
+    transform: rotate(45deg);
+  }
+
+  100% {
+    stroke-dashoffset: 45.2389342;
+    transform: rotate(360deg);
+  }
+}
+</style>

package/dist/components/ringbar/Ringbar.vue.d.ts

@@ -0,0 +1,66 @@
+import { PropType } from 'vue-demi';
+import { type SizeVariant } from '../button';
+/**
+ * How to count dashoffset
+ *
+ *  offset = 2 * r * π
+ *
+ * ex:
+ *  r = 8
+ *
+ *  offset = 2 * 8 * 3.14
+ *         = 50.2654825
+ */
+declare const _default: import("vue-demi").DefineComponent<{
+    value: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    min: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    presentage: import("vue-demi").ComputedRef<number>;
+    classNames: import("vue-demi").ComputedRef<string[]>;
+}, 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<{
+    value: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    min: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    value: string | number;
+    size: SizeVariant;
+    min: string | number;
+    max: string | number;
+    indeterminate: boolean;
+}, {}>;
+export default _default;

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 | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
         default: undefined;
     };
     selected: {
@@ -75,7 +75,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 | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
         default: undefined;
     };
     selected: {

package/dist/components/sidebar/SidebarBrand.vue

@@ -56,7 +56,7 @@ export default defineComponent({
     @apply dark:text-dark-default;
 
     a {
-      @apply no-underline;
+      @apply no-underline cursor-pointer hover:no-underline;
 
       & > img {
         @apply max-w-full h-auto;

package/dist/components/sidebar/SidebarNav.vue

@@ -1,15 +1,15 @@
 <template>
   <div
-    v-if="title"
     class="sidebar__title"
     data-testid="sidebar-title"
-    :class="{
+    :class="[(!title && titleActionLabel) ? 'justify-end' : 'justify-between', {
       'sidebar__title__collapsible': (collapsible && type !== 'narrow'),
       'sidebar__title--collapsed': !isExpand,
-    }"
+    }]"
     v-bind="$attrs"
     @click.prevent="toggleExpand">
     <Caption
+      v-if="title"
       weight="bold"
       transform="capitalize">
       {{ title }}
@@ -37,6 +37,8 @@
       data-testid="sidebar-nav"
       vertical
       :title="title"
+      :title-action-label="titleActionLabel"
+      :title-action-url="titleActionUrl"
       :variant="variant"
       :condensed="condensed"
       :align="align">
@@ -218,7 +220,7 @@ export default defineComponent({
   }
 
   &__title {
-    @apply relative z-1 flex items-center justify-between -mb-9 px-3 mt-5;
+    @apply relative z-1 flex items-center -mb-9 px-3 mt-5;
 
     &__collapsible {
       @apply cursor-pointer select-none;

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

@@ -195,7 +195,12 @@ export default defineComponent({
       }
 
       .signature-draw__modal {
-        @apply flex-col-reverse vertical-lr;
+        @apply flex-col-reverse;
+
+        &,
+        & * {
+          @apply vertical-lr;
+        }
 
         .signature-draw__reset {
           @apply bottom-1 top-auto;

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

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

package/dist/components/spread/Spread.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent } from "vue-demi";
 export default defineComponent({
   props: {
     active: {

package/dist/components/spread/Spread.vue.d.ts

@@ -1,9 +1,9 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue-demi").DefineComponent<{
     active: {
         type: BooleanConstructor;
         default: boolean;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").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<{
     active: {
         type: BooleanConstructor;
         default: boolean;