@privyid/persona 1.1.2 → 1.2.0

package/dist/components/cropper/index.md

@@ -0,0 +1,211 @@
+---
+title: Cropper · Components
+description: Preview and crop image
+---
+
+<script setup>
+import pButton from '../button/Button.vue'
+import pCropper from './Cropper.vue'
+import { ref } from 'vue-demi'
+import { withBase } from 'vitepress'
+
+const SAMPLE_IMG = withBase('/assets/images/img-sample-crop.jpg')
+const EMPTY_IMG  = withBase('/assets/images/empty-img.png')
+
+const result    = ref()
+const resultB64 = ref()
+const result2   = ref()
+
+const cropper = ref()
+
+function doCrop () {
+  if (cropper.value)
+    cropper.value.crop()
+}
+</script>
+
+# Cropper
+
+> Preview and crop image
+
+## Usage
+
+### Simple Usage
+
+<preview class="flex-col">
+  <p-cropper :src="SAMPLE_IMG" />
+</preview>
+
+```vue
+<template>
+  <p-cropper src="./assets/sample-1.jpg" />
+</template>
+```
+
+## Crop Size
+
+You can adjust crop size using `width`, `height` or `ratio`.
+
+### Using `width` and `height`
+
+<preview>
+  <p-cropper :src="SAMPLE_IMG" width="500" height="200" />
+</preview>
+
+```vue
+<template>
+  <p-cropper src="./assets/sample-1.jpg" width="500" height="200" />
+</template>
+```
+
+### Using Ratio
+
+<preview>
+  <p-cropper :src="SAMPLE_IMG" :ratio="16/9" />
+</preview>
+
+```vue
+<template>
+  <p-cropper src="./assets/sample-1.jpg" :ratio="16/9" />
+</template>
+```
+
+## Rounded Crop
+Add prop `rounded` to enable circular cropping.
+
+<preview>
+  <p-cropper :src="SAMPLE_IMG" rounded />
+</preview>
+
+```vue
+<template>
+  <p-cropper src="./assets/sample-1.jpg" rounded />
+</template>
+```
+
+## Viewer Mode
+
+If you want to use this component for previewing image only, you can add prop `no-crop` to disabled cropping.
+
+<preview>
+  <p-cropper :src="SAMPLE_IMG" no-crop />
+</preview>
+
+```vue
+<template>
+  <p-cropper src="./assets/sample-1.jpg" no-crop />
+</template>
+```
+
+
+## Binding v-model
+
+You can bind the result of cropped image using `v-model`.
+
+<preview>
+  <p-cropper :src="SAMPLE_IMG" v-model="result" />
+</preview>
+
+```vue
+<template>
+  <p-cropper src="./assets/sample-1.jpg" v-model="result" />
+</template>
+```
+
+**result:**
+
+<pre class="truncate"><code>{{ result }}</code></pre>
+
+### Encode to base64
+
+You can add modifier `base64` to your `v-model`, it's enforce result to [base64-dataURI](https://en.wikipedia.org/wiki/Data_URI_scheme).
+
+<preview class="flex-col">
+  <p-cropper :src="SAMPLE_IMG" v-model.base64="resultB64" />
+</preview>
+
+```vue
+<template>
+  <p-cropper src="./assets/sample-1.jpg" v-model.base64="result" />
+</template>
+```
+
+**result:**
+
+<pre class="truncate"><code>{{ resultB64 }}</code></pre>
+
+<img class="mt-2 border" :src="resultB64 || EMPTY_IMG" alt="Result Image" />
+
+### Disabling Autocrop
+
+By default, cropping process was ran every movement (drag, zoom, & rotate). It can be exhausting the resource on some device.
+You can disabled it using prop `no-autocrop`. And to trigger the cropping, you can use `templateRef` on `<p-cropper>` component, and call `.crop()` function.
+
+<preview class="flex-col">
+  <p-cropper ref="cropper" :src="SAMPLE_IMG" v-model.base64="result2" no-autocrop />
+  <div class="mt-4">
+    <p-button @click="doCrop">Do Crop</p-button>
+  </div>
+</preview>
+
+**result:**
+
+<pre class="truncate"><code>{{ result2 }}</code></pre>
+<img class="mt-2 border" :src="result2 || EMPTY_IMG" alt="Result Image" />
+
+```vue
+<template>
+  <p-cropper
+    ref="cropper"
+    v-model.base64="result2"
+    src="./assets/sample-1.jpg"
+    no-autocrop />
+  <p-button @click="doCrop">Do Crop</p-button>
+</template>
+
+<script setup lang="ts">
+  const cropper = ref<InstanceType<typeof PCropper>>()
+
+  function doCrop () {
+    if (cropper.value)
+      cropper.value.crop()
+  }
+</script>
+```
+
+## API
+
+### Props
+
+| Props         |       Type       | Default | Description                     |
+|---------------|:----------------:|:-------:|---------------------------------|
+| `src`         | `String`, `File` |   `-`   | Image source                    |
+| `width`       |     `Number`     |   `-`   | Crop width, in pixel            |
+| `height`      |     `Number`     |   `-`   | Crop height, in pixel           |
+| `ratio`       |     `Number`     |  `1/1`  | Crop ratio                      |
+| `img-width`   |     `Number`     |   `-`   | Add attribute width on img tag  |
+| `img-height`  |     `Number`     |   `-`   | Add attribute height on img tag |
+| `img-class`   |     `String`     |   `-`   | Additional class to img tag     |
+| `rounded`     |    `Boolean`     | `false` | Enabling rounded crop           |
+| `no-crop`     |    `Boolean`     | `false` | Disabling crop mode             |
+| `no-autocrop` |    `Boolean`     | `false` | Disabling autocrop              |
+| `modelValue`  |      `File`      |   `-`   | `v-model` value binding         |
+
+### Slots
+
+| Name      | Description                            |
+|-----------|----------------------------------------|
+| `control` | Content for placing additional control |
+
+### Events
+
+| Name     | Arguments | Description                      |
+|----------|:---------:|----------------------------------|
+| `load`   |     -     | Event when image finished loaded |
+| `result` |     -     | Event when cropped done          |
+
+
+## See Also
+
+- [Camera](/components/camera/)
+- [Dropzone](/components/dropzone/)

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,43 @@
+import {
+  useRatio,
+  useRatioHeight,
+  useRatioWidth
+} from "./use-ratio.mjs";
+describe("useRatio", () => {
+  it("should calculate ratio if props width and props height was provided", () => {
+    const ratio = useRatio({
+      width: 500,
+      height: 300,
+      ratio: 1
+    });
+    expect(ratio.value).toBe(5 / 3);
+  });
+  it("should return ratio if ratio is provided", () => {
+    const ratio = useRatio({ width: 500, ratio: 4 / 3 });
+    expect(ratio.value).toBe(4 / 3);
+  });
+  it("should return ratio 1 if no props provided", () => {
+    const ratio = useRatio({});
+    expect(ratio.value).toBe(1);
+  });
+});
+describe("useRatioWidth", () => {
+  it("should return width if props width was provided", () => {
+    const width = useRatioWidth({ width: 500, ratio: 4 / 3 });
+    expect(width.value).toBe(500);
+  });
+  it("should calculate width if props width not provided but height and ratio was provided", () => {
+    const width = useRatioWidth({ height: 300, ratio: 4 / 3 });
+    expect(width.value).toBe(400);
+  });
+});
+describe("useRatioHeight", () => {
+  it("should return height if props height was provided", () => {
+    const width = useRatioHeight({ height: 500, ratio: 4 / 3 });
+    expect(width.value).toBe(500);
+  });
+  it("should calculate height if props height not provided but width and ratio was provided", () => {
+    const width = useRatioHeight({ width: 400, ratio: 4 / 3 });
+    expect(width.value).toBe(300);
+  });
+});

