@privyid/persona 1.1.2 → 1.2.1

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

@@ -1,244 +0,0 @@
-<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 lang="ts" setup>
-import { useWindowSize } from '@vueuse/core'
-import type {
-  PropType,
-  StyleValue,
-} from 'vue-demi'
-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'
-
-const props = defineProps({
-  modelValue: {
-    type   : [String, globalThis.File],
-    default: '',
-  },
-  modelModifiers: {
-    type   : Object as PropType<ModelModifier>,
-    default: () => ({} as ModelModifier),
-  },
-  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 /* 2rem */
-    ? 'rotate'
-    : 'normal'
-})
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (mode.value)
-    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
-}
-
-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
-}
-
-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/utils/canvas.d.ts

@@ -1,41 +0,0 @@
-/**
- * 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

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

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

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

@@ -1,36 +0,0 @@
-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[];

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

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

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

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

@@ -1,7 +0,0 @@
-import type { InteractEvent } from '@interactjs/types';
-import type { 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

@@ -1,29 +0,0 @@
-import { throttle } from "lodash-es";
-import {
-  onBeforeUnmount,
-  onMounted,
-  shallowRef
-} from "vue-demi";
-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

@@ -1,138 +0,0 @@
-<template>
-  <img
-    data-testid="signature-text"
-    class="signature--text"
-    :width="width"
-    :height="height"
-    :src="src"
-    :srcset="srcset">
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import {
-  ref,
-  computed,
-  onMounted,
-} from 'vue-demi'
-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 type { ModelModifier } from '../dropzone'
-import { fromBase64 } from '../utils/base64'
-import { watchDebounced } from '@vueuse/core'
-
-const props = defineProps({
-  modelValue: {
-    type   : [String, globalThis.File],
-    default: '',
-  },
-  modelModifiers: {
-    type   : Object as PropType<ModelModifier>,
-    default: () => ({} as ModelModifier),
-  },
-  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': [unknown],
-}>()
-
-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/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/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>;