@privyid/persona 1.2.1 → 1.2.2-rc.2

package/dist/components/pspdfkit/utils/pspdfkit.d.ts

@@ -0,0 +1,17 @@
+import type PSPDFKIT from 'pspdfkit';
+type RectangleAnnotation = typeof PSPDFKIT.Annotations.RectangleAnnotation;
+type Rect = typeof PSPDFKIT.Geometry.Rect;
+type ViewState = typeof PSPDFKIT.ViewState;
+type Color = typeof PSPDFKIT.Color;
+export declare function importPSPDFKit(): Promise<typeof PSPDFKIT>;
+export declare function importRectangleAnnotation(): Promise<typeof PSPDFKIT.Annotations.RectangleAnnotation>;
+export declare function importList(): Promise<typeof PSPDFKIT.Immutable.List>;
+export declare function getVersion(): Promise<string>;
+export declare function createViewer(...params: Parameters<typeof PSPDFKIT.load>): Promise<import("pspdfkit").Instance>;
+export declare function destroyViewer(...params: Parameters<typeof PSPDFKIT.unload>): Promise<boolean>;
+export declare function generateInstantId(): Promise<string>;
+export declare function createRectangleAnnotation(...params: ConstructorParameters<RectangleAnnotation>): Promise<InstanceType<RectangleAnnotation>>;
+export declare function createRect(...params: ConstructorParameters<Rect>): Promise<InstanceType<Rect>>;
+export declare function createViewState(...params: ConstructorParameters<ViewState>): Promise<InstanceType<ViewState>>;
+export declare function createColor(...params: ConstructorParameters<Color>): Promise<InstanceType<Color>>;
+export {};

package/dist/components/pspdfkit/utils/pspdfkit.mjs

@@ -0,0 +1,53 @@
+let pspdfkitLib;
+export async function importPSPDFKit() {
+  if (!pspdfkitLib) {
+    const { default: PSPDFKit } = await import("pspdfkit");
+    if (!Object.isFrozen(PSPDFKit.Options)) {
+      PSPDFKit.Options.SELECTION_OUTLINE_PADDING = () => 0;
+      PSPDFKit.Options.SELECTION_STROKE_WIDTH = 2;
+      PSPDFKit.Options.DISABLE_KEYBOARD_SHORTCUTS = true;
+    }
+    pspdfkitLib = PSPDFKit;
+  }
+  return pspdfkitLib;
+}
+export async function importRectangleAnnotation() {
+  await importPSPDFKit();
+  return pspdfkitLib.Annotations.RectangleAnnotation;
+}
+export async function importList() {
+  await importPSPDFKit();
+  return pspdfkitLib.Immutable.List;
+}
+export async function getVersion() {
+  await importPSPDFKit();
+  return pspdfkitLib.version;
+}
+export async function createViewer(...params) {
+  await importPSPDFKit();
+  return await pspdfkitLib.load(...params);
+}
+export async function destroyViewer(...params) {
+  await importPSPDFKit();
+  return pspdfkitLib.unload(...params);
+}
+export async function generateInstantId() {
+  await importPSPDFKit();
+  return pspdfkitLib.generateInstantId();
+}
+export async function createRectangleAnnotation(...params) {
+  await importPSPDFKit();
+  return new pspdfkitLib.Annotations.RectangleAnnotation(...params);
+}
+export async function createRect(...params) {
+  await importPSPDFKit();
+  return new pspdfkitLib.Geometry.Rect(...params);
+}
+export async function createViewState(...params) {
+  await importPSPDFKit();
+  return new pspdfkitLib.ViewState(...params);
+}
+export async function createColor(...params) {
+  await importPSPDFKit();
+  return new pspdfkitLib.Color(...params);
+}

package/dist/components/pspdfkit/utils/use-drop.d.ts

@@ -0,0 +1,2 @@
+import type { Ref } from 'vue';
+export default function useDrop(target: Ref<HTMLElement>): import("vue").ShallowRef<boolean, boolean>;

package/dist/components/pspdfkit/utils/use-drop.mjs

