@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/navbar/NavbarNav.vue

@@ -1,114 +0,0 @@
-<template>
-  <Nav
-    :align="align"
-    :variant="variant"
-    :condensed="condensed"
-    class="navbar__nav"
-    data-testid="navbar-nav">
-    <slot />
-  </Nav>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { inject } from 'vue-demi'
-import Nav from '../nav/Nav.vue'
-import type { AlignVariant } from '../nav'
-import { NAVBAR_SETTINGS } from '.'
-
-defineProps({
-  align: {
-    type   : String as PropType<AlignVariant>,
-    default: 'left',
-  },
-})
-
-const settings  = inject(NAVBAR_SETTINGS, undefined, 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/NavbarToggle.vue

@@ -1,72 +0,0 @@
-<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 lang="ts" setup>
-import {
-  inject,
-  ref,
-  computed,
-} from 'vue-demi'
-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, undefined, false)
-const toggleable = settings?.toggleable
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  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/index.d.ts

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

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

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

@@ -1,59 +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 lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import NavbarNav from '../navbar/NavbarNav.vue'
-import type { Menu } from '../sidebar-menu'
-
-defineProps({
-  menus: {
-    type   : Array as PropType<Menu[]>,
-    default: () => ([] as Menu[]),
-  },
-})
-</script>

package/dist/components/notify/Notify.vue

@@ -1,51 +0,0 @@
-<template>
-  <div data-testid="notify">
-    <template
-      v-for="item in groups.values()"
-      :key="item.position">
-      <NotifyGroup
-        :ref="(el: any) => { item.ref.value = el}"
-        :position="item.position" />
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { Ref } from 'vue-demi'
-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)
-
-  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/NotifyGroup.vue

@@ -1,244 +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 lang="ts" setup>
-import type {
-  PropType,
-  Ref,
-} from 'vue-demi'
-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,
-}
-
-const props = defineProps({
-  position: {
-    type   : String as PropType<NotifyPositionVariant>,
-    default: 'bottom-left',
-  },
-  noAnimation: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const items: Ref<NotifyItem[]> = shallowRef([])
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  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
-}
-
-function remove (id: symbol) {
-  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)
-
-  if (i > -1)
-    items.value[i] = defu(option, items.value[i])
-
-  triggerRef(items)
-}
-
-function show (option: NotifyOption): NotifyInstance {
-  const id = add(option)
-
-  return {
-    update (option: Partial<NotifyOption>) {
-      update(id, option)
-    },
-    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/NotifyItem.vue

@@ -1,45 +0,0 @@
-<template>
-  <component
-    :is="option.component"
-    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 '.'
-
-const props = defineProps({
-  option: {
-    type   : Object as PropType<NotifyOption>,
-    default: () => ({}),
-  },
-})
-
-const emit = defineEmits<{
-  'dismissed': [],
-  'update:option': [Partial<NotifyOption>],
-}>()
-
-function close () {
-  emit('dismissed')
-}
-
-function update (option: Partial<NotifyOption>) {
-  emit('update:option', option)
-}
-
-watchEffect((onCleanup) => {
-  const duration = props.option.duration ?? 3000
-
-  if (Number.isFinite(duration) && duration > 0) {
-    const timer = setTimeout(close, duration)
-
-    onCleanup(() => {
-      clearTimeout(timer)
-    })
-  }
-})
-
-provide(NOTIFY_CONTEXT, { close, update })
-</script>

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.mjs

@@ -1,18 +0,0 @@
-import { inject } from "vue-demi";
-import { useSingleton } from "../global/use-singleton.mjs";
-import { noop } from "lodash-es";
-export const NOTIFY_CONTEXT = Symbol("NotifyContext");
-export async function showNotify(options) {
-  const { default: Notify } = await import("./Notify.vue");
-  const instance = await useSingleton(Notify);
-  return instance.show(options);
-}
-export function useNotifyItem() {
-  return inject(NOTIFY_CONTEXT, () => {
-    return {
-      close: noop,
-      update: noop
-    };
-  }, true);
-}
-export default showNotify;

package/dist/components/overlay/Overlay.vue

@@ -1,68 +0,0 @@
-<template>
-  <div
-    v-if="loading"
-    data-testid="overlay"
-    class="overlay">
-    <div class="overlay__icon">
-      <img
-        :src="icon"
-        alt="overlay-icon">
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import useLoading from './utils/use-loading'
-import Icon from './assets/icon-white.svg'
-
-defineProps({
-  icon: {
-    type   : String,
-    default: Icon,
-  },
-})
-
-const loading = useLoading({ elapsed: false })
-
-function show () {
-  loading.value = true
-}
-
-function hide () {
-  loading.value = false
-}
-
-defineExpose({
-  show,
-  hide,
-})
-</script>
-
-<style lang="postcss">
-@keyframes overlayLoading {
-  from {
-    opacity: 1;
-    transform: scale(0);
-  }
-
-  to {
-    opacity: 0;
-    transform: scale(1.5);
-  }
-}
-
-.overlay {
-  --p-overlay-z-index: theme(zIndex.overlay);
-
-  @apply z-[var(--p-overlay-z-index)] fixed top-0 left-0 right-0 bottom-0 w-screen h-screen bg-inverse/30 flex items-center justify-center select-none will-change-[transform,opacity];
-  @apply dark:bg-dark-inverse/30;
-
-  &__icon {
-    @apply w-10 md:w-16 animate-[overlayLoading_1s_ease-in-out_infinite];
-
-    & > img {
-      @apply max-w-full h-auto;
-    }
-  }
-}
-</style>