@privyid/persona 1.2.0 → 1.2.1

package/dist/components/pagination/index.md

@@ -1,350 +0,0 @@
----
-title: Pagination · Components
-description: Table pagination control.
----
-
-<script setup>
-import { ref } from 'vue-demi'
-import pPagination from './Pagination.vue'
-
-import IconNextOutline from '@privyid/persona-icon/vue/arrow-circle-right/20.vue'
-import IconPrevOutline from '@privyid/persona-icon/vue/arrow-circle-left/20.vue'
-import IconSkipForward from '@privyid/persona-icon/vue/caret-right/20.vue'
-import IconSkipBack from '@privyid/persona-icon/vue/caret-left/20.vue'
-
-const simpleModel = ref(1)
-const simpleTotal = ref(100)
-
-const moreModel   = ref(1)
-const moreTotal   = ref(200)
-
-const navModel          = ref(1)
-const navTotal          = ref(50)
-const navPerPage        = ref(10)
-const navPerPageOptions = ref([5,10,15])
-
-const detailModel          = ref(1)
-const detailTotal          = ref(50)
-const detailPerPage        = ref(10)
-const detailPerPageOptions = ref([5,10,15])
-
-const quickModel          = ref(1)
-const quickTotal          = ref(100)
-const quickPerPage        = ref(10)
-const quickPerPageOptions = ref([5,10,15])
-
-</script>
-
-
-# Pagination
-
-> Table pagination control.
-
-## Usage
-
-### Simple Usage
-
-<preview>
-  <p-pagination v-model="simpleModel" :total="simpleTotal" />
-</preview>
-
-```vue
-<template>
-  <p-pagination v-model="model" :total="total" />
-</template>
-
-<script setup>
-  const model = ref(1)
-  const total = ref(100)
-</script>
-```
-
-### More Pages
-
-Pages will automatically truncated if maximum display limit exceeded.
-
-<preview>
-  <p-pagination v-model="moreModel" :total="moreTotal" />
-</preview>
-
-```vue
-<template>
-  <p-pagination v-model="model" :total="total" />
-</template>
-
-<script setup>
-  const model   = ref(1)
-  const total   = ref(200)
-</script>
-```
-
-## Variants
-
-There are 3 navigation variants: `none`, `short`, `far`, default is `short`
-
-<preview class="flex-col space-y-2">
-  <p-pagination v-model="simpleModel" variant="none" :total="simpleTotal" />
-  <p-pagination v-model="simpleModel" variant="short" :total="simpleTotal" />
-  <p-pagination v-model="simpleModel" variant="far" :total="simpleTotal" />
-</preview>
-
-```vue
-<template>
-  <p-pagination v-model="model" variant="none" :total="total" />
-  <p-pagination v-model="model" variant="short" :total="total" />
-  <p-pagination v-model="model" variant="far" :total="total" />
-</template>
-
-<script setup>
-  const model = ref(1)
-  const total = ref(100)
-</script>
-```
-
-## Show Detail
-
-Add prop `show-detail` to show row calculation and per page options.
-
-<preview class="flex-col space-y-2">
-  <p-pagination v-model="detailModel" v-model:per-page="detailPerPage" :per-page-options="detailPerPageOptions" :total="detailTotal" show-detail />
-</preview>
-
-```vue
-<template>
-  <p-pagination
-    v-model="model"
-    v-model:per-page="perPage"
-    :total="total"
-    :per-page-options="perPageOptions"
-    show-detail />
-</template>
-
-<script setup>
-  const model          = ref(1)
-  const total          = ref(50)
-  const perPage        = ref(10)
-  const perPageOptions = ref([5,10,15])
-</script>
-```
-
-## Navigation Text
-Add prop `navigation-text` to change previous and next icon to text, default is `Previous` and `Next`.\
-You can change the text label via `prev-nav-label` and `next-nav-label` prop.
-
-<preview class="flex-col space-y-2">
-  <p-pagination v-model="simpleModel" :total="simpleTotal" navigation-text />
-  <p-pagination v-model="simpleModel" :total="simpleTotal" navigation-text prev-nav-label="Kembali" next-nav-label="Lanjut" />
-</preview>
-
-```vue
-<template>
-  <p-pagination v-model="model" :total="total" navigation-text />
-  <p-pagination
-    v-model="model"
-    :total="total"
-    navigation-text
-    prev-nav-label="Kembali"
-    next-nav-label="Lanjut" />
-</template>
-
-<script setup>
-  const model = ref(1)
-  const total = ref(100)
-</script>
-```
-
-## Navigation Only
-
-Add prop `navigation-only` to show navigation without page items. Navigation only  will auto aligned to right.
-
-<preview class="flex-col space-y-2">
-  <p-pagination v-model="navModel" navigation-only :total="navTotal" />
-  <p-pagination v-model="navModel" v-model:per-page="navPerPage" :per-page-options="navPerPageOptions" :total="navTotal" show-counter navigation-only />
-  <p-pagination v-model="navModel" v-model:per-page="navPerPage" :per-page-options="navPerPageOptions" :total="navTotal" show-per-page navigation-only />
-  <p-pagination v-model="navModel" v-model:per-page="navPerPage" :per-page-options="navPerPageOptions" :total="navTotal" show-detail navigation-only />
-</preview>
-
-```vue
-<template>
-  <p-pagination v-model="model" navigation-only :total="total" />
-  <p-pagination
-    v-model="model"
-    v-model:per-page="perPage"
-    :per-page-options="perPageOptions"
-    :total="total"
-    navigation-only
-    show-counter />
-  <p-pagination
-    v-model="model"
-    v-model:per-page="perPage"
-    :per-page-options="perPageOptions"
-    :total="total"
-    navigation-only
-    show-per-page />
-  <p-pagination
-    v-model="model"
-    v-model:per-page="perPage"
-    :per-page-options="perPageOptions"
-    :total="total"
-    navigation-only
-    show-detail />
-</template>
-
-<script setup>
-  const model = ref(1)
-  const total = ref(50)
-  const perPage        = ref(10)
-  const perPageOptions = ref([5,10,15])
-</script>
-```
-
-## Quick Jump
-
-Add prop `quick-jump` to change mode to quick jump.
-
-<preview class="flex-col space-y-2">
-  <p-pagination v-model="quickModel" v-model:per-page="quickPerPage" :total="quickTotal" quick-jump />
-  <p-pagination v-model="quickModel" v-model:per-page="quickPerPage" :per-page-options="quickPerPageOptions" :total="quickTotal" quick-jump show-detail />
-</preview>
-
-```vue
-<template>
-  <p-pagination v-model="model" :total="total" quick-jump />
-  <p-pagination
-    v-model="model"
-    v-model:per-page="perPage"
-    :per-page-options="perPageOptions"
-    :total="total"
-    quick-jump
-    show-detail />
-</template>
-
-<script>
-  const model          = ref(1)
-  const total          = ref(100)
-  const perPage        = ref(10)
-  const perPageOptions = ref([5,10,15])
-</script>
-```
-
-## Customization Slots
-
-### Custom Navigation
-
-<preview>
-  <p-pagination v-model="simpleModel" variant="far" :total="100">
-    <template #first-navigation>
-      <IconSkipBack />
-    </template>
-    <template #last-navigation>
-      <IconSkipForward />
-    </template>
-    <template #prev-navigation>
-      <IconPrevOutline />
-    </template>
-    <template #next-navigation>
-      <IconNextOutline />
-    </template>
-  </p-pagination>
-</preview>
-
-```vue
-<template>
- <p-pagination v-model="model" variant="far" :total="100">
-    <template #first-navigation>
-      <IconSkipBack />
-    </template>
-    <template #last-navigation>
-      <IconSkipForward />
-    </template>
-    <template #prev-navigation>
-      <IconPrevOutline/>
-    </template>
-    <template #next-navigation>
-      <IconNextOutline/>
-    </template>
- </p-pagination>
-</template>
-```
-
-### Custom Data Counter
-
-<preview>
-  <p-pagination v-model="detailModel" v-model:per-page="detailPerPage" :total="detailTotal" show-detail>
-    <template #pagination-count="{ range, total }">
-      {{ range[0] }} to {{ range[1] }} from {{ total }}
-    </template>
-  </p-pagination>
-</preview>
-
-```vue
-<template>
-  <p-pagination v-model="model" v-model:per-page="perPage" :total="total" show-detail>
-    <template #pagination-count="{ range, total }">
-      {{ range[0] }} to {{ range[1] }} from {{ total }}
-    </template>
-  </p-pagination>
-</template>
-```
-
-### Custom Page Count
-
-<preview>
-  <p-pagination v-model="quickModel" :total="quickTotal" quick-jump page-label="Halaman">
-    <template #quick-jump-count="{ total }">
-      dari {{ total }}
-    </template>
-  </p-pagination>
-</preview>
-
-
-```vue
-<template>
-  <p-pagination v-model="model" :total="total" quick-jump page-label="Halaman">
-    <template #quick-jump-count="{ total }">
-      dari {{ total }}
-    </template>
-  </p-pagination>
-</template>
-```
-
-## API
-
-### Props
-
-| Props              |    Type    |   Default    | Description                                                                                   |
-| ------------------ | :--------: | :----------: | --------------------------------------------------------------------------------------------- |
-| `modelValue`       |  `Number`  |     `-`      | `v-model` value. Specified as current page                                                    |
-| `quick-jump`       | `Boolean`  |   `false`    | Shorten pagination using select component                                                     |
-| `show-counter`     | `Boolean`  |   `false`    | Show the data items counters                                                                  |
-| `show-per-page`    | `Boolean`  |   `false`    | Show the per page options                                                                     |
-| `show-detail`      | `Boolean`  |   `false`    | Show the data items counter and per page options                                              |
-| `navigation-text`  | `Boolean`  |   `false`    | Change previous and next navigation icon to text label                                        |
-| `navigation-only`  | `Boolean`  |   `false`    | Hide pagination items and show the navigation only                                            |
-| `per-page`         |  `Number`  |     `10`     | Number of data items per page                                                                 |
-| `per-page-options` | `Number[]` | `[10,20,30]` | Specify per page options                                                                      |
-| `total`            |  `Number`  |     `0`      | Total number of data items                                                                    |
-| `display-limit`    |  `Number`  |     `10`     | Maximum display limit of visible page buttons. Included two ellipsis                          |
-| `variant`          |  `String`  |   `short`    | Specify navigation variant                                                                    |
-| `page-label`       |  `String`  |    `Page`    | Label to place in the quick jump                                                              |
-| `prev-nav-label`   |  `String`  |  `Previous`  | Label to place in the previous navigation button. Only works if `navigation-text` is provided |
-| `next-nav-label`   |  `String`  |    `Next`    | Label to place in the next navigation button. Only works if `navigation-text` is provided     |
-| `first-nav-label`  |  `String`  |   `First`    | Label to place in the first navigation button                                                 |
-| `last-nav-label`   |  `String`  |    `Last`    | Label to place in the last navigation button                                                  |
-| `show-rows-label`  |  `String`  | `Show rows`  | Label to place in the per page options. Only works if `show-detail` is provided               |
-| `select-size`      |  `String`  |     `md`     | Set size of select input. Valid value is `xs`, `sm`, `md` and `lg`                            |
-
-### Slots
-| Name               | Scoped              | Description                                                                                |
-| ------------------ | ------------------- | ------------------------------------------------------------------------------------------ |
-| `first-navigation` | No                  | Content to place in first navigation button when prop `variant` set to `far`               |
-| `last-navigation`  | No                  | Content to place in last navigation button when prop `variant` set to `far`                |
-| `prev-navigation`  | No                  | Content to place in previous navigation button when prop `variant` set to `short` or `far` |
-| `next-navigation`  | No                  | Content to place in next navigation button when prop `variant` set to `short` or `far`     |
-| `quick-jump-count` | `total`             | Content to place in quick jump page count when prop `quick-jump` is provided               |
-| `pagination-count` | `range` and `total` | Content to place in pagination counter when prop `show-detail` is provided                 |
-
-## See Also
-- [Table Static](/components/table-static/)
-- [Table Flex](/components/table-flex/)
-

