@privyid/persona 0.10.0 → 0.12.0

package/dist/components/tooltip/Tooltip.vue.d.ts

@@ -12,7 +12,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     target: {
         type: PropType<HTMLElement>;
-        default: any;
+        default: undefined;
     };
     placement: {
         type: PropType<Placement>;
@@ -21,7 +21,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     isShow: import("vue-demi").Ref<boolean>;
     classNames: import("vue-demi").ComputedRef<string[]>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "show" | "hide")[], "show" | "update:modelValue" | "hide", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("show" | "update:modelValue" | "hide")[], "show" | "update:modelValue" | "hide", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
@@ -32,20 +32,20 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     target: {
         type: PropType<HTMLElement>;
-        default: any;
+        default: undefined;
     };
     placement: {
         type: PropType<Placement>;
         default: string;
     };
 }>> & {
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-    onShow?: (...args: any[]) => any;
-    onHide?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
+    onHide?: ((...args: any[]) => any) | undefined;
 }, {
-    target: HTMLElement;
     color: ColorVariant;
     modelValue: boolean;
+    target: HTMLElement;
     placement: Placement;
 }>;
 export default _default;

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

@@ -1,6 +1,6 @@
 import type { Placement } from '@floating-ui/dom';
 import { Directive } from 'vue-demi';
-export declare type ColorVariant = 'black' | 'white';
+export type ColorVariant = 'black' | 'white';
 export interface TooltipOptions {
     text: string;
     color: ColorVariant;

package/dist/components/tooltip/index.mjs

@@ -5,7 +5,7 @@ import {
   parseAction,
   parseText,
   parseColor
-} from "./utils/parse-bindings";
+} from "./utils/parse-bindings.mjs";
 const handleClick = createHandler("click", "toggle", true);
 const handleMouseEnter = createHandler("hover", "show");
 const handleMouseLeave = createHandler("hover", "hide");

package/dist/components/tooltip/utils/create-handler.d.ts

