@privyid/persona 1.2.1 → 1.2.2-dev.2

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

@@ -0,0 +1,148 @@
+<template>
+  <div
+    class="signature-draw signature-draw--desktop"
+    data-testid="signature-draw-desktop">
+    <canvas
+      ref="canvas"
+      class="signature-draw__canvas"
+      data-testid="signature-draw-canvas"
+      :width="width"
+      :height="height" />
+    <Caption
+      v-if="isBlank"
+      class="signature-draw__placeholder"
+      data-testid="signature-draw-placeholder">
+      {{ placeholder }}
+    </Caption>
+    <div
+      v-if="!isBlank"
+      class="signature-draw__control">
+      <Button
+        data-testid="signature-draw-reset"
+        variant="link"
+        size="xs"
+        class="signature-draw__reset"
+        pill
+        @click="reset()">
+        <span>{{ resetLabel }}</span>
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  onMounted,
+  ref,
+  watch
+} from "vue";
+import {
+  clearAll,
+  drawLine,
+  placeImage,
+  replaceColor,
+  toDataURL
+} from "./utils/canvas";
+import useDraw from "./utils/use-draw";
+import { useVModel } from "../input";
+import { createLines } from "./utils/smooth-line";
+import Caption from "../caption/Caption.vue";
+import Button from "../button/Button.vue";
+import { usePreview } from "../cropper";
+import { fromBase64 } from "../utils/base64";
+const props = defineProps({
+  modelValue: {
+    type: [String, globalThis.File],
+    default: ""
+  },
+  modelModifiers: {
+    type: Object,
+    default: () => ({})
+  },
+  width: {
+    type: Number,
+    default: 430
+  },
+  height: {
+    type: Number,
+    default: 230
+  },
+  color: {
+    type: String,
+    default: "#000000"
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  resetLabel: {
+    type: String,
+    default: "Reset"
+  }
+});
+const model = useVModel(props);
+const preview = usePreview(model, "");
+const isBlank = ref(true);
+const canvas = ref();
+const lines = createLines(15);
+function reset() {
+  clearAll(canvas.value);
+  isBlank.value = true;
+  model.value = "";
+}
+function setColor(color) {
+  if (!isBlank.value) {
+    replaceColor(canvas.value, color);
+    const result = toDataURL(canvas.value);
+    const value = props.modelModifiers.base64 ? result : fromBase64(result);
+    model.value = value;
+  }
+}
+watch(() => props.color, setColor);
+useDraw(canvas, {
+  onstart(event) {
+    for (const line of lines)
+      line.start(event.pageX, event.pageY);
+  },
+  onmove(event) {
+    for (const line of lines) {
+      const coordinate = line.move(event.pageX, event.pageY);
+      const options = { color: props.color };
+      drawLine(canvas.value, coordinate, options);
+    }
+    const result = toDataURL(canvas.value);
+    const value = props.modelModifiers.base64 ? result : fromBase64(result);
+    isBlank.value = false;
+    model.value = value;
+  }
+});
+onMounted(() => {
+  if (model.value && preview.value) {
+    placeImage(canvas.value, preview.value);
+    isBlank.value = false;
+  }
+});
+</script>
+
+<style lang="postcss">
+  .signature-draw {
+    @apply relative inline-block;
+
+    &--desktop {
+      .signature-draw__canvas {
+        @apply bg-default touch-none cursor-crosshair border rounded border-dashed;
+      }
+    }
+
+    &__placeholder {
+      @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none text-center text-muted;
+    }
+
+    &__reset {
+      @apply absolute right-1 top-1 bg-default;
+      &.btn--variant-link.btn--default {
+        @apply dark:text-dark-subtlest hover:dark:text-dark-on-emphasis;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,76 @@
+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;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    resetLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, 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;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    resetLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    modelValue: string | File;
+    width: number;
+    height: number;
+    color: string;
+    placeholder: string;
+    modelModifiers: ModelModifier;
+    resetLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,212 @@
+<template>
+  <div
+    v-p-aspect-ratio="width / height"
+    class="signature-draw signature-draw--mobile"
+    data-testid="signature-draw-mobile"
+    :class="classNames"
+    :style="style">
+    <div class="signature-draw__preview">
+      <template v-if="model">
+        <img
+          :src="preview"
+          alt="signature-draw-preview"
+          data-testid="signature-draw-preview"
+          @click="open()">
+        <Button
+          variant="link"
+          size="xs"
+          class="signature-draw__reset"
+          data-testid="signature-draw-edit"
+          icon
+          @click="open()">
+          <IconEdit />
+        </Button>
+      </template>
+      <template v-else>
+        <Button
+          data-testid="signature-draw-open"
+          @click="open()">
+          {{ openDrawLabel }}
+        </Button>
+      </template>
+    </div>
+    <transition name="zoom-in">
+      <div
+        v-if="isOpen"
+        class="signature-draw__modal"
+        data-testid="signature-draw-modal">
+        <SignatureDrawDesktop
+          v-model.base64="rawModel"
+          :class="classNames"
+          :placeholder="placeholder"
+          :color="color"
+          :width="mode === 'rotate' ? height : width"
+          :height="mode === 'rotate' ? width : height"
+          :reset-label="resetLabel" />
+        <Button
+          class="signature-draw__close"
+          nganu="1311"
+          data-testid="signature-draw-close"
+          @click="close()">
+          <span>{{ closeDrawLabel }}</span>
+        </Button>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { useWindowSize } from "@vueuse/core";
+import {
+  computed,
+  ref,
+  watch
+} from "vue";
+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: ""
+  },
+  modelModifiers: {
+    type: Object,
+    default: () => ({})
+  },
+  width: {
+    type: Number,
+    default: 430
+  },
+  height: {
+    type: Number,
+    default: 230
+  },
+  color: {
+    type: String,
+    default: "#000000"
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  resetLabel: {
+    type: String,
+    default: "Reset"
+  },
+  openDrawLabel: {
+    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();
+const mode = computed(() => {
+  return screen.width.value < props.width + 32 ? "rotate" : "normal";
+});
+const classNames = computed(() => {
+  const result = [];
+  if (mode.value)
+    result.push(`signature-draw--${mode.value}`);
+  return result;
+});
+const style = computed(() => {
+  return {
+    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);
+  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;
+  }
+});
+watch(isOpen, (value) => {
+  if (value)
+    document.body.style.setProperty("overflow-y", "hidden");
+  else
+    document.body.style.removeProperty("overflow-y");
+});
+</script>
+
+<style lang="postcss">
+  .signature-draw {
+    &--mobile {
+      @apply border rounded border-dashed max-w-full text-center flex items-center justify-center bg-default;
+    }
+
+    &__modal {
+      @apply fixed w-full h-full top-0 left-0 bg-default z-50 flex items-center justify-center flex-col p-5;
+      @apply dark:bg-dark-default;
+    }
+
+    &__close {
+      @apply mt-4;
+    }
+
+    &--rotate {
+      .signature-draw__close {
+        @apply mr-4 mt-0;
+      }
+
+      .signature-draw__modal {
+        @apply flex-col-reverse;
+
+        &,
+        & * {
+          @apply vertical-lr;
+        }
+
+        .signature-draw__reset {
+          @apply bottom-1 top-auto;
+        }
+
+        .btn--xs {
+          @apply py-2 px-1 pi-1;
+        }
+
+        .btn--md {
+          @apply py-5 px-3 pi-3;
+        }
+      }
+    }
+
+    &__preview {
+      @apply w-full flex items-center justify-center;
+
+      .btn--variant-solid.btn--default {
+        @apply dark:text-dark-subtlest hover:dark:text-dark-on-emphasis;
+      }
+
+      & > img {
+        @apply w-full h-full;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,94 @@
+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;
+    };
+    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").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, 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;
+    };
+    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").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,41 @@
+/**
+ * Create canvas element
+ * @param width width
+ * @param height height
+ */
+export declare function createCanvas(width: number, height: number, dpi?: number): HTMLCanvasElement;
+/**
+ * Fill and replace color of image
+ * @param canvas Target canvas
+ * @param color new Color
+ */
+export declare function replaceColor(canvas: HTMLCanvasElement, color: string): void;
+export interface DrawLineOptions {
+    color?: string;
+    lineSize?: number;
+    lineJoin?: CanvasLineJoin;
+    lineCap?: CanvasLineCap;
+}
+export type DrawLineCoordinate = [number, number, number, number];
+/**
+ *
+ * @param canvas Target canvas
+ * @param coordinate line coordinate, format is [x0, y0, x1, y1]
+ * @param options line options
+ * @example
+ *
+ * drawLine(canvas, [0,0,50,50], { color: '#e4e4e4' })
+ */
+export declare function drawLine(canvas: HTMLCanvasElement, coordinate: DrawLineCoordinate, options?: DrawLineOptions): void;
+/**
+ * Clear and reset canvas
+ * @param canvas Target Canvas
+ */
+export declare function clearAll(canvas: HTMLCanvasElement): void;
+/**
+ * Load and place to image to canvas
+ * @param canvas Target canvas
+ * @param url Image url
+ */
+export declare function placeImage(canvas: HTMLCanvasElement, url: string): Promise<void>;
+export declare function toDataURL(canvas: HTMLCanvasElement, ...args: Parameters<HTMLCanvasElement['toDataURL']>): string;

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

@@ -0,0 +1,55 @@
+import defu from "defu";
+import loadImage from "../../avatar/utils/load-image.mjs";
+import { toRGB } from "../../utils/color.mjs";
+export function createCanvas(width, height, dpi = 1) {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  canvas.width = width * dpi;
+  canvas.height = height * dpi;
+  context.scale(dpi, dpi);
+  return canvas;
+}
+export function replaceColor(canvas, color) {
+  const context = canvas.getContext("2d");
+  const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
+  const pixels = imgData.data;
+  const rgb = toRGB(color);
+  for (let i = 0; i < pixels.length; i += 4) {
+    if (pixels[i + 3] > 0) {
+      pixels[i] = rgb.R;
+      pixels[i + 1] = rgb.G;
+      pixels[i + 2] = rgb.B;
+    }
+  }
+  context.putImageData(imgData, 0, 0);
+}
+export function drawLine(canvas, coordinate, options) {
+  const context = canvas.getContext("2d");
+  const style = defu(options, {
+    color: "#000000",
+    lineSize: 2.5,
+    lineCap: "round",
+    lineJoin: "round"
+  });
+  context.strokeStyle = style.color;
+  context.lineWidth = style.lineSize;
+  context.lineJoin = style.lineJoin;
+  context.lineCap = style.lineCap;
+  context.beginPath();
+  context.moveTo(coordinate[0], coordinate[1]);
+  context.lineTo(coordinate[2], coordinate[3]);
+  context.stroke();
+}
+export function clearAll(canvas) {
+  const context = canvas.getContext("2d");
+  context.clearRect(0, 0, canvas.width, canvas.height);
+}
+export async function placeImage(canvas, url) {
+  const context = canvas.getContext("2d");
+  const image = await loadImage(url);
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.drawImage(image, 0, 0);
+}
+export function toDataURL(canvas, ...args) {
+  return canvas.toDataURL(...args);
+}

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

@@ -0,0 +1,7 @@
+/**
+ * Rotate base64 image
+ * @param url base64 url
+ * @param degrees rotate degress
+ */
+export declare function rotateImage(url: string, degrees: number): Promise<string>;
+export declare function replaceColor(url: string, color: string): Promise<string>;

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

@@ -0,0 +1,23 @@
+import loadImage from "../../avatar/utils/load-image.mjs";
+import { replaceColor as canvasReplaceColor } from "./canvas.mjs";
+export async function rotateImage(url, degrees) {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  const image = await loadImage(url);
+  canvas.width = degrees % 180 === 0 ? image.width : image.height;
+  canvas.height = degrees % 180 === 0 ? image.height : image.width;
+  context.translate(canvas.width / 2, canvas.height / 2);
+  context.rotate(degrees * Math.PI / 180);
+  context.drawImage(image, image.width / -2, image.height / -2);
+  return canvas.toDataURL();
+}
+export async function replaceColor(url, color) {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  const image = await loadImage(url);
+  canvas.width = image.width;
+  canvas.height = image.height;
+  context.drawImage(image, 0, 0);
+  canvasReplaceColor(canvas, color);
+  return canvas.toDataURL();
+}

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

@@ -0,0 +1,36 @@
+import type { DrawLineCoordinate } from './canvas';
+/**
+ * Smoothing Line for Signature Draw
+ *
+ * Originally taken from [SignatureMark's stroke](https://github.com/motdotla/signature-mark/blob/master/src/signature-mark/stroke.js)
+ */
+export declare class SmoothLine {
+    protected lastX: number;
+    protected lastY: number;
+    protected movingX: number;
+    protected movingY: number;
+    protected smoother: number;
+    /**
+     *
+     * @param smoother 0.1 - 0.9
+     */
+    constructor(smoother: number);
+    /**
+     * Set start point
+     * @param x X coordinate
+     * @param y Y coordinate
+     */
+    start(x: number, y: number): void;
+    /**
+     * Update coordinate when drawing
+     * @param x mouse X coordinate
+     * @param y mouse Y coordinate
+     * @return [x0, x0, x1, y1]
+     */
+    move(x: number, y: number): DrawLineCoordinate;
+}
+/**
+ * Create line n-times
+ * @param length
+ */
+export declare function createLines(length: number): SmoothLine[];