@privyid/persona 1.2.0 → 1.2.1

package/dist/components/popup/Popup.vue.d.ts

@@ -1,103 +0,0 @@
-import type { Component, PropType } from 'vue-demi';
-import type { PopupActionOption, PopupStyleVariant, PopupTypeVariant } from '.';
-import type { ColorVariant } from '../button';
-import type { AdditionalAttr } from '../global/types';
-declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    text: {
-        type: StringConstructor;
-        default: string;
-    };
-    type: {
-        type: PropType<PopupTypeVariant>;
-        default: string;
-    };
-    variant: {
-        type: PropType<PopupStyleVariant>;
-        default: string;
-    };
-    icon: {
-        type: PropType<string | Component>;
-        default: undefined;
-    };
-    iconColor: {
-        type: PropType<ColorVariant>;
-        default: undefined;
-    };
-    popupAttrs: {
-        type: PropType<AdditionalAttr>;
-        default: undefined;
-    };
-    popupClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    actions: {
-        type: PropType<PopupActionOption[]>;
-        default: () => never[];
-    };
-    dismissable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    dismissed: () => void;
-}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    text: {
-        type: StringConstructor;
-        default: string;
-    };
-    type: {
-        type: PropType<PopupTypeVariant>;
-        default: string;
-    };
-    variant: {
-        type: PropType<PopupStyleVariant>;
-        default: string;
-    };
-    icon: {
-        type: PropType<string | Component>;
-        default: undefined;
-    };
-    iconColor: {
-        type: PropType<ColorVariant>;
-        default: undefined;
-    };
-    popupAttrs: {
-        type: PropType<AdditionalAttr>;
-        default: undefined;
-    };
-    popupClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    actions: {
-        type: PropType<PopupActionOption[]>;
-        default: () => never[];
-    };
-    dismissable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
-    onDismissed?: (() => any) | undefined;
-}>, {
-    text: string;
-    type: PopupTypeVariant;
-    title: string;
-    icon: string | Component;
-    variant: PopupStyleVariant;
-    dismissable: boolean;
-    iconColor: ColorVariant;
-    popupAttrs: AdditionalAttr;
-    popupClass: string | unknown[] | Record<string, any>;
-    actions: PopupActionOption[];
-}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/popup/index.d.ts

@@ -1,38 +0,0 @@
-import type { HTMLAttributes, Component } from 'vue-demi';
-import type { ColorVariant } from '../button';
-import type { NotifyInstance, NotifyOption } from '../notify';
-import type { AdditionalAttr } from '../global/types';
-import type { RequireAtLeastOne } from 'type-fest';
-import type pPopup from './Popup.vue';
-export type PopupTypeVariant = 'info' | 'success' | 'warning' | 'error';
-export type PopupStyleVariant = 'simple' | 'filled';
-export type PopupInstance = NotifyInstance<typeof pPopup>;
-export interface PopupActionOption {
-    text?: string;
-    onClick?: (event: MouseEvent & {
-        close: () => void;
-    }) => void | Promise<void>;
-    attrs?: AdditionalAttr;
-}
-interface Option extends Omit<NotifyOption, 'component'> {
-    type?: PopupTypeVariant;
-    variant?: PopupStyleVariant;
-    title?: string;
-    text?: string;
-    icon?: string | Component;
-    iconColor?: ColorVariant;
-    popupClass?: HTMLAttributes['class'];
-    popupAttrs?: AdditionalAttr;
-    dismissable?: boolean;
-    actions?: PopupActionOption[];
-}
-export declare const PopupIcons: {
-    info: import("vue-demi").Raw<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>>;
-    success: import("vue-demi").Raw<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>>;
-    warning: import("vue-demi").Raw<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>>;
-    error: import("vue-demi").Raw<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>>;
-};
-export type PopupOption = RequireAtLeastOne<Option, 'text' | 'title'>;
-declare function showPopup(text: string, title?: string, type?: PopupTypeVariant, variant?: PopupStyleVariant): Promise<PopupInstance>;
-declare function showPopup(option: PopupOption): Promise<PopupInstance>;
-export default showPopup;

package/dist/components/popup/index.md

