@privyid/persona 1.1.1 → 1.2.0

package/dist/components/navbar-menu/NavbarNavMenu.vue.d.ts

@@ -0,0 +1,16 @@
+import type { PropType } from 'vue-demi';
+import type { Menu } from '../sidebar-menu';
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    menus: {
+        type: PropType<Menu[]>;
+        default: () => Menu[];
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    menus: {
+        type: PropType<Menu[]>;
+        default: () => Menu[];
+    };
+}>> & Readonly<{}>, {
+    menus: Menu[];
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/notify/Notify.spec.d.ts

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

package/dist/components/notify/Notify.spec.mjs

@@ -0,0 +1,106 @@
+import { fireEvent, render } from "@testing-library/vue";
+import Sample from "./__mocks__/Sample.vue";
+import pNotify from "./Notify.vue";
+import { nextTick, ref } from "vue-demi";
+import { vi } from "vitest";
+beforeEach(() => {
+  vi.useFakeTimers();
+});
+afterEach(() => {
+  vi.useRealTimers();
+});
+it("should able to show notify", async () => {
+  const notify = ref();
+  const screen = render({
+    components: { pNotify },
+    template: `
+      <pNotify ref="notify">
+    `,
+    setup() {
+      return { notify };
+    }
+  });
+  await nextTick();
+  const instance = await notify.value.show({
+    component: Sample,
+    props: { text: "Hello World!" }
+  });
+  const sample = screen.queryByTestId("sample");
+  expect(sample).toBeInTheDocument();
+  instance.close();
+  await nextTick();
+  expect(sample).not.toBeInTheDocument();
+});
+it("should auto close by duration", async () => {
+  const notify = ref();
+  const screen = render({
+    components: { pNotify },
+    template: `
+      <pNotify ref="notify">
+    `,
+    setup() {
+      return { notify };
+    }
+  });
+  await notify.value.show({
+    component: Sample,
+    props: { text: "Hello World!" },
+    duration: 500
+  });
+  const sample = screen.queryByTestId("sample");
+  expect(sample).toBeInTheDocument();
+  vi.advanceTimersByTime(500);
+  await nextTick();
+  expect(sample).not.toBeInTheDocument();
+});
+it("should able to update notify", async () => {
+  const notify = ref();
+  const screen = render({
+    components: { pNotify },
+    template: `
+      <pNotify ref="notify">
+    `,
+    setup() {
+      return { notify };
+    }
+  });
+  await nextTick();
+  const instance = await notify.value.show({
+    component: Sample,
+    props: { text: "Hello World!" }
+  });
+  const sample = screen.queryByTestId("sample");
+  const text = screen.queryByTestId("sample-text");
+  expect(sample).toBeInTheDocument();
+  expect(text).toHaveTextContent("Hello World!");
+  instance.update({ props: { text: "Hello World! #2" } });
+  await nextTick();
+  expect(text).toHaveTextContent("Hello World! #2");
+});
+it("should able to self update / close using `useNotifyItem`", async () => {
+  const notify = ref();
+  const screen = render({
+    components: { pNotify },
+    template: `
+      <pNotify ref="notify">
+    `,
+    setup() {
+      return { notify };
+    }
+  });
+  await nextTick();
+  await notify.value.show({
+    component: Sample,
+    props: { text: "Hello World!" }
+  });
+  const sample = screen.queryByTestId("sample");
+  const text = screen.queryByTestId("sample-text");
+  expect(sample).toBeInTheDocument();
+  expect(text).toHaveTextContent("Hello World!");
+  const close = screen.queryByTestId("sample-close");
+  const update = screen.queryByTestId("sample-update");
+  await fireEvent.click(update);
+  expect(text).toHaveTextContent("New Text");
+  await fireEvent.click(close);
+  expect(sample).not.toBeInTheDocument();
+});

package/dist/components/notify/Notify.vue

@@ -4,48 +4,33 @@
       v-for="item in groups.values()"
       :key="item.position">
       <NotifyGroup
-        :ref="(el: any) => { item.ref.value = el}"
+        :ref="(el) => {
+  item.ref.value = el;
+}"
         :position="item.position" />
     </template>
   </div>
 </template>
 