@@ -1,4 +1,4 @@
-declare type EventAction = 'toggle' | 'show' | 'hide';
+type EventAction = 'toggle' | 'show' | 'hide';
 /**
  *
  * @param eventName Event name, only run when attr data-tooltip-action match this name

package/dist/components/tour/Tour.vue.d.ts

@@ -1,11 +1,11 @@
 import TourDialog from './TourDialog.vue';
-declare type TourDialogProps = Partial<InstanceType<typeof TourDialog>['$props']>;
+type TourDialogProps = Partial<InstanceType<typeof TourDialog>['$props']>;
 declare const _default: import("vue-demi").DefineComponent<{}, {
     isShow: import("vue-demi").Ref<boolean>;
     dialog: import("vue-demi").ShallowRef<any>;
-    target: import("vue-demi").ShallowRef<HTMLElement>;
+    target: import("vue-demi").ShallowRef<HTMLElement | undefined>;
     show: (targetEl: HTMLElement, options: TourDialogProps) => void;
     hide: () => void;
-    config: import("vue-demi").ShallowRef<Partial<any>>;
+    config: import("vue-demi").ShallowRef<Partial<any> | undefined>;
 }, {}, {}, {}, 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<{}>>, {}>;
 export default _default;

package/dist/components/tour/TourDialog.vue

@@ -65,7 +65,7 @@
           data-testid="tour-control-finish"
           size="xs"
           variant="solid"
-          color="primary"
+          color="info"
           @click="$emit('next', $event)">
           {{ finishLabel }}
         </p-button>
@@ -74,7 +74,7 @@
           data-testid="tour-control-next"
           size="xs"
           variant="solid"
-          color="primary"
+          color="info"
           @click="$emit('next', $event)">
           {{ nextLabel }}
         </p-button>
@@ -158,11 +158,13 @@ export default defineComponent({
 <style lang="postcss">
 .tour {
   &__dialog {
-    @apply rounded bg-emphasis w-full max-w-xs z-[100] overflow-hidden relative shadow-sm;
+    @apply rounded bg-inverse w-full max-w-xs z-[100] overflow-hidden relative shadow-sm;
+    @apply dark:bg-dark-inverse;
   }
 
   &__image {
     @apply max-w-full h-auto object-cover bg-default;
+    @apply dark:bg-dark-default;
   }
 
   &__body {
@@ -170,6 +172,7 @@ export default defineComponent({
 
     > * {
       @apply text-on-emphasis;
+      @apply dark:text-dark-on-emphasis;
     }
   }
 
@@ -179,6 +182,7 @@ export default defineComponent({
 
   &__meta {
     @apply text-xs text-muted flex-shrink-0;
+    @apply dark:text-dark-muted;
   }
 
   &__controls {
@@ -186,18 +190,22 @@ export default defineComponent({
 
     > .btn--variant-link.btn--default {
       @apply text-on-emphasis hover:text-on-emphasis focus:text-on-emphasis;
+      @apply dark:text-dark-on-emphasis hover:dark:text-dark-on-emphasis focus:dark:text-dark-on-emphasis;
     }
 
     > .tour__divider {
       @apply text-on-emphasis;
+      @apply dark:text-dark-on-emphasis;
     }
   }
 
   &__dismiss {
     @apply absolute top-3 right-3 hover:cursor-pointer text-on-emphasis/30 hover:text-on-emphasis/50;
+    @apply dark:text-dark-on-emphasis/30 hover:dark:text-dark-on-emphasis/50;
 
     .tour--image & {
       @apply text-default/30 hover:text-default/50;
+      @apply dark:text-dark-default/30 hover:dark:text-dark-default/50;
     }
   }
 }

package/dist/components/tour/TourDialog.vue.d.ts

@@ -1,7 +1,7 @@
 declare const _default: import("vue-demi").DefineComponent<{
     title: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     text: {
         type: StringConstructor;
@@ -9,7 +9,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     image: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     highlight: {
         type: BooleanConstructor;
@@ -46,7 +46,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("next" | "prev" | "dismiss")[], "next" | "prev" | "dismiss", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     title: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     text: {
         type: StringConstructor;
@@ -54,7 +54,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     image: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     highlight: {
         type: BooleanConstructor;
@@ -89,13 +89,13 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>> & {
-    onNext?: (...args: any[]) => any;
-    onPrev?: (...args: any[]) => any;
-    onDismiss?: (...args: any[]) => any;
+    onNext?: ((...args: any[]) => any) | undefined;
+    onDismiss?: ((...args: any[]) => any) | undefined;
+    onPrev?: ((...args: any[]) => any) | undefined;
 }, {
     image: string;
-    dismissable: boolean;
     text: string;
+    dismissable: boolean;
     title: string;
     step: number;
     highlight: boolean;

package/dist/components/tour/TourHighlight.vue.d.ts

@@ -2,12 +2,12 @@ import { PropType } from 'vue-demi';
 declare const _default: import("vue-demi").DefineComponent<{
     target: {
         type: PropType<HTMLElement>;
-        default: any;
+        default: undefined;
     };
 }, {}, 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<{
     target: {
         type: PropType<HTMLElement>;
-        default: any;
+        default: undefined;
     };
 }>>, {
     target: HTMLElement;

package/dist/components/tour/core/base.d.ts

@@ -1,5 +1,5 @@
 import { Hook } from '../../steps/utils/hook';
-export declare type TourActionHook = (to: AbstractTour, from: AbstractTour) => boolean | Promise<boolean>;
+export type TourActionHook = (to: AbstractTour, from: AbstractTour) => boolean | Promise<boolean>;
 export declare enum TourDirection {
     FORWARD = 1,
     BACKWARD = -1

package/dist/components/tour/core/base.mjs

@@ -23,18 +23,33 @@ export class AbstractTour {
     this.parent = parent;
     return this;
   }
+  /**
+   * Get options with parent options as fallback
+   */
   getOptions() {
     return defu(this.options, this.parent?.getOptions());
   }
+  /**
+   * Set tour direction
+   * @param direction 1 for forward (next) and -1 for backward (prev)
+   */
   setDirection(direction) {
     this.direction = direction;
     return this;
   }
+  /**
+   * Attach to parent
+   * @param parent Parent Instance
+   */
   attach(parent) {
     parent.onPrevHooks.add(this.runOnPrevHooks);
     parent.onNextHooks.add(this.runOnNextHooks);
     return this;
   }
