@privyid/persona 0.9.0 → 0.11.0

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

@@ -2,15 +2,15 @@
 declare const _default: import("vue-demi").DefineComponent<{
     x: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     y: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     page: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     width: {
         type: NumberConstructor;
@@ -22,19 +22,19 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     minWidth: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     minHeight: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     maxWidth: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     maxHeight: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     moveable: {
         type: BooleanConstructor;
@@ -58,15 +58,15 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:x" | "update:y" | "update:page" | "update:width" | "update:height")[], "update:x" | "update:y" | "update:page" | "update:width" | "update:height", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     x: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     y: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     page: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     width: {
         type: NumberConstructor;
@@ -78,19 +78,19 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     minWidth: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     minHeight: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     maxWidth: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     maxHeight: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     moveable: {
         type: BooleanConstructor;
@@ -109,15 +109,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    "onUpdate:x"?: (...args: any[]) => any;
-    "onUpdate:y"?: (...args: any[]) => any;
-    "onUpdate:page"?: (...args: any[]) => any;
-    "onUpdate:width"?: (...args: any[]) => any;
-    "onUpdate:height"?: (...args: any[]) => any;
+    "onUpdate:x"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:y"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:page"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:width"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:height"?: ((...args: any[]) => any) | undefined;
 }, {
     x: number;
-    y: number;
     width: number;
+    y: number;
     height: number;
     autofocus: boolean;
     maxHeight: number;

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

@@ -64,8 +64,11 @@ export default defineComponent({
 
 <style lang="postcss">
 .pdf-object {
+  --p-pdf-debugger-size: 198px;
+
   &__debugger {
-    @apply grid grid-cols-1 p-4 bg-emphasis text-on-emphasis absolute rounded w-[198px];
+    @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;

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

@@ -1,8 +1,8 @@
 declare const _default: import("vue-demi").DefineComponent<{}, {
-    x: import("vue-demi").Ref<number>;
-    y: import("vue-demi").Ref<number>;
-    page: import("vue-demi").Ref<number>;
-    width: import("vue-demi").Ref<number>;
-    height: import("vue-demi").Ref<number>;
+    x: any;
+    y: any;
+    page: any;
+    width: any;
+    height: any;
 }, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{}>>, {}>;
 export default _default;

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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    class="pdf-objects"
     data-testid="pdf-objects">
     <slot />
   </div>

package/dist/components/pdf-object/index.d.ts

@@ -23,7 +23,7 @@ export interface PdfObjectSize {
     maxWidth?: number;
     maxHeight?: number;
 }
-export declare type PdfObjectProp = PdfObjectSize & Omit<PdfObject, 'id'>;
+export type PdfObjectProp = PdfObjectSize & Omit<PdfObject, 'id'>;
 export declare const PDF_OBJECTS_CONTEXT: InjectionKey<PdfObjects>;
 export declare const PDF_OBJECT_CONTEXT: InjectionKey<ReturnType<typeof useObjectModel>>;
 export declare function useSizeModel(props: PdfObjectSize): {
@@ -41,9 +41,9 @@ export declare function useSizeModel(props: PdfObjectSize): {
  */
 export declare function useObjectModel(props: PdfObjectProp): {
     id: symbol;
-    x: Ref<number>;
-    y: Ref<number>;
-    page: Ref<number>;
+    x: Ref<number | undefined>;
+    y: Ref<number | undefined>;
+    page: any;
     width: Ref<number>;
     height: Ref<number>;
     minWidth: Ref<number>;
@@ -54,4 +54,4 @@ export declare function useObjectModel(props: PdfObjectProp): {
 };
 export declare function usePage(page: MaybeRef<number>): Readonly<Ref<HTMLElement>>;
 export declare const focus: import("lodash").DebouncedFunc<typeof focus_>;
-export declare type AddonPositionVariant = 'top' | 'left' | 'right' | 'bottpm';
+export type AddonPositionVariant = 'top' | 'left' | 'right' | 'bottom';

package/dist/components/pdf-object/utils/overlap.d.ts

@@ -6,7 +6,7 @@ export interface ObjectPosition {
     x: number;
     y: number;
 }
-export declare type CheckOverlapFn = (object: ObjectPosition, objects: Iterable<ObjectPosition>) => boolean;
+export type CheckOverlapFn = (object: ObjectPosition, objects: Iterable<ObjectPosition>) => boolean;
 export interface GetEmptyPositionOptions {
     /**
      * Other objects position

package/dist/components/pdf-object/utils/position.d.ts

@@ -43,7 +43,7 @@ interface GetPosition {
  * @param element Element to search
  * @param container Maximum search element
  */
-export declare function findRelativeParent(element: HTMLElement, container?: HTMLElement): HTMLElement;
+export declare function findRelativeParent(element: HTMLElement, container?: HTMLElement): HTMLElement | null;
 /**
  * Computed X, Y position to Top, Left position
  * @param context

package/dist/components/pdf-object/utils/use-drop.mjs

@@ -20,7 +20,7 @@ export default function useDrop(target, dropTarget) {
         overlap: 0.95,
         enabled: enable.value,
         checker(dragEvent, event, dropped, dropzone2, dropzoneElement, draggable, draggableElement) {
-          return dropped && (target.value.contains(draggableElement) || draggableElement.classList.contains("pdf-object--external"));
+          return dropped && (target.value?.contains(draggableElement) || draggableElement.classList.contains("pdf-object--external"));
         },
         ondragenter(event) {
           hoverzone.value = event.target;

package/dist/components/pdf-text/PdfText.vue

@@ -0,0 +1,129 @@
+<template>
+  <img
+    class="pdf-text"
+    :width="width"
+    :height="height"
+    :src="preview"
+    :alt="text">
+</template>
+
+<script>
+import {
+  defineComponent,
+  onMounted
+} from "vue-demi";
+import { createSpinner } from "../avatar/utils/create-image";
+import { usePreview } from "../cropper";
+import { useVModel } from "../input";
+import { fromBase64 } from "../utils/base64";
+import { watchDebounced } from "@vueuse/core";
+import generate from "./utils/text-to-image";
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: [String, globalThis.File],
+      default: ""
+    },
+    modelModifiers: {
+      type: Object,
+      default: () => ({})
+    },
+    text: {
+      type: String,
+      default: ""
+    },
+    width: {
+      type: Number,
+      default: 198
+    },
+    height: {
+      type: Number,
+      default: 106
+    },
+    color: {
+      type: String,
+      default: "#4a5362"
+    },
+    size: {
+      type: Number,
+      default: 16
+    },
+    minSize: {
+      type: Number,
+      default: 11
+    },
+    maxSize: {
+      type: Number,
+      default: 72
+    },
+    fixedSize: {
+      type: Boolean,
+      default: false
+    },
+    font: {
+      type: String,
+      default: "DM Sans"
+    },
+    lineHeight: {
+      type: Number,
+      default: 1.5
+    },
+    padding: {
+      type: Number,
+      default: 12
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    labelColor: {
+      type: String,
+      default: "#9EA0A2"
+    },
+    labelFont: {
+      type: String,
+      default: void 0
+    },
+    labelSize: {
+      type: Number,
+      default: 12
+    }
+  },
+  setup(props) {
+    const model = useVModel(props);
+    const preview = usePreview(model, createSpinner(props.width, props.height));
+    watchDebounced(() => [
+      props.text,
+      props.width,
+      props.height,
+      props.color,
+      props.size,
+      props.fixedSize,
+      props.font,
+      props.lineHeight,
+      props.padding,
+      props.label,
+      props.labelColor,
+      props.labelFont,
+      props.labelSize
+    ], () => {
+      load();
+    }, { debounce: 300 });
+    onMounted(() => {
+      load();
+    });
+    async function load() {
+      const result = await generate(props);
+      const value = props.modelModifiers.base64 ? result : fromBase64(result);
+      model.value = value;
+    }
+    return { preview };
+  }
+});
+</script>
+
+<style lang="postcss">
+.pdf-object .pdf-text {
+  @apply w-full h-full;
+}
+</style>

package/dist/components/pdf-text/PdfText.vue.d.ts

@@ -0,0 +1,168 @@
+import { PropType } from 'vue-demi';
+import { ModelModifier } from '../dropzone';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: (StringConstructor | {
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag | undefined): File;
+            prototype: File;
+        })[];
+        default: string;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fixedSize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    font: {
+        type: StringConstructor;
+        default: string;
+    };
+    lineHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    padding: {
+        type: NumberConstructor;
+        default: number;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelFont: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    labelSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    preview: import("vue-demi").Ref<string>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | {
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag | undefined): File;
+            prototype: File;
+        })[];
+        default: string;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fixedSize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    font: {
+        type: StringConstructor;
+        default: string;
+    };
+    lineHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    padding: {
+        type: NumberConstructor;
+        default: number;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelFont: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    labelSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    size: number;
+    text: string;
+    color: string;
+    modelValue: string | File;
+    label: string;
+    modelModifiers: ModelModifier;
+    font: string;
+    padding: number;
+    lineHeight: number;
+    width: number;
+    height: number;
+    labelColor: string;
+    minSize: number;
+    maxSize: number;
+    fixedSize: boolean;
+    labelFont: string;
+    labelSize: number;
+}>;
+export default _default;

package/dist/components/pdf-text/utils/text-to-image.d.ts

@@ -0,0 +1,68 @@
+interface GenerateOptions {
+    /**
+     * Canvas's element
+     */
+    canvas?: HTMLCanvasElement;
+    /**
+     * Text to be generated
+     */
+    text: string;
+    /**
+     * Image width
+     */
+    width: number;
+    /**
+     * Image height
+     */
+    height: number;
+    /**
+     * Text color
+     */
+    color: string;
+    /**
+     * Text font size
+     */
+    size: number;
+    /**
+     * Minimum font size
+     */
+    minSize: number;
+    /**
+     * Maximum font size
+     */
+    maxSize: number;
+    /**
+     * Autofit mode
+     */
+    fixedSize: boolean;
+    /**
+     * Text font family
+     */
+    font: string;
+    /**
+     * Text line height
+     */
+    lineHeight: number;
+    /**
+     * Text box padding
+     */
+    padding: number;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Label color
+     */
+    labelColor?: string;
+    /**
+     * Label font family
+     */
+    labelFont?: string;
+    /**
+     * Label font size
+     */
+    labelSize?: number;
+}
+export default function generate(options: GenerateOptions): Promise<string>;
+export {};

package/dist/components/pdf-text/utils/text-to-image.mjs

@@ -0,0 +1,118 @@
+import { createCanvas } from "../../signature-draw/utils/canvas.mjs";
+import loadFont from "../../signature-text/utils/load-font.mjs";
+import { clamp } from "lodash-es";
+function wrapText(context, text, fontSize, lineHeight, fontFamily, maxWidth) {
+  const lines = [];
+  context.font = `${fontSize}px ${JSON.stringify(fontFamily)}`;
+  context.textBaseline = "top";
+  let line = "";
+  let i;
+  let test;
+  let metrics;
+  for (const paragraph of text.split("\n")) {
+    const words = paragraph.split(" ");
+    for (i = 0; i < words.length; i++) {
+      test = words[i];
+      metrics = context.measureText(test);
+      while (metrics.width > maxWidth) {
+        test = test.slice(0, Math.max(0, test.length - 1));
+        metrics = context.measureText(test);
+      }
+      if (words[i] !== test) {
+        words.splice(i + 1, 0, words[i].slice(test.length));
+        words[i] = test;
+      }
+      test = `${line + words[i]} `;
+      metrics = context.measureText(test);
+      if (metrics.width > maxWidth && i > 0) {
+        lines.push(line);
+        line = `${words[i]} `;
+      } else
+        line = test;
+    }
+    lines.push(line);
+    line = "";
+  }
+  return lines;
+}
+export default async function generate(options) {
+  const {
+    text,
+    color,
+    padding,
+    font,
+    height,
+    width,
+    size,
+    minSize,
+    maxSize,
+    fixedSize,
+    label
+  } = options;
+  await loadFont(font);
+  const canvas = options.canvas ?? createCanvas(width, height);
+  const context = canvas.getContext("2d");
+  let y = padding;
+  if (label) {
+    const labelSize = options.labelSize ?? size;
+    const labelFont = options.labelFont ?? font;
+    const labelColor = options.labelColor ?? color;
+    context.font = `${labelSize}px ${JSON.stringify(labelFont)}`;
+    context.textBaseline = "top";
+    context.textAlign = "start";
+    context.fillStyle = labelColor;
+    context.fillText(label, padding, y);
+    y += labelSize * options.lineHeight;
+  }
+  if (text) {
+    const maxWidth = width - padding * 2;
+    const maxHeight = height - (y + padding);
+    let fontSize = size;
+    let lineHeight = fontSize * options.lineHeight;
+    let lines = wrapText(
+      context,
+      text,
+      fontSize,
+      lineHeight,
+      font,
+      maxWidth
+    );
+    if (!fixedSize) {
+      let textHeight = lines.length * lineHeight;
+      let count = 0;
+      do {
+        const newFontSize = clamp(
+          Math.round((maxHeight / textHeight * fontSize + fontSize) / 2),
+          minSize,
+          maxSize
+        );
+        if (newFontSize === fontSize)
+          break;
+        fontSize = newFontSize;
+        lineHeight = fontSize * options.lineHeight;
+        lines = wrapText(
+          context,
+          text,
+          fontSize,
+          lineHeight,
+          font,
+          maxWidth
+        );
+        textHeight = lines.length * lineHeight;
+      } while (textHeight > maxHeight && ++count < 5);
+    }
+    context.font = `${fontSize}px ${JSON.stringify(font)}`;
+    context.textBaseline = "top";
+    context.textAlign = "start";
+    context.fillStyle = color;
+    context.font = `${fontSize}px ${JSON.stringify(font)}`;
+    context.textBaseline = "top";
+    context.textAlign = "start";
+    context.fillStyle = color;
+    for (const line of lines) {
+      context.fillText(line, padding, y);
+      y += lineHeight;
+    }
+  }
+  return canvas.toDataURL("image/png");
+}