@privyid/persona 1.2.0 → 1.2.1-rc.0

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

@@ -1,56 +0,0 @@
-<template>
-  <NavbarNav
-    v-for="(menu, i) in menus"
-    :key="i"
-    :align="menu.align">
-    <template
-      v-for="(item, id) in menu.items"
-      :key="id">
-      <NavItemDropdown v-if="item.submenu">
-        <template #button-content>
-          <template v-if="item.icon && typeof item.icon === 'string'">
-            <img
-              :src="item.icon"
-              alt="icon-menu">
-          </template>
-          <template v-else-if="item.icon">
-            <component :is="item.icon" />
-          </template>
-          {{ item.label }}
-        </template>
-        <DropdownItem
-          v-for="(submenu, idx) in item.submenu"
-          :key="idx">
-          {{ submenu.label }}
-        </DropdownItem>
-      </NavItemDropdown>
-      <NavItem
-        v-else
-        :href="item.url"
-        :class="{ 'nav__item--no-label': !item.label }">
-        <template
-          #icon>
-          <template v-if="item.icon && typeof item.icon === 'string'">
-            <img
-              :src="item.icon"
-              alt="icon-menu">
-          </template>
-          <template v-else-if="item.icon">
-            <component :is="item.icon" />
-          </template>
-        </template>
-        {{ item.label }}
-      </NavItem>
-    </template>
-  </NavbarNav>
-</template>
-
-<script setup>
-import NavbarNav from "../navbar/NavbarNav.vue";
-defineProps({
-  menus: {
-    type: Array,
-    default: () => []
-  }
-});
-</script>

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

@@ -1,16 +0,0 @@
-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

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

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

@@ -1,106 +0,0 @@
-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

@@ -1,36 +0,0 @@
-<template>
-  <div data-testid="notify">
-    <template
-      v-for="item in groups.values()"
-      :key="item.position">
-      <NotifyGroup
-        :ref="(el) => {
-  item.ref.value = el;
-}"
-        :position="item.position" />
-    </template>
-  </div>
-</template>
-
-<script setup>
-import {
-  ref,
-  shallowRef,
-  triggerRef,
-  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();
-  }
-  return group.ref.value?.show(options);
-}
-defineExpose({ show });
-</script>

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

@@ -1,6 +0,0 @@
-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

