@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/cropper/Cropper.vue

@@ -1,446 +0,0 @@
-<template>
-  <div
-    data-testid="cropper"
-    class="cropper"
-    :class="classNames">
-    <div
-      class="cropper__preview">
-      <canvas
-        ref="canvas"
-        data-testid="cropper-canvas"
-        class="cropper__canvas" />
-      <div
-        ref="parent"
-        data-testid="cropper-container"
-        class="cropper__image-container"
-        @wheel.prevent="onMouseWheel">
-        <img
-          ref="image"
-          data-testid="cropper-preview"
-          alt="cropper-preview"
-          tabindex="0"
-          class="cropper__image"
-          :src="preview"
-          :class="imgClass"
-          :style="imgStyle"
-          :width="imgWidth"
-          :height="imgHeight"
-          @load="onImageLoaded"
-          @keydown.up.prevent="move(0, -1)"
-          @keydown.down.prevent="move(0, 1)"
-          @keydown.left.prevent="move(-1, 0)"
-          @keydown.right.prevent="move(1, 0)">
-      </div>
-      <div
-        v-if="!noCrop"
-        v-p-aspect-ratio.fixed="aspectRatio"
-        data-testid="cropper-mask"
-        class="cropper__mask"
-        :style="maskStyle" />
-    </div>
-    <div class="cropper__control">
-      <div class="cropper__control-bar">
-        <p-button
-          data-testid="cropper-zoom-out"
-          size="xs"
-          variant="link"
-          icon
-          pill
-          @click="zoomOut()">
-          <IconZoomOut />
-        </p-button>
-        <p-input-range
-          v-model="scale"
-          data-testid="cropper-zoom-slider"
-          class="cropper__slider"
-          min="0.5"
-          max="2"
-          step="0.1" />
-        <p-button
-          data-testid="cropper-zoom-in"
-          size="xs"
-          variant="link"
-          icon
-          pill
-          @click="zoomIn()">
-          <IconZoomIn />
-        </p-button>
-        <p-button
-          data-testid="cropper-rotate-left"
-          size="xs"
-          variant="link"
-          icon
-          pill
-          @click="rotate(-90)">
-          <IconRotateLeft />
-        </p-button>
-        <p-button
-          data-testid="cropper-rotate-right"
-          size="xs"
-          variant="link"
-          icon
-          pill
-          @click="rotate(90)">
-          <IconRotateRight />
-        </p-button>
-      </div>
-
-      <p-button
-        data-testid="cropper-reset"
-        class="cropper__control__reset"
-        size="xs"
-        variant="link"
-        @click="reset()">
-        Reset
-      </p-button>
-
-      <slot
-        name="control"
-        :scale="scale"
-        :angle="angle"
-        :crop="crop"
-        :zoom-in="zoomIn"
-        :zoom-out="zoomOut"
-        :fit="fit"
-        :rotate="rotate"
-        :reset="reset" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { watchDebounced, useThrottleFn } from '@vueuse/core'
-import { useClamp } from '@vueuse/math'
-import type {
-  PropType,
-  StyleValue,
-  VNode,
-} from 'vue-demi'
-import {
-  computed,
-  ref,
-  toRef,
-} from 'vue-demi'
-import { usePinch } from './utils/use-pinch'
-import pButton from '../button/Button.vue'
-import pInputRange from '../input-range/InputRange.vue'
-import IconRotateLeft from '@privyid/persona-icon/vue/rotate-left/20.vue'
-import IconRotateRight from '@privyid/persona-icon/vue/rotate-right/20.vue'
-import IconZoomIn from '@privyid/persona-icon/vue/zoom-in/20.vue'
-import IconZoomOut from '@privyid/persona-icon/vue/zoom-out/20.vue'
-import { cropImage } from './utils/crop-image'
-import { useVModel } from '../input'
-import type { ModelModifier } from '../camera/adapter/adapter'
-import { fromBase64 } from '../utils/base64'
-import {
-  useRatio,
-  useRatioHeight,
-  useRatioWidth,
-} from './utils/use-ratio'
-import { vPAspectRatio } from '../aspect-ratio'
-import { usePreview } from '.'
-
-const props = defineProps({
-  modelValue: {
-    type   : [String, globalThis.File],
-    default: '',
-  },
-  modelModifiers: {
-    type   : Object as PropType<ModelModifier>,
-    default: () => ({} as ModelModifier),
-  },
-  src: {
-    type   : [String, globalThis.File],
-    default: undefined,
-  },
-  ratio: {
-    type   : Number,
-    default: undefined,
-  },
-  width: {
-    type   : [String, Number],
-    default: undefined,
-  },
-  height: {
-    type   : [String, Number],
-    default: undefined,
-  },
-  imgWidth: {
-    type   : [String, Number],
-    default: 512,
-  },
-  imgHeight: {
-    type   : [String, Number],
-    default: 512,
-  },
-  imgClass: {
-    type: [
-      String,
-      Array,
-      Object,
-    ],
-    default: undefined,
-  },
-  rounded: {
-    type   : Boolean,
-    default: false,
-  },
-  noCrop: {
-    type   : Boolean,
-    default: false,
-  },
-  noAutocrop: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [string | File],
-  'change': [string | File],
-  'result': [string | File],
-  'load': [],
-}>()
-
-const model       = useVModel(props)
-const x           = ref(0)
-const y           = ref(0)
-const angle       = ref(0)
-const scale       = useClamp(1, 0.5, 2)
-const aspectRatio = useRatio(props)
-const width       = useRatioWidth(props)
-const height      = useRatioHeight(props)
-const rounded     = toRef(props, 'rounded')
-const src         = toRef(props, 'src')
-const preview     = usePreview(src)
-const canvas      = ref<HTMLCanvasElement>()
-const parent      = ref<HTMLDivElement>()
-const image       = ref<HTMLImageElement>()
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (props.noCrop)
-    result.push('cropper--no-crop')
-
-  if (props.rounded)
-    result.push('cropper--rounded')
-
-  return result
-})
-
-const imgStyle = computed<StyleValue>(() => {
-  return { transform: `rotate(${angle.value}deg) translate(${x.value}px, ${y.value}px) scale(${scale.value})` }
-})
-
-const maskStyle = computed<StyleValue>(() => {
-  return {
-    aspectRatio: `${aspectRatio.value}`,
-    width      : width.value ? `${width.value}px` : '66.666667%',
-  }
-})
-
-function fit () {
-  if (parent.value && image.value) {
-    const w = angle.value % 180 === 0 ? image.value.width : image.value.height
-    const h = angle.value % 180 === 0 ? image.value.height : image.value.width
-
-    scale.value = Math.min(parent.value.clientWidth / w, parent.value.clientHeight / h)
-  }
-
-  x.value = 0
-  y.value = 0
-}
-
-function zoomIn () {
-  scale.value += 0.1
-}
-
-function zoomOut () {
-  scale.value -= 0.1
-}
-
-function rotate (degress: number) {
-  angle.value = ((Math.trunc(angle.value / 90) * 90) + degress) % 360
-
-  fit()
-}
-
-function move (dx: number, dy: number) {
-  /**
-   * Translate top and left movement by any rotation's angle using formula:
-   *  x' = x cos(θ) + y sin(θ)
-   *  y' = −x sin(θ) + y cos(θ)
-   *
-   * See: https://math.stackexchange.com/questions/1350137/transformation-of-axes-by-rotation
-   */
-  const COS0 = Math.cos(angle.value * Math.PI / 180)
-  const SIN0 = Math.sin(angle.value * Math.PI / 180)
-
-  const x1 = (dx * COS0 + dy * SIN0)
-  const y1 = (dy * COS0 - dx * SIN0)
-
-  x.value += x1
-  y.value += y1
-}
-
-function reset () {
-  angle.value = 0
-
-  fit()
-}
-
-function crop (): string {
-  if (parent.value && image.value && canvas.value) {
-    const mWidth = (parent.value.clientWidth * 2 / 3)
-    const w      = width.value ?? mWidth
-    const h      = height.value ?? (w / aspectRatio.value)
-    const mScale = (mWidth > 0) && (w > mWidth) ? (w / mWidth) : 1 // mobile scale, responsive scale to fix crop ratio on mobile.
-
-    const result = cropImage({
-      canvas : canvas.value,
-      image  : image.value,
-      width  : w,
-      height : h,
-      x      : x.value,
-      y      : y.value,
-      angle  : angle.value,
-      scale  : scale.value * mScale,
-      rounded: props.rounded,
-    })
-
-    const value = props.modelModifiers.base64
-      ? result
-      : fromBase64(result)
-
-    model.value = value
-
-    emit('change', value)
-    emit('result', value)
-
-    return result
-  }
-}
-
-const onMouseWheel = useThrottleFn((event: WheelEvent) => {
-  if (image.value)
-    image.value.focus()
-
-  scale.value += event.deltaY * 0.01
-}, 1000 / 30 /* Limit 30 Fps */)
-
-function onImageLoaded () {
-  emit('load')
-  fit()
-
-  if (!props.noCrop && !props.noAutocrop)
-    crop()
-}
-
-usePinch(image, {
-  onpinch (event) {
-    scale.value = event.scale
-    // angle.value += event.da
-
-    move(event.dx, event.dy)
-  },
-  onmove (event) {
-    move(event.dx, event.dy)
-  },
-})
-
-watchDebounced([
-  src,
-  width,
-  height,
-  aspectRatio,
-  rounded,
-  x,
-  y,
-  scale,
-  angle,
-], () => {
-  if (!props.noCrop && !props.noAutocrop)
-    crop()
-}, { debounce: 500 })
-
-defineExpose({
-  zoomIn,
-  zoomOut,
-  rotate,
-  crop,
-  reset,
-  move,
-  fit,
-  canvas,
-  image,
-  angle,
-  scale,
-})
-
-defineSlots<{
-  'control'(props: {
-    scale: number,
-    angle: number,
-    crop : () => void,
-    zoomIn: () => void,
-    zoomOut: () => void,
-    rotate: (deg: number) => void,
-    fit: () => void,
-    reset: () => void,
-  }): VNode[],
-}>()
-</script>
-
-<style lang="postcss">
-.cropper {
-  @apply bg-default w-full aspect-compat-square;
-  @apply dark:bg-dark-default;
-
-  &__canvas {
-    @apply hidden;
-  }
-
-  &__preview {
-    @apply bg-[url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAGklEQVR4AWNYJYoK92ihwpGiAF0AXcMIUQAAbIfSgRmCFqkAAAAASUVORK5CYII=)];
-    @apply flex w-full overflow-hidden h-auto relative aspect-compat-square select-none;
-  }
-
-  &__mask {
-    @apply pointer-events-none touch-none select-none border border-default border-dashed box-border shadow-mask absolute inset-0 m-auto max-w-[66.666667%];
-    @apply dark:border-dark-default;
-  }
-
-  &__image {
-    -webkit-touch-callout: none;
-
-    @apply touch-none h-auto origin-center object-contain select-none outline-none;
-
-    &-container {
-      @apply w-full h-full absolute inset-0 flex items-center justify-center;
-    }
-  }
-
-  &__control {
-    @apply p-2 space-x-2 flex justify-between max-w-full overflow-hidden;
-
-    &-bar {
-      @apply flex grow max-w-md space-x-2;
-    }
-
-    &__reset {
-      @apply shrink-0;
-    }
-  }
-
-  &__slider {
-    @apply grow w-full;
-  }
-
-  &--rounded {
-    .cropper__mask {
-      @apply rounded-full
-    }
-  }
-}
-</style>

