@privyid/persona 1.2.0 → 1.2.1-rc.0

package/dist/components/pdf-viewer/PdfNavigation.spec.mjs

@@ -1,107 +0,0 @@
-import { render, fireEvent } from "@testing-library/vue";
-import PdfNavigation from "./PdfNavigation.vue";
-import {
-  nextTick,
-  provide,
-  ref
-} from "vue-demi";
-import { PDF_VIEWER_CONTEXT } from "./index.mjs";
-function createContext() {
-  const page = ref(1);
-  const scale = ref(1);
-  const totalPage = ref(5);
-  function zoomIn() {
-    scale.value = Math.round(scale.value / 0.1) * 0.1 + 0.1;
-  }
-  function zoomOut() {
-    scale.value = Math.round(scale.value / 0.1) * 0.1 - 0.1;
-  }
-  function next() {
-    page.value++;
-  }
-  function prev() {
-    page.value--;
-  }
-  return {
-    page,
-    scale,
-    totalPage,
-    zoomIn,
-    zoomOut,
-    next,
-    prev
-  };
-}
-it("should mounted properly", () => {
-  const screen = render({
-    components: { PdfNavigation },
-    template: "<PdfNavigation />"
-  });
-  const navigation = screen.queryByTestId("pdf-navigation");
-  expect(navigation).toBeInTheDocument();
-});
-it("should changed zoom value if zoomIn or ZoomOut clicked", async () => {
-  const context = createContext();
-  const screen = render({
-    components: { PdfNavigation },
-    template: "<PdfNavigation />",
-    setup() {
-      provide(PDF_VIEWER_CONTEXT, context);
-      return {};
-    }
-  });
-  const zoomIn = screen.queryByTestId("pdf-zoom-in");
-  const zoomOut = screen.queryByTestId("pdf-zoom-out");
-  await fireEvent.click(zoomIn);
-  expect(context.scale.value).toBe(1.1);
-  await fireEvent.click(zoomOut);
-  await fireEvent.click(zoomOut);
-  expect(context.scale.value).toBe(0.9);
-});
-it("should changed page value if Next or Prev button clicked", async () => {
-  const context = createContext();
-  const screen = render({
-    components: { PdfNavigation },
-    template: "<PdfNavigation />",
-    setup() {
-      provide(PDF_VIEWER_CONTEXT, context);
-      return {};
-    }
-  });
-  const nextBtn = screen.queryByTestId("pdf-next");
-  const prevbtn = screen.queryByTestId("pdf-prev");
-  await fireEvent.click(nextBtn);
-  await fireEvent.click(nextBtn);
-  expect(context.page.value).toBe(3);
-  await fireEvent.click(prevbtn);
-  expect(context.page.value).toBe(2);
-});
-it("should changed page value if page selection was selected", async () => {
-  const context = createContext();
-  const screen = render({
-    components: { PdfNavigation },
-    template: "<PdfNavigation />",
-    setup() {
-      provide(PDF_VIEWER_CONTEXT, context);
-      return {};
-    }
-  });
-  const input = screen.queryByTestId("select-search");
-  input.focus();
-  await nextTick();
-  const items = screen.queryAllByTestId("select-item");
-  await fireEvent.click(items.at(2));
-  expect(context.page.value).toBe(3);
-});
-it('should be able to change num-of-pages, first and last navigation label via props "num-of-pages-nav-label", "first-nav-label" and "last-nav-label"', () => {
-  const screen = render({
-    components: { PdfNavigation },
-    template: '<PdfNavigation first-nav-label="Awal" last-nav-label="Akhir" num-of-pages-nav-label="dari" />'
-  });
-  const firstNavLabel = screen.queryByText("Awal");
-  const lastNavLabel = screen.queryByText("Akhir");
-  const numOfPagesLabel = screen.queryByText(/dari/i);
-  expect(firstNavLabel).toBeInTheDocument();
-  expect(lastNavLabel).toBeInTheDocument();
-  expect(numOfPagesLabel).toBeInTheDocument();
-});

package/dist/components/pdf-viewer/PdfNavigation.vue

