@privyid/persona 1.1.1 → 1.2.0

package/dist/components/sidebar-menu/index.spec.mjs

@@ -0,0 +1,234 @@
+import { defineMenu, filterMenu } from "./index.mjs";
+describe("filterMenu", () => {
+  it("should not filter anything if access not defined", () => {
+    const menus = defineMenu([
+      {
+        items: [
+          {
+            name: "dashboard",
+            label: "Dashboard",
+            url: "/"
+          },
+          {
+            name: "document",
+            label: "Documents",
+            url: "/",
+            collapsible: true,
+            submenu: [
+              {
+                name: "need-action",
+                label: "Need Action",
+                url: "/"
+              },
+              {
+                name: "in-progress",
+                label: "In Progress",
+                url: "/"
+              },
+              {
+                name: "others",
+                label: "Others",
+                url: "/"
+              }
+            ]
+          },
+          {
+            name: "contact",
+            label: "Contacts",
+            url: "/"
+          }
+        ]
+      },
+      {
+        condensed: true,
+        title: "Quick Jump",
+        items: [
+          {
+            name: "rejects",
+            label: "Rejects",
+            url: "/"
+          },
+          {
+            name: "archives",
+            label: "Archives",
+            url: "/"
+          }
+        ]
+      },
+      {
+        bottom: true,
+        items: [
+          {
+            name: "settings",
+            label: "Settings",
+            url: "/"
+          },
+          {
+            name: "english",
+            label: "English",
+            url: "/",
+            icon: "./assets/images/img-flag.svg"
+          }
+        ]
+      }
+    ]);
+    expect(filterMenu(menus, "personal")).toStrictEqual(menus);
+  });
+  it("should filter out menu which not in access", () => {
+    const menus = defineMenu([
+      {
+        title: "FAQ",
+        access: "*"
+      },
+      {
+        items: [
+          {
+            name: "dashboard",
+            label: "Dashboard",
+            url: "/",
+            access: ["*"]
+          },
+          {
+            name: "document",
+            label: "Documents",
+            url: "/",
+            collapsible: true,
+            submenu: [
+              {
+                name: "need-action",
+                label: "Need Action",
+                url: "/",
+                access: ["sysadmin", "personal"]
+              },
+              {
+                name: "in-progress",
+                label: "In Progress",
+                url: "/"
+              },
+              {
+                name: "others",
+                label: "Others",
+                url: "/",
+                access: ["sysadmin"]
+              }
+            ]
+          },
+          {
+            name: "contact",
+            label: "Contacts",
+            url: "/",
+            access: ["sysadmin"]
+          }
+        ]
+      },
+      {
+        condensed: true,
+        title: "SysAdmin Center",
+        access: "sysadmin",
+        items: [
+          {
+            name: "Dashboard",
+            label: "Dashboard",
+            url: "/admin"
+          }
+        ]
+      },
+      {
+        condensed: true,
+        title: "Quick Jump",
+        items: [
+          {
+            name: "rejects",
+            label: "Rejects",
+            url: "/"
+          },
+          {
+            name: "archives",
+            label: "Archives",
+            url: "/"
+          }
+        ]
+      },
+      {
+        bottom: true,
+        items: [
+          {
+            name: "settings",
+            label: "Settings",
+            url: "/",
+            access: "sysadmin"
+          },
+          {
+            name: "english",
+            label: "English",
+            url: "/",
+            icon: "./assets/images/img-flag.svg"
+          }
+        ]
+      }
+    ]);
+    const output = filterMenu(menus, "personal");
+    expect(output).toStrictEqual([
+      {
+        title: "FAQ",
+        access: "*"
+      },
+      {
+        items: [
+          {
+            name: "dashboard",
+            label: "Dashboard",
+            url: "/",
+            access: ["*"]
+          },
+          {
+            name: "document",
+            label: "Documents",
+            url: "/",
+            collapsible: true,
+            submenu: [
+              {
+                name: "need-action",
+                label: "Need Action",
+                url: "/",
+                access: ["sysadmin", "personal"]
+              },
+              {
+                name: "in-progress",
+                label: "In Progress",
+                url: "/"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        condensed: true,
+        title: "Quick Jump",
+        items: [
+          {
+            name: "rejects",
+            label: "Rejects",
+            url: "/"
+          },
+          {
+            name: "archives",
+            label: "Archives",
+            url: "/"
+          }
+        ]
+      },
+      {
+        bottom: true,
+        items: [
+          {
+            name: "english",
+            label: "English",
+            url: "/",
+            icon: "./assets/images/img-flag.svg"
+          }
+        ]
+      }
+    ]);
+  });
+});

package/dist/components/signature-draw/SignatureDraw.spec.d.ts

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

package/dist/components/signature-draw/SignatureDraw.spec.mjs

@@ -0,0 +1,61 @@
+import { vi } from "vitest";
+import { nextTick, ref } from "vue-demi";
+import { fireEvent, render } from "@testing-library/vue";
+import { useMediaQuery, setMediaQuery } from "./__mocks__/use-window-size.mjs";
+import { triggerDraw, useDraw } from "./__mocks__/use-draw.mjs";
+import * as canvas from "./__mocks__/canvas.mjs";
+import * as image from "./__mocks__/image.mjs";
+import SignatureDraw from "./SignatureDraw.vue";
+import { delay } from "nanodelay";
+vi.mock("./utils/use-draw.ts", () => ({ default: useDraw }));
+vi.mock("./utils/canvas.ts", () => canvas);
+vi.mock("./utils/image.ts", () => image);
+vi.mock("@vueuse/core", async () => {
+  const vueuse = await vi.importActual("@vueuse/core");
+  return {
+    ...vueuse,
+    useMediaQuery
+  };
+});
+vi.spyOn(window.URL, "createObjectURL").mockImplementation((file) => {
+  return `blob://${file.name}`;
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+it("should use signature based on media-query", async () => {
+  await setMediaQuery("mobile");
+  const screen = render({
+    components: { SignatureDraw },
+    template: "<SignatureDraw />"
+  });
+  await delay(0);
+  let mobile = screen.queryByTestId("signature-draw-mobile");
+  let desktop = screen.queryByTestId("signature-draw-desktop");
+  expect(mobile).toBeInTheDocument();
+  expect(desktop).not.toBeInTheDocument();
+  await setMediaQuery("desktop");
+  mobile = screen.queryByTestId("signature-draw-mobile");
+  desktop = screen.queryByTestId("signature-draw-desktop");
+  expect(mobile).not.toBeInTheDocument();
+  expect(desktop).toBeInTheDocument();
+});
+it("should passthrought v-model", async () => {
+  await setMediaQuery("desktop");
+  const model = ref("");
+  const screen = render({
+    components: { SignatureDraw },
+    template: '<SignatureDraw v-model.base64="model" />',
+    setup() {
+      return { model };
+    }
+  });
+  await delay(0);
+  triggerDraw();
+  await nextTick();
+  expect(model.value).toStartWith("data:image/png");
+  const reset = screen.queryByTestId("signature-draw-reset");
+  expect(reset).toBeInTheDocument();
+  await fireEvent.click(reset);
+  expect(model.value).toBe("");
+});

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

@@ -23,73 +23,63 @@
   </template>
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
+<script setup>
 import {
   computed,
   onMounted,
-  ref,
-} from 'vue-demi'
-import SignatureDrawMobile from './SignatureDrawMobile.vue'
-import SignatureDrawDesktop from './SignatureDrawDesktop.vue'
-import type { ModelModifier } from '../dropzone'
-import { useMediaQuery } from '@vueuse/core'
-import { createSpinner } from '../avatar/utils/create-image'
-
+  ref
+} from "vue-demi";
+import SignatureDrawMobile from "./SignatureDrawMobile.vue";
+import SignatureDrawDesktop from "./SignatureDrawDesktop.vue";
+import { useMediaQuery } from "@vueuse/core";
+import { createSpinner } from "../avatar/utils/create-image";
 defineProps({
   modelValue: {
-    type   : [String, globalThis.File],
-    default: '',
+    type: [String, globalThis.File],
+    default: ""
   },
   modelModifiers: {
-    type   : Object as PropType<ModelModifier>,
-    default: () => ({} as ModelModifier),
+    type: Object,
+    default: () => ({})
   },
   width: {
-    type   : Number,
-    default: 430,
+    type: Number,
+    default: 430
   },
   height: {
-    type   : Number,
-    default: 230,
+    type: Number,
+    default: 230
   },
   color: {
-    type   : String,
-    default: '#000000',
+    type: String,
+    default: "#000000"
   },
   placeholder: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   resetLabel: {
-    type   : String,
-    default: 'Reset',
+    type: String,
+    default: "Reset"
   },
   openDrawLabel: {
-    type   : String,
-    default: 'Click to Draw',
+    type: String,
+    default: "Click to Draw"
   },
   closeDrawLabel: {
-    type   : String,
-    default: 'Save',
-  },
-})
-
-defineEmits<{
-  'update:modelValue': [unknown],
-}>()
-
-const ready     = ref(false)
-const isDesktop = useMediaQuery('(min-width: 768px)')
-const view      = computed(() => {
-  return isDesktop.value
-    ? SignatureDrawDesktop
-    : SignatureDrawMobile
-})
-
+    type: String,
+    default: "Save"
+  }
+});
+defineEmits(["update:modelValue"]);
+const ready = ref(false);
+const isDesktop = useMediaQuery("(min-width: 768px)");
+const view = computed(() => {
+  return isDesktop.value ? SignatureDrawDesktop : SignatureDrawMobile;
+});
 onMounted(() => {
-  ready.value = true
-})
+  ready.value = true;
+});
 </script>
 
 <style lang="postcss">