+  /**
+   * Deattach from parent
+   * @param parent Parent Instance
+   */
   detach(parent) {
     parent.onPrevHooks.remove(this.runOnPrevHooks);
     parent.onNextHooks.remove(this.runOnNextHooks);

package/dist/components/tour/core/step/action.d.ts

@@ -1,9 +1,9 @@
 import type UE from '@testing-library/user-event';
 import { AbstractStep } from '../step';
-declare type UserEvent = ReturnType<typeof UE['setup']>;
-declare type ExtractParams<F> = F extends (T: Element, ...args: infer P) => Promise<void> ? P : unknown[];
-export declare type EventType = 'click' | 'dblClick' | 'tripleClick' | 'type' | 'hover' | 'unhover' | 'clear';
-export declare type ParamsOf<E extends EventType> = ExtractParams<UserEvent[E]>;
+type UserEvent = ReturnType<typeof UE['setup']>;
+type ExtractParams<F> = F extends (T: Element, ...args: infer P) => Promise<void> ? P : unknown[];
+export type EventType = 'click' | 'dblClick' | 'tripleClick' | 'type' | 'hover' | 'unhover' | 'clear';
+export type ParamsOf<E extends EventType> = ExtractParams<UserEvent[E]>;
 export interface ActionOptions<E extends EventType> {
     target: string;
     action: E;

package/dist/components/tour/core/step.d.ts

@@ -1,8 +1,8 @@
 import { AbstractTour } from './base';
 import type { Tour, TourOptions } from './tour';
-declare type Merge<A, B> = Omit<A, keyof B> & B;
-declare type BaseOptions = Partial<Omit<TourOptions, 'onFinished'>>;
-export declare type OnCleanup = (cleanupFn: () => unknown) => unknown;
+type Merge<A, B> = Omit<A, keyof B> & B;
+type BaseOptions = Partial<Omit<TourOptions, 'onFinished'>>;
+export type OnCleanup = (cleanupFn: () => unknown) => unknown;
 export declare abstract class AbstractStep<Option> extends AbstractTour<Merge<BaseOptions, Option>> {
     protected parent?: Tour;
     protected cleanFns: Array<() => unknown>;

package/dist/components/tour/core/step.mjs

@@ -7,23 +7,42 @@ export class AbstractStep extends AbstractTour {
   async dispose() {
     return await Promise.allSettled(this.cleanFns.map((clean) => clean()));
   }
+  /**
+   * Run function before unmounted
+   * @param cleanFn clean function
+   */
   onCleanup(cleanFn) {
     this.cleanFns.push(cleanFn);
   }
+  /**
+   * Start this step
+   */
   async start() {
     this.attach(this.parent);
     await this.run();
   }
+  /**
+   * Stop this step
+   */
   async stop() {
     await this.dispose();
     this.detach(this.parent);
   }
+  /**
+   * Trigger next to parent
+   */
   async next() {
     await this.parent.next();
   }
+  /**
+   * Trigger prev to parent
+   */
   async prev() {
     await this.parent.prev();
   }
+  /**
+   * Trigger next or prev following the direction
+   */
   async ahead() {
     return await (this.direction === TourDirection.BACKWARD ? this.prev() : this.next());
   }

package/dist/components/tour/core/story.d.ts

@@ -2,7 +2,7 @@ import { Tour } from './tour';
 import type { ConditionalOptions } from './step/conditional';
 import type { DialogOptions } from './step/dialog';
 import type { ActionOptions, EventType, ParamsOf } from './step/action';
-declare type TourBuilderCallback = (tour: TourStory) => unknown;
+type TourBuilderCallback = (tour: TourStory) => unknown;
 /**
  * Tour with additional function to build a tour stories
  */

package/dist/components/tour/core/story.mjs

@@ -14,6 +14,10 @@ export class TourStory extends Tour {
       image
     })) : this.add(new StepDialog(targetOrOption));
   }
+  /**
+   * Delay or Wait, setTimout equivalent
+   * @param duration duration in milliseconds
+   */
   delay(duration) {
     return this.add(new StepDelay({ duration }));
   }
@@ -24,33 +28,81 @@ export class TourStory extends Tour {
       params
     })) : this.add(new StepAction(targetOrOption));
   }
+  /**
+   * Trigger click to target element
+   * @param target Target querySelector
+   */
   click(target) {
     return this.action(target, "click");
   }
+  /**
+   * Trigger double click to target element
+   * @param target Target querySelector
+   */
   dblClick(target) {
     return this.action(target, "dblClick");
   }