@@ -1,165 +0,0 @@
-<template>
-  <div
-    data-testid="pdf-navigation"
-    class="pdf__navigation">
-    <div class="pdf__navigation-container">
-      <p-button
-        data-testid="pdf-zoom-out"
-        variant="ghost"
-        size="xs"
-        icon
-        @click="zoomOut">
-        <IconZoomOut />
-      </p-button>
-      <span class="pdf__navigation-scale">
-        {{ (scale * 100).toFixed(0) }}%
-      </span>
-      <p-button
-        data-testid="pdf-zoom-in"
-        variant="ghost"
-        size="xs"
-        icon
-        @click="zoomIn">
-        <IconZoomIn />
-      </p-button>
-      <p-divider vertical />
-      <p-select
-        v-model="page"
-        :options="pages"
-        size="xs" />
-      <span
-        data-testid="pdf-total"
-        class="pdf__navigation-total">
-        <slot name="num-of-pages-navigation">
-          {{ numOfPagesNavLabel }}
-        </slot> {{ totalPage }}</span>
-      <p-button
-        data-testid="pdf-start"
-        variant="ghost"
-        size="xs"
-        icon
-        @click="first">
-        <slot name="first-navigation">
-          {{ firstNavLabel }}
-        </slot>
-      </p-button>
-      <p-button
-        data-testid="pdf-prev"
-        variant="ghost"
-        size="xs"
-        icon
-        @click="prev">
-        <IconPrev />
-      </p-button>
-      <p-button
-        data-testid="pdf-next"
-        variant="ghost"
-        size="xs"
-        icon
-        @click="next">
-        <IconNext />
-      </p-button>
-      <p-button
-        data-testid="pdf-end"
-        variant="ghost"
-        size="xs"
-        icon
-        @click="last">
-        <slot name="last-navigation">
-          {{ lastNavLabel }}
-        </slot>
-      </p-button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from "vue-demi";
-import { usePdfContext } from ".";
-import IconZoomIn from "@privyid/persona-icon/vue/zoom-in/20.vue";
-import IconZoomOut from "@privyid/persona-icon/vue/zoom-out/20.vue";
-import IconPrev from "@privyid/persona-icon/vue/chevron-up/20.vue";
-import IconNext from "@privyid/persona-icon/vue/chevron-down/20.vue";
-import pButton from "../button/Button.vue";
-import pDivider from "../divider/Divider.vue";
-import pSelect from "../select/Select.vue";
-defineProps({
-  firstNavLabel: {
-    type: String,
-    default: "First"
-  },
-  lastNavLabel: {
-    type: String,
-    default: "Last"
-  },
-  numOfPagesNavLabel: {
-    type: String,
-    default: "of"
-  }
-});
-const {
-  page,
-  scale,
-  totalPage,
-  zoomIn,
-  zoomOut,
-  next,
-  prev,
-  first,
-  last
-} = usePdfContext();
-const pages = computed(() => {
-  return Array.from({ length: totalPage.value }).map((_, i) => {
-    return {
-      text: `${i + 1}`,
-      value: i + 1
-    };
-  });
-});
-</script>
-
-<style lang="postcss">
-.pdf {
-  &__navigation {
-    @apply absolute bottom-4 inset-x-0 justify-center items-center flex min-w-96 mx-auto z-10;
-
-    &-container {
-      @apply flex bg-inverse text-subtlest rounded p-2 space-x-1 items-center;
-      @apply dark:text-dark-default;
-
-      > .btn.btn--variant-ghost {
-        @apply text-subtlest hover:text-muted focus:text-muted;
-        @apply dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default;
-      }
-
-      > .select {
-        --p-dropdown-size: theme(width.32);
-
-        @apply w-16;
-
-        > .input {
-          @apply bg-default-alpha;
-          @apply dark:bg-dark-default-alpha;
-
-          > .input__form {
-            @apply border-subtle-alpha bg-default-alpha text-state-emphasis;
-            @apply dark:border-dark-subtle-alpha dark:bg-dark-default-alpha dark:text-dark-state-emphasis;
-          }
-        }
-      }
-
-      > .divider {
-        @apply border-none bg-dark-emphasis-alpha;
-      }
-    }
-
-    &-page {
-      @apply w-20 inline-flex;
-    }
-
-    &-total {
-      @apply shrink-0 mr-3 !important;
-    }
-  }
-}
-</style>

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