package/dist/components/signature-draw/SignatureDraw.vue.d.ts

@@ -0,0 +1,98 @@
+import type { PropType } from 'vue-demi';
+import type { ModelModifier } from '../dropzone';
+declare const _default: 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;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    resetLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    openDrawLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeDrawLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: unknown) => 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;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    resetLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    openDrawLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeDrawLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+}>, {
+    modelValue: string | File;
+    width: number;
+    height: number;
+    color: string;
+    placeholder: string;
+    modelModifiers: ModelModifier;
+    resetLabel: string;
+    openDrawLabel: string;
+    closeDrawLabel: string;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/signature-draw/SignatureDrawDesktop.spec.d.ts

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

package/dist/components/signature-draw/SignatureDrawDesktop.spec.mjs

@@ -0,0 +1,168 @@
+import { vi } from "vitest";
+import { fireEvent, render } from "@testing-library/vue";
+import { useDraw, triggerDraw } from "./__mocks__/use-draw.mjs";
+import * as canvas from "./__mocks__/canvas.mjs";
+import SignatureDrawDesktop from "./SignatureDrawDesktop.vue";
+import { nextTick, ref } from "vue-demi";
+vi.mock("./utils/use-draw.ts", () => ({ default: useDraw }));
+vi.mock("./utils/canvas.ts", () => canvas);
+beforeEach(() => {
+  vi.spyOn(window.URL, "createObjectURL").mockImplementation((file) => {
+    return `blob://${file.name}`;
+  });
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+it("should render properly", () => {
+  const screen = render({
+    components: { SignatureDrawDesktop },
+    template: "<SignatureDrawDesktop />"
+  });
+  const draw = screen.queryByTestId("signature-draw-desktop");
+  expect(draw).toBeInTheDocument();
+});
+it("should change canvas width if prop `width` is provided", () => {
+  const screen = render({
+    components: { SignatureDrawDesktop },
+    template: '<SignatureDrawDesktop :width="400" />'
+  });
+  const canvas2 = screen.queryByTestId("signature-draw-canvas");
+  expect(canvas2).toBeInTheDocument();
+  expect(canvas2).toHaveAttribute("width", "400");
+});
+it("should change canvas height if prop `height` is provided", () => {
+  const screen = render({
+    components: { SignatureDrawDesktop },
+    template: '<SignatureDrawDesktop :height="400" />'
+  });
+  const canvas2 = screen.queryByTestId("signature-draw-canvas");
+  expect(canvas2).toBeInTheDocument();
+  expect(canvas2).toHaveAttribute("height", "400");
+});
+it("should showing placeholder if prop `placeholder` is provided", () => {
+  const screen = render({
+    components: { SignatureDrawDesktop },
+    template: '<SignatureDrawDesktop placeholder="Please Draw Here" />'
+  });
+  const placeholder = screen.queryByText("Please Draw Here");
+  expect(placeholder).toBeInTheDocument();
+});
+it("should hide placeholder if canvas not blank", async () => {
+  const screen = render({
+    components: { SignatureDrawDesktop },
+    template: '<SignatureDrawDesktop placeholder="Please Draw Here" />'
+  });
+  triggerDraw();
+  await nextTick();
+  const placeholder = screen.queryByText("Please Draw Here");
+  expect(placeholder).not.toBeInTheDocument();
+});
+it("should draw line if user draw over canvas", () => {
+  const screen = render({
+    components: { SignatureDrawDesktop },
+    template: "<SignatureDrawDesktop />"
+  });
+  const draw = screen.queryByTestId("signature-draw-desktop");
+  triggerDraw();
+  expect(draw).toBeInTheDocument();
+  expect(canvas.drawLine).toBeCalled();
+});
+it("should draw line with color if `color` prop is provided", () => {
+  const screen = render({
+    components: { SignatureDrawDesktop },
+    template: '<SignatureDrawDesktop color="#398A87" />'
+  });
+  const drawCanvas = screen.queryByTestId("signature-draw-canvas");
+  triggerDraw();
+  expect(drawCanvas).toBeInTheDocument();
+  expect(canvas.drawLine).toBeCalledWith(drawCanvas, [
+    0,
+    0,
+    3.6866666666666665,
+    3.6866666666666665
+  ], { color: "#398A87" });
+});
+it("should replace existing drawn line if color changed", async () => {
+  const color = ref("#000000");
+  const model = ref("");
+  const screen = render({
+    components: { SignatureDrawDesktop },
+    template: '<SignatureDrawDesktop v-model="model" :color="color" />',
+    setup() {
+      return { color, model };
+    }
+  });
+  const drawCanvas = screen.queryByTestId("signature-draw-canvas");
+  triggerDraw();
+  color.value = "#398A87";
+  await nextTick();
+  expect(drawCanvas).toBeInTheDocument();
+  expect(canvas.replaceColor).toBeCalledWith(drawCanvas, "#398A87");
+  expect(model.value).toBeInstanceOf(File);
+});
+it("should reset and clear all the canvas if reset clicked", async () => {
+  const screen = render({
+    components: { SignatureDrawDesktop },
+    template: "<SignatureDrawDesktop />"
+  });
+  triggerDraw();
+  await nextTick();
+  const reset = screen.queryByTestId("signature-draw-reset");
+  expect(reset).toBeInTheDocument();
+  await fireEvent.click(reset);
+  expect(canvas.clearAll).toBeCalled();
+  expect(reset).not.toBeInTheDocument();
+});
+it("should change reset button label if prop `resetLabel` is provided", async () => {
+  const screen = render({
+    components: { SignatureDrawDesktop },
+    template: '<SignatureDrawDesktop reset-label="Hapus"  />'
+  });
+  triggerDraw();
+  await nextTick();
+  const reset = screen.queryByTestId("signature-draw-reset");
+  expect(reset).toBeInTheDocument();
+  expect(reset).toHaveTextContent("Hapus");
+});
+it("should modify state in v-model", async () => {
+  const model = ref("");
+  const color = ref("#000000");
+  const screen = render({
+    components: { SignatureDrawDesktop },
+    template: `<SignatureDrawDesktop
+      v-model.base64="model"
+      :color="color"
+    />`,
+    setup() {
+      return { model, color };
+    }
+  });
+  triggerDraw();
+  await nextTick();
+  expect(model.value).toStartWith("data:image/png");
+  const reset = screen.queryByTestId("signature-draw-reset");
+  expect(reset).toBeInTheDocument();
+  await fireEvent.click(reset);
+  expect(model.value).toBe("");
+  triggerDraw();
+  await nextTick();
+  color.value = "#398A87";
+  await nextTick();
+  expect(model.value).toStartWith("data:image/png");
+});
+it("should place the image if v-model data is provided", async () => {
+  const model = ref("data:image/png;base64,iVBORw0KGg...");
+  const screen = render({
+    components: { SignatureDrawDesktop },
+    template: '<SignatureDrawDesktop v-model="model" />',
+    setup() {
+      return { model };
+    }
+  });
+  await nextTick();
+  const drawCanvas = screen.queryByTestId("signature-draw-canvas");
+  const reset = screen.queryByTestId("signature-draw-reset");
+  expect(reset).toBeInTheDocument();
+  expect(canvas.placeImage).toBeCalledWith(drawCanvas, "data:image/png;base64,iVBORw0KGg...");
+});