@privyid/persona 1.2.1 → 1.2.2-rc.2

package/dist/components/signature-draw/utils/smooth-line.mjs

@@ -0,0 +1,56 @@
+export class SmoothLine {
+  lastX;
+  lastY;
+  movingX;
+  movingY;
+  smoother;
+  /**
+   *
+   * @param smoother 0.1 - 0.9
+   */
+  constructor(smoother) {
+    this.lastX = 0;
+    this.lastY = 0;
+    this.movingX = 0;
+    this.movingY = 0;
+    this.smoother = smoother * 0.05 + 0.7;
+  }
+  /**
+   * Set start point
+   * @param x X coordinate
+   * @param y Y coordinate
+   */
+  start(x, y) {
+    this.lastX = x;
+    this.lastY = y;
+    this.movingX = 0;
+    this.movingY = 0;
+  }
+  /**
+   * Update coordinate when drawing
+   * @param x mouse X coordinate
+   * @param y mouse Y coordinate
+   * @return [x0, x0, x1, y1]
+   */
+  move(x, y) {
+    const x0 = this.lastX;
+    const y0 = this.lastY;
+    const ax = (this.movingX + (x0 - x) * 0.1) * this.smoother;
+    const ay = (this.movingY + (y0 - y) * 0.1) * this.smoother;
+    const x1 = x0 - ax;
+    const y1 = y0 - ay;
+    this.movingX = ax;
+    this.movingY = ay;
+    this.lastX = x1;
+    this.lastY = y1;
+    return [
+      x0,
+      y0,
+      x1,
+      y1
+    ];
+  }
+}
+export function createLines(length) {
+  return Array.from({ length }, (_, i) => new SmoothLine(i / (length * 1.25)));
+}

package/dist/components/signature-draw/utils/straight-line.d.ts

@@ -0,0 +1,8 @@
+import type { DrawLineCoordinate } from './canvas';
+export declare class StraightLine {
+    protected lastX: number;
+    protected lastY: number;
+    constructor();
+    start(x: number, y: number): void;
+    move(x: number, y: number): DrawLineCoordinate;
+}

package/dist/components/signature-draw/utils/straight-line.mjs

@@ -0,0 +1,24 @@
+export class StraightLine {
+  lastX;
+  lastY;
+  constructor() {
+    this.lastX = 0;
+    this.lastY = 0;
+  }
+  start(x, y) {
+    this.lastX = x;
+    this.lastY = y;
+  }
+  move(x, y) {
+    const x0 = this.lastX;
+    const y0 = this.lastY;
+    this.lastX = x;
+    this.lastY = y;
+    return [
+      x0,
+      y0,
+      x,
+      y
+    ];
+  }
+}

package/dist/components/signature-draw/utils/use-draw.d.ts

@@ -0,0 +1,7 @@
+import type { InteractEvent } from '@interactjs/types';
+import type { Ref } from 'vue';
+export interface DrawHooks {
+    onstart?: (event: InteractEvent) => void;
+    onmove?: (event: InteractEvent) => void;
+}
+export default function useDraw(target: Ref<HTMLCanvasElement>, hooks?: DrawHooks): void;

package/dist/components/signature-draw/utils/use-draw.mjs

@@ -0,0 +1,29 @@
+import { throttle } from "lodash-es";
+import {
+  onBeforeUnmount,
+  onMounted,
+  shallowRef
+} from "vue";
+export default function useDraw(target, hooks) {
+  const instance = shallowRef();
+  onMounted(async () => {
+    if (target.value) {
+      const { default: Interact } = await import("interactjs");
+      const onmove = throttle(
+        hooks.onmove,
+        1e3 / 60
+        /* limit 60fps */
+      );
+      instance.value = Interact(target.value).styleCursor(false).draggable({
+        origin: "self",
+        inertia: { enabled: true, resistance: 10 },
+        onstart: hooks.onstart,
+        onmove,
+        onend: onmove
+      });
+    }
+  });
+  onBeforeUnmount(async () => {
+    instance.value?.unset();
+  });
+}

package/dist/components/signature-text/SignatureText.vue

