@privyid/persona 1.2.0 → 1.2.1-rc.0

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

@@ -1,129 +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 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";
-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) {
-      const reference = event.relatedTarget;
-      const result = getPosition({
-        reference,
-        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/PdfHelipad.vue.d.ts

@@ -1,68 +0,0 @@
-import '../pdf-object/PdfObject.vue';
-import type { PdfHelipadResult } from '.';
-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-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    scale: {
-        type: NumberConstructor;
-        default: number;
-    };
-    width: {
-        type: NumberConstructor;
-        default: number;
-    };
-    height: {
-        type: NumberConstructor;
-        default: number;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    click: (args_0: InteractEvent) => void;
-    landed: (args_0: PdfHelipadResult) => void;
-}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").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-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-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/index.md

@@ -1,169 +0,0 @@
----
-title: PDF Helipad · Components
-description: Add object to PDF Viewer with Drag'n'Drop
----
-
-<script setup>
-  import pPdfHelipad from './PdfHelipad.vue'
-  import pPdfObject from '../pdf-object/PdfObject.vue'
-  import pPdfObjectAddon from '../pdf-object/PdfObjectAddon.vue'
-  import pPdfViewer from '../pdf-viewer/PdfViewer.vue'
-  import pButton from '../button/Button.vue'
-  import IconClose from '@privyid/persona-icon/vue/close/16.vue'
-  import { reactive, ref } from 'vue-demi'
-  import { withBase } from 'vitepress'
-
-  const FILE           = withBase('/assets/pdf/Calibrator-v3.pdf')
-  const IMG_HELICOPTER = withBase('/assets/images/img-helicopter.svg')
-
-  const objects = reactive([])
-  const scale   = ref(1)
-
-  function onLanded (item) {
-    objects.push({
-      _id   : Symbol('ObjectId'),
-      page  : item?.page,
-      x     : item?.x,
-      y     : item?.y,
-      width : item?.width,
-      height: item?.height,
-    })
-  }
-
-  function remove (index) {
-    objects.splice(index, 1)
-  }
-</script>
-
-# PDF Helipad
-
-> Add object to PDF Viewer with Drag'n'Drop
-
-## Usage
-
-### Simple Usage
-
-(Drag this to PDF Viewer)
-
-<p-pdf-helipad :scale="scale" @landed="onLanded">
-  <img class="w-full h-full bg-base-white" :src="IMG_HELICOPTER" />
-</p-pdf-helipad>
-
-<preview>
-  <p-pdf-viewer :src="FILE" v-model:scale="scale">
-    <p-pdf-object
-      v-for="(object, i) in objects"
-      :key="object._id"
-      v-model:page="object.page"
-      v-model:x="object.x"
-      v-model:y="object.y"
-      v-model:width="object.width"
-      v-model:height="object.height">
-      <img class="w-full h-full rounded" :src="IMG_HELICOPTER" />
-      <p-pdf-object-addon>
-        <p-button size="sm" icon color="danger" @click="remove(i)">
-          <IconClose />
-        </p-button>
-      </p-pdf-object-addon>
-    </p-pdf-object>
-  </p-pdf-viewer>
-</preview>
-
-```vue
-<template>
-  <p-pdf-helipad :scale="scale" @landed="onLanded">
-    <img class="w-full h-full bg-base-white" :src="IMG_HELICOPTER" />
-  </p-pdf-helipad>
-
-  <p-pdf-viewer :src="FILE" v-model:scale="scale">
-    <p-pdf-object
-      v-for="(object, i) in objects"
-      :key="object._id"
-      v-model:page="object.page"
-      v-model:x="object.x"
-      v-model:y="object.y"
-      v-model:width="object.width"
-      v-model:height="object.height">
-      <img class="w-full h-full" :src="IMG_HELICOPTER" />
-      <p-pdf-object-addon>
-        <p-button size="sm" icon color="danger" @click="remove(i)">
-          <IconClose />
-        </p-button>
-      </p-pdf-object-addon>
-    </p-pdf-object>
-  </p-pdf-viewer>
-</template>
-
-<script setup lang="ts">
-  import FILE from '~/assets/Calibrator-v3.pdf?url'
-  import IMG_HELICOPTER from '~/assets/helicopter.svg'
-  import type { PdfHelipadResult } from '@privyid/persona/core'
-
-  interface PdfObject {
-    _id: symbol,
-    page?: number,
-    x?: number,
-    y?: number,
-    width?: number,
-    height?: number,
-  }
-
-  const scale   = ref(1)
-  const objects = reactive<PdfObject[]>([])
-
-  function onLanded (item: PdfHelipadResult) {
-    objects.push({
-      _id   : Symbol('ObjectId'),
-      page  : item.page,
-      x     : item.x,
-      y     : item.y,
-      width : item.width,
-      height: item.height,
-    })
-  }
-
-  function remove (index: number) {
-    objects.splice(index, 1)
-  }
-</script>
-```
-
-## Disabled State
-
-<preview class="!bg-base-white">
-  <p-pdf-helipad disabled>
-    <img class="w-full h-full" :src="IMG_HELICOPTER" />
-  </p-pdf-helipad>
-</preview>
-
-```vue
-<template>
-  <p-pdf-helipad disabled>
-    <img class="w-full h-full" :src="IMG_HELICOPTER" />
-  </p-pdf-helipad>
-</template>
-```
-
-## API
-
-### Props
-
-| Props      |   Type    | Default | Description    |
-|------------|:---------:|:-------:|----------------|
-| `scale`    | `Number`  |   `1`   | Object scale   |
-| `width`    | `Number`  |  `198`  | Object width   |
-| `height`   | `Number`  |  `106`  | Object height  |
-| `disabled` | `Boolean` | `false` | Disabled state |
-
-### Slots
-
-| Name      | Description                                   |
-|-----------|-----------------------------------------------|
-| `default` | Content to place inside the `<p-pdf-helipad>` |
-
-### Events
-
-| Name     | Arguments        | Description                       |
-|----------|------------------|-----------------------------------|
-| `landed` | PdfHelipadResult | Event object successfully dropped |
-| `click`  | InteractEvent    | Event object clicked              |

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.spec.d.ts

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