@privyid/persona 1.1.2 → 1.2.1

package/dist/components/nav/Nav.vue

@@ -1,416 +0,0 @@
-<template>
-  <ul
-    data-testid="nav"
-    :class="classNames">
-    <li
-      class="nav__title">
-      <span
-        class="nav__title__item"
-        :class="[ (!title && titleActionLabel) ? 'justify-end' : 'justify-between' ]">
-        <Caption
-          v-if="title"
-          weight="bold"
-          transform="capitalize">
-          {{ title }}
-        </Caption>
-        <Text
-          v-if="titleActionLabel && titleActionUrl"
-          data-testid="nav-action"
-          variant="caption"
-          :href="titleActionUrl">
-          {{ titleActionLabel }}
-        </Text>
-      </span>
-    </li>
-    <slot />
-  </ul>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
-import type { AlignVariant, StyleVariant } from '.'
-import Caption from '../caption/Caption.vue'
-import Text from '../text/Text.vue'
-import type { RouteLocationRaw } from 'vue-router'
-
-const props = defineProps({
-  fill: {
-    type   : Boolean,
-    default: false,
-  },
-  justified: {
-    type   : Boolean,
-    default: false,
-  },
-  variant: {
-    type   : String as PropType<StyleVariant>,
-    default: 'pills',
-  },
-  align: {
-    type   : String as PropType<AlignVariant>,
-    default: 'left',
-  },
-  vertical: {
-    type   : Boolean,
-    default: false,
-  },
-  title: {
-    type   : String,
-    default: undefined,
-  },
-  titleActionLabel: {
-    type   : [String, Object] as PropType<RouteLocationRaw>,
-    default: undefined,
-  },
-  titleActionUrl: {
-    type   : [String, Object] as PropType<RouteLocationRaw>,
-    default: undefined,
-  },
-  condensed: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const classNames = computed(() => {
-  const result: string[] = ['nav']
-
-  if (props.fill)
-    result.push('nav--fill')
-
-  if (props.justified)
-    result.push('nav--justified')
-
-  if (props.variant)
-    result.push(`nav--${props.variant}`)
-
-  if (props.align)
-    result.push(`nav--align-${props.align}`)
-
-  if (props.vertical)
-    result.push('nav--vertical')
-
-  if (props.title || props.titleActionLabel)
-    result.push('nav--has-title')
-
-  if (props.condensed)
-    result.push('nav--condensed')
-
-  return result
-})
-</script>
-
-<style lang="postcss">
-/**
-* Component Name: Navigation
-* Component URI : https://www.figma.com/file/tVQNwXeQkMtZlX1x3qjJu8/B-A-S-E-%2F-Style-Guide?node-id=262%3A2160
-* Date Created  : Aug 01, 2022
-* Last Update   : Aug 03, 2022
-*/
-.nav {
-  --p-border-nav-link-active: theme(borderColor.brand.accent.DEFAULT);
-  --p-border-dark-nav-link-active: theme(borderColor.dark.brand.accent.DEFAULT);
-
-  --p-bg-nav-tabs-active: theme(backgroundColor.default.DEFAULT);
-  --p-bg-dark-nav-tabs-active: theme(backgroundColor.dark.default.DEFAULT);
-
-  --p-bg-nav-pills-active: theme(backgroundColor.default.alpha);
-  --p-bg-dark-nav-pills-active: theme(backgroundColor.default.alpha);
-
-  /**
-  * Default navigation
-  * is horizontal
-  */
-  @apply pl-2 list-none flex flex-wrap mb-0;
-
-  &:not(.nav--vertical):not(.navbar__nav) .nav__item {
-    @apply first:ml-2 mr-2 last:mr-0;
-  }
-
-  &__item > &__link {
-    @apply no-underline transition-colors duration-150 ease-out;
-  }
-
-  & > &__item {
-    .nav__link {
-      @apply text-subtle;
-      @apply dark:text-dark-subtle;
-
-      &:hover,
-      &--active,
-      &.router-link-active:not(.nav__link--exact),
-      &.router-link-exact-active.nav__link--exact {
-        @apply text-default;
-        @apply dark:text-dark-default;
-      }
-
-      &--disabled {
-        @apply text-muted hover:text-muted focus:text-muted active:text-muted;
-        @apply dark:text-dark-muted hover:dark:text-dark-muted focus:dark:text-dark-muted active:dark:text-dark-muted;
-      }
-    }
-  }
-
-  /*
-  * Navigation variant:
-  * Lines
-  */
-  &&--lines {
-    @apply text-center;
-
-    &:not(.nav--vertical) {
-      .nav__link {
-        @apply border-x-0;
-      }
-    }
-    /**
-    * Set active state
-    * with border-bottom
-    */
-    .nav__link {
-      &--active,
-      &.router-link-active:not(.nav__link--exact),
-      &.router-link-exact-active.nav__link--exact {
-        &:not(.nav__link--disabled) {
-          @apply border-b-[color:var(--p-border-nav-link-active)];
-          @apply dark:border-b-[color:var(--p-border-dark-nav-link-active)];
-        }
-      }
-    }
-
-    /**
-    * Active state of Lines
-    * in vertical
-    */
-    &.nav--vertical {
-      .nav__link {
-        @apply border-y-0;
-
-        &--active,
-        &.router-link-active:not(.nav__link--exact),
-        &.router-link-exact-active.nav__link--exact {
-          &:not(.nav__link--disabled) {
-            @apply border-r border-r-[color:var(--p-border-nav-link-active)] rounded-tr-none;
-            @apply dark:border-r-[color:var(--p-border-dark-nav-link-active)];
-          }
-        }
-      }
-
-      &.nav--align-right {
-        .nav__link {
-          @apply border-r-0;
-
-          &--active,
-          &.router-link-active:not(.nav__link--exact),
-          &.router-link-exact-active.nav__link--exact {
-            &:not(.nav__link--disabled) {
-              @apply border-l border-l-[color:var(--p-border-nav-link-active)] rounded-tl-none;
-              @apply dark:border-l-[color:var(--p-border-dark-nav-link-active)];
-            }
-          }
-        }
-      }
-    }
-  }
-
-  /*
-  * Navigation variant:
-  * Tabs
-  */
-  &&--tabs {
-    /**
-    * Set active state
-    * with bordered item
-    * except in bottom-side
-    */
-    .nav__link {
-      &--active,
-      &.router-link-active:not(.nav__link--exact),
-      &.router-link-exact-active.nav__link--exact {
-        &:not(.nav__link--disabled) {
-          @apply border-t-default border-x-default bg-[color:var(--p-bg-nav-tabs-active)];
-          @apply dark:border-t-dark-default dark:border-x-dark-default dark:bg-[color:var(--p-bg-dark-nav-tabs-active)];
-        }
-      }
-    }
-
-    /**
-    * Active state of Tabs
-    * in vertical
-    */
-    &.nav--vertical {
-      .nav__link {
-        &--active,
-        &.router-link-active:not(.nav__link--exact),
-        &.router-link-exact-active.nav__link--exact {
-          &:not(.nav__link--disabled) {
-            @apply border-l-default border-y-default border-r-transparent bg-[color:var(--p-bg-nav-tabs-active)] rounded-l rounded-r-none;
-            @apply dark:border-l-dark-default dark:border-y-dark-default dark:border-r-transparent dark:bg-[color:var(--p-bg-dark-nav-tabs-active)];
-          }
-        }
-      }
-
-      &.nav--align-right {
-        .nav__link {
-          &--active,
-          &.router-link-active:not(.nav__link--exact),
-          &.router-link-exact-active.nav__link--exact {
-            &:not(.nav__link--disabled) {
-              @apply border-r-default border-y-default border-l-transparent rounded-r rounded-l-none;
-              @apply dark:border-r-dark-default dark:border-y-dark-default dark:border-l-transparent;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  /*
-  * Navigation variant:
-  * Pills
-  */
-  &&--pills {
-    @apply pb-2;
-
-    /**
-    * Set active state
-    * with background
-    */
-    .nav__link {
-      &--active,
-      &.router-link-active:not(.nav__link--exact),
-      &.router-link-exact-active.nav__link--exact {
-        &:not(.nav__link--disabled) {
-          @apply bg-[color:var(--p-bg-nav-pills-active)] rounded-b;
-          @apply dark:bg-[color:var(--p-bg-dark-nav-pills-active)];
-        }
-      }
-    }
-
-    /**
-    * Remove background of
-    * active state in
-    * condensed mode
-    */
-    &.nav--condensed {
-      .nav__link {
-        &--active,
-        &.router-link-active:not(.nav__link--exact),
-        &.router-link-exact-active.nav__link--exact {
-          @apply bg-transparent;
-          @apply dark:bg-transparent;
-        }
-      }
-    }
-
-    &.nav--vertical {
-      @apply pb-0 pr-2;
-    }
-  }
-
-  /*
-  * Navigation alignment
-  */
-  &&--align {
-    &-left {
-      @apply justify-start;
-    }
-
-    &-right {
-      @apply justify-end;
-    }
-
-    &-center {
-      @apply justify-center;
-    }
-  }
-
-  /*
-  * Navigation fullwidth
-  */
-  &&--fill,
-  &&--justified {
-    .nav__item {
-      .nav__link {
-        @apply w-full;
-      }
-    }
-  }
-
-  /**
-  * Proportionately fill
-  */
-  &&--fill {
-    .nav {
-      &__item {
-        @apply flex-auto;
-      }
-    }
-  }
-
-  /**
-  * Same width every item
-  */
-  &&--justified {
-    .nav {
-      &__item {
-        @apply basis-0 grow;
-      }
-    }
-  }
-
-  /**
-  * Vertical Navigation
-  */
-  &&--vertical {
-    @apply pt-2 flex-col;
-
-    .nav {
-      @apply flex-col;
-
-      .nav__item {
-        @apply first:mx-0;
-      }
-
-      &__link {
-        @apply mb-0;
-      }
-
-      &__title {
-        @apply left-3;
-      }
-    }
-
-    &.nav--align-right {
-      @apply pl-0 ml-auto;
-
-      .nav {
-        &__link {
-          @apply -ml-[1px] mr-0;
-        }
-      }
-    }
-  }
-
-  /**
-  * Navigation Title
-  */
-  &&--has-title {
-    @apply relative pt-7 mt-5;
-  }
-
-  &__title {
-    @apply absolute left-5 top-0 text-base w-[calc(100%-1.75rem)]; /* 1.25rem + 0.75rem (padding) */
-
-    &__item {
-      @apply flex items-center w-full space-x-2;
-    }
-
-    .caption {
-      @apply text-subtle;
-      @apply dark:text-dark-subtle;
-    }
-  }
-}
-</style>

package/dist/components/nav/NavCollapse.vue

@@ -1,66 +0,0 @@
-<template>
-  <NavItem
-    ref="root"
-    class="nav__collapse"
-    :class="{ 'nav__collapse--expand': isExpand }"
-    data-testid="nav-collapse"
-    v-bind="$attrs"
-    @click.prevent="toggleExpand">
-    <template #icon>
-      <IconMore class="nav__collapse__icon" />
-    </template>
-    {{ isExpand ? showLessText : showMoreText }}
-  </NavItem>
-  <Collapse :model-value="isExpand">
-    <slot />
-  </Collapse>
-</template>
-
-<script lang="ts" setup>
-import Collapse from '../collapse/Collapse.vue'
-import NavItem from '../nav/NavItem.vue'
-import IconMore from '@privyid/persona-icon/vue/chevron-down/20.vue'
-import { onMounted, ref } from 'vue-demi'
-
-defineProps({
-  showMoreText: {
-    type   : String,
-    default: 'More',
-  },
-  showLessText: {
-    type   : String,
-    default: 'Less',
-  },
-})
-
-const root     = ref<InstanceType<typeof NavItem>>()
-const isExpand = ref(false)
-
-function toggleExpand () {
-  isExpand.value = !isExpand.value
-}
-
-onMounted(() => {
-  if (root.value.$el) {
-    isExpand.value = root.value.$el
-      .querySelectorAll('.router-link-active:not(.nav__link--exact),.router-link-exact-active.nav__link--exact')
-      .length > 0
-  }
-})
-</script>
-
-<style lang="postcss">
-.nav__collapse {
-  @apply select-none;
-
-  &__icon {
-    @apply transition-transform duration-150 ease-in-out;
-  }
-
-  &--expand {
-    .nav__collapse__icon {
-      @apply rotate-180;
-    }
-  }
-}
-</style>

package/dist/components/nav/NavForm.vue

@@ -1,23 +0,0 @@
-<template>
-  <li
-    class="nav__form"
-    data-testid="nav-form">
-    <slot />
-  </li>
-</template>
-
-<style lang="postcss">
-.nav {
-  &__form {
-    @apply flex items-center ml-3 flex-wrap gap-2;
-
-    input {
-      @apply inline-block align-middle w-auto;
-    }
-
-    .navbar--collapse.collapse--show & {
-      @apply ml-0;
-    }
-  }
-}
-</style>

package/dist/components/nav/NavItem.vue

@@ -1,187 +0,0 @@
-<template>
-  <li
-    data-testid="nav-item"
-    class="nav__item"
-    :class="navItemClass">
-    <nuxt-link
-      data-testid="nav-link"
-      :href="link"
-      :target="target"
-      :class="[classNames, linkClass]">
-      <span
-        v-if="$slots.icon"
-        data-testid="nav-icon"
-        class="nav__link__icon">
-        <slot name="icon" />
-      </span>
-      <span
-        v-if="$slots.default"
-        data-testid="nav-label"
-        class="nav__link__label">
-        <slot />
-      </span>
-    </nuxt-link>
-  </li>
-</template>
-
-<script lang="ts" setup>
-import type {
-  AnchorHTMLAttributes,
-  PropType,
-  VNode,
-} from 'vue-demi'
-import { computed } from 'vue-demi'
-import type { RouteLocationRaw } from 'vue-router'
-
-const props = defineProps({
-  active: {
-    type   : Boolean,
-    default: false,
-  },
-  disabled: {
-    type   : Boolean,
-    default: false,
-  },
-  href: {
-    type   : [String, Object] as PropType<RouteLocationRaw>,
-    default: undefined,
-  },
-  target: {
-    type   : String as PropType<AnchorHTMLAttributes['target']>,
-    default: '_self',
-  },
-  linkClass: {
-    type: [
-      String,
-      Array,
-      Object,
-    ],
-    default: undefined,
-  },
-  exact: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const slots = defineSlots<{
-  'icon'(): VNode[],
-  'default'(): VNode[],
-}>()
-
-const classNames = computed(() => {
-  const result: string[] = ['nav__link']
-
-  if (props.active)
-    result.push('nav__link--active')
-
-  if (props.disabled)
-    result.push('nav__link--disabled')
-
-  if (slots.icon)
-    result.push('nav__link--icon')
-
-  if (props.exact)
-    result.push('nav__link--exact')
-
-  return result
-})
-
-const navItemClass = computed(() => {
-  const result: string[] = ['']
-
-  if (props.active)
-    result.push('nav__item--active')
-
-  if (props.disabled)
-    result.push('nav__item--disabled')
-
-  return result
-})
-
-const link = computed(() => {
-  if (!props.disabled)
-    return props.href
-})
-</script>
-
-<style lang="postcss">
-.nav {
-
-  &__item {
-    &&--no-label {
-      .nav__link__label {
-        @apply hidden;
-      }
-    }
-
-    &&--no-icon {
-      .nav__link__icon {
-        @apply hidden;
-      }
-
-      .nav__link__label {
-        @apply ml-0 justify-center;
-      }
-    }
-  }
-
-  &__link {
-    @apply block relative py-[10px] px-3 -mb-[1px] border border-transparent rounded-t text-base font-normal cursor-pointer no-underline hover:no-underline text-subtle hover:text-default;
-    @apply dark:text-dark-subtle hover:dark:text-dark-default;
-
-    &&--active {
-      @apply text-default cursor-default;
-      @apply dark:text-dark-default;
-    }
-
-    &&--disabled {
-      @apply cursor-default pointer-events-none;
-    }
-
-    &--icon {
-      @apply flex items-center;
-
-      .nav__link__icon {
-        @apply grow-0;
-
-        img {
-          @apply w-5 h-5;
-        }
-      }
-
-      .nav__link__label {
-        @apply shrink ml-3 w-full;
-      }
-    }
-
-    &__label {
-      @apply flex items-center;
-    }
-  }
-
-  &:is(.nav--justified, .nav--fill) {
-    .nav__link {
-      &--icon {
-        .nav__link__label {
-          .badge {
-            @apply ml-auto;
-          }
-        }
-      }
-
-      &__label {
-        .badge {
-          @apply ml-auto;
-        }
-      }
-    }
-  }
-
-  &&--condensed {
-    .nav__link {
-      @apply py-1;
-    }
-  }
-}
-</style>