@privyid/persona 0.3.0

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

@@ -0,0 +1,22 @@
+export class StraightLine {
+  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 { Ref } from 'vue-demi';
+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,24 @@
+import { throttle } from "lodash-es";
+import {
+  onBeforeUnmount,
+  onMounted
+} from "vue-demi";
+export default function useDraw(target, hooks) {
+  onMounted(async () => {
+    if (target.value) {
+      const { default: Interact } = await import("interactjs");
+      const onmove = throttle(hooks.onmove, 1e3 / 120);
+      Interact(target.value).styleCursor(false).draggable({
+        origin: "self",
+        inertia: { enabled: true, resistance: 10 },
+        onstart: hooks.onstart,
+        onmove,
+        onend: onmove
+      });
+    }
+  });
+  onBeforeUnmount(async () => {
+    const { default: Interact } = await import("interactjs");
+    Interact(target.value).unset();
+  });
+}

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

@@ -0,0 +1,104 @@
+<template>
+  <img
+    data-testid="signature-text"
+    class="signature--text"
+    :width="width"
+    :height="height"
+    :src="src">
+</template>
+
+<script>
+import {
+  ref,
+  computed,
+  defineComponent,
+  onMounted,
+  watch
+} from "vue-demi";
+import { useVModel } from "../input/use-input";
+import { createSpinner } from "../avatar/utils/create-image";
+import { formatName } from "./utils/formatter";
+import generate from "./utils/generate-text";
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: void 0
+    },
+    width: {
+      type: Number,
+      default: 430
+    },
+    height: {
+      type: Number,
+      default: 230
+    },
+    text: {
+      type: String,
+      default: ""
+    },
+    limit: {
+      type: Number,
+      default: 2
+    },
+    font: {
+      type: String,
+      default: "Herr Von Muellerhoff"
+    },
+    color: {
+      type: String,
+      default: "#000000"
+    }
+  },
+  setup(props) {
+    const ready = ref(false);
+    const model = useVModel(props);
+    const src = computed(() => {
+      if (!ready.value)
+        return createSpinner(props.width, props.height);
+      return model.value;
+    });
+    const name = computed(() => {
+      if (!props.text)
+        return "- No Image -";
+      return formatName(
+        String(props.text).split(" ").filter(Boolean).slice(0, props.limit).join(" ")
+      );
+    });
+    watch(() => [
+      props.text,
+      props.font,
+      props.color,
+      props.width,
+      props.height,
+      props.limit
+    ], () => {
+      load();
+    });
+    onMounted(() => {
+      load();
+    });
+    function load() {
+      ready.value = false;
+      const options = {
+        text: name.value,
+        font: props.font,
+        width: props.width,
+        height: props.height,
+        color: props.color
+      };
+      generate(options).then((base64Encoded) => {
+        model.value = base64Encoded;
+        ready.value = true;
+      }).catch(console.error);
+    }
+    return { src };
+  }
+});
+</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,70 @@
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: StringConstructor;
+        default: any;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    limit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    font: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    src: import("vue-demi").ComputedRef<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;
+        default: any;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    limit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    font: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    color: string;
+    modelValue: string;
+    font: string;
+    width: number;
+    height: number;
+    text: string;
+    limit: number;
+}>;
+export default _default;

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

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

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

