@privyid/persona 1.1.2 → 1.2.0

package/dist/components/carousel/Carousel.vue.d.ts

@@ -0,0 +1,123 @@
+import type { PropType } from 'vue-demi';
+import type { DirectionVariant } from '../steps';
+import '@splidejs/splide/css/core';
+import type { AlignmentVariant } from '.';
+import type { Options } from '@splidejs/splide';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        container: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: PropType<DirectionVariant>;
+        default: string;
+    };
+    align: {
+        type: PropType<AlignmentVariant>;
+        default: string;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoplayInterval: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    splideOptions: {
+        type: PropType<Options>;
+        default: () => {};
+    };
+    noProgress: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: number) => void;
+    change: (args_0: number) => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: PropType<DirectionVariant>;
+        default: string;
+    };
+    align: {
+        type: PropType<AlignmentVariant>;
+        default: string;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoplayInterval: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    splideOptions: {
+        type: PropType<Options>;
+        default: () => {};
+    };
+    noProgress: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: number) => any) | undefined;
+    onChange?: ((args_0: number) => any) | undefined;
+}>, {
+    modelValue: number;
+    width: string | number;
+    height: string | number;
+    direction: DirectionVariant;
+    align: AlignmentVariant;
+    autoplay: boolean;
+    loop: boolean;
+    autoplayInterval: string | number;
+    splideOptions: Options;
+    noProgress: boolean;
+}, {}, {}, {}, 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/carousel/CarouselBody.vue

@@ -6,13 +6,11 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { inject, onUpdated } from 'vue-demi'
-import { CAROUSEL_INSTANCE } from '.'
-
-const slider = inject(CAROUSEL_INSTANCE)
-
+<script setup>
+import { inject, onUpdated } from "vue-demi";
+import { CAROUSEL_INSTANCE } from ".";
+const slider = inject(CAROUSEL_INSTANCE);
 onUpdated(() => {
-  slider.value?.refresh()
-})
+  slider.value?.refresh();
+});
 </script>

package/dist/components/carousel/CarouselBody.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<{}, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, 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/carousel/CarouselItem.vue

@@ -5,6 +5,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-//
+<script setup>
+
 </script>

package/dist/components/carousel/CarouselItem.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").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/carousel/index.md

