@privyid/persona 1.2.0 → 1.2.1

package/dist/components/tooltip/index.spec.mjs

@@ -1,255 +0,0 @@
-import { render, fireEvent } from "@testing-library/vue";
-import { delay } from "nanodelay";
-import { ref } from "vue-demi";
-import {
-  pTooltip,
-  vPTooltip,
-  hideTooltip,
-  toggleTooltip,
-  showTooltip
-} from "./index.mjs";
-beforeAll(async () => {
-  await import("./TooltipContainer.vue");
-});
-it("should able render the tooltip", async () => {
-  const screen = render({
-    directives: { PTooltip: pTooltip },
-    template: `
-      <div
-        data-testid="sample"
-        v-p-tooltip="'Hello World'"
-        data-tooltip-debounce="0" />
-    `
-  });
-  await delay(0);
-  const sample = screen.queryByTestId("sample");
-  const tooltip = screen.queryByTestId("tooltip");
-  await fireEvent.mouseEnter(sample);
-  await delay(0);
-  expect(tooltip).toBeInTheDocument();
-  expect(tooltip).toBeVisible();
-  expect(tooltip).toHaveClass("tooltip");
-  expect(tooltip).toHaveTextContent("Hello World");
-  await fireEvent.mouseLeave(sample);
-  await delay(1);
-  expect(tooltip).not.toBeVisible();
-});
-it("should able to change color using color modifiers (.white)", async () => {
-  const screen = render({
-    directives: { PTooltip: pTooltip },
-    template: `
-      <div
-        data-testid="sample"
-        v-p-tooltip.white="'Hello World'" />
-    `
-  });
-  await delay(0);
-  const tooltip = screen.queryByTestId("tooltip");
-  expect(tooltip).toBeInTheDocument();
-  expect(tooltip).toHaveClass("tooltip--white");
-  expect(tooltip).not.toHaveClass("tooltip--black");
-});
-it("should able to change tooltip placement using placement modifiers (.top, .left, .right, .bottom)", async () => {
-  const screen = render({
-    directives: { PTooltip: pTooltip },
-    template: `
-      <div
-        data-testid="sample"
-        v-p-tooltip.bottom.end="'Hello World'" />
-    `
-  });
-  await delay(0);
-  const tooltip = screen.queryByTestId("tooltip");
-  expect(tooltip).toBeInTheDocument();
-  expect(tooltip).toHaveAttribute("data-popper-placement", "bottom-end");
-});
-it("should able to change tooltip trigger using trigger modifiers (.click, .focus, .hover)", async () => {
-  const screen = render({
-    directives: { PTooltip: pTooltip },
-    template: `
-      <div
-        data-testid="sample"
-        v-p-tooltip.click="'Hello World'"
-        data-tooltip-debounce="0" />
-    `
-  });
-  await delay(0);
-  const sample = screen.queryByTestId("sample");
-  const tooltip = screen.queryByTestId("tooltip");
-  await fireEvent.mouseEnter(sample);
-  await delay(0);
-  await delay(0);
-  expect(tooltip).toBeInTheDocument();
-  expect(tooltip).not.toBeVisible();
-  await fireEvent.click(sample);
-  await delay(0);
-  expect(tooltip).toBeVisible();
-  await fireEvent.click(sample);
-  await delay(0);
-  expect(tooltip).not.toBeVisible();
-});
-it("should able to use text from attribute title", async () => {
-  const screen = render({
-    directives: { PTooltip: pTooltip },
-    template: `
-      <div
-        data-testid="sample"
-        v-p-tooltip
-        title="Hello World" />
-    `
-  });
-  await delay(0);
-  const tooltip = screen.queryByTestId("tooltip");
-  expect(tooltip).toHaveTextContent("Hello World");
-  expect(tooltip).not.toHaveAttribute("title");
-});
-it("should reactive when title changed", async () => {
-  const title = ref("Hello World");
-  const screen = render({
-    directives: { PTooltip: pTooltip },
-    template: `
-      <div
-        data-testid="sample"
-        v-p-tooltip
-        :title="title" />
-    `,
-    setup() {
-      return { title };
-    }
-  });
-  await delay(0);
-  const tooltip = screen.queryByTestId("tooltip");
-  expect(tooltip).toHaveTextContent("Hello World");
-  expect(tooltip).not.toHaveAttribute("title");
-  title.value = "Hello Reyhan";
-  await delay(0);
-  expect(tooltip).toHaveTextContent("Hello Reyhan");
-});
-it("should not shown the tooltip if text not provided", async () => {
-  const screen = render({
-    directives: { PTooltip: pTooltip },
-    template: `
-      <div
-        data-testid="sample"
-        v-p-tooltip />
-    `
-  });
-  await delay(0);
-  const sample = screen.queryByTestId("sample");
-  const tooltip = screen.queryByTestId("tooltip");
-  await fireEvent.mouseEnter(sample);
-  await delay(0);
-  expect(tooltip).toBeInTheDocument();
-  expect(tooltip).not.toBeVisible();
-});
-it("should not shown the tooltip if v-p-tooltip set to `false`", async () => {
-  const active = ref(false);
-  const screen = render({
-    directives: { PTooltip: pTooltip },
-    template: `
-      <div
-        data-testid="sample"
-        v-p-tooltip="active"
-        title="Hello" />
-    `,
-    setup() {
-      return { active };
-    }
-  });
-  await delay(0);
-  const sample = screen.queryByTestId("sample");
-  const tooltip = screen.queryByTestId("tooltip");
-  await fireEvent.mouseEnter(sample);
-  await delay(0);
-  expect(tooltip).toBeInTheDocument();
-  expect(tooltip).not.toBeVisible();
-  active.value = true;
-  await delay(0);
-  await fireEvent.mouseEnter(sample);
-  await delay(0);
-  expect(tooltip).toBeVisible();
-});
-it("should hide the tooltip if v-p-tooltip set to `false` when it's shown before", async () => {
-  const active = ref(true);
-  const screen = render({
-    directives: { PTooltip: pTooltip },
-    template: `
-      <div
-        data-testid="sample"
-        v-p-tooltip="active"
-        title="Hello" />
-    `,
-    setup() {
-      return { active };
-    }
-  });
-  await delay(0);
-  const sample = screen.queryByTestId("sample");
-  const tooltip = screen.queryByTestId("tooltip");
-  await fireEvent.mouseEnter(sample);
-  await delay(0);
-  expect(tooltip).toBeInTheDocument();
-  expect(tooltip).toBeVisible();
-  active.value = false;
-  await delay(0);
-  expect(tooltip).not.toBeVisible();
-});
-it("should able to manual show/hide tooltip using `showTooltip` and `hideTooltip`", async () => {
-  const screen = render({
-    directives: { PTooltip: pTooltip },
-    template: `
-      <div
-        id="sample"
-        data-testid="sample"
-        v-p-tooltip.manual
-        title="Hello" />
-    `
-  });
-  await delay(0);
-  const tooltip = screen.queryByTestId("tooltip");
-  await showTooltip("#sample");
-  expect(tooltip).toBeVisible();
-  await hideTooltip("#sample");
-  expect(tooltip).not.toBeVisible();
-});
-it("should able to manual show/hide tooltip using `toggleTooltip`", async () => {
-  const screen = render({
-    directives: { PTooltip: pTooltip },
-    template: `
-      <div
-        data-testid="sample"
-        v-p-tooltip.manual
-        title="Hello" />
-    `
-  });
-  await delay(0);
-  const sample = screen.queryByTestId("sample");
-  const tooltip = screen.queryByTestId("tooltip");
-  await toggleTooltip(sample);
-  expect(tooltip).toBeVisible();
-  await toggleTooltip(sample);
-  expect(tooltip).not.toBeVisible();
-});
-it("should enable long hover if modifier .long provided", async () => {
-  const screen = render({
-    directives: { PTooltip: pTooltip },
-    template: `
-      <div
-        data-testid="sample-long"
-        v-p-tooltip.hover.long="'Hello World'"
-        data-tooltip-long="10"
-        data-tooltip-debounce="0" />
-    `
-  });
-  await delay(0);
-  const sample = screen.queryByTestId("sample-long");
-  const tooltip = screen.queryByTestId("tooltip");
-  await fireEvent.mouseEnter(sample);
-  await delay(3);
-  expect(tooltip).not.toBeVisible();
-  await delay(11);
-  expect(tooltip).toBeVisible();
-});
-it("should export alias vPTooltip", () => {
-  expect(pTooltip).toBe(vPTooltip);
-});

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

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

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

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

