@privyid/persona 1.2.0 → 1.2.1

package/dist/components/navbar/Navbar.spec.mjs

@@ -1,74 +0,0 @@
-import { render } from "@testing-library/vue";
-import Navbar from "./Navbar.vue";
-import NavbarBrand from "./NavbarBrand.vue";
-import NavbarNav from "./NavbarNav.vue";
-import NavItem from "../nav/NavItem.vue";
-it("should rendered properly without any props", () => {
-  const screen = render({
-    components: { Navbar },
-    template: `
-      <Navbar>
-      </Navbar>
-    `
-  });
-  const navbar = screen.queryByTestId("navbar");
-  expect(navbar).toBeInTheDocument();
-  expect(navbar).toHaveClass("navbar");
-});
-it("should be able to change variant via prop `variant`", () => {
-  const screen = render({
-    components: { Navbar },
-    template: `
-      <Navbar variant="pills">
-      </Navbar>
-    `
-  });
-  const navbar = screen.queryByTestId("navbar");
-  expect(navbar).toBeInTheDocument();
-  expect(navbar).toHaveClass("navbar--pills");
-});
-it("should be able to make navbar fixed via prop `fixed`", () => {
-  const screen = render({
-    components: {
-      Navbar,
-      NavbarBrand,
-      NavbarNav,
-      NavItem
-    },
-    template: `
-      <Navbar fixed>
-        <NavbarBrand>
-          <img src="../../public/assets/images/logo-privy.svg" />
-        </NavbarBrand>
-        <NavbarNav>
-          <NavItem>Label</NavItem>
-        </NavbarNav>
-      </Navbar>
-    `
-  });
-  const navbar = screen.queryByTestId("navbar");
-  expect(navbar).toBeInTheDocument();
-  expect(navbar).toHaveClass("navbar", "navbar--fixed");
-});
-it("should be able to make navbar sticky via prop `sticky`", () => {
-  const screen = render({
-    components: { Navbar },
-    template: "<Navbar sticky />"
-  });
-  const navbar = screen.queryByTestId("navbar");
-  expect(navbar).toBeInTheDocument();
-  expect(navbar).toHaveClass("navbar", "navbar--sticky");
-});
-it("should be able to make content automatically expand via prop `toggleable`", () => {
-  const screen = render({
-    components: { Navbar },
-    template: `
-      <Navbar toggleable="lg">
-      </Navbar>
-    `
-  });
-  const navbar = screen.queryByTestId("navbar");
-  expect(navbar).toBeInTheDocument();
-  expect(navbar).toHaveClass("navbar--expand-lg");
-  expect(navbar).not.toHaveClass("navbar--expand-md");
-});

package/dist/components/navbar/Navbar.vue

