@privyid/persona 0.3.0 → 0.5.0

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

@@ -0,0 +1,120 @@
+import { BaseTourOptions, AbstractTour, TourDirection } from './base';
+/**
+ * Basic Tour, it cover all basic tour functionality (prev, next, start, finish)
+ */
+export interface TourOptions extends BaseTourOptions {
+    /**
+     * Enable / disable dismiss button
+     * @default true
+     */
+    dismissable: boolean;
+    /**
+     * Customize previous button label
+     * @default 'Previous'
+     */
+    prevLabel: string;
+    /**
+     * Customize next button label
+     * @default 'Next'
+     */
+    nextLabel: string;
+    /**
+     * Customize dismiss button label
+     * @default 'Dismiss'
+     */
+    dismissLabel: string;
+    /**
+     * Customize finish button label
+     * @default 'Finish'
+     */
+    finishLabel: string;
+    /**
+     * Timeout for waiting target element appear
+     * @default 3000
+     */
+    waitTimeout: number;
+    /**
+     * If true, skip to next step of got an error or timeout
+     * If false, Tour will stop immediately
+     * @default false
+     */
+    skipOnError: boolean;
+    /**
+     * Hook when tour finished
+     */
+    onFinished?: () => void | Promise<void>;
+}
+export declare class Tour extends AbstractTour<TourOptions> {
+    protected index: number;
+    protected steps: AbstractTour[];
+    protected onFinishedHooks: Array<() => void | Promise<void>>;
+    protected parent?: Tour;
+    constructor(options?: Partial<TourOptions>);
+    /**
+     * Get current step index
+     */
+    getIndex(): number;
+    /**
+     * Get total Step
+     */
+    getTotal(): number;
+    /**
+     * Get list of steps
+     */
+    getSteps(): AbstractTour[];
+    /**
+     * Count total step, including Sub-Tour
+     */
+    getTotalChild(): number;
+    /**
+     * Calculate real index, including Sub-Tour
+     */
+    protected getRealIndex(): number;
+    /**
+     * Get current step instance
+     */
+    protected getCurrentStep(): AbstractTour<BaseTourOptions>;
+    /**
+     * Run "on-finished" hooks
+     */
+    protected runOnFinishedHooks(): Promise<void>;
+    /**
+     * Execute current step
+     */
+    protected run(): Promise<void>;
+    /**
+     * Goto previous step
+     */
+    prev(skipHook?: boolean): Promise<void>;
+    /**
+     * Goto next step
+     */
+    next(skipHook?: boolean): Promise<void>;
+    /**
+     * Finishing step
+     */
+    finish(): Promise<void>;
+    /**
+     * Show and start the tour
+     */
+    start(index?: number, direction?: TourDirection): Promise<void>;
+    /**
+     * Hide and stop the tour
+     */
+    stop(): Promise<void>;
+    /**
+     * Find index by name or by instance
+     * @param id
+     */
+    protected findIndex(id: AbstractTour['name'] | AbstractTour): number;
+    /**
+     * Add Tour Step
+     * @param step Step instance
+     */
+    add(step: AbstractTour): this;
+    /**
+     * Remove Step
+     * @param id number of index, name or symbol
+     */
+    remove(id?: number | AbstractTour['name'] | AbstractTour): void;
+}

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