@@ -1,473 +0,0 @@
----
-title: Popup · Components
-description: Simple notification pop-up.
----
-
-<script setup>
-  import Button from '../button/Button.vue'
-  import Popup from './Popup.vue'
-  import popup from '.'
-  import IconSuccess from '@privyid/persona-icon/vue/checkmark/20.vue'
-  import IconFailed from '@privyid/persona-icon/vue/trash/20.vue'
-  import Banner from '../banner/Banner.vue'
-  import { markRaw } from 'vue-demi'
-</script>
-
-# Popup
-
-> Simple notification pop-up.
-
-## Usage
-
-### Simple Usage
-
-<div class="flex mt-3">
-  <Button color="info" @click="popup('This is popup message', 'Hi!')">
-    Show Popup
-  </Button>
-</div>
-
-```ts
-import { popup } from '@privyid/persona/core'
-
-popup('This is popup message', 'Hi!')
-```
-
-### Advance Usage
-
-<div class="flex mt-3">
-  <Button color="info" @click="popup({
-    type      : 'error',
-    title     : 'Lorem ipsum',
-    text      : 'Lorem ipsum dolor sit amet.',
-    variant   : 'filled',
-    duration  : 5000,
-    popupClass: 'custom-popup',
-  })">
-    Show Popup
-  </Button>
-</div>
-
-```ts
-import { popup } from '@privyid/persona/core'
-
-popup({
-  type      : 'error',
-  title     : 'Lorem ipsum',
-  text      : 'Lorem ipsum dolor sit amet.',
-  variant   : 'filled',
-  duration  : 5000,
-  popupClass: 'custom-popup',
-})
-```
-
-## Type Variant
-
-There available 4 type variants: `info`, `success`, `warning`, `error`. default is `info`
-
-<preview class="flex-col items-center space-y-3">
-  <Popup type="info" title="Lorem ipsum" text="Lorem ipsum dolor sit amet." />
-  <Popup type="success" title="Lorem ipsum" text="Lorem ipsum dolor sit amet." />
-  <Popup type="warning" title="Lorem ipsum" text="Lorem ipsum dolor sit amet." />
-  <Popup type="error" title="Lorem ipsum" text="Lorem ipsum dolor sit amet." />
-</preview>
-
-**Try it:**
-
-<div class="mt-3 space-gap-3">
-  <Button color="info" @click="popup({
-    type : 'info',
-    title: 'Lorem ipsum',
-    text : 'Lorem ipsum dolor sit amet.',
-  })">
-    Info
-  </Button>
-  <Button color="success" @click="popup({
-    type : 'success',
-    title: 'Lorem ipsum',
-    text : 'Lorem ipsum dolor sit amet.',
-  })">
-    Success
-  </Button>
-  <Button color="warning" @click="popup('Lorem ipsum dolor sit amet.', 'Lorem ipsum', 'warning')">
-    Warning
-  </Button>
-  <Button color="danger" @click="popup('Lorem ipsum dolor sit amet.', 'Lorem ipsum', 'error')">
-    Error
-  </Button>
-</div>
-
-```ts
-import { popup } from '@privyid/persona/core'
-
-// info
-popup({
-  type : 'info',
-  title: 'Lorem ipsum',
-  text : 'Lorem ipsum dolor sit amet.',
-})
-
-// success
-popup({
-  type : 'success',
-  title: 'Lorem ipsum',
-  text : 'Lorem ipsum dolor sit amet.',
-})
-
-// Using shorthand
-// warning
-popup('Lorem ipsum dolor sit amet.', 'Lorem ipsum', 'warning')
-// error
-popup('Lorem ipsum dolor sit amet.', 'Lorem ipsum', 'error')
-```
-
-## Style Variant
-
-There available 2 style variant: `simple` and `filled`. default is `simple`
-
-<preview class="flex-col items-center space-y-3">
-  <Popup variant="filled" type="info" title="Lorem ipsum" text="Lorem ipsum dolor sit amet." />
-  <Popup variant="filled" type="success" title="Lorem ipsum" text="Lorem ipsum dolor sit amet." />
-  <Popup variant="filled" type="warning" title="Lorem ipsum" text="Lorem ipsum dolor sit amet." />
-  <Popup variant="filled" type="error" title="Lorem ipsum" text="Lorem ipsum dolor sit amet." />
-</preview>
-
-**Try it:**
-
-<div class="mt-3 space-gap-3">
-  <Button color="info" @click="popup({
-    type   : 'info',
-    variant: 'filled',
-    title  : 'Lorem ipsum',
-    text   : 'Lorem ipsum dolor sit amet.',
-  })">
-    Info
-  </Button>
-  <Button color="success" @click="popup({
-    type   : 'success',
-    variant: 'filled',
-    title  : 'Lorem ipsum',
-    text   : 'Lorem ipsum dolor sit amet.',
-  })">
-    Success
-  </Button>
-  <Button color="warning" @click="popup('Lorem ipsum dolor sit amet.', 'Lorem ipsum', 'warning', 'filled')">
-    Warning
-  </Button>
-  <Button color="danger" @click="popup('Lorem ipsum dolor sit amet.', 'Lorem ipsum', 'error', 'filled')">
-    Error
-  </Button>
-</div>
-
-```ts
-import { popup } from '@privyid/persona/core'
-
-// info
-popup({
-  type   : 'info',
-  variant: 'filled',
-  title  : 'Lorem ipsum',
-  text   : 'Lorem ipsum dolor sit amet.',
-})
-
-// success
-popup({
-  type   : 'success',
-  variant: 'filled',
-  title  : 'Lorem ipsum',
-  text   : 'Lorem ipsum dolor sit amet.',
-})
-
-// Using shorthand
-// warning
-popup('Lorem ipsum dolor sit amet.', 'Lorem ipsum', 'warning', 'filled')
-// error
-popup('Lorem ipsum dolor sit amet.', 'Lorem ipsum', 'error', 'filled')
-```
-
-## Position
-
-There available 6 position for popup: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `top-right` default is `bottom-left`
-
-**Try it:**
-
-<div class="grid grid-cols-3 gap-3 mt-3">
-  <Button class="items-center" color="info" @click="popup({
-    title   : 'Lorem ipsum',
-    text    : 'Lorem ipsum dolor sit amet.',
-    position: 'top-left'
-  })">
-    Top Left
-  </Button>
-
-  <Button class="items-center" color="info" @click="popup({
-    title   : 'Lorem ipsum',
-    text    : 'Lorem ipsum dolor sit amet.',
-    position: 'top-center'
-  })">
-    Top Center
-  </Button>
-
-  <Button class="items-center" color="info" @click="popup({
-    title   : 'Lorem ipsum',
-    text    : 'Lorem ipsum dolor sit amet.',
-    position: 'top-right'
-  })">
-    Top Right
-  </Button>
-
-  <Button class="items-center" color="info" @click="popup({
-    title   : 'Lorem ipsum',
-    text    : 'Lorem ipsum dolor sit amet.',
-    position: 'bottom-left'
-  })">
-    Bottom Left
-  </Button>
-
-  <Button class="items-center" color="info" @click="popup({
-    title   : 'Lorem ipsum',
-    text    : 'Lorem ipsum dolor sit amet.',
-    position: 'bottom-center'
-  })">
-    Bottom Center
-  </Button>
-
-  <Button class="items-center" color="info" @click="popup({
-    title   : 'Lorem ipsum',
-    text    : 'Lorem ipsum dolor sit amet.',
-    position: 'bottom-right'
-  })">
-    Bottom Right
-  </Button>
-</div>
-
-```ts
-import { popup } from '@privyid/persona/core'
-
-// top-left
-popup({
-  title   : 'Lorem ipsum',
-  text    : 'Lorem ipsum dolor sit amet.',
-  position: 'top-left'
-})
-
-// top-center
-popup({
-  title   : 'Lorem ipsum',
-  text    : 'Lorem ipsum dolor sit amet.',
-  position: 'top-center'
-})
-
-// top-right
-popup({
-  title   : 'Lorem ipsum',
-  text    : 'Lorem ipsum dolor sit amet.',
-  position: 'top-right'
-})
-
-// bottom-left
-popup({
-  title   : 'Lorem ipsum',
-  text    : 'Lorem ipsum dolor sit amet.',
-  position: 'bottom-left'
-})
-
-// bottom-center
-popup({
-  title   : 'Lorem ipsum',
-  text    : 'Lorem ipsum dolor sit amet.',
-  position: 'bottom-center'
-})
-
-// bottom-right
-popup({
-  title   : 'Lorem ipsum',
-  text    : 'Lorem ipsum dolor sit amet.',
-  position: 'bottom-right'
-})
-```
-
-## Icon
-
-It's possible to custom icon of toast, like color and icon-name.
-There are 6 icon colors available for toast: `default`, `primary`, `info`, `success`, `warning` and `danger`. Default icon color is toast icon color it's self.
-
-<Banner>
-Custom icon color just work in type-variant <code>info</code> with <code>simple</code> style-variant,
-and or all type-variant with <code>filled</code> style-variant.
-</Banner>
-
-<div class="mt-3 space-x-5">
-  <Button type="" color="info" @click="popup({
-    text     : 'Member added to the group',
-    icon     : markRaw(IconSuccess),
-    iconColor: 'success',
-  })">
-    Show simple popup
-  </Button>
-
-  <Button type="" color="info" @click="popup({
-    text   : 'Members removed from the group',
-    type   : 'error',
-    variant: 'filled',
-    icon   : markRaw(IconFailed),
-  })">
-    Show filled popup
-  </Button>
-</div>
-
-```ts
-import { markRaw } from 'vue-demi'
-import { popup } from '@privyid/persona/core'
-import IconSuccess from '@privyid/persona-icon/vue/checkmark/24.vue'
-import IconFailed from '@privyid/persona-icon/vue/trash/24.vue'
-
-popup({
-  text     : 'Member added to the group',
-  icon     : markRaw(IconSuccess),
-  iconColor: 'success',
-})
-
-popup({
-  text   : 'Members removed from the group',
-  type   : 'error',
-  variant: 'filled',
-  icon   : markRaw(IconFailed),
-})
-```
-
-## Actions
-
-Add additional button using option `actions`.
-
-<preview>
-  <Popup
-    title="Upload success"
-    text="Upload document successfully."
-    :actions="[
-      {
-        text: 'Goto Doc',
-      }
-    ]"
-  />
-</preview>
-
-<div class="mt-3">
-  <Button type="" color="info" @click="popup({
-    title     : 'Upload success',
-    text      : 'Upload document successfully.',
-    actions   : [
-      {
-        text: 'Goto Doc',
-        onClick (event) {
-          event.close()
-        }
-      }
-    ],
-  })">
-    With Action
-  </Button>
-</div>
-
-```ts
-popup({
-  title     : 'Upload success',
-  text      : 'Upload document successfully.',
-  actions   : [
-    {
-      text: 'Goto Doc',
-      onClick (event) {
-        // Do something
-        // ...
-        event.close()
-      }
-    }
-  ],
-})
-```
-
-## Dismissable
-
-Dismiss button of toast can be show or hide by `dismissable` props. If `dismissable`
-set to `true`, dismiss button will show.
-
-<preview class="flex-col items-center space-y-3">
-  <Popup
-    title="Lorem ipsum"
-    text="Lorem ipsum dolor sit amet."
-    :dismissable="false"
-  />
-</preview>
-
-```ts
-import { toast } from '@privyid/persona/core'
-
-toast({
-  title      : 'Lorem ipsum dolor sit amet.',
-  variant    : 'filled',
-  dismissable: false,
-})
-```
-
-## Customization
-
-You can add some custom class to Popup element via `popupClass` and `popupAttrs`.
-
-<div class="mt-3">
-  <Button type="" color="info" @click="popup({
-    title     : 'Lorem ipsum',
-    text      : 'Lorem ipsum dolor sit amet.',
-    popupClass: 'h-40',
-    popupAttrs: { 'data-e2eid': 'popup-custom' }
-  })">
-    Custom Popup
-  </Button>
-</div>
-
-```ts
-import { popup } from '@privyid/persona/core'
-
-popup({
-  title     : 'Lorem ipsum',
-  text      : 'Lorem ipsum dolor sit amet.',
-  popupClass: 'h-40',
-  popupAttrs: { 'data-e2eid': 'popup-custom' }
-})
-```
-
-## API
-
-### popup
-
-`popup(options: PopupOptions): Promise<CloseFn>`
-
-| Options       |          Type           |    Default    | Description                                                                                                           |
-|---------------|:-----------------------:|:-------------:|-----------------------------------------------------------------------------------------------------------------------|
-| `type`        |        `String`         |    `info`     | Toast type variant, valid value is `info`, `success`, `warning`, `error`                                              |
-| `title`       |        `String`         |       -       | Toast title message (support markdown)                                                                                |
-| `text`        |        `String`         |       -       | Toast text message (support markdown)                                                                                 |
-| `variant`     |        `String`         |   `simple`    | Toast style variant, valid value is `simple`, `filled`                                                                |
-| `duration`    |        `Number`         |    `3000`     | Duration for which the popup should be displayed. `-1` to permanent popup                                             |
-| `position`    |        `String`         | `bottom-left` | Position for popup, valid value is `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `top-right` |
-| `icon`        | `String` or `Component` |       -       | Custom popup icon (will replace default icon)                                                                         |
-| `iconColor`   |        `String`         |       -       | Custom color of popup icon, valid value is `default`, `primary`, `info`, `success`, `warning`, `danger`               |
-| `popupClass`  |        `String`         |       -       | Add class to popup component                                                                                          |
-| `popupAttrs`  |        `Object`         |       -       | Add attribute to popup component                                                                                      |
-| `dismissable` |        `Boolean`        |    `true`     | Enable dismiss button                                                                                                 |
-| `actions`     |  `Array<ActionOption>`  |       -       | Add action button                                                                                                     |
-
-In `actions` contains:
-
-| Props     |    Type    | Default | Description                 |
-|-----------|:----------:|:-------:|-----------------------------|
-| `text`    |  `String`  |    -    | Action button's text        |
-| `attrs`   |  `Object`  |    -    | Action additional attribute |
-| `onClick` | `Function` |    -    | Action on-click handler     |
-
-#### Shorthand
-
-`popup(text: string, title?: string, type?: string, variant?: string): Promise<CloseFn>`
-
-## See Also
-
-- [Toast](../toast/)

package/dist/components/popup/index.mjs

@@ -1,31 +0,0 @@
-import { markRaw } from "vue-demi";
-import { showNotify } from "../notify/index.mjs";
-import IconInfo from "@privyid/persona-icon/vue/information-circle-solid/20.vue";
-import IconSuccess from "@privyid/persona-icon/vue/checkmark/20.vue";
-import IconWarning from "@privyid/persona-icon/vue/exclamation-circle-solid/20.vue";
-import IconError from "@privyid/persona-icon/vue/exclamation-triangle-solid/20.vue";
-export const PopupIcons = {
-  info: markRaw(IconInfo),
-  success: markRaw(IconSuccess),
-  warning: markRaw(IconWarning),
-  error: markRaw(IconError)
-};
-async function showPopup(textOrOption, title, type, variant) {
-  if (typeof textOrOption === "string") {
-    return await showPopup({
-      text: textOrOption,
-      title,
-      type,
-      variant
-    });
-  }
-  const { default: pPopup } = await import("./Popup.vue");
-  const instance = await showNotify({
-    component: markRaw(pPopup),
-    props: textOrOption,
-    duration: textOrOption.duration,
-    position: textOrOption.position
-  });
-  return instance;
-}
-export default showPopup;

package/dist/components/popup/index.spec.d.ts

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

package/dist/components/popup/index.spec.mjs

@@ -1,28 +0,0 @@
-import { queryByTestId, queryByText } from "@testing-library/vue";
-import showPopup from "./index.mjs";
-import { resetInstance } from "../global/use-singleton.mjs";
-afterEach(async () => {
-  await resetInstance();
-});
-it("should be able to show popup", async () => {
-  await showPopup({
-    title: "This is title",
-    text: "This is message body"
-  });
-  const popup = queryByTestId(document.body, "popup");
-  const title = queryByText(document.body, "This is title");
-  const text = queryByText(document.body, "This is message body");
-  expect(popup).toBeInTheDocument();
-  expect(title).toBeInTheDocument();
-  expect(text).toBeInTheDocument();
-});
-it("should be able to show popup using shorthand", async () => {
-  await showPopup("This is message body", "This is title", "warning");
-  const popup = queryByTestId(document.body, "popup");
-  const title = queryByText(document.body, "This is title");
-  const text = queryByText(document.body, "This is message body");
-  expect(popup).toBeInTheDocument();
-  expect(title).toBeInTheDocument();
-  expect(text).toBeInTheDocument();
-  expect(popup).toHaveClass("popup--warning");
-});

package/dist/components/progress/Progress.spec.d.ts

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