@@ -0,0 +1,114 @@
+<template>
+  <img
+    data-testid="signature-text"
+    class="signature--text"
+    :width="width"
+    :height="height"
+    :src="src"
+    :srcset="srcset">
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  onMounted
+} from "vue";
+import { useVModel } from "../input";
+import { createSpinner } from "../avatar/utils/create-image";
+import { formatName } from "./utils/formatter";
+import generate from "./utils/generate-text";
+import { usePreview } from "../cropper";
+import { fromBase64 } from "../utils/base64";
+import { watchDebounced } from "@vueuse/core";
+const props = defineProps({
+  modelValue: {
+    type: [String, globalThis.File],
+    default: ""
+  },
+  modelModifiers: {
+    type: Object,
+    default: () => ({})
+  },
+  width: {
+    type: Number,
+    default: 430
+  },
+  height: {
+    type: Number,
+    default: 230
+  },
+  text: {
+    type: String,
+    default: ""
+  },
+  maxwords: {
+    type: [Number, String],
+    default: 2
+  },
+  maxlength: {
+    type: [Number, String],
+    default: 50
+  },
+  font: {
+    type: String,
+    default: "Herr Von Muellerhoff"
+  },
+  color: {
+    type: String,
+    default: "#000000"
+  }
+});
+defineEmits(["update:modelValue"]);
+const ready = ref(false);
+const srcset = ref("");
+const model = useVModel(props);
+const preview = usePreview(model);
+const src = computed(() => {
+  if (!ready.value)
+    return createSpinner(props.width, props.height);
+  return preview.value;
+});
+const name = computed(() => {
+  if (!props.text)
+    return "- No Image -";
+  return formatName(
+    String(props.text).split(" ").filter(Boolean).slice(0, Number.parseInt(`${props.maxwords}`)).join(" ").slice(0, Number.parseInt(`${props.maxlength}`))
+  );
+});
+watchDebounced(() => [
+  props.text,
+  props.font,
+  props.color,
+  props.width,
+  props.height,
+  props.maxwords,
+  props.maxlength
+], () => {
+  load();
+}, { debounce: 300 });
+onMounted(() => {
+  load();
+});
+async function load() {
+  ready.value = false;
+  const options = {
+    text: name.value,
+    font: props.font,
+    width: props.width,
+    height: props.height,
+    color: props.color
+  };
+  const result = await generate(options);
+  const value = props.modelModifiers.base64 ? result : fromBase64(result);
+  model.value = value;
+  srcset.value = `${await generate(options, 2)} 2x`;
+  ready.value = true;
+}
+</script>
+
+<style lang="postcss">
+  .signature--text {
+    @apply max-w-full h-auto;
+  }
+</style>

package/dist/components/signature-text/SignatureText.vue.d.ts