@@ -0,0 +1,41 @@
+import {
+  onScopeDispose,
+  shallowRef,
+  watch
+} from "vue";
+import { usePspdf } from "../index.mjs";
+export default function useDrop(target) {
+  const enable = shallowRef(true);
+  const instance = shallowRef();
+  const { instance: pspdf } = usePspdf();
+  async function init() {
+    destroy();
+    if (target.value) {
+      const { default: Interact } = await import("interactjs");
+      Interact.dynamicDrop(true);
+      instance.value = Interact(target.value).dropzone({
+        accept: ".pdf-object",
+        overlap: 0.95,
+        enabled: enable.value,
+        checker(dragEvent, event, dropped, dropzone, dropzoneElement, draggable, draggableElement) {
+          return dropped && (target.value?.contains(draggableElement) || draggableElement.classList.contains("pdf-object--external"));
+        },
+        ondrop(event) {
+          if (event.relatedTarget)
+            event.relatedTarget.instance = pspdf.value;
+        }
+      });
+    }
+  }
+  watch(target, async () => {
+    await init();
+  });
+  function destroy() {
+    if (instance.value)
+      instance.value.unset();
+  }
+  onScopeDispose(() => {
+    destroy();
+  });
+  return enable;
+}

package/dist/components/pspdfkit/utils/use-viewer.d.ts

@@ -0,0 +1,17 @@
+import { type Ref } from 'vue';
+import type { Configuration, Instance } from 'pspdfkit';
+export type OpenDocConfig = Omit<Configuration, 'document' | 'password' | 'container'>;
+export declare function useViewer(container: Ref<HTMLDivElement>): {
+    instance: import("vue").ShallowRef<Instance | undefined, Instance | undefined>;
+    page: Ref<number, number>;
+    totalPage: import("vue").ShallowRef<number, number>;
+    scale: Ref<number, number>;
+    loading: import("vue").WritableComputedRef<boolean, boolean>;
+    ready: import("vue").ShallowRef<boolean, boolean>;
+    error: import("vue").ShallowRef<Error | undefined, Error | undefined>;
+    openDoc: (url: string, password?: string, config?: OpenDocConfig) => Promise<void>;
+    closeDoc: () => Promise<void>;
+    onLoaded: import("@vueuse/core").EventHookOn<Instance>;
+    onError: import("@vueuse/core").EventHookOn<Error>;
+    onReady: import("@vueuse/core").EventHookOn<Instance>;
+};

package/dist/components/pspdfkit/utils/use-viewer.mjs