-<script lang="ts" setup>
-import type { Ref } from 'vue-demi'
+<script setup>
 import {
   ref,
   shallowRef,
   triggerRef,
-  nextTick,
-} from 'vue-demi'
-import NotifyGroup from './NotifyGroup.vue'
-import type { NotifyOption, NotifyPositionVariant } from '.'
-
-type NotifyGroupInstance = InstanceType<typeof NotifyGroup>
-
-type NotifyGroupMap = Map<NotifyPositionVariant, {
-  position: NotifyPositionVariant,
-  ref: Ref<NotifyGroupInstance>,
-}>
-
-const groups = shallowRef<NotifyGroupMap>(new Map())
-
-async function show (options: NotifyOption) {
-  const position = options.position ?? 'bottom-left'
-
-  let group = groups.value.get(position)
-
+  nextTick
+} from "vue-demi";
+import NotifyGroup from "./NotifyGroup.vue";
+const groups = shallowRef(/* @__PURE__ */ new Map());
+async function show(options) {
+  const position = options.position ?? "bottom-left";
+  let group = groups.value.get(position);
   if (!group) {
-    group = { ref: ref(), position }
-    groups.value.set(position, group)
-
-    triggerRef(groups)
-
-    await nextTick()
+    group = { ref: ref(), position };
+    groups.value.set(position, group);
+    triggerRef(groups);
+    await nextTick();
   }
-
-  return group.ref.value?.show(options)
+  return group.ref.value?.show(options);
 }
-
-defineExpose({ show })
+defineExpose({ show });
 </script>

package/dist/components/notify/Notify.vue.d.ts

@@ -0,0 +1,6 @@
+import type { NotifyOption } from '.';
+declare function show(options: NotifyOption): Promise<import(".").NotifyInstance<any>>;
+declare const _default: import("vue-demi").DefineComponent<{}, {
+    show: typeof show;
+}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/notify/NotifyGroup.vue

@@ -19,95 +19,65 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type {
-  PropType,
-  Ref,
-} from 'vue-demi'
+<script setup>
 import {
   computed,
   shallowRef,
-  triggerRef,
-} from 'vue-demi'
-import type {
-  NotifyInstance,
-  NotifyOption,
-  NotifyPositionVariant,
-} from '.'
-import pNotifyItem from './NotifyItem.vue'
-import defu from 'defu'
-
-interface NotifyItem extends NotifyOption {
-  _id: symbol,
-}
-
+  triggerRef
+} from "vue-demi";
+import pNotifyItem from "./NotifyItem.vue";
+import defu from "defu";
 const props = defineProps({
   position: {
-    type   : String as PropType<NotifyPositionVariant>,
-    default: 'bottom-left',
+    type: String,
+    default: "bottom-left"
   },
   noAnimation: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const items: Ref<NotifyItem[]> = shallowRef([])
-
+    type: Boolean,
+    default: false
+  }
+});
+const items = shallowRef([]);
 const classNames = computed(() => {
-  const result: string[] = []
-
+  const result = [];
   if (props.position)
-    result.push(`notify-group--${props.position}`)
-
-  return result
-})
-
-function add (option: NotifyOption) {
-  const _id  = Symbol('NotifyID')
-  const item = { ...option, _id }
-
-  items.value.push(item)
-
-  triggerRef(items)
-
-  return _id
+    result.push(`notify-group--${props.position}`);
+  return result;
+});
+function add(option) {
+  const _id = Symbol("NotifyID");
+  const item = { ...option, _id };
+  items.value.push(item);
+  triggerRef(items);
+  return _id;
 }
-
-function remove (id: symbol) {
-  items.value.splice(items.value.findIndex((item) => item._id === id), 1)
-
-  triggerRef(items)
+function remove(id) {
+  items.value.splice(items.value.findIndex((item) => item._id === id), 1);
+  triggerRef(items);
 }
-
-function update (id: symbol, option: Partial<NotifyOption>) {
-  const i = items.value.findIndex((i) => i._id === id)
-
+function update(id, option) {
+  const i = items.value.findIndex((i2) => i2._id === id);
   if (i > -1)
-    items.value[i] = defu(option, items.value[i])
-
-  triggerRef(items)
+    items.value[i] = defu(option, items.value[i]);
+  triggerRef(items);
 }
-
-function show (option: NotifyOption): NotifyInstance {
-  const id = add(option)
-
+function show(option) {
+  const id = add(option);
   return {
-    update (option: Partial<NotifyOption>) {
-      update(id, option)
-    },
-    close () {
-      remove(id)
+    update(option2) {
+      update(id, option2);
     },
-  }
+    close() {
+      remove(id);
+    }
+  };
 }
-
 defineExpose({
   add,
   show,
   remove,
-  update,
-})
+  update
+});
 </script>
 
 <style lang="postcss">

package/dist/components/notify/NotifyGroup.vue.d.ts

@@ -0,0 +1,34 @@
+import type { PropType } from 'vue-demi';
+import type { NotifyInstance, NotifyOption, NotifyPositionVariant } from '.';
+declare function add(option: NotifyOption): symbol;
+declare function remove(id: symbol): void;
+declare function update(id: symbol, option: Partial<NotifyOption>): void;
+declare function show(option: NotifyOption): NotifyInstance;
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    position: {
+        type: PropType<NotifyPositionVariant>;
+        default: string;
+    };
+    noAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    add: typeof add;
+    show: typeof show;
+    remove: typeof remove;
+    update: typeof update;
+}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    position: {
+        type: PropType<NotifyPositionVariant>;
+        default: string;
+    };
+    noAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    noAnimation: boolean;
+    position: NotifyPositionVariant;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/notify/NotifyItem.vue