@@ -0,0 +1,98 @@
+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: string;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxwords: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    maxlength: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    font: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, 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: string;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxwords: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    maxlength: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    font: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+}>, {
+    text: string;
+    modelValue: string | File;
+    width: number;
+    height: number;
+    color: string;
+    font: string;
+    modelModifiers: ModelModifier;
+    maxlength: string | number;
+    maxwords: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/signature-text/utils/formatter.d.ts

@@ -0,0 +1,2 @@
+export declare function capitalize(text: string): any;
+export declare function formatName(text: string): any;

package/dist/components/signature-text/utils/formatter.mjs

@@ -0,0 +1,8 @@
+export function capitalize(text) {
+  return String(text).toLowerCase().replaceAll(/^\w|([\s,.])(\w)/gm, (i) => i.toUpperCase());
+}
+export function formatName(text) {
+  if (!text)
+    return "";
+  return capitalize(String(text).trim().replaceAll(/[^\s,.A-Za-z]+/g, ""));
+}

package/dist/components/signature-text/utils/generate-text.d.ts

@@ -0,0 +1,8 @@
+export interface GenerateOptions {
+    text: string;
+    font: string;
+    width: number;
+    height: number;
+    color: string;
+}
+export default function generate(options: GenerateOptions, dpi?: number): Promise<string>;

package/dist/components/signature-text/utils/generate-text.mjs

@@ -0,0 +1,28 @@
+import { createCanvas } from "../../signature-draw/utils/canvas.mjs";
+import loadFont from "./load-font.mjs";
+export default async function generate(options, dpi = 1) {
+  await loadFont(options.font);
+  const text = options.text;
+  const width = options.width;
+  const height = options.height;
+  const color = options.color;
+  const font = options.font;
+  const canvas = createCanvas(width, height, dpi);
+  const context = canvas.getContext("2d");
+  context.fillStyle = color;
+  context.font = `100px ${font}`;
+  context.textBaseline = "middle";
+  let size = 100;
+  let measure = context.measureText(text);
+  if (measure.width > width) {
+    size = Math.floor(size / measure.width * (width - 16));
+    context.font = `${size}px ${font}`;
+    measure = context.measureText(text);
+  } else if (size >= height) {
+    size = height - 16;
+    context.font = `${size}px ${font}`;
+    measure = context.measureText(text);
+  }
+  context.fillText(text, (width - measure.width) / 2, height / 2 + 16);
+  return canvas.toDataURL();
+}

package/dist/components/signature-text/utils/load-font.d.ts

@@ -0,0 +1 @@
+export default function loadFont(font: string): Promise<void>;

package/dist/components/signature-text/utils/load-font.mjs

@@ -0,0 +1,22 @@
+import PQueue from "../../global/utils/queue.mjs";
+const queue = new PQueue();
+const loadedFont = /* @__PURE__ */ new Set();
+export default async function loadFont(font) {
+  return await queue.add(async () => {
+    if (!loadedFont.has(font)) {
+      const WebFont = await import("webfontloader");
+      return await new Promise((resolve, reject) => {
+        WebFont.load({
+          google: { families: [font] },
+          fontactive() {
+            loadedFont.add(font);
+            resolve();
+          },
+          fontinactive() {
+            reject(new Error("FONTLOADER_TIMEOUT"));
+          }
+        });
+      });
+    }
+  });
+}

package/dist/components/spinner/Spinner.vue

@@ -0,0 +1,156 @@
+<template>
+  <svg
+    data-testid="spinner"
+    class="spinner spinner-basic"
+    width="1em"
+    height="1em"
+    viewBox="0 0 19 19"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg">
+    <rect
+      class="spinner-basic__bar"
+      x="8.125"
+      width="2.5"
+      height="6.25"
+      rx="1.25"
+      fill="currentColor"
+      fill-opacity="60%">
+      <animate
+        attributeName="opacity"
+        values="1;0"
+        keyTimes="0;1"
+        dur="1s"
+        begin="0"
+        repeatCount="indefinite" />
+    </rect>
+    <rect
+      class="spinner-basic__bar"
+      x="15.1202"
+      y="1.86199"
+      width="2.5"
+      height="6.25"
+      rx="1.25"
+      transform="rotate(45 15.1202 1.86199)"
+      fill="currentColor"
+      fill-opacity="60%">
+      <animate
+        attributeName="opacity"
+        values="1;0"
+        keyTimes="0;1"
+        dur="1s"
+        begin="0.125s"
+        repeatCount="indefinite" />
+    </rect>
+    <rect
+      class="spinner-basic__bar"
+      x="18.75"
+      y="8.125"
+      width="2.5"
+      height="6.25"
+      rx="1.25"
+      transform="rotate(90 18.75 8.125)"
+      fill="currentColor"
+      fill-opacity="60%">
+      <animate
+        attributeName="opacity"
+        values="1;0"
+        keyTimes="0;1"
+        dur="1s"
+        begin="0.250s"
+        repeatCount="indefinite" />
+    </rect>
+    <rect
+      class="spinner-basic__bar"
+      x="16.888"
+      y="15.1202"
+      width="2.5"
+      height="6.25"
+      rx="1.25"
+      transform="rotate(135 16.888 15.1202)"
+      fill="currentColor"
+      fill-opacity="60%">
+      <animate
+        attributeName="opacity"
+        values="1;0"
+        keyTimes="0;1"
+        dur="1s"
+        begin="0.375s"
+        repeatCount="indefinite" />
+    </rect>
+    <rect
+      class="spinner-basic__bar"
+      x="8.125"
+      y="12.5"
+      width="2.5"
+      height="6.25"
+      rx="1.25"
+      fill="currentColor"
+      fill-opacity="60%">
+      <animate
+        attributeName="opacity"
+        values="1;0"
+        keyTimes="0;1"
+        dur="1s"
+        begin="0.500s"
+        repeatCount="indefinite" />
+    </rect>
+    <rect
+      class="spinner-basic__bar"
+      x="6.2814"
+      y="10.7008"
+      width="2.5"
+      height="6.25"
+      rx="1.25"
+      transform="rotate(45 6.2814 10.7008)"
+      fill="currentColor"
+      fill-opacity="60%">
+      <animate
+        attributeName="opacity"
+        values="1;0"
+        keyTimes="0;1"
+        dur="1s"
+        begin="0.625s"
+        repeatCount="indefinite" />
+    </rect>
+    <rect
+      class="spinner-basic__bar"
+      x="6.25"
+      y="8.125"
+      width="2.5"
+      height="6.25"
+      rx="1.25"
+      transform="rotate(90 6.25 8.125)"
+      fill="currentColor"
+      fill-opacity="60%">
+      <animate
+        attributeName="opacity"
+        values="1;0"
+        keyTimes="0;1"
+        dur="1s"
+        begin="0.750s"
+        repeatCount="indefinite" />
+    </rect>
+    <rect
+      class="spinner-basic__bar"
+      x="8.04917"
+      y="6.2814"
+      width="2.5"
+      height="6.25"
+      rx="1.25"
+      transform="rotate(135 8.04917 6.2814)"
+      fill="currentColor"
+      fill-opacity="60%">
+      <animate
+        attributeName="opacity"
+        values="1;0"
+        keyTimes="0;1"
+        dur="1s"
+        begin="0.875s"
+        repeatCount="indefinite" />
+    </rect>
+  </svg>
+</template>
+
+<script setup>
+
+</script>

package/dist/components/spinner/Spinner.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/spinner/SpinnerRing.vue

@@ -0,0 +1,34 @@
+<template>
+  <svg
+    data-testid="spinner"
+    class="spinner spinner--ring"
+    width="1em"
+    height="1em"
+    viewBox="0 0 18 18"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg">
+    <circle
+      cx="9"
+      cy="9"
+      r="8"
+      stroke-dasharray="50.2654825"
+      stroke-dashoffset="10"
+      stroke-linecap="round"
+      stroke-width="2px"
+      fill="transparent"
+      stroke="currentColor">
+      <animateTransform
+        attributeType="xml"
+        attributeName="transform"
+        type="rotate"
+        from="0 9 9"
+        to="360 9 9"
+        dur="1s"
+        repeatCount="indefinite" />
+    </circle>
+  </svg>
+</template>
+
+<script setup>
+
+</script>

package/dist/components/spinner/SpinnerRing.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/spinner/SpinnerRinggo.vue

@@ -0,0 +1,61 @@
+<template>
+  <svg
+    data-testid="spinner"
+    class="spinner spinner--ringgo"
+    width="1em"
+    height="1em"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg">
+    <circle
+      class="spinner-ringgo__track"
+      cx="9"
+      cy="9"
+      r="8"
+      fill="transparent"
+      stroke-width="2px"
+      stroke-opacity="10%"
+      stroke="currentColor" />
+    <g>
+      <circle
+        class="spinner-ringgo__ring"
+        cx="9"
+        cy="9"
+        r="8"
+        stroke-dasharray="50.2654825"
+        stroke-linecap="round"
+        stroke-width="2px"
+        fill="transparent"
+        stroke="currentColor">
+        <animate
+          attributeName="stroke-dashoffset"
+          values="45.2389342;5.02654825;45.2389342"
+          keyTimes="0;.5;1"
+          dur="1.5s"
+          repeatCount="indefinite"
+          calcMode="spline"
+          keySplines="0.4 0 0.2 1; 0.4 0 0.2 1" />
+        <animateTransform
+          attributeType="xml"
+          attributeName="transform"
+          type="rotate"
+          values="0 9 9;45 9 9;360 9 9"
+          dur="1.5s"
+          repeatCount="indefinite"
+          calcMode="spline"
+          keySplines="0.4 0 0.2 1; 0.4 0 0.2 1" />
+      </circle>
+      <animateTransform
+        attributeType="xml"
+        attributeName="transform"
+        type="rotate"
+        from="0 9 9"
+        to="360 9 9"
+        dur="2s"
+        repeatCount="indefinite" />
+    </g>
+  </svg>
+</template>
+
+<script setup>
+
+</script>

package/dist/components/spinner/SpinnerRinggo.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;