@@ -0,0 +1,167 @@
+import {
+  shallowRef,
+  watch,
+  provide,
+  onBeforeUnmount
+} from "vue";
+import { useClamp, useMax } from "@vueuse/math";
+import useLoading from "../../overlay/utils/use-loading.mjs";
+import { createEventHook } from "@vueuse/core";
+import { useLang, getCDN } from "../../../core";
+import { defuFn } from "defu";
+import { PSPDF_INSTANCE } from "../index.mjs";
+import {
+  withBase,
+  joinURL,
+  hasProtocol
+} from "ufo";
+import Style from "../css/custom.css?inline";
+import {
+  createViewState,
+  createViewer,
+  destroyViewer,
+  getVersion,
+  importList,
+  importRectangleAnnotation
+} from "./pspdfkit.mjs";
+let styleURL;
+function getStyleURL() {
+  if (!styleURL)
+    styleURL = window.URL.createObjectURL(new Blob([Style], { type: "text/css" }));
+  return styleURL;
+}
+export function useViewer(container) {
+  const lang = useLang();
+  const instance = shallowRef();
+  const contents = /* @__PURE__ */ new Map();
+  const totalPage = shallowRef(0);
+  const scale = useClamp(1, 0.5, 2);
+  const page = useClamp(1, 1, useMax(totalPage, 1));
+  const loading = useLoading();
+  const ready = shallowRef(false);
+  const error = shallowRef();
+  const loadEvent = createEventHook();
+  const errorEvent = createEventHook();
+  const readyEvent = createEventHook();
+  async function openDoc(url, password, config = {}) {
+    loading.value = true;
+    if (instance.value)
+      await closeDoc();
+    try {
+      const RectangleAnnotation = await importRectangleAnnotation();
+      const baseUrl = joinURL(getCDN(), `pspdfkit@${await getVersion()}/dist/`);
+      const instance_ = await createViewer(defuFn(config, {
+        container: container.value,
+        document: url,
+        password,
+        styleSheets: [getStyleURL()],
+        maxPasswordRetries: 0,
+        locale: lang.value,
+        baseUrl: hasProtocol(baseUrl) ? baseUrl : withBase(baseUrl, location.origin),
+        initialViewState: await createViewState({
+          showToolbar: false,
+          allowExport: false,
+          allowPrinting: false,
+          enableAnnotationToolbar: false
+        }),
+        customRenderers: {
+          Annotation({ annotation }) {
+            if (annotation instanceof RectangleAnnotation && contents.has(annotation.id)) {
+              const node = contents.get(annotation.id);
+              node.dataset.annotationId = annotation.id;
+              node.style.width = `${annotation.boundingBox.width}px`;
+              node.style.height = `${annotation.boundingBox.height}px`;
+              return {
+                node,
+                append: false
+              };
+            }
+          }
+        },
+        onAnnotationResizeStart: (event) => {
+          if (event.annotation instanceof RectangleAnnotation && contents.has(event.annotation.id)) {
+            return {
+              maintainAspectRatio: true,
+              minHeight: event.annotation.customData?.minHeight,
+              minWidth: event.annotation.customData?.minWidth,
+              maxHeight: event.annotation.customData?.maxHeight,
+              maxWidth: event.annotation.customData?.maxWidth
+            };
+          }
+        },
+        inlineTextSelectionToolbarItems: () => [],
+        isEditableAnnotation: (annotation) => {
+          return contents.has(annotation.id);
+        }
+      }));
+      instance_.addEventListener("viewState.zoom.change", (zoom) => {
+        scale.value = zoom * 0.75;
+      });
+      instance_.addEventListener("viewState.currentPageIndex.change", (pageIndex) => {
+        page.value = pageIndex + 1;
+      });
+      instance_.contentDocument.addEventListener("pointerdown", (event) => {
+        const target = event.target;
+        if (target?.matches(".pdf-object") && target.dataset.annotationId) {
+          void importList().then((List) => {
+            event.stopImmediatePropagation();
+            instance_.setSelectedAnnotations(List([target.dataset.annotationId]));
+          });
+        }
+      }, { capture: true });
+      instance.value = instance_;
+      totalPage.value = instance_.totalPageCount;
+      page.value = instance_.viewState.currentPageIndex + 1;
+      scale.value = instance_.currentZoomLevel * 0.75;
+      void loadEvent.trigger(instance.value);
+      void readyEvent.trigger(instance.value);
+    } catch (error_) {
+      if (error_ instanceof Error) {
+        error.value = error_;
+        void errorEvent.trigger(error_);
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+  watch(page, (value) => {
+    const pageIndex = value - 1;
+    if (instance.value.viewState.currentPageIndex !== pageIndex)
+      instance.value.setViewState((viewState) => viewState.set("currentPageIndex", pageIndex));
+  });
+  watch(scale, (value) => {
+    const zoom = value / 0.75;
+    if (instance.value.currentZoomLevel !== zoom)
+      instance.value.setViewState((viewState) => viewState.set("zoom", zoom));
+  });
+  watch(lang, async (value) => {
+    await instance.value.setLocale(value);
+  });
+  async function closeDoc() {
+    if (container.value) {
+      await destroyViewer(container.value);
+      instance.value = void 0;
+    }
+  }
+  onBeforeUnmount(async () => {
+    await closeDoc();
+  });
+  provide(PSPDF_INSTANCE, {
+    instance,
+    contents
+  });
+  return {
+    instance,
+    page,
+    totalPage,
+    scale,
+    loading,
+    ready,
+    error,
+    openDoc,
+    closeDoc,
+    onLoaded: loadEvent.on,
+    onError: errorEvent.on,
+    onReady: readyEvent.on
+  };
+}

package/dist/components/qrcode/Qrcode.vue

@@ -0,0 +1,150 @@
+<template>
+  <img
+    data-testid="qrcode"
+    class="qrcode"
+    :width="size"
+    :height="size"
+    :src="preview"
+    :alt="String(data)">
+</template>
+
+<script setup>
+import {
+  computed,
+  onMounted,
+  shallowRef
+} from "vue";
+import { defuFn } from "defu";
+import { usePreview } from "../cropper/utils/use-preview";
+import { useVModel } from "../input";
+import { createSpinner } from "../avatar/utils/create-image";
+import { fromBase64 } from "../utils/base64";
+import { toDataURL } from "../signature-draw/utils/canvas";
+import { watchDebounced } from "@vueuse/core";
+const props = defineProps({
+  modelValue: {
+    type: [String, globalThis.File],
+    default: void 0
+  },
+  modelModifiers: {
+    type: Object,
+    default: () => ({})
+  },
+  data: {
+    type: void 0,
+    default: void 0
+  },
+  variant: {
+    type: String,
+    default: "square"
+  },
+  size: {
+    type: [Number, String],
+    default: 200
+  },
+  logo: {
+    type: String,
+    default: void 0
+  },
+  logoSize: {
+    type: [Number, String],
+    default: 0.8
+  },
+  logoMargin: {
+    type: [Number, String],
+    default: 8
+  },
+  color: {
+    type: String,
+    default: "#000000"
+  },
+  bgColor: {
+    type: String,
+    default: "#ffffff"
+  },
+  ecc: {
+    type: String,
+    default: "M"
+  },
+  typeNumber: {
+    type: Number,
+    default: 0
+  },
+  mode: {
+    type: String,
+    default: void 0
+  },
+  options: {
+    type: Object,
+    default: void 0
+  }
+});
+const model = useVModel(props);
+const preview = usePreview(model, createSpinner(Number(props.size)));
+const qrCode = shallowRef();
+const qrOptions = computed(() => {
+  return defuFn(props.options, {
+    type: "canvas",
+    data: props.data,
+    width: props.size,
+    height: props.size,
+    image: props.logo,
+    dotsOptions: {
+      type: props.variant,
+      color: props.color
+    },
+    cornersDotOptions: { type: props.variant === "dots" ? "dot" : void 0 },
+    cornersSquareOptions: { type: props.variant === "dots" ? "extra-rounded" : void 0 },
+    qrOptions: {
+      mode: props.mode,
+      typeNumber: props.typeNumber,
+      errorCorrectionLevel: props.ecc
+    },
+    imageOptions: {
+      margin: props.logoMargin,
+      imageSize: props.logoSize
+    },
+    backgroundOptions: { color: props.bgColor }
+  });
+});
+watchDebounced(() => [
+  props.data,
+  props.variant,
+  props.size,
+  props.logo,
+  props.logoSize,
+  props.logoMargin,
+  props.color,
+  props.bgColor,
+  props.ecc,
+  props.typeNumber,
+  props.mode,
+  props.options
+], () => {
+  load();
+}, { debounce: 300 });
+onMounted(() => {
+  load();
+});
+async function load() {
+  if (props.data) {
+    if (qrCode.value)
+      qrCode.value.update(qrOptions.value);
+    else {
+      const { default: QRStyling } = await import("qr-code-styling");
+      qrCode.value = new QRStyling(qrOptions.value);
+    }
+    const canvas = await qrCode.value._getElement("png");
+    const result = toDataURL(canvas, "image/png");
+    const value = props.modelModifiers.base64 ? result : fromBase64(result);
+    model.value = value;
+  }
+}
+defineEmits(["update:modelValue"]);
+</script>
+
+<style lang="postcss">
+.qrcode {
+  @apply max-w-full h-auto;
+}
+</style>

package/dist/components/qrcode/Qrcode.vue.d.ts

@@ -0,0 +1,145 @@
+import type { PropType } from 'vue';
+import type { Options, ErrorCorrectionLevel, TypeNumber, Mode } from 'qr-code-styling';
+import type { StyleVariant } from '.';
+import type { ModelModifier } from '../dropzone';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | {
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
+            prototype: File;
+        })[];
+        default: undefined;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    data: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    logo: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    logoSize: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    logoMargin: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    ecc: {
+        type: PropType<ErrorCorrectionLevel>;
+        default: string;
+    };
+    typeNumber: {
+        type: PropType<TypeNumber>;
+        default: number;
+    };
+    mode: {
+        type: PropType<Mode>;
+        default: undefined;
+    };
+    options: {
+        type: PropType<Options>;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: unknown) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | {
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
+            prototype: File;
+        })[];
+        default: undefined;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    data: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    logo: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    logoSize: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    logoMargin: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    ecc: {
+        type: PropType<ErrorCorrectionLevel>;
+        default: string;
+    };
+    typeNumber: {
+        type: PropType<TypeNumber>;
+        default: number;
+    };
+    mode: {
+        type: PropType<Mode>;
+        default: undefined;
+    };
+    options: {
+        type: PropType<Options>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+}>, {
+    size: string | number;
+    data: any;
+    modelValue: string | File;
+    mode: Mode;
+    color: string;
+    variant: StyleVariant;
+    bgColor: string;
+    options: Options;
+    modelModifiers: ModelModifier;
+    logo: string;
+    logoSize: string | number;
+    logoMargin: string | number;
+    ecc: ErrorCorrectionLevel;
+    typeNumber: TypeNumber;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/qrcode/index.d.ts

@@ -0,0 +1 @@
+export type StyleVariant = 'square' | 'rounded' | 'dots';