@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/tooltip/utils/on-hover.mjs

@@ -1,42 +0,0 @@
-const targetsMap = /* @__PURE__ */ new Map();
-export function addHoverListener(target, opts) {
-  const delay = Number.isFinite(opts.delay) ? opts.delay : 0;
-  const debounce = Number.isFinite(opts.debounced) ? opts.debounced : 500;
-  const context = {
-    isHovered: false,
-    onMouseEnter(event) {
-      if (context.onHoverOutTimeout)
-        clearTimeout(context.onHoverOutTimeout);
-      if (!context.isHovered) {
-        if (context.onHoverInTimeout)
-          clearTimeout(context.onHoverInTimeout);
-        context.onHoverInTimeout = setTimeout(() => {
-          opts.onHoverIn(event);
-          context.isHovered = true;
-        }, delay);
-      }
-    },
-    onMouseLeave(event) {
-      if (context.onHoverOutTimeout)
-        clearTimeout(context.onHoverOutTimeout);
-      if (!context.isHovered && context.onHoverInTimeout)
-        clearTimeout(context.onHoverInTimeout);
-      if (context.isHovered) {
-        context.onHoverOutTimeout = setTimeout(() => {
-          opts.onHoverOut(event);
-          context.isHovered = false;
-        }, debounce);
-      }
-    }
-  };
-  target.addEventListener("mouseenter", context.onMouseEnter, { passive: true });
-  target.addEventListener("mouseleave", context.onMouseLeave, { passive: true });
-  targetsMap.set(target, context);
-}
-export function removeHoverListener(target) {
-  const context = targetsMap.get(target);
-  if (context) {
-    target.removeEventListener("mouseenter", context.onMouseEnter);
-    target.removeEventListener("mouseleave", context.onMouseLeave);
-  }
-}

package/dist/components/tooltip/utils/parse-bindings.d.ts

@@ -1,23 +0,0 @@
-import type { Placement } from '@floating-ui/dom';
-import type { DirectiveBinding } from 'vue-demi';
-import type { ColorVariant } from '..';
-/**
- * Parse placement from modifier
- */
-export declare function parsePlacement(_el: HTMLElement, { modifiers }: DirectiveBinding): Placement;
-/**
- * Parse action from modifier
- */
-export declare function parseAction(_el: HTMLElement, { modifiers }: DirectiveBinding): string;
-/**
- * Parse value from element or bindings value
- * @param el binding element
- * @param bindings directive bindings options
- */
-export declare function parseText(el: HTMLElement, bindings: DirectiveBinding<string | boolean>): string;
-/**
- * Parse color from modifiers
- * @param _el (unused)
- * @param bindings directive bindings options
- */
-export declare function parseColor(_el: HTMLElement, { modifiers }: DirectiveBinding): ColorVariant;

package/dist/components/tooltip/utils/parse-bindings.mjs

@@ -1,47 +0,0 @@
-export function parsePlacement(_el, { modifiers }) {
-  let result;
-  if (modifiers.top)
-    result = "top";
-  else if (modifiers.bottom)
-    result = "bottom";
-  if (result) {
-    if (modifiers.left)
-      result = `${result}-start`;
-    else if (modifiers.right)
-      result = `${result}-end`;
-  } else {
-    if (modifiers.right)
-      result = "right";
-    else if (modifiers.left)
-      result = "left";
-  }
-  if (!result)
-    result = "top";
-  if (modifiers.start && !result.endsWith("start"))
-    result = `${result}-start`;
-  else if (modifiers.end && !result.endsWith("end"))
-    result = `${result}-end`;
-  return result;
-}
-export function parseAction(_el, { modifiers }) {
-  const result = [];
-  if (modifiers.manual)
-    result.push("manual");
-  if (modifiers.focus)
-    result.push("focus");
-  if (modifiers.hover)
-    result.push("hover");
-  if (modifiers.click)
-    result.push("click");
-  return result.join("-") || "focus-hover";
-}
-export function parseText(el, bindings) {
-  if (typeof bindings.value === "string")
-    return bindings.value;
-  if (el.hasAttribute("title"))
-    return el.getAttribute("title");
-  return el.dataset.tooltipText ?? "";
-}
-export function parseColor(_el, { modifiers }) {
-  return modifiers.white ? "white" : "black";
-}

package/dist/components/tour/Tour.vue

