@privyid/persona 1.1.1 → 1.2.0

package/dist/components/dialog/DialogFooter.vue.d.ts

@@ -0,0 +1,132 @@
+import type { PropType } from 'vue-demi';
+import type { StyleVariant as FooterButtonStyleVariant, ColorVariant as FooterButtonColorVariant } from '../button';
+import type { FooterAlignVariant } from '.';
+import type { AdditionalAttr } from '../global/types';
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    align: {
+        type: PropType<FooterAlignVariant>;
+        default: string;
+    };
+    cancelClass: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    cancelVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    cancelColor: {
+        type: PropType<FooterButtonColorVariant>;
+        default: string;
+    };
+    cancelVariant: {
+        type: PropType<FooterButtonStyleVariant>;
+        default: string;
+    };
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelAttrs: {
+        type: PropType<AdditionalAttr>;
+        default: undefined;
+    };
+    confirmClass: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    confirmVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    confirmColor: {
+        type: PropType<FooterButtonColorVariant>;
+        default: string;
+    };
+    confirmVariant: {
+        type: PropType<FooterButtonStyleVariant>;
+        default: string;
+    };
+    confirmText: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmAttrs: {
+        type: PropType<AdditionalAttr>;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    cancel: () => void;
+    confirm: () => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    align: {
+        type: PropType<FooterAlignVariant>;
+        default: string;
+    };
+    cancelClass: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    cancelVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    cancelColor: {
+        type: PropType<FooterButtonColorVariant>;
+        default: string;
+    };
+    cancelVariant: {
+        type: PropType<FooterButtonStyleVariant>;
+        default: string;
+    };
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelAttrs: {
+        type: PropType<AdditionalAttr>;
+        default: undefined;
+    };
+    confirmClass: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    confirmVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    confirmColor: {
+        type: PropType<FooterButtonColorVariant>;
+        default: string;
+    };
+    confirmVariant: {
+        type: PropType<FooterButtonStyleVariant>;
+        default: string;
+    };
+    confirmText: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmAttrs: {
+        type: PropType<AdditionalAttr>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    align: FooterAlignVariant;
+    cancelClass: string;
+    cancelVisible: boolean;
+    cancelColor: FooterButtonColorVariant;
+    cancelVariant: FooterButtonStyleVariant;
+    cancelText: string;
+    cancelAttrs: AdditionalAttr;
+    confirmClass: string;
+    confirmVisible: boolean;
+    confirmColor: FooterButtonColorVariant;
+    confirmVariant: FooterButtonStyleVariant;
+    confirmText: string;
+    confirmAttrs: AdditionalAttr;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/dialog/index.md

@@ -0,0 +1,195 @@
+---
+title: Dialog · Components
+description: Instant Modal, alternative of native window.alert, window.confirm, and window.prompt
+---
+
+<script setup>
+  import Button from '../button/Button.vue'
+  import * as dialog from '.'
+
+  function example1 () {
+    dialog.alert({
+      title: 'Dialog',
+      text : 'Hello This is Dialog',
+    })
+  }
+
+  function example2 () {
+    dialog.confirm({
+      title: 'Delete Confirmation',
+      text : 'Are you sure?',
+    }).then((value) => {
+      if (value === true) {
+        dialog.alert({
+          title: 'Info',
+          text : 'Deleted',
+        })
+      }
+    })
+  }
+
+  function example3 () {
+    dialog.prompt({
+      title: 'Welcome',
+      text : 'What is your name?',
+    }).then((value) => {
+      if (value) {
+        dialog.alert({
+          title: 'Info',
+          text : `Hello ${value}`,
+        })
+      }
+    })
+  }
+</script>
+
+# Dialog
+
+> Instant Modal, alternative of native window.alert, window.confirm, and window.prompt
+
+## Usage
+
+### Alert
+
+<div class="flex mt-5">
+  <Button @click="example1" color="info">Show Alert</Button>
+</div>
+
+```ts
+import { dialog } from '@privyid/persona/core'
+
+dialog.alert({
+  title: 'Dialog',
+  text : 'Hello This is Dialog',
+})
+```
+
+### Confirm
+
+<div class="flex mt-5">
+  <Button @click="example2" color="info">Show Confirm</Button>
+</div>
+
+```ts
+import { dialog } from '@privyid/persona/core'
+
+dialog.confirm({
+  title: 'Delete Confirmation',
+  text : 'Are you sure?',
+  size : 'sm',
+}).then((value) => {
+  if (value === true) {
+    dialog.alert({
+      title: 'Info',
+      text : 'Deleted',
+    })
+  }
+})
+```
+
+### Prompt
+
+<div class="flex mt-5">
+  <Button @click="example3" color="info">Show Prompt</Button>
+</div>
+
+```ts
+import { dialog } from '@privyid/persona/core'
+
+dialog.prompt({
+  title: 'Welcome',
+  text : 'What is your name?',
+}).then((value) => {
+  if (value) {
+    dialog.alert({
+      title: 'Info',
+      text : `Hello ${value}`,
+    })
+  }
+})
+```
+
+
+## API
+
+### Confirm
+
+`confirm(options: DialogConfirmOption): Promise<boolean>`
+
+| Options             |          Type           | Default | Description                                                      |
+|---------------------|:-----------------------:|:-------:|------------------------------------------------------------------|
+| `title`             |        `String`         |    -    | Dialog title, **required**                                       |
+| `text`              |        `String`         |    -    | Dialog text content (support markdown)                           |
+| `size`              |        `String`         |    -    | Dialog size, valid value is `sm`, `md`, `lg`, `xl`               |
+| `centered`          |        `Boolean`        | `false` | Dialog vertically center in the viewport                         |
+| `dismissable`       |        `Boolean`        | `true`  | Show / Hide dismiss button                                       |
+| `noCloseOnBackdrop` |        `Boolean`        | `false` | No close dialog while dialog Backdrop was clicked                |
+| `footerAlign`       |        `Number`         | `start` | The alignment of dialog footer, valid value is `start` and `end` |
+| `cancel`            |     `DialogButton`      |    -    | Cancel button's options for dialog footer                        |
+| `confirm`           |     `DialogButton`      |    -    | Confirm button's options for dialog footer                       |
+| `attrs`             |        `Object`         |    -    | Additional attributes placed modal dialog                        |
+| `icon`              | `String` or `Component` |    -    | Dialog's icon                                                    |
+| `iconClass`         |        `String`         |    -    | Dialog's icon custom class                                       |
+| `iconAttrs`         |        `Object`         |    -    | Dialog's icon custom attribute                                   |
+
+`DialogButton`
+
+| Options      |   Type    | Default | Description                                                                                              |
+|--------------|:---------:|:-------:|----------------------------------------------------------------------------------------------------------|
+| `text`       | `String`  |    -    | Dialog button text                                                                                       |
+| `visible`    | `Boolean` | `true`  | Show or hide dialog button                                                                               |
+| `className`  | `String`  |   `-`   | Add class to dialog button                                                                               |
+| `closeModal` | `Boolean` | `true`  | Close dialog modal when dialog button was clicked                                                        |
+| `color`      | `String`  |    -    | Dialog button color variant, valid value is `default`, `primary`, `info`, `success`, `danger`, `warning` |
+| `variant`    | `String`  |    -    | Dialog button style variant, valid value is `solid`, `outline`, `ghost`, and `link`                      |
+| `attrs`      | `Object`  |    -    | Additional attributes placed on button                                                                   |
+
+### Alert
+
+`alert(options: DialogAlertOption): Promise<void>`
+
+| Options       |          Type           | Default | Description                                                      |
+|---------------|:-----------------------:|:-------:|------------------------------------------------------------------|
+| `title`       |        `String`         |    -    | Dialog title, **required**                                       |
+| `text`        |        `String`         |    -    | Dialog text content                                              |
+| `size`        |        `String`         |    -    | Dialog size, valid value is `sm`, `md`, `lg`, `xl`               |
+| `centered`    |        `Boolean`        | `false` | Dialog vertically center in the viewport                         |
+| `footerAlign` |        `Number`         | `start` | The alignment of dialog footer, valid value is `start` and `end` |
+| `confirm`     |     `DialogButton`      |    -    | Confirm button's options for dialog footer                       |
+| `attrs`       |        `Object`         |    -    | Additional attributes placed on modal dialog                     |
+| `icon`        | `String` or `Component` |    -    | Dialog's icon                                                    |
+| `iconClass`   |        `String`         |    -    | Dialog's icon custom class                                       |
+| `iconAttrs`   |        `Object`         |    -    | Dialog's icon custom attribute                                   |
+
+### Prompt
+
+`prompt(options: DialogPromptOption): Promise<string>`
+
+| Options             |          Type           | Default | Description                                                      |
+|---------------------|:-----------------------:|:-------:|------------------------------------------------------------------|
+| `title`             |        `String`         |    -    | Dialog title, **required**                                       |
+| `text`              |        `String`         |    -    | Dialog text content (support markdown)                           |
+| `size`              |        `String`         |    -    | Dialog size, valid value is `sm`, `md`, `lg`, `xl`               |
+| `centered`          |        `Boolean`        | `false` | Dialog vertically center in the viewport                         |
+| `dismissable`       |        `Boolean`        | `true`  | Show / Hide dismiss button                                       |
+| `noCloseOnBackdrop` |        `Boolean`        | `false` | No close dialog while dialog Backdrop was clicked                |
+| `footerAlign`       |        `Number`         | `start` | The alignment of dialog footer, valid value is `start` and `end` |
+| `cancel`            |     `DialogButton`      |    -    | Cancel button's options for dialog footer                        |
+| `confirm`           |     `DialogButton`      |    -    | Confirm button's options for dialog footer                       |
+| `input`             |      `DialogInput`      |    -    | Input's options                                                  |
+| `value`             |        `String`         |    -    | Default input value                                              |
+| `attrs`             |        `Object`         |    -    | Additional attributes placed on modal dialog                     |
+| `icon`              | `String` or `Component` |    -    | Dialog's icon                                                    |
+| `iconClass`         |        `String`         |    -    | Dialog's icon custom class                                       |
+| `iconAttrs`         |        `Object`         |    -    | Dialog's icon custom attribute                                   |
+
+`DialogInput`
+
+| Options       |   Type    | Default | Description                                             |
+|---------------|:---------:|:-------:|---------------------------------------------------------|
+| `type`        | `String`  | `text`  | Input type                                              |
+| `size`        | `String`  |  `md`   | Input size variant, valid value: `xs`, `sm`, `md`, `lg` |
+| `placeholder` | `String`  |   `-`   | Input placeholder                                       |
+| `clearable`   | `Boolean` | `false` | Enable clear button                                     |
+| `accept`      | `String`  |   `-`   | Whitelist character can be inputted                     |
+| `attrs`       | `Object`  |    -    | Additional attributes placed on input                   |

package/dist/components/divider/Divider.spec.d.ts

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

package/dist/components/divider/Divider.spec.mjs

@@ -0,0 +1,21 @@
+import { render } from "@testing-library/vue";
+import pDivider from "./Divider.vue";
+it("should render properly", () => {
+  const screen = render({
+    components: { pDivider },
+    template: "<p-divider />"
+  });
+  const divider = screen.queryByTestId("divider");
+  expect(divider).toBeInTheDocument();
+  expect(divider).toHaveClass("divider", "divider--horizontal");
+});
+it("should have style vertical if prop vertical was provided", () => {
+  const screen = render({
+    components: { pDivider },
+    template: "<p-divider vertical />"
+  });
+  const divider = screen.queryByTestId("divider");
+  expect(divider).toBeInTheDocument();
+  expect(divider).toHaveClass("divider", "divider--vertical");
+  expect(divider).not.toHaveClass("divider--horizontal");
+});

package/dist/components/divider/Divider.vue

@@ -5,26 +5,22 @@
     :class="classNames" />
 </template>
 
-<script lang="ts" setup>
-import { computed } from 'vue-demi'
-
+<script setup>
+import { computed } from "vue-demi";
 const props = defineProps({
   vertical: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
+    type: Boolean,
+    default: false
+  }
+});
 const classNames = computed(() => {
-  const result: string[] = []
-
+  const result = [];
   if (props.vertical)
-    result.push('divider--vertical')
+    result.push("divider--vertical");
   else
-    result.push('divider--horizontal')
-
-  return result
-})
+    result.push("divider--horizontal");
+  return result;
+});
 </script>
 
 <style lang="postcss">

