@privyid/persona 1.1.2 → 1.2.1

package/dist/components/sidebar/Sidebar.vue

@@ -1,249 +0,0 @@
-<template>
-  <aside
-    ref="sidebar"
-    data-testid="sidebar"
-    class="sidebar"
-    :class="classNames">
-    <slot
-      v-if="$slots.brand"
-      name="brand" />
-    <div
-      ref="sidebarMenus"
-      data-testid="sidebar-menus"
-      class="sidebar__menus">
-      <SidebarContent>
-        <slot />
-      </SidebarContent>
-    </div>
-    <div
-      ref="bottom"
-      data-testid="sidebar-bottom"
-      class="sidebar__bottom">
-      <SidebarContent bottom>
-        <slot />
-      </SidebarContent>
-      <slot name="bottom" />
-    </div>
-  </aside>
-</template>
-
-<script lang="ts" setup>
-import type { PropType, VNode } from 'vue-demi'
-import {
-  computed,
-  provide,
-  ref,
-} from 'vue-demi'
-import type { TypeVariant } from '.'
-import { SIDEBAR_SETTINGS } from '.'
-import { useVModel } from '../input'
-import type { StyleVariant, AlignVariant } from '../nav'
-import type { ToggleableVariant } from '../navbar'
-import SidebarContent from './SidebarContent.vue'
-
-const props = defineProps({
-  variant: {
-    type   : String as PropType<StyleVariant>,
-    default: 'pills',
-  },
-  align: {
-    type   : String as PropType<AlignVariant>,
-    default: 'left',
-  },
-  type: {
-    type   : String as PropType<TypeVariant>,
-    default: 'wide',
-  },
-  fixed: {
-    type   : Boolean,
-    default: false,
-  },
-  sticky: {
-    type   : Boolean,
-    default: false,
-  },
-  toggleable: {
-    type   : String as PropType<ToggleableVariant>,
-    default: undefined,
-  },
-  modelValue: {
-    type   : Boolean,
-    default: true,
-  },
-})
-
-defineOptions({
-  models: {
-    prop : 'modelValue',
-    event: 'update:modelValue',
-  },
-})
-
-defineEmits<{
-  'update:modelValue': [boolean],
-}>()
-
-defineSlots<{
-  'brand'(): VNode[],
-  'bottom'(): VNode[],
-}>()
-
-const model  = useVModel(props)
-const bottom = ref<HTMLDivElement>()
-
-const classNames = computed(() => {
-  const result: string[] = ['']
-
-  if (props.type)
-    result.push(`sidebar--${props.type}`)
-
-  if (props.align)
-    result.push(`sidebar--${props.align}`)
-
-  if (props.variant)
-    result.push(`sidebar--${props.variant}`)
-
-  if (props.fixed)
-    result.push('sidebar--fixed')
-
-  if (props.sticky)
-    result.push('sidebar--sticky')
-
-  if (props.toggleable)
-    result.push(`sidebar--toggleable sidebar--toggleable-${props.toggleable}`)
-
-  if (props.toggleable && props.fixed && model.value)
-    result.push('sidebar--show')
-
-  return result
-})
-
-provide(SIDEBAR_SETTINGS, {
-  variant: props.variant,
-  align  : props.align,
-  type   : props.type,
-})
-</script>
-
-<style lang="postcss">
-.sidebar {
-  --p-sidebar-size-narrow: 60px;
-  --p-sidebar-size-wide: 230px;
-  --p-sidebar-bg: theme(backgroundColor.DEFAULT);
-  --p-sidebar-bg-dark: theme(backgroundColor.dark.DEFAULT);
-  --p-sidebar-z-index: theme(zIndex.fixed);
-  --p-sidebar-sticky-top: theme(spacing.0);
-  --p-sidebar-fixed-top: theme(spacing.0);
-  --p-sidebar-padding-x: theme(spacing.2);
-  --p-sidebar-padding-left: var(--p-sidebar-padding-x);
-  --p-sidebar-padding-right: var(--p-sidebar-padding-x);
-  --p-sidebar-padding-y: theme(spacing.4);
-  --p-sidebar-padding-top: var(--p-sidebar-padding-y);
-  --p-sidebar-padding-bottom: var(--p-sidebar-padding-y);
-  --p-sidebar-shadow: theme(boxShadow.lg);
-
-  @apply bg-[color:var(--p-sidebar-bg)] pt-[var(--p-sidebar-padding-top)] pb-[var(--p-sidebar-padding-bottom)] pl-[var(--p-sidebar-padding-left)] pr-[var(--p-sidebar-padding-right)] flex flex-col items-stretch;
-  @apply dark:bg-[color:var(--p-sidebar-bg-dark)];
-
-  /**
-  * Default sidebar has
-  * 230px width
-  */
-  &:not(.sidebar--narrow) {
-    @apply w-[var(--p-sidebar-size-wide)];
-  }
-
-  /**
-  * Right-align sidebar
-  */
-  &:not(.sidebar--fixed) {
-    &.sidebar--right {
-      @apply ml-auto;
-    }
-  }
-
-  /**
-  * Fixed sidebar
-  */
-  &&--fixed {
-    @apply fixed z-[var(--p-sidebar-z-index)] top-[var(--p-sidebar-fixed-top)] h-full transition-all;
-    box-shadow: var(--p-sidebar-shadow);
-
-    .sidebar__menus {
-      @apply grow h-full overflow-y-auto py-2;
-    }
-
-    &:not(.sidebar--right) {
-      @apply left-0;
-    }
-
-    .sidebar__bottom {
-      @apply w-full bg-[color:var(--p-sidebar-bg)] shrink-0 pt-2;
-      @apply dark:bg-[color:var(--p-sidebar-bg-dark)];
-    }
-
-    /**
-    * Right-align in fixed
-    */
-    &.sidebar--right {
-      @apply left-auto right-0;
-    }
-
-    /**
-    * Toggleable sidebar
-    */
-    &.sidebar--toggleable {
-      &:where(&&-all, &&-lg, &&-md, &&-sm) {
-        &:is(.sidebar--show) {
-          @apply left-0 transition-[left] ease-out delay-75;
-        }
-      }
-
-      &:where(&&-all, &&-lg, &&-md, &&-sm) {
-        @apply -left-[100%] transition-[left] ease-in delay-75;
-      }
-
-      &&-lg {
-        @apply lg:left-0;
-      }
-
-      &&-md {
-        @apply md:left-0;
-      }
-
-      &&-sm {
-        @apply sm:left-0;
-      }
-    }
-  }
-
-  /**
-  * Sticky sidebar
-  */
-  &&--sticky {
-    @apply sticky top-[var(--p-sidebar-sticky-top)] z-sticky;
-  }
-
-  /**
-  * Narrow sidebar
-  * is 60px width
-  */
-  &&--narrow {
-    @apply w-[var(--p-sidebar-size-narrow)];
-  }
-
-  /**
-  * Sidebar with tabs
-  * and lines variant
-  */
-  &&--tabs,
-  &&--lines {
-    @apply pr-0 py-2 border-r border-r-default;
-    @apply dark:border-r-dark-default;
-  }
-
-  &&--lines {
-    @apply px-0;
-  }
-}
-</style>

