@privyid/persona 1.1.1 → 1.2.0

package/dist/components/signature-draw/SignatureDrawMobile.vue

@@ -55,136 +55,104 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { useWindowSize } from '@vueuse/core'
-import type {
-  PropType,
-  StyleValue,
-} from 'vue-demi'
+<script setup>
+import { useWindowSize } from "@vueuse/core";
 import {
   computed,
   ref,
-  watch,
-} from 'vue-demi'
-import Button from '../button/Button.vue'
-import { useVModel } from '../input'
-import SignatureDrawDesktop from './SignatureDrawDesktop.vue'
-import { replaceColor, rotateImage } from './utils/image'
-import IconEdit from '@privyid/persona-icon/vue/edit/20.vue'
-import { vPAspectRatio } from '../aspect-ratio'
-import type { ModelModifier } from '../dropzone'
-import { usePreview } from '../cropper'
-import { fromBase64 } from '../utils/base64'
-
+  watch
+} from "vue-demi";
+import Button from "../button/Button.vue";
+import { useVModel } from "../input";
+import SignatureDrawDesktop from "./SignatureDrawDesktop.vue";
+import { replaceColor, rotateImage } from "./utils/image";
+import IconEdit from "@privyid/persona-icon/vue/edit/20.vue";
+import { vPAspectRatio } from "../aspect-ratio";
+import { usePreview } from "../cropper";
+import { fromBase64 } from "../utils/base64";
 const props = defineProps({
   modelValue: {
-    type   : [String, globalThis.File],
-    default: '',
+    type: [String, globalThis.File],
+    default: ""
   },
   modelModifiers: {
-    type   : Object as PropType<ModelModifier>,
-    default: () => ({} as ModelModifier),
+    type: Object,
+    default: () => ({})
   },
   width: {
-    type   : Number,
-    default: 430,
+    type: Number,
+    default: 430
   },
   height: {
-    type   : Number,
-    default: 230,
+    type: Number,
+    default: 230
   },
   color: {
-    type   : String,
-    default: '#000000',
+    type: String,
+    default: "#000000"
   },
   placeholder: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   resetLabel: {
-    type   : String,
-    default: 'Reset',
+    type: String,
+    default: "Reset"
   },
   openDrawLabel: {
-    type   : String,
-    default: 'Click to Draw',
+    type: String,
+    default: "Click to Draw"
   },
   closeDrawLabel: {
-    type   : String,
-    default: 'Save',
-  },
-})
-
-const model    = useVModel(props)
-const preview  = usePreview(model, '')
-const rawModel = ref('')
-const isOpen   = ref(false)
-const screen   = useWindowSize()
-
+    type: String,
+    default: "Save"
+  }
+});
+const model = useVModel(props);
+const preview = usePreview(model, "");
+const rawModel = ref("");
+const isOpen = ref(false);
+const screen = useWindowSize();
 const mode = computed(() => {
-  return screen.width.value < props.width + 32 /* 2rem */
-    ? 'rotate'
-    : 'normal'
-})
-
+  return screen.width.value < props.width + 32 ? "rotate" : "normal";
+});
 const classNames = computed(() => {
-  const result: string[] = []
-
+  const result = [];
   if (mode.value)
-    result.push(`signature-draw--${mode.value}`)
-
-  return result
-})
-
+    result.push(`signature-draw--${mode.value}`);
+  return result;
+});
 const style = computed(() => {
   return {
-    width      : `${props.width}px`,
-    aspectRatio: `${props.width / props.height}`,
-  } as StyleValue
-})
-
-async function open () {
-  const result = preview.value && mode.value === 'rotate'
-    ? await rotateImage(preview.value, 90)
-    : preview.value
-
-  rawModel.value = result
-  isOpen.value   = true
+    width: `${props.width}px`,
+    aspectRatio: `${props.width / props.height}`
+  };
+});
+async function open() {
+  const result = preview.value && mode.value === "rotate" ? await rotateImage(preview.value, 90) : preview.value;
+  rawModel.value = result;
+  isOpen.value = true;
 }
-
-async function close () {
-  const result = rawModel.value && mode.value === 'rotate'
-    ? await rotateImage(rawModel.value, -90)
-    : rawModel.value
-
-  const value = props.modelModifiers.base64
-    ? result
-    : fromBase64(result)
-
-  // console.log('close', result, value)
-
-  model.value  = value
-  isOpen.value = false
+async function close() {
+  const result = rawModel.value && mode.value === "rotate" ? await rotateImage(rawModel.value, -90) : rawModel.value;
+  const value = props.modelModifiers.base64 ? result : fromBase64(result);
+  model.value = value;
+  isOpen.value = false;
 }
-
 watch(() => props.color, async (color) => {
   if (!isOpen.value && preview.value) {
-    const result = await replaceColor(preview.value, color)
-    const value  = props.modelModifiers.base64
-      ? result
-      : fromBase64(result)
-
-    model.value  = value
-    isOpen.value = false
+    const result = await replaceColor(preview.value, color);
+    const value = props.modelModifiers.base64 ? result : fromBase64(result);
+    model.value = value;
+    isOpen.value = false;
   }
-})
-
+});
 watch(isOpen, (value) => {
   if (value)
-    document.body.style.setProperty('overflow-y', 'hidden')
+    document.body.style.setProperty("overflow-y", "hidden");
   else
-    document.body.style.removeProperty('overflow-y')
-})
+    document.body.style.removeProperty("overflow-y");
+});
 </script>
 
 <style lang="postcss">

