@privyid/persona 1.1.1 → 1.2.0

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

@@ -23,112 +23,100 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { autoUpdate } from '@floating-ui/dom'
+<script setup>
+import { autoUpdate } from "@floating-ui/dom";
 import {
   syncRef,
   until,
-  useVModel,
-} from '@vueuse/core'
+  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'
+  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 type { ObjectPosition } from './utils/overlap'
-import { getEmptyPosition } from './utils/overlap'
-import PdfObjectDebugger from './PdfObjectDebugger.vue'
-import { clamp } from 'lodash-es'
-
+  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: undefined,
+    type: Number,
+    default: void 0
   },
   y: {
-    type   : Number,
-    default: undefined,
+    type: Number,
+    default: void 0
   },
   page: {
-    type   : Number,
-    default: undefined,
+    type: Number,
+    default: void 0
   },
   width: {
-    type   : Number,
-    default: 198,
+    type: Number,
+    default: 198
   },
   height: {
-    type   : Number,
-    default: 106,
+    type: Number,
+    default: 106
   },
   minWidth: {
-    type   : Number,
-    default: undefined,
+    type: Number,
+    default: void 0
   },
   minHeight: {
-    type   : Number,
-    default: undefined,
+    type: Number,
+    default: void 0
   },
   maxWidth: {
-    type   : Number,
-    default: undefined,
+    type: Number,
+    default: void 0
   },
   maxHeight: {
-    type   : Number,
-    default: undefined,
+    type: Number,
+    default: void 0
   },
   moveable: {
-    type   : Boolean,
-    default: true,
+    type: Boolean,
+    default: true
   },
   resizable: {
-    type   : Boolean,
-    default: true,
+    type: Boolean,
+    default: true
   },
   autofocus: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   debug: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-defineEmits<{
-  'update:x': [number],
-  'update:y': [number],
-  'update:page': [number],
-  'update:width': [number],
-  'update:height': [number],
-}>()
-
-const object = ref<HTMLDivElement>()
+    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')
-
+  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,
@@ -140,183 +128,151 @@ const {
   minWidth,
   maxHeight,
   maxWidth,
-  ratio,
-} = useObjectModel(props)
-
-const isDragged = ref(false)
-const lastX     = ref()
-const lastY     = ref()
-const lastPage  = ref()
-const pageEl    = usePage(objectPage)
-
+  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
+  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
+  onmove(event) {
+    objectX.value += event.dx;
+    objectY.value += event.dy;
   },
-  onend (event) {
+  onend(event) {
     if (event.relatedTarget) {
       const result = getPosition({
-        reference: event.relatedTarget as HTMLElement,
+        reference: event.relatedTarget,
         container: root.value,
-        object   : object.value,
-        scale    : scale.value,
-      })
-
-      objectX.value    = result.x
-      objectY.value    = result.y
-      objectPage.value = result.page
+        object: object.value,
+        scale: scale.value
+      });
+      objectX.value = result.x;
+      objectY.value = result.y;
+      objectPage.value = result.page;
     } else {
-      // Back to last valid coordinate
-      objectX.value    = lastX.value
-      objectY.value    = lastY.value
-      objectPage.value = lastPage.value
+      objectX.value = lastX.value;
+      objectY.value = lastY.value;
+      objectPage.value = lastPage.value;
     }