@@ -1,214 +0,0 @@
-<template>
-  <div
-    data-testid="notify-group"
-    class="notify-group"
-    :class="classNames">
-    <TransitionGroup
-      tag="div"
-      name="notify"
-      class="notify-group__container">
-      <template
-        v-for="item in items"
-        :key="item._id">
-        <pNotifyItem
-          :option="item"
-          @update:option="update(item._id, $event)"
-          @dismissed="remove(item._id)" />
-      </template>
-    </TransitionGroup>
-  </div>
-</template>
-
-<script setup>
-import {
-  computed,
-  shallowRef,
-  triggerRef
-} from "vue-demi";
-import pNotifyItem from "./NotifyItem.vue";
-import defu from "defu";
-const props = defineProps({
-  position: {
-    type: String,
-    default: "bottom-left"
-  },
-  noAnimation: {
-    type: Boolean,
-    default: false
-  }
-});
-const items = shallowRef([]);
-const classNames = computed(() => {
-  const result = [];
-  if (props.position)
-    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) {
-  items.value.splice(items.value.findIndex((item) => item._id === id), 1);
-  triggerRef(items);
-}
-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);
-}
-function show(option) {
-  const id = add(option);
-  return {
-    update(option2) {
-      update(id, option2);
-    },
-    close() {
-      remove(id);
-    }
-  };
-}
-defineExpose({
-  add,
-  show,
-  remove,
-  update
-});
-</script>
-
-<style lang="postcss">
-.notify-group {
-  --p-notify-z-index: theme(zIndex.notify);
-
-  @apply z-[var(--p-notify-z-index)] fixed;
-
-  &__container {
-    @apply flex space-y-2 h-full overflow-visible;
-  }
-
-  &--top-right {
-    .notify-group__container {
-      @apply items-end;
-    }
-
-    .notify {
-      &-enter-from,
-      &-leave-to {
-        @apply opacity-0 translate-x-20;
-      }
-    }
-  }
-
-  &--top-center {
-    @apply left-1/2 -translate-x-1/2;
-
-    .notify-group__container {
-      @apply items-center;
-    }
-
-    .notify {
-      &-enter-from,
-      &-leave-to {
-        @apply opacity-0 -translate-y-20;
-      }
-    }
-  }
-
-  &--top-left {
-    .notify-group__container {
-      @apply items-start;
-    }
-
-    .notify {
-      &-enter-from,
-      &-leave-to {
-        @apply opacity-0 -translate-x-20;
-      }
-    }
-  }
-
-  &--bottom-right {
-    .notify-group__container {
-      @apply items-end;
-    }
-
-    .notify {
-      &-enter-from,
-      &-leave-to {
-        @apply opacity-0 translate-x-20;
-      }
-    }
-  }
-
-  &--bottom-center {
-    @apply left-1/2 -translate-x-1/2;
-
-    .notify-group__container {
-      @apply items-center;
-    }
-
-    .notify {
-      &-enter-from,
-      &-leave-to {
-        @apply opacity-0 translate-y-20;
-      }
-    }
-  }
-
-  &--bottom-left {
-    .notify-group__container {
-      @apply items-start;
-    }
-
-    .notify {
-      &-enter-from,
-      &-leave-to {
-        @apply opacity-0 -translate-x-20;
-      }
-    }
-  }
-
-  &--top-left,
-  &--top-center,
-  &--top-right {
-    @apply top-8;
-
-    .notify-group__container {
-      @apply justify-start flex-col-reverse space-y-reverse;
-    }
-  }
-
-  &--top-right,
-  &--bottom-right {
-    @apply right-8;
-  }
-
-  &--top-left,
-  &--bottom-left {
-    @apply left-8;
-  }
-
-  &--bottom-left,
-  &--bottom-center,
-  &--bottom-right {
-    @apply bottom-8;
-
-    .notify-group__container {
-      @apply justify-end flex-col;
-    }
-  }
-}
-
-.notify {
-  @apply will-change-[opacity,transform];
-
-  &-enter-active,
-  &-leave-active {
-    @apply transition-all duration-150;
-  }
-}
-</style>

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

@@ -1,34 +0,0 @@
-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

@@ -1,33 +0,0 @@
-<template>
-  <component
-    :is="option.component"
-    v-bind="option.props" />
-</template>
-
-<script setup>
-import { provide, watchEffect } from "vue-demi";
-import { NOTIFY_CONTEXT } from ".";
-const props = defineProps({
-  option: {
-    type: Object,
-    default: () => ({})
-  }
-});
-const emit = defineEmits(["dismissed", "update:option"]);
-function close() {
-  emit("dismissed");
-}
-function update(option) {
-  emit("update:option", option);
-}
-watchEffect((onCleanup) => {
-  const duration = props.option.duration ?? 3e3;
-  if (Number.isFinite(duration) && duration > 0) {
-    const timer = setTimeout(close, duration);
-    onCleanup(() => {
-      clearTimeout(timer);
-    });
-  }
-});
-provide(NOTIFY_CONTEXT, { close, update });
-</script>

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

@@ -1,22 +0,0 @@
-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

@@ -1,33 +0,0 @@
-<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

@@ -1,14 +0,0 @@
-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.d.ts

@@ -1,20 +0,0 @@
-import type { InjectionKey } from 'vue-demi';
-import type { ComponentInstance, Component } from '../global/use-singleton';
-export type NotifyPositionVariant = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-export interface NotifyInstance<C extends Component = any> {
-    close: () => void;
-    update: (option: Partial<NotifyOption<C>>) => void;
-}
-export declare const NOTIFY_CONTEXT: InjectionKey<NotifyInstance>;
-export interface NotifyOption<C extends Component = any> {
-    component: C;
-    props?: ComponentInstance<C>['$props'];
-    position?: NotifyPositionVariant;
-    duration?: number;
-}
-export declare function showNotify<C extends Component = any>(options: NotifyOption<C>): Promise<NotifyInstance<C>>;
-export declare function useNotifyItem(): {
-    close: (...args: any[]) => void;
-    update: (...args: any[]) => void;
-};
-export default showNotify;

package/dist/components/notify/index.md

@@ -1,78 +0,0 @@
----
-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/)