@privyid/persona 1.1.2 → 1.2.0

package/dist/components/toast/Toast.vue

@@ -57,125 +57,104 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type {
-  PropType,
-  Component,
-} from 'vue-demi'
+<script setup>
 import {
   computed,
-  h,
-} from 'vue-demi'
-import SpinnerRinggo from '../spinner/SpinnerRinggo.vue'
-import { vPMd } from '../markdown'
-import pButton from '../button/Button.vue'
-import IconClose from '@privyid/persona-icon/vue/close/16.vue'
-import type { ColorVariant } from '../button'
-import type { AdditionalAttr } from '../global/types'
-import type { ToastActionOption } from '.'
-import { useNotifyItem } from '../notify'
-
+  h
+} from "vue-demi";
+import SpinnerRinggo from "../spinner/SpinnerRinggo.vue";
+import { vPMd } from "../markdown";
+import pButton from "../button/Button.vue";
+import IconClose from "@privyid/persona-icon/vue/close/16.vue";
+import { useNotifyItem } from "../notify";
 const props = defineProps({
   text: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   /**
    * @deprecated use `text` instead
    */
   title: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   icon: {
     type: [
       String,
       Object,
-      Function,
-    ] as PropType<string | Component>,
-    default: undefined,
+      Function
+    ],
+    default: void 0
   },
   iconColor: {
-    type   : String as PropType<ColorVariant>,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   toastAttrs: {
-    type   : Object as PropType<AdditionalAttr>,
-    default: undefined,
+    type: Object,
+    default: void 0
   },
   toastClass: {
     type: [
       String,
       Array,
-      Object,
+      Object
     ],
-    default: undefined,
+    default: void 0
   },
   actions: {
-    type   : Array as PropType<ToastActionOption[]>,
-    default: () => ([]),
+    type: Array,
+    default: () => []
   },
   dismissable: {
-    type   : Boolean,
-    default: true,
+    type: Boolean,
+    default: true
   },
   loading: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   loadingText: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   loadingSpinner: {
-    type   : Boolean,
-    default: true,
-  },
-})
-
-const notify = useNotifyItem()
-const emit   = defineEmits<{
-  'dismissed': [],
-}>()
-
+    type: Boolean,
+    default: true
+  }
+});
+const notify = useNotifyItem();
+const emit = defineEmits(["dismissed"]);
 const classIcon = computed(() => {
-  const result: string[] = ['toast__icon--default']
-
+  const result = ["toast__icon--default"];
   if (props.iconColor)
-    result.push(`toast__icon--${props.iconColor}`)
-
-  return result
-})
-
+    result.push(`toast__icon--${props.iconColor}`);
+  return result;
+});
 const toastIcon = computed(() => {
   if (props.icon) {
-    if (typeof props.icon === 'string') {
-      return () => h('img', {
-        'src'        : props.icon,
-        'width'      : 16,
-        'height'     : 16,
-        'data-testid': 'toast-icon-image',
-      })
+    if (typeof props.icon === "string") {
+      return () => h("img", {
+        "src": props.icon,
+        "width": 16,
+        "height": 16,
+        "data-testid": "toast-icon-image"
+      });
     }
-
-    return props.icon
+    return props.icon;
   }
-})
-
-function close () {
-  notify.close()
-
-  emit('dismissed')
+});
+function close() {
+  notify.close();
+  emit("dismissed");
 }
-
-async function onActionClick (action: ToastActionOption) {
-  const event = new MouseEvent('click')
-
-  if (typeof action.onClick === 'function')
-    await action.onClick(Object.assign(event, { close }))
-
+async function onActionClick(action) {
+  const event = new MouseEvent("click");
+  if (typeof action.onClick === "function")
+    await action.onClick(Object.assign(event, { close }));
   if (!event.defaultPrevented)
-    close()
+    close();
 }
 </script>
 
@@ -265,5 +244,4 @@ async function onActionClick (action: ToastActionOption) {
     @apply dark:text-dark-on-emphasis;
   }
 }
-
 </style>

package/dist/components/toast/Toast.vue.d.ts