package/dist/components/pagination/index.mjs

@@ -1,38 +0,0 @@
-import { computed, toRef } from "vue-demi";
-import {
-  getPageItems,
-  getPageRange,
-  PAGE_PADDING
-} from "./utils/calculate-page.mjs";
-export function usePagination(props) {
-  const page = toRef(props, "modelValue");
-  const perPage = toRef(props, "perPage");
-  const total = toRef(props, "total");
-  const displayLimit = toRef(props, "displayLimit");
-  const totalPageCount = computed(() => {
-    return total.value <= 0 ? 0 : Math.ceil(total.value / perPage.value);
-  });
-  const rowRange = computed(() => {
-    const start = Math.max((page.value - 1) * perPage.value + 1, 0);
-    const end = Math.min(page.value * perPage.value, total.value);
-    return [start, end];
-  });
-  const pageItems = computed(() => {
-    if (totalPageCount.value === 0 || displayLimit.value < PAGE_PADDING)
-      return [];
-    if (totalPageCount.value === 1)
-      return [1];
-    if (displayLimit.value >= totalPageCount.value)
-      return getPageRange(1, totalPageCount.value);
-    return getPageItems(page.value, totalPageCount.value, displayLimit.value);
-  });
-  const canNext = computed(() => page.value < totalPageCount.value);
-  const canPrev = computed(() => page.value > 1);
-  return {
-    pageItems,
-    rowRange,
-    totalPageCount,
-    canNext,
-    canPrev
-  };
-}

