@privyid/persona 1.2.0 → 1.2.1

package/dist/components/signature-text/index.md

@@ -1,202 +0,0 @@
----
-title: Signature Text · Components
-description: Generate text to signature image
----
-
-<script setup>
-  import pInput from '../input/Input.vue'
-  import pSignatureText from './SignatureText.vue'
-  import { ref } from 'vue-demi'
-
-  const result    = ref()
-  const resultB64 = ref()
-</script>
-
-# Signature Text
-
-> Generate text to signature image
-
-## Usage
-
-### Simple Usage
-
-<preview class="flex-col !bg-base-white">
-  <p-signature-text text="Lorem Ipsum" />
-</preview>
-
-```vue
-<template>
-  <p-signature-text text="Lorem Ipsum" />
-</template>
-```
-
-### for Initial
-
-<preview class="flex-col !bg-base-white">
-  <p-signature-text text="Lorem Ipsum" :width="230" :limit="1" />
-</preview>
-
-```vue
-<template>
-  <p-signature-text text="Lorem Ipsum" :width="230" :limit="1" />
-</template>
-```
-
-## Change Font
-
-You can the font using prop `font`, it importing font from [Google Font][google-font], default is `Herr Von Muellerhoff`
-
-<preview class="flex-col !bg-base-white">
-  <p-signature-text text="Lorem Ipsum" font="Herr Von Muellerhoff"/>
-  <p-signature-text text="Lorem Ipsum" font="Satisfy"/>
-</preview>
-
-```vue
-<template>
-  <p-signature-text text="Lorem Ipsum" font="Herr Von Muellerhoff"/>
-  <p-signature-text text="Lorem Ipsum" font="Satisfy"/>
-</template>
-```
-
-## Max Words
-
-Limit the text word using `maxwords`, default is `2`
-
-<preview class="flex-col !bg-base-white">
-  <p-signature-text text="Lorem ipsum dolor sit amet" maxwords="3" />
-  <p-signature-text text="Lorem ipsum dolor sit amet" maxwords="2" />
-  <p-signature-text text="Lorem ipsum dolor sit amet" maxwords="1" />
-</preview>
-
-```vue
-<template>
-  <p-signature-text text="Lorem ipsum dolor sit amet" maxwords="3" />
-  <p-signature-text text="Lorem ipsum dolor sit amet" maxwords="2" />
-  <p-signature-text text="Lorem ipsum dolor sit amet" maxwords="1" />
-</template>
-```
-
-## Max Length
-
-Limit the text length using `maxlength`, default is `50`
-
-<preview class="flex-col !bg-base-white">
-  <p-signature-text text="Lorem Aaaaaaaaaaaaaaaaaaaaaaaaaaaaa" maxlength="15" />
-</preview>
-
-```vue
-<template>
-  <p-signature-text text="Lorem Aaaaaaaaaaaaaaaaaaaaaaaaaaaaa" maxlength="15" />
-</template>
-```
-
-## Color
-
-<preview class="flex-col !bg-base-white">
-  <p-signature-text text="Lorem ipsum" color="#004C9D" />
-  <p-signature-text text="Lorem ipsum" color="#23B242" />
-  <p-signature-text text="Lorem ipsum" color="#E42E2C" />
-</preview>
-
-```vue
-<template>
-  <p-signature-text text="Lorem ipsum" color="#004C9D" />
-  <p-signature-text text="Lorem ipsum" color="#23B242" />
-  <p-signature-text text="Lorem ipsum" color="#E42E2C" />
-</template>
-```
-
-## Binding v-model
-
-You can bind the generated result with `v-model`.
-
-<preview class="flex-col !bg-base-white">
-  <p-signature-text text="Lorem ipsum" v-model="result" />
-</preview>
-
-```vue
-<template>
-  <p-signature-text v-model="result" />
-</template>
-
-<script lang="ts" setup>
-const result = ref<File>()
-</script>
-```
-
-**result**
-
-<pre class="truncate"><code>{{ result }}</code></pre>
-
-### Encode to base64
-
-If you prefer [base64-dataURI][data-uri] format, add modifier `.base64` to your `v-model`.
-
-<preview class="flex-col !bg-base-white">
-  <p-signature-text text="Lorem ipsum" v-model.base64="resultB64" />
-</preview>
-
-**result**
-
-<pre class="truncate"><code>{{ resultB64 }}</code></pre>
-
-```vue
-<template>
-  <p-signature-text text="Lorem ipsum" v-model.base64="result" />
-</template>
-
-<script lang="ts" setup>
-const result = ref('')
-</script>
-```
-
-## API
-
-### Props
-
-| Props        |   Type   |        Default         | Description                                         |
-|--------------|:--------:|:----------------------:|-----------------------------------------------------|
-| `width`      | `Number` |         `430`          | Image's width                                       |
-| `height`     | `Number` |         `230`          | Image's width                                       |
-| `text`       | `String` |          `-`           | Image's text                                        |
-| `maxwords`   | `Number` |          `2`           | Maximal word to be generated                        |
-| `maxlength`  | `Number` |          `50`          | Maximal text length                                 |
-| `font`       | `String` | `Herr Von Muellerhoff` | Text font, imported from [Google Font][google-font] |
-| `color`      | `String` |       `#000000`        | Text color                                          |
-| `modelValue` | `String` |          `-`           | Result of generated image                           |
-
-### Slots
-
-<table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td colspan="2" class="text-center">There no slots here</td>
-    </tr>
-  </tbody>
-</table>
-
-### Events
-
-<table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Arguments</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td colspan="3" class="text-center">There no props here</td>
-    </tr>
-  </tbody>
-</table>
-
-[google-font]: https://fonts.google.com/
-[data-uri]: https://en.wikipedia.org/wiki/Data_URI_scheme

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

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

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