+  /**
+   * Trigger triple click to target element
+   * @param target Target querySelector
+   */
   tripleClick(target) {
     return this.action(target, "tripleClick");
   }
+  /**
+   * Trigger hover to target element
+   * @param target Target querySelector
+   */
   hover(target) {
     return this.action(target, "hover");
   }
+  /**
+   * Trigger unhover (blur) to target element
+   * @param target Target querySelector
+   */
   unhover(target) {
     return this.action(target, "unhover");
   }
+  /**
+   * Trigger blur (unhover) to target element
+   * @param target Target querySelector
+   */
   blur(target) {
     return this.unhover(target);
   }
+  /**
+   * Remotely typing target input
+   * @param target Target querySelector
+   */
   type(target, text) {
     return this.action(target, "type", text);
   }
+  /**
+   * Clear input text
+   * @param target Target querySelector
+   */
   clear(target) {
     return this.action(target, "clear");
   }
+  /**
+   * Redirect to url
+   * @param url target url
+   * @param backUrl target url when back button clicked
+   */
   visit(url, backUrl) {
     return this.add(new StepVisit({ url, backUrl }));
   }
+  /**
+   * Run steps only when condition meet, skip if not
+   * @param condition Ref or Function to check
+   * @param buildTour
+   * @example
+   * tour.runIf(() => window.matchMedia("(max-width: 700px)").matches, (tour) => {
+   *    return tour
+   *      .click('#mobile-only')
+   *      .dialog('#mobile-only', 'Hello World')
+   * })
+   */
   runIf(condition, buildTour) {
     const tour = new TourStory();
     return this.add(new StepCondition({
@@ -58,6 +110,21 @@ export class TourStory extends Tour {
       tour: buildTour(tour) ?? tour
     }));
   }
+  /**
+   * Run else if, this must be used after runIf.
+   * @param condition
+   * @param buildTour
+   * @example
+   * tour.runIf(() => window.matchMedia("(max-width: 700px)").matches, (tour) => {
+   *    return tour
+   *      .click('#mobile-only')
+   *      .dialog('#mobile-only', 'Hello World')
+   * }).runElseIf(() => window.matchMedia("(max-width: 1000px), (tour) => {
+   *    return tour
+   *      .click('#tablet-only')
+   *      .dialog('#tablet-only', 'Hello World')*
+   * })
+   */
   runElseIf(condition, buildTour) {
     const step = this.steps.at(-1);
     if (!(step instanceof StepCondition) || !step.canChain())
@@ -70,6 +137,20 @@ export class TourStory extends Tour {
     });
     return this;
   }
