@privyid/persona 1.1.1 → 1.2.0

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

@@ -22,114 +22,96 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import '../pdf-object/PdfObject.vue'
+<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'
-import type { PdfHelipadResult } from '.'
-import type { InteractEvent } from '@interactjs/types'
-
+  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,
+    type: Number,
+    default: 1
   },
   width: {
-    type   : Number,
-    default: 198,
+    type: Number,
+    default: 198
   },
   height: {
-    type   : Number,
-    default: 106,
+    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)
-
+    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: string[] = []
-
+  const result = [];
   if (props.disabled)
-    result.push('pdf-helipad--disabled')
-
-  return result
-})
-
+    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
+  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)
+  onmove(event) {
+    x.value = event.clientX - event.rect.width * scale.value / 2;
+    y.value = event.clientY - event.rect.height * scale.value / 2;
   },
-  onend (event) {
+  onend(event) {
     if (event.relatedTarget) {
-      const reference = event.relatedTarget
-      const result    = getPosition({
-        reference: reference as HTMLDivElement,
-        object   : object.value,
-        scale    : scale.value,
-      })
-
-      emit('landed', {
+      const reference = event.relatedTarget;
+      const result = getPosition({
+        reference,
+        object: object.value,
+        scale: scale.value
+      });
+      emit("landed", {
         ...result,
-        width : width.value,
-        height: height.value,
-      })
+        width: width.value,
+        height: height.value
+      });
     }
-
-    isDragged.value = false
+    isDragged.value = false;
   },
-  ontap (event) {
-    emit('click', event)
-  },
-})
-
+  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'
+      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'
+      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 })
+  draggable.value = !isDisabled;
+}, { immediate: true });
 </script>
 
 <style lang="postcss">

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

@@ -0,0 +1,68 @@
+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.md

@@ -0,0 +1,169 @@
+---
+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-object/PdfObject.spec.d.ts

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