@@ -0,0 +1,118 @@
+import type { PropType, Component } from 'vue-demi';
+import type { ColorVariant } from '../button';
+import type { AdditionalAttr } from '../global/types';
+import type { ToastActionOption } from '.';
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @deprecated use `text` instead
+     */
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: PropType<string | Component>;
+        default: undefined;
+    };
+    iconColor: {
+        type: PropType<ColorVariant>;
+        default: undefined;
+    };
+    toastAttrs: {
+        type: PropType<AdditionalAttr>;
+        default: undefined;
+    };
+    toastClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    actions: {
+        type: PropType<ToastActionOption[]>;
+        default: () => never[];
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loadingText: {
+        type: StringConstructor;
+        default: string;
+    };
+    loadingSpinner: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    dismissed: () => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @deprecated use `text` instead
+     */
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: PropType<string | Component>;
+        default: undefined;
+    };
+    iconColor: {
+        type: PropType<ColorVariant>;
+        default: undefined;
+    };
+    toastAttrs: {
+        type: PropType<AdditionalAttr>;
+        default: undefined;
+    };
+    toastClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    actions: {
+        type: PropType<ToastActionOption[]>;
+        default: () => never[];
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loadingText: {
+        type: StringConstructor;
+        default: string;
+    };
+    loadingSpinner: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onDismissed?: (() => any) | undefined;
+}>, {
+    text: string;
+    title: string;
+    icon: string | Component;
+    loading: boolean;
+    dismissable: boolean;
+    loadingText: string;
+    iconColor: ColorVariant;
+    actions: ToastActionOption[];
+    toastAttrs: AdditionalAttr;
+    toastClass: string | unknown[] | Record<string, any>;
+    loadingSpinner: boolean;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/toast/index.md

@@ -0,0 +1,323 @@
+---
+title: Toast · Components
+description: Simple notification pop-up.
+---
+
+<script setup>
+  import { ref, markRaw } from 'vue-demi'
+  import Button from '../button/Button.vue'
+  import Toast from './Toast.vue'
+  import toast from '.'
+  import IconSuccess from '@privyid/persona-icon/vue/checkmark/16.vue'
+  import IconFailed from '@privyid/persona-icon/vue/trash/16.vue'
+  import Banner from '../banner/Banner.vue'
+
+  async function runLoading () {
+    let progress = 0
+
+    const t     = await toast.withProgress('Uploading...')
+    const timer = setInterval(() => {
+      if (progress >= 100) {
+        clearInterval(timer)
+        t.close()
+
+        toast('Upload successfully')
+      }
+
+      t.setProgress(`${++progress}%`)
+    }, 50)
+  }
+</script>
+
+# Toast
+
+> Simple notification pop-up.
+
+## Usage
+
+### Simple Usage
+
+<div class="flex mt-3">
+  <Button color="info" @click="toast({ text: 'Far far away, behind the word.', duration: -1 })">
+    Show Toast
+  </Button>
+</div>
+
+```ts
+import { toast } from '@privyid/persona/core'
+
+toast('Far far away, behind the word.')
+```
+
+### Advance Usage
+
+<div class="flex mt-3">
+  <Button color="info" @click="toast({
+    text    : `Far far away, behind the word.`,
+    duration: 5000,
+    position: 'bottom-right'
+  })">
+    Show Toast
+  </Button>
+</div>
+
+```ts
+import { toast } from '@privyid/persona/core'
+
+toast({
+  text    : 'Far far away, behind the word.',
+  duration: 5000,
+  position: 'bottom-right'
+})
+```
+
+## Position
+
+There available 3 position for toast: `bottom-left`, `bottom-center`, `bottom-right` default is `bottom-left`
+
+**Try it:**
+
+<div class="grid grid-cols-3 gap-3 mt-3">
+  <Button class="items-center" color="info" @click="toast({
+    text    : 'Far far away, behind the word.',
+    position: 'bottom-left'
+  })">
+    Bottom Left
+  </Button>
+
+  <Button class="items-center" color="info" @click="toast({
+    text    : 'Far far away, behind the word.',
+    position: 'bottom-center'
+  })">
+    Bottom Center
+  </Button>
+
+  <Button class="items-center" color="info" @click="toast({
+    text    : 'Far far away, behind the word.',
+    position: 'bottom-right'
+  })">
+    Bottom Right
+  </Button>
+</div>
+
+```ts
+import { toast } from '@privyid/persona/core'
+
+// bottom-left
+toast({
+  text    : 'Far far away, behind the word.',
+  position: 'bottom-left'
+})
+
+// bottom-center
+toast({
+  text    : 'Far far away, behind the word.',
+  position: 'bottom-center'
+})
+
+// bottom-right
+toast({
+  text    : 'Far far away, behind the word.',
+  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.
+
+<preview>
+  <Toast
+    text="Member added to the group"
+    :icon="IconSuccess"
+    icon-color="success" />
+</preview>
+
+<div class="mt-3 space-x-5">
+  <Button color="info" @click="toast({
+    text     : 'Member added to the group',
+    icon     : IconSuccess,
+    iconColor: 'success',
+  })">
+    Show toast
+  </Button>
+</div>
+
+```ts
+import { toast } from '@privyid/persona/core'
+import IconSuccess from '@privyid/persona-icon/vue/checkmark/24.vue'
+
+toast({
+  text     : 'Member added to the group',
+  icon     : markRaw(IconSuccess),
+  iconColor: 'success',
+})
+```
+
+## 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">
+  <Toast :dismissable="false" variant="filled" text="Lorem ipsum dolor sit amet." />
+</preview>
+
+```ts
+import { toast } from '@privyid/persona/core'
+
+toast({
+  text       : 'Lorem ipsum dolor sit amet.',
+  variant    : 'filled',
+  dismissable: false,
+})
+```
+
+## Actions
+
+Add additional button using option `actions`.
+
+<preview>
+  <Toast
+    text="Upload document successfully."
+    :actions="[
+      { text: 'Goto Doc' },
+    ]"
+  />
+</preview>
+
+<div class="mt-3">
+  <Button type="" color="info" @click="toast({
+    text   : 'Upload document successfully.',
+    actions: [
+      {
+        text: 'Goto Doc',
+        onClick (event) {
+          event.close()
+        }
+      }
+    ],
+  })">
+    With Action
+  </Button>
+</div>
+
+```ts
+toast({
+  text   : 'Upload document successfully.',
+  actions: [
+    {
+      text: 'Goto Doc',
+      onClick (event) {
+        // Do something
+        // ...
+        event.close()
+      }
+    }
+  ],
+})
+```
+
+## Progress
+
+Show loading progress using toast with `.runProgress`.
+
+<preview>
+  <Toast
+    text="Uploading..."
+    loading
+    loading-text="75%"
+    :dismissable="false" />
+</preview>
+
+<div class="mt-3">
+  <Button type="" color="info" @click="runLoading()">
+    With Progress
+  </Button>
+</div>
+
+```ts
+import { toast } from '@privyid/persona/core'
+
+async function doUpload () {
+  // ...
+  const progressToast = await toast.withProgress('Uploading...')
+  const response      = await axios.put('/endpoint/url', formData, {
+    onUploadProgress (progressEvent) {
+      const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+
+      progressToast.setProgress(`${progress}%`)
+    }
+  })
+
+  progressToast.close()
+  toast('Upload successfully')
+}
+```
+
+## Customization
+
+You can add some custom class to Toast element via `toastClass` and `toastAttrs`.
+
+<div class="mt-3">
+  <Button type="" color="info" @click="toast({
+    text      : 'A wonderful serenity has taken.',
+    toastClass: 'h-20',
+    toastAttrs: { 'data-e2eid': 'toast-upload' },
+  })">
+    Custom Toast
+  </Button>
+</div>
+
+```ts
+import { toast } from '@privyid/persona/core'
+
+toast({
+  text      : 'A wonderful serenity has taken.',
+  toastClass: 'h-20',
+  toastAttrs: { 'data-e2eid': 'toast-upload' },
+})
+```
+
+## API
+
+### toast
+
+`toast(options: ToastOptions): Promise<ToastInstance>`
+
+| Options       |          Type           |    Default    | Description                                                                                             |
+|---------------|:-----------------------:|:-------------:|---------------------------------------------------------------------------------------------------------|
+| `text`        |        `String`         |       -       | Toast text message (support markdown)                                                                   |
+| `position`    |        `String`         | `bottom-left` | Position for toast, valid value is `bottom-left`, `bottom-center`, `top-right`                          |
+| `duration`    |        `Number`         |    `3000`     | Duration for which the toast should be displayed. `-1` to permanent toast                               |
+| `icon`        | `String` or `Component` |       -       | Custom toast icon (will replace default icon)                                                           |
+| `iconColor`   |        `String`         |       -       | Custom color of toast icon, valid value is `default`, `primary`, `info`, `success`, `warning`, `danger` |
+| `toastClass`  |        `String`         |       -       | Add class to toast component                                                                            |
+| `toastAttrs`  |        `String`         |       -       | Add attribute to toast 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
+
+`toast(text: string): Promise<ToastInstance>`
+
+### .withProgress
+
+`.withProgress(options: ToastOption): Promise<ToastProgressInstance>`
+
+#### Shorthand
+
+`.withProgress(text: string, loadingText?: string): Promise<ToastProgressInstance>`
+
+## See Also
+
+- [Popup](../popup/)

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

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

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

@@ -0,0 +1,67 @@
+import { queryByTestId, queryByText } from "@testing-library/vue";
+import showToast from "./index.mjs";
+import { resetInstance } from "../global/use-singleton.mjs";
+import { nextTick } from "vue-demi";
+afterEach(async () => {
+  await resetInstance();
+});
+it("should be able to show notify", async () => {
+  await showToast({ text: "This is message body" });
+  const toast = queryByTestId(document.body, "toast");
+  const text = queryByText(document.body, "This is message body");
+  expect(toast).toBeInTheDocument();
+  expect(text).toBeInTheDocument();
+});
+it("should be able to show notify using shorthand", async () => {
+  await showToast("This is message body");
+  const toast = queryByTestId(document.body, "toast");
+  const text = queryByText(document.body, "This is message body");
+  expect(toast).toBeInTheDocument();
+  expect(text).toBeInTheDocument();
+});
+it("should be to show popup instead if type or variant was provide (backward compability)", async () => {
+  await showToast({
+    text: "This is message body",
+    type: "info",
+    variant: "filled"
+  });
+  const toast = queryByTestId(document.body, "toast");
+  const popup = queryByTestId(document.body, "popup");
+  const text = queryByTestId(document.body, "popup-text");
+  expect(toast).not.toBeInTheDocument();
+  expect(popup).toBeInTheDocument();
+  expect(text).toBeInTheDocument();
+  expect(text).toHaveTextContent("This is message body");
+});
+it("should use `title` as `text` if `text` was not provided but `title` was (backward compability)", async () => {
+  await showToast({ title: "This is message body" });
+  const toast = queryByTestId(document.body, "toast");
+  const text = queryByTestId(document.body, "toast-text");
+  expect(toast).toBeInTheDocument();
+  expect(text).toBeInTheDocument();
+  expect(text).toHaveTextContent("This is message body");
+});
+it("should able to show toast with progress using `.withProgress`", async () => {
+  const toast = await showToast.withProgress({ text: "Uploading", loadingText: "0%" });
+  const loading = queryByTestId(document.body, "toast-loading");
+  const spinner = queryByTestId(document.body, "toast-loading-spinner");
+  const text = queryByTestId(document.body, "toast-loading-text");
+  expect(loading).toBeInTheDocument();
+  expect(spinner).toBeInTheDocument();
+  expect(text).toHaveTextContent("0%");
+  toast.setProgress("78%");
+  await nextTick();
+  expect(text).toHaveTextContent("78%");
+});
+it("should able to show toast with progress using `.withProgress` shorthand", async () => {
+  const toast = await showToast.withProgress("Uploading...", "0%");
+  const loading = queryByTestId(document.body, "toast-loading");
+  const spinner = queryByTestId(document.body, "toast-loading-spinner");
+  const text = queryByTestId(document.body, "toast-loading-text");
+  expect(loading).toBeInTheDocument();
+  expect(spinner).toBeInTheDocument();
+  expect(text).toHaveTextContent("0%");
+  toast.setProgress("78%");
+  await nextTick();
+  expect(text).toHaveTextContent("78%");
+});

package/dist/components/toggle/Toggle.spec.d.ts

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