@privyid/persona 1.1.2 → 1.2.0

package/dist/components/pdf-viewer/PdfViewer.vue.d.ts

@@ -0,0 +1,187 @@
+import type { PropType, VNode } from 'vue-demi';
+import type { LayoutVariant } from '.';
+import type { OpenDocConfig } from './utils/use-viewer';
+import type { PDFJS, PDFJSViewer } from './utils/pdfjs';
+declare function zoomIn(): void;
+declare function zoomOut(): void;
+declare function next(): void;
+declare function prev(): void;
+declare function first(): void;
+declare function last(): void;
+interface PdfViewerSlotScope {
+    page: number;
+    scale: number;
+    totalPage: number;
+    doc: PDFJS.PDFDocumentProxy;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    next: () => void;
+    prev: () => void;
+    first: () => void;
+    last: () => void;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        header(props: PdfViewerSlotScope): VNode[];
+        container(props: PdfViewerSlotScope): VNode[];
+        body(props: PdfViewerSlotScope): VNode[];
+        footer(props: PdfViewerSlotScope): VNode[];
+        default(props: PdfViewerSlotScope): VNode[];
+    }> & {
+        header(props: PdfViewerSlotScope): VNode[];
+        container(props: PdfViewerSlotScope): VNode[];
+        body(props: PdfViewerSlotScope): VNode[];
+        footer(props: PdfViewerSlotScope): VNode[];
+        default(props: PdfViewerSlotScope): VNode[];
+    };
+    refs: {
+        root: HTMLDivElement;
+        container: HTMLDivElement;
+        viewer: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        default: string;
+    };
+    page: {
+        type: NumberConstructor;
+        default: number;
+    };
+    scale: {
+        type: NumberConstructor;
+        default: number;
+    };
+    password: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    layout: {
+        type: PropType<LayoutVariant>;
+        default: string;
+    };
+    ratio: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    offsetTop: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    config: {
+        type: PropType<OpenDocConfig>;
+        default: () => {};
+    };
+    firstNavLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    lastNavLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    numOfPagesNavLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    page: import("vue-demi").Ref<number, number>;
+    scale: import("vue-demi").Ref<number, number>;
+    root: import("vue-demi").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    container: import("vue-demi").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    viewer: import("vue-demi").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    loading: import("vue-demi").WritableComputedRef<boolean, boolean>;
+    totalPage: import("vue-demi").ComputedRef<number>;
+    zoomIn: typeof zoomIn;
+    zoomOut: typeof zoomOut;
+    next: typeof next;
+    prev: typeof prev;
+    openDoc: (url: string, password?: string, config?: OpenDocConfig) => Promise<void>;
+    closeDoc: () => Promise<void>;
+    first: typeof first;
+    last: typeof last;
+}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    error: (args_0: Error) => void;
+    loading: (args_0: import("pdfjs-dist/types/src/display/api").OnProgressParameters) => void;
+    ready: (args_0: PDFJSViewer.PDFViewer) => void;
+    "update:page": (args_0: number) => void;
+    loaded: (args_0: import("pdfjs-dist/types/src/display/api").PDFDocumentProxy) => void;
+    "error-password": (args_0: Error) => void;
+    "update:scale": (args_0: number) => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        default: string;
+    };
+    page: {
+        type: NumberConstructor;
+        default: number;
+    };
+    scale: {
+        type: NumberConstructor;
+        default: number;
+    };
+    password: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    layout: {
+        type: PropType<LayoutVariant>;
+        default: string;
+    };
+    ratio: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    offsetTop: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    config: {
+        type: PropType<OpenDocConfig>;
+        default: () => {};
+    };
+    firstNavLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    lastNavLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    numOfPagesNavLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onError?: ((args_0: Error) => any) | undefined;
+    onLoading?: ((args_0: import("pdfjs-dist/types/src/display/api").OnProgressParameters) => any) | undefined;
+    onReady?: ((args_0: PDFJSViewer.PDFViewer) => any) | undefined;
+    "onUpdate:page"?: ((args_0: number) => any) | undefined;
+    onLoaded?: ((args_0: import("pdfjs-dist/types/src/display/api").PDFDocumentProxy) => any) | undefined;
+    "onError-password"?: ((args_0: Error) => any) | undefined;
+    "onUpdate:scale"?: ((args_0: number) => any) | undefined;
+}>, {
+    src: string;
+    page: number;
+    layout: LayoutVariant;
+    offsetTop: string | number;
+    password: string;
+    scale: number;
+    ratio: string | number;
+    firstNavLabel: string;
+    lastNavLabel: string;
+    numOfPagesNavLabel: string;
+    config: OpenDocConfig;
+}, {}, {}, {}, 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/pdf-viewer/__mocks__/use-viewer.d.ts