@@ -0,0 +1,133 @@
+import defu from "defu";
+import { isNumber } from "lodash-es";
+import {
+  AbstractTour,
+  TourDirection
+} from "./base";
+export class Tour extends AbstractTour {
+  constructor(options) {
+    super(options);
+    this.index = -1;
+    this.steps = [];
+    this.onFinishedHooks = [];
+    this.options = defu(options, {
+      highlight: true,
+      dismissable: true,
+      prevLabel: "Previous",
+      nextLabel: "Next",
+      dismissLabel: "Dismiss",
+      finishLabel: "Finish",
+      waitTimeout: 3e3,
+      skipOnError: false
+    });
+    if (typeof options?.onFinished === "function")
+      this.onFinishedHooks.unshift(options.onFinished);
+  }
+  getIndex() {
+    return this.getRealIndex() + (this.parent?.getIndex() ?? 0);
+  }
+  getTotal() {
+    return this.parent?.getTotal() ?? this.getTotalChild();
+  }
+  getSteps() {
+    return this.steps;
+  }
+  getTotalChild() {
+    let total = 0;
+    for (const step of this.steps) {
+      total += "getTotalChild" in step ? step.getTotalChild() : 1;
+    }
+    return total;
+  }
+  getRealIndex() {
+    let index = this.index;
+    for (let i = 0; i < this.index; i++) {
+      const step = this.steps[i];
+      if ("getTotalChild" in step)
+        index += step.getTotalChild() - 1;
+    }
+    return index;
+  }
+  getCurrentStep() {
+    return this.steps.at(this.index);
+  }
+  async runOnFinishedHooks() {
+    await Promise.allSettled(this.onFinishedHooks.map((hook) => hook()));
+  }
+  async run() {
+    const step = this.getCurrentStep();
+    try {
+      await step.setDirection(this.direction).start();
+    } catch (error) {
+      if (import.meta.env.DEV)
+        console.warn(error, step);
+      if (this.getOptions().skipOnError || step.getOptions().skipOnError)
+        await (this.direction === TourDirection.BACKWARD ? this.prev(true) : this.next(true));
+      else if (this.parent)
+        throw error;
+      else
+        await this.stop();
+    }
+  }
+  async prev(skipHook = false) {
+    const toIndex = this.index - 1;
+    const from = this.steps.at(this.index);
+    const to = this.steps.at(toIndex);
+    if (toIndex < 0 && this.parent)
+      await this.parent.prev();
+    else if (toIndex > -1 && (skipHook || await this.runOnPrevHooks(to, from))) {
+      await from.stop();
+      this.index = toIndex;
+      this.direction = TourDirection.BACKWARD;
+      await this.run();
+    }
+  }
+  async next(skipHook = false) {
+    const toIndex = this.index + 1;
+    const from = this.steps.at(this.index);
+    const to = this.steps.at(toIndex);
+    if (skipHook || await this.runOnNextHooks(to, from)) {
+      if (toIndex < this.steps.length) {
+        await from.stop();
+        this.index = toIndex;
+        this.direction = TourDirection.FORWARD;
+        await this.run();
+      } else
+        await this.finish();
+    }
+  }
+  async finish() {
+    await this.runOnFinishedHooks();
+    await (this.parent ? this.parent.next() : this.stop());
+  }
+  async start(index = 0, direction = TourDirection.FORWARD) {
+    this.index = index;
+    this.direction = direction;
+    if (this.parent)
+      this.attach(this.parent);
+    await this.run();
+  }
+  async stop() {
+    await this.getCurrentStep().stop();
+    if (this.parent)
+      this.detach(this.parent);
+  }
+  findIndex(id) {
+    if (id instanceof AbstractTour)
+      return this.steps.indexOf(id);
+    return this.steps.findIndex((item) => item.name === id);
+  }
+  add(step) {
+    this.steps.push(step.setParent(this));
+    return this;
+  }
+  remove(id) {
+    if (!id && this.parent)
+      this.parent.remove(this);
+    else {
+      const index = isNumber(id) ? id : this.findIndex(id);
+      if (index > -1)
+        this.steps.splice(index, 1);
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+import { TourOptions } from './core/tour';
+import { TourStory } from './core/story';
+export declare function createTour(options?: TourOptions): TourStory;

package/dist/components/tour/index.mjs

@@ -0,0 +1,4 @@
+import { TourStory } from "./core/story.mjs";
+export function createTour(options) {
+  return new TourStory(options);
+}

package/dist/components/tour/utils/is-visible.d.ts

@@ -0,0 +1,2 @@
+export declare function isVisible(target: HTMLElement): boolean;
+export declare function focus(target: HTMLElement, duration?: number): Promise<unknown>;

package/dist/components/tour/utils/is-visible.mjs

@@ -0,0 +1,35 @@
+import scrollIntoView from "scroll-into-view";
+export function isVisible(target) {
+  if (!(target instanceof Element))
+    return false;
+  const style = getComputedStyle(target);
+  if (style.display === "none")
+    return false;
+  if (style.visibility !== "visible")
+    return false;
+  if (Number.parseFloat(style.opacity) < 0.1)
+    return false;
+  const boundaries = target.getBoundingClientRect();
+  if (target.offsetWidth + target.offsetHeight + boundaries.height + boundaries.width === 0)
+    return false;
+  const posX = boundaries.left + boundaries.width / 2;
+  const posY = boundaries.top + boundaries.height / 2;
+  const screenWidth = document.documentElement.clientWidth || window.innerWidth;
+  const screenHeight = document.documentElement.clientHeight || window.innerHeight;
+  if (posX < 0 || posY < 0)
+    return false;
+  if (posX > screenWidth || posY > screenHeight)
+    return false;
+  let pointContainer = document.elementFromPoint(posX, posY);
+  do {
+    if (pointContainer === target)
+      return true;
+    pointContainer = pointContainer.parentNode;
+  } while (pointContainer);
+  return false;
+}
+export async function focus(target, duration = 330) {
+  return await new Promise((resolve) => {
+    scrollIntoView(target, { time: duration }, resolve);
+  });
+}

package/dist/components/tour/utils/use-selector.d.ts

@@ -0,0 +1,3 @@
+import { MaybeRef } from '@vueuse/core';
+import { Ref } from 'vue-demi';
+export declare function useSelector<E extends HTMLElement>(selector: MaybeRef<string>): Readonly<Ref<E>>;

package/dist/components/tour/utils/use-selector.mjs

@@ -0,0 +1,25 @@
+import {
+  tryOnMounted,
+  useMutationObserver
+} from "@vueuse/core";
+import {
+  ref,
+  watch,
+  unref
+} from "vue-demi";
+export function useSelector(selector) {
+  const element = ref();
+  const body = ref();
+  watch(() => unref(selector), (value) => {
+    element.value = document.querySelector(value);
+  });
+  useMutationObserver(body, ([mutation]) => {
+    if (mutation.type === "childList")
+      element.value = document.querySelector(unref(selector));
+  }, { childList: true, subtree: true });
+  tryOnMounted(() => {
+    body.value = document.body;
+    element.value = document.querySelector(unref(selector));
+  });
+  return element;
+}

package/dist/components/tour/utils/wait-element.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Wait element appear
+ * @param selector query selector
+ * @param timeout wait timeout in millisecond
+ */
+export declare function waitElement<Element extends HTMLElement>(selector: string, timeout?: number): Promise<Element>;

package/dist/components/tour/utils/wait-element.mjs

@@ -0,0 +1,44 @@
+import { isVisible, focus } from "./is-visible.mjs";
+async function getVisibleElement(selector) {
+  const target = document.querySelector(selector);
+  if (target) {
+    await focus(target);
+    if (!isVisible(target))
+      throw new Error(`Target: "${selector}" not visible`);
+  }
+  return target;
+}
+export async function waitElement(selector, timeout = 3e4) {
+  return await new Promise((resolve, reject) => {
+    let timer;
+    const mutation = new MutationObserver(([mutation2]) => {
+      if (mutation2.type === "childList") {
+        getVisibleElement(selector).then((target) => {
+          if (target) {
+            cleanup();
+            resolve(target);
+          }
+        }).catch(reject);
+      }
+    });
+    const cleanup = () => {
+      if (timer)
+        clearTimeout(timer);
+      if (mutation)
+        mutation.disconnect();
+    };
+    if (timeout > 0) {
+      timer = setTimeout(() => {
+        cleanup();
+        reject(new Error("Target: timeout"));
+      }, timeout);
+    }
+    mutation.observe(document.body, { childList: true, subtree: true });
+    getVisibleElement(selector).then((target) => {
+      if (target) {
+        cleanup();
+        resolve(target);
+      }
+    }).catch(reject);
+  });
+}

package/dist/components/utils/base64.d.ts

@@ -0,0 +1,8 @@
+export declare function toBase64(file: globalThis.File): Promise<string>;
+/**
+ * Convert base64 data-uri to File
+ * @param dataurl data base64
+ * @param filename output's filename
+ * @param mimeType output's mimeType
+ */
+export declare function fromBase64(dataurl: string, filename?: string, mimeType?: string): globalThis.File;

package/dist/components/utils/base64.mjs

@@ -0,0 +1,29 @@
+import { format } from "date-fns";
+import { Buffer } from "buffer";
+export function toBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    const onLoad = () => {
+      cleanup();
+      resolve(reader.result);
+    };
+    const onError = (error) => {
+      cleanup();
+      reject(error);
+    };
+    const cleanup = () => {
+      reader.removeEventListener("load", onLoad);
+      reader.removeEventListener("error", onError);
+    };
+    reader.addEventListener("load", onLoad);
+    reader.addEventListener("error", onError);
+    reader.readAsDataURL(file);
+  });
+}
+export function fromBase64(dataurl, filename, mimeType) {
+  const name = filename ?? format(new Date(), "yyyyMMddHHmmss");
+  const [meta, body] = dataurl.split(",");
+  const mime = mimeType ?? meta.match(/:(.*?);/)[1];
+  const buffer = Buffer.from(body, "base64");
+  return new globalThis.File([buffer], name, { type: mime });
+}