package/dist/components/signature-draw/SignatureDrawMobile.vue.d.ts

@@ -0,0 +1,94 @@
+import type { PropType } from 'vue-demi';
+import type { ModelModifier } from '../dropzone';
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").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;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    resetLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    openDrawLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeDrawLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").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;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    resetLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    openDrawLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeDrawLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    modelValue: string | File;
+    width: number;
+    height: number;
+    color: string;
+    placeholder: string;
+    modelModifiers: ModelModifier;
+    resetLabel: string;
+    openDrawLabel: string;
+    closeDrawLabel: string;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/signature-draw/__mocks__/canvas.d.ts

@@ -0,0 +1,5 @@
+export declare const replaceColor: import("vitest").Mock<any[], any>;
+export declare const drawLine: import("vitest").Mock<any[], any>;
+export declare const clearAll: import("vitest").Mock<any[], any>;
+export declare const placeImage: import("vitest").Mock<any[], any>;
+export declare const toDataURL: import("vitest").Mock<[], string>;

package/dist/components/signature-draw/__mocks__/canvas.mjs

@@ -0,0 +1,6 @@
+import { vi } from "vitest";
+export const replaceColor = vi.fn();
+export const drawLine = vi.fn();
+export const clearAll = vi.fn();
+export const placeImage = vi.fn();
+export const toDataURL = vi.fn(() => "data:image/png;base64,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");

package/dist/components/signature-draw/__mocks__/image.d.ts

@@ -0,0 +1,2 @@
+export declare const rotateImage: import("vitest").Mock<[url: string, degrees: number], Promise<string>>;
+export declare const replaceColor: import("vitest").Mock<[url: string, color: string], Promise<string>>;

package/dist/components/signature-draw/__mocks__/image.mjs

@@ -0,0 +1,3 @@
+import { vi } from "vitest";
+export const rotateImage = vi.fn(async (url, degrees) => `${url}___rotate(${degrees})`);
+export const replaceColor = vi.fn(async (url, color) => `${url}___color(${color})`);

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

@@ -0,0 +1,4 @@
+import type { Ref } from 'vue-demi';
+import type { DrawHooks } from '../utils/use-draw';
+export declare function useDraw(target: Ref<HTMLElement>, option?: DrawHooks): void;
+export declare function triggerDraw(): void;

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

@@ -0,0 +1,8 @@
+let hooks;
+export function useDraw(target, option) {
+  hooks = option;
+}
+export function triggerDraw() {
+  hooks.onstart({ pageX: 0, pageY: 0 });
+  hooks.onmove({ pageX: 50, pageY: 50 });
+}

package/dist/components/signature-draw/__mocks__/use-window-size.d.ts

@@ -0,0 +1,7 @@
+export declare const useWindowSize: import("vitest").Mock<[], {
+    width: import("vue-demi").Ref<number, number>;
+    height: import("vue-demi").Ref<number, number>;
+}>;
+export declare const useMediaQuery: import("vitest").Mock<[], import("vue-demi").Ref<boolean, boolean>>;
+export declare function setWindow(w: number, h: number): void;
+export declare function setMediaQuery(type: 'desktop' | 'mobile'): Promise<void>;

package/dist/components/signature-draw/__mocks__/use-window-size.mjs

@@ -0,0 +1,22 @@
+import { vi } from "vitest";
+import { nextTick, ref } from "vue-demi";
+const width = ref(375);
+const height = ref(667);
+const isDesktop = ref(true);
+export const useWindowSize = vi.fn(() => {
+  return {
+    width,
+    height
+  };
+});
+export const useMediaQuery = vi.fn(() => {
+  return isDesktop;
+});
+export function setWindow(w, h) {
+  width.value = w;
+  height.value = h;
+}
+export async function setMediaQuery(type) {
+  isDesktop.value = type === "desktop";
+  await nextTick();
+}

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

