@privyid/persona 1.2.0 → 1.2.1

package/dist/components/sidebar/Sidebar.vue

@@ -1,225 +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 setup>
-import {
-  computed,
-  provide,
-  ref
-} from "vue-demi";
-import { SIDEBAR_SETTINGS } from ".";
-import { useVModel } from "../input";
-import SidebarContent from "./SidebarContent.vue";
-const props = defineProps({
-  variant: {
-    type: String,
-    default: "pills"
-  },
-  align: {
-    type: String,
-    default: "left"
-  },
-  type: {
-    type: String,
-    default: "wide"
-  },
-  fixed: {
-    type: Boolean,
-    default: false
-  },
-  sticky: {
-    type: Boolean,
-    default: false
-  },
-  toggleable: {
-    type: String,
-    default: void 0
-  },
-  modelValue: {
-    type: Boolean,
-    default: true
-  }
-});
-defineOptions({
-  models: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
-});
-defineEmits(["update:modelValue"]);
-defineSlots();
-const model = useVModel(props);
-const bottom = ref();
-const classNames = computed(() => {
-  const result = [""];
-  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/Sidebar.vue.d.ts

@@ -1,99 +0,0 @@
-import type { PropType, VNode } from 'vue-demi';
-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-demi").DefineComponent<import("vue-demi").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-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: boolean) => void;
-}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").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-demi").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.spec.d.ts

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

package/dist/components/sidebar/SidebarBrand.spec.mjs

@@ -1,56 +0,0 @@
-import { render } from "@testing-library/vue";
-import Sidebar from "./Sidebar.vue";
-import SidebarBrand from "./SidebarBrand.vue";
-it("should rendered properly without any props", () => {
-  const screen = render({
-    components: { Sidebar, SidebarBrand },
-    template: `
-      <Sidebar>
-        <SidebarBrand>Brand</SidebarBrand>
-      </Sidebar>
-    `
-  });
-  const sidebarBrand = screen.queryByTestId("sidebar-brand");
-  const text = screen.queryByText("Brand");
-  expect(sidebarBrand).toBeInTheDocument();
-  expect(sidebarBrand).toHaveClass("sidebar__brand");
-  expect(text).toBeInTheDocument();
-});
-it("should have add target url by setting the `href` prop", () => {
-  const screen = render({
-    components: { Sidebar, SidebarBrand },
-    template: `
-      <Sidebar>
-        <SidebarBrand href="https://privy.id">Brand</SidebarBrand>
-      </Sidebar>
-    `
-  });
-  const sidebarBrand = screen.queryByTestId("sidebar-brand");
-  const sidebarLink = screen.queryByTestId("sidebar-brand-link");
-  expect(sidebarBrand).toBeInTheDocument();
-  expect(sidebarLink).toHaveAttribute("href", "https://privy.id");
-});
-it("should have sticky position by setting the `sticky` prop", () => {
-  const screen = render({
-    components: { Sidebar, SidebarBrand },
-    template: `
-      <Sidebar>
-        <SidebarBrand sticky />
-      </Sidebar>
-    `
-  });
-  const sidebarBrand = screen.queryByTestId("sidebar-brand");
-  expect(sidebarBrand).toHaveClass("sidebar__brand--sticky");
-});
-it("should have fixed position by setting the `fixed` prop", () => {
-  const screen = render({
-    components: { Sidebar, SidebarBrand },
-    template: `
-      <Sidebar>
-        <SidebarBrand fixed />
-      </Sidebar>
-    `
-  });
-  const sidebarBrand = screen.queryByTestId("sidebar-brand");
-  expect(sidebarBrand).toHaveClass("sidebar__brand--fixed");
-});

package/dist/components/sidebar/SidebarBrand.vue

@@ -1,101 +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 setup>
-import { computed } from "vue-demi";
-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

@@ -1,52 +0,0 @@
-import type { PropType } from 'vue-demi';
-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-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    href: {
-        type: PropType<RouteLocationRaw>;
-        default: undefined;
-    };
-    sticky: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    fixed: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").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-demi").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

@@ -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.spec.d.ts

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

package/dist/components/sidebar/SidebarNav.spec.mjs