package/dist/components/pagination/utils/calculate-page.d.ts

@@ -1,11 +0,0 @@
-/**
-* PAGE_PADDING is total from first_page + last_page + current_page + 2*DOTS
-*/
-export declare const DOTS = "...";
-export declare const PAGE_PADDING = 5;
-export declare function getPageRange(start: number, end: number): number[];
-export declare function getSiblings(displayLimit: number): {
-    totalSiblings: number;
-    totalPageDisplay: number;
-};
-export declare function getPageItems(page: number, totalPageCount: number, displayLimit: number): (string | number)[] | undefined;

package/dist/components/pagination/utils/calculate-page.mjs

@@ -1,48 +0,0 @@
-export const DOTS = "...";
-export const PAGE_PADDING = 5;
-export function getPageRange(start, end) {
-  const length = end - start + 1;
-  return Array.from({ length }, (_, index) => index + start);
-}
-export function getSiblings(displayLimit) {
-  const totalSiblings = Math.floor((displayLimit - PAGE_PADDING) / 2);
-  const totalPageNumber = 2 * totalSiblings + PAGE_PADDING;
-  const totalPageDisplay = totalPageNumber - 2;
-  return {
-    totalSiblings,
-    totalPageDisplay
-  };
-}
-export function getPageItems(page, totalPageCount, displayLimit) {
-  const { totalSiblings, totalPageDisplay } = getSiblings(displayLimit);
-  const startPage = Math.max(page - totalSiblings, 1);
-  const endPage = Math.min(page + totalSiblings, totalPageCount);
-  const showLeftEllipsis = startPage > 2;
-  const showRightEllipsis = endPage <= totalPageCount - 2;
-  if (showLeftEllipsis && !showRightEllipsis) {
-    const pageRange = getPageRange(totalPageCount - totalPageDisplay + 1, totalPageCount);
-    return [
-      1,
-      DOTS,
-      ...pageRange
-    ];
-  }
-  if (!showLeftEllipsis && showRightEllipsis) {
-    const pageRange = getPageRange(1, totalPageDisplay);
-    return [
-      ...pageRange,
-      DOTS,
-      totalPageCount
-    ];
-  }
-  if (showLeftEllipsis && showRightEllipsis) {
-    const pageRange = getPageRange(startPage, endPage);
-    return [
-      1,
-      DOTS,
-      ...pageRange,
-      DOTS,
-      totalPageCount
-    ];
-  }
-}