package/dist/components/cropper/index.d.ts

@@ -1 +0,0 @@
-export { usePreview, } from './utils/use-preview';

package/dist/components/cropper/index.mjs

@@ -1,3 +0,0 @@
-export {
-  usePreview
-} from "./utils/use-preview.mjs";

package/dist/components/cropper/utils/crop-image.d.ts

@@ -1,44 +0,0 @@
-interface CropImage {
-    /**
-     * Canvas's element
-     */
-    canvas?: HTMLCanvasElement;
-    /**
-     * Image's element to crop
-     */
-    image: HTMLImageElement;
-    /**
-     * Crop width
-     */
-    width: number;
-    /**
-     * Crop height
-     */
-    height: number;
-    /**
-     * Zoom factor
-     */
-    scale: number;
-    /**
-     * Rotate angle
-     */
-    angle: number;
-    /**
-     * X offset
-     */
-    x: number;
-    /**
-     * Y offset
-     */
-    y: number;
-    /**
-     * Enable border-radius
-     */
-    rounded: boolean;
-}
-/**
- * Crop image using canvas
- * @param options CropOption
- */
-export declare function cropImage(options: CropImage): string;
-export {};

package/dist/components/cropper/utils/crop-image.mjs

@@ -1,43 +0,0 @@
-import { createCanvas } from "../../signature-draw/utils/canvas.mjs";
-export function cropImage(options) {
-  const {
-    width,
-    height,
-    image,
-    scale,
-    angle,
-    x,
-    y,
-    rounded
-  } = options;
-  const canvas = options.canvas ?? createCanvas(width, height);
-  const ctx = canvas.getContext("2d");
-  const imgW = image.width * scale;
-  const imgH = image.height * scale;
-  canvas.width = width;
-  canvas.height = height;
-  ctx.clearRect(0, 0, width, height);
-  ctx.translate(width / 2, height / 2);
-  ctx.rotate(angle * Math.PI / 180);
-  ctx.translate(width / -2, height / -2);
-  ctx.drawImage(
-    image,
-    (width - imgW) / 2 + x,
-    (height - imgH) / 2 + y,
-    imgW,
-    imgH
-  );
-  if (rounded) {
-    const r = Math.min(width / 2, height / 2);
-    ctx.globalCompositeOperation = "destination-in";
-    ctx.beginPath();
-    ctx.moveTo(r, 0);
-    ctx.arcTo(width, 0, width, height, r);
-    ctx.arcTo(width, height, 0, height, r);
-    ctx.arcTo(0, height, 0, 0, r);
-    ctx.arcTo(0, 0, width, 0, r);
-    ctx.closePath();
-    ctx.fill();
-  }
-  return canvas.toDataURL();
-}

