@privyid/persona 1.2.1 → 1.2.2-rc.2

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

@@ -0,0 +1,125 @@
+<template>
+  <img
+    class="pdf-text"
+    :width="width"
+    :height="height"
+    :src="preview"
+    :srcset="srcset"
+    :alt="text">
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+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";
+const props = defineProps({
+  modelValue: {
+    type: [String, globalThis.File],
+    default: void 0
+  },
+  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
+  }
+});
+defineEmits(["update:modelValue"]);
+const model = useVModel(props);
+const preview = usePreview(model, createSpinner(props.width, props.height));
+const srcset = ref("");
+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;
+  srcset.value = `${await generate(props, 2)} 2x`;
+}
+</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,170 @@
+import type { PropType } from 'vue';
+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;
+    };
+    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;
+    };
+}>, {}, {}, {}, {}, 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;
+    };
+    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;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+}>, {
+    text: string;
+    size: number;
+    label: string;
+    modelValue: string | File;
+    width: number;
+    height: number;
+    color: string;
+    padding: number;
+    font: string;
+    modelModifiers: ModelModifier;
+    lineHeight: number;
+    labelColor: string;
+    minSize: number;
+    maxSize: number;
+    fixedSize: boolean;
+    labelFont: string;
+    labelSize: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+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, dpi?: number): Promise<string>;
+export {};

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

@@ -0,0 +1,120 @@
+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, 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, dpi = 1) {
+  const {
+    text,
+    color,
+    padding,
+    font,
+    height,
+    width,
+    size,
+    minSize,
+    maxSize,
+    fixedSize,
+    label,
+    lineHeight
+  } = options;
+  await loadFont(font);
+  const canvas = options.canvas ?? createCanvas(width, height, dpi);
+  const context = canvas.getContext("2d");
+  const maxWidth = width - padding * 2;
+  let y = padding;
+  if (label) {
+    const labelSize = options.labelSize ?? size;
+    const labelFont = options.labelFont ?? font;
+    const labelColor = options.labelColor ?? color;
+    const labelLines = wrapText(
+      context,
+      label,
+      labelSize,
+      labelFont,
+      maxWidth
+    );
+    context.font = `${labelSize}px ${JSON.stringify(labelFont)}`;
+    context.textBaseline = "top";
+    context.textAlign = "start";
+    context.fillStyle = labelColor;
+    for (const line of labelLines) {
+      context.fillText(line, padding, y, maxWidth);
+      y += labelSize * lineHeight;
+    }
+  }
+  if (text) {
+    const maxHeight = height - (y + padding);
+    let fontSize = size;
+    let lines = wrapText(
+      context,
+      text,
+      fontSize,
+      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;
+        lines = wrapText(
+          context,
+          text,
+          fontSize,
+          font,
+          maxWidth
+        );
+        textHeight = lines.length * lineHeight * fontSize;
+      } while (textHeight > maxHeight && ++count < 5);
+    }
+    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, maxWidth);
+      y += fontSize * lineHeight;
+    }
+  }
+  return canvas.toDataURL("image/png");
+}

package/dist/components/pdf-viewer/PdfError.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    v-p-aspect-ratio="1122 / 793"
+    data-testid="pdf-error"
+    class="pdf__error">
+    <Heading element="h3">
+      Failed to load PDF
+    </Heading>
+    <dl class="mt-7">
+      <dt>URL:</dt>
+      <dd class="truncate">
+        <a
+          :href="url"
+          target="_blank">
+          <code>{{ url }}</code>
+        </a>
+      </dd>
+      <dt>
+        Reason:
+      </dt>
+      <dd><code>{{ error.message }}</code></dd>
+      <dt>
+        PDFJS Version:
+      </dt>
+      <dd><code>{{ version }}</code></dd>
+    </dl>
+  </div>
+</template>
+
+<script setup>
+import { vPAspectRatio } from "../aspect-ratio";
+import { onMounted, ref } from "vue";
+import Heading from "../heading/Heading.vue";
+import { getVersion } from "./utils/pdfjs";
+defineProps({
+  url: {
+    type: String,
+    default: ""
+  },
+  error: {
+    type: Object,
+    default: () => ({})
+  }
+});
+const version = ref("");
+onMounted(async () => {
+  version.value = await getVersion();
+});
+</script>
+
+<style lang="postcss">
+.pdf__error {
+  @apply shadow-lg mb-4 p-6 bg-danger w-full h-full max-w-[var(--p-pdf-container-width)] mx-auto text-default;
+  @apply dark:bg-dark-danger-emphasis dark:text-dark-default;
+
+  a {
+    &,
+    &:hover {
+      > code {
+        @apply text-danger;
+      }
+    }
+  }
+
+  :not(pre) code {
+    @apply bg-emphasis-alpha text-danger;
+    @apply dark:bg-dark-danger dark:text-dark-danger;
+  }
+}
+</style>

package/dist/components/pdf-viewer/PdfError.vue.d.ts

@@ -0,0 +1,24 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        default: string;
+    };
+    error: {
+        type: PropType<Error>;
+        default: () => Error;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        default: string;
+    };
+    error: {
+        type: PropType<Error>;
+        default: () => Error;
+    };
+}>> & Readonly<{}>, {
+    error: Error;
+    url: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/pdf-viewer/PdfLoading.vue

@@ -0,0 +1,24 @@
+<template>
+  <div
+    data-testid="pdf-loading"
+    class="pdf__loading">
+    <img
+      :src="PDF_LOADING_IMG"
+      width="793"
+      height="1122">
+  </div>
+</template>
+
+<script setup>
+import PDF_LOADING_IMG from "./assets/pdf-loading.svg";
+</script>
+
+<style lang="postcss">
+.pdf__loading {
+  @apply shadow-lg mb-4 p-4 bg-default max-w-[var(--p-pdf-container-width)] mx-auto;
+
+  > img {
+    @apply max-w-full object-contain h-auto;
+  }
+}
+</style>

package/dist/components/pdf-viewer/PdfLoading.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;