@@ -1,112 +0,0 @@
-<template>
-  <div
-    class="tour">
-    <TransitionGroup name="fade">
-      <TourHighlight
-        v-if="isShow"
-        :target="target" />
-      <TourDialog
-        v-if="isShow"
-        ref="dialog"
-        v-bind="config" />
-    </transitiongroup>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import {
-  computed,
-  ref,
-  shallowRef,
-  watchEffect,
-  onBeforeUnmount,
-} from 'vue-demi'
-import TourDialog from './TourDialog.vue'
-import TourHighlight from './TourHighlight.vue'
-import {
-  autoUpdate,
-  computePosition,
-  shift,
-  autoPlacement,
-  inline,
-  offset,
-  hide as hidden,
-} from '@floating-ui/dom'
-
-type TourDialogProps = Partial<InstanceType<typeof TourDialog>['$props']>
-
-const isShow = ref(false)
-const dialog = shallowRef<InstanceType<typeof TourDialog>>()
-const target = shallowRef<HTMLElement>()
-const config = shallowRef<TourDialogProps>()
-const tour   = computed<HTMLElement>(() => dialog.value?.$el)
-
-watchEffect((onCleanup) => {
-  if (target.value && tour.value) {
-    const cleanup = autoUpdate(target.value, tour.value, async () => {
-      computePosition(target.value, tour.value, {
-        strategy  : 'absolute',
-        middleware: [
-          autoPlacement({ altBoundary: true }),
-          shift({ padding: 16 }),
-          inline(),
-          hidden(),
-          offset(16),
-        ],
-      }).then(({ x, y, middlewareData }) => {
-        if (tour.value) {
-          tour.value.style.transform  = `translate3d(${x || 0}px, ${y || 0}px, 0)`
-          tour.value.style.visibility = middlewareData.hide.referenceHidden
-            ? 'hidden'
-            : 'visible'
-        }
-      })
-    }, { animationFrame: true })
-
-    onCleanup(cleanup)
-  }
-})
-
-watchEffect((onCleanup) => {
-  if (isShow.value)
-    document.body.classList.add('tour--active')
-
-  onCleanup(() => {
-    document.body.classList.remove('tour--active')
-  })
-})
-
-function show (targetEl: HTMLElement, options: TourDialogProps) {
-  target.value = targetEl
-  config.value = options
-  isShow.value = true
-}
-
-function hide () {
-  isShow.value = false
-}
-
-onBeforeUnmount(() => {
-  hide()
-})
-
-defineExpose({
-  show,
-  hide,
-})
-</script>
-
-<style lang="postcss">
-.tour {
-  --p-tour-z-index: theme(zIndex.tour.DEFAULT);
-  --p-tour-backdrop-z-index: theme(zIndex.tour.backdrop);
-
-  & > &__dialog {
-    @apply absolute top-0 left-0;
-  }
-
-  &--active {
-    @apply overflow-hidden;
-  }
-}
-</style>

package/dist/components/tour/TourDialog.vue