@@ -0,0 +1,40 @@
+export declare const loadEvent: import("@vueuse/core").EventHook<import("pdfjs-dist/types/src/display/api").PDFDocumentProxy>;
+export declare const errorEvent: import("@vueuse/core").EventHook<Error>;
+export declare const readyEvent: import("@vueuse/core").EventHook<any>;
+export declare const loadingEvent: import("@vueuse/core").EventHook<import("pdfjs-dist/types/src/display/api").OnProgressParameters>;
+export declare const context: {
+    page: number;
+    scale: number;
+    totalPage: number;
+    loading: boolean;
+    error: undefined;
+    ready: boolean;
+    pdfDoc: undefined;
+    pdfEventBus: undefined;
+    pdfViewer: undefined;
+    pdfLoadingTask: undefined;
+    pdfLinkService: undefined;
+    pdfJS: undefined;
+};
+export declare const openDoc: import("vitest").Mock<[src: string, password?: string | undefined], void>;
+export declare const closeDoc: import("vitest").Mock<any[], any>;
+export declare function useViewer(): {
+    openDoc: import("vitest").Mock<[src: string, password?: string | undefined], void>;
+    closeDoc: import("vitest").Mock<any[], any>;
+    onLoaded: import("@vueuse/core").EventHookOn<import("pdfjs-dist/types/src/display/api").PDFDocumentProxy>;
+    onError: import("@vueuse/core").EventHookOn<Error>;
+    onReady: import("@vueuse/core").EventHookOn<any>;
+    onLoading: import("@vueuse/core").EventHookOn<import("pdfjs-dist/types/src/display/api").OnProgressParameters>;
+    page: import("vue-demi").Ref<number, number>;
+    scale: import("vue-demi").Ref<number, number>;
+    totalPage: import("vue-demi").Ref<number, number>;
+    loading: import("vue-demi").Ref<boolean, boolean>;
+    error: import("vue-demi").Ref<undefined, undefined>;
+    ready: import("vue-demi").Ref<boolean, boolean>;
+    pdfDoc: import("vue-demi").Ref<undefined, undefined>;
+    pdfEventBus: import("vue-demi").Ref<undefined, undefined>;
+    pdfViewer: import("vue-demi").Ref<undefined, undefined>;
+    pdfLoadingTask: import("vue-demi").Ref<undefined, undefined>;
+    pdfLinkService: import("vue-demi").Ref<undefined, undefined>;
+    pdfJS: import("vue-demi").Ref<undefined, undefined>;
+};

package/dist/components/pdf-viewer/__mocks__/use-viewer.mjs

@@ -0,0 +1,56 @@
+import { vi } from "vitest";
+import { createEventHook } from "@vueuse/core";
+import { reactive, toRefs } from "vue-demi";
+export const loadEvent = createEventHook();
+export const errorEvent = createEventHook();
+export const readyEvent = createEventHook();
+export const loadingEvent = createEventHook();
+export const context = reactive({
+  page: 1,
+  scale: 1,
+  totalPage: 0,
+  loading: true,
+  error: void 0,
+  ready: false,
+  pdfDoc: void 0,
+  pdfEventBus: void 0,
+  pdfViewer: void 0,
+  pdfLoadingTask: void 0,
+  pdfLinkService: void 0,
+  pdfJS: void 0
+});
+export const openDoc = vi.fn((src, password) => {
+  if (src) {
+    context.loading = true;
+    setTimeout(() => {
+      if (src.includes("error")) {
+        context.error = new Error("Doc not loaded");
+        void errorEvent.trigger(context.error);
+      } else if (src.includes("protected") && !password) {
+        context.error = new Error("Doc not loaded");
+        context.error.name = "PasswordException";
+        void errorEvent.trigger(context.error);
+      } else {
+        void loadingEvent.trigger({ total: 100, loaded: 10 });
+        context.ready = true;
+        context.totalPage = 5;
+        void loadingEvent.trigger({ total: 100, loaded: 100 });
+        void loadEvent.trigger({});
+        void readyEvent.trigger({});
+      }
+      context.loading = false;
+    }, 1);
+  }
+});
+export const closeDoc = vi.fn();
+export function useViewer() {
+  return {
+    ...toRefs(context),
+    openDoc,
+    closeDoc,
+    onLoaded: loadEvent.on,
+    onError: errorEvent.on,
+    onReady: readyEvent.on,
+    onLoading: loadingEvent.on
+  };
+}

