@privyid/persona 1.2.1 → 1.2.2-rc.2

package/dist/components/toggle/Toggle.vue.d.ts

@@ -0,0 +1,145 @@
+import type { PropType, VNode } from 'vue';
+type StyleVariant = 'pill' | 'flat';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        checked(props: {
+            isChecked: boolean;
+        }): VNode[];
+        unchecked(props: {
+            isChecked: boolean;
+        }): VNode[];
+        default(props: {
+            isChecked: boolean;
+        }): VNode[];
+    }> & {
+        checked(props: {
+            isChecked: boolean;
+        }): VNode[];
+        unchecked(props: {
+            isChecked: boolean;
+        }): VNode[];
+        default(props: {
+            isChecked: boolean;
+        }): VNode[];
+    };
+    refs: {};
+    rootEl: HTMLLabelElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    modelValue: {
+        type: PropType<any>;
+        default: boolean;
+    };
+    value: {
+        type: PropType<any>;
+        default: boolean;
+    };
+    uncheckedValue: {
+        type: PropType<any>;
+        default: boolean;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checkedLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    uncheckedLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    noLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    switchClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: unknown) => void;
+    change: (args_0: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    modelValue: {
+        type: PropType<any>;
+        default: boolean;
+    };
+    value: {
+        type: PropType<any>;
+        default: boolean;
+    };
+    uncheckedValue: {
+        type: PropType<any>;
+        default: boolean;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checkedLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    uncheckedLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    noLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    switchClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+    onChange?: ((args_0: boolean) => any) | undefined;
+}>, {
+    value: any;
+    modelValue: any;
+    disabled: boolean;
+    variant: StyleVariant;
+    readonly: boolean;
+    checked: boolean;
+    uncheckedValue: any;
+    noLabel: boolean;
+    checkedLabel: string;
+    uncheckedLabel: string;
+    switchClass: string | unknown[] | Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/tooltip/Tooltip.vue

@@ -0,0 +1,154 @@
+<template>
+  <div
+    v-show="show && !isHidden"
+    ref="tooltip"
+    class="tooltip"
+    data-testid="tooltip"
+    :class="classNames">
+    <div
+      ref="tooltipArrow"
+      class="tooltip__arrow"
+      data-popper-arrow />
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import {
+  toRef,
+  watch,
+  computed,
+  watchEffect,
+  ref
+} from "vue";
+import {
+  autoUpdate,
+  computePosition,
+  arrow,
+  offset,
+  flip,
+  shift,
+  inline,
+  hide
+} from "@floating-ui/dom";
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  color: {
+    type: String,
+    default: "black"
+  },
+  target: {
+    type: Object,
+    default: void 0
+  },
+  placement: {
+    type: String,
+    default: "top"
+  }
+});
+const emit = defineEmits(["show", "hide"]);
+const placement = toRef(props, "placement");
+const target = toRef(props, "target");
+const tooltip = ref();
+const tooltipArrow = ref();
+const isHidden = ref(false);
+const classNames = computed(() => {
+  const result = [];
+  if (props.color)
+    result.push(`tooltip--${props.color}`);
+  return result;
+});
+watch(() => props.show, (value) => {
+  if (value)
+    emit("show", target.value);
+  else
+    emit("hide", target.value);
+});
+watchEffect((onCleanup) => {
+  if (tooltip.value && target.value && tooltipArrow.value) {
+    const cleanup = autoUpdate(target.value, tooltip.value, () => {
+      computePosition(target.value, tooltip.value, {
+        strategy: "absolute",
+        placement: placement.value,
+        middleware: [
+          flip(),
+          shift(),
+          inline(),
+          offset(12),
+          hide(),
+          arrow({ element: tooltipArrow.value })
+        ]
+      }).then(({ x, y, middlewareData, placement: placement2 }) => {
+        if (tooltip.value) {
+          tooltip.value.dataset.popperPlacement = placement2;
+          tooltip.value.style.left = `${x || 0}px`;
+          tooltip.value.style.top = `${y || 0}px`;
+          isHidden.value = middlewareData.hide.referenceHidden;
+        }
+        if (tooltipArrow.value) {
+          tooltipArrow.value.style.left = `${middlewareData.arrow.x}px`;
+          tooltipArrow.value.style.top = `${middlewareData.arrow.y}px`;
+        }
+      });
+    }, { animationFrame: true });
+    onCleanup(cleanup);
+  }
+}, { flush: "post" });
+</script>
+
+<style lang="postcss">
+.tooltip {
+  --p-tooltip-z-index: theme(zIndex.tooltip);
+
+  @apply z-[var(--p-tooltip-z-index)] px-4 py-3 rounded text-xs inline-block absolute drop-shadow-sm;
+
+  &__arrow {
+    @apply absolute text-xs after:w-4 after:h-4 after:block after:rounded-[3px] after:rotate-45 after:left-0 after:content-[''] after:z-0;
+
+    [data-popper-placement^="left"] > & {
+      @apply -right-[6px];
+    }
+
+    [data-popper-placement^="right"] > & {
+      @apply -left-[6px];
+    }
+
+    [data-popper-placement^="bottom"] > & {
+      @apply -top-[6px];
+    }
+
+    [data-popper-placement^="top"] > & {
+      @apply -bottom-[6px];
+    }
+  }
+
+  &--black {
+    @apply bg-inverse text-on-emphasis;
+    @apply dark:bg-dark-inverse dark:text-dark-on-emphasis;
+
+    .tooltip__arrow {
+      @apply after:bg-inverse;
+      @apply dark:after:bg-dark-inverse;
+    }
+  }
+
+  &--white {
+    @apply bg-default text-subtle;
+    @apply dark:bg-dark-default dark:text-dark-subtle;
+
+    .tooltip__arrow {
+      @apply after:bg-default;
+      @apply dark:after:bg-dark-default;
+    }
+  }
+}
+
+[data-tooltip-enable="true"] {
+  &[data-tooltip-action="click"] {
+    @apply cursor-pointer;
+  }
+}
+</style>

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