@@ -1,207 +0,0 @@
-<template>
-  <div
-    class="tour__dialog"
-    :class="{ 'tour--image': !!image }"
-    data-testid="tour-dialog">
-    <span
-      v-if="dismissable"
-      data-testid="tour-dismiss"
-      class="tour__dismiss"
-      @click="$emit('dismiss', $event)">
-      <IconClose />
-    </span>
-    <img
-      v-if="image"
-      class="tour__image"
-      data-testid="tour-image"
-      :src="image"
-      alt="tour-image"
-      width="320"
-      height="195">
-    <div class="tour__body">
-      <p-subheading
-        v-if="title"
-        class="tour__title"
-        size="sm">
-        <span
-          v-p-md.inline="title"
-          data-testid="tour-title" />
-      </p-subheading>
-      <p-caption>
-        <span
-          v-p-md.inline="text"
-          data-testid="tour-text" />
-      </p-caption>
-    </div>
-    <div class="tour__footer">
-      <div
-        v-if="totalStep > 2"
-        class="tour__meta"
-        data-testid="tour-meta">
-        {{ step }} / {{ totalStep }}
-      </div>
-      <div class="tour__controls">
-        <template v-if="dismissable && step < totalStep">
-          <p-button
-            data-testid="tour-control-dismiss"
-            size="xs"
-            variant="link"
-            @click="$emit('dismiss', $event)">
-            {{ dismissLabel }}
-          </p-button>
-          <span class="tour__divider">•</span>
-        </template>
-
-        <p-button
-          data-testid="tour-control-prev"
-          size="xs"
-          variant="link"
-          :disabled="step < 2"
-          @click="$emit('prev', $event)">
-          {{ prevLabel }}
-        </p-button>
-
-        <p-button
-          v-if="step === totalStep"
-          data-testid="tour-control-finish"
-          size="xs"
-          variant="solid"
-          color="info"
-          @click="$emit('next', $event)">
-          {{ finishLabel }}
-        </p-button>
-        <p-button
-          v-else
-          data-testid="tour-control-next"
-          size="xs"
-          variant="solid"
-          color="info"
-          @click="$emit('next', $event)">
-          {{ nextLabel }}
-        </p-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import pSubheading from '../subheading/Subheading.vue'
-import pCaption from '../caption/Caption.vue'
-import pButton from '../button/Button.vue'
-import { vPMd } from '../markdown'
-import IconClose from '@privyid/persona-icon/vue/close/16.vue'
-
-defineProps({
-  title: {
-    type   : String,
-    default: undefined,
-  },
-  text: {
-    type   : String,
-    default: '',
-  },
-  image: {
-    type   : String,
-    default: undefined,
-  },
-  highlight: {
-    type   : Boolean,
-    default: true,
-  },
-  step: {
-    type   : Number,
-    default: 0,
-  },
-  totalStep: {
-    type   : Number,
-    default: 0,
-  },
-  dismissable: {
-    type   : Boolean,
-    default: true,
-  },
-  prevLabel: {
-    type   : String,
-    default: 'Previous',
-  },
-  nextLabel: {
-    type   : String,
-    default: 'Next',
-  },
-  dismissLabel: {
-    type   : String,
-    default: 'Dismiss',
-  },
-  finishLabel: {
-    type   : String,
-    default: 'Finish',
-  },
-})
-
-defineEmits<{
-  'prev': [MouseEvent],
-  'next': [MouseEvent],
-  'dismiss': [MouseEvent],
-}>()
-</script>
-
-<style lang="postcss">
-.tour {
-  &__dialog {
-    @apply z-[var(--p-tour-z-index)] rounded bg-inverse w-full max-w-xs 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 {
-    @apply p-4 space-y-3;
-
-    .tour__title {
-      @apply text-on-emphasis;
-      @apply dark:text-dark-on-emphasis;
-    }
-
-    > * {
-      @apply text-on-emphasis;
-      @apply dark:text-dark-on-emphasis;
-    }
-  }
-
-  &__footer {
-    @apply p-4 pt-2 space-x-3 flex items-center;
-  }
-
-  &__meta {
-    @apply text-xs text-muted shrink-0;
-    @apply dark:text-dark-muted;
-  }
-
-  &__controls {
-    @apply grow flex space-x-2 justify-end items-center;
-
-    > .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;
-    }
-  }
-}
-</style>

package/dist/components/tour/TourHighlight.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="tour__backdrop">
-    <div
-      ref="highlight"
-      class="tour__highlight"
-      v-bind="$attrs" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import {
-  ref,
-  toRef,
-  watchEffect,
-} from 'vue-demi'
-import { autoUpdate } from '@floating-ui/dom'
-
-defineOptions({ inheritAttrs: false })
-
-const props = defineProps({
-  target: {
-    type   : Object as PropType<HTMLElement>,
-    default: undefined,
-  },
-})
-
-const target    = toRef(props, 'target')
-const highlight = ref<HTMLDivElement>()
-
-watchEffect((onCleanup) => {
-  if (highlight.value && target.value) {
-    const cleanup = autoUpdate(target.value, highlight.value, () => {
-      const bounding = target.value.getBoundingClientRect()
-      const padding  = 16
-
-      highlight.value.style.width  = `${bounding.width + padding}px`
-      highlight.value.style.height = `${bounding.height + padding}px`
-      highlight.value.style.left   = `${bounding.left - padding / 2}px`
-      highlight.value.style.top    = `${bounding.top - padding / 2}px`
-    }, { animationFrame: true })
-
-    onCleanup(cleanup)
-  }
-})
-</script>
-
-<style lang="postcss">
-.tour {
-  &__backdrop {
-    @apply fixed inset-0 overflow-hidden w-full h-full z-[var(--p-tour-backdrop-z-index)];
-  }
-
-  &__highlight {
-    @apply z-[var(--p-tour-z-index)] absolute shadow-mask cursor-pointer rounded-tn;
-  }
-}
-</style>

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

