@privyid/persona 1.2.1 → 1.2.2-rc.2

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

@@ -0,0 +1,23 @@
+import type { Placement } from '@floating-ui/dom';
+import type { DirectiveBinding } from 'vue';
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,99 @@
+<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 setup>
+import {
+  computed,
+  ref,
+  shallowRef,
+  watchEffect,
+  onBeforeUnmount
+} from "vue";
+import TourDialog from "./TourDialog.vue";
+import TourHighlight from "./TourHighlight.vue";
+import {
+  autoUpdate,
+  computePosition,
+  shift,
+  autoPlacement,
+  inline,
+  offset,
+  hide as hidden
+} from "@floating-ui/dom";
+const isShow = ref(false);
+const dialog = shallowRef();
+const target = shallowRef();
+const config = shallowRef();
+const tour = computed(() => 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, options) {
+  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/Tour.vue.d.ts

@@ -0,0 +1,9 @@
+import TourDialog from './TourDialog.vue';
+type TourDialogProps = Partial<InstanceType<typeof TourDialog>['$props']>;
+declare function show(targetEl: HTMLElement, options: TourDialogProps): void;
+declare function hide(): void;
+declare const _default: import("vue").DefineComponent<{}, {
+    show: typeof show;
+    hide: typeof hide;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/tour/TourDialog.vue

@@ -0,0 +1,201 @@
+<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 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: void 0
+  },
+  text: {
+    type: String,
+    default: ""
+  },
+  image: {
+    type: String,
+    default: void 0
+  },
+  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", "next", "dismiss"]);
+</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/TourDialog.vue.d.ts

@@ -0,0 +1,112 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    image: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    highlight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    totalStep: {
+        type: NumberConstructor;
+        default: number;
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prevLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    nextLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    dismissLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    finishLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    next: (args_0: MouseEvent) => void;
+    prev: (args_0: MouseEvent) => void;
+    dismiss: (args_0: MouseEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    image: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    highlight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    totalStep: {
+        type: NumberConstructor;
+        default: number;
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prevLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    nextLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    dismissLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    finishLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onNext?: ((args_0: MouseEvent) => any) | undefined;
+    onPrev?: ((args_0: MouseEvent) => any) | undefined;
+    onDismiss?: ((args_0: MouseEvent) => any) | undefined;
+}>, {
+    text: string;
+    title: string;
+    image: string;
+    dismissable: boolean;
+    step: number;
+    prevLabel: string;
+    nextLabel: string;
+    dismissLabel: string;
+    finishLabel: string;
+    highlight: boolean;
+    totalStep: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/tour/TourHighlight.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="tour__backdrop">
+    <div
+      ref="highlight"
+      class="tour__highlight"
+      v-bind="$attrs" />
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  toRef,
+  watchEffect
+} from "vue";
+import { autoUpdate } from "@floating-ui/dom";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  target: {
+    type: Object,
+    default: void 0
+  }
+});
+const target = toRef(props, "target");
+const highlight = ref();
+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/TourHighlight.vue.d.ts

@@ -0,0 +1,15 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    target: {
+        type: PropType<HTMLElement>;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    target: {
+        type: PropType<HTMLElement>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    target: HTMLElement;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,59 @@
+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

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