@privyid/persona 1.1.2 → 1.2.0

package/dist/components/cropper/Cropper.vue

@@ -108,247 +108,196 @@
   </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'
+<script setup>
+import { watchDebounced, useThrottleFn } from "@vueuse/core";
+import { useClamp } from "@vueuse/math";
 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'
+  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 { fromBase64 } from "../utils/base64";
 import {
   useRatio,
   useRatioHeight,
-  useRatioWidth,
-} from './utils/use-ratio'
-import { vPAspectRatio } from '../aspect-ratio'
-import { usePreview } from '.'
-
+  useRatioWidth
+} from "./utils/use-ratio";
+import { vPAspectRatio } from "../aspect-ratio";
+import { usePreview } from ".";
 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: () => ({})
   },
   src: {
-    type   : [String, globalThis.File],
-    default: undefined,
+    type: [String, globalThis.File],
+    default: void 0
   },
   ratio: {
-    type   : Number,
-    default: undefined,
+    type: Number,
+    default: void 0
   },
   width: {
-    type   : [String, Number],
-    default: undefined,
+    type: [String, Number],
+    default: void 0
   },
   height: {
-    type   : [String, Number],
-    default: undefined,
+    type: [String, Number],
+    default: void 0
   },
   imgWidth: {
-    type   : [String, Number],
-    default: 512,
+    type: [String, Number],
+    default: 512
   },
   imgHeight: {
-    type   : [String, Number],
-    default: 512,
+    type: [String, Number],
+    default: 512
   },
   imgClass: {
     type: [
       String,
       Array,
-      Object,
+      Object
     ],
-    default: undefined,
+    default: void 0
   },
   rounded: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   noCrop: {
-    type   : Boolean,
-    default: false,
+    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>()
-
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(["update:modelValue", "change", "result", "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();
+const parent = ref();
+const image = ref();
 const classNames = computed(() => {
-  const result: string[] = []
-
+  const result = [];
   if (props.noCrop)
-    result.push('cropper--no-crop')
-
+    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>(() => {
+    result.push("cropper--rounded");
+  return result;
+});
+const imgStyle = computed(() => {
+  return { transform: `rotate(${angle.value}deg) translate(${x.value}px, ${y.value}px) scale(${scale.value})` };
+});
+const maskStyle = computed(() => {
   return {
     aspectRatio: `${aspectRatio.value}`,
-    width      : width.value ? `${width.value}px` : '66.666667%',
-  }
-})
-
-function fit () {
+    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)
+    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
+  x.value = 0;
+  y.value = 0;
 }
-
-function zoomIn () {
-  scale.value += 0.1
+function zoomIn() {
+  scale.value += 0.1;
 }
-
-function zoomOut () {
-  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 rotate(degress) {
+  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 move(dx, dy) {
+  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 reset() {
+  angle.value = 0;
+  fit();
 }
-
-function crop (): string {
+function crop() {
   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 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;
     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
+      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()
-
+const onMouseWheel = useThrottleFn(
+  (event) => {
+    if (image.value)
+      image.value.focus();
+    scale.value += event.deltaY * 0.01;
+  },
+  1e3 / 30
+  /* Limit 30 Fps */
+);
+function onImageLoaded() {
+  emit("load");
+  fit();
   if (!props.noCrop && !props.noAutocrop)
-    crop()
+    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)
+  onpinch(event) {
+    scale.value = event.scale;
+    move(event.dx, event.dy);
   },
-})
-
+  onmove(event) {
+    move(event.dx, event.dy);
+  }
+});
 watchDebounced([
   src,
   width,
@@ -358,12 +307,11 @@ watchDebounced([
   x,
   y,
   scale,
-  angle,
+  angle
 ], () => {
   if (!props.noCrop && !props.noAutocrop)
-    crop()
-}, { debounce: 500 })
-
+    crop();
+}, { debounce: 500 });
 defineExpose({
   zoomIn,
   zoomOut,
@@ -375,21 +323,9 @@ defineExpose({
   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[],
-}>()
+  scale
+});
+defineSlots();
 </script>
 
 <style lang="postcss">

package/dist/components/cropper/Cropper.vue.d.ts

@@ -0,0 +1,195 @@
+import type { PropType, VNode } from 'vue-demi';
+import type { ModelModifier } from '../camera/adapter/adapter';
+declare function fit(): void;
+declare function zoomIn(): void;
+declare function zoomOut(): void;
+declare function rotate(degress: number): void;
+declare function move(dx: number, dy: number): void;
+declare function reset(): void;
+declare function crop(): string;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        control(props: {
+            scale: number;
+            angle: number;
+            crop: () => void;
+            zoomIn: () => void;
+            zoomOut: () => void;
+            rotate: (deg: number) => void;
+            fit: () => void;
+            reset: () => void;
+        }): VNode[];
+    }> & {
+        control(props: {
+            scale: number;
+            angle: number;
+            crop: () => void;
+            zoomIn: () => void;
+            zoomOut: () => void;
+            rotate: (deg: number) => void;
+            fit: () => void;
+            reset: () => void;
+        }): VNode[];
+    };
+    refs: {
+        canvas: HTMLCanvasElement;
+        parent: HTMLDivElement;
+        image: HTMLImageElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: 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;
+    };
+    src: {
+        type: (StringConstructor | {
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
+            prototype: File;
+        })[];
+        default: undefined;
+    };
+    ratio: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    imgWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    imgHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    imgClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noAutocrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    zoomIn: typeof zoomIn;
+    zoomOut: typeof zoomOut;
+    rotate: typeof rotate;
+    crop: typeof crop;
+    reset: typeof reset;
+    move: typeof move;
+    fit: typeof fit;
+    canvas: import("vue-demi").Ref<HTMLCanvasElement | undefined, HTMLCanvasElement | undefined>;
+    image: import("vue-demi").Ref<HTMLImageElement | undefined, HTMLImageElement | undefined>;
+    angle: import("vue-demi").Ref<number, number>;
+    scale: import("vue-demi").Ref<number, number>;
+}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: string | File) => void;
+    change: (args_0: string | File) => void;
+    load: () => void;
+    result: (args_0: string | File) => void;
+}, 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;
+    };
+    src: {
+        type: (StringConstructor | {
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
+            prototype: File;
+        })[];
+        default: undefined;
+    };
+    ratio: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    imgWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    imgHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    imgClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noAutocrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: string | File) => any) | undefined;
+    onChange?: ((args_0: string | File) => any) | undefined;
+    onLoad?: (() => any) | undefined;
+    onResult?: ((args_0: string | File) => any) | undefined;
+}>, {
+    modelValue: string | File;
+    width: string | number;
+    height: string | number;
+    src: string | File;
+    imgClass: string | unknown[] | Record<string, any>;
+    modelModifiers: ModelModifier;
+    rounded: boolean;
+    ratio: number;
+    imgWidth: string | number;
+    imgHeight: string | number;
+    noCrop: boolean;
+    noAutocrop: boolean;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,2 @@
+export declare const sampleImage: string;
+export declare const cropImage: import("vitest").Mock<[], string>;

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

@@ -0,0 +1,5 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { vi } from "vitest";
+export const sampleImage = `data:image/png;base64,${readFileSync(resolve(__dirname, "./cropped-img.png")).toString("base64")}`;
+export const cropImage = vi.fn(() => sampleImage);

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

@@ -0,0 +1,5 @@
+import type { Ref } from 'vue-demi';
+import type { EventHooks } from '../utils/use-pinch';
+export declare function usePinch(target: Ref<HTMLElement>, options: EventHooks): void;
+export declare function triggerPinch(scale: number, dx: number, dy: number): Promise<void>;
+export declare function triggerDrag(dx: number, dy: number): Promise<void>;

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

@@ -0,0 +1,24 @@
+import { nextTick } from "vue-demi";
+let hooks;
+export function usePinch(target, options) {
+  hooks = options;
+}
+export async function triggerPinch(scale, dx, dy) {
+  if (hooks.onstart)
+    hooks.onstart({});
+  if (hooks.onpinch) {
+    hooks.onpinch({
+      scale,
+      dx,
+      dy
+    });
+  }
+  await nextTick();
+}
+export async function triggerDrag(dx, dy) {
+  if (hooks.onstart)
+    hooks.onstart({});
+  if (hooks.onmove)
+    hooks.onmove({ dx, dy });
+  await nextTick();
+}