@@ -1,95 +0,0 @@
-import { render, fireEvent } from "@testing-library/vue";
-import { delay } from "nanodelay";
-import Sidebar from "./Sidebar.vue";
-import SidebarNav from "./SidebarNav.vue";
-it("should rendered properly without any props", () => {
-  const screen = render({
-    components: { Sidebar, SidebarNav },
-    template: `
-      <Sidebar>
-        <SidebarNav></SidebarNav>
-      </Sidebar>
-    `
-  });
-  const sidebarNav = screen.queryByTestId("sidebar-nav");
-  expect(sidebarNav).toBeInTheDocument();
-  expect(sidebarNav).toHaveClass("sidebar__nav", "nav--vertical");
-});
-it("should be able to add title of grouping navigation via prop `title`", () => {
-  const screen = render({
-    components: { Sidebar, SidebarNav },
-    template: `
-      <Sidebar>
-        <SidebarNav title="Menus"></SidebarNav>
-      </Sidebar>
-    `
-  });
-  const sidebarNav = screen.queryByTestId("sidebar-nav");
-  expect(sidebarNav).toBeInTheDocument();
-  expect(sidebarNav).toHaveClass("nav--has-title");
-});
-it("should be able to place group of navigation in the bottom via prop `bottom`", () => {
-  const screen = render({
-    components: { Sidebar, SidebarNav },
-    template: `
-      <Sidebar>
-        <SidebarNav title="Menus" bottom></SidebarNav>
-      </Sidebar>
-    `
-  });
-  const sidebarNav = screen.queryByTestId("sidebar-nav");
-  expect(sidebarNav).toBeInTheDocument();
-  expect(sidebarNav).toHaveClass("sidebar__nav--bottom");
-});
-it("should be able to make condensed navigation via prop `condensed`", () => {
-  const screen = render({
-    components: { Sidebar, SidebarNav },
-    template: `
-      <Sidebar>
-        <SidebarNav condensed></SidebarNav>
-      </Sidebar>
-    `
-  });
-  const sidebarNav = screen.queryByTestId("sidebar-nav");
-  expect(sidebarNav).toBeInTheDocument();
-  expect(sidebarNav).toHaveClass("nav--condensed");
-});
-it("should be able to set sidebar section-title via props `title-action-label` and `title-action-url`", () => {
-  const screen = render({
-    components: { Sidebar, SidebarNav },
-    template: `
-      <Sidebar>
-        <SidebarNav title="Title" title-action-label="Show more" title-action-url="/document/category" />
-      </Sidebar>
-    `
-  });
-  const sidebarNav = screen.queryByTestId("sidebar-nav");
-  const sidebarTitle = screen.queryByTestId("sidebar-nav-action");
-  expect(sidebarNav).toBeInTheDocument();
-  expect(sidebarTitle).toBeInTheDocument();
-  expect(sidebarTitle).toHaveTextContent("Show more");
-  expect(sidebarTitle).toHaveAttribute("href", "/document/category");
-});
-it("should be able to set collapsible grouped menu via props `collapsible`", async () => {
-  const screen = render({
-    components: { Sidebar, SidebarNav },
-    template: `
-      <Sidebar>
-        <SidebarNav title="Title" collapsible />
-      </Sidebar>
-    `
-  });
-  const sidebarNav = screen.queryByTestId("sidebar-nav");
-  const sidebarTitle = screen.queryByTestId("sidebar-title");
-  const caret = screen.queryByTestId("sidebar-title-caret");
-  expect(sidebarTitle).toBeInTheDocument();
-  expect(sidebarTitle).toHaveClass("sidebar__title__collapsible");
-  expect(sidebarTitle).not.toHaveClass("sidebar__title--collapsed");
-  expect(caret).toBeInTheDocument();
-  expect(sidebarNav).toBeInTheDocument();
-  expect(sidebarNav).not.toHaveClass("sidebar__nav--collapsed");
-  await fireEvent.click(sidebarTitle);
-  await delay(0);
-  expect(sidebarTitle).toHaveClass("sidebar__title--collapsed");
-  expect(sidebarNav).toHaveClass("sidebar__nav--collapsed");
-});