package/dist/components/cropper/utils/use-pinch.d.ts

@@ -1,8 +0,0 @@
-import type { Ref } from 'vue-demi';
-import type { InteractEvent, GestureEvent } from '@interactjs/types';
-export interface EventHooks {
-    onstart?: (event: InteractEvent) => void;
-    onpinch?: (event: GestureEvent) => void;
-    onmove?: (event: InteractEvent) => void;
-}
-export declare function usePinch(target: Ref<HTMLElement>, hooks: EventHooks): void;

package/dist/components/cropper/utils/use-pinch.mjs

@@ -1,50 +0,0 @@
-import {
-  onBeforeUnmount,
-  onMounted,
-  shallowRef
-} from "vue-demi";
-import { throttle } from "lodash-es";
-export function usePinch(target, hooks) {
-  const instance = shallowRef();
-  onMounted(async () => {
-    if (target.value) {
-      const { default: Interact } = await import("interactjs");
-      const onmove = throttle(
-        hooks.onmove,
-        1e3 / 120
-        /* limit 120fps */
-      );
-      const onpinch = throttle(
-        hooks.onpinch,
-        1e3 / 120
-        /* limit 120fps */
-      );
-      instance.value = Interact(target.value).styleCursor(true).gesturable({
-        inertia: true,
-        onstart: hooks.onstart,
-        onmove: onpinch,
-        onend: onpinch,
-        modifiers: [
-          Interact.modifiers.restrict({
-            restriction: "parent",
-            endOnly: true
-          })
-        ]
-      }).draggable({
-        inertia: true,
-        onstart: hooks.onstart,
-        onmove,
-        onend: onmove,
-        modifiers: [
-          Interact.modifiers.restrict({
-            restriction: "parent",
-            endOnly: true
-          })
-        ]
-      });
-    }
-  });
-  onBeforeUnmount(async () => {
-    instance.value?.unset();
-  });
-}

