@privyid/persona 1.2.1 → 1.2.2-dev.2

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

@@ -0,0 +1,126 @@
+import type { BaseTourOptions } from './base';
+import { AbstractTour } 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 running: boolean;
+    protected parent?: Tour;
+    constructor(options?: Partial<TourOptions>);
+    /**
+     * Get current step index
+     */
+    getIndex(): number;
+    /**
+     * Get total Step
+     */
+    getTotal(): number;
+    /**
+     * Get list of steps
+     */
+    getSteps(): AbstractTour[];
+    /**
+     * Get running status
+     */
+    isRunning(): boolean;
+    /**
+     * 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> | undefined;
+    /**
+     * 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(): 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,196 @@
+import defu from "defu";
+import { isNumber } from "lodash-es";
+import {
+  AbstractTour,
+  TourDirection
+} from "./base.mjs";
+export class Tour extends AbstractTour {
+  index;
+  steps;
+  onFinishedHooks;
+  running;
+  constructor(options) {
+    super(options);
+    this.running = false;
+    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);
+  }
+  /**
+   * 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) {
+      total += "getTotalChild" in step ? step.getTotalChild() : 1;
+    }
+    return total;
+  }
+  /**
+   * Calculate real index, including Sub-Tour
+   */
+  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;
+  }
+  /**
+   * Get current step instance
+   */
+  getCurrentStep() {
+    return this.steps.at(this.index);
+  }
+  /**
+   * Run "on-finished" hooks
+   */
+  async runOnFinishedHooks() {
+    await Promise.allSettled(this.onFinishedHooks.map(async (hook) => await hook()));
+  }
+  /**
+   * Execute current step
+   */
+  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();
+    }
+  }
+  /**
+   * Goto previous step
+   */
+  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();
+    }
+  }
+  /**
+   * Goto next step
+   */
+  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();
+    }
+  }
+  /**
+   * 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;
+    if (this.parent)
+      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);
+    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 type { TourOptions } from './core/tour';
+import { TourStory } from './core/story';
+export declare function createTour(options?: Partial<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/focus.d.ts

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

package/dist/components/tour/utils/focus.mjs

@@ -0,0 +1,6 @@
+import scrollIntoView from "scroll-into-view";
+export async function focus(target, duration = 330) {
+  return await new Promise((resolve) => {
+    scrollIntoView(target, { time: duration }, resolve);
+  });
+}

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

@@ -0,0 +1 @@
+export declare function isVisible(target: HTMLElement): boolean;

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

@@ -0,0 +1,29 @@
+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;
+}

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,45 @@
+import { isVisible } from "./is-visible.mjs";
+import { focus } from "./focus.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/truncate/Truncate.vue

@@ -0,0 +1,69 @@
+<template>
+  <transition
+    name="fade"
+    mode="out-in">
+    <span
+      :key="`${expand}`"
+      v-p-tooltip.long="tooltip && !expandable && text.length > maxLength"
+      class="truncated"
+      data-testid="truncate"
+      :title="text">
+      {{ viewText }}
+      <template v-if="expandable && text.length > maxLength">
+        <a
+          data-testid="truncate-expand"
+          href="javascript:void"
+          @click.stop.prevent="toggle">
+          {{ expand ? showLessText : showMoreText }}
+        </a>
+      </template>
+    </span>
+  </transition>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { vPTooltip } from "../tooltip";
+const props = defineProps({
+  text: {
+    type: String,
+    default: ""
+  },
+  length: {
+    type: [Number, String],
+    default: 100
+  },
+  omission: {
+    type: String,
+    default: "..."
+  },
+  expandable: {
+    type: Boolean,
+    default: false
+  },
+  showMoreText: {
+    type: String,
+    default: "Show More"
+  },
+  showLessText: {
+    type: String,
+    default: "Show Less"
+  },
+  tooltip: {
+    type: Boolean,
+    default: true
+  }
+});
+const expand = ref(false);
+const maxLength = computed(() => {
+  return Number.parseInt(`${props.length}`);
+});
+const viewText = computed(() => {
+  if (expand.value || Number.isNaN(maxLength.value) || props.text.length <= maxLength.value)
+    return props.text;
+  return `${props.text.slice(0, maxLength.value - props.omission.length)}${props.omission}`;
+});
+function toggle() {
+  expand.value = !expand.value;
+}
+</script>

package/dist/components/truncate/Truncate.vue.d.ts

@@ -0,0 +1,68 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    omission: {
+        type: StringConstructor;
+        default: string;
+    };
+    expandable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showMoreText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showLessText: {
+        type: StringConstructor;
+        default: string;
+    };
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    omission: {
+        type: StringConstructor;
+        default: string;
+    };
+    expandable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showMoreText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showLessText: {
+        type: StringConstructor;
+        default: string;
+    };
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    text: string;
+    length: string | number;
+    tooltip: boolean;
+    showMoreText: string;
+    showLessText: string;
+    omission: string;
+    expandable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,2 @@
+export declare function arrayFilter(list: unknown[], filterBy: Record<string, any>): unknown[];
+export declare function arraySort(list: unknown[], sortBy: Record<string, string>): unknown[];

package/dist/components/utils/array.mjs

@@ -0,0 +1,19 @@
+import { orderBy } from "lodash-es";
+import { isEqual } from "./value.mjs";
+export function arrayFilter(list, filterBy) {
+  const filters = Object.entries(filterBy);
+  return list.filter((item) => {
+    return filters.every(([key, value]) => isEqual(item[key], value));
+  });
+}
+export function arraySort(list, sortBy) {
+  const sortKey = [];
+  const sortOrder = [];
+  for (const [key, order] of Object.entries(sortBy)) {
+    if (order === "asc" || order === "desc") {
+      sortKey.push(key);
+      sortOrder.push(order);
+    }
+  }
+  return orderBy(list, sortKey, sortOrder);
+}

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, return undefine if failed to decode
+ * @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 | undefined;

package/dist/components/utils/base64.mjs

@@ -0,0 +1,35 @@
+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) {
+  if (!dataurl)
+    return;
+  try {
+    const name = filename ?? (/* @__PURE__ */ new Date()).toISOString();
+    const [meta, body] = dataurl.split(",");
+    const mime = mimeType ?? meta.match(/:(.*?);/)[1];
+    const buffer = window.atob(body);
+    const uint8 = Uint8Array.from(buffer, (c) => c.codePointAt(0));
+    return new globalThis.File([uint8], name, { type: mime });
+  } catch (error) {
+    if (import.meta.env.DEV)
+      console.warn(error);
+  }
+}

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

@@ -0,0 +1,17 @@
+interface RGB {
+    R: number;
+    G: number;
+    B: number;
+}
+/**
+ * Parse hex string to R,G,B 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

@@ -0,0 +1,14 @@
+export function toRGB(color) {
+  const r = color.slice(1, 3);
+  const g = color.slice(3, 5);
+  const b = color.slice(5, 7);
+  return {
+    R: Number.parseInt(r, 16),
+    G: Number.parseInt(g, 16),
+    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/date.d.ts

@@ -0,0 +1,22 @@
+import type { Locale } from 'date-fns';
+import { format } from 'date-fns';
+/**
+ * Format date using date-fns/format,
+ * Automatically switch local following global lang setting.
+ * @param date Date
+ * @param formatStr date format
+ */
+export declare function formatDate(...args: Parameters<typeof format>): string;
+/**
+ * Install locale pack
+ * @param name Language name, ex: `fr`
+ * @param locale Language Pack Object
+ */
+export declare function installLocale(name: string, locale: Locale): void;
+/**
+ * Get locale pack
+ * @param name language name, ex: 'fr'
+ */
+export declare function getLocale(name?: (string & {
+    _?: never;
+}) | "id" | "en"): any;