package/dist/components/pagination/utils/calculate-page.spec.d.ts

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

package/dist/components/pagination/utils/calculate-page.spec.mjs

@@ -1,78 +0,0 @@
-import {
-  DOTS,
-  getPageRange,
-  getSiblings,
-  getPageItems
-} from "./calculate-page.mjs";
-describe("getPageRange", () => {
-  it("should return array from given start index to end index", () => {
-    const pageRange = getPageRange(1, 5);
-    expect(pageRange).toBeInstanceOf(Array);
-    expect(pageRange).toHaveLength(5);
-    expect(pageRange).toStrictEqual([
-      1,
-      2,
-      3,
-      4,
-      5
-    ]);
-  });
-});
-describe("getSiblings", () => {
-  it("should return total siblings and total page display", () => {
-    const { totalSiblings, totalPageDisplay } = getSiblings(10);
-    expect(totalSiblings).toBe(2);
-    expect(totalPageDisplay).toBe(7);
-    expect(totalSiblings + totalPageDisplay).toBe(9);
-  });
-});
-describe("getPageItems", () => {
-  it("should return page items with left ellipsis only", () => {
-    const pageItems = getPageItems(12, 15, 10);
-    expect(pageItems).toBeInstanceOf(Array);
-    expect(pageItems).toHaveLength(9);
-    expect(pageItems).toStrictEqual([
-      1,
-      DOTS,
-      9,
-      10,
-      11,
-      12,
-      13,
-      14,
-      15
-    ]);
-  });
-  it("should return page items with right ellipsis only", () => {
-    const pageItems = getPageItems(1, 15, 10);
-    expect(pageItems).toBeInstanceOf(Array);
-    expect(pageItems).toHaveLength(9);
-    expect(pageItems).toStrictEqual([
-      1,
-      2,
-      3,
-      4,
-      5,
-      6,
-      7,
-      DOTS,
-      15
-    ]);
-  });
-  it("should return page items with left and right ellipsis", () => {
-    const pageItems = getPageItems(6, 15, 10);
-    expect(pageItems).toBeInstanceOf(Array);
-    expect(pageItems).toHaveLength(9);
-    expect(pageItems).toStrictEqual([
-      1,
-      DOTS,
-      4,
-      5,
-      6,
-      7,
-      8,
-      DOTS,
-      15
-    ]);
-  });
-});

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

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