package/dist/components/datepicker/Datepicker.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/datepicker/Datepicker.spec.mjs

@@ -0,0 +1,240 @@
+import { fireEvent, render } from "@testing-library/vue";
+import { vi } from "vitest";
+import { nextTick, ref } from "vue-demi";
+import Datepicker from "./Datepicker.vue";
+import { delay } from "nanodelay";
+const CalendarStub = vi.fn();
+it("should be render properly without props", () => {
+  const screen = render({
+    components: { Datepicker },
+    template: `
+      <Datepicker />
+    `
+  });
+  const picker = screen.queryByTestId("datepicker");
+  expect(picker).toBeInTheDocument();
+});
+it("should open if input is focused", async () => {
+  const screen = render({
+    components: { Datepicker },
+    template: `
+      <Datepicker />
+    `
+  });
+  const input = screen.queryByTestId("datepicker-input");
+  input.focus();
+  await nextTick();
+  const picker = screen.queryByTestId("datepicker");
+  const calendar = screen.queryByTestId("calendar");
+  expect(picker).toHaveClass("datepicker--open");
+  expect(calendar).toBeVisible();
+  await fireEvent.click(window);
+  await delay(0);
+  expect(picker).not.toHaveClass("datepicker--open");
+  expect(calendar).not.toBeVisible();
+});
+it("should be able set input placeholder via prop `placeholder`", () => {
+  const screen = render({
+    components: { Datepicker },
+    template: `
+      <Datepicker placeholder="Pick A Date" />
+    `
+  });
+  const input = screen.queryByTestId("datepicker-input");
+  expect(input).toHaveAttribute("placeholder", "Pick A Date");
+});
+it("should be able to set display format via prop `format`", () => {
+  const model = ref(new Date(2022, 0, 31));
+  const screen = render({
+    components: { Datepicker },
+    template: `
+      <Datepicker
+        v-model="model"
+        format="yyyy-MM-dd"
+        placeholder="Pick A Date" />
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const input = screen.queryByTestId("datepicker-input");
+  expect(input).toHaveValue("2022-01-31");
+});
+it("should have style disabled if props disabled is provided", () => {
+  const screen = render({
+    components: { Datepicker },
+    template: `
+      <Datepicker disabled />
+    `
+  });
+  const datepicker = screen.queryByTestId("datepicker");
+  expect(datepicker).toHaveClass("datepicker", "datepicker--disabled");
+});
+it("should have not able to open if datepicker is disabled", async () => {
+  const screen = render({
+    components: { Datepicker },
+    template: `
+      <Datepicker disabled />
+    `
+  });
+  const datepicker = screen.queryByTestId("datepicker");
+  const input = screen.queryByTestId("datepicker-input");
+  input.focus();
+  await nextTick();
+  expect(datepicker).toHaveClass("datepicker--disabled");
+  expect(datepicker).not.toHaveClass("datepicker--open");
+});
+it("should have not able to open if datepicker is readonly", async () => {
+  const screen = render({
+    components: { Datepicker },
+    template: `
+      <Datepicker readonly />
+    `
+  });
+  const datepicker = screen.queryByTestId("datepicker");
+  const input = screen.queryByTestId("datepicker-input");
+  input.focus();
+  await nextTick();
+  expect(datepicker).toHaveClass("datepicker--readonly");
+  expect(datepicker).not.toHaveClass("datepicker--open");
+});
+it("should close calendar (popup) if user selected the date", async () => {
+  const screen = render({
+    components: { Datepicker },
+    template: `
+      <Datepicker />
+    `
+  });
+  const input = screen.queryByTestId("datepicker-input");
+  input.focus();
+  await nextTick();
+  let picker = screen.queryByTestId("datepicker");
+  let calendar = screen.queryByTestId("calendar");
+  expect(picker).toHaveClass("datepicker--open");
+  expect(calendar).toBeVisible();
+  const items = screen.queryAllByTestId("calendar-item");
+  await fireEvent.click(items.at(0));
+  picker = screen.queryByTestId("datepicker");
+  calendar = screen.queryByTestId("calendar");
+  expect(picker).not.toHaveClass("datepicker--open");
+  expect(calendar).not.toBeVisible();
+});
+it("should passing prop `min` into Calendar component", () => {
+  render({
+    components: { Datepicker },
+    template: `
+      <Datepicker :min="new Date(2022, 0, 1)" />
+    `
+  }, { global: { stubs: { Calendar: CalendarStub } } });
+  const props = expect.objectContaining({ min: new Date(2022, 0, 1) });
+  expect(CalendarStub).toBeCalledWith(props, null);
+});
+it("should passing prop `max` into Calendar component", () => {
+  render({
+    components: { Datepicker },
+    template: `
+      <Datepicker :max="new Date(2022, 0, 1)" />
+    `
+  }, { global: { stubs: { Calendar: CalendarStub } } });
+  const props = expect.objectContaining({ max: new Date(2022, 0, 1) });
+  expect(CalendarStub).toBeCalledWith(props, null);
+});
+it("should passing prop `mode` into Calendar component", () => {
+  render({
+    components: { Datepicker },
+    template: `
+      <Datepicker mode="year" />
+    `
+  }, { global: { stubs: { Calendar: CalendarStub } } });
+  const props = expect.objectContaining({ mode: "year" });
+  expect(CalendarStub).toBeCalledWith(props, null);
+});
+it("should have error style if prop error was provided", () => {
+  const screen = render({
+    components: { Datepicker },
+    template: `
+      <Datepicker error />
+    `
+  });
+  const datepicker = screen.queryByTestId("datepicker");
+  expect(datepicker).toHaveClass("datepicker--error", "state--error");
+});
+it("should display date range format on range mode", () => {
+  const model = ref([new Date(2022, 0, 1), new Date(2022, 0, 31)]);
+  const screen = render({
+    components: { Datepicker },
+    template: `
+      <Datepicker
+        v-model="model"
+        format="yyyy-MM-dd"
+        placeholder="Pick A Date"
+        range />
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const input = screen.queryByTestId("datepicker-input");
+  expect(input).toHaveValue("2022-01-01 - 2022-01-31");
+});
+it("should modify v-model:start and v-model:end when using props `range`", async () => {
+  const start = ref(new Date(2022, 0, 15));
+  const end = ref(new Date(2022, 0, 31));
+  const screen = render({
+    components: { Datepicker },
+    template: `
+      <Datepicker
+        v-model:start="start"
+        v-model:end="end"
+        range />
+    `,
+    setup() {
+      return { start, end };
+    }
+  });
+  const input = screen.queryByTestId("datepicker-input");
+  input.focus();
+  await nextTick();
+  const items = screen.queryAllByTestId("calendar-item");
+  const expected = [new Date(2022, 0, 1), new Date(2022, 0, 8)];
+  await fireEvent.click(items.at(13));
+  expect(start.value).toBeDate();
+  expect(end.value).toBeUndefined();
+  await fireEvent.click(items.at(20));
+  expect(start.value).toBeDate();
+  expect(end.value).toBeDate();
+  expect(start.value.toISOString()).toBe(expected[0].toISOString());
+  expect(end.value.toISOString()).toBe(expected[1].toISOString());
+  expect(input).toHaveValue("01/01/2022 - 08/01/2022");
+  start.value = void 0;
+  end.value = void 0;
+  await nextTick();
+  expect(input).toHaveValue("");
+  start.value = new Date(2023, 0, 1);
+  end.value = new Date(2023, 1, 1);
+  await nextTick();
+  expect(input).toHaveValue("01/01/2023 - 01/02/2023");
+});
+it("should show clear button when prop `clearable`", async () => {
+  const model = ref(new Date(2022, 0, 1));
+  const screen = render({
+    components: { Datepicker },
+    template: `
+      <Datepicker
+        v-model="model"
+        format="yyyy-MM-dd"
+        placeholder="Pick A Date"
+        clearable />
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const input = screen.queryByTestId("datepicker-input");
+  const clear = screen.queryByTestId("input-clear");
+  expect(input).toHaveValue("2022-01-01");
+  expect(clear).toBeVisible();
+  await fireEvent.click(clear);
+  expect(model.value).toBeUndefined();
+  expect(clear).not.toBeVisible();
+});