@privyid/persona 1.2.1 → 1.2.2-dev.1

package/dist/components/progressbar/Progressbar.vue

@@ -0,0 +1,105 @@
+<template>
+  <div
+    data-testid="progressbar"
+    role="progressbar"
+    class="progressbar"
+    :class="classNames"
+    :data-value="percentage">
+    <div
+      data-testid="progressbar-bar"
+      class="progressbar__bar"
+      :style="{ width }" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useProgressbar } from ".";
+const props = defineProps({
+  value: {
+    type: [Number, String],
+    default: 0
+  },
+  min: {
+    type: [Number, String],
+    default: 0
+  },
+  max: {
+    type: [Number, String],
+    default: 100
+  },
+  success: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: Boolean,
+    default: false
+  },
+  indeterminate: {
+    type: Boolean,
+    default: false
+  }
+});
+const percentage = useProgressbar(props);
+const width = computed(() => {
+  if (props.success || props.error)
+    return "100%";
+  return `${percentage.value * 100}%`;
+});
+const classNames = computed(() => {
+  const result = [];
+  if (props.indeterminate)
+    result.push("progressbar--indeterminate");
+  if (props.error)
+    result.push("progressbar--error");
+  else if (props.success)
+    result.push("progressbar--success");
+  return result;
+});
+</script>
+
+<style lang="postcss">
+.progressbar {
+  /* --p-bg-progress-default: theme(backgroundColor.base.DEFAULT); */
+  --p-bg-progress-default: theme(backgroundColor.emphasis-alpha);
+  --p-bg-dark-progress-default: theme(backgroundColor.dark.emphasis-alpha);
+
+  @apply bg-[color:var(--p-bg-progress-default)] w-full h-1 rounded-full overflow-hidden;
+  @apply dark:[color:var(--p-bg-dark-progress-default)];
+
+  &__bar {
+    @apply transition-[width] will-change-[width] duration-75 ease-out;
+    @apply bg-brand-accent rounded-full h-full origin-center;
+    @apply dark:bg-dark-brand-accent;
+  }
+
+  &--indeterminate {
+    .progressbar__bar {
+      animation: 1s ease-in-out infinite alternate progressbar-bounce;
+    }
+  }
+
+  &--success &__bar {
+    @apply bg-success-emphasis;
+    @apply dark:bg-dark-success-emphasis;
+  }
+
+  &--error &__bar {
+    @apply bg-dark-danger-emphasis;
+    @apply dark:bg-dark-danger-emphasis;
+  }
+}
+
+@keyframes progressbar-bounce {
+  0% {
+    width: 40%;
+    transform: translateX(-75%);
+  }
+
+  100% {
+    width: 40%;
+    transform: translateX(225%);
+  }
+}
+</style>

package/dist/components/progressbar/Progressbar.vue.d.ts

@@ -0,0 +1,59 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    success: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    success: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    value: string | number;
+    error: boolean;
+    success: boolean;
+    max: string | number;
+    min: string | number;
+    indeterminate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/progressbar/index.d.ts

@@ -0,0 +1,7 @@
+interface ProgressbarProp {
+    min: number | string;
+    max: number | string;
+    value: number | string;
+}
+export declare function useProgressbar(props: ProgressbarProp): import("vue").ComputedRef<number>;
+export {};

package/dist/components/progressbar/index.mjs

@@ -0,0 +1,11 @@
+import { toRef, computed } from "vue";
+import { useToNumber } from "@vueuse/core";
+export function useProgressbar(props) {
+  const min = useToNumber(toRef(props, "min"), { nanToZero: true });
+  const max = useToNumber(toRef(props, "max"), { nanToZero: true });
+  const value = useToNumber(toRef(props, "value"), { nanToZero: true });
+  const presentage = computed(() => {
+    return (value.value - min.value) / (max.value - min.value);
+  });
+  return presentage;
+}

package/dist/components/pspdfkit/PspdfHelipad.vue

