@privyid/persona 1.2.1 → 1.2.2-dev.1

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

@@ -0,0 +1,99 @@
+import type { PropType, VNode } from 'vue';
+import type { TypeVariant } from '.';
+import type { StyleVariant, AlignVariant } from '../nav';
+import type { ToggleableVariant } from '../navbar';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        brand(): VNode[];
+        bottom(): VNode[];
+    }> & {
+        brand(): VNode[];
+        bottom(): VNode[];
+    };
+    refs: {
+        sidebar: HTMLElement;
+        sidebarMenus: HTMLDivElement;
+        bottom: HTMLDivElement;
+    };
+    rootEl: HTMLElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    align: {
+        type: PropType<AlignVariant>;
+        default: string;
+    };
+    type: {
+        type: PropType<TypeVariant>;
+        default: string;
+    };
+    fixed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    toggleable: {
+        type: PropType<ToggleableVariant>;
+        default: undefined;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    align: {
+        type: PropType<AlignVariant>;
+        default: string;
+    };
+    type: {
+        type: PropType<TypeVariant>;
+        default: string;
+    };
+    fixed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    toggleable: {
+        type: PropType<ToggleableVariant>;
+        default: undefined;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
+}>, {
+    type: TypeVariant;
+    fixed: boolean;
+    modelValue: boolean;
+    toggleable: ToggleableVariant;
+    variant: StyleVariant;
+    align: AlignVariant;
+    sticky: boolean;
+}, {}, {}, {}, 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/sidebar/SidebarBrand.vue

@@ -0,0 +1,101 @@
+<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 setup>
+import { computed } from "vue";
+const props = defineProps({
+  href: {
+    type: [String, Object],
+    default: void 0
+  },
+  sticky: {
+    type: Boolean,
+    default: false
+  },
+  fixed: {
+    type: Boolean,
+    default: false
+  }
+});
+const classNames = computed(() => {
+  const result = [""];
+  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/SidebarBrand.vue.d.ts

@@ -0,0 +1,52 @@
+import type { PropType } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {
+        sidebarBrand: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    href: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fixed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    href: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    sticky: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fixed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    fixed: boolean;
+    href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+    sticky: boolean;
+}, {}, {}, {}, 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/sidebar/SidebarContent.vue

@@ -0,0 +1,21 @@
+<script>
+import {
+  defineComponent,
+  h
+} from "vue";
+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

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

package/dist/components/sidebar/SidebarNav.vue

@@ -0,0 +1,254 @@
+<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 setup>
+import {
+  inject,
+  ref
+} from "vue";
+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";
+defineOptions({
+  name: "SidebarNav",
+  inheritAttrs: false
+});
+const props = defineProps({
+  title: {
+    type: String,
+    default: void 0
+  },
+  titleActionLabel: {
+    type: String,
+    default: void 0
+  },
+  titleActionUrl: {
+    type: [String, Object],
+    default: void 0
+  },
+  bottom: {
+    type: Boolean,
+    default: false
+  },
+  condensed: {
+    type: Boolean,
+    default: false
+  },
+  collapsible: {
+    type: Boolean,
+    default: false
+  }
+});
+const settings = inject(SIDEBAR_SETTINGS, void 0, true);
+const variant = settings?.variant;
+const align = settings?.align;
+const type = settings?.type;
+const isExpand = ref(true);
+function toggleExpand() {
+  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/SidebarNav.vue.d.ts

@@ -0,0 +1,77 @@
+import type { PropType } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    titleActionLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    titleActionUrl: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    bottom: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    condensed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    titleActionLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    titleActionUrl: {
+        type: PropType<RouteLocationRaw>;
+        default: undefined;
+    };
+    bottom: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    condensed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    bottom: boolean;
+    titleActionLabel: string;
+    titleActionUrl: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+    condensed: boolean;
+    collapsible: boolean;
+}, {}, {}, {}, 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/sidebar/index.d.ts

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

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