-
-    isDragged.value = false
-  },
-})
-
+    isDragged.value = false;
+  }
+});
 const isResizable = useResize(object, {
-  minHeight: minHeight,
-  minWidth : minWidth,
-  maxHeight: maxHeight,
-  maxWidth : maxWidth,
-  scale    : scale,
-  ratio    : ratio,
+  minHeight,
+  minWidth,
+  maxHeight,
+  maxWidth,
+  scale,
+  ratio,
   reference: pageEl,
-  onmove (event) {
+  onmove(event) {
     if (event.rect && scale.value) {
-      objectWidth.value  = event.rect.width / scale.value
-      objectHeight.value = event.rect.height / 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`
-
+      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'
+        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)
+            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'
+      object.value.style.display = "none";
   }
-})
-
-function move (event: KeyboardEvent, dx: number, dy: number) {
+});
+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)
+    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 () {
+function autoPosition() {
   const otherObjects = [...objects.values()].filter((obj) => {
-    return obj.id !== id
-      && Number.isFinite(obj.x)
-      && Number.isFinite(obj.y)
-      && obj.page === objectPage.value
-  })
-
+    return obj.id !== id && Number.isFinite(obj.x) && Number.isFinite(obj.y) && obj.page === objectPage.value;
+  });
   const size = {
-    width : objectWidth.value,
-    height: objectHeight.value,
-  }
-
+    width: objectWidth.value,
+    height: objectHeight.value
+  };
   const offside = {
-    width : pageEl.value.clientWidth / scale.value,
-    height: pageEl.value.clientHeight / scale.value,
-  }
-
+    width: pageEl.value.clientWidth / scale.value,
+    height: pageEl.value.clientHeight / scale.value
+  };
   const center = getEmptyPosition({
-    size   : size,
-    offside: offside,
-    objects: otherObjects as ObjectPosition[],
-  })
-
-  objectX.value = center.x
-  objectY.value = center.y
+    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 })
-
+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()
-
+  await until(pageEl).toBeTruthy();
   if (!Number.isFinite(objectX.value) || !Number.isFinite(objectY.value))
-    autoPosition()
-
+    autoPosition();
   if (props.autofocus)
-    focus(object.value)
-})
-
-// Provide some data for debug
+    focus(object.value);
+});
 provide(PDF_OBJECT_CONTEXT, {
   id,
-  x     : objectX,
-  y     : objectY,
-  page  : objectPage,
-  width : objectWidth,
+  x: objectX,
+  y: objectY,
+  page: objectPage,
+  width: objectWidth,
   height: objectHeight,
   minHeight,
   minWidth,
   maxHeight,
   maxWidth,
-  ratio,
-})
+  ratio
+});
 </script>
 
 <style lang="postcss">

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-demi").DefineComponent<import("vue-demi").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-demi").ComponentOptionsMixin, import("vue-demi").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-demi").PublicProps, Readonly<import("vue-demi").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-demi").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.spec.d.ts

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

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

@@ -0,0 +1,21 @@
+import { render } from "@testing-library/vue";
+import PdfObjectAddon from "./PdfObjectAddon.vue";
+it("should render properly", () => {
+  const screen = render({
+    components: { PdfObjectAddon },
+    template: "<PdfObjectAddon />"
+  });
+  const addon = screen.queryByTestId("pdf-object-addon");
+  expect(addon).toBeInTheDocument();
+  expect(addon).toHaveClass("pdf-object__addon--right");
+});
+it("should able to adjust position using prop `position`", () => {
+  const screen = render({
+    components: { PdfObjectAddon },
+    template: '<PdfObjectAddon position="top" />'
+  });
+  const addon = screen.queryByTestId("pdf-object-addon");
+  expect(addon).toBeInTheDocument();
+  expect(addon).toHaveClass("pdf-object__addon--top");
+  expect(addon).not.toHaveClass("pdf-object__addon--right");
+});

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

@@ -7,26 +7,20 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
-import type { AddonPositionVariant } from '.'
-
+<script setup>
+import { computed } from "vue-demi";
 const props = defineProps({
   position: {
-    type   : String as PropType<AddonPositionVariant>,
-    default: 'right',
-  },
-})
-
+    type: String,
+    default: "right"
+  }
+});
 const classNames = computed(() => {
-  const result: string[] = []
-
+  const result = [];
   if (props.position)
-    result.push(`pdf-object__addon--${props.position}`)
-
-  return result
-})
+    result.push(`pdf-object__addon--${props.position}`);
+  return result;
+});
 </script>
 
 <style lang="postcss">