@@ -4,42 +4,30 @@
     v-bind="option.props" />
 </template>
 
-<script setup lang="ts">
-import type { PropType } from 'vue-demi'
-import { provide, watchEffect } from 'vue-demi'
-import { NOTIFY_CONTEXT, type NotifyOption } from '.'
-
+<script setup>
+import { provide, watchEffect } from "vue-demi";
+import { NOTIFY_CONTEXT } from ".";
 const props = defineProps({
   option: {
-    type   : Object as PropType<NotifyOption>,
-    default: () => ({}),
-  },
-})
-
-const emit = defineEmits<{
-  'dismissed': [],
-  'update:option': [Partial<NotifyOption>],
-}>()
-
-function close () {
-  emit('dismissed')
+    type: Object,
+    default: () => ({})
+  }
+});
+const emit = defineEmits(["dismissed", "update:option"]);
+function close() {
+  emit("dismissed");
 }
-
-function update (option: Partial<NotifyOption>) {
-  emit('update:option', option)
+function update(option) {
+  emit("update:option", option);
 }
-
 watchEffect((onCleanup) => {
-  const duration = props.option.duration ?? 3000
-
+  const duration = props.option.duration ?? 3e3;
   if (Number.isFinite(duration) && duration > 0) {
-    const timer = setTimeout(close, duration)
-
+    const timer = setTimeout(close, duration);
     onCleanup(() => {
-      clearTimeout(timer)
-    })
+      clearTimeout(timer);
+    });
   }
-})
-
-provide(NOTIFY_CONTEXT, { close, update })
+});
+provide(NOTIFY_CONTEXT, { close, update });
 </script>

package/dist/components/notify/NotifyItem.vue.d.ts

