@privyid/persona 1.1.2 → 1.2.0

package/dist/components/progress-indicator/index.md

@@ -0,0 +1,115 @@
+---
+title: Progress Indicator · Components
+description: Sub-component for Carousel.
+---
+
+<script setup>
+  import pProgressIndicator from './ProgressIndicator.vue'
+  import { ref } from 'vue-demi'
+
+  const active = ref()
+</script>
+
+# Progress Indicator
+> Sub-component for [Carousel](../carousel/)
+
+## Usage
+
+### Simple Usage
+
+<preview>
+  <p-progress-indicator />
+</preview>
+
+```vue
+<template>
+  <p-progress-indicator />
+</template>
+```
+
+## Number of Dots
+
+<preview class="flex-col space-y-3">
+  <p-progress-indicator length="3" />
+  <p-progress-indicator length="5" />
+  <p-progress-indicator length="7" />
+</preview>
+
+```vue
+<template>
+  <p-progress-indicator length="3" />
+  <p-progress-indicator length="5" />
+  <p-progress-indicator length="7" />
+</template>
+```
+
+## Vertical Mode
+
+Set prop `direction` to `vertical` to enable Vertical Mode.
+
+<preview>
+  <div class="h-36">
+    <p-progress-indicator direction="vertical" />
+  </div>
+</preview>
+
+```vue
+<template>
+  <p-progress-indicator direction="vertical" />
+</template>
+```
+
+## Binding v-model
+
+You can binding current active with v-model
+
+<preview>
+  <p-progress-indicator v-model="active" />
+</preview>
+
+```vue
+<template>
+  <p-progress-indicator v-model="active" />
+</template>
+```
+
+**Active :**
+
+<pre><code>{{ active }}</code></pre>
+
+## API
+
+### Props
+
+| Props        |   Type   |   Default    | Description                                                   |
+|--------------|:--------:|:------------:|---------------------------------------------------------------|
+| `direction`  | `String` | `horizontal` | Indicator direction, valid values is `horizontal`, `vertical` |
+| `length`     | `Number` |     `6`      | Number of dots                                                |
+| `modelValue` | `Number` |     `1`      | v-model value                                                 |
+
+### Slots
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2" class="text-center">There no slots here</td>
+    </tr>
+  </tbody>
+</table>
+
+### Events
+
+| Name     | Arguments | Description              |
+|----------|-----------|--------------------------|
+| `change` | `String`  | Event when value changed |
+
+
+## See Also
+
+- [Carousel](../carousel/)

package/dist/components/progressbar/Progressbar.spec.d.ts

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

package/dist/components/progressbar/Progressbar.spec.mjs

@@ -0,0 +1,50 @@
+import { render } from "@testing-library/vue";
+import Progressbar from "./Progressbar.vue";
+it("should mounted properly", () => {
+  const screen = render({
+    components: { Progressbar },
+    template: "<Progressbar />"
+  });
+  const progressbar = screen.queryByTestId("progressbar");
+  expect(progressbar).toBeInTheDocument();
+});
+it("should able to progress value based on prop `value`", () => {
+  const screen = render({
+    components: { Progressbar },
+    template: '<Progressbar value="45" />'
+  });
+  const progressbar = screen.queryByTestId("progressbar-bar");
+  expect(progressbar).toBeInTheDocument();
+  expect(progressbar).toHaveStyle({ width: "45%" });
+});
+it("should has style indeterminate if prop `indeterminate` set to true", () => {
+  const screen = render({
+    components: { Progressbar },
+    template: "<Progressbar indeterminate />"
+  });
+  const progressbar = screen.queryByTestId("progressbar");
+  expect(progressbar).toBeInTheDocument();
+  expect(progressbar).toHaveClass("progressbar--indeterminate");
+});
+it("should has style success if prop `success` set to true", () => {
+  const screen = render({
+    components: { Progressbar },
+    template: "<Progressbar success />"
+  });
+  const progressbar = screen.queryByTestId("progressbar");
+  const bar = screen.queryByTestId("progressbar-bar");
+  expect(progressbar).toBeInTheDocument();
+  expect(progressbar).toHaveClass("progressbar--success");
+  expect(bar).toHaveStyle({ width: "100%" });
+});
+it("should has style success if prop `error` set to true", () => {
+  const screen = render({
+    components: { Progressbar },
+    template: "<Progressbar error />"
+  });
+  const progressbar = screen.queryByTestId("progressbar");
+  const bar = screen.queryByTestId("progressbar-bar");
+  expect(progressbar).toBeInTheDocument();
+  expect(progressbar).toHaveClass("progressbar--error");
+  expect(bar).toHaveStyle({ width: "100%" });
+});

package/dist/components/progressbar/Progressbar.vue

@@ -12,59 +12,51 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { computed } from 'vue-demi'
-import { useProgressbar } from '.'
-
+<script setup>
+import { computed } from "vue-demi";
+import { useProgressbar } from ".";
 const props = defineProps({
   value: {
-    type   : [Number, String],
-    default: 0,
+    type: [Number, String],
+    default: 0
   },
   min: {
-    type   : [Number, String],
-    default: 0,
+    type: [Number, String],
+    default: 0
   },
   max: {
-    type   : [Number, String],
-    default: 100,
+    type: [Number, String],
+    default: 100
   },
   success: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   error: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   indeterminate: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const percentage = useProgressbar(props)
-
+    type: Boolean,
+    default: false
+  }
+});
+const percentage = useProgressbar(props);
 const width = computed(() => {
   if (props.success || props.error)
-    return '100%'
-
-  return `${percentage.value * 100}%`
-})
-
+    return "100%";
+  return `${percentage.value * 100}%`;
+});
 const classNames = computed(() => {
-  const result: string[] = []
-
+  const result = [];
   if (props.indeterminate)
-    result.push('progressbar--indeterminate')
-
+    result.push("progressbar--indeterminate");
   if (props.error)
-    result.push('progressbar--error')
+    result.push("progressbar--error");
   else if (props.success)
-    result.push('progressbar--success')
-
-  return result
-})
+    result.push("progressbar--success");
+  return result;
+});
 </script>
 
 <style lang="postcss">