package/dist/components/divider/Divider.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    vertical: boolean;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/dot/Dot.spec.d.ts

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

package/dist/components/dot/Dot.spec.mjs

@@ -0,0 +1,37 @@
+import { render } from "@testing-library/vue";
+import Dot from "./Dot.vue";
+it("should render properly without any props", () => {
+  const screen = render({
+    components: { Dot },
+    template: `
+      <Dot />
+    `
+  });
+  const dot = screen.queryByTestId("dot");
+  expect(dot).toBeInTheDocument();
+  expect(dot).toHaveClass("dot", "dot--variant-default", "dot--default");
+});
+it('should have style "success" if color props set to "success"', () => {
+  const screen = render({
+    components: { Dot },
+    template: `
+      <Dot color="success" />
+    `
+  });
+  const dot = screen.queryByTestId("dot");
+  expect(dot).toBeInTheDocument();
+  expect(dot).toHaveClass("dot", "dot--success");
+  expect(dot).not.toHaveClass("dot--default");
+});
+it("should have style `pills` if variant props set to `pills`", () => {
+  const screen = render({
+    components: { Dot },
+    template: `
+      <Dot variant="pills" />
+    `
+  });
+  const dot = screen.queryByTestId("dot");
+  expect(dot).toBeInTheDocument();
+  expect(dot).toHaveClass("dot", "dot--variant-pills");
+  expect(dot).not.toHaveClass("dot--variant-default");
+});