@@ -0,0 +1,477 @@
+---
+title: Carousel · Components
+description: Slideshow for cycling through a series of content.
+---
+
+<script setup>
+  import pCarousel from './Carousel.vue'
+  import pCarouselItem from './CarouselItem.vue'
+  import pCard from '../card/Card.vue'
+  import pCaption from '../caption/Caption.vue'
+  import pBanner from '../banner/Banner.vue'
+  import IconRight from '@privyid/persona-icon/vue/chevron-right/20.vue'
+  import { ref } from 'vue-demi'
+
+  const active = ref(1)
+</script>
+
+# Carousel
+
+> Slideshow for cycling through a series of content.
+
+## Usage
+
+### Simple Usage
+
+<preview>
+  <p-carousel>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/34/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/57/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/70/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/83/600/400" />
+    </p-carousel-item>
+  </p-carousel>
+</preview>
+
+```vue
+<template>
+  <p-carousel>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/34/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/57/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/70/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/83/600/400" />
+    </p-carousel-item>
+  </p-carousel>
+</template>
+```
+
+### With Card Component
+
+<preview>
+  <p-carousel direction="vertical" height="5rem" >
+    <p-carousel-item>
+      <p-card
+        element="div"
+        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
+        sectioned>
+        <div class="grow">
+          PrivyBalance
+          <div class="text-lg font-bold text-info">
+            999999
+          </div>
+        </div>
+        <IconRight class="text-subtle dark:text-dark-subtle" />
+      </p-card>
+    </p-carousel-item>
+    <p-carousel-item>
+      <p-card
+        element="div"
+        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
+        sectioned>
+        <div class="grow">
+          E-materai Balance
+          <div class="text-lg font-bold text-info">
+            999999
+          </div>
+        </div>
+        <IconRight class="text-subtle dark:text-dark-subtle" />
+      </p-card>
+    </p-carousel-item>
+  </p-carousel>
+</preview>
+
+```vue
+<template>
+  <p-carousel direction="vertical" height="5rem" >
+    <p-carousel-item>
+      <p-card
+        element="div"
+        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
+        sectioned>
+        <div class="grow">
+          PrivyBalance
+          <div class="text-lg font-bold text-info">
+            999999
+          </div>
+        </div>
+        <IconRight />
+      </p-card>
+    </p-carousel-item>
+    <p-carousel-item>
+      <p-card
+        element="div"
+        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
+        sectioned>
+        <div class="grow">
+          E-materai Balance
+          <div class="text-lg font-bold text-info">
+            999999
+          </div>
+        </div>
+        <IconRight />
+      </p-card>
+    </p-carousel-item>
+  </p-carousel>
+</template>
+```
+
+## Vertical Mode
+
+Set prop `direction` to `vertical` to enable Vertical Mode.
+
+<p-banner variant="danger">
+  In <b>Vertical Mode</b>, the height must be set
+</p-banner>
+
+<preview>
+  <p-carousel direction="vertical" height="400px">
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/34/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/57/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/70/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/83/600/400" />
+    </p-carousel-item>
+  </p-carousel>
+</preview>
+
+```vue
+<template>
+  <p-carousel direction="vertical" height="400px">
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/34/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/57/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/70/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/83/600/400" />
+    </p-carousel-item>
+  </p-carousel>
+</template>
+```
+
+## Progress Alignment
+
+You can set position of progress indicator using prop `align`, `start` or `end`. default value is `end`.
+
+<preview>
+  <p-carousel direction="vertical" height="5rem" align="start" >
+    <p-carousel-item>
+      <p-card
+        element="div"
+        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
+        sectioned>
+        <div class="grow">
+          PrivyBalance
+          <div class="text-lg font-bold text-info">
+            999999
+          </div>
+        </div>
+        <IconRight class="text-subtle dark:text-dark-subtle" />
+      </p-card>
+    </p-carousel-item>
+    <p-carousel-item>
+      <p-card
+        element="div"
+        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
+        sectioned>
+        <div class="grow">
+          E-materai Balance
+          <div class="text-lg font-bold text-info">
+            999999
+          </div>
+        </div>
+        <IconRight class="text-subtle dark:text-dark-subtle" />
+      </p-card>
+    </p-carousel-item>
+  </p-carousel>
+
+  <p-carousel direction="vertical" height="5rem" align="end" >
+    <p-carousel-item>
+      <p-card
+        element="div"
+        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
+        sectioned>
+        <div class="grow">
+          PrivyBalance
+          <div class="text-lg font-bold text-info">
+            999999
+          </div>
+        </div>
+        <IconRight class="text-subtle dark:text-dark-subtle" />
+      </p-card>
+    </p-carousel-item>
+    <p-carousel-item>
+      <p-card
+        element="div"
+        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
+        sectioned>
+        <div class="grow">
+          E-materai Balance
+          <div class="text-lg font-bold text-info">
+            999999
+          </div>
+        </div>
+        <IconRight class="text-subtle dark:text-dark-subtle" />
+      </p-card>
+    </p-carousel-item>
+  </p-carousel>
+</preview>
+
+```vue
+<template>
+  <p-carousel direction="vertical" height="5rem" align="start" >
+    <p-carousel-item>
+      <p-card
+        element="div"
+        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
+        sectioned>
+        <div class="grow">
+          PrivyBalance
+          <div class="text-lg font-bold text-info">
+            999999
+          </div>
+        </div>
+        <IconRight />
+      </p-card>
+    </p-carousel-item>
+    <p-carousel-item>
+      <p-card
+        element="div"
+        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
+        sectioned>
+        <div class="grow">
+          E-materai Balance
+          <div class="text-lg font-bold text-info">
+            999999
+          </div>
+        </div>
+        <IconRight />
+      </p-card>
+    </p-carousel-item>
+  </p-carousel>
+
+  <p-carousel direction="vertical" height="5rem" align="end" >
+    <p-carousel-item>
+      <p-card
+        element="div"
+        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
+        sectioned>
+        <div class="grow">
+          PrivyBalance
+          <div class="text-lg font-bold text-info">
+            999999
+          </div>
+        </div>
+        <IconRight />
+      </p-card>
+    </p-carousel-item>
+    <p-carousel-item>
+      <p-card
+        element="div"
+        class="flex items-center w-full h-full p-4 space-x-4 bg-default dark:bg-dark-default text-default dark:text-dark-default"
+        sectioned>
+        <div class="grow">
+          E-materai Balance
+          <div class="text-lg font-bold text-info">
+            999999
+          </div>
+        </div>
+        <IconRight />
+      </p-card>
+    </p-carousel-item>
+  </p-carousel>
+</template>
+```
+
+## Loop Over
+
+<preview>
+  <p-carousel loop>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/5/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/6/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/7/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/8/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/9/600/400" />
+    </p-carousel-item>
+  </p-carousel>
+</preview>
+
+```vue
+<template>
+  <p-carousel loop>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/5/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/6/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/7/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/8/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/9/600/400" />
+    </p-carousel-item>
+  </p-carousel>
+</template>
+```
+
+## Autoplay
+
+<preview>
+  <p-carousel loop autoplay autoplay-interval="3000">
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/34/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/57/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/70/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/83/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/59/600/400" />
+    </p-carousel-item>
+  </p-carousel>
+</preview>
+
+```vue
+<template>
+  <p-carousel loop autoplay autoplay-interval="3000">
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/34/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/57/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/70/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/83/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/59/600/400" />
+    </p-carousel-item>
+  </p-carousel>
+</template>
+```
+
+## Binding v-model
+
+You can binding current active with v-model
+
+<preview>
+  <p-carousel v-model="active">
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/34/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/57/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/70/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/83/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/59/600/400" />
+    </p-carousel-item>
+  </p-carousel>
+</preview>
+
+**Active :**
+
+<pre><code>{{ active }}</code></pre>
+
+```vue
+<template>
+  <p-carousel v-model="active">
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/34/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/57/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/70/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/83/600/400" />
+    </p-carousel-item>
+    <p-carousel-item>
+      <img class="object-cover w-full h-full" width="600" height="400" src="https://picsum.photos/id/59/600/400" />
+    </p-carousel-item>
+  </p-carousel>
+</template>
+```
+
+## API
+
+### Props
+
+| Props              |   Type    |   Default    | Description                                                                      |
+|--------------------|:---------:|:------------:|----------------------------------------------------------------------------------|
+| `direction`        | `String`  | `horizontal` | Carousel direction, valid values is `horizontal`, `vertical`                     |
+| `align`            | `String`  |    `end`     | Carousel's progress indicator position, valid values is `horizontal`, `vertical` |
+| `width`            | `String`  |    `100%`    | Carousel's width                                                                 |
+| `height`           | `String`  |     `-`      | Carousel's height, <b>required if using direction `vertical`</b>                 |
+| `loop`             | `Boolean` |   `false`    | Enable loop mode                                                                 |
+| `autoplay`         | `Boolean` |   `false`    | Enable autoplay                                                                  |
+| `autoplayInterval` | `Number`  |    `5000`    | Autoplay interval, in milliseconds                                               |
+| `noProgress`       | `Boolean` |   `false`    | Hide progress indicator                                                          |
+| `splideOptions`    | `Object`  |     `-`      | Override splide options, see [here][splide-options]                              |
+| `modelValue`       | `Number`  |     `1`      | v-model active value                                                             |
+
+### Slots
+
+| Name      | Description                                 |
+|-----------|---------------------------------------------|
+| `default` | Content to place in the `<p-carousel-item>` |
+
+### Events
+
+| Name     | Arguments     | Description         |
+|----------|---------------|---------------------|
+| `change` | Slide's index | Event slide changed |
+
+[splide-options]: https://splidejs.com/guides/options/

package/dist/components/chart/Chart.spec.d.ts

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