package/dist/components/utils/color.d.ts

@@ -5,8 +5,13 @@ interface RGB {
 }
 /**
  * Parse hex string to R,G,B Object
- * @param color RGB Object
+ * @param color hex string color
  * @example toRGB('#6E1E62') // {R: 110, G: 30, B: 98}
  */
 export declare function toRGB(color: string): RGB;
+/**
+ * Get brightness of color
+ * @param color hex string color
+ */
+export declare function getBrightness(color: string): number;
 export {};

package/dist/components/utils/color.mjs

@@ -8,3 +8,7 @@ export function toRGB(color) {
     B: Number.parseInt(b, 16)
   };
 }
+export function getBrightness(color) {
+  const rgb = toRGB(color);
+  return rgb.R * 299 + rgb.G * 587 + rgb.B * 114 / 1e3;
+}

package/dist/components/utils/value.mjs

@@ -1,5 +1,6 @@
+import { deepEqual } from "fast-equals";
 export function isEqual(a, b) {
-  return JSON.stringify(a) === JSON.stringify(b);
+  return deepEqual(a, b);
 }
 export function valueIn(array, value) {
   return array.some((item) => isEqual(item, value));

package/dist/components/utils/vnode.d.ts

@@ -1,2 +1,15 @@
 import { VNode } from 'vue-demi';
-export declare function findAllChildren(vnodes: VNode[], name: string): VNode[];
+/**
+ * Coerce props's value to boolean
+ * @param value prop value
+ */
+export declare function toBoolean(value: '' | boolean): boolean;
+/**
+ *
+ * @param vnodes vnodes tree to be scanned
+ * @param names children name(s)
+ * @example
+ * // Looking for 'Tab' and 'RouteTab'
+ * findAllChildren(slots.default(), 'Tab', 'RouteTab')
+ */
+export declare function findAllChildren(vnodes: VNode[], ...names: string[]): VNode[];

package/dist/components/utils/vnode.mjs

@@ -1,14 +1,17 @@
 import {
   Fragment
 } from "vue-demi";
-export function findAllChildren(vnodes, name) {
+export function toBoolean(value) {
+  return value === "" ? true : Boolean(value);
+}
+export function findAllChildren(vnodes, ...names) {
   const scan = [...vnodes];
   const result = [];
   while (scan.length > 0) {
     const vnode = scan.shift();
     if (vnode.type === Fragment && Array.isArray(vnode.children))
       scan.push(...vnode.children);
-    else if (vnode.type && vnode.type.name === name)
+    else if (vnode.type && names.includes(vnode.type.name))
       result.push(vnode);
   }
   return result;

package/dist/components/wizard/Wizard.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    class="wizard"
+    data-testid="wizard">
+    <div class="wizard__header">
+      <WizardHeader
+        :active="model - 1"
+        :variant="variant"
+        :title-variant="titleVariant">
+        <slot />
+      </WizardHeader>
+    </div>
+    <div class="wizard__body">
+      <WizardBody
+        v-model="model"
+        :keep-alive="keepAlive"
+        :on-before-prev="onBeforePrev"
+        :on-before-next="onBeforeNext"
+        :on-finished="onFinished">
+        <slot />
+      </WizardBody>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue-demi";
+import WizardHeader from "./WizardHeader.vue";
+import WizardBody from "./WizardBody.vue";
+import { useVModel } from "../input";
+export default defineComponent({
+  components: {
+    WizardHeader,
+    WizardBody
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      default: 1
+    },
+    variant: {
+      type: String,
+      default: "dot"
+    },
+    titleVariant: {
+      type: String,
+      default: "specific"
+    },
+    keepAlive: {
+      type: Boolean,
+      default: false
+    },
+    onBeforePrev: {
+      type: Function,
+      default: void 0
+    },
+    onBeforeNext: {
+      type: Function,
+      default: void 0
+    },
+    onFinished: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const model = useVModel(props);
+    return { model };
+  }
+});
+</script>
+
+<style lang="postcss">
+.wizard {
+  @apply flex flex-col w-full space-y-3;
+
+  &__header {
+    @apply flex-shrink-0;
+  }
+
+  &__body {
+    @apply flex-grow;
+  }
+}
+</style>

package/dist/components/wizard/Wizard.vue.d.ts

@@ -0,0 +1,72 @@
+import { PropType } from 'vue-demi';
+import { TravelHook, FinishedHook } from '../steps';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    variant: {
+        type: PropType<IconVariant>;
+        default: string;
+    };
+    titleVariant: {
+        type: PropType<TitleVariant>;
+        default: string;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onBeforePrev: {
+        type: PropType<TravelHook>;
+        default: any;
+    };
+    onBeforeNext: {
+        type: PropType<TravelHook>;
+        default: any;
+    };
+    onFinished: {
+        type: PropType<FinishedHook>;
+        default: any;
+    };
+}, {
+    model: import("vue-demi").Ref<number>;
+}, 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<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    variant: {
+        type: PropType<IconVariant>;
+        default: string;
+    };
+    titleVariant: {
+        type: PropType<TitleVariant>;
+        default: string;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onBeforePrev: {
+        type: PropType<TravelHook>;
+        default: any;
+    };
+    onBeforeNext: {
+        type: PropType<TravelHook>;
+        default: any;
+    };
+    onFinished: {
+        type: PropType<FinishedHook>;
+        default: any;
+    };
+}>>, {
+    variant: IconVariant;
+    modelValue: number;
+    titleVariant: TitleVariant;
+    onBeforePrev: TravelHook;
+    onBeforeNext: TravelHook;
+    keepAlive: boolean;
+    onFinished: FinishedHook;
+}>;
+export default _default;