@@ -0,0 +1,167 @@
+---
+title: Signature Draw · Components
+description: Draw signature like using real pen
+---
+<script setup>
+  import pSignatureDraw from './SignatureDraw.vue'
+  import pButton from '../button/Button.vue'
+  import { ref } from 'vue-demi'
+  import { withBase } from 'vitepress'
+
+  const EMPTY_IMG = withBase('/assets/images/empty-img.png')
+
+  const result    = ref()
+  const resultB64 = ref()
+</script>
+
+# Signature Draw
+
+> Draw signature like using real pen
+
+## Usage
+
+### Simple Usage
+
+<preview>
+  <p-signature-draw />
+</preview>
+
+```vue
+<template>
+  <p-signature-draw />
+</template>
+```
+
+### for Initial
+
+<preview class="flex-col">
+  <p-signature-draw :width="230" />
+</preview>
+
+```vue
+<template>
+  <p-signature-draw :width="230" />
+</template>
+```
+
+## Placeholder
+
+<preview class="flex-col">
+  <p-signature-draw placeholder="Draw signature here" />
+</preview>
+
+```vue
+<template>
+  <p-signature-draw placeholder="Draw signature here" />
+</template>
+```
+## Color
+
+Set pen color with prop `color`, default is `#000000`
+
+<preview class="flex-col space-y-2">
+  <p-signature-draw color="#73185E" />
+</preview>
+
+```vue
+<template>
+  <p-signature-draw color="#73185E" />
+</template>
+```
+
+## Binding v-model
+
+You can bind the result of drawing's image with `v-model`
+
+<preview class="flex-col space-y-2">
+  <p-signature-draw v-model="result" />
+</preview>
+
+**result**
+
+<pre class="truncate"><code>{{ result }}</code></pre>
+
+```vue
+<template>
+  <p-signature-draw v-model="result" />
+</template>
+
+<script lang="ts" setup>
+const result = ref<File>()
+</script>
+```
+
+### Encode to base64
+
+By default, this component keep v-model value as [File][file] object.
+If you need [base64-dataURI][data-uri] format, you can add modifier `base64` to your `v-model`.
+
+<preview class="flex-col space-y-2">
+  <p-signature-draw v-model.base64="resultB64" />
+</preview>
+
+**result**
+
+<pre class="truncate"><code>{{ resultB64 || '-' }}</code></pre>
+<img class="mt-2 border border-default dark:border-dark-default bg-base-white" :src="resultB64 || EMPTY_IMG" width="430" height="230" alt="Result Image" />
+
+```vue
+<template>
+  <p-signature-draw v-model.base64="result" />
+</template>
+
+<script lang="ts" setup>
+const result = ref('')
+</script>
+```
+
+## API
+
+### Props
+
+| Props            |   Type   |     Default     | Description                                |
+|------------------|:--------:|:---------------:|--------------------------------------------|
+| `width`          | `Number` |      `430`      | Canvas's width                             |
+| `height`         | `Number` |      `230`      | Canvas's width                             |
+| `placeholder`    | `String` |       `-`       | Canvas's placeholder                       |
+| `color`          | `String` |    `#000000`    | Pencil color                               |
+| `modelValue`     | `String` |       `-`       | Result of draw image                       |
+| `resetLabel`     | `String` |     `Reset`     | Reset button's label                       |
+| `openDrawLabel`  | `String` | `Click to Draw` | Start draw button's label (in mobile-view) |
+| `closeDrawLabel` | `String` |     `Save`      | Save draw button's label (in mobile-view)  |
+
+### 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>
+
+[file]: https://developer.mozilla.org/en-US/docs/Web/API/File
+[data-uri]: https://en.wikipedia.org/wiki/Data_URI_scheme

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

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

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

@@ -0,0 +1,53 @@
+import { SmoothLine, createLines } from "./smooth-line.mjs";
+describe("SmoothLine", () => {
+  it("should be able to smoothing the line", () => {
+    const coordinates = [
+      2,
+      3,
+      5,
+      7,
+      11,
+      13,
+      17,
+      19,
+      23,
+      29,
+      31,
+      37,
+      41,
+      43,
+      47,
+      53
+    ];
+    const expected = [
+      0.145,
+      0.4571124999999999,
+      1.0127534062499999,
+      1.849668441328125,
+      3.1198308797634766,
+      4.757010908846254,
+      6.831583139039916,
+      9.217858228349925,
+      11.947112946544314,
+      15.162156928610782,
+      18.64130743828469,
+      22.494696768522633,
+      26.630038517227252,
+      30.814983492539124,
+      35.02248229643114,
+      39.3762889627616
+    ];
+    const line = new SmoothLine(0.5);
+    const output = coordinates.map((num) => {
+      return line.move(num, num).at(2);
+    });
+    expect(output).toStrictEqual(expected);
+  });
+});
+describe("createLines", () => {
+  it("should be able create array of lines n-times", () => {
+    const lines = createLines(10);
+    const isSmoothLine = (item) => item instanceof SmoothLine;
+    expect(lines).toSatisfyAll(isSmoothLine);
+  });
+});

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

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