@@ -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/on-hover.spec.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,89 +0,0 @@
-import { vi } from "vitest";
-import { fireEvent } from "@testing-library/dom";
-import { addHoverListener } from "./on-hover.mjs";
-import { delay } from "nanodelay";
-it("should fix fast mouseenter - mouseleave", async () => {
-  const target = document.createElement("span");
-  const onHoverIn = vi.fn();
-  const onHoverOut = vi.fn();
-  document.body.append(target);
-  addHoverListener(target, { onHoverIn, onHoverOut });
-  fireEvent.mouseEnter(target);
-  fireEvent.mouseLeave(target);
-  fireEvent.mouseEnter(target);
-  fireEvent.mouseLeave(target);
-  fireEvent.mouseEnter(target);
-  await delay(0);
-  expect(onHoverIn).toBeCalledTimes(1);
-  expect(onHoverOut).toBeCalledTimes(0);
-});
-it("should trigger hover out after some periodic", async () => {
-  const target = document.createElement("span");
-  const onHoverIn = vi.fn();
-  const onHoverOut = vi.fn();
-  document.body.append(target);
-  addHoverListener(target, {
-    onHoverIn,
-    onHoverOut,
-    debounced: 2
-  });
-  fireEvent.mouseEnter(target);
-  fireEvent.mouseLeave(target);
-  fireEvent.mouseEnter(target);
-  fireEvent.mouseLeave(target);
-  fireEvent.mouseEnter(target);
-  await delay(0);
-  expect(onHoverIn).toBeCalledTimes(1);
-  expect(onHoverOut).toBeCalledTimes(0);
-  fireEvent.mouseLeave(target);
-  fireEvent.mouseEnter(target);
-  fireEvent.mouseLeave(target);
-  await delay(3);
-  expect(onHoverIn).toBeCalledTimes(1);
-  expect(onHoverOut).toBeCalledTimes(1);
-});
-it("should trigger hover in if delay provided", async () => {
-  const target = document.createElement("span");
-  const onHoverIn = vi.fn();
-  const onHoverOut = vi.fn();
-  document.body.append(target);
-  addHoverListener(target, {
-    onHoverIn,
-    onHoverOut,
-    delay: 2
-  });
-  fireEvent.mouseEnter(target);
-  fireEvent.mouseLeave(target);
-  fireEvent.mouseEnter(target);
-  fireEvent.mouseLeave(target);
-  fireEvent.mouseEnter(target);
-  await delay(0);
-  expect(onHoverIn).toBeCalledTimes(0);
-  expect(onHoverOut).toBeCalledTimes(0);
-  await delay(3);
-  expect(onHoverIn).toBeCalledTimes(1);
-  expect(onHoverOut).toBeCalledTimes(0);
-});
-it("should not trigger hover in if mouseleave before delay", async () => {
-  const target = document.createElement("span");
-  const onHoverIn = vi.fn();
-  const onHoverOut = vi.fn();
-  document.body.append(target);
-  addHoverListener(target, {
-    onHoverIn,
-    onHoverOut,
-    delay: 2
-  });
-  fireEvent.mouseEnter(target);
-  fireEvent.mouseLeave(target);
-  fireEvent.mouseEnter(target);
-  fireEvent.mouseLeave(target);
-  fireEvent.mouseEnter(target);
-  await delay(0);
-  expect(onHoverIn).toBeCalledTimes(0);
-  expect(onHoverOut).toBeCalledTimes(0);
-  fireEvent.mouseLeave(target);
-  await delay(3);
-  expect(onHoverIn).toBeCalledTimes(0);
-  expect(onHoverOut).toBeCalledTimes(0);
-});

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/tooltip/utils/parse-bindings.spec.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,168 +0,0 @@
-import {
-  parseAction,
-  parseColor,
-  parsePlacement,
-  parseText
-} from "./parse-bindings.mjs";
-function createModifiers(modifiers) {
-  const bindings = {
-    modifiers,
-    instance: void 0,
-    value: void 0,
-    oldValue: void 0,
-    dir: void 0
-  };
-  return bindings;
-}
-describe("parsePlacement", () => {
-  it("should return `top` if no modifiers given", () => {
-    const placement = parsePlacement(void 0, createModifiers({}));
-    expect(placement).toBe("top");
-  });
-  it("should return `top` if modifiers `top` is true", () => {
-    const placement = parsePlacement(void 0, createModifiers({ top: true }));
-    expect(placement).toBe("top");
-  });
-  it("should return `left` if modifiers `left` is true", () => {
-    const placement = parsePlacement(void 0, createModifiers({ left: true }));
-    expect(placement).toBe("left");
-  });
-  it("should return `right` if modifiers `right` is true", () => {
-    const placement = parsePlacement(void 0, createModifiers({ right: true }));
-    expect(placement).toBe("right");
-  });
-  it("should return `bottom` if modifiers `bottom` is true", () => {
-    const placement = parsePlacement(void 0, createModifiers({ bottom: true }));
-    expect(placement).toBe("bottom");
-  });
-  it("should add suffic `-start` if modifiers `start` is true", () => {
-    const non = parsePlacement(void 0, createModifiers({ start: true }));
-    const top = parsePlacement(void 0, createModifiers({ top: true, start: true }));
-    const left = parsePlacement(void 0, createModifiers({ left: true, start: true }));
-    const right = parsePlacement(void 0, createModifiers({ right: true, start: true }));
-    const bottom = parsePlacement(void 0, createModifiers({ bottom: true, start: true }));
-    expect(non).toBe("top-start");
-    expect(top).toBe("top-start");
-    expect(left).toBe("left-start");
-    expect(right).toBe("right-start");
-    expect(bottom).toBe("bottom-start");
-  });
-  it("should add suffic `-end` if modifiers `end` is true", () => {
-    const non = parsePlacement(void 0, createModifiers({ end: true }));
-    const top = parsePlacement(void 0, createModifiers({ top: true, end: true }));
-    const left = parsePlacement(void 0, createModifiers({ left: true, end: true }));
-    const right = parsePlacement(void 0, createModifiers({ right: true, end: true }));
-    const bottom = parsePlacement(void 0, createModifiers({ bottom: true, end: true }));
-    expect(non).toBe("top-end");
-    expect(top).toBe("top-end");
-    expect(left).toBe("left-end");
-    expect(right).toBe("right-end");
-    expect(bottom).toBe("bottom-end");
-  });
-  it("should return `top-start` if modifiers `top` and `left` is true", () => {
-    const placement = parsePlacement(void 0, createModifiers({ top: true, left: true }));
-    expect(placement).toBe("top-start");
-  });
-  it("should return `top-end` if modifiers `top` and `right` is true", () => {
-    const placement = parsePlacement(void 0, createModifiers({ top: true, right: true }));
-    expect(placement).toBe("top-end");
-  });
-  it("should return `bottom-start` if modifiers `bottom` and `left` is true", () => {
-    const placement = parsePlacement(void 0, createModifiers({ bottom: true, left: true }));
-    expect(placement).toBe("bottom-start");
-  });
-  it("should return `bottom-end` if modifiers `bottom` and `right` is true", () => {
-    const placement = parsePlacement(void 0, createModifiers({ bottom: true, right: true }));
-    expect(placement).toBe("bottom-end");
-  });
-});
-describe("parseAction", () => {
-  it("should return `focus-hover` if has no modifiers", () => {
-    const action = parseAction(void 0, createModifiers({}));
-    expect(action).toBe("focus-hover");
-  });
-  it("should return `click` if modifiers `click` is true", () => {
-    const action = parseAction(void 0, createModifiers({ click: true }));
-    expect(action).toBe("click");
-  });
-  it("should return `hover` if modifiers `hover` is true", () => {
-    const action = parseAction(void 0, createModifiers({ hover: true }));
-    expect(action).toBe("hover");
-  });
-  it("should return `focus` if modifiers `focus` is true", () => {
-    const action = parseAction(void 0, createModifiers({ focus: true }));
-    expect(action).toBe("focus");
-  });
-  it("should able to use more than one action", () => {
-    const action = parseAction(void 0, createModifiers({
-      focus: true,
-      click: true,
-      hover: true
-    }));
-    expect(action).toInclude("focus");
-    expect(action).toInclude("click");
-    expect(action).toInclude("hover");
-  });
-});
-describe("parseText", () => {
-  it("should return text from value", () => {
-    const text = parseText(void 0, {
-      value: "Hello World",
-      oldValue: "",
-      instance: void 0,
-      modifiers: void 0,
-      dir: void 0
-    });
-    expect(text).toBe("Hello World");
-  });
-  it("should return text from attribute title if value not present", () => {
-    const el = document.createElement("div");
-    el.setAttribute("title", "Hello World");
-    const text = parseText(el, {
-      value: void 0,
-      oldValue: void 0,
-      instance: void 0,
-      modifiers: void 0,
-      dir: void 0
-    });
-    expect(text).toBe("Hello World");
-  });
-  it("should return text from attribute title if value is not string", () => {
-    const el = document.createElement("div");
-    el.setAttribute("title", "Hello World");
-    const text = parseText(el, {
-      value: false,
-      oldValue: "",
-      instance: void 0,
-      modifiers: void 0,
-      dir: void 0
-    });
-    expect(text).toBe("Hello World");
-  });
-  it("should return text from dataset TooltipText (attribute `data-tooltip-text`) if value nor attr title present", () => {
-    const el = document.createElement("div");
-    el.dataset.tooltipText = "Hello World";
-    const text = parseText(el, {
-      value: void 0,
-      oldValue: void 0,
-      instance: void 0,
-      modifiers: void 0,
-      dir: void 0
-    });
-    expect(text).toBe("Hello World");
-  });
-});
-describe("parseColor", () => {
-  it("should return `black` if no modifiers", () => {
-    const color = parseColor(void 0, createModifiers({}));
-    expect(color).toBe("black");
-  });
-  it("should return `black` if modifiers `black` is true", () => {
-    const color = parseColor(void 0, createModifiers({ black: true }));
-    expect(color).toBe("black");
-  });
-  it("should return `white` if modifiers `white` is true", () => {
-    const color = parseColor(void 0, createModifiers({ white: true }));
-    expect(color).toBe("white");
-  });
-});