@@ -1,270 +0,0 @@
-<template>
-  <nav
-    ref="navbar"
-    data-testid="navbar"
-    class="navbar"
-    :class="[{ 'navbar--shadow': y > height }, classNames]">
-    <slot />
-  </nav>
-</template>
-
-<script setup>
-import {
-  computed,
-  provide,
-  ref,
-  toRef,
-  watchEffect
-} from "vue-demi";
-import {
-  useElementBounding,
-  useWindowScroll
-} from "@vueuse/core";
-import { NAVBAR_SETTINGS } from ".";
-const props = defineProps({
-  variant: {
-    type: String,
-    default: "pills"
-  },
-  toggleable: {
-    type: String,
-    default: void 0
-  },
-  fixed: {
-    type: Boolean,
-    default: false
-  },
-  sticky: {
-    type: Boolean,
-    default: false
-  },
-  condensed: {
-    type: Boolean,
-    default: false
-  }
-});
-const { y } = useWindowScroll();
-const navbar = ref();
-const { height } = useElementBounding(navbar);
-const classNames = computed(() => {
-  const result = [""];
-  if (props.fixed)
-    result.push("navbar--fixed");
-  if (props.sticky)
-    result.push("navbar--sticky");
-  if (props.variant)
-    result.push(`navbar--${props.variant}`);
-  if (props.toggleable)
-    result.push(`navbar--expand-${props.toggleable}`);
-  return result;
-});
-watchEffect((onCleanup) => {
-  if (typeof document !== "undefined" && document.body && props.fixed) {
-    document.body.style.setProperty("padding-top", `${height.value}px`);
-    document.body.style.setProperty("--p-navbar-height", `${height.value}px`);
-    onCleanup(() => {
-      document.body.style.removeProperty("padding-top");
-      document.body.style.removeProperty("--p-navbar-height");
-    });
-  }
-});
-provide(NAVBAR_SETTINGS, {
-  variant: toRef(props, "variant"),
-  toggleable: toRef(props, "toggleable"),
-  condensed: toRef(props, "condensed")
-});
-</script>
-
-<style lang="postcss">
-.navbar {
-  --p-navbar-z-index: theme(zIndex.fixed);
-  --p-navbar-sticky-top: theme(spacing.0);
-  --p-navbar-fixed-top: theme(spacing.0);
-  --p-navbar-collapse-max-height: 20rem; /** 320px */
-  --p-navbar-padding-x: theme(spacing.3);
-  --p-navbar-padding-left: var(--p-navbar-padding-x);
-  --p-navbar-padding-right: var(--p-navbar-padding-x);
-  --p-navbar-padding-y: theme(spacing.3);
-  --p-navbar-padding-top: var(--p-navbar-padding-y);
-  --p-navbar-padding-bottom: var(--p-navbar-padding-y);
-  --p-navbar-bg: theme(backgroundColor.default.DEFAULT);
-  --p-navbar-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
-  --p-navbar-shadow: none;
-  --p-navbar-shadow-on-scroll: theme(boxShadow.lg);
-
-  @apply bg-[color:var(--p-navbar-bg)] relative pl-[var(--p-navbar-padding-left)] pr-[var(--p-navbar-padding-right)] pt-[var(--p-navbar-padding-top)] pb-[var(--p-navbar-padding-bottom)] flex items-center flex-wrap transition-shadow duration-150 ease-in-out;
-  @apply dark:bg-[color:var(--p-navbar-bg-dark)];
-  box-shadow: var(--p-navbar-shadow);
-
-  &&--fixed {
-    @apply fixed left-0 top-[var(--p-navbar-fixed-top)] w-full z-[var(--p-navbar-z-index)] transition-all;
-  }
-
-  &&--sticky {
-    @apply sticky top-[var(--p-navbar-sticky-top)] z-sticky;
-  }
-
-  &&--shadow {
-    @apply transition-shadow duration-150 ease-in-out;
-    box-shadow: var(--p-navbar-shadow-on-scroll);
-  }
-
-  &&--expand {
-    :is(&-all, &-lg, &-md, &-sm) {
-      @apply justify-between;
-
-      .navbar__nav {
-        @apply flex-col;
-      }
-    }
-
-    &-all {
-      & > .collapse {
-        @apply visible;
-      }
-    }
-
-    &-lg {
-      .navbar__nav {
-        @apply lg:flex-row;
-      }
-
-      & > .collapse {
-        @apply lg:visible;
-      }
-
-      .navbar--collapse {
-        @apply lg:flex lg:basis-auto;
-      }
-    }
-
-    &-md {
-      .navbar__nav {
-        @apply md:flex-row;
-      }
-
-      & > .collapse {
-        @apply md:visible;
-      }
-
-      .navbar--collapse {
-        @apply md:flex md:basis-auto;
-      }
-    }
-
-    &-sm {
-      .navbar__nav {
-        @apply sm:flex-row;
-      }
-
-      & > .collapse {
-        @apply sm:visible;
-      }
-
-      .navbar--collapse {
-        @apply sm:flex sm:basis-auto;
-      }
-    }
-  }
-
-  &--collapse {
-    @apply basis-full grow items-center max-h-[var(--p-navbar-collapse-max-height)] overflow-y-auto;
-
-    &.collapse--show {
-      @apply mt-3;
-
-      .nav__item--dropdown {
-        @apply ml-0;
-
-        .dropdown,
-        .btn {
-          @apply flex w-full;
-        }
-
-        .dropdown {
-          @apply flex-col;
-
-          &__menu {
-            @apply static shadow-none border-0 bg-ground rounded-t-none;
-            @apply dark:bg-dark-ground;
-
-            &:where(.dropdown__menu--sm, .dropdown__menu--md, .dropdown__menu--lg) {
-              @apply w-full;
-            }
-
-            &__container {
-              .dropdown__item {
-                @apply first:rounded-t-none;
-              }
-            }
-          }
-
-          &.dropdown--open {
-            .dropdown__activator.btn.btn--md {
-              @apply rounded-b-none bg-ground;
-              @apply dark:bg-dark-ground;
-            }
-          }
-        }
-
-        &-icon {
-          .dropdown__menu__container {
-            .dropdown__item {
-              @apply px-11;
-            }
-          }
-        }
-
-        .btn {
-          @apply justify-start;
-
-          .dropdown__caret {
-            @apply ml-auto;
-          }
-        }
-      }
-
-      :where(.nav__item, .nav__text, .nav__form) {
-        @apply w-full;
-      }
-    }
-  }
-
-  &&--lines {
-    .navbar--collapse {
-
-      &.collapse--show {
-
-        .nav__item--dropdown {
-
-          .dropdown {
-            &__menu {
-              @apply rounded mt-2;
-
-              &__container {
-                .dropdown__item {
-                  @apply first:rounded-t;
-                }
-              }
-            }
-
-            &.dropdown--open {
-              .dropdown__activator.btn.btn--md {
-                @apply rounded-b-none bg-transparent;
-              }
-            }
-          }
-
-          &-icon {
-            .dropdown__menu__container {
-              .dropdown__item {
-                @apply px-3;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>

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

@@ -1,70 +0,0 @@
-import type { PropType } from 'vue-demi';
-import type { StyleVariant } from '../nav';
-import type { ToggleableVariant } from '.';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        navbar: HTMLElement;
-    };
-    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;
-    };
-    toggleable: {
-        type: PropType<ToggleableVariant | undefined>;
-        default: undefined;
-    };
-    fixed: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    sticky: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    condensed: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    variant: {
-        type: PropType<StyleVariant>;
-        default: string;
-    };
-    toggleable: {
-        type: PropType<ToggleableVariant | undefined>;
-        default: undefined;
-    };
-    fixed: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    sticky: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    condensed: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    fixed: boolean;
-    toggleable: ToggleableVariant | undefined;
-    variant: StyleVariant;
-    condensed: boolean;
-    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/navbar/NavbarBrand.spec.d.ts

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

package/dist/components/navbar/NavbarBrand.spec.mjs

@@ -1,31 +0,0 @@
-import { render } from "@testing-library/vue";
-import Navbar from "./Navbar.vue";
-import NavbarBrand from "./NavbarBrand.vue";
-it("should rendered properly without any props", () => {
-  const screen = render({
-    components: { Navbar, NavbarBrand },
-    template: `
-      <Navbar>
-        <NavbarBrand>Brand</NavbarBrand>
-      </Navbar>
-    `
-  });
-  const navbarBrand = screen.queryByTestId("navbar-brand");
-  const text = screen.queryByText("Brand");
-  expect(navbarBrand).toBeInTheDocument();
-  expect(navbarBrand).toHaveClass("navbar__brand");
-  expect(text).toBeInTheDocument();
-});
-it("should have add target url by setting the `href` prop", () => {
-  const screen = render({
-    components: { Navbar, NavbarBrand },
-    template: `
-      <Navbar>
-        <NavbarBrand href="https://privy.id">Brand</NavbarBrand>
-      </Navbar>
-    `
-  });
-  const navbarBrand = screen.queryByTestId("navbar-brand");
-  expect(navbarBrand).toBeInTheDocument();
-  expect(navbarBrand).toHaveAttribute("href", "https://privy.id");
-});

package/dist/components/navbar/NavbarBrand.vue

@@ -1,30 +0,0 @@
-<template>
-  <a
-    :href="href"
-    data-testid="navbar-brand"
-    class="navbar__brand">
-    <slot />
-  </a>
-</template>
-
-<script setup>
-defineProps({
-  href: {
-    type: String,
-    default: void 0
-  }
-});
-</script>
-
-<style lang="postcss">
-  a.navbar {
-    &__brand {
-      @apply inline-block mr-4 text-xl py-1 font-medium text-default no-underline cursor-pointer hover:no-underline;
-      @apply dark:text-dark-default;
-
-      img {
-        @apply h-7 w-auto inline-block;
-      }
-    }
-  }
-</style>

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

@@ -1,29 +0,0 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLAnchorElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    href: {
-        type: StringConstructor;
-        default: undefined;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    href: {
-        type: StringConstructor;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    href: string;
-}, {}, {}, {}, 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/NavbarNav.spec.d.ts

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

package/dist/components/navbar/NavbarNav.spec.mjs

@@ -1,55 +0,0 @@
-import { render } from "@testing-library/vue";
-import Navbar from "./Navbar.vue";
-import NavbarNav from "./NavbarNav.vue";
-it("should rendered properly without any props", () => {
-  const screen = render({
-    components: { Navbar, NavbarNav },
-    template: `
-      <Navbar>
-        <NavbarNav></NavbarNav>
-      </Navbar>
-    `
-  });
-  const navbarNav = screen.queryByTestId("navbar-nav");
-  expect(navbarNav).toBeInTheDocument();
-  expect(navbarNav).toHaveClass("navbar__nav");
-});
-it("should be able to change alignment via props `align`", () => {
-  const screen = render({
-    components: { Navbar, NavbarNav },
-    template: `
-      <Navbar>
-        <NavbarNav align="left"></NavbarNav>
-      </Navbar>
-    `
-  });
-  const navbarNav = screen.queryByTestId("navbar-nav");
-  expect(navbarNav).toBeInTheDocument();
-  expect(navbarNav).toHaveClass("nav--align-left");
-});
-it("should be able to change variant via prop `variant`", () => {
-  const screen = render({
-    components: { Navbar, NavbarNav },
-    template: `
-      <Navbar>
-        <NavbarNav variant="lines"></NavbarNav>
-      </Navbar>
-    `
-  });
-  const navbarNav = screen.queryByTestId("navbar-nav");
-  expect(navbarNav).toBeInTheDocument();
-  expect(navbarNav).toHaveClass("nav--lines");
-});
-it("should be able to make condensed navigation via prop `condensed`", () => {
-  const screen = render({
-    components: { Navbar, NavbarNav },
-    template: `
-      <Navbar condensed>
-        <NavbarNav></NavbarNav>
-      </Navbar>
-    `
-  });
-  const navbarNav = screen.queryByTestId("navbar-nav");
-  expect(navbarNav).toBeInTheDocument();
-  expect(navbarNav).toHaveClass("nav--condensed");
-});

package/dist/components/navbar/NavbarNav.vue

@@ -1,110 +0,0 @@
-<template>
-  <Nav
-    :align="align"
-    :variant="variant"
-    :condensed="condensed"
-    class="navbar__nav"
-    data-testid="navbar-nav">
-    <slot />
-  </Nav>
-</template>
-
-<script setup>
-import { inject } from "vue-demi";
-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>