package/dist/components/progressbar/Progressbar.vue.d.ts

@@ -0,0 +1,59 @@
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    success: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    success: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    value: string | number;
+    error: boolean;
+    success: boolean;
+    max: string | number;
+    min: string | number;
+    indeterminate: boolean;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/progressbar/index.md

@@ -0,0 +1,136 @@
+---
+title: Progress · Components
+description: Progress loading bar.
+---
+
+<script setup>
+  import pProgressbar from './Progressbar.vue'
+  import pInputRange from '../input-range/InputRange.vue'
+  import { ref } from 'vue-demi'
+
+  const value = ref(50)
+</script>
+
+# Progressbar
+
+> Progress loading bar.
+
+## Usage
+
+### Simple Usage
+
+<preview class="flex-col space-y-4">
+  <p-progressbar value="15" />
+  <p-progressbar value="25" />
+  <p-progressbar value="50" />
+  <p-progressbar value="75" />
+  <p-progressbar value="100" />
+</preview>
+
+```vue
+<template>
+  <p-progressbar value="15" />
+  <p-progressbar value="25" />
+  <p-progressbar value="50" />
+  <p-progressbar value="75" />
+  <p-progressbar value="100" />
+</template>
+```
+
+### With Input Range
+
+<preview class="flex-col space-y-4">
+  <p-input-range v-model="value" />
+  <p-progressbar :value="value" />
+</preview>
+
+```vue
+<template>
+  <p-input-range v-model="value" />
+  <p-progressbar :value="value" />
+</template>
+
+<script lang="ts" setup>
+const value = ref(50)
+</script>
+```
+
+## Success State
+
+<preview>
+  <p-progressbar success />
+</preview>
+
+```vue
+<template>
+  <p-progressbar success />
+</template>
+```
+
+## Error State
+
+<preview>
+  <p-progressbar error />
+</preview>
+
+```vue
+<template>
+  <p-progressbar error />
+</template>
+```
+
+## Indeterminate Mode
+
+<preview>
+  <p-progressbar indeterminate />
+</preview>
+
+```vue
+<template>
+  <p-progressbar indeterminate />
+</template>
+```
+
+## API
+
+### Props
+
+| Props           |   Type    | Default | Description                                    |
+|-----------------|:---------:|:-------:|------------------------------------------------|
+| `min`           | `Number`  |   `0`   | Lowest progress value                          |
+| `max`           | `Number`  |  `100`  | Highest progress value                         |
+| `value`         | `Number`  |   `-`   | Progress value                                 |
+| `indeterminate` | `Boolean` | `false` | Enable indterminate mode                       |
+
+### Slots
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2" class="text-center">There no slots here</td>
+    </tr>
+  </tbody>
+</table>
+
+### Events
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Arguments</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="3" class="text-center">There no props here</td>
+    </tr>
+  </tbody>
+</table>

package/dist/components/pspdfkit/PspdfHelipad.vue

@@ -22,132 +22,109 @@
   </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 '../pdf-helipad/utils/use-drag'
-import type { PdfHelipadResult } from '../pdf-helipad'
-import type { InteractEvent } from '@interactjs/types'
-import type { Instance } from 'pspdfkit'
-import { isInside } from './utils/position'
-
+  watchEffect
+} from "vue-demi";
+import { getPosition } from "../pdf-object/utils/position";
+import useDrag from "../pdf-helipad/utils/use-drag";
+import { isInside } from "./utils/position";
 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) {
-    if (event.relatedTarget && (event.target as any).instance) {
-      const instance = (event.target as any).instance as Instance
-      const elements = instance.contentDocument.querySelectorAll<HTMLDivElement>('.PSPDFKit-Spread')
-
-      let reference: HTMLDivElement
-
+  onend(event) {
+    if (event.relatedTarget && event.target.instance) {
+      const instance = event.target.instance;
+      const elements = instance.contentDocument.querySelectorAll(".PSPDFKit-Spread");
+      let reference;
       for (const page of elements) {
         if (isInside(object.value, page)) {
-          reference = page
-
-          break
+          reference = page;
+          break;
         }
       }
-
       if (reference) {
-        const page   = Number.parseInt(reference.dataset.spreadIndex) + 1
+        const page = Number.parseInt(reference.dataset.spreadIndex) + 1;
         const result = getPosition({
-          reference: reference,
-          object   : object.value,
-          scale    : scale.value,
-        })
-
-        emit('landed', {
+          reference,
+          object: object.value,
+          scale: scale.value
+        });
+        emit("landed", {
           ...result,
-          page  : page,
-          width : width.value,
-          height: height.value,
-        })
+          page,
+          width: width.value,
+          height: height.value
+        });
       }
     }
-
-    isDragged.value = false
-  },
-  ontap (event) {
-    emit('click', event)
+    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'
+      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">