@@ -1,59 +0,0 @@
-import { Hook } from '../../steps/utils/hook';
-export type TourActionHook = (to: AbstractTour, from: AbstractTour) => boolean | Promise<boolean>;
-export declare enum TourDirection {
-    FORWARD = 1,
-    BACKWARD = -1
-}
-export interface BaseTourOptions {
-    /**
-     * Uniq identifier, can be string or symbol
-     * use for edit and remove
-     */
-    name?: string | symbol;
-    /**
-     * on-before-prev hook
-     */
-    onBeforePrev?: TourActionHook;
-    /**
-      * on-before-next hook
-      */
-    onBeforeNext?: TourActionHook;
-}
-export declare abstract class AbstractTour<Options extends BaseTourOptions = BaseTourOptions> {
-    name?: string | symbol;
-    /**
-     * Step direction, 1 for forward (next), -1 for backward (prev)
-     */
-    protected direction: TourDirection;
-    protected parent?: AbstractTour;
-    protected options: Options;
-    protected onNextHooks: Hook<TourActionHook>;
-    protected onPrevHooks: Hook<TourActionHook>;
-    protected runOnPrevHooks: TourActionHook;
-    protected runOnNextHooks: TourActionHook;
-    constructor(options?: Options);
-    setParent(parent: AbstractTour): this;
-    /**
-     * Get options with parent options as fallback
-     */
-    getOptions(): Options;
-    /**
-     * Set tour direction
-     * @param direction 1 for forward (next) and -1 for backward (prev)
-     */
-    setDirection(direction: TourDirection): this;
-    /**
-     * Attach to parent
-     * @param parent Parent Instance
-     */
-    attach(parent: AbstractTour): this;
-    /**
-     * Deattach from parent
-     * @param parent Parent Instance
-     */
-    detach(parent: AbstractTour): this;
-    abstract start(): void | Promise<void>;
-    abstract stop(): void | Promise<void>;
-    abstract next(): void | Promise<void>;
-    abstract prev(): void | Promise<void>;
-}

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

@@ -1,69 +0,0 @@
-import defu from "defu";
-import { Hook } from "../../steps/utils/hook.mjs";
-export var TourDirection = /* @__PURE__ */ ((TourDirection2) => {
-  TourDirection2[TourDirection2["FORWARD"] = 1] = "FORWARD";
-  TourDirection2[TourDirection2["BACKWARD"] = -1] = "BACKWARD";
-  return TourDirection2;
-})(TourDirection || {});
-export class AbstractTour {
-  name;
-  /**
-   * Step direction, 1 for forward (next), -1 for backward (prev)
-   */
-  direction;
-  parent;
-  options;
-  onNextHooks;
-  onPrevHooks;
-  runOnPrevHooks;
-  runOnNextHooks;
-  constructor(options) {
-    this.direction = 1 /* FORWARD */;
-    this.name = options?.name ?? Symbol("TourID");
-    this.options = options;
-    this.onPrevHooks = new Hook();
-    this.onNextHooks = new Hook();
-    if (typeof options?.onBeforePrev === "function")
-      this.onPrevHooks.add(options.onBeforePrev);
-    if (typeof options?.onBeforeNext === "function")
-      this.onNextHooks.add(options.onBeforeNext);
-    this.runOnPrevHooks = async (...args) => await this.onPrevHooks.run(...args);
-    this.runOnNextHooks = async (...args) => await this.onNextHooks.run(...args);
-  }
-  setParent(parent) {
-    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);
-    return this;
-  }
-}

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

@@ -1,15 +0,0 @@
-import type UE from '@testing-library/user-event';
-import { AbstractStep } from '../step';
-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;
-    params: ParamsOf<E>;
-}
-export default class StepAction<E extends EventType> extends AbstractStep<ActionOptions<E>> {
-    protected run(): Promise<void>;
-}
-export {};

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

@@ -1,14 +0,0 @@
-import { AbstractStep } from "../step.mjs";
-import { waitElement } from "../../utils/wait-element.mjs";
-export default class StepAction extends AbstractStep {
-  async run() {
-    const options = this.getOptions();
-    const { default: userEvent } = await import("@testing-library/user-event");
-    const target = await waitElement(options.target, options.waitTimeout);
-    const user = userEvent.setup({ document });
-    const action = options.action;
-    const params = options.params ?? [];
-    await user[action].apply(void 0, [target, ...params]);
-    await this.ahead();
-  }
-}

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

@@ -1,25 +0,0 @@
-import type { MaybeRef } from '@vueuse/shared';
-import { AbstractStep } from '../step';
-import type { Tour } from '../tour';
-export interface ConditionalOptions {
-    condition: MaybeRef<boolean | (() => boolean | Promise<boolean>)>;
-    tour: Tour;
-}
-export declare enum ConditionalType {
-    IF = 1,
-    ELSE_IF = 2,
-    ELSE = 3
-}
-interface Routine extends ConditionalOptions {
-    type: ConditionalType;
-}
-export default class StepCondition extends AbstractStep<ConditionalOptions> {
-    protected routines: Routine[];
-    constructor(options: ConditionalOptions);
-    canChain(): boolean;
-    chain(routine: Routine): this;
-    getTotalChild(): number;
-    getRoutines(): Routine[];
-    protected run(): Promise<void>;
-}
-export {};