@privyid/persona 1.2.1 → 1.2.2-dev.2

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

@@ -0,0 +1,165 @@
+<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";
+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

@@ -0,0 +1,49 @@
+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").DefineComponent<import("vue").ExtractPropTypes<{
+    firstNavLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    lastNavLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    numOfPagesNavLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").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").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.vue

@@ -0,0 +1,319 @@
+<template>
+  <div
+    ref="root"
+    v-p-aspect-ratio="layout === 'fixed' ? Number(ratio) : 0"
+    data-testid="pdf-viewer"
+    class="pdf"
+    :data-page="pdfPage"
+    :data-scale="pdfScale"
+    :class="classNames">
+    <div
+      class="pdf__header">
+      <slot
+        name="header"
+        :page="pdfPage"
+        :scale="pdfScale"
+        :total-page="totalPage"
+        :zoom-in="zoomIn"
+        :zoom-out="zoomOut"
+        :next="next"
+        :prev="prev"
+        :first="first"
+        :last="last"
+        :doc="pdfDoc" />
+    </div>
+
+    <PdfObjects
+      class="pdf__wrapper">
+      <!-- Minimum PDFJS Viewer -->
+      <div
+        ref="container"
+        class="pdf__container pdfContainer">
+        <PdfLoading v-show="loading || !src" />
+        <PdfError
+          v-show="!loading && error"
+          :url="src"
+          :error="error" />
+        <div
+          ref="viewer"
+          class="pdf__viewer pdfViewer" />
+        <slot
+          :page="pdfPage"
+          :scale="pdfScale"
+          :total-page="totalPage"
+          :zoom-in="zoomIn"
+          :zoom-out="zoomOut"
+          :next="next"
+          :prev="prev"
+          :first="first"
+          :last="last"
+          :doc="pdfDoc" />
+      </div>
+      <!-- Minimum PDFJS Viewer end -->
+
+      <slot
+        name="container"
+        :page="pdfPage"
+        :scale="pdfScale"
+        :total-page="totalPage"
+        :zoom-in="zoomIn"
+        :zoom-out="zoomOut"
+        :next="next"
+        :prev="prev"
+        :first="first"
+        :last="last"
+        :doc="pdfDoc" />
+
+      <transition name="slide-up">
+        <PdfNavigation
+          v-show="src && !idle && !loading && !error"
+          :first-nav-label="firstNavLabel"
+          :last-nav-label="lastNavLabel"
+          :num-of-pages-nav-label="numOfPagesNavLabel" />
+      </transition>
+
+      <slot
+        name="body"
+        :page="pdfPage"
+        :scale="pdfScale"
+        :total-page="totalPage"
+        :zoom-in="zoomIn"
+        :zoom-out="zoomOut"
+        :next="next"
+        :prev="prev"
+        :first="first"
+        :last="last"
+        :doc="pdfDoc" />
+    </PdfObjects>
+    <div class="pdf__footer">
+      <slot
+        name="footer"
+        :page="pdfPage"
+        :scale="pdfScale"
+        :total-page="totalPage"
+        :zoom-in="zoomIn"
+        :zoom-out="zoomOut"
+        :next="next"
+        :prev="prev"
+        :first="first"
+        :last="last"
+        :doc="pdfDoc" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  computed,
+  onMounted,
+  provide,
+  ref,
+  toRef,
+  watch
+} from "vue";
+import { vPAspectRatio } from "../aspect-ratio";
+import {
+  useToNumber,
+  useVModel,
+  watchDebounced,
+  syncRef
+} from "@vueuse/core";
+import { PDF_VIEWER_CONTEXT } from ".";
+import { useSticky } from "./utils/use-sticky";
+import PdfNavigation from "./PdfNavigation.vue";
+import PdfLoading from "./PdfLoading.vue";
+import PdfError from "./PdfError.vue";
+import { useIdle } from "./utils/use-idle";
+import PdfObjects from "../pdf-object/PdfObjects.vue";
+import { useViewer } from "./utils/use-viewer";
+const props = defineProps({
+  src: {
+    type: String,
+    default: ""
+  },
+  page: {
+    type: Number,
+    default: 1
+  },
+  scale: {
+    type: Number,
+    default: 1
+  },
+  password: {
+    type: String,
+    default: void 0
+  },
+  layout: {
+    type: String,
+    default: "fixed"
+  },
+  ratio: {
+    type: [Number, String],
+    default: 210 / 297
+  },
+  offsetTop: {
+    type: [Number, String],
+    default: 0
+  },
+  config: {
+    type: [Object],
+    default: () => ({})
+  },
+  firstNavLabel: {
+    type: String,
+    default: "First"
+  },
+  lastNavLabel: {
+    type: String,
+    default: "Last"
+  },
+  numOfPagesNavLabel: {
+    type: String,
+    default: "of"
+  }
+});
+const emit = defineEmits(["ready", "loaded", "loading", "error", "error-password", "update:page", "update:scale"]);
+const root = ref();
+const container = ref();
+const viewer = ref();
+const idle = useIdle(container);
+const vPage = useVModel(props, "page");
+const vScale = useVModel(props, "scale");
+const offsetTop = useToNumber(toRef(props, "offsetTop"), { nanToZero: true });
+const enableSticky = useSticky(root, { offsetTop });
+const classNames = computed(() => {
+  const result = [];
+  if (props.layout)
+    result.push(`pdf-viewer--layout-${props.layout}`);
+  return result;
+});
+const {
+  page: pdfPage,
+  scale: pdfScale,
+  totalPage,
+  openDoc,
+  closeDoc,
+  pdfDoc,
+  loading,
+  error,
+  onLoaded,
+  onError,
+  onReady,
+  onLoading
+} = useViewer(container, viewer);
+watchDebounced(() => [props.src, props.password], ([src, password]) => {
+  openDoc(src, password, props.config);
+}, { debounce: 500 });
+watch(() => props.layout, (layout) => {
+  enableSticky.value = layout === "fit";
+}, { immediate: true });
+onMounted(async () => {
+  if (props.src)
+    openDoc(props.src, props.password, props.config);
+});
+onLoaded((doc) => {
+  emit("loaded", doc);
+});
+onError((error_) => {
+  if (error_.name === "PasswordException")
+    emit("error-password", error_);
+  emit("error", error_);
+});
+onReady((pdfViewer) => {
+  emit("ready", pdfViewer);
+});
+onLoading((event) => {
+  emit("loading", event);
+});
+function zoomIn() {
+  pdfScale.value = Math.round(pdfScale.value / 0.1) * 0.1 + 0.1;
+}
+function zoomOut() {
+  pdfScale.value = Math.round(pdfScale.value / 0.1) * 0.1 - 0.1;
+}
+function next() {
+  pdfPage.value++;
+}
+function prev() {
+  pdfPage.value--;
+}
+function first() {
+  pdfPage.value = 1;
+}
+function last() {
+  pdfPage.value = totalPage.value;
+}
+provide(PDF_VIEWER_CONTEXT, {
+  page: pdfPage,
+  scale: pdfScale,
+  totalPage,
+  zoomIn,
+  zoomOut,
+  next,
+  prev,
+  first,
+  last
+});
+syncRef(pdfPage, vPage);
+syncRef(pdfScale, vScale);
+defineExpose({
+  page: pdfPage,
+  scale: pdfScale,
+  root,
+  container,
+  viewer,
+  loading,
+  totalPage,
+  zoomIn,
+  zoomOut,
+  next,
+  prev,
+  openDoc,
+  closeDoc,
+  first,
+  last
+});
+defineSlots();
+</script>
+
+<style lang="postcss">
+.pdf {
+  --p-pdf-container-width: 793px;
+
+  @apply relative overflow-hidden w-full flex flex-col bg-base z-1;
+  @apply dark:bg-dark-base;
+
+  &__wrapper {
+    @apply relative h-full w-full grow;
+  }
+
+  &__container {
+    -webkit-overflow-scrolling: touch;
+
+    @apply absolute inset-0 h-full w-full overflow-auto p-4 pb-16 shadow-inner;
+  }
+
+  &__viewer {
+    .page {
+      border-image: none;
+
+      @apply shadow-lg mb-4 mt-0 border;
+
+      &.hover {
+        @apply ring-info ring;
+        @apply dark:ring-dark-info;
+      }
+    }
+  }
+
+  &__header {
+    @apply z-1 bg-default shadow-lg;
+    @apply dark:bg-dark-default;
+  }
+
+  &__footer {
+    @apply z-1 bg-default shadow-lg-top;
+    @apply dark:bg-dark-default;
+  }
+}
+</style>

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

@@ -0,0 +1,187 @@
+import type { PropType, VNode } from 'vue';
+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").DefineComponent<import("vue").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").Ref<number, number>;
+    scale: import("vue").Ref<number, number>;
+    root: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    container: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    viewer: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    loading: import("vue").WritableComputedRef<boolean, boolean>;
+    totalPage: import("vue").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").ComponentOptionsMixin, import("vue").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").PublicProps, Readonly<import("vue").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;
+    password: string;
+    scale: number;
+    ratio: string | number;
+    layout: LayoutVariant;
+    offsetTop: string | number;
+    firstNavLabel: string;
+    lastNavLabel: string;
+    numOfPagesNavLabel: string;
+    config: OpenDocConfig;
+}, {}, {}, {}, string, import("vue").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;
+    };
+};