@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/pdf-helipad/PdfHelipad.vue

@@ -1,147 +0,0 @@
-<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 lang="ts" setup>
-import '../pdf-object/PdfObject.vue'
-import {
-  computed,
-  ref,
-  toRef,
-  watch,
-  watchEffect,
-} from 'vue-demi'
-import { getPosition } from '../pdf-object/utils/position'
-import useDrag from './utils/use-drag'
-import type { PdfHelipadResult } from '.'
-import type { InteractEvent } from '@interactjs/types'
-
-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': [PdfHelipadResult],
-  'click': [InteractEvent],
-}>()
-
-const object = ref<HTMLDivElement>()
-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: string[] = []
-
-  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) {
-      const reference = event.relatedTarget
-      const result    = getPosition({
-        reference: reference as HTMLDivElement,
-        object   : object.value,
-        scale    : scale.value,
-      })
-
-      emit('landed', {
-        ...result,
-        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/pdf-helipad/index.d.ts

@@ -1,7 +0,0 @@
-export interface PdfHelipadResult {
-    page: number;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}

package/dist/components/pdf-helipad/utils/use-drag.d.ts

@@ -1,3 +0,0 @@
-import type { Ref } from 'vue-demi';
-import type { DragHooks } from '../../pdf-object/utils/use-drag';
-export default function useDrag(target: Ref<HTMLElement>, options?: DragHooks): import("vue-demi").ShallowRef<boolean, boolean>;

package/dist/components/pdf-helipad/utils/use-drag.mjs

@@ -1,38 +0,0 @@
-import {
-  onScopeDispose,
-  shallowRef,
-  watch
-} from "vue-demi";
-export default function useDrag(target, options = {}) {
-  const enable = shallowRef(true);
-  const instance = shallowRef();
-  async function init() {
-    destroy();
-    if (target.value) {
-      const { default: Interact } = await import("interactjs");
-      instance.value = Interact(target.value).draggable({
-        inertia: true,
-        enabled: enable.value,
-        autoScroll: true,
-        onstart: options.onstart,
-        onmove: options.onmove,
-        onend: options.onend
-      }).on("tap", options.ontap);
-    }
-  }
-  function destroy() {
-    if (instance.value)
-      instance.value.unset();
-  }
-  watch(target, async () => {
-    await init();
-  });
-  watch(enable, (value) => {
-    if (instance.value)
-      instance.value.draggable(value);
-  });
-  onScopeDispose(() => {
-    destroy();
-  });
-  return enable;
-}

package/dist/components/pdf-object/PdfObject.vue

@@ -1,348 +0,0 @@
-<template>
-  <div
-    ref="object"
-    data-testid="pdf-object"
-    class="pdf-object"
-    tabindex="0"
-    :data-x="objectX"
-    :data-y="objectY"
-    :data-page="objectPage"
-    :data-width="objectWidth"
-    :data-height="objectHeight"
-    @keydown.up.stop.prevent="move($event, 0, -1)"
-    @keydown.down.stop.prevent="move($event, 0, 1)"
-    @keydown.left.stop.prevent="move($event, -1, 0)"
-    @keydown.right.stop.prevent="move($event, 1, 0)">
-    <div class="pdf-object__container">
-      <slot />
-      <PdfObjectDebugger v-if="debug" />
-    </div>
-    <div
-      v-show="isResizable"
-      class="pdf-object__resize resize-handle" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { autoUpdate } from '@floating-ui/dom'
-import {
-  syncRef,
-  until,
-  useVModel,
-} from '@vueuse/core'
-import {
-  inject,
-  onMounted,
-  provide,
-  ref,
-  toRef,
-  watchEffect,
-} from 'vue-demi'
-import useDrag from './utils/use-drag'
-import useResize from './utils/use-resize'
-import {
-  PDF_OBJECTS_CONTEXT,
-  PDF_OBJECT_CONTEXT,
-  useObjectModel,
-  usePage,
-  focus,
-} from '.'
-import { computePosition, getPosition } from './utils/position'
-import type { ObjectPosition } from './utils/overlap'
-import { getEmptyPosition } from './utils/overlap'
-import PdfObjectDebugger from './PdfObjectDebugger.vue'
-import { clamp } from 'lodash-es'
-
-const props = defineProps({
-  x: {
-    type   : Number,
-    default: undefined,
-  },
-  y: {
-    type   : Number,
-    default: undefined,
-  },
-  page: {
-    type   : Number,
-    default: undefined,
-  },
-  width: {
-    type   : Number,
-    default: 198,
-  },
-  height: {
-    type   : Number,
-    default: 106,
-  },
-  minWidth: {
-    type   : Number,
-    default: undefined,
-  },
-  minHeight: {
-    type   : Number,
-    default: undefined,
-  },
-  maxWidth: {
-    type   : Number,
-    default: undefined,
-  },
-  maxHeight: {
-    type   : Number,
-    default: undefined,
-  },
-  moveable: {
-    type   : Boolean,
-    default: true,
-  },
-  resizable: {
-    type   : Boolean,
-    default: true,
-  },
-  autofocus: {
-    type   : Boolean,
-    default: false,
-  },
-  debug: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-defineEmits<{
-  'update:x': [number],
-  'update:y': [number],
-  'update:page': [number],
-  'update:width': [number],
-  'update:height': [number],
-}>()
-
-const object = ref<HTMLDivElement>()
-const {
-  root,
-  scale,
-  objects,
-} = inject(PDF_OBJECTS_CONTEXT)
-
-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 {
-  id,
-  x: objectX,
-  y: objectY,
-  page: objectPage,
-  width: objectWidth,
-  height: objectHeight,
-  minHeight,
-  minWidth,
-  maxHeight,
-  maxWidth,
-  ratio,
-} = useObjectModel(props)
-
-const isDragged = ref(false)
-const lastX     = ref()
-const lastY     = ref()
-const lastPage  = ref()
-const pageEl    = usePage(objectPage)
-
-const isMoveable = useDrag(object, {
-  onstart () {
-    const { left, top } = object.value.getBoundingClientRect()
-
-    isDragged.value = true
-    lastX.value     = objectX.value
-    lastY.value     = objectY.value
-    lastPage.value  = objectPage.value
-
-    objectX.value = left
-    objectY.value = top
-  },
-  onmove (event) {
-    objectX.value += event.dx
-    objectY.value += event.dy
-  },
-  onend (event) {
-    if (event.relatedTarget) {
-      const result = getPosition({
-        reference: event.relatedTarget as HTMLElement,
-        container: root.value,
-        object   : object.value,
-        scale    : scale.value,
-      })
-
-      objectX.value    = result.x
-      objectY.value    = result.y
-      objectPage.value = result.page
-    } else {
-      // Back to last valid coordinate
-      objectX.value    = lastX.value
-      objectY.value    = lastY.value
-      objectPage.value = lastPage.value
-    }
-
-    isDragged.value = false
-  },
-})
-
-const isResizable = useResize(object, {
-  minHeight: minHeight,
-  minWidth : minWidth,
-  maxHeight: maxHeight,
-  maxWidth : maxWidth,
-  scale    : scale,
-  ratio    : ratio,
-  reference: pageEl,
-  onmove (event) {
-    if (event.rect && scale.value) {
-      objectWidth.value  = event.rect.width / scale.value
-      objectHeight.value = event.rect.height / scale.value
-    }
-  },
-})
-
-watchEffect((onCleanup) => {
-  if (object.value) {
-    if (pageEl.value && root.value) {
-      object.value.style.display = 'block'
-      object.value.style.width   = `${objectWidth.value}px`
-      object.value.style.height  = `${objectHeight.value}px`
-
-      if (isDragged.value) {
-        object.value.style.position  = 'fixed'
-        object.value.style.transform = `translate(${objectX.value}px, ${objectY.value}px) scale(${scale.value})`
-        object.value.style.zIndex    = '50'
-      } else {
-        const cleanup = autoUpdate(pageEl.value, object.value, () => {
-          const { left, top } = computePosition({
-            reference: pageEl.value,
-            container: root.value,
-            x        : objectX.value,
-            y        : objectY.value,
-            scale    : scale.value,
-          })
-
-          object.value.style.position  = 'absolute'
-          object.value.style.transform = `translate(${left}px, ${top}px) scale(${scale.value})`
-          object.value.style.zIndex    = '10'
-        }, { ancestorScroll: false, animationFrame: true })
-
-        onCleanup(cleanup)
-      }
-    } else
-      object.value.style.display = 'none'
-  }
-})
-
-function move (event: KeyboardEvent, dx: number, dy: number) {
-  if (props.moveable) {
-    const pageWidth  = pageEl.value.clientWidth
-    const pageHeight = pageEl.value.clientHeight
-
-    const maxX = Math.floor((pageWidth / scale.value) - objectWidth.value)
-    const maxY = Math.floor((pageHeight / scale.value) - objectHeight.value)
-
-    const ax = (event.metaKey || event.ctrlKey) ? maxX : (event.shiftKey ? 10 : 1)
-    const ay = (event.metaKey || event.ctrlKey) ? maxY : (event.shiftKey ? 10 : 1)
-
-    const x1 = objectX.value + dx * ax
-    const y1 = objectY.value + dy * ay
-
-    objectX.value = clamp(x1, 0, maxX)
-    objectY.value = clamp(y1, 0, maxY)
-  }
-}
-
-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 offside = {
-    width : pageEl.value.clientWidth / scale.value,
-    height: pageEl.value.clientHeight / scale.value,
-  }
-
-  const center = getEmptyPosition({
-    size   : size,
-    offside: offside,
-    objects: otherObjects as ObjectPosition[],
-  })
-
-  objectX.value = center.x
-  objectY.value = center.y
-}
-
-syncRef(objectX, vX)
-syncRef(objectY, vY)
-syncRef(objectPage, vPage)
-syncRef(objectWidth, vWidth)
-syncRef(objectHeight, vHeight)
-
-syncRef(isMoveable, toRef(props, 'moveable'), { direction: 'rtl', immediate: true })
-syncRef(isResizable, toRef(props, 'resizable'), { direction: 'rtl', immediate: true })
-
-onMounted(async () => {
-  await until(pageEl).toBeTruthy()
-
-  if (!Number.isFinite(objectX.value) || !Number.isFinite(objectY.value))
-    autoPosition()
-
-  if (props.autofocus)
-    focus(object.value)
-})
-
-// Provide some data for debug
-provide(PDF_OBJECT_CONTEXT, {
-  id,
-  x     : objectX,
-  y     : objectY,
-  page  : objectPage,
-  width : objectWidth,
-  height: objectHeight,
-  minHeight,
-  minWidth,
-  maxHeight,
-  maxWidth,
-  ratio,
-})
-</script>
-
-<style lang="postcss">
-.pdf-object {
-  @apply origin-top-left left-0 top-0 select-none touch-none outline-none;
-
-  &__container {
-    @apply overflow-visible relative border-2 border-dashed border-subtle rounded w-full h-full;
-    @apply dark:border-dark-subtle;
-
-    &,
-    & > * {
-      @apply touch-none pointer-events-none;
-    }
-
-    button,
-    input,
-    textarea,
-    a {
-      @apply pointer-events-auto;
-    }
-  }
-
-  &__resize {
-    @apply absolute w-3 h-3 bottom-0 right-0 translate-x-1/2 translate-y-1/2 bg-base rounded-full;
-    @apply dark:bg-dark-base;
-  }
-}
-</style>

package/dist/components/pdf-object/PdfObjectAddon.vue

@@ -1,55 +0,0 @@
-<template>
-  <div
-    data-testid="pdf-object-addon"
-    class="pdf-object__addon"
-    :class="classNames">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
-import type { AddonPositionVariant } from '.'
-
-const props = defineProps({
-  position: {
-    type   : String as PropType<AddonPositionVariant>,
-    default: 'right',
-  },
-})
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (props.position)
-    result.push(`pdf-object__addon--${props.position}`)
-
-  return result
-})
-</script>
-
-<style lang="postcss">
-.pdf-object {
-  &__addon {
-    @apply absolute;
-    @apply dark:text-default;
-
-    &--right {
-      @apply top-0 left-full pl-2;
-    }
-
-    &--left {
-      @apply top-0 right-full pr-2;
-    }
-
-    &--top {
-      @apply bottom-full left-0 pb-2;
-    }
-
-    &--bottom {
-      @apply top-full left-0 pt-2;
-    }
-  }
-}
-</style>

package/dist/components/pdf-object/PdfObjectDebugger.vue

@@ -1,70 +0,0 @@
-<template>
-  <div
-    ref="target"
-    data-testid="pdf-debugger"
-    class="pdf-object__debugger">
-    <pre data-testid="debug-x">x: {{ x }}</pre>
-    <pre data-testid="debug-y">y: {{ y }}</pre>
-    <pre data-testid="debug-page">page: {{ page }}</pre>
-    <pre data-testid="debug-width">width: {{ width }}</pre>
-    <pre data-testid="debug-height">height: {{ height }}</pre>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import {
-  autoPlacement,
-  autoUpdate,
-  computePosition,
-  offset,
-} from '@floating-ui/dom'
-import {
-  inject,
-  ref,
-  watchEffect,
-} from 'vue-demi'
-import { PDF_OBJECT_CONTEXT } from '.'
-
-const {
-  x,
-  y,
-  page,
-  width,
-  height,
-} = inject(PDF_OBJECT_CONTEXT)
-
-const target = ref<HTMLDivElement>()
-
-watchEffect((onCleanup) => {
-  if (target.value) {
-    const cleanup = autoUpdate(target.value.parentElement, target.value, () => {
-      computePosition(target.value.parentElement, target.value, {
-        strategy  : 'absolute',
-        middleware: [autoPlacement(), offset(12)],
-      }).then(({ x, y }) => {
-        if (target.value) {
-          target.value.style.left = `${x || 0}px`
-          target.value.style.top  = `${y || 0}px`
-        }
-      })
-    }, { animationFrame: true })
-
-    onCleanup(cleanup)
-  }
-}, { flush: 'post' })
-</script>
-
-<style lang="postcss">
-.pdf-object {
-  --p-pdf-debugger-size: 198px;
-
-  &__debugger {
-    @apply grid grid-cols-1 p-4 bg-inverse text-on-emphasis absolute rounded w-[var(--p-pdf-debugger-size)];
-    /* @apply dark:bg-dark-inverse dark:text-dark-on-emphasis; */
-
-    > pre {
-      @apply truncate;
-    }
-  }
-}
-</style>

package/dist/components/pdf-object/PdfObjects.vue

@@ -1,39 +0,0 @@
-<template>
-  <div
-    ref="root"
-    class="pdf-objects"
-    data-testid="pdf-objects">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import {
-  ref,
-  provide,
-  toRef,
-} from 'vue-demi'
-import { PDF_OBJECTS_CONTEXT } from '.'
-import { usePdfContext } from '../pdf-viewer'
-import useDrop from './utils/use-drop'
-
-const props = defineProps({
-  dropTarget: {
-    type   : String,
-    default: '.pdfViewer > .page',
-  },
-})
-
-const objects    = new Map()
-const root       = ref<HTMLDivElement>()
-const pdfContext = usePdfContext()
-const dropTarget = toRef(props, 'dropTarget')
-
-useDrop(root, dropTarget)
-
-provide(PDF_OBJECTS_CONTEXT, {
-  ...pdfContext,
-  objects,
-  root,
-})
-</script>