+  /**
+   * Run else condition, this must be used after runElse
+   * @param buildTour
+   * @example
+   * tour.runIf(() => window.matchMedia("(max-width: 700px)").matches, (tour) => {
+   *    return tour
+   *      .click('#mobile-only')
+   *      .dialog('#mobile-only', 'Hello World')
+   * }).runElse((tour) => {
+   *    return tour
+   *      .click('#not-mobile')
+   *      .dialog('#not-mobile', 'Hello World')*
+   * })
+   */
   runElse(buildTour) {
     const step = this.steps.at(-1);
     if (!(step instanceof StepCondition) || !step.canChain())

package/dist/components/tour/core/tour.d.ts

@@ -78,7 +78,7 @@ export declare class Tour extends AbstractTour<TourOptions> {
     /**
      * Get current step instance
      */
-    protected getCurrentStep(): AbstractTour<BaseTourOptions>;
+    protected getCurrentStep(): AbstractTour<BaseTourOptions> | undefined;
     /**
      * Run "on-finished" hooks
      */

package/dist/components/tour/core/tour.mjs

@@ -3,7 +3,7 @@ import { isNumber } from "lodash-es";
 import {
   AbstractTour,
   TourDirection
-} from "./base";
+} from "./base.mjs";
 export class Tour extends AbstractTour {
   constructor(options) {
     super(options);
@@ -24,18 +24,33 @@ export class Tour extends AbstractTour {
     if (typeof options?.onFinished === "function")
       this.onFinishedHooks.unshift(options.onFinished);
   }
+  /**
+   * Get current step index
+   */
   getIndex() {
     return this.getRealIndex() + (this.parent?.getIndex() ?? 0);
   }
+  /**
+   * Get total Step
+   */
   getTotal() {
     return this.parent?.getTotal() ?? this.getTotalChild();
   }
+  /**
+   * Get list of steps
+   */
   getSteps() {
     return this.steps;
   }
+  /**
+   * Get running status
+   */
   isRunning() {
     return this.running;
   }
+  /**
+   * Count total step, including Sub-Tour
+   */
   getTotalChild() {
     let total = 0;
     for (const step of this.steps) {
@@ -43,6 +58,9 @@ export class Tour extends AbstractTour {
     }
     return total;
   }
+  /**
+   * Calculate real index, including Sub-Tour
+   */
   getRealIndex() {
     let index = this.index;
     for (let i = 0; i < this.index; i++) {
@@ -52,12 +70,21 @@ export class Tour extends AbstractTour {
     }
     return index;
   }
+  /**
+   * Get current step instance
+   */
   getCurrentStep() {
     return this.steps.at(this.index);
   }
+  /**
+   * Run "on-finished" hooks
+   */
   async runOnFinishedHooks() {
-    await Promise.allSettled(this.onFinishedHooks.map((hook) => hook()));
+    await Promise.allSettled(this.onFinishedHooks.map(async (hook) => await hook()));
   }
+  /**
+   * Execute current step
+   */
   async run() {
     const step = this.getCurrentStep();
     try {
@@ -73,6 +100,9 @@ export class Tour extends AbstractTour {
         await this.stop();
     }
   }
+  /**
+   * Goto previous step
+   */
   async prev(skipHook = false) {
     const toIndex = this.index - 1;
     const from = this.steps.at(this.index);
@@ -86,6 +116,9 @@ export class Tour extends AbstractTour {
       await this.run();
     }
   }
+  /**
+   * Goto next step
+   */
   async next(skipHook = false) {
     const toIndex = this.index + 1;
     const from = this.steps.at(this.index);
@@ -100,10 +133,16 @@ export class Tour extends AbstractTour {
         await this.finish();
     }
   }
+  /**
+   * Finishing step
+   */
   async finish() {
     await this.runOnFinishedHooks();
     await (this.parent ? this.parent.next() : this.stop());
   }
+  /**
+   * Show and start the tour
+   */
   async start() {
     this.running = true;
     this.index = this.direction === TourDirection.BACKWARD ? this.steps.length - 1 : 0;
@@ -111,21 +150,36 @@ export class Tour extends AbstractTour {
       this.attach(this.parent);
     await this.run();
   }
+  /**
+   * Hide and stop the tour
+   */
   async stop() {
     await this.getCurrentStep().stop();
     if (this.parent)
       this.detach(this.parent);
     this.running = false;
   }
+  /**
+   * Find index by name or by instance
+   * @param id
+   */
   findIndex(id) {
     if (id instanceof AbstractTour)
       return this.steps.indexOf(id);
     return this.steps.findIndex((item) => item.name === id);
   }
+  /**
+   * Add Tour Step
+   * @param step Step instance
+   */
   add(step) {
     this.steps.push(step.setParent(this));
     return this;
   }
+  /**
+   * Remove Step
+   * @param id number of index, name or symbol
+   */
   remove(id) {
     if (!id && this.parent)
       this.parent.remove(this);

package/dist/components/truncate/Truncate.vue

@@ -4,6 +4,7 @@
     mode="out-in">
     <span
       :key="`${expand}`"
+      class="truncate"
       data-testid="truncate">
       {{ viewText }}
       <template v-if="expandable && text.length > maxLength">
@@ -73,3 +74,10 @@ export default defineComponent({
   }
 });
 </script>
+
+<style lang="postcss">
+.truncate {
+  @apply text-default;
+  @apply dark:text-dark-default;
+}
+</style>

package/dist/components/utils/base64.mjs

@@ -22,7 +22,7 @@ export function fromBase64(dataurl, filename, mimeType) {
   if (!dataurl)
     return;
   try {
-    const name = filename ?? new Date().toISOString();
+    const name = filename ?? (/* @__PURE__ */ new Date()).toISOString();
     const [meta, body] = dataurl.split(",");
     const mime = mimeType ?? meta.match(/:(.*?);/)[1];
     const buffer = window.atob(body);