@@ -1,49 +0,0 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        "num-of-pages-navigation"?(_: {}): any;
-        "first-navigation"?(_: {}): any;
-        "last-navigation"?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    firstNavLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    lastNavLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    numOfPagesNavLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    firstNavLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    lastNavLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    numOfPagesNavLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    firstNavLabel: string;
-    lastNavLabel: string;
-    numOfPagesNavLabel: string;
-}, {}, {}, {}, 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/PdfViewer.spec.d.ts

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

package/dist/components/pdf-viewer/PdfViewer.spec.mjs

@@ -1,205 +0,0 @@
-import { fireEvent, render } from "@testing-library/vue";
-import * as useViewer from "./__mocks__/use-viewer.mjs";
-import PdfViewer from "./PdfViewer.vue";
-import { vi } from "vitest";
-import { delay } from "nanodelay";
-import { nextTick, ref } from "vue-demi";
-vi.mock("../pdf-object/utils/use-drop.ts", () => ({ default: vi.fn(() => ref(true)) }));
-vi.mock("./utils/use-viewer.ts", () => useViewer);
-vi.mock("./utils/pdfjs.ts", () => ({ getVersion: vi.fn(() => "3.10.x") }));
-it("should rendery properly", () => {
-  const screen = render({
-    components: { PdfViewer },
-    template: "<pdf-viewer />"
-  });
-  const viewer = screen.queryByTestId("pdf-viewer");
-  expect(viewer).toBeInTheDocument();
-});
-it("should load document from src url", async () => {
-  const screen = render({
-    components: { PdfViewer },
-    template: '<pdf-viewer src="http://sample.pdf" />'
-  });
-  const viewer = screen.queryByTestId("pdf-viewer");
-  await delay(2);
-  expect(viewer).toBeInTheDocument();
-  expect(useViewer.openDoc).lastCalledWith("http://sample.pdf", void 0, {});
-});
-it("should load document with password if prop password given", async () => {
-  const screen = render({
-    components: { PdfViewer },
-    template: `
-      <pdf-viewer
-        src="http://sample.pdf"
-        password="123456"
-      />
-      `
-  });
-  const viewer = screen.queryByTestId("pdf-viewer");
-  await delay(2);
-  expect(viewer).toBeInTheDocument();
-  expect(useViewer.openDoc).lastCalledWith("http://sample.pdf", "123456", {});
-});
-it('should have style layout fit if prop `layout` set to "fit"', () => {
-  const screen = render({
-    components: { PdfViewer },
-    template: '<pdf-viewer layout="fit" />'
-  });
-  const viewer = screen.queryByTestId("pdf-viewer");
-  expect(viewer).toBeInTheDocument();
-  expect(viewer).toHaveClass("pdf-viewer--layout-fit");
-});
-it("should reload document if src changed", async () => {
-  vi.useFakeTimers();
-  const src = ref("http://sample.pdf");
-  const password = ref("");
-  const screen = render({
-    components: { PdfViewer },
-    template: '<pdf-viewer :src="src" :password="password" />',
-    setup() {
-      return { src, password };
-    }
-  });
-  const viewer = screen.queryByTestId("pdf-viewer");
-  vi.advanceTimersByTime(2);
-  expect(viewer).toBeInTheDocument();
-  expect(useViewer.openDoc).lastCalledWith("http://sample.pdf", "", {});
-  src.value = "http://sample-3.pdf";
-  await nextTick();
-  vi.advanceTimersByTime(502);
-  expect(useViewer.openDoc).lastCalledWith("http://sample-3.pdf", "", {});
-  password.value = "123456";
-  await nextTick();
-  vi.advanceTimersByTime(502);
-  expect(useViewer.openDoc).lastCalledWith("http://sample-3.pdf", "123456", {});
-  vi.useRealTimers();
-});
-it("should show error page if got error when load the document", async () => {
-  const screen = render({
-    components: { PdfViewer },
-    template: '<pdf-viewer src="http://error.pdf" />'
-  });
-  const viewer = screen.queryByTestId("pdf-viewer");
-  const errorPage = screen.queryByTestId("pdf-error");
-  await delay(2);
-  expect(viewer).toBeInTheDocument();
-  expect(errorPage).toBeInTheDocument();
-  expect(errorPage).toBeVisible();
-});
-it("should emit error-password when document is protected but no password provided", async () => {
-  const onErrorPassword = vi.fn();
-  const screen = render({
-    components: { PdfViewer },
-    template: `
-      <pdf-viewer
-        src="http://protected.pdf"
-        @error-password="onErrorPassword"
-      />`,
-    setup() {
-      return { onErrorPassword };
-    }
-  });
-  const viewer = screen.queryByTestId("pdf-viewer");
-  const errorPage = screen.queryByTestId("pdf-error");
-  await delay(2);
-  expect(viewer).toBeInTheDocument();
-  expect(errorPage).toBeInTheDocument();
-  expect(errorPage).toBeVisible();
-  expect(onErrorPassword).toBeCalled();
-});
-it("should able to pass option when open document using props `config`", async () => {
-  const screen = render({
-    components: { PdfViewer },
-    template: `<pdf-viewer
-      :config="{ disableStream: true, disableRange: true }"
-      src="http://sample.pdf" />`
-  });
-  const viewer = screen.queryByTestId("pdf-viewer");
-  await delay(2);
-  expect(viewer).toBeInTheDocument();
-  expect(useViewer.openDoc).lastCalledWith("http://sample.pdf", void 0, { disableStream: true, disableRange: true });
-});
-it("should expose navigation in slot", async () => {
-  const page = ref(1);
-  const scale = ref(1);
-  const screen = render({
-    components: { PdfViewer },
-    template: `
-      <pdf-viewer
-        v-model:page="page"
-        v-model:scale="scale"
-        src="http://sample.pdf"
-        password="123456"
-      >
-        <template #header="{ zoomIn, zoomOut, next, prev, first, last }">
-          <button data-testid="zoom-in" @click="zoomIn">
-            zoom in
-          </button>
-          <button data-testid="zoom-out" @click="zoomOut">
-            zoom out
-          </button>
-          <button data-testid="next" @click="next">
-            next
-          </button>
-          <button data-testid="prev" @click="prev">
-            prev
-          </button>
-          <button data-testid="first" @click="first">
-            first
-          </button>
-          <button data-testid="last" @click="last">
-            last
-          </button>
-        </template>
-      </pdf-viewer>
-    `,
-    setup() {
-      return {
-        page,
-        scale
-      };
-    }
-  });
-  const viewer = screen.queryByTestId("pdf-viewer");
-  await delay(2);
-  expect(viewer).toBeInTheDocument();
-  const zoomIn = screen.queryByTestId("zoom-in");
-  const zoomOut = screen.queryByTestId("zoom-out");
-  const next = screen.queryByTestId("next");
-  const prev = screen.queryByTestId("prev");
-  const first = screen.queryByTestId("first");
-  const last = screen.queryByTestId("last");
-  await fireEvent.click(zoomIn);
-  expect(scale.value).toBe(1.1);
-  await fireEvent.click(zoomOut);
-  await fireEvent.click(zoomOut);
-  expect(scale.value).toBe(0.9);
-  await fireEvent.click(next);
-  await fireEvent.click(next);
-  expect(page.value).toBe(3);
-  await fireEvent.click(prev);
-  expect(page.value).toBe(2);
-  await fireEvent.click(first);
-  expect(page.value).toBe(1);
-  await fireEvent.click(last);
-  expect(page.value).toBe(5);
-});
-it('should be able to change num-of-pages, first and last navigation label via props "num-of-pages-nav-label", "first-nav-label" and "last-nav-label"', () => {
-  const screen = render({
-    components: { PdfViewer },
-    template: `
-      <pdf-viewer
-          src="http://sample.pdf"
-          first-nav-label="Awal" 
-          last-nav-label="Akhir" 
-          num-of-pages-nav-label="dari"
-      />
-    `
-  });
-  const firstNavLabel = screen.queryByText("Awal");
-  const lastNavLabel = screen.queryByText("Akhir");
-  const numOfPagesLabel = screen.queryByText(/dari/i);
-  expect(firstNavLabel).toBeInTheDocument();
-  expect(lastNavLabel).toBeInTheDocument();
-  expect(numOfPagesLabel).toBeInTheDocument();
-});