@@ -1,8 +0,0 @@
-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/formatter.spec.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,29 +0,0 @@
-import { expect } from "vitest";
-import { capitalize, formatName } from "./formatter.mjs";
-describe("capitalize", () => {
-  const cases = [
-    ["hello world", "Hello World"],
-    ["HELLO WORLD", "Hello World"],
-    ["HeLLO wORLD", "Hello World"],
-    ["HeLLO wORLD   ", "Hello World   "],
-    ["HeLLO wORLD   ", "Hello World   "],
-    ["HeLLO    wORLD", "Hello    World"],
-    ["   HeLLO wORLD", "   Hello World"]
-  ];
-  it.each(cases)("should be able to convert %s to %s", (input, expected) => {
-    expect(capitalize(input)).toBe(expected);
-  });
-});
-describe("formatName", () => {
-  it("should capitalize the text", () => {
-    expect(formatName("hello world")).toBe("Hello World");
-    expect(formatName("hellO woRld")).toBe("Hello World");
-    expect(formatName("HELLO WORLD")).toBe("Hello World");
-  });
-  it("should return empty text if input is undefined", () => {
-    expect(formatName(void 0)).toBe("");
-  });
-  it("should remove non alphabet character (except: dot, colon, space)", () => {
-    expect(formatName("M. Rif'an Ade")).toBe("M. Rifan Ade");
-  });
-});

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

@@ -1,8 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

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

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

@@ -1,22 +0,0 @@
-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.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/spinner/Spinner.spec.mjs

@@ -1,11 +0,0 @@
-import { render } from "@testing-library/vue";
-import Spinner from "./Spinner.vue";
-it("should render properly without any props", () => {
-  const screen = render({
-    components: { Spinner },
-    template: "<Spinner />"
-  });
-  const spinner = screen.getByTestId("spinner");
-  expect(spinner).toBeInTheDocument();
-  expect(spinner).toHaveClass("spinner", "spinner-basic");
-});

package/dist/components/spinner/Spinner.vue

@@ -1,156 +0,0 @@
-<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

@@ -1,2 +0,0 @@
-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.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/spinner/SpinnerRing.spec.mjs

@@ -1,11 +0,0 @@
-import { render } from "@testing-library/vue";
-import Spinner from "./SpinnerRing.vue";
-it("should render properly without any props", () => {
-  const screen = render({
-    components: { Spinner },
-    template: "<Spinner />"
-  });
-  const spinner = screen.getByTestId("spinner");
-  expect(spinner).toBeInTheDocument();
-  expect(spinner).toHaveClass("spinner", "spinner--ring");
-});

package/dist/components/spinner/SpinnerRing.vue

@@ -1,34 +0,0 @@
-<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

@@ -1,2 +0,0 @@
-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.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/spinner/SpinnerRinggo.spec.mjs

@@ -1,11 +0,0 @@
-import { render } from "@testing-library/vue";
-import Spinner from "./SpinnerRinggo.vue";
-it("should render properly without any props", () => {
-  const screen = render({
-    components: { Spinner },
-    template: "<Spinner />"
-  });
-  const spinner = screen.getByTestId("spinner");
-  expect(spinner).toBeInTheDocument();
-  expect(spinner).toHaveClass("spinner", "spinner--ringgo");
-});

package/dist/components/spinner/SpinnerRinggo.vue

@@ -1,61 +0,0 @@
-<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

@@ -1,2 +0,0 @@
-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;