@@ -0,0 +1,22 @@
+import type { PropType } from 'vue-demi';
+import { type NotifyOption } from '.';
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    option: {
+        type: PropType<NotifyOption>;
+        default: () => {};
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    dismissed: () => void;
+    "update:option": (args_0: Partial<NotifyOption<any>>) => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    option: {
+        type: PropType<NotifyOption>;
+        default: () => {};
+    };
+}>> & Readonly<{
+    onDismissed?: (() => any) | undefined;
+    "onUpdate:option"?: ((args_0: Partial<NotifyOption<any>>) => any) | undefined;
+}>, {
+    option: NotifyOption<any>;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/notify/__mocks__/Sample.vue

@@ -0,0 +1,33 @@
+<template>
+  <div data-testid="sample">
+    <p data-testid="sample-text">
+      {{ text }}
+    </p>
+    <a
+      data-testid="sample-update"
+      href="#"
+      @click="update({ props: { text: 'New Text' } })">
+      update
+    </a>
+    <a
+      data-testid="sample-close"
+      href="#"
+      @click="close()">
+      close
+    </a>
+  </div>
+</template>
+
+<script setup>
+import { useNotifyItem } from "..";
+defineProps({
+  text: {
+    type: String,
+    default: "This is message body"
+  }
+});
+const {
+  close,
+  update
+} = useNotifyItem();
+</script>

package/dist/components/notify/__mocks__/Sample.vue.d.ts

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

package/dist/components/notify/index.md

@@ -0,0 +1,78 @@
+---
+title: Notify · Components
+description: Low level component for Popup and Toast.
+---
+
+<script setup>
+  import notify from '.'
+  import pCard from '../card/Card.vue'
+  import Button from '../button/Button.vue'
+</script>
+
+# Notify
+
+> Low-Level component for [Popup](../popup/) and [Toast](../toast/).
+
+## Usage
+
+### Simple Usage
+
+<div class="flex mt-3">
+  <Button color="info" @click="notify({
+    component: pCard,
+    props    : {
+      title      : 'Hello World',
+      class      : 'w-[300px]',
+      callout    : true,
+      dismissable: true,
+    },
+    duration : 3000,
+    position : 'bottom-left',
+  })">
+    Show Notify
+  </Button>
+</div>
+
+
+```ts
+import pCard from '#components'
+import { notify } from '@privyid/persona/core'
+
+notify({
+  component: pCard,
+  props    : {
+    title      : 'Hello World',
+    class      : 'w-[300px]',
+    callout    : true,
+    dismissable: true,
+  },
+  duration : 3000,
+  position : 'bottom-left',
+})
+```
+
+## Variables
+
+Toast use local CSS variables on `.notify-container` for enhanced real-time customization.
+
+```sass
+--p-notify-z-index: theme(zIndex.notify); //1090
+```
+
+## API
+
+### notify
+
+`notify(options: PopupOptions): Promise<NotifyInstance>`
+
+| Options     |    Type     |    Default    | Description                                                                                                           |
+|-------------|:-----------:|:-------------:|-----------------------------------------------------------------------------------------------------------------------|
+| `component` | `Component` |      `-`      | Notify item component                                                                                                 |
+| `props`     |  `Object`   |      `-`      | Notify item props                                                                                                     |
+| `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` |
+
+## See Also
+
+- [Toast](../toast/)
+- [Popup](../popup/)

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

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

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

@@ -0,0 +1,17 @@
+import { queryByTestId, queryByText } from "@testing-library/vue";
+import Sample from "./__mocks__/Sample.vue";
+import { resetInstance } from "../global/use-singleton.mjs";
+import showNotify from "./index.mjs";
+afterEach(async () => {
+  await resetInstance();
+});
+it("should be able to show notify", async () => {
+  await showNotify({
+    component: Sample,
+    props: { text: "Hello World!" }
+  });
+  const notify = queryByTestId(document.body, "sample");
+  const text = queryByText(document.body, "Hello World!");
+  expect(notify).toBeInTheDocument();
+  expect(text).toBeInTheDocument();
+});

package/dist/components/overlay/Overlay.spec.d.ts

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

package/dist/components/overlay/Overlay.spec.mjs

@@ -0,0 +1,65 @@
+import { render, fireEvent } from "@testing-library/vue";
+import { nextTick } from "vue-demi";
+import Overlay from "./Overlay.vue";
+it("should able to display overlay", async () => {
+  const screen = render({
+    components: { Overlay },
+    template: `
+      <div>
+        <Overlay ref="overlay" />
+      </div>
+    `,
+    mounted() {
+      this.$refs.overlay.show();
+    }
+  });
+  await nextTick();
+  const overlay = screen.queryByTestId("overlay");
+  expect(overlay).toBeInTheDocument();
+  expect(overlay).toHaveClass("overlay");
+});
+it('should display overlay if "show" called', async () => {
+  const screen = render({
+    components: { Overlay },
+    template: `
+      <div>
+        <Overlay ref="overlay" />
+        <button @click="showOverlay">Show</button>
+      </div>
+    `,
+    methods: {
+      showOverlay() {
+        this.$refs.overlay.show();
+      }
+    }
+  });
+  const showBtn = screen.queryByText("Show");
+  await fireEvent.click(showBtn);
+  const overlay = screen.queryByTestId("overlay");
+  expect(overlay).toBeInTheDocument();
+});
+it('should hide overlay if "hide" called', async () => {
+  const screen = render({
+    components: { Overlay },
+    template: `
+      <div>
+        <Overlay ref="overlay" />
+        <button @click="hideOverlay">Hide</button>
+      </div>
+    `,
+    mounted() {
+      this.$refs.overlay.show();
+    },
+    methods: {
+      hideOverlay() {
+        this.$refs.overlay.hide();
+      }
+    }
+  });
+  await nextTick();
+  const overlay = screen.queryByTestId("overlay");
+  const hideBtn = screen.queryByText("Hide");
+  expect(overlay).toBeInTheDocument();
+  await fireEvent.click(hideBtn);
+  expect(overlay).not.toBeInTheDocument();
+});