@privyid/persona 1.1.2 → 1.2.0

package/dist/components/dropzone/Dropzone.spec.mjs

@@ -0,0 +1,341 @@
+import { fireEvent, render } from "@testing-library/vue";
+import { vi } from "vitest";
+import { ref } from "vue-demi";
+import Dropzone from "./Dropzone.vue";
+import { until } from "@vueuse/core";
+beforeAll(() => {
+  process.env.VTL_SKIP_WARN_EVENT_UPDATE = "1";
+});
+afterEach(() => {
+  vi.resetAllMocks();
+});
+afterAll(() => {
+  delete process.env.VTL_SKIP_WARN_EVENT_UPDATE;
+});
+it("should render properly without any props", () => {
+  const screen = render({
+    components: { Dropzone },
+    template: "<Dropzone />"
+  });
+  const dropzone = screen.getByTestId("dropzone");
+  expect(dropzone).toBeInTheDocument();
+  expect(dropzone).toHaveClass("dropzone");
+});
+it("should trigger browse file if `browse` from slot is called", async () => {
+  const fileBrowse = vi.spyOn(HTMLInputElement.prototype, "click");
+  const screen = render({
+    components: { Dropzone },
+    template: `
+      <Dropzone>
+        <template #default="{ browse }">
+          <button @click="browse">Browse</button>
+        </template>
+      </Dropzone>
+    `
+  });
+  const button = screen.queryByText("Browse");
+  await fireEvent.click(button);
+  expect(fileBrowse).toBeCalled();
+});
+it("isHover should true if dropzone hovered and false when mouse leave", async () => {
+  const screen = render({
+    components: { Dropzone },
+    template: `
+      <Dropzone>
+        <template #default="{ isHover }">
+          <span data-testid="is-hover">
+            {{ isHover ? 'hovered' : 'unhovered' }}
+          </span>
+        </template>
+      </Dropzone>
+    `
+  });
+  const dropzone = screen.queryByTestId("dropzone");
+  const span = screen.queryByTestId("is-hover");
+  expect(span).toHaveTextContent("unhovered");
+  expect(dropzone).not.toHaveClass("dropzone--hover");
+  await fireEvent.mouseOver(dropzone);
+  expect(span).toHaveTextContent("hovered");
+  expect(dropzone).toHaveClass("dropzone--hover");
+  await fireEvent.mouseOut(dropzone);
+  expect(span).toHaveTextContent("unhovered");
+  expect(dropzone).not.toHaveClass("dropzone--hover");
+});
+it("isDragover should true if file dragged over", async () => {
+  const screen = render({
+    components: { Dropzone },
+    template: `
+      <Dropzone>
+        <template #default="{ isDragover }">
+          <span data-testid="is-dragover">
+            {{ isDragover ? 'dragged' : 'undragged' }}
+          </span>
+        </template>
+      </Dropzone>
+    `
+  });
+  const dropzone = screen.queryByTestId("dropzone");
+  const span = screen.queryByTestId("is-dragover");
+  expect(span).toHaveTextContent("undragged");
+  expect(dropzone).not.toHaveClass("dropzone--dragover");
+  await fireEvent.dragEnter(dropzone);
+  expect(span).toHaveTextContent("dragged");
+  expect(dropzone).toHaveClass("dropzone--dragover");
+  await fireEvent.dragLeave(dropzone);
+  expect(span).toHaveTextContent("undragged");
+  expect(dropzone).not.toHaveClass("dropzone--dragover");
+});
+it("should emit `change` if user selecting file", async () => {
+  const onChange = vi.fn();
+  const screen = render({
+    components: { Dropzone },
+    template: `
+      <Dropzone @change="onChange" />
+    `,
+    setup() {
+      return { onChange };
+    }
+  });
+  const input = screen.queryByTestId("dropzone-input");
+  const file = new File(["abcdefghijkl"], "notes.txt", { type: "text/plain" });
+  const files = [file];
+  await fireEvent.change(input, { target: { files } });
+  expect(onChange).toBeCalled();
+  expect(onChange).lastCalledWith(file);
+});
+it("should emit `change` if user drop file", async () => {
+  const onChange = vi.fn();
+  const screen = render({
+    components: { Dropzone },
+    template: `
+      <Dropzone @change="onChange" />
+    `,
+    setup() {
+      return { onChange };
+    }
+  });
+  const zone = screen.queryByTestId("dropzone");
+  const file = new File(["abcdefghijkl"], "notes.txt", { type: "text/plain" });
+  const files = [file];
+  await fireEvent.drop(zone, { dataTransfer: { files } });
+  expect(onChange).toBeCalled();
+  expect(onChange).lastCalledWith(file);
+});
+it("should emit `cancel` if user selecting nothing", async () => {
+  const onCancel = vi.fn();
+  const screen = render({
+    components: { Dropzone },
+    template: `
+      <Dropzone @cancel="onCancel" />
+    `,
+    setup() {
+      return { onCancel };
+    }
+  });
+  const input = screen.queryByTestId("dropzone-input");
+  const files = [];
+  await fireEvent.change(input, { target: { files } });
+  expect(onCancel).toBeCalled();
+});
+it("should mutate value in v-model when user selecting file", async () => {
+  const model = ref();
+  const screen = render({
+    components: { Dropzone },
+    template: `
+      <Dropzone v-model="model" />
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const input = screen.queryByTestId("dropzone-input");
+  const file = new File(["abcdefghijkl"], "notes.txt", { type: "text/plain" });
+  const files = [file];
+  await fireEvent.change(input, { target: { files } });
+  expect(model.value).toStrictEqual(file);
+});
+it("should mutate value in v-model when user selecting file", async () => {
+  const model = ref();
+  const screen = render({
+    components: { Dropzone },
+    template: `
+      <Dropzone v-model="model" />
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const input = screen.queryByTestId("dropzone-input");
+  const file = new File(["abcdefghijkl"], "notes.txt", { type: "text/plain" });
+  const files = [file];
+  await fireEvent.change(input, { target: { files } });
+  expect(model.value).toStrictEqual(file);
+});
+it("should format to base64 if using v-model.base64", async () => {
+  const model = ref();
+  const screen = render({
+    components: { Dropzone },
+    template: `
+      <Dropzone v-model.base64="model" />
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const input = screen.queryByTestId("dropzone-input");
+  const file = new File(["abcdefghijkl"], "notes.txt", { type: "text/plain" });
+  const files = [file];
+  await fireEvent.change(input, { target: { files } });
+  await until(model).changed();
+  expect(model.value).toBe("data:text/plain;base64,YWJjZGVmZ2hpamts");
+});
+it("should return an array if props multiple set to true", async () => {
+  const model = ref();
+  const screen = render({
+    components: { Dropzone },
+    template: `
+      <Dropzone v-model="model" multiple />
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const input = screen.queryByTestId("dropzone-input");
+  const file1 = new File(["abcdefghijkl"], "notes.txt", { type: "text/plain" });
+  const file2 = new File(["123456789000"], "notes.txt", { type: "text/plain" });
+  const files = [file1, file2];
+  await fireEvent.change(input, { target: { files } });
+  expect(model.value).toStrictEqual(files);
+});
+it("should formal all files if props multiple set to true and using v-model.base64", async () => {
+  const model = ref();
+  const screen = render({
+    components: { Dropzone },
+    template: `
+      <Dropzone v-model.base64="model" multiple />
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const input = screen.queryByTestId("dropzone-input");
+  const file1 = new File(["abcdefghijkl"], "notes.txt", { type: "text/plain" });
+  const file2 = new File(["123456789000"], "notes.txt", { type: "text/plain" });
+  const files = [file1, file2];
+  await fireEvent.change(input, { target: { files } });
+  await until(model).changed();
+  expect(model.value).toStrictEqual(["data:text/plain;base64,YWJjZGVmZ2hpamts", "data:text/plain;base64,MTIzNDU2Nzg5MDAw"]);
+});
+it("should not process files if type is not accepted", async () => {
+  const model = ref();
+  const screen = render({
+    components: { Dropzone },
+    template: `
+      <Dropzone v-model="model" multiple accept=".txt" />
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const input = screen.queryByTestId("dropzone-input");
+  const file1 = new File(["12345679"], "notes.png", { type: "image/png" });
+  const file2 = new File(["12345679"], "notes.jpg", { type: "image/jpg" });
+  const file3 = new File(["12345679"], "notes.gif", { type: "image/gif" });
+  const file4 = new File(["12345679"], "notes.txt", { type: "text/plain" });
+  const files = [
+    file1,
+    file2,
+    file3,
+    file4
+  ];
+  await fireEvent.change(input, { target: { files } });
+  expect(model.value).toStrictEqual([file4]);
+});
+it("should append files every input change", async () => {
+  const model = ref();
+  const screen = render({
+    components: { Dropzone },
+    template: `
+      <Dropzone v-model="model" multiple="append" />
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const input = screen.queryByTestId("dropzone-input");
+  const file1 = new File(["12345679"], "notes.png", { type: "image/png" });
+  const file2 = new File(["12345679"], "notes.jpg", { type: "image/jpg" });
+  const files = [file1, file2];
+  await fireEvent.change(input, { target: { files } });
+  expect(model.value).toStrictEqual([file1, file2]);
+  await fireEvent.change(input, { target: { files } });
+  expect(model.value).toStrictEqual([
+    file1,
+    file2,
+    file1,
+    file2
+  ]);
+});
+it("should limiting files if maxlength provided", async () => {
+  const model = ref();
+  const screen = render({
+    components: { Dropzone },
+    template: `
+      <Dropzone v-model="model" multiple="append" maxlength="3" />
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const input = screen.queryByTestId("dropzone-input");
+  const file1 = new File(["12345679"], "notes.png", { type: "image/png" });
+  const file2 = new File(["12345679"], "notes.jpg", { type: "image/jpg" });
+  const files = [file1, file2];
+  await fireEvent.change(input, { target: { files } });
+  expect(model.value).toStrictEqual([file1, file2]);
+  await fireEvent.change(input, { target: { files } });
+  expect(model.value).toStrictEqual([
+    file1,
+    file2,
+    file1
+  ]);
+});
+it("should has style disabled if prop `disabled` was given", () => {
+  const screen = render({
+    components: { Dropzone },
+    template: "<Dropzone disabled />"
+  });
+  const dropzone = screen.getByTestId("dropzone");
+  const input = screen.getByTestId("dropzone-input");
+  expect(dropzone).toHaveClass("dropzone--disabled");
+  expect(input).toBeDisabled();
+});
+it("should has style disabled if prop `disabled` was given", () => {
+  const screen = render({
+    components: { Dropzone },
+    template: "<Dropzone readonly />"
+  });
+  const dropzone = screen.getByTestId("dropzone");
+  const input = screen.getByTestId("dropzone-input");
+  expect(dropzone).toHaveClass("dropzone--readonly");
+  expect(input).toBeDisabled();
+});
+it("should reset v-model on cancel if prop `clearOnReset` set to true", async () => {
+  const model = ref();
+  const screen = render({
+    components: { Dropzone },
+    template: `
+      <Dropzone v-model="model" clear-on-cancel />
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const input = screen.queryByTestId("dropzone-input");
+  const file1 = new File(["12345679"], "notes.png", { type: "image/png" });
+  const files = [file1];
+  await fireEvent.change(input, { target: { files } });
+  expect(model.value).toStrictEqual(file1);
+  await fireEvent.change(input, { target: { files: [] } });
+  expect(model.value).toBeUndefined();
+});

package/dist/components/dropzone/Dropzone.vue

@@ -16,7 +16,7 @@
       type="file"
       :multiple="multiple !== false"
       :accept="accept"
-      :disabled="(disabled || readonly)"
+      :disabled="disabled || readonly"
       v-bind="$attrs"
       @change="onChange">
     <slot
@@ -31,209 +31,153 @@
   </label>
 </template>
 
-<script lang="ts" setup>
-import acceptFile from './utils/accept'
-import type { PropType, VNode } from 'vue-demi'
+<script setup>
+import acceptFile from "./utils/accept";
 import {
   computed,
   nextTick,
   ref,
-  toRef,
-} from 'vue-demi'
-import { useVModel } from '../input'
-import { toBase64 } from '../utils/base64'
-import { useToNumber } from '@vueuse/shared'
-import { watchIgnorable } from '@vueuse/core'
-import type { ModelModifier, MultipleType } from '.'
-
-defineOptions({ inheritAttrs: false })
-
+  toRef
+} from "vue-demi";
+import { useVModel } from "../input";
+import { toBase64 } from "../utils/base64";
+import { useToNumber } from "@vueuse/shared";
+import { watchIgnorable } from "@vueuse/core";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   modelValue: {
     type: [
       globalThis.File,
       Array,
-      String,
-    ] as PropType<globalThis.File | globalThis.File[] | string | string[]>,
-    default: undefined,
+      String
+    ],
+    default: void 0
   },
   modelModifiers: {
-    type   : Object as PropType<ModelModifier>,
-    default: () => ({} as ModelModifier),
+    type: Object,
+    default: () => ({})
   },
   multiple: {
-    type   : [Boolean, String] as PropType<boolean | MultipleType>,
-    default: false,
+    type: [Boolean, String],
+    default: false
   },
   maxlength: {
-    type   : [Number, String],
-    default: undefined,
+    type: [Number, String],
+    default: void 0
   },
   accept: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   clearOnCancel: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   disabled: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   readonly: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   containerClass: {
     type: [
       String,
       Array,
-      Object,
+      Object
     ],
-    default: undefined,
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [unknown],
-  'change': [unknown],
-  'cancel': [],
-}>()
-
-const model     = useVModel(props)
-const rawModel  = ref<globalThis.File | globalThis.File[]>()
-const input     = ref<HTMLInputElement>()
-const maxlength = useToNumber(toRef(props, 'maxlength'), { method: 'parseInt' })
-
-const isDragover = ref(false)
-const isHovered  = ref(false)
-
+    default: void 0
+  }
+});
+const emit = defineEmits(["update:modelValue", "change", "cancel"]);
+const model = useVModel(props);
+const rawModel = ref();
+const input = ref();
+const maxlength = useToNumber(toRef(props, "maxlength"), { method: "parseInt" });
+const isDragover = ref(false);
+const isHovered = ref(false);
 const classNames = computed(() => {
-  const result: string[] = []
-
+  const result = [];
   if (isDragover.value)
-    result.push('dropzone--dragover')
-
+    result.push("dropzone--dragover");
   if (isHovered.value)
-    result.push('dropzone--hover')
-
+    result.push("dropzone--hover");
   if (props.disabled)
-    result.push('dropzone--disabled')
-
+    result.push("dropzone--disabled");
   if (props.readonly)
-    result.push('dropzone--readonly')
-
-  return result
-})
-
+    result.push("dropzone--readonly");
+  return result;
+});
 const { ignoreUpdates } = watchIgnorable(() => props.modelValue, (value) => {
   if (value) {
     if (Array.isArray(value))
-      rawModel.value = value.filter((item) => item instanceof globalThis.File)
+      rawModel.value = value.filter((item) => item instanceof globalThis.File);
     else {
       if (value instanceof globalThis.File)
-        rawModel.value = value
+        rawModel.value = value;
     }
   }
-}, { immediate: true })
-
-function browse () {
-  input.value.value = ''
-  input.value.click()
+}, { immediate: true });
+function browse() {
+  input.value.value = "";
+  input.value.click();
 }
-
-function clear () {
-  input.value.value = ''
-  rawModel.value    = undefined
-  model.value       = undefined
+function clear() {
+  input.value.value = "";
+  rawModel.value = void 0;
+  model.value = void 0;
 }
-
-function onDrop (event: DragEvent) {
+function onDrop(event) {
   if (!props.disabled && !props.readonly) {
-    const files = event.dataTransfer.files
-
-    isDragover.value = false
-
-    handleFiles(files)
+    const files = event.dataTransfer.files;
+    isDragover.value = false;
+    handleFiles(files);
   }
 }
-
-function onChange (event: Event) {
-  const target = event.target as HTMLInputElement
-  const files  = target.files
-
-  handleFiles(files)
-
-  if (props.multiple === 'append') {
-    /* Issue with multiselect with same file(s), need to be reset */
+function onChange(event) {
+  const target = event.target;
+  const files = target.files;
+  handleFiles(files);
+  if (props.multiple === "append") {
     nextTick(() => {
-      target.value = ''
-    })
+      target.value = "";
+    });
   }
 }
-
-function filesToBase64 (files: globalThis.File | globalThis.File[]): Promise<string | string[]> {
+function filesToBase64(files) {
   if (Array.isArray(files))
-    return Promise.all(files.map((file) => toBase64(file)))
-
-  return toBase64(files)
+    return Promise.all(files.map((file) => toBase64(file)));
+  return toBase64(files);
 }
-
-async function handleFiles (fileList: globalThis.FileList) {
+async function handleFiles(fileList) {
   if (fileList.length > 0) {
-    // eslint-disable-next-line unicorn/prefer-spread
-    const files = acceptFile(props.accept, Array.from(fileList))
-    const file  = props.multiple === false ? files.at(0) : files
-
-    let value: typeof props.modelValue = file
-
-    // multiple="append"
-    if (props.multiple === 'append' && Array.isArray(model.value))
-      value = [...model.value as globalThis.File[], ...value as globalThis.File[]]
-
-    // maxlength
+    const files = acceptFile(props.accept, Array.from(fileList));
+    const file = props.multiple === false ? files.at(0) : files;
+    let value = file;
+    if (props.multiple === "append" && Array.isArray(model.value))
+      value = [...model.value, ...value];
     if (Number.isInteger(maxlength.value) && Array.isArray(value))
-      value = value.slice(0, maxlength.value)
-
-    // keep original value before converting base64
-    rawModel.value = value
-
-    // v-model.base64
+      value = value.slice(0, maxlength.value);
+    rawModel.value = value;
     if (props.modelModifiers.base64)
-      value = await filesToBase64(file)
-
+      value = await filesToBase64(file);
     ignoreUpdates(() => {
-      model.value = value
-    })
-
-    emit('change', value)
+      model.value = value;
+    });
+    emit("change", value);
   } else {
     if (props.clearOnCancel)
-      clear()
-
-    emit('cancel')
+      clear();
+    emit("cancel");
   }
 }
-
 defineExpose({
   browse,
   clear,
-  input,
-})
-
-defineSlots<{
-  'default'(props: {
-    isDragover: boolean,
-    isHovered: boolean,
-    disabled: boolean,
-    readonly: boolean,
-    model: unknown,
-    rawModel: File | File[],
-    browse: () => void,
-    clear: () => void,
-  }): VNode[],
-}>()
+  input
+});
+defineSlots();
 </script>
 
 <style lang="postcss">