package/dist/components/sidebar/SidebarBrand.vue

@@ -1,108 +0,0 @@
-<template>
-  <div
-    ref="sidebarBrand"
-    :class="classNames"
-    data-testid="sidebar-brand"
-    class="sidebar__brand">
-    <nuxt-link
-      v-if="href"
-      :href="href"
-      data-testid="sidebar-brand-link">
-      <slot />
-    </nuxt-link>
-    <template v-else>
-      <slot />
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
-import type { RouteLocationRaw } from 'vue-router'
-
-const props = defineProps({
-  href: {
-    type   : [String, Object] as PropType<RouteLocationRaw>,
-    default: undefined,
-  },
-  sticky: {
-    type   : Boolean,
-    default: false,
-  },
-  fixed: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const classNames = computed(() => {
-  const result: string[] = ['']
-
-  if (props.sticky)
-    result.push('sidebar__brand--sticky')
-
-  if (props.fixed)
-    result.push('sidebar__brand--fixed')
-
-  return result
-})
-</script>
-
-<style lang="postcss">
-.sidebar {
-  &__brand {
-    --p-sidebar-brand-sticky-top: 0;
-
-    @apply block text-center mx-auto pb-4 font-semibold text-default;
-    @apply dark:text-dark-default;
-
-    a {
-      @apply no-underline cursor-pointer;
-
-      & > img {
-        @apply max-w-full h-auto;
-      }
-
-      .sidebar--wide & {
-        & > img {
-          @apply h-7 w-auto;
-        }
-      }
-    }
-
-    & > img {
-      @apply max-w-full h-auto;
-    }
-
-    &--fixed {
-      @apply fixed top-0 left-0;
-
-      .sidebar--right & {
-        @apply right-0 left-auto;
-      }
-    }
-
-    &--sticky {
-      @apply sticky top-[var(--p-sidebar-brand-sticky-top)];
-    }
-
-    .sidebar--wide & {
-      @apply px-3;
-
-      & > img {
-        @apply h-7 w-auto;
-      }
-    }
-
-    .sidebar--tabs &,
-    .sidebar--lines & {
-      @apply pr-2;
-    }
-
-    .sidebar--lines & {
-      @apply pl-2;
-    }
-  }
-}
-</style>

package/dist/components/sidebar/SidebarContent.vue

@@ -1,21 +0,0 @@
-<script>
-import {
-  defineComponent,
-  h
-} from "vue-demi";
-import { findAllChildren, toBoolean } from "../utils/vnode";
-export default defineComponent({
-  props: {
-    bottom: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props, { slots }) {
-    return () => {
-      const navs = props.bottom ? findAllChildren(slots.default(), "SidebarNav").filter((vnode) => toBoolean(vnode.props?.bottom)) : findAllChildren(slots.default(), "*").filter((vnode) => toBoolean(vnode.props?.bottom) !== true);
-      return navs.map((nav) => h(nav));
-    };
-  }
-});
-</script>

package/dist/components/sidebar/SidebarContent.vue.d.ts

@@ -1,16 +0,0 @@
-declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    bottom: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
-    [key: string]: any;
-}>[], {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    bottom: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    bottom: boolean;
-}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/sidebar/SidebarNav.vue

@@ -1,260 +0,0 @@
-<template>
-  <div
-    v-if="title || titleActionLabel || collapsible"
-    class="sidebar__title"
-    data-testid="sidebar-title"
-    :class="{
-      'sidebar__title__collapsible': (collapsible && type !== 'narrow'),
-      'sidebar__title--collapsed': !isExpand,
-    }"
-    v-bind="$attrs"
-    @click.prevent="toggleExpand">
-    <Caption
-      v-if="title"
-      class="sidebar__title__caption"
-      weight="bold"
-      transform="capitalize">
-      {{ title }}
-    </Caption>
-    <Text
-      v-if="titleActionLabel && titleActionUrl"
-      data-testid="sidebar-nav-action"
-      class="sidebar__title__action"
-      variant="caption"
-      :href="titleActionUrl">
-      {{ titleActionLabel }}
-    </Text>
-
-    <IconArrow
-      v-if="collapsible"
-      data-testid="sidebar-title-caret"
-      class="sidebar__title__caret" />
-  </div>
-  <Collapse
-    v-if="!bottom"
-    :model-value="isExpand">
-    <Nav
-      class="sidebar__nav"
-      :class="{ 'sidebar__nav--collapsed' : !isExpand }"
-      data-testid="sidebar-nav"
-      vertical
-      :title="title"
-      :title-action-label="titleActionLabel"
-      :title-action-url="titleActionUrl"
-      :variant="variant"
-      :condensed="condensed"
-      :align="align">
-      <slot />
-    </Nav>
-  </Collapse>
-  <template v-else>
-    <Nav
-      class="sidebar__nav sidebar__nav--bottom"
-      data-testid="sidebar-nav"
-      vertical
-      :title="title"
-      :variant="variant"
-      :condensed="condensed"
-      :align="align">
-      <slot />
-    </Nav>
-  </template>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import {
-  inject,
-  ref,
-} from 'vue-demi'
-import Nav from '../nav/Nav.vue'
-import Caption from '../caption/Caption.vue'
-import Text from '../text/Text.vue'
-import { SIDEBAR_SETTINGS } from '.'
-import Collapse from '../collapse/Collapse.vue'
-import IconArrow from '@privyid/persona-icon/vue/chevron-down/16.vue'
-import type { RouteLocationRaw } from 'vue-router'
-
-defineOptions({
-  name        : 'SidebarNav',
-  inheritAttrs: false,
-})
-
-const props = defineProps({
-  title: {
-    type   : String,
-    default: undefined,
-  },
-  titleActionLabel: {
-    type   : String,
-    default: undefined,
-  },
-  titleActionUrl: {
-    type   : [String, Object] as PropType<RouteLocationRaw>,
-    default: undefined,
-  },
-  bottom: {
-    type   : Boolean,
-    default: false,
-  },
-  condensed: {
-    type   : Boolean,
-    default: false,
-  },
-  collapsible: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const settings = inject(SIDEBAR_SETTINGS, undefined, true)
-const variant  = settings?.variant
-const align    = settings?.align
-const type     = settings?.type
-const isExpand = ref(true)
-
-function toggleExpand (): void {
-  if (props.collapsible)
-    isExpand.value = !isExpand.value
-}
-</script>
-
-<style lang="postcss">
-.sidebar {
-  &__nav {
-    &.nav--pills.nav--vertical {
-      @apply pl-0 pr-0;
-
-      .nav__link {
-        @apply pr-3;
-      }
-
-      .nav__item.nav__item--no-icon {
-        .nav__link__label {
-          @apply justify-start pl-8;
-        }
-
-        .nav__link {
-          @apply text-subtle hover:text-default;
-          @apply dark:text-dark-subtle dark:hover:text-dark-default;
-
-          &:is(.router-link-active, .router-link-exact-active) {
-            @apply bg-transparent text-default hover:cursor-default;
-            @apply dark:bg-transparent dark:text-dark-default;
-          }
-        }
-      }
-    }
-
-    .nav__title {
-      @apply hidden;
-    }
-
-    .nav__subitem &.nav {
-      @apply pt-0;
-    }
-  }
-
-  &&--narrow {
-    .nav__link {
-      @apply flex-col justify-center text-center text-tn;
-
-      &__label {
-        @apply ml-0 mt-3 justify-center break-all;
-      }
-    }
-
-    .nav--pills {
-      .nav__link {
-        &:is(.nav__link--icon) {
-          @apply p-0;
-
-          .nav__link__icon {
-            @apply rounded p-3 inline-block;
-          }
-
-          .nav__link__label {
-            @apply mt-0 px-1 pb-3;
-          }
-
-          &.nav__link--active {
-            @apply bg-transparent text-default;
-            @apply dark:bg-transparent dark:text-dark-default;
-
-            .nav__link__icon {
-              @apply bg-base;
-              @apply dark:bg-dark-base;
-            }
-          }
-        }
-
-        &:not(.nav__link--icon) {
-          .nav__link__icon {
-            @apply hidden;
-          }
-
-          .nav__link__label {
-            @apply mt-0;
-          }
-        }
-      }
-    }
-
-    .nav--tabs {
-      .nav__link {
-        @apply px-0;
-
-        &--active {
-          @apply bg-default;
-          @apply dark:bg-dark-default;
-        }
-
-        &__label {
-          @apply px-2;
-        }
-      }
-    }
-
-    .nav__title {
-      @apply hidden;
-    }
-  }
-
-  &__title {
-    @apply relative z-1 flex items-center -mb-9 px-3 mt-5 justify-end;
-
-    &__caption {
-      @apply grow;
-    }
-
-    &__action {
-      @apply shrink-0;
-    }
-
-    &__collapsible {
-      @apply cursor-pointer select-none;
-    }
-
-    &__caret {
-      @apply absolute right-2 rotate-180 origin-center ease-in-out duration-150;
-    }
-
-    &&--collapsed {
-      .sidebar__title__caret {
-        @apply rotate-0;
-      }
-    }
-
-    &:is(&__collapsible) {
-      a {
-        @apply mr-5;
-      }
-    }
-
-    .caption {
-      @apply text-subtle;
-      @apply dark:text-dark-subtle;
-    }
-  }
-}
-</style>

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

@@ -1,9 +0,0 @@
-import type { InjectionKey } from 'vue-demi';
-import type { StyleVariant, AlignVariant } from '../nav';
-export type TypeVariant = 'wide' | 'narrow';
-export interface SidebarSettings {
-    variant: StyleVariant;
-    align: AlignVariant;
-    type: TypeVariant;
-}
-export declare const SIDEBAR_SETTINGS: InjectionKey<SidebarSettings>;

package/dist/components/sidebar/index.mjs

@@ -1 +0,0 @@
-export const SIDEBAR_SETTINGS = Symbol("SidebarSettings");