package/dist/components/pdf-viewer/__mocks__/use-window-size.d.ts

@@ -0,0 +1,4 @@
+export declare function setWindowSize(size: number): void;
+export declare function useWindowSize(): {
+    height: import("vue-demi").Ref<number, number>;
+};

package/dist/components/pdf-viewer/__mocks__/use-window-size.mjs

@@ -0,0 +1,8 @@
+import { ref } from "vue-demi";
+const height = ref(0);
+export function setWindowSize(size) {
+  height.value = size;
+}
+export function useWindowSize() {
+  return { height };
+}

package/dist/components/pdf-viewer/index.md

@@ -0,0 +1,214 @@
+---
+title: PDF Viewer · Components
+description: Open and View PDF Document
+---
+<script setup>
+  import pPdfViewer from './PdfViewer.vue'
+  import pNavbar from '../navbar/Navbar.vue'
+  import pNavbarBrand from '../navbar/NavbarBrand.vue'
+  import pNavbarNav from '../navbar/NavbarNav.vue'
+  import pNavItem from '../nav/NavItem.vue'
+  import pButton from '../button/Button.vue'
+  import pFormGroup from '../form-group/FormGroup.vue'
+  import pInputPassword from '../input-password/InputPassword.vue'
+  import pBanner from '../banner/Banner.vue'
+  import pToggle from '../toggle/Toggle.vue'
+  import { ref } from 'vue-demi'
+  import { withBase } from 'vitepress'
+
+  const FILE          = withBase('/assets/pdf/Calibrator-v3.pdf')
+  const FILE_PROTECT  = withBase('/assets/pdf/Calibrator-v3_protected.pdf')
+  const IMG_FIXED_FIT = withBase('/assets/images/fixed-vs-fit.svg')
+
+  const password = ref('')
+  const layout   = ref('fixed')
+</script>
+
+<style lang="postcss">
+  .preview > .pdf {
+    @apply z-[2];
+  }
+</style>
+
+# PDF Viewer
+> Open and View PDF Document
+
+## Usage
+
+### Simple Usage
+
+<preview>
+  <p-pdf-viewer :src="FILE" />
+</preview>
+
+```vue
+<template>
+  <p-pdf-viewer :src="FILE" />
+</template>
+
+<script setup>
+  import FILE from '~/assets/Calibrator-v3.pdf'
+</script>
+```
+
+### With Header And Footer
+
+<preview>
+  <p-pdf-viewer :src="FILE">
+    <template #header>
+      <p-navbar>
+        <p-navbar-brand>
+          <img :src="withBase('/assets/images/icon-privy.svg')" />
+        </p-navbar-brand>
+        <p-navbar-nav>
+          <p-nav-item active>Label</p-nav-item>
+          <p-nav-item>Label</p-nav-item>
+          <p-nav-item>Label</p-nav-item>
+        </p-navbar-nav>
+      </p-navbar>
+    </template>
+    <template #footer>
+      <div class="p-4 text-center">
+        <p-button color="primary">
+          Action Button
+        </p-button>
+      </div>
+    </template>
+  </p-pdf-viewer>
+</preview>
+
+```vue
+<template>
+  <p-pdf-viewer :src="FILE">
+    <template #header>
+      <p-navbar>
+        <p-navbar-brand>
+          <img src="../../public/assets/images/icon-privy.svg" />
+        </p-navbar-brand>
+        <p-navbar-nav>
+          <p-nav-item active>Label</p-nav-item>
+          <p-nav-item>Label</p-nav-item>
+          <p-nav-item>Label</p-nav-item>
+        </p-navbar-nav>
+      </p-navbar>
+    </template>
+    <template #footer>
+      <div class="p-4 text-center">
+        <p-button color="primary">
+          Action Button
+        </p-button>
+      </div>
+    </template>
+  </p-pdf-viewer>
+</template>
+```
+
+## Handle Document with Password
+
+If your document is require a password to open, you can pass the password to prop `password`.
+
+<p-banner :dismissable="false">
+  This component doesn't provide any UI for handling input password. You have to do it yourself.
+</p-banner>
+
+<preview class="flex-col">
+  <p-form-group
+    label="Password"
+    description="The password is: 123456">
+    <p-input-password
+      v-model="password" />
+  </p-form-group>
+  <p-pdf-viewer
+    :src="FILE_PROTECT"
+    :password="password" />
+</preview>
+
+```vue
+<template>
+  <p-form-group
+    label="Password"
+    description="The password is: 123456">
+    <p-input-password
+      v-model="password" />
+  </p-form-group>
+  <p-pdf-viewer
+    :src="FILE_PROTECT"
+    :password="password" />
+</template>
+
+<script setup>
+  import FILE_PROTECT from '~/assets/Calibrator-v3_protected.pdf?url'
+
+  const password = ref('')
+</script>
+```
+
+## Layout Fit Mode
+
+Set `layout` prop to `fit` to enable layout fit mode. It will adapt the viewer height with viewport, best for combining with [PDFObject](/components/pdf-object/).
+
+<a :href="IMG_FIXED_FIT" target="_blank">
+  <img class="w-full" :src="IMG_FIXED_FIT" alt="fixed-vs-fit-ilustration" />
+</a>
+
+**Try it**
+
+<div class="mb-4">
+  <p-toggle value="fit" unchecked-value="fixed" v-model="layout">
+    Enable Layout fit
+  </p-toggle>
+</div>
+
+<preview>
+  <p-pdf-viewer
+    :src="FILE"
+    :layout="layout"
+    offset-top="72" />
+</preview>
+
+```vue
+<template>
+  <p-pdf-viewer
+    :src="FILE"
+    layout="fit"
+    offset-top="72" />
+</template>
+```
+
+## API
+
+### Props
+
+| Props                    |   Type   | Default | Description                                                                |
+|--------------------------|:--------:|:-------:|----------------------------------------------------------------------------|
+| `src`                    | `String` |   `-`   | Document source URL                                                        |
+| `password`               | `String` |   `-`   | Document password                                                          |
+| `layout`                 | `String` | `fixed` | Viewer layout sizing, valid value: `fixed`, `fit`                          |
+| `offsetTop`              | `Number` |   `0`   | Margin top when using layout `fit`                                         |
+| `page`                   | `Number` |   `1`   | `v-model:page` value                                                       |
+| `scale`                  | `Number` |   `1`   | `v-model:scale` value                                                      |
+| `first-nav-label`        | `String` | `First` | Label to place in the first navigation button                              |
+| `last-nav-label`         | `String` | `Last`  | Label to place in the last navigation button                               |  
+| `num-of-pages-nav-label` | `String` | `of`    | Label to place on the preposition number of pages navigation button        |
+
+### Slots
+
+| Name      | Description                                            |
+|-----------|--------------------------------------------------------|
+| `default` | Content to place [PDF Object](/components/pdf-object/) |
+| `header`  | Content to place as header                             |
+| `footer`  | Content to place as footer                             |
+
+### Events
+
+| Name             | Arguments     | Description                                                |
+|------------------|---------------|------------------------------------------------------------|
+| `loading`        | ProgressEvent | Event when loading document                                |
+| `loaded`         | -             | Event when document loaded                                 |
+| `error`          | Error         | Event when got error when loading the document             |
+| `error-password` | Error         | Event when document require a password or password invalid |
+
+## See Also
+
+- [PDF Object](/components/pdf-object/)
+- <a :href="FILE" target="_blank" download>Download Calibrator v3.0.0</a>