@@ -0,0 +1,8 @@
+export function capitalize(text) {
+  return String(text).toLowerCase().replace(/^\w|([\s,.])(\w)/gm, (i) => i.toUpperCase());
+}
+export function formatName(text) {
+  if (!text)
+    return "";
+  return capitalize(String(text).trim().replace(/[^\s,.A-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): Promise<string>;

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

@@ -0,0 +1,33 @@
+import loadFont from "./load-font.mjs";
+function createCanvas(width, height) {
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  return canvas;
+}
+export default async function generate(options) {
+  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);
+  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,14 @@
+export default async function loadFont(font) {
+  const WebFont = await import("webfontloader");
+  return await new Promise((resolve, reject) => {
+    WebFont.load({
+      google: { families: [font] },
+      fontactive() {
+        resolve();
+      },
+      fontinactive() {
+        reject(new Error("FONTLOADER_TIMEOUT"));
+      }
+    });
+  });
+}

package/dist/components/spinner/Spinner.vue

@@ -0,0 +1,141 @@
+<template>
+  <svg
+    data-testid="spinner"
+    class="spinner"
+    width="19"
+    height="19"
+    viewBox="0 0 19 19"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <rect
+      x="8.125"
+      width="2.5"
+      height="6.25"
+      rx="1.25"
+      fill="#80858E">
+      <animate
+        attributeName="opacity"
+        values="1;0"
+        keyTimes="0;1"
+        dur="1s"
+        begin="0"
+        repeatCount="indefinite" />
+    </rect>
+    <rect
+      x="15.1202"
+      y="1.86199"
+      width="2.5"
+      height="6.25"
+      rx="1.25"
+      transform="rotate(45 15.1202 1.86199)"
+      fill="#80858E">
+      <animate
+        attributeName="opacity"
+        values="1;0"
+        keyTimes="0;1"
+        dur="1s"
+        begin="0.125s"
+        repeatCount="indefinite" />
+    </rect>
+    <rect
+      x="18.75"
+      y="8.125"
+      width="2.5"
+      height="6.25"
+      rx="1.25"
+      transform="rotate(90 18.75 8.125)"
+      fill="#80858E">
+      <animate
+        attributeName="opacity"
+        values="1;0"
+        keyTimes="0;1"
+        dur="1s"
+        begin="0.250s"
+        repeatCount="indefinite" />
+    </rect>
+    <rect
+      x="16.888"
+      y="15.1202"
+      width="2.5"
+      height="6.25"
+      rx="1.25"
+      transform="rotate(135 16.888 15.1202)"
+      fill="#80858E">
+      <animate
+        attributeName="opacity"
+        values="1;0"
+        keyTimes="0;1"
+        dur="1s"
+        begin="0.375s"
+        repeatCount="indefinite" />
+    </rect>
+    <rect
+      x="8.125"
+      y="12.5"
+      width="2.5"
+      height="6.25"
+      rx="1.25"
+      fill="#80858E">
+      <animate
+        attributeName="opacity"
+        values="1;0"
+        keyTimes="0;1"
+        dur="1s"
+        begin="0.500s"
+        repeatCount="indefinite" />
+    </rect>
+    <rect
+      x="6.2814"
+      y="10.7008"
+      width="2.5"
+      height="6.25"
+      rx="1.25"
+      transform="rotate(45 6.2814 10.7008)"
+      fill="#80858E">
+      <animate
+        attributeName="opacity"
+        values="1;0"
+        keyTimes="0;1"
+        dur="1s"
+        begin="0.625s"
+        repeatCount="indefinite" />
+    </rect>
+    <rect
+      x="6.25"
+      y="8.125"
+      width="2.5"
+      height="6.25"
+      rx="1.25"
+      transform="rotate(90 6.25 8.125)"
+      fill="#80858E">
+      <animate
+        attributeName="opacity"
+        values="1;0"
+        keyTimes="0;1"
+        dur="1s"
+        begin="0.750s"
+        repeatCount="indefinite" />
+    </rect>
+    <rect
+      x="8.04917"
+      y="6.2814"
+      width="2.5"
+      height="6.25"
+      rx="1.25"
+      transform="rotate(135 8.04917 6.2814)"
+      fill="#80858E">
+      <animate
+        attributeName="opacity"
+        values="1;0"
+        keyTimes="0;1"
+        dur="1s"
+        begin="0.875s"
+        repeatCount="indefinite" />
+    </rect>
+  </svg>
+</template>
+
+<script>
+import { defineComponent } from "vue-demi";
+export default defineComponent({});
+</script>

package/dist/components/spinner/Spinner.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue-demi").DefineComponent<{}, {}, {}, {}, {}, 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/spinner/SpinnerRing.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg
+    data-testid="spinner"
+    class="spinner spinner-ring"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M9 0.899999C9 0.402944 9.40397 -0.00466579 9.89855 0.044952C11.6574 0.221416 13.3328 0.913059 14.7095 2.04291C16.3191 3.36384 17.4209 5.202 17.8271 7.24419C18.2333 9.28637 17.9188 11.4062 16.9373 13.2426C15.9558 15.0789 14.3679 16.5181 12.4442 17.3149C10.5205 18.1117 8.37998 18.2169 6.38744 17.6125C4.3949 17.008 2.67358 15.7314 1.51677 14.0001C0.359967 12.2688 -0.160754 10.19 0.0433369 8.11785C0.217904 6.34544 0.913508 4.6717 2.03245 3.3032C2.34708 2.91839 2.92096 2.92096 3.27243 3.27244C3.62391 3.62391 3.61869 4.19076 3.31378 4.58331C2.4843 5.6512 1.96839 6.93655 1.83467 8.29428C1.6714 9.95201 2.08797 11.6151 3.01342 13.0001C3.93886 14.3851 5.31592 15.4064 6.90995 15.89C8.50398 16.3735 10.2164 16.2894 11.7553 15.6519C13.2943 15.0145 14.5646 13.8631 15.3498 12.3941C16.1351 10.925 16.3866 9.2291 16.0617 7.59535C15.7367 5.9616 14.8553 4.49107 13.5676 3.43432C12.513 2.56882 11.2393 2.02475 9.89769 1.85617C9.40451 1.7942 9 1.39706 9 0.899999Z"
+      fill="black">
+      <animateTransform
+        attributeType="xml"
+        attributeName="transform"
+        type="rotate"
+        from="0 9 9"
+        to="360 9 9"
+        dur="1s"
+        repeatCount="indefinite" />
+    </path>
+  </svg>
+</template>
+
+<script>
+import { defineComponent } from "vue-demi";
+export default defineComponent({});
+</script>

package/dist/components/spinner/SpinnerRing.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue-demi").DefineComponent<{}, {}, {}, {}, {}, 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/subheading/Subheading.vue

@@ -0,0 +1,66 @@
+<template>
+  <p
+    data-testid="subheading"
+    :class="classNames">
+    <slot />
+  </p>
+</template>
+
+<script>
+import {
+  defineComponent,
+  computed
+} from "vue-demi";
+export default defineComponent({
+  props: {
+    size: {
+      type: String,
+      default: "md"
+    },
+    overline: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const classNames = computed(() => {
+      const result = ["subheading"];
+      if (props.overline)
+        result.push(`subheading--overline-${props.overline}`);
+      else if (props.size)
+        result.push(`subheading--${props.size}`);
+      return result;
+    });
+    return { classNames };
+  }
+});
+</script>
+
+<style lang="postcss">
+.subheading {
+  @apply m-0 uppercase tracking-[.009375rem];
+
+  &.subheading--md {
+    @apply text-base font-medium leading-tight;
+  }
+
+  &.subheading--sm {
+    @apply text-sm font-medium leading-[1.28];
+  }
+
+  &.subheading--overline {
+    &-normal,
+    &-medium {
+      @apply text-[0.6875rem] leading-[1.4] tracking-[0.09375rem];
+    }
+
+    &-normal {
+      @apply font-normal;
+    }
+
+    &-medium {
+      @apply font-medium;
+    }
+  }
+}
+</style>

package/dist/components/subheading/Subheading.vue.d.ts

@@ -0,0 +1,28 @@
+import { PropType } from 'vue-demi';
+declare type SizeVariant = 'sm' | 'md';
+declare type OverlineVariant = 'normal' | 'medium';
+declare const _default: import("vue-demi").DefineComponent<{
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    overline: {
+        type: PropType<OverlineVariant>;
+        default: any;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<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<{
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    overline: {
+        type: PropType<OverlineVariant>;
+        default: any;
+    };
+}>>, {
+    size: SizeVariant;
+    overline: OverlineVariant;
+}>;
+export default _default;