@@ -0,0 +1,68 @@
+import type { PropType } from 'vue';
+import type { ColorVariant } from '.';
+import type { Placement } from '@floating-ui/dom';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        tooltip: HTMLDivElement;
+        tooltipArrow: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    target: {
+        type: PropType<HTMLElement>;
+        default: undefined;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    show: (args_0: HTMLElement) => void;
+    hide: (args_0: HTMLElement) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    target: {
+        type: PropType<HTMLElement>;
+        default: undefined;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+}>> & Readonly<{
+    onShow?: ((args_0: HTMLElement) => any) | undefined;
+    onHide?: ((args_0: HTMLElement) => any) | undefined;
+}>, {
+    target: HTMLElement;
+    color: ColorVariant;
+    placement: Placement;
+    show: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/tooltip/TooltipContainer.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="tooltip-container"
+    data-testid="tooltip-container">
+    <Tooltip
+      v-for="[id, item] in items"
+      :key="id"
+      v-bind="item">
+      <span
+        v-p-md.inline="item.text"
+        class="tooltip__text" />
+    </Tooltip>
+  </div>
+</template>
+
+<script setup>
+import {
+  reactive,
+  ref
+} from "vue";
+import Tooltip from "./Tooltip.vue";
+import { uniqueId } from "lodash-es";
+import { vPMd } from "../markdown";
+const items = ref(/* @__PURE__ */ new Map());
+function add(options) {
+  const id = uniqueId("tooltip_");
+  items.value.set(id, reactive({ ...options, show: false }));
+  return id;
+}
+function update(id, options) {
+  const item = items.value.get(id);
+  if (item) {
+    item.target = options.target;
+    item.text = options.text;
+    item.placement = options.placement;
+  }
+}
+function show(id) {
+  const item = items.value.get(id);
+  const result = item.target.dispatchEvent(new CustomEvent("tooltip:show", {
+    detail: item,
+    cancelable: true
+  }));
+  if (result)
+    item.show = true;
+}
+function hide(id) {
+  const item = items.value.get(id);
+  const result = item.target.dispatchEvent(new CustomEvent("tooltip:hide", {
+    detail: item,
+    cancelable: true
+  }));
+  if (result)
+    item.show = false;
+}
+function toggle(id) {
+  const item = items.value.get(id);
+  if (item.show)
+    hide(id);
+  else
+    show(id);
+}
+function remove(id) {
+  items.value.delete(id);
+}
+defineExpose({
+  add,
+  update,
+  show,
+  hide,
+  toggle,
+  remove
+});
+</script>

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

@@ -0,0 +1,16 @@
+import type { TooltipOptions } from '.';
+declare function add(options: TooltipOptions): string;
+declare function update(id: string, options: TooltipOptions): void;
+declare function show(id: string): void;
+declare function hide(id: string): void;
+declare function toggle(id: string): void;
+declare function remove(id: string): void;
+declare const _default: import("vue").DefineComponent<{}, {
+    add: typeof add;
+    update: typeof update;
+    show: typeof show;
+    hide: typeof hide;
+    toggle: typeof toggle;
+    remove: typeof remove;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,17 @@
+import type { Placement } from '@floating-ui/dom';
+import type { Directive } from 'vue';
+export type ColorVariant = 'black' | 'white';
+export interface TooltipOptions {
+    text: string;
+    color: ColorVariant;
+    placement: Placement;
+    target: HTMLElement;
+}
+export interface TooltipItem extends TooltipOptions {
+    show: boolean;
+}
+export declare const pTooltip: Directive<HTMLElement, string | boolean>;
+export declare const vPTooltip: import("vue").ObjectDirective<HTMLElement, string | boolean, string, string>;
+export declare function showTooltip(selector: string | HTMLElement): Promise<void>;
+export declare function hideTooltip(selector: string | HTMLElement): Promise<void>;
+export declare function toggleTooltip(selector: string | HTMLElement): Promise<void>;

package/dist/components/tooltip/index.mjs

@@ -0,0 +1,113 @@
+import { useSingleton } from "../global/use-singleton.mjs";
+import createHandler from "./utils/create-handler.mjs";
+import { addHoverListener, removeHoverListener } from "./utils/on-hover.mjs";
+import {
+  parsePlacement,
+  parseAction,
+  parseText,
+  parseColor
+} from "./utils/parse-bindings.mjs";
+const handleClick = createHandler("click", "toggle", true);
+const handleMouseEnter = createHandler("hover", "show");
+const handleMouseLeave = createHandler("hover", "hide");
+const handleFocus = createHandler("focus", "show");
+const handleBlur = createHandler("focus", "hide");
+async function useTooltip() {
+  const { default: TooltipContainer } = await import("./TooltipContainer.vue");
+  const tooltip = await useSingleton(TooltipContainer);
+  return tooltip;
+}
+export const pTooltip = {
+  async mounted(el, bindings) {
+    const tooltip = await useTooltip();
+    const action = parseAction(el, bindings);
+    const color = parseColor(el, bindings);
+    const text = parseText(el, bindings);
+    const placement = parsePlacement(el, bindings);
+    const enable = bindings.value !== false && !!text;
+    const id = tooltip.add({
+      target: el,
+      placement,
+      text,
+      color
+    });
+    el.dataset.tooltipId = id;
+    el.dataset.tooltipAction = action;
+    el.dataset.tooltipText = text;
+    el.dataset.tooltipEnable = enable ? "true" : "false";
+    el.removeAttribute("title");
+    el.addEventListener("click", handleClick);
+    el.addEventListener("focus", handleFocus, { passive: true });
+    el.addEventListener("blur", handleBlur, { passive: true });
+    const delay = Number.parseInt(el.dataset.tooltipLong ?? "500");
+    const debounce = Number.parseInt(el.dataset.tooltipDebounce);
+    addHoverListener(el, {
+      onHoverIn: handleMouseEnter,
+      onHoverOut: handleMouseLeave,
+      delay: bindings.modifiers.long ? delay : 0,
+      debounced: debounce
+    });
+  },
+  async updated(el, bindings) {
+    const tooltip = await useTooltip();
+    const id = el.dataset.tooltipId;
+    const action = parseAction(el, bindings);
+    const color = parseColor(el, bindings);
+    const text = parseText(el, bindings);
+    const placement = parsePlacement(el, bindings);
+    const enable = bindings.value !== false && !!text;
+    el.dataset.tooltipAction = action;
+    el.dataset.tooltipText = text;
+    el.dataset.tooltipEnable = enable ? "true" : "false";
+    tooltip.update(id, {
+      target: el,
+      placement,
+      text,
+      color
+    });
+    if (enable && bindings.value === true)
+      tooltip.show(id);
+    if (!enable)
+      tooltip.hide(id);
+    el.removeAttribute("title");
+  },
+  async unmounted(el, bindings) {
+    const { default: TooltipContainer } = await import("./TooltipContainer.vue");
+    const tooltip = await useSingleton(TooltipContainer);
+    const id = el.dataset.tooltipId;
+    const text = parseText(el, bindings);
+    tooltip.remove(id);
+    el.removeEventListener("click", handleClick);
+    el.removeEventListener("focus", handleFocus);
+    el.removeEventListener("blur", handleBlur);
+    el.setAttribute("title", text);
+    removeHoverListener(el);
+    delete el.dataset.tooltipId;
+    delete el.dataset.tooltipAction;
+    delete el.dataset.tooltipText;
+    delete el.dataset.tooltipEnable;
+  }
+};
+export const vPTooltip = pTooltip;
+function getTooltipId(selector) {
+  const targets = selector instanceof HTMLElement ? [selector] : [...document.querySelectorAll(selector)];
+  return targets.map((target) => target?.dataset.tooltipId).filter(Boolean);
+}
+export async function showTooltip(selector) {
+  const ids = getTooltipId(selector);
+  const tooltip = await useTooltip();
+  for (const id of ids)
+    tooltip.show(id);
+}
+export async function hideTooltip(selector) {
+  const ids = getTooltipId(selector);
+  const tooltip = await useTooltip();
+  for (const id of ids)
+    tooltip.hide(id);
+}
+export async function toggleTooltip(selector) {
+  const ids = getTooltipId(selector);
+  const tooltip = await useTooltip();
+  for (const id of ids)
+    tooltip.toggle(id);
+}

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

@@ -0,0 +1,9 @@
+type EventAction = 'toggle' | 'show' | 'hide';
+/**
+ *
+ * @param eventName Event name, only run when attr data-tooltip-action match this name
+ * @param tooltipAction Action applied to the tooltip
+ * @param prevent If true, it's will prevent default action.
+ */
+export default function createHandler(eventName: string, tooltipAction: EventAction, prevent?: boolean): (event: MouseEvent) => Promise<void>;
+export {};

package/dist/components/tooltip/utils/create-handler.mjs

@@ -0,0 +1,16 @@
+import { useSingleton } from "../../global/use-singleton.mjs";
+export default function createHandler(eventName, tooltipAction, prevent = false) {
+  return async function handler(event) {
+    const { default: TooltipContainer } = await import("../TooltipContainer.vue");
+    const tooltip = await useSingleton(TooltipContainer);
+    const target = event.target;
+    const id = target.dataset.tooltipId;
+    const enable = target.dataset.tooltipEnable !== "false";
+    const action = target.dataset.tooltipAction;
+    if (id && enable && action.includes(eventName)) {
+      tooltip[tooltipAction](id);
+      if (prevent)
+        event.preventDefault();
+    }
+  };
+}

package/dist/components/tooltip/utils/on-hover.d.ts

@@ -0,0 +1,23 @@
+type MouseEventHandler = (event: MouseEvent) => void;
+export interface HoverOptions {
+    /**
+     * Long hover duration (in ms)
+     */
+    delay?: number;
+    /**
+     * Hover out debounce (in ms)
+     */
+    debounced?: number;
+    onHoverIn: MouseEventHandler;
+    onHoverOut: MouseEventHandler;
+}
+/**
+ * Custom on hover handler
+ * It's fix issue when mouseenter and mouseleave triggered repeately on Span Element.
+ * This also handle add long delay
+ * @param target
+ * @param opts
+ */
+export declare function addHoverListener(target: HTMLElement, opts: HoverOptions): void;
+export declare function removeHoverListener(target: HTMLElement): void;
+export {};

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

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