@privyid/persona 1.2.1 → 1.2.2-dev.2

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

@@ -0,0 +1,304 @@
+<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";
+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>

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

@@ -0,0 +1,151 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        object: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    x: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    y: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    page: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minWidth: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    minHeight: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    maxWidth: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    maxHeight: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    moveable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resizable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:x": (args_0: number) => void;
+    "update:y": (args_0: number) => void;
+    "update:page": (args_0: number) => void;
+    "update:width": (args_0: number) => void;
+    "update:height": (args_0: number) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    x: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    y: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    page: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minWidth: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    minHeight: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    maxWidth: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    maxHeight: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    moveable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resizable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:x"?: ((args_0: number) => any) | undefined;
+    "onUpdate:y"?: ((args_0: number) => any) | undefined;
+    "onUpdate:page"?: ((args_0: number) => any) | undefined;
+    "onUpdate:width"?: ((args_0: number) => any) | undefined;
+    "onUpdate:height"?: ((args_0: number) => any) | undefined;
+}>, {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    page: number;
+    autofocus: boolean;
+    maxHeight: number;
+    maxWidth: number;
+    minWidth: number;
+    minHeight: number;
+    moveable: boolean;
+    resizable: boolean;
+    debug: 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/pdf-object/PdfObjectAddon.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    data-testid="pdf-object-addon"
+    class="pdf-object__addon"
+    :class="classNames">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  position: {
+    type: String,
+    default: "right"
+  }
+});
+const classNames = computed(() => {
+  const result = [];
+  if (props.position)
+    result.push(`pdf-object__addon--${props.position}`);
+  return result;
+});
+</script>
+
+<style lang="postcss">
+.pdf-object {
+  &__addon {
+    @apply absolute;
+    @apply dark:text-default;
+
+    &--right {
+      @apply top-0 left-full pl-2;
+    }
+
+    &--left {
+      @apply top-0 right-full pr-2;
+    }
+
+    &--top {
+      @apply bottom-full left-0 pb-2;
+    }
+
+    &--bottom {
+      @apply top-full left-0 pt-2;
+    }
+  }
+}
+</style>

package/dist/components/pdf-object/PdfObjectAddon.vue.d.ts

@@ -0,0 +1,31 @@
+import type { PropType } from 'vue';
+import type { AddonPositionVariant } from '.';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    position: {
+        type: PropType<AddonPositionVariant>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    position: {
+        type: PropType<AddonPositionVariant>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    position: AddonPositionVariant;
+}, {}, {}, {}, 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/pdf-object/PdfObjectDebugger.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    ref="target"
+    data-testid="pdf-debugger"
+    class="pdf-object__debugger">
+    <pre data-testid="debug-x">x: {{ x }}</pre>
+    <pre data-testid="debug-y">y: {{ y }}</pre>
+    <pre data-testid="debug-page">page: {{ page }}</pre>
+    <pre data-testid="debug-width">width: {{ width }}</pre>
+    <pre data-testid="debug-height">height: {{ height }}</pre>
+  </div>
+</template>
+
+<script setup>
+import {
+  autoPlacement,
+  autoUpdate,
+  computePosition,
+  offset
+} from "@floating-ui/dom";
+import {
+  inject,
+  ref,
+  watchEffect
+} from "vue";
+import { PDF_OBJECT_CONTEXT } from ".";
+const {
+  x,
+  y,
+  page,
+  width,
+  height
+} = inject(PDF_OBJECT_CONTEXT);
+const target = ref();
+watchEffect((onCleanup) => {
+  if (target.value) {
+    const cleanup = autoUpdate(target.value.parentElement, target.value, () => {
+      computePosition(target.value.parentElement, target.value, {
+        strategy: "absolute",
+        middleware: [autoPlacement(), offset(12)]
+      }).then(({ x: x2, y: y2 }) => {
+        if (target.value) {
+          target.value.style.left = `${x2 || 0}px`;
+          target.value.style.top = `${y2 || 0}px`;
+        }
+      });
+    }, { animationFrame: true });
+    onCleanup(cleanup);
+  }
+}, { flush: "post" });
+</script>
+
+<style lang="postcss">
+.pdf-object {
+  --p-pdf-debugger-size: 198px;
+
+  &__debugger {
+    @apply grid grid-cols-1 p-4 bg-inverse text-on-emphasis absolute rounded w-[var(--p-pdf-debugger-size)];
+    /* @apply dark:bg-dark-inverse dark:text-dark-on-emphasis; */
+
+    > pre {
+      @apply truncate;
+    }
+  }
+}
+</style>

package/dist/components/pdf-object/PdfObjectDebugger.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,35 @@
+<template>
+  <div
+    ref="root"
+    class="pdf-objects"
+    data-testid="pdf-objects">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  provide,
+  toRef
+} from "vue";
+import { PDF_OBJECTS_CONTEXT } from ".";
+import { usePdfContext } from "../pdf-viewer";
+import useDrop from "./utils/use-drop";
+const props = defineProps({
+  dropTarget: {
+    type: String,
+    default: ".pdfViewer > .page"
+  }
+});
+const objects = /* @__PURE__ */ new Map();
+const root = ref();
+const pdfContext = usePdfContext();
+const dropTarget = toRef(props, "dropTarget");
+useDrop(root, dropTarget);
+provide(PDF_OBJECTS_CONTEXT, {
+  ...pdfContext,
+  objects,
+  root
+});
+</script>

package/dist/components/pdf-object/PdfObjects.vue.d.ts

@@ -0,0 +1,31 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        root: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    dropTarget: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    dropTarget: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    dropTarget: string;
+}, {}, {}, {}, 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;
+    };
+};