package/dist/components/cropper/utils/use-preview.d.ts

@@ -1,3 +0,0 @@
-import type { MaybeRef } from '@vueuse/core';
-import type { Ref } from 'vue-demi';
-export declare function usePreview(file: MaybeRef<string | globalThis.File>, fallback?: string): Ref<string>;

package/dist/components/cropper/utils/use-preview.mjs

@@ -1,21 +0,0 @@
-import { createSpinner } from "../../avatar/utils/create-image.mjs";
-import {
-  ref,
-  unref,
-  watchEffect
-} from "vue-demi";
-export function usePreview(file, fallback = createSpinner(512, 512)) {
-  const preview = ref(fallback);
-  watchEffect((onCleanup) => {
-    const value = unref(file);
-    if (typeof window !== "undefined" && value instanceof globalThis.File) {
-      const url = window.URL.createObjectURL(value);
-      onCleanup(() => {
-        window.URL.revokeObjectURL(url);
-      });
-      preview.value = url;
-    } else
-      preview.value = typeof value === "string" && value ? value : fallback;
-  });
-  return preview;
-}

package/dist/components/cropper/utils/use-ratio.d.ts

@@ -1,9 +0,0 @@
-import type { ComputedRef } from 'vue-demi';
-export interface RatioProp {
-    width?: number | string;
-    height?: number | string;
-    ratio?: number;
-}
-export declare function useRatio(props: RatioProp, defaultValue?: number): ComputedRef<number>;
-export declare function useRatioWidth(props: RatioProp): ComputedRef<number | undefined>;
-export declare function useRatioHeight(props: RatioProp): ComputedRef<number | undefined>;

package/dist/components/cropper/utils/use-ratio.mjs

@@ -1,24 +0,0 @@
-import { computed } from "vue-demi";
-export function useRatio(props, defaultValue = 1) {
-  return computed(() => {
-    if (props.width && props.height)
-      return Number.parseFloat(`${props.width}`) / Number.parseFloat(`${props.height}`);
-    return props.ratio ?? defaultValue;
-  });
-}
-export function useRatioWidth(props) {
-  return computed(() => {
-    if (props.width)
-      return Number.parseFloat(`${props.width}`);
-    if (props.height && props.ratio)
-      return Number.parseFloat(`${props.height}`) * props.ratio;
-  });
-}
-export function useRatioHeight(props) {
-  return computed(() => {
-    if (props.height)
-      return Number.parseFloat(`${props.height}`);
-    if (props.width && props.ratio)
-      return Number.parseFloat(`${props.width}`) / props.ratio;
-  });
-}