@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/nav/NavItemDropdown.vue

@@ -1,120 +0,0 @@
-<template>
-  <li
-    data-testid="nav-item-dropdown"
-    class="nav__item nav__item--dropdown">
-    <Dropdown
-      v-model="model"
-      :text="text"
-      :icon="icon"
-      :variant="variant"
-      :size="size"
-      :placement="placement"
-      :no-caret="noCaret"
-      :divider="divider"
-      :menu-class="menuClass"
-      :menu-size="menuSize">
-      <template #button-content>
-        <slot name="button-content">
-          {{ text }}
-        </slot>
-      </template>
-      <slot />
-    </Dropdown>
-  </li>
-</template>
-
-<script lang="ts" setup>
-import type { PropType, VNode } from 'vue-demi'
-import Dropdown from '../dropdown/Dropdown.vue'
-import type { Placement } from '@floating-ui/core'
-import type {
-  SizeVariant,
-  StyleVariant,
-} from '../button'
-import { useVModel } from '../input'
-import type { MenuSizeVariant } from '../dropdown'
-
-const props = defineProps({
-  modelValue: {
-    type   : Boolean,
-    default: false,
-  },
-  text: {
-    type   : String,
-    default: '',
-  },
-  icon: {
-    type   : Boolean,
-    default: false,
-  },
-  size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
-  },
-  variant: {
-    type   : String as PropType<StyleVariant>,
-    default: 'ghost',
-  },
-  noCaret: {
-    type   : Boolean,
-    default: false,
-  },
-  placement: {
-    type   : String as PropType<Placement>,
-    default: 'bottom-end',
-  },
-  menuClass: {
-    type: [
-      String,
-      Array,
-      Object,
-    ],
-    default: undefined,
-  },
-  menuSize: {
-    type   : String as PropType<MenuSizeVariant>,
-    default: 'sm',
-  },
-  divider: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-defineEmits<{
-  'update:modelValue': [boolean],
-}>()
-
-const model = useVModel(props)
-
-defineSlots<{
-  'default'(): VNode[],
-  'button-content'(): VNode[],
-}>()
-</script>
-
-<style lang="postcss">
-.nav {
-  &__item {
-    &--dropdown {
-      @apply ml-auto relative;
-
-      .dropdown {
-        &__menu {
-          .dropdown__item {
-            @apply px-3;
-          }
-        }
-      }
-    }
-  }
-
-  &--fill {
-    .nav__item {
-      &--dropdown {
-        @apply text-right;
-      }
-    }
-  }
-}
-</style>

package/dist/components/nav/NavSubItem.vue

@@ -1,194 +0,0 @@
-<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 lang="ts" setup>
-import type { VNode } from 'vue-demi'
-import {
-  computed,
-  inject,
-  ref,
-  onMounted,
-} from 'vue-demi'
-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: undefined,
-  },
-  collapsible: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const slots = defineSlots<{
-  'icon'(): VNode[],
-  'default'(): VNode[],
-}>()
-
-const settings    = inject(SIDEBAR_SETTINGS, undefined, true)
-const root        = ref<HTMLLIElement>()
-const collapsible = computed(() => props.collapsible && settings?.type !== 'narrow')
-const isExpand    = ref(!props.collapsible)
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  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/NavText.vue

@@ -1,19 +0,0 @@
-<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/index.d.ts

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

package/dist/components/navbar/Navbar.vue

@@ -1,284 +0,0 @@
-<template>
-  <nav
-    ref="navbar"
-    data-testid="navbar"
-    class="navbar"
-    :class="[{ 'navbar--shadow' : (y > height)}, classNames]">
-    <slot />
-  </nav>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import {
-  computed,
-  provide,
-  ref,
-  toRef,
-  watchEffect,
-} from 'vue-demi'
-import type { StyleVariant } from '../nav'
-import {
-  useElementBounding,
-  useWindowScroll,
-} from '@vueuse/core'
-import type { ToggleableVariant } from '.'
-import { NAVBAR_SETTINGS } from '.'
-
-const props = defineProps({
-  variant: {
-    type   : String as PropType<StyleVariant>,
-    default: 'pills',
-  },
-  toggleable: {
-    type   : String as PropType<ToggleableVariant | undefined>,
-    default: undefined,
-  },
-  fixed: {
-    type   : Boolean,
-    default: false,
-  },
-  sticky: {
-    type   : Boolean,
-    default: false,
-  },
-  condensed: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const { y }      = useWindowScroll()
-const navbar     = ref<HTMLElement>()
-const { height } = useElementBounding(navbar)
-
-const classNames = computed(() => {
-  const result: string[] = ['']
-
-  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/NavbarBrand.vue

@@ -1,31 +0,0 @@
-<template>
-  <a
-    :href="href"
-    data-testid="navbar-brand"
-    class="navbar__brand">
-    <slot />
-  </a>
-</template>
-
-<script lang="ts" setup>
-defineProps({
-  href: {
-    type   : String,
-    default: undefined,
-  },
-})
-</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>