@privyid/persona 1.2.0 → 1.2.1

package/dist/components/pdf-object/index.md

@@ -1,467 +0,0 @@
----
-title: PDF Objects · Components
-description: Add object to PDF Viewer
----
-
-<script setup>
-  import pPdfViewer from '../pdf-viewer/PdfViewer.vue'
-  import pPdfObject from './PdfObject.vue'
-  import pPdfObjectAddon from './PdfObjectAddon.vue'
-  import pButton from '../button/Button.vue'
-  import IconClose from '@privyid/persona-icon/vue/close/16.vue'
-  import { reactive, ref, nextTick } from 'vue-demi'
-  import { random } from 'lodash-es'
-  import pDropdown from '../dropdown/Dropdown.vue'
-  import pDropdownItem from '../dropdown/DropdownItem.vue'
-  import { withBase } from 'vitepress'
-
-  const FILE = withBase('/assets/pdf/Calibrator-v3.pdf')
-
-  const object1 = reactive({
-    page  : undefined,
-    x     : undefined,
-    y     : undefined,
-    width : undefined,
-    height: undefined,
-  })
-
-  const object2 = reactive({
-    page  : undefined,
-    x     : undefined,
-    y     : undefined,
-    width : undefined,
-    height: undefined,
-  })
-
-  const object3 = reactive({
-    page  : undefined,
-    x     : undefined,
-    y     : undefined,
-    width : undefined,
-    height: undefined,
-  })
-
-  const objects = reactive([])
-
-  function add () {
-    objects.push({
-      _id   : Symbol('ObjectId'),
-      page  : undefined,
-      x     : undefined,
-      y     : undefined,
-      width : undefined,
-      height: undefined,
-    })
-  }
-
-  function remove (index) {
-    objects.splice(index, 1)
-  }
-
-  const isShow = ref(false)
-  const page   = ref(random(6, 11, 0))
-
-  function show () {
-    if (isShow.value)
-      isShow.value = false
-
-    nextTick(() => {
-      page.value   = random(6, 11, 0)
-      isShow.value = true
-    })
-  }
-</script>
-
-<style lang="postcss">
-  .preview > .pdf {
-    @apply z-[2];
-  }
-</style>
-
-# PDF Object
-
-> Add object to PDF Viewer
-
-## Usage
-
-### Simple Usage
-
-<preview>
-  <p-pdf-viewer :src="FILE">
-    <p-pdf-object
-      v-model:page="object1.page"
-      v-model:x="object1.x"
-      v-model:y="object1.y"
-      v-model:width="object1.width"
-      v-model:height="object1.height">
-      <img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
-    </p-pdf-object>
-  </p-pdf-viewer>
-</preview>
-
-```vue
-<template>
-  <p-pdf-viewer :src="FILE">
-    <p-pdf-object
-      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="https://via.placeholder.com/430x230/23B242/ffffff" />
-    </p-pdf-object>
-  </p-pdf-viewer>
-</template>
-
-<script setup lang="ts">
-  import FILE from '~/assets/Calibrator-v3.pdf?url'
-
-  interface PdfObject {
-    page?: number,
-    x?: number,
-    y?: number,
-    width?: number,
-    height?: number,
-  }
-
-  const object = reactive<PdfObject>({
-    page  : undefined,
-    x     : undefined,
-    y     : undefined,
-    width : undefined,
-    height: undefined,
-  })
-</script>
-```
-
-## Object Addon
-
-You can add additional element like action button using `<p-object-addon>` component.
-
-<preview>
-  <p-pdf-viewer :src="FILE">
-    <template #header>
-      <p-button color="primary" class="float-right my-4" @click="add">
-        Add Object
-      </p-button>
-    </template>
-    <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="https://via.placeholder.com/430x230/23B242/ffffff" />
-      <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-viewer :src="FILE">
-    <template #header>
-      <p-button color="primary" class="float-right my-4" @click="add">
-        Add Object
-      </p-button>
-    </template>
-    <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="https://via.placeholder.com/430x230/23B242/ffffff" />
-      <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'
-
-  interface PdfObject {
-    _id: symbol,
-    page?: number,
-    x?: number,
-    y?: number,
-    width?: number,
-    height?: number,
-  }
-
-  const objects = reactive<PdfObject[]>([])
-
-  function add () {
-    objects.push({
-      _id   : Symbol('ObjectId'),
-      page  : undefined,
-      x     : undefined,
-      y     : undefined,
-      width : undefined,
-      height: undefined,
-    })
-  }
-
-  function remove (index: number) {
-    objects.splice(index, 1)
-  }
-</script>
-```
-
-### Addon Position
-
-You can also change addon position using prop `position`. valid value is: `left`, `top`, `right`, and `bottom`. Default is `right`
-
-<preview>
-  <p-pdf-viewer :src="FILE">
-    <p-pdf-object
-      :page="1"
-      :x="100"
-      :y="100"
-      :width="198"
-      :height="106">
-      <img class="w-full h-full rounded" src="https://via.placeholder.com/198x106/23B242/ffffff" />
-      <p-pdf-object-addon position="left">
-        This is Addon
-      </p-pdf-object-addon>
-      <p-pdf-object-addon position="top">
-        Drag to move
-      </p-pdf-object-addon>
-      <p-pdf-object-addon position="right">
-        <p-button size="sm" icon color="danger">
-          <IconClose />
-        </p-button>
-      </p-pdf-object-addon>
-      <p-pdf-object-addon position="bottom">
-        Drag the handle to resize
-      </p-pdf-object-addon>
-    </p-pdf-object>
-  </p-pdf-viewer>
-</preview>
-
-```vue
-<template>
-  <p-pdf-viewer :src="FILE">
-    <p-pdf-object
-      :page="1"
-      :x="100"
-      :y="100"
-      :width="198"
-      :height="106">
-      <img class="w-full h-full rounded" src="https://via.placeholder.com/198x106/23B242/ffffff" />
-      <p-pdf-object-addon position="left">
-        This is Addon
-      </p-pdf-object-addon>
-      <p-pdf-object-addon position="top">
-        Drag to move
-      </p-pdf-object-addon>
-      <p-pdf-object-addon position="right">
-        <p-button size="sm" icon color="danger">
-          <IconClose />
-        </p-button>
-      </p-pdf-object-addon>
-      <p-pdf-object-addon position="bottom">
-        Drag the handle to resize
-      </p-pdf-object-addon>
-    </p-pdf-object>
-  </p-pdf-viewer>
-</template>
-```
-
-## Autofocus
-
-Add prop `autofocus` focus on object when the object mounted.
-
-**Try it**
-
-<p-button @click="show">Test</p-button>
-
-<preview>
-  <p-pdf-viewer :src="FILE">
-    <p-pdf-object
-      v-if="isShow"
-      :page="page"
-      :x="100"
-      :y="100"
-      :width="198"
-      :height="106"
-      autofocus>
-      <img class="w-full h-full rounded" src="https://via.placeholder.com/198x106/23B242/ffffff" />
-    </p-pdf-object>
-  </p-pdf-viewer>
-</preview>
-
-```vue{10}
-<template>
-  <p-pdf-viewer :src="FILE">
-    <p-pdf-object
-      v-if="isShow"
-      :page="page"
-      :x="100"
-      :y="100"
-      :width="198"
-      :height="106"
-      autofocus>
-      <img class="w-full h-full rounded" src="https://via.placeholder.com/198x106/23B242/ffffff" />
-    </p-pdf-object>
-  </p-pdf-viewer>
-</template>
-```
-
-## Debug Mode
-
-Add prop `debug` to enable debug mode.
-
-<preview>
-  <p-pdf-viewer :src="FILE">
-    <p-pdf-object
-      v-model:page="object2.page"
-      v-model:x="object2.x"
-      v-model:y="object2.y"
-      v-model:width="object2.width"
-      v-model:height="object2.height"
-      debug>
-      <img class="w-full h-full rounded" src="https://via.placeholder.com/198x106/23B242/ffffff" />
-    </p-pdf-object>
-  </p-pdf-viewer>
-</preview>
-
-```vue{9}
-<template>
-  <p-pdf-viewer :src="FILE">
-    <p-pdf-object
-      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"
-      debug>
-      <img class="w-full h-full rounded" src="https://via.placeholder.com/198x106/23B242/ffffff" />
-    </p-pdf-object>
-  </p-pdf-viewer>
-</template>
-```
-
-
-## Disabled Move
-
-To disable object move, set prop `moveable` to `false`.
-
-<preview>
-  <p-pdf-viewer :src="FILE">
-    <p-pdf-object
-      :page="1"
-      :x="400"
-      :y="300"
-      :width="198"
-      :height="106"
-      :moveable="false">
-      <img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
-    </p-pdf-object>
-  </p-pdf-viewer>
-</preview>
-
-```vue{9}
-<template>
-  <p-pdf-viewer :src="FILE">
-    <p-pdf-object
-      :page="1"
-      :x="400"
-      :y="300"
-      :width="198"
-      :height="106"
-      :moveable="false">
-      <img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
-    </p-pdf-object>
-  </p-pdf-viewer>
-</template>
-```
-
-## Disabled Resize
-
-To disable object resize, set prop `resizable` to `false`.
-
-<preview>
-  <p-pdf-viewer :src="FILE">
-    <p-pdf-object
-      v-model:page="object3.page"
-      v-model:x="object3.x"
-      v-model:y="object3.y"
-      v-model:width="object3.width"
-      v-model:height="object3.height"
-      :resizable="false">
-      <img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
-    </p-pdf-object>
-  </p-pdf-viewer>
-</preview>
-
-```vue{9}
-<template>
-  <p-pdf-viewer :src="FILE">
-    <p-pdf-object
-      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"
-      :resizable="false">
-      <img class="w-full h-full rounded" src="https://via.placeholder.com/430x230/23B242/ffffff" />
-    </p-pdf-object>
-  </p-pdf-viewer>
-</template>
-```
-
-## API
-
-### Props `<p-pdf-object>`
-
-| Props       |   Type    | Default | Description                                                             |
-|-------------|:---------:|:-------:|-------------------------------------------------------------------------|
-| `x`         | `Number`  |   `-`   | Object x position                                                       |
-| `y`         | `Number`  |   `-`   | Object y position                                                       |
-| `page`      | `Number`  |   `-`   | Object page position                                                    |
-| `width`     | `Number`  |  `198`  | Object width                                                            |
-| `height`    | `Number`  |  `106`  | Object height                                                           |
-| `minWidth`  | `Number`  |   `-`   | Minimum object width when resized, default is half of object's width    |
-| `minHeight` | `Number`  |   `-`   | Minimum object height when resized, default is half of object's height  |
-| `maxWidth`  | `Number`  |   `-`   | Maximum object width when resized, default is twice of object's width   |
-| `maxHeight` | `Number`  |   `-`   | Maximum object height when resized, default is twice of object's height |
-| `moveable`  | `Boolean` | `true`  | Enable object to move                                                   |
-| `resizable` | `Boolean` | `true`  | Enable object to resize                                                 |
-| `autofocus` | `Boolean` | `false` | Focus on object when object mounted                                     |
-| `debug`     | `Boolean` | `false` | Enable object debugger                                                  |
-
-### Slots `<p-pdf-object>`
-
-| Name      | Description                                  |
-|-----------|----------------------------------------------|
-| `default` | Content to place inside the `<p-pdf-object>` |
-
-### Props `<p-pdf-object-addon>`
-
-| Props      |   Type   | Default | Description                                                   |
-|------------|:--------:|:-------:|---------------------------------------------------------------|
-| `position` | `String` | `right` | Addon position, valid value: `left`, `right`, `top`, `bottom` |
-
-### Slots `<p-pdf-object-addon>`
-
-| Name      | Description                                        |
-|-----------|----------------------------------------------------|
-| `default` | Content to place inside the `<p-pdf-object-addon>` |
-
-## See Also
-
-- [PDF Viewer](/components/pdf-viewer/)
-- [Online PDF Debugger](../../tools/pdf-coordinate-finder)

package/dist/components/pdf-object/index.mjs

@@ -1,110 +0,0 @@
-import {
-  tryOnBeforeMount,
-  tryOnBeforeUnmount,
-  until
-} from "@vueuse/core";
-import {
-  computed,
-  inject,
-  reactive,
-  unref,
-  ref,
-  watch
-} from "vue-demi";
-import { useSelector } from "./utils/use-selector.mjs";
-import { focus as focus_ } from "../tour/utils/focus.mjs";
-import { useClamp } from "@vueuse/math";
-import { debounce, round } from "lodash-es";
-export const PDF_OBJECTS_CONTEXT = Symbol("PDFObjects");
-export const PDF_OBJECT_CONTEXT = Symbol("PDFObjects");
-export function useSizeModel(props) {
-  const ratio = computed(() => round(props.width / props.height, 2));
-  const minWidth = ref(props.minWidth ?? props.width * 0.5);
-  const maxWidth = ref(props.maxWidth ?? props.width * 2);
-  const minHeight = ref(props.minHeight ?? props.height * 0.5);
-  const maxHeight = ref(props.maxHeight ?? props.height * 2);
-  const width = useClamp(props.width, minWidth, maxWidth);
-  const height = useClamp(props.height, minHeight, maxHeight);
-  watch(() => props.minWidth, (value) => {
-    if (Number.isFinite(value))
-      minWidth.value = value;
-  });
-  watch(() => props.minHeight, (value) => {
-    if (Number.isFinite(value))
-      minHeight.value = value;
-  });
-  watch(() => props.maxWidth, (value) => {
-    if (Number.isFinite(value))
-      maxWidth.value = value;
-  });
-  watch(() => props.maxHeight, (value) => {
-    if (Number.isFinite(value))
-      maxHeight.value = value;
-  });
-  return {
-    ratio,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight
-  };
-}
-export function useObjectModel(props) {
-  const {
-    objects,
-    page: currentPage
-  } = inject(PDF_OBJECTS_CONTEXT);
-  const page = ref(props.page ?? currentPage.value);
-  const x = ref(props.x);
-  const y = ref(props.y);
-  const id = Symbol("PDFObject");
-  const {
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    ratio
-  } = useSizeModel(props);
-  objects.set(id, reactive({
-    id,
-    page,
-    x,
-    y,
-    width,
-    height
-  }));
-  tryOnBeforeMount(() => {
-    if (!Number.isFinite(page.value)) {
-      until(currentPage).toBeTruthy().then(() => {
-        page.value = currentPage.value;
-      });
-    }
-  });
-  tryOnBeforeUnmount(() => {
-    objects.delete(id);
-  });
-  return {
-    id,
-    x,
-    y,
-    page,
-    width,
-    height,
-    minWidth,
-    minHeight,
-    maxWidth,
-    maxHeight,
-    ratio
-  };
-}
-export function usePage(page) {
-  const { root } = inject(PDF_OBJECTS_CONTEXT);
-  const pageSelector = computed(() => `.page[data-page-number="${unref(page)}"]`);
-  const pageEl = useSelector(pageSelector, root);
-  return pageEl;
-}
-export const focus = debounce(focus_, 100);

package/dist/components/pdf-object/index.spec.d.ts

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

package/dist/components/pdf-object/index.spec.mjs

@@ -1,70 +0,0 @@
-import { round } from "lodash-es";
-import { nextTick, reactive } from "vue-demi";
-import { useSizeModel } from "./index.mjs";
-describe("useSizeModel", () => {
-  it("should return ref from prop width and height", () => {
-    const refs = useSizeModel({
-      width: 198,
-      height: 106
-    });
-    expect(refs.width.value).toBe(198);
-    expect(refs.height.value).toBe(106);
-  });
-  it("should return ref minWidth and minHeight, value is half of width and height", () => {
-    const refs = useSizeModel({
-      width: 198,
-      height: 106
-    });
-    expect(refs.minWidth.value).toBe(198 / 2);
-    expect(refs.minHeight.value).toBe(106 / 2);
-  });
-  it("should return ref maxWidth and maxHeight, value is twice of width and height", () => {
-    const refs = useSizeModel({
-      width: 198,
-      height: 106
-    });
-    expect(refs.maxWidth.value).toBe(198 * 2);
-    expect(refs.maxHeight.value).toBe(106 * 2);
-  });
-  it("should return ref ratio from prop width and height", () => {
-    const refs = useSizeModel({
-      width: 198,
-      height: 106
-    });
-    expect(refs.ratio.value).toBe(round(430 / 230, 2));
-  });
-  it("should sync when prop minWidth and minHeight changed", async () => {
-    const props = reactive({
-      width: 100,
-      height: 100,
-      minWidth: 50,
-      minHeight: 50
-    });
-    const refs = useSizeModel(props);
-    expect(refs.minWidth.value).toBe(50);
-    expect(refs.minHeight.value).toBe(50);
-    props.minWidth = 75;
-    await nextTick();
-    props.minHeight = 25;
-    await nextTick();
-    expect(refs.minWidth.value).toBe(75);
-    expect(refs.minHeight.value).toBe(25);
-  });
-  it("should sync when prop maxWidth and maxHeight changed", async () => {
-    const props = reactive({
-      width: 100,
-      height: 100,
-      minWidth: 200,
-      minHeight: 200
-    });
-    const refs = useSizeModel(props);
-    expect(refs.maxWidth.value).toBe(200);
-    expect(refs.maxHeight.value).toBe(200);
-    props.maxWidth = 300;
-    await nextTick();
-    props.maxHeight = 250;
-    await nextTick();
-    expect(refs.maxWidth.value).toBe(300);
-    expect(refs.maxHeight.value).toBe(250);
-  });
-});

package/dist/components/pdf-object/utils/overlap.bench.d.ts

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