package/dist/components/pdf-helipad/PdfHelipad.spec.mjs

@@ -1,157 +0,0 @@
-import { vi } from "vitest";
-import { render } from "@testing-library/vue";
-import useDrag, {
-  triggerDragStart,
-  triggerDragMove,
-  triggerDragEnd,
-  triggerTap
-} from "../pdf-object/__mocks__/use-drag";
-import PdfHelipad from "./PdfHelipad.vue";
-import PdfObject from "../pdf-object/PdfObject.vue";
-import PdfObjects from "../pdf-object/PdfObjects.vue";
-import { ref } from "vue-demi";
-vi.mock("./utils/use-drag.ts", () => ({ default: useDrag }));
-vi.mock("../pdf-object/utils/use-drop.ts", () => ({ default: vi.fn(() => ref(true)) }));
-it("should mount properly", () => {
-  const screen = render({
-    components: { PdfHelipad },
-    template: `
-      <pdf-helipad/>
-    `
-  });
-  const helipad = screen.queryByTestId("pdf-helipad");
-  const object = screen.queryByTestId("pdf-helipad-object");
-  expect(helipad).toBeInTheDocument();
-  expect(object).toBeInTheDocument();
-});
-it("should in disabled state if prop disabled was provided", () => {
-  const screen = render({
-    components: { PdfHelipad },
-    template: `
-      <pdf-helipad disabled />
-    `
-  });
-  const helipad = screen.queryByTestId("pdf-helipad");
-  expect(helipad).toBeInTheDocument();
-  expect(helipad).toHaveClass("pdf-helipad--disabled");
-});
-it("should follow the cursor when dragged", async () => {
-  const screen = render({
-    components: { PdfHelipad },
-    template: `
-      <pdf-helipad/>
-    `
-  });
-  const helipad = screen.queryByTestId("pdf-helipad");
-  const object = screen.queryByTestId("pdf-helipad-object");
-  expect(helipad).toBeInTheDocument();
-  expect(object).toBeInTheDocument();
-  vi.spyOn(object, "getBoundingClientRect").mockReturnValueOnce({
-    top: 400,
-    y: 400,
-    left: 100,
-    x: 100,
-    width: 198,
-    height: 106,
-    bottom: 0,
-    right: 0,
-    toJSON: vi.fn()
-  });
-  await triggerDragStart();
-  expect(object).toHaveStyle({
-    position: "fixed",
-    transform: "translate(100px, 400px) scale(1)"
-  });
-  await triggerDragMove({
-    clientX: 500,
-    clientY: 500,
-    rect: {
-      top: 400,
-      left: 100,
-      width: 198,
-      height: 106,
-      bottom: 0,
-      right: 0
-    }
-  });
-  expect(object).toHaveStyle({
-    position: "fixed",
-    transform: "translate(401px, 447px) scale(1)"
-  });
-});
-it("should emit landed if object successfully dropped", async () => {
-  const onLanded = vi.fn();
-  const screen = render({
-    components: {
-      PdfHelipad,
-      PdfObject,
-      PdfObjects
-    },
-    template: `
-      <pdf-helipad @landed="onLanded" />
-      <pdf-objects>
-        <div class="pdfViewer" data-testid="viewer" style="position:absolute;top:0;left:0;width:500px;height:500px;overflow-y:auto;">
-          <div class="page" data-testid="page-1" data-page-number="1" style="width:300px;height:400px;"></div>
-          <div class="page" data-testid="page-2" data-page-number="2" style="width:300px;height:400px;"></div>
-        </div>
-      </pdf-objects>
-    `,
-    setup() {
-      return { onLanded };
-    }
-  });
-  const helipad = screen.queryByTestId("pdf-helipad");
-  const object = screen.queryByTestId("pdf-helipad-object");
-  const page2 = screen.queryByTestId("page-2");
-  expect(helipad).toBeInTheDocument();
-  expect(object).toBeInTheDocument();
-  vi.spyOn(page2, "getBoundingClientRect").mockReturnValue({
-    top: 100,
-    y: 100,
-    x: 100,
-    left: 100,
-    width: 791,
-    height: 1122,
-    bottom: 0,
-    right: 0,
-    toJSON: vi.fn()
-  });
-  vi.spyOn(object, "getBoundingClientRect").mockReturnValueOnce({
-    top: 400,
-    y: 400,
-    left: 100,
-    x: 100,
-    width: 300,
-    height: 400,
-    bottom: 0,
-    right: 0,
-    toJSON: vi.fn()
-  });
-  await triggerDragEnd(page2);
-  expect(object).toHaveStyle({ position: "absolute" });
-  expect(onLanded).toBeCalledWith({
-    x: 1,
-    y: 300,
-    page: 2,
-    width: 198,
-    height: 106
-  });
-});
-it("should emit event click when clicked", async () => {
-  const onClick = vi.fn();
-  render({
-    components: {
-      PdfHelipad,
-      PdfObject,
-      PdfObjects
-    },
-    template: `
-      <pdf-helipad @click="onClick" />
-    `,
-    setup() {
-      return { onClick };
-    }
-  });
-  await triggerTap();
-  expect(onClick).toBeCalled();
-});