@privyid/persona 1.2.0 → 1.2.1-rc.0

package/dist/components/pdf-object/PdfObject.spec.mjs

@@ -1,387 +0,0 @@
-import { delay } from "nanodelay";
-import { vi } from "vitest";
-import { fireEvent, render } from "@testing-library/vue";
-import useResize, { triggerResize } from "./__mocks__/use-resize.mjs";
-import useDrag, {
-  triggerDragEnd,
-  triggerDragMove,
-  triggerDragStart
-} from "./__mocks__/use-drag";
-import { reactive, ref } from "vue-demi";
-import * as pdfUtils from "./index.mjs";
-import PdfObject from "./PdfObject.vue";
-import PdfObjects from "./PdfObjects.vue";
-vi.mock("./utils/use-drop.ts", () => ({ default: vi.fn(() => ref(true)) }));
-vi.mock("./utils/use-drag.ts", () => ({ default: useDrag }));
-vi.mock("./utils/use-resize.ts", () => ({ default: useResize }));
-it("should render properly", async () => {
-  const screen = render({
-    components: { PdfObject, PdfObjects },
-    template: `
-      <pdf-objects>
-        <div class="pdfViewer" data-testid="viewer" style="position:absolute;top:0;left:0;width:500px;height:500px;overflow-y:auto;">
-          <div class="page" data-testid="page-1" data-page-number="1" style="width:300px;height:400px;"></div>
-          <div class="page" data-testid="page-2" data-page-number="2" style="width:300px;height:400px;"></div>
-        </div>
-        <pdf-object>
-          <img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
-        </pdf-object>
-      </pdf-objects>
-    `
-  });
-  const object = screen.queryByTestId("pdf-object");
-  await delay(0);
-  expect(object).toBeInTheDocument();
-});
-it("should able to micro-adjust using arrow-keyboard", async () => {
-  const model = reactive({
-    page: 1,
-    x: 50,
-    y: 50,
-    width: void 0,
-    height: void 0
-  });
-  const screen = render({
-    components: { PdfObject, PdfObjects },
-    template: `
-      <pdf-objects>
-        <div class="pdfViewer" data-testid="viewer" style="position:absolute;top:0;left:0;width:500px;height:500px;overflow-y:auto;">
-          <div class="page" data-testid="page-1" data-page-number="1" style="width:300px;height:400px;"></div>
-          <div class="page" data-testid="page-2" data-page-number="2" style="width:300px;height:400px;"></div>
-        </div>
-        <pdf-object
-          v-model:page="model.page"
-          v-model:x="model.x"
-          v-model:y="model.y"
-          v-model:width="model.width"
-          v-model:height="model.height">
-          <img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
-        </pdf-object>
-      </pdf-objects>
-    `,
-    setup() {
-      return { model };
-    }
-  });
-  const page = screen.queryByTestId("page-1");
-  const object = screen.queryByTestId("pdf-object");
-  vi.spyOn(page, "clientWidth", "get").mockReturnValue(793);
-  vi.spyOn(page, "clientHeight", "get").mockReturnValue(1122);
-  await fireEvent.keyDown(object, { key: "ArrowUp" });
-  expect(model.x).toBe(50);
-  expect(model.y).toBe(49);
-  await fireEvent.keyDown(object, { key: "ArrowDown" });
-  await fireEvent.keyDown(object, { key: "ArrowDown" });
-  expect(model.x).toBe(50);
-  expect(model.y).toBe(51);
-  await fireEvent.keyDown(object, { key: "ArrowLeft" });
-  expect(model.x).toBe(49);
-  expect(model.y).toBe(51);
-  await fireEvent.keyDown(object, { key: "ArrowRight" });
-  await fireEvent.keyDown(object, { key: "ArrowRight" });
-  expect(model.x).toBe(51);
-  expect(model.y).toBe(51);
-});
-it("should move faster if using arrow-keyboard + shiftKey", async () => {
-  const model = reactive({
-    page: 1,
-    x: 50,
-    y: 50,
-    width: void 0,
-    height: void 0
-  });
-  const screen = render({
-    components: { PdfObject, PdfObjects },
-    template: `
-      <pdf-objects>
-        <div class="pdfViewer" data-testid="viewer" style="position:absolute;top:0;left:0;width:500px;height:500px;overflow-y:auto;">
-          <div class="page" data-testid="page-1" data-page-number="1" style="width:300px;height:400px;"></div>
-          <div class="page" data-testid="page-2" data-page-number="2" style="width:300px;height:400px;"></div>
-        </div>
-        <pdf-object
-          v-model:page="model.page"
-          v-model:x="model.x"
-          v-model:y="model.y"
-          v-model:width="model.width"
-          v-model:height="model.height">
-          <img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
-        </pdf-object>
-      </pdf-objects>
-    `,
-    setup() {
-      return { model };
-    }
-  });
-  const page = screen.queryByTestId("page-1");
-  const object = screen.queryByTestId("pdf-object");
-  vi.spyOn(page, "clientWidth", "get").mockReturnValue(793);
-  vi.spyOn(page, "clientHeight", "get").mockReturnValue(1122);
-  await fireEvent.keyDown(object, { key: "ArrowUp", shiftKey: true });
-  expect(model.x).toBe(50);
-  expect(model.y).toBe(40);
-});
-it("should move to edge if using arrow-keyboard + ctrlKey or metaKey", async () => {
-  const model = reactive({
-    page: 1,
-    x: 50,
-    y: 50,
-    width: void 0,
-    height: void 0
-  });
-  const screen = render({
-    components: { PdfObject, PdfObjects },
-    template: `
-      <pdf-objects>
-        <div class="pdfViewer" data-testid="viewer" style="position:absolute;top:0;left:0;width:500px;height:500px;overflow-y:auto;">
-          <div class="page" data-testid="page-1" data-page-number="1" style="width:300px;height:400px;"></div>
-          <div class="page" data-testid="page-2" data-page-number="2" style="width:300px;height:400px;"></div>
-        </div>
-        <pdf-object
-          v-model:page="model.page"
-          v-model:x="model.x"
-          v-model:y="model.y"
-          v-model:width="model.width"
-          v-model:height="model.height">
-          <img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
-        </pdf-object>
-      </pdf-objects>
-    `,
-    setup() {
-      return { model };
-    }
-  });
-  const page = screen.queryByTestId("page-1");
-  const object = screen.queryByTestId("pdf-object");
-  vi.spyOn(page, "clientWidth", "get").mockReturnValue(793);
-  vi.spyOn(page, "clientHeight", "get").mockReturnValue(1122);
-  await fireEvent.keyDown(object, { key: "ArrowRight", ctrlKey: true });
-  expect(model.x).toBe(595);
-  expect(model.y).toBe(50);
-  await fireEvent.keyDown(object, { key: "ArrowUp", metaKey: true });
-  expect(model.x).toBe(595);
-  expect(model.y).toBe(0);
-});
-it("should change width and height if resized", async () => {
-  const model = reactive({
-    page: 1,
-    x: 50,
-    y: 50,
-    width: 150,
-    height: 150
-  });
-  const screen = render({
-    components: { PdfObject, PdfObjects },
-    template: `
-      <pdf-objects>
-        <div class="pdfViewer" data-testid="viewer" style="position:absolute;top:0;left:0;width:500px;height:500px;overflow-y:auto;">
-          <div class="page" data-testid="page-1" data-page-number="1" style="width:300px;height:400px;"></div>
-          <div class="page" data-testid="page-2" data-page-number="2" style="width:300px;height:400px;"></div>
-        </div>
-        <pdf-object
-          v-model:page="model.page"
-          v-model:x="model.x"
-          v-model:y="model.y"
-          v-model:width="model.width"
-          v-model:height="model.height">
-          <img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
-        </pdf-object>
-      </pdf-objects>
-    `,
-    setup() {
-      return { model };
-    }
-  });
-  const object = screen.queryByTestId("pdf-object");
-  await delay(0);
-  expect(model.width).toBe(150);
-  expect(model.height).toBe(150);
-  expect(object).toHaveStyle({ width: "150px", height: "150px" });
-  await triggerResize(300, 300);
-  expect(model.width).toBe(300);
-  expect(model.height).toBe(300);
-});
-it("should moving position when dragged", async () => {
-  const model = reactive({
-    page: 1,
-    x: 50,
-    y: 50,
-    width: 150,
-    height: 150
-  });
-  const screen = render({
-    components: { PdfObject, PdfObjects },
-    template: `
-      <pdf-objects>
-        <div class="pdfViewer" data-testid="viewer" style="position:absolute;top:0;left:0;width:500px;height:500px;overflow-y:auto;">
-          <div class="page" data-testid="page-1" data-page-number="1" style="width:300px;height:400px;"></div>
-          <div class="page" data-testid="page-2" data-page-number="2" style="width:300px;height:400px;"></div>
-        </div>
-        <pdf-object
-          v-model:page="model.page"
-          v-model:x="model.x"
-          v-model:y="model.y"
-          v-model:width="model.width"
-          v-model:height="model.height">
-          <img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
-        </pdf-object>
-      </pdf-objects>
-    `,
-    setup() {
-      return { model };
-    }
-  });
-  const object = screen.queryByTestId("pdf-object");
-  const page2 = screen.queryByTestId("page-2");
-  vi.spyOn(object, "getBoundingClientRect").mockReturnValueOnce({
-    top: 400,
-    y: 400,
-    left: 100,
-    x: 100,
-    width: 300,
-    height: 400,
-    bottom: 0,
-    right: 0,
-    toJSON: vi.fn()
-  });
-  await triggerDragStart();
-  expect(object).toHaveStyle({
-    position: "fixed",
-    transform: "translate(100px, 400px) scale(1)"
-  });
-  expect(model.x).toBe(100);
-  expect(model.y).toBe(400);
-  await triggerDragMove({ dx: 300, dy: 300 });
-  expect(object).toHaveStyle({
-    position: "fixed",
-    transform: "translate(400px, 700px) scale(1)"
-  });
-  vi.spyOn(page2, "getBoundingClientRect").mockReturnValue({
-    top: 100,
-    y: 100,
-    x: 100,
-    left: 100,
-    width: 791,
-    height: 1122,
-    bottom: 0,
-    right: 0,
-    toJSON: vi.fn()
-  });
-  vi.spyOn(object, "getBoundingClientRect").mockReturnValueOnce({
-    top: 400,
-    y: 400,
-    left: 100,
-    x: 100,
-    width: 300,
-    height: 400,
-    bottom: 0,
-    right: 0,
-    toJSON: vi.fn()
-  });
-  await triggerDragEnd(page2);
-  expect(object).toHaveStyle({ position: "absolute" });
-  expect(model.x).toBe(1);
-  expect(model.y).toBe(300);
-  expect(model.page).toBe(2);
-});
-it("should revert the last position if droped wrong place", async () => {
-  const model = reactive({
-    page: 1,
-    x: 50,
-    y: 50,
-    width: 150,
-    height: 150
-  });
-  const screen = render({
-    components: { PdfObject, PdfObjects },
-    template: `
-      <pdf-objects>
-        <div class="pdfViewer" data-testid="viewer" style="position:absolute;top:0;left:0;width:500px;height:500px;overflow-y:auto;">
-          <div class="page" data-testid="page-1" data-page-number="1" style="width:300px;height:400px;"></div>
-          <div class="page" data-testid="page-2" data-page-number="2" style="width:300px;height:400px;"></div>
-        </div>
-        <pdf-object
-          v-model:page="model.page"
-          v-model:x="model.x"
-          v-model:y="model.y"
-          v-model:width="model.width"
-          v-model:height="model.height">
-          <img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
-        </pdf-object>
-      </pdf-objects>
-    `,
-    setup() {
-      return { model };
-    }
-  });
-  const object = screen.queryByTestId("pdf-object");
-  vi.spyOn(object, "getBoundingClientRect").mockReturnValueOnce({
-    top: 400,
-    y: 400,
-    left: 100,
-    x: 100,
-    width: 300,
-    height: 400,
-    bottom: 0,
-    right: 0,
-    toJSON: vi.fn()
-  });
-  await triggerDragStart();
-  expect(object).toHaveStyle({
-    position: "fixed",
-    transform: "translate(100px, 400px) scale(1)"
-  });
-  expect(model.x).toBe(100);
-  expect(model.y).toBe(400);
-  await triggerDragMove({ dx: 300, dy: 300 });
-  expect(object).toHaveStyle({
-    position: "fixed",
-    transform: "translate(400px, 700px) scale(1)"
-  });
-  await triggerDragEnd();
-  expect(object).toHaveStyle({ position: "absolute" });
-  expect(model.x).toBe(50);
-  expect(model.y).toBe(50);
-  expect(model.page).toBe(1);
-});
-it("should show debugger if prop `debug` was provided", async () => {
-  const screen = render({
-    components: { PdfObject, PdfObjects },
-    template: `
-      <pdf-objects>
-        <div class="pdfViewer" data-testid="viewer" style="position:absolute;top:0;left:0;width:500px;height:500px;overflow-y:auto;">
-          <div class="page" data-testid="page-1" data-page-number="1" style="width:300px;height:400px;"></div>
-          <div class="page" data-testid="page-2" data-page-number="2" style="width:300px;height:400px;"></div>
-        </div>
-        <pdf-object>
-          <img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
-        </pdf-object>
-        <pdf-object debug>
-          <img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
-        </pdf-object>
-      </pdf-objects>
-    `
-  });
-  const pdfDebugger = screen.queryByTestId("pdf-debugger");
-  await delay(0);
-  expect(pdfDebugger).toBeInTheDocument();
-});
-it("should focus to object if prop `autofocus` was provided", async () => {
-  const screen = render({
-    components: { PdfObject, PdfObjects },
-    template: `
-      <pdf-objects>
-        <div class="pdfViewer" data-testid="viewer" style="position:absolute;top:0;left:0;width:500px;height:500px;overflow-y:auto;">
-          <div class="page" data-testid="page-1" data-page-number="1" style="width:300px;height:400px;"></div>
-          <div class="page" data-testid="page-2" data-page-number="2" style="width:300px;height:400px;"></div>
-        </div>
-        <pdf-object autofocus>
-          <img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
-        </pdf-object>
-      </pdf-objects>
-    `
-  });
-  const object = screen.queryByTestId("pdf-object");
-  const focus = vi.spyOn(pdfUtils, "focus");
-  await delay(0);
-  expect(focus).toBeCalledWith(object);
-});