@@ -0,0 +1,142 @@
+<template>
+  <div
+    data-testid="pdf-helipad"
+    class="pdf-helipad"
+    :class="classNames">
+    <div
+      ref="object"
+      data-testid="pdf-helipad-object"
+      class="pdf-object pdf-object--external"
+      :style="{ width: `${width}px`, height: `${height}px` }">
+      <div class="pdf-object__container">
+        <slot />
+      </div>
+    </div>
+    <div
+      class="pdf-object pdf-object--external pdf-helipad__ghost"
+      :style="{ width: `${width}px`, height: `${height}px` }">
+      <div class="pdf-object__container">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import "../pdf-object/PdfObject.vue";
+import {
+  computed,
+  ref,
+  toRef,
+  watch,
+  watchEffect
+} from "vue";
+import { getPosition } from "../pdf-object/utils/position";
+import useDrag from "../pdf-helipad/utils/use-drag";
+import { isInside } from "./utils/position";
+const props = defineProps({
+  scale: {
+    type: Number,
+    default: 1
+  },
+  width: {
+    type: Number,
+    default: 198
+  },
+  height: {
+    type: Number,
+    default: 106
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(["landed", "click"]);
+const object = ref();
+const scale = toRef(props, "scale");
+const width = toRef(props, "width");
+const height = toRef(props, "height");
+const isDragged = ref(false);
+const x = ref(0);
+const y = ref(0);
+const classNames = computed(() => {
+  const result = [];
+  if (props.disabled)
+    result.push("pdf-helipad--disabled");
+  return result;
+});
+const draggable = useDrag(object, {
+  onstart() {
+    const { left, top } = object.value.getBoundingClientRect();
+    isDragged.value = true;
+    x.value = left;
+    y.value = top;
+  },
+  onmove(event) {
+    x.value = event.clientX - event.rect.width * scale.value / 2;
+    y.value = event.clientY - event.rect.height * scale.value / 2;
+  },
+  onend(event) {
+    if (event.relatedTarget && event.target.instance) {
+      const instance = event.target.instance;
+      const elements = instance.contentDocument.querySelectorAll(".PSPDFKit-Spread");
+      let reference;
+      for (const page of elements) {
+        if (isInside(object.value, page)) {
+          reference = page;
+          break;
+        }
+      }
+      if (reference) {
+        const page = Number.parseInt(reference.dataset.spreadIndex) + 1;
+        const result = getPosition({
+          reference,
+          object: object.value,
+          scale: scale.value
+        });
+        emit("landed", {
+          ...result,
+          page,
+          width: width.value,
+          height: height.value
+        });
+      }
+    }
+    isDragged.value = false;
+  },
+  ontap(event) {
+    emit("click", event);
+  }
+});
+watchEffect(() => {
+  if (object.value) {
+    if (isDragged.value) {
+      object.value.style.position = "fixed";
+      object.value.style.transform = `translate(${x.value}px, ${y.value}px) scale(${scale.value})`;
+      object.value.style.zIndex = "50";
+    } else {
+      object.value.style.position = "absolute";
+      object.value.style.transform = "translate(0px, 0px)";
+      object.value.style.zIndex = "2";
+    }
+  }
+});
+watch(() => props.disabled, (isDisabled) => {
+  draggable.value = !isDisabled;
+}, { immediate: true });
+</script>
+
+<style lang="postcss">
+.pdf-helipad {
+  @apply relative inline-block;
+
+  &__ghost {
+    @apply opacity-25 z-1 touch-none pointer-events-none;
+  }
+
+  &&--disabled {
+    @apply opacity-50;
+  }
+}
+</style>

package/dist/components/pspdfkit/PspdfHelipad.vue.d.ts

@@ -0,0 +1,68 @@
+import '../pdf-object/PdfObject.vue';
+import type { PdfHelipadResult } from '../pdf-helipad';
+import type { InteractEvent } from '@interactjs/types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {
+        object: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    scale: {
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (args_0: InteractEvent) => void;
+    landed: (args_0: PdfHelipadResult) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    scale: {
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onClick?: ((args_0: InteractEvent) => any) | undefined;
+    onLanded?: ((args_0: PdfHelipadResult) => any) | undefined;
+}>, {
+    width: number;
+    height: number;
+    disabled: boolean;
+    scale: number;
+}, {}, {}, {}, 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/pspdfkit/PspdfObject.vue

@@ -0,0 +1,291 @@
+<template>
+  <div
+    ref="content"
+    data-testid="pdf-object"
+    class="pdf-object pspdf-object"
+    tabindex="0"
+    :data-x="objectX"
+    :data-y="objectY"
+    :data-page="objectPage"
+    :data-width="objectWidth"
+    :data-height="objectHeight">
+    <div class="pdf-object__container">
+      <slot />
+      <PdfObjectDebugger v-if="debug && isSelected" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  provide,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  inject
+} from "vue";
+import PdfObjectDebugger from "../pdf-object/PdfObjectDebugger.vue";
+import {
+  syncRef,
+  useVModel,
+  watchIgnorable
+} from "@vueuse/core";
+import {
+  PDF_OBJECTS_CONTEXT,
+  PDF_OBJECT_CONTEXT,
+  useObjectModel
+} from "../pdf-object";
+import { usePspdf } from ".";
+import { getEmptyPosition } from "../pdf-object/utils/overlap";
+import {
+  createRect,
+  generateInstantId,
+  createRectangleAnnotation,
+  createColor,
+  importList
+} from "./utils/pspdfkit";
+const props = defineProps({
+  x: {
+    type: Number,
+    default: void 0
+  },
+  y: {
+    type: Number,
+    default: void 0
+  },
+  page: {
+    type: Number,
+    default: void 0
+  },
+  width: {
+    type: Number,
+    default: 198
+  },
+  height: {
+    type: Number,
+    default: 106
+  },
+  minWidth: {
+    type: Number,
+    default: void 0
+  },
+  minHeight: {
+    type: Number,
+    default: void 0
+  },
+  maxWidth: {
+    type: Number,
+    default: void 0
+  },
+  maxHeight: {
+    type: Number,
+    default: void 0
+  },
+  moveable: {
+    type: Boolean,
+    default: true
+  },
+  resizable: {
+    type: Boolean,
+    default: true
+  },
+  autofocus: {
+    type: Boolean,
+    default: false
+  },
+  debug: {
+    type: Boolean,
+    default: false
+  }
+});
+defineEmits(["update:x", "update:y", "update:page", "update:width", "update:height"]);
+const content = ref();
+const vX = useVModel(props, "x");
+const vY = useVModel(props, "y");
+const vPage = useVModel(props, "page");
+const vWidth = useVModel(props, "width");
+const vHeight = useVModel(props, "height");
+const { instance, contents } = usePspdf();
+const { objects } = inject(PDF_OBJECTS_CONTEXT);
+const objectId = ref();
+const isSelected = ref(false);
+const {
+  id,
+  x: objectX,
+  y: objectY,
+  page: objectPage,
+  width: objectWidth,
+  height: objectHeight,
+  minHeight,
+  minWidth,
+  maxHeight,
+  maxWidth,
+  ratio
+} = useObjectModel(props);
+const { ignoreUpdates } = watchIgnorable([
+  objectX,
+  objectY,
+  objectWidth,
+  objectHeight
+], async () => {
+  await updateAnnotation();
+});
+watch(objectPage, async (value, oldValue) => {
+  if (value !== oldValue) {
+    await removeAnnotation();
+    await createAnnotation();
+  }
+});
+watch(() => props.moveable, async (moveable) => {
+  if (objectId.value) {
+    const objects2 = await instance.value.getAnnotations(objectPage.value - 1);
+    const object = objects2.find((o) => o.id === objectId.value);
+    if (object)
+      await instance.value.update(object.set("readOnly", !moveable));
+  }
+});
+async function createAnnotation() {
+  if (objectPage.value > 0 && objectPage.value <= instance.value.totalPageCount) {
+    objectId.value = await generateInstantId();
+    contents.set(objectId.value, content.value);
+    await instance.value.create(
+      await createRectangleAnnotation({
+        id: objectId.value,
+        pageIndex: objectPage.value - 1,
+        boundingBox: await createRect({
+          left: objectX.value * 0.75,
+          top: objectY.value * 0.75,
+          width: objectWidth.value * 0.75,
+          height: objectHeight.value * 0.75
+        }),
+        strokeColor: await createColor({ transparent: true }),
+        fillColor: await createColor({ transparent: true }),
+        customData: {
+          minWidth: minWidth.value * 0.75,
+          minHeight: minHeight.value * 0.75,
+          maxWidth: maxWidth.value * 0.75,
+          maxHeight: maxHeight.value * 0.75
+        },
+        readOnly: !props.moveable
+      })
+    );
+  }
+}
+async function updateAnnotation() {
+  const objects2 = await instance.value.getAnnotations(objectPage.value - 1);
+  const object = objects2.find((o) => o.id === objectId.value);
+  if (object) {
+    await instance.value.update(
+      object.set("boundingBox", object.boundingBox.merge({
+        left: objectX.value * 0.75,
+        top: objectY.value * 0.75,
+        width: objectWidth.value * 0.75,
+        height: objectHeight.value * 0.75
+      }))
+    );
+  }
+}
+async function removeAnnotation() {
+  if (objectId.value) {
+    await instance.value.delete(objectId.value);
+    contents.delete(objectId.value);
+    objectId.value = void 0;
+  }
+}
+function autoPosition() {
+  const otherObjects = [...objects.values()].filter((obj) => {
+    return obj.id !== id && Number.isFinite(obj.x) && Number.isFinite(obj.y) && obj.page === objectPage.value;
+  });
+  const size = {
+    width: objectWidth.value,
+    height: objectHeight.value
+  };
+  const pageInfo = instance.value.pageInfoForIndex(objectPage.value - 1);
+  const offside = {
+    width: pageInfo.width / 0.75,
+    height: pageInfo.height / 0.75
+  };
+  const center = getEmptyPosition({
+    size,
+    offside,
+    objects: otherObjects
+  });
+  objectX.value = center.x;
+  objectY.value = center.y;
+}
+function onAnnotationChange(annotations) {
+  const object = annotations.find((i) => i.id === objectId.value);
+  if (object) {
+    ignoreUpdates(() => {
+      objectX.value = object.boundingBox.left / 0.75;
+      objectY.value = object.boundingBox.top / 0.75;
+      objectWidth.value = object.boundingBox.width / 0.75;
+      objectHeight.value = object.boundingBox.height / 0.75;
+    });
+  }
+}
+async function onAnnotationMounted(annotations) {
+  if (props.autofocus && objectId.value) {
+    const object = annotations.find((i) => i.id === objectId.value);
+    if (object) {
+      const List = await importList();
+      instance.value.setSelectedAnnotations(List([objectId.value]));
+      instance.value.jumpToRect(objectPage.value - 1, object.boundingBox);
+    }
+  }
+}
+async function onAnnotationSelected(annotations) {
+  const object = annotations.find((i) => i.id === objectId.value);
+  if (object) {
+    const root = instance.value.contentDocument.querySelector(".PSPDFKit-Root");
+    if (root) {
+      root.setAttribute("resizable", `${props.resizable}`);
+      root.setAttribute("moveable", `${props.moveable}`);
+    }
+  }
+  isSelected.value = !!object;
+}
+onMounted(async () => {
+  if (instance.value && content.value) {
+    if (!Number.isFinite(objectX.value) || !Number.isFinite(objectY.value))
+      autoPosition();
+    instance.value.addEventListener("annotations.update", onAnnotationChange);
+    instance.value.addEventListener("annotations.create", onAnnotationMounted);
+    instance.value.addEventListener("annotationSelection.change", onAnnotationSelected);
+    await createAnnotation();
+  }
+});
+onBeforeUnmount(async () => {
+  if (instance.value) {
+    await removeAnnotation();
+    instance.value.removeEventListener("annotations.update", onAnnotationChange);
+    instance.value.removeEventListener("annotations.create", onAnnotationMounted);
+    instance.value.removeEventListener("annotationSelection.change", onAnnotationSelected);
+  }
+});
+syncRef(objectX, vX);
+syncRef(objectY, vY);
+syncRef(objectPage, vPage);
+syncRef(objectWidth, vWidth);
+syncRef(objectHeight, vHeight);
+provide(PDF_OBJECT_CONTEXT, {
+  id,
+  x: objectX,
+  y: objectY,
+  page: objectPage,
+  width: objectWidth,
+  height: objectHeight,
+  minHeight,
+  minWidth,
+  maxHeight,
+  maxWidth,
+  ratio
+});
+</script>
+
+<style lang="postcss">
+.pspdf-object {
+  @apply hidden;
+}
+</style>