package/dist/components/dot/Dot.vue

@@ -4,34 +4,26 @@
     :class="classNames" />
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
-import type { StyleVariant } from '.'
-import type { ColorVariant } from '../button'
-
+<script setup>
+import { computed } from "vue-demi";
 const props = defineProps({
   color: {
-    type   : String as PropType<ColorVariant>,
-    default: 'default',
+    type: String,
+    default: "default"
   },
   variant: {
-    type   : String as PropType<StyleVariant>,
-    default: 'default',
-  },
-})
-
+    type: String,
+    default: "default"
+  }
+});
 const classNames = computed(() => {
-  const result: string[] = ['dot']
-
+  const result = ["dot"];
   if (props.color)
-    result.push(`dot--${props.color}`)
-
+    result.push(`dot--${props.color}`);
   if (props.variant)
-    result.push(`dot--variant-${props.variant}`)
-
-  return result
-})
+    result.push(`dot--variant-${props.variant}`);
+  return result;
+});
 </script>
 
 <style lang="postcss">

package/dist/components/dot/Dot.vue.d.ts

@@ -0,0 +1,26 @@
+import type { PropType } from 'vue-demi';
+import type { StyleVariant } from '.';
+import type { ColorVariant } from '../button';
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    variant: StyleVariant;
+    color: ColorVariant;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/dot/index.md