package/dist/components/pdf-object/PdfObject.vue

@@ -1,304 +0,0 @@
-<template>
-  <div
-    ref="object"
-    data-testid="pdf-object"
-    class="pdf-object"
-    tabindex="0"
-    :data-x="objectX"
-    :data-y="objectY"
-    :data-page="objectPage"
-    :data-width="objectWidth"
-    :data-height="objectHeight"
-    @keydown.up.stop.prevent="move($event, 0, -1)"
-    @keydown.down.stop.prevent="move($event, 0, 1)"
-    @keydown.left.stop.prevent="move($event, -1, 0)"
-    @keydown.right.stop.prevent="move($event, 1, 0)">
-    <div class="pdf-object__container">
-      <slot />
-      <PdfObjectDebugger v-if="debug" />
-    </div>
-    <div
-      v-show="isResizable"
-      class="pdf-object__resize resize-handle" />
-  </div>
-</template>
-
-<script setup>
-import { autoUpdate } from "@floating-ui/dom";
-import {
-  syncRef,
-  until,
-  useVModel
-} from "@vueuse/core";
-import {
-  inject,
-  onMounted,
-  provide,
-  ref,
-  toRef,
-  watchEffect
-} from "vue-demi";
-import useDrag from "./utils/use-drag";
-import useResize from "./utils/use-resize";
-import {
-  PDF_OBJECTS_CONTEXT,
-  PDF_OBJECT_CONTEXT,
-  useObjectModel,
-  usePage,
-  focus
-} from ".";
-import { computePosition, getPosition } from "./utils/position";
-import { getEmptyPosition } from "./utils/overlap";
-import PdfObjectDebugger from "./PdfObjectDebugger.vue";
-import { clamp } from "lodash-es";
-const props = defineProps({
-  x: {
-    type: Number,
-    default: void 0
-  },
-  y: {
-    type: Number,
-    default: void 0
-  },
-  page: {
-    type: Number,
-    default: void 0
-  },
-  width: {
-    type: Number,
-    default: 198
-  },
-  height: {
-    type: Number,
-    default: 106
-  },
-  minWidth: {
-    type: Number,
-    default: void 0
-  },
-  minHeight: {
-    type: Number,
-    default: void 0
-  },
-  maxWidth: {
-    type: Number,
-    default: void 0
-  },
-  maxHeight: {
-    type: Number,
-    default: void 0
-  },
-  moveable: {
-    type: Boolean,
-    default: true
-  },
-  resizable: {
-    type: Boolean,
-    default: true
-  },
-  autofocus: {
-    type: Boolean,
-    default: false
-  },
-  debug: {
-    type: Boolean,
-    default: false
-  }
-});
-defineEmits(["update:x", "update:y", "update:page", "update:width", "update:height"]);
-const object = ref();
-const {
-  root,
-  scale,
-  objects
-} = inject(PDF_OBJECTS_CONTEXT);
-const vX = useVModel(props, "x");
-const vY = useVModel(props, "y");
-const vPage = useVModel(props, "page");
-const vWidth = useVModel(props, "width");
-const vHeight = useVModel(props, "height");
-const {
-  id,
-  x: objectX,
-  y: objectY,
-  page: objectPage,
-  width: objectWidth,
-  height: objectHeight,
-  minHeight,
-  minWidth,
-  maxHeight,
-  maxWidth,
-  ratio
-} = useObjectModel(props);
-const isDragged = ref(false);
-const lastX = ref();
-const lastY = ref();
-const lastPage = ref();
-const pageEl = usePage(objectPage);
-const isMoveable = useDrag(object, {
-  onstart() {
-    const { left, top } = object.value.getBoundingClientRect();
-    isDragged.value = true;
-    lastX.value = objectX.value;
-    lastY.value = objectY.value;
-    lastPage.value = objectPage.value;
-    objectX.value = left;
-    objectY.value = top;
-  },
-  onmove(event) {
-    objectX.value += event.dx;
-    objectY.value += event.dy;
-  },
-  onend(event) {
-    if (event.relatedTarget) {
-      const result = getPosition({
-        reference: event.relatedTarget,
-        container: root.value,
-        object: object.value,
-        scale: scale.value
-      });
-      objectX.value = result.x;
-      objectY.value = result.y;
-      objectPage.value = result.page;
-    } else {
-      objectX.value = lastX.value;
-      objectY.value = lastY.value;
-      objectPage.value = lastPage.value;
-    }
-    isDragged.value = false;
-  }
-});
-const isResizable = useResize(object, {
-  minHeight,
-  minWidth,
-  maxHeight,
-  maxWidth,
-  scale,
-  ratio,
-  reference: pageEl,
-  onmove(event) {
-    if (event.rect && scale.value) {
-      objectWidth.value = event.rect.width / scale.value;
-      objectHeight.value = event.rect.height / scale.value;
-    }
-  }
-});
-watchEffect((onCleanup) => {
-  if (object.value) {
-    if (pageEl.value && root.value) {
-      object.value.style.display = "block";
-      object.value.style.width = `${objectWidth.value}px`;
-      object.value.style.height = `${objectHeight.value}px`;
-      if (isDragged.value) {
-        object.value.style.position = "fixed";
-        object.value.style.transform = `translate(${objectX.value}px, ${objectY.value}px) scale(${scale.value})`;
-        object.value.style.zIndex = "50";
-      } else {
-        const cleanup = autoUpdate(pageEl.value, object.value, () => {
-          const { left, top } = computePosition({
-            reference: pageEl.value,
-            container: root.value,
-            x: objectX.value,
-            y: objectY.value,
-            scale: scale.value
-          });
-          object.value.style.position = "absolute";
-          object.value.style.transform = `translate(${left}px, ${top}px) scale(${scale.value})`;
-          object.value.style.zIndex = "10";
-        }, { ancestorScroll: false, animationFrame: true });
-        onCleanup(cleanup);
-      }
-    } else
-      object.value.style.display = "none";
-  }
-});
-function move(event, dx, dy) {
-  if (props.moveable) {
-    const pageWidth = pageEl.value.clientWidth;
-    const pageHeight = pageEl.value.clientHeight;
-    const maxX = Math.floor(pageWidth / scale.value - objectWidth.value);
-    const maxY = Math.floor(pageHeight / scale.value - objectHeight.value);
-    const ax = event.metaKey || event.ctrlKey ? maxX : event.shiftKey ? 10 : 1;
-    const ay = event.metaKey || event.ctrlKey ? maxY : event.shiftKey ? 10 : 1;
-    const x1 = objectX.value + dx * ax;
-    const y1 = objectY.value + dy * ay;
-    objectX.value = clamp(x1, 0, maxX);
-    objectY.value = clamp(y1, 0, maxY);
-  }
-}
-function autoPosition() {
-  const otherObjects = [...objects.values()].filter((obj) => {
-    return obj.id !== id && Number.isFinite(obj.x) && Number.isFinite(obj.y) && obj.page === objectPage.value;
-  });
-  const size = {
-    width: objectWidth.value,
-    height: objectHeight.value
-  };
-  const offside = {
-    width: pageEl.value.clientWidth / scale.value,
-    height: pageEl.value.clientHeight / scale.value
-  };
-  const center = getEmptyPosition({
-    size,
-    offside,
-    objects: otherObjects
-  });
-  objectX.value = center.x;
-  objectY.value = center.y;
-}
-syncRef(objectX, vX);
-syncRef(objectY, vY);
-syncRef(objectPage, vPage);
-syncRef(objectWidth, vWidth);
-syncRef(objectHeight, vHeight);
-syncRef(isMoveable, toRef(props, "moveable"), { direction: "rtl", immediate: true });
-syncRef(isResizable, toRef(props, "resizable"), { direction: "rtl", immediate: true });
-onMounted(async () => {
-  await until(pageEl).toBeTruthy();
-  if (!Number.isFinite(objectX.value) || !Number.isFinite(objectY.value))
-    autoPosition();
-  if (props.autofocus)
-    focus(object.value);
-});
-provide(PDF_OBJECT_CONTEXT, {
-  id,
-  x: objectX,
-  y: objectY,
-  page: objectPage,
-  width: objectWidth,
-  height: objectHeight,
-  minHeight,
-  minWidth,
-  maxHeight,
-  maxWidth,
-  ratio
-});
-</script>
-
-<style lang="postcss">
-.pdf-object {
-  @apply origin-top-left left-0 top-0 select-none touch-none outline-none;
-
-  &__container {
-    @apply overflow-visible relative border-2 border-dashed border-subtle rounded w-full h-full;
-    @apply dark:border-dark-subtle;
-
-    &,
-    & > * {
-      @apply touch-none pointer-events-none;
-    }
-
-    button,
-    input,
-    textarea,
-    a {
-      @apply pointer-events-auto;
-    }
-  }
-
-  &__resize {
-    @apply absolute w-3 h-3 bottom-0 right-0 translate-x-1/2 translate-y-1/2 bg-base rounded-full;
-    @apply dark:bg-dark-base;
-  }
-}
-</style>