@privyid/persona 1.2.1 → 1.2.2-dev.2

package/dist/components/navbar/NavbarNav.vue

@@ -0,0 +1,110 @@
+<template>
+  <Nav
+    :align="align"
+    :variant="variant"
+    :condensed="condensed"
+    class="navbar__nav"
+    data-testid="navbar-nav">
+    <slot />
+  </Nav>
+</template>
+
+<script setup>
+import { inject } from "vue";
+import Nav from "../nav/Nav.vue";
+import { NAVBAR_SETTINGS } from ".";
+defineProps({
+  align: {
+    type: String,
+    default: "left"
+  }
+});
+const settings = inject(NAVBAR_SETTINGS, void 0, false);
+const variant = settings?.variant;
+const condensed = settings?.condensed;
+</script>
+
+<style lang="postcss">
+.navbar {
+  &__nav {
+    @apply flex flex-row items-center;
+
+    &:not(.nav--align-center):not(.nav--align-right) {
+      @apply mr-auto;
+    }
+
+    &.nav--align-center {
+      @apply mx-auto;
+    }
+
+    &.nav--align-right {
+      @apply ml-auto;
+    }
+
+    .dropdown {
+      &__activator {
+        &.btn {
+          @apply px-3 bg-transparent hover:bg-transparent shadow-none rounded font-normal text-subtle hover:text-default hover:shadow-none;
+          @apply dark:bg-transparent hover:dark:bg-transparent dark:text-dark-subtle hover:dark:text-dark-default;
+        }
+
+        &:not(.btn--variant-outline) {
+          &.btn {
+            @apply border-transparent hover:border-transparent;
+          }
+        }
+      }
+
+      &--open {
+        .dropdown__activator {
+          &.btn {
+            @apply text-default cursor-default border-transparent bg-transparent hover:bg-transparent;
+            @apply dark:text-dark-default dark:bg-transparent hover:dark:bg-transparent;
+          }
+        }
+      }
+    }
+
+    &.nav--pills {
+      @apply pb-0;
+
+      .dropdown {
+        &--open {
+          .dropdown__activator {
+            &.btn {
+              @apply bg-base hover:bg-base;
+              @apply dark:bg-dark-base hover:dark:bg-dark-base;
+            }
+          }
+        }
+      }
+
+      &.nav--condensed {
+        .nav__link--active {
+          @apply bg-base;
+          @apply dark:bg-dark-base;
+        }
+      }
+    }
+
+    &.nav--lines {
+      .dropdown {
+        &__activator {
+          &.btn {
+            @apply border-x-0 rounded-none;
+          }
+        }
+
+        &--open {
+          .dropdown__activator {
+            &.btn {
+              @apply border-b-inverse;
+              @apply dark:border-b-dark-inverse;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/dist/components/navbar/NavbarNav.vue.d.ts

@@ -0,0 +1,31 @@
+import type { PropType } from 'vue';
+import type { AlignVariant } from '../nav';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    align: {
+        type: PropType<AlignVariant>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    align: {
+        type: PropType<AlignVariant>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    align: AlignVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/navbar/NavbarToggle.vue

@@ -0,0 +1,67 @@
+<template>
+  <Button
+    class="navbar__toggle"
+    data-testid="navbar-toggle"
+    variant="outline"
+    :class="classNames"
+    icon
+    @click="expanded">
+    <slot :expanded="expand">
+      <IconClose v-if="expand" />
+      <IconMenu v-else />
+    </slot>
+  </Button>
+</template>
+
+<script setup>
+import {
+  inject,
+  ref,
+  computed
+} from "vue";
+import Button from "../button/Button.vue";
+import IconMenu from "@privyid/persona-icon/vue/menu-burger/20.vue";
+import IconClose from "@privyid/persona-icon/vue/close/20.vue";
+import { NAVBAR_SETTINGS } from ".";
+const expand = ref(false);
+const settings = inject(NAVBAR_SETTINGS, void 0, false);
+const toggleable = settings?.toggleable;
+const classNames = computed(() => {
+  const result = [];
+  if (toggleable?.value)
+    result.push(`navbar__toggle--${toggleable?.value}`);
+  return result;
+});
+function expanded() {
+  expand.value = !expand.value;
+}
+</script>
+
+<style lang="postcss">
+.navbar {
+  &__toggle {
+    @apply inline-flex;
+
+    &:is(.btn--variant-outline, .btn--default) {
+      @apply bg-base hover:shadow-none text-subtle;
+      @apply dark:bg-dark-base dark:text-dark-subtle;
+    }
+
+    &&--all {
+      @apply flex;
+    }
+
+    &&--lg {
+      @apply lg:hidden;
+    }
+
+    &&--md {
+      @apply md:hidden;
+    }
+
+    &&--sm {
+      @apply sm:hidden;
+    }
+  }
+}
+</style>

package/dist/components/navbar/NavbarToggle.vue.d.ts

@@ -0,0 +1,19 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            expanded: boolean;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,9 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { StyleVariant } from '../nav';
+export type ToggleableVariant = 'sm' | 'md' | 'lg' | 'all';
+export interface NavbarSettings {
+    variant: Ref<StyleVariant>;
+    toggleable?: Ref<string | undefined>;
+    condensed?: Ref<boolean>;
+}
+export declare const NAVBAR_SETTINGS: InjectionKey<NavbarSettings>;

package/dist/components/navbar/index.mjs

@@ -0,0 +1 @@
+export const NAVBAR_SETTINGS = Symbol("NavbarSettings");

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

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

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

package/dist/components/notify/Notify.vue

@@ -0,0 +1,36 @@
+<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";
+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

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

package/dist/components/notify/NotifyGroup.vue

@@ -0,0 +1,214 @@
+<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";
+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

@@ -0,0 +1,34 @@
+import type { PropType } from 'vue';
+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").DefineComponent<import("vue").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").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    position: {
+        type: PropType<NotifyPositionVariant>;
+        default: string;
+    };
+    noAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    noAnimation: boolean;
+    position: NotifyPositionVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/notify/NotifyItem.vue

@@ -0,0 +1,33 @@
+<template>
+  <component
+    :is="option.component"
+    v-bind="option.props" />
+</template>
+
+<script setup>
+import { provide, watchEffect } from "vue";
+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

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

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

@@ -0,0 +1,20 @@
+import type { InjectionKey } from 'vue';
+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;