package/dist/components/pdf-viewer/utils/use-idle.spec.d.ts

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

package/dist/components/pdf-viewer/utils/use-idle.spec.mjs

@@ -0,0 +1,14 @@
+import { fireEvent } from "@testing-library/dom";
+import { vi } from "vitest";
+import { useIdle } from "./use-idle.mjs";
+it("should true if no activities in spesific time", () => {
+  vi.useFakeTimers();
+  const idle = useIdle(document.body, 5e3);
+  fireEvent.mouseMove(document.body);
+  vi.advanceTimersByTime(2e3);
+  expect(idle.value).toBe(false);
+  fireEvent.mouseMove(document.body);
+  expect(idle.value).toBe(false);
+  vi.advanceTimersByTime(7e3);
+  expect(idle.value).toBe(true);
+});

package/dist/components/pdf-viewer/utils/use-sticky.spec.d.ts

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

package/dist/components/pdf-viewer/utils/use-sticky.spec.mjs

@@ -0,0 +1,113 @@
+import { fireEvent, render } from "@testing-library/vue";
+import { vi } from "vitest";
+import { useWindowSize, setWindowSize } from "../__mocks__/use-window-size.mjs";
+import { templateRef } from "@vueuse/core";
+import { useSticky } from "./use-sticky.mjs";
+vi.mock("@vueuse/core", async () => {
+  const vueuse = await vi.importActual("@vueuse/core");
+  return {
+    ...vueuse,
+    useWindowSize
+  };
+});
+afterEach(() => {
+  vi.resetAllMocks();
+});
+it("should set element height to fit window height", async () => {
+  const screen = render({
+    template: `
+      <div>
+        <div
+          data-testid="target"
+          ref="target">
+          Box
+        </div>
+      </div>
+    `,
+    setup() {
+      const target2 = templateRef("target");
+      const sticky = useSticky(target2);
+      sticky.value = true;
+      return {};
+    }
+  });
+  const target = screen.queryByTestId("target");
+  setWindowSize(1e3);
+  vi.spyOn(target.parentElement, "getBoundingClientRect").mockReturnValue({
+    top: 300,
+    y: 300,
+    x: 0,
+    left: 0,
+    width: 300,
+    height: 300,
+    bottom: 0,
+    right: 0,
+    toJSON: vi.fn()
+  });
+  vi.spyOn(target, "getBoundingClientRect").mockReturnValue({
+    top: 300,
+    y: 300,
+    x: 0,
+    left: 0,
+    width: 300,
+    height: 300,
+    bottom: 0,
+    right: 0,
+    toJSON: vi.fn()
+  });
+  await fireEvent.scroll(window);
+  expect(target).toBeInTheDocument();
+  expect(target).toHaveStyle({ height: "700px" });
+});
+it("should ", async () => {
+  const screen = render({
+    template: `
+      <div>
+        <div
+          data-testid="target"
+          ref="target">
+          Box
+        </div>
+      </div>
+    `,
+    setup() {
+      const target2 = templateRef("target");
+      const sticky = useSticky(target2);
+      sticky.value = true;
+      return {};
+    }
+  });
+  const target = screen.queryByTestId("target");
+  setWindowSize(1e3);
+  vi.spyOn(target.parentElement, "getBoundingClientRect").mockReturnValue({
+    top: -50,
+    y: -50,
+    x: 0,
+    left: 0,
+    width: 300,
+    height: 300,
+    bottom: 0,
+    right: 0,
+    toJSON: vi.fn()
+  });
+  vi.spyOn(target, "getBoundingClientRect").mockReturnValue({
+    top: 0,
+    y: 0,
+    x: 0,
+    left: 0,
+    width: 300,
+    height: 300,
+    bottom: 0,
+    right: 0,
+    toJSON: vi.fn()
+  });
+  await fireEvent.scroll(window);
+  expect(target).toBeInTheDocument();
+  expect(target).toHaveStyle({
+    position: "fixed",
+    top: "0px",
+    left: "0px",
+    width: "300px",
+    height: "1000px"
+  });
+});

