@privyid/persona 1.2.1 → 1.2.2-dev.2

package/dist/components/nav/NavSubItem.vue

@@ -0,0 +1,178 @@
+<template>
+  <li
+    ref="root"
+    data-testid="nav-subitem"
+    class="nav__subitem"
+    :class="classNames">
+    <div
+      class="nav__subitem__parent"
+      data-testid="nav-subitem-parent"
+      @click.prevent="toggleExpand">
+      <span
+        v-if="$slots.icon"
+        class="nav__link__icon">
+        <slot name="icon" />
+      </span>
+      <span class="nav__link__label">
+        {{ text }}
+      </span>
+      <IconArrow
+        v-if="collapsible"
+        class="nav__link__caret" />
+    </div>
+    <Collapse :model-value="isExpand">
+      <slot />
+    </Collapse>
+  </li>
+</template>
+
+<script setup>
+import {
+  computed,
+  inject,
+  ref,
+  onMounted
+} from "vue";
+import { SIDEBAR_SETTINGS } from "../sidebar";
+import IconArrow from "@privyid/persona-icon/vue/chevron-down/16.vue";
+import Collapse from "../collapse/Collapse.vue";
+const props = defineProps({
+  text: {
+    type: String,
+    default: void 0
+  },
+  collapsible: {
+    type: Boolean,
+    default: false
+  }
+});
+const slots = defineSlots();
+const settings = inject(SIDEBAR_SETTINGS, void 0, true);
+const root = ref();
+const collapsible = computed(() => props.collapsible && settings?.type !== "narrow");
+const isExpand = ref(!props.collapsible);
+const classNames = computed(() => {
+  const result = [];
+  if (slots.icon)
+    result.push("nav__subitem--icon");
+  if (collapsible.value) {
+    result.push("nav__subitem--collapsible");
+    if (isExpand.value)
+      result.push("nav__subitem--expanded");
+    else
+      result.push("nav__subitem--collapsed");
+  }
+  return result;
+});
+function toggleExpand() {
+  if (collapsible.value)
+    isExpand.value = !isExpand.value;
+}
+onMounted(() => {
+  if (collapsible.value && root.value) {
+    isExpand.value = root.value.querySelectorAll(".router-link-active:not(.nav__link--exact),.router-link-exact-active.nav__link--exact").length > 0;
+  }
+});
+</script>
+
+<style lang="postcss">
+.nav {
+  &__subitem {
+    /**
+    * there is some tricky here.
+    * default text is set with muted color
+    * (used for disabled state)
+    * in the future, when all sub-item
+    * is disabled, parent menu
+    * will disabled too
+    */
+    @apply block text-base text-muted;
+    @apply dark:text-dark-muted;
+
+    &&--collapsible {
+      /**
+      * when menu is collapsible,
+      * parent menu is set to
+      * active state
+      */
+      .nav__subitem__parent {
+        @apply cursor-pointer text-default relative;
+        @apply dark:text-dark-default;
+      }
+
+      .nav__link__caret {
+        @apply absolute right-3 rotate-180 origin-center ease-in-out duration-150;
+      }
+
+      &.nav__subitem--collapsed {
+        .nav__link__caret {
+          @apply rotate-0;
+        }
+      }
+    }
+
+    &__parent {
+      @apply flex flex-row items-center p-3 border border-transparent cursor-default rounded;
+    }
+
+    .nav {
+      @apply pt-3 select-none;
+    }
+
+    &&--icon {
+      .nav__link__icon {
+        @apply grow-0;
+
+        img {
+          @apply w-5 h-5;
+        }
+      }
+
+      .nav__link__label {
+        @apply shrink pl-3 w-full select-none;
+
+        .badge {
+          @apply ml-auto;
+        }
+      }
+    }
+
+    /**
+    * when all of sub-item has no
+    * disabled state, set text color
+    * of parent with default color
+    * (used for active or hover state)
+    */
+    &:has(ul > li:not(.nav__item--disabled)) {
+      .nav__subitem__parent {
+        @apply text-default;
+        @apply dark:text-dark-default;
+      }
+    }
+
+    /**
+    * when menu is set to collapsible
+    * and its collapsed, then styling parent
+    * with normal state
+    */
+    &:is(&--collapsible&--collapsed):has(ul > li:not(.nav__item--disabled)) {
+      .nav__subitem__parent {
+        @apply text-subtle hover:text-default;
+        @apply dark:text-dark-subtle hover:dark:text-dark-default;
+      }
+    }
+
+    .sidebar__nav .nav__link__label {
+      @apply pl-8;
+    }
+  }
+
+  &&--condensed {
+    .nav__subitem {
+      &__parent {
+        @apply py-1;
+      }
+    }
+  }
+}
+</style>

package/dist/components/nav/NavSubItem.vue.d.ts

@@ -0,0 +1,45 @@
+import type { VNode } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        icon(): VNode[];
+        default(): VNode[];
+    }> & {
+        icon(): VNode[];
+        default(): VNode[];
+    };
+    refs: {
+        root: HTMLLIElement;
+    };
+    rootEl: HTMLLIElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    text: string;
+    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/nav/NavText.vue

@@ -0,0 +1,19 @@
+<template>
+  <li
+    class="nav__text"
+    data-testid="nav-text">
+    <slot />
+  </li>
+</template>
+
+<style lang="postcss">
+.nav {
+  &__text {
+    @apply inline-block ml-3;
+
+    .navbar--collapse.collapse--show & {
+      @apply ml-0;
+    }
+  }
+}
+</style>

package/dist/components/nav/NavText.vue.d.ts

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

@@ -0,0 +1,2 @@
+export type StyleVariant = 'tabs' | 'pills' | 'lines';
+export type AlignVariant = 'left' | 'right' | 'center';

package/dist/components/navbar/Navbar.vue

@@ -0,0 +1,270 @@
+<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";
+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

@@ -0,0 +1,70 @@
+import type { PropType } from 'vue';
+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").DefineComponent<import("vue").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").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").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").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.vue

@@ -0,0 +1,30 @@
+<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

@@ -0,0 +1,29 @@
+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;
+    };
+};