@@ -0,0 +1,133 @@
+---
+title: Dot · Components
+description: Sub-component used for Badge and Label
+---
+
+<script setup>
+  import pDot from './Dot.vue'
+</script>
+
+<style scoped lang="postcss">
+  .preview {
+    .dot {
+      @apply mr-4;
+
+      &:last-child {
+        @apply mr-0;
+      }
+    }
+  }
+</style>
+
+# Dot
+
+> Sub-component used for [Badge][badge] and Label
+
+Dot is a sub-component used for [Badge][badge] and Label
+
+## Usage
+
+### Basic Usage
+The default color of dot are black.
+
+<preview>
+  <p-dot />
+</preview>
+
+```vue
+<template>
+  <p-dot />
+</template>
+```
+
+## Colors
+Dot available in 4 different colors: `primary`, `info`, `success`, `warning` and `danger`.
+
+<preview>
+  <p-dot color="primary" />
+  <p-dot color="info" />
+  <p-dot color="success" />
+  <p-dot color="warning" />
+  <p-dot color="danger" />
+</preview>
+
+```vue
+<template>
+  <p-dot color="primary" />
+  <p-dot color="info" />
+  <p-dot color="success" />
+  <p-dot color="warning" />
+  <p-dot color="danger" />
+</template>
+```
+
+## Variant
+Dot also available with variant `pills`. When variant is not set, dot will looks as a `default`
+
+<preview>
+  <p-dot variant="pills" />
+  <p-dot color="primary" variant="pills" />
+  <p-dot color="info" variant="pills" />
+  <p-dot color="success" variant="pills" />
+  <p-dot color="warning" variant="pills" />
+  <p-dot color="danger" variant="pills" />
+</preview>
+
+```vue
+<template>
+  <p-dot variant="pills" />
+  <p-dot color="primary" variant="pills" />
+  <p-dot color="info" variant="pills" />
+  <p-dot color="success" variant="pills" />
+  <p-dot color="warning" variant="pills" />
+  <p-dot color="danger" variant="pills" />
+</template>
+```
+
+## API
+
+### Props
+
+| Props     |   Type   | Default | Description                                                                    |
+|-----------|:--------:|:-------:|--------------------------------------------------------------------------------|
+| `color`   | `String` |   `-`   | Dot color variant, valid value is `primary`, `info`, `success`, `warning` and `danger` |
+| `variant` | `String` |   `-`   | Dot style variant, valid value is `pills`                                      |
+
+### 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 event here</td>
+    </tr>
+  </tbody>
+</table>
+
+## See Also
+
+- [Badge][badge]
+
+[badge]: /components/badge/index

package/dist/components/dropdown/Dropdown.spec.d.ts

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