package/dist/components/popover/Popover.spec.d.ts

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

package/dist/components/popover/Popover.spec.mjs

@@ -0,0 +1,39 @@
+import { fireEvent, render } from "@testing-library/vue";
+import pPopover from "./Popover.vue";
+it("should able to show tooltip over activator element", async () => {
+  const screen = render({
+    components: { pPopover },
+    template: `
+        <p-popover>
+          <template #activator="{ toggle }">
+            <a href="javascript:void" data-testid="activator" @click="toggle">
+              Remove?
+            </a>
+          </template>
+          <template #default="{ hide }">
+            <div class="flex items-center space-x-2">
+              <span>Are you sure?</span>
+              <p-button data-testid="confirm" @click="hide()">
+                Yes
+              </p-button>
+              <p-button data-testid="cancel" @click="hide()">
+                Cancel
+              </p-button>
+            </div>
+          </template>
+        </p-popover>
+      `,
+    setup() {
+      return {};
+    }
+  });
+  const popover = screen.queryByTestId("popover");
+  const tooltip = screen.queryByTestId("popover-tooltip");
+  const activator = screen.queryByTestId("activator");
+  expect(popover).toBeInTheDocument();
+  expect(tooltip).not.toBeVisible();
+  await fireEvent.click(activator);
+  expect(tooltip).toBeVisible();
+  await fireEvent.click(activator);
+  expect(tooltip).not.toBeVisible();
+});