@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/overlay/assets/icon-white.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="204" height="131" version="1.1" viewBox="0 0 204 131"><title>Logo / Negative / Icon</title><desc>Created with Sketch.</desc><defs><linearGradient id="linearGradient-1" x1="38.772%" x2="99.746%" y1="36.946%" y2="100%"><stop offset="0%" stop-color="#000" stop-opacity="0"/><stop offset="10.271%" stop-color="#000" stop-opacity=".054"/><stop offset="19.657%" stop-color="#000" stop-opacity=".106"/><stop offset="30.31%" stop-color="#000" stop-opacity=".192"/><stop offset="38.65%" stop-color="#000" stop-opacity=".245"/><stop offset="100%" stop-color="#000"/></linearGradient></defs><g id="Logo-/-Negative-/-Icon" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#FFF" d="M19.1359203,111.815313 C30.9636339,123.668638 47.3036075,131 65.352117,131 C83.4004497,131 99.7402465,123.668638 111.567783,111.815313 L204,19.1846867 C192.172286,7.33136183 175.832313,0 157.78398,0 C139.735471,0 123.395674,7.33136183 111.568137,19.1845095 L111.56796,19.1846867 C99.7402465,7.33136183 83.4004497,0 65.3522937,0 C26.5673268,0 2.02528496,29.2248333 0,66.4713328 C0.256828333,84.1728482 7.52049215,100.17473 19.1359203,111.815313 Z"/><path id="Path" fill="url(#linearGradient-1)" d="M112,19.2653956 C100.126484,7.36220448 83.7234126,0 65.6053663,0 C26.6702071,0 2.03312774,29.3477806 0,66.7509741 C0.257822885,84.5269588 7.54961478,100.59616 19.2100229,112.285714 L112,19.2653956 Z"/></g></svg>

package/dist/components/overlay/index.d.ts

@@ -1,2 +0,0 @@
-export declare function showOverlay(): Promise<void>;
-export declare function hideOverlay(): Promise<void>;

package/dist/components/overlay/index.mjs

@@ -1,8 +0,0 @@
-import { useSingleton } from "../global/use-singleton.mjs";
-import Overlay from "./Overlay.vue";
-export async function showOverlay() {
-  (await useSingleton(Overlay)).show();
-}
-export async function hideOverlay() {
-  (await useSingleton(Overlay)).hide();
-}

package/dist/components/overlay/utils/use-loading.d.ts

@@ -1,4 +0,0 @@
-export interface LoadingOptions {
-    elapsed: number | boolean;
-}
-export default function useLoading(options_?: LoadingOptions): import("vue-demi").WritableComputedRef<boolean, boolean>;

package/dist/components/overlay/utils/use-loading.mjs

@@ -1,28 +0,0 @@
-import defu from "defu";
-import { tryOnMounted } from "@vueuse/shared";
-import { computed, ref } from "vue-demi";
-export default function useLoading(options_) {
-  const options = defu(options_, { elapsed: true });
-  const counter = ref(0);
-  const elapsed = ref(options.elapsed !== false);
-  const loading = computed({
-    get() {
-      return counter.value > 0 || elapsed.value;
-    },
-    set(value) {
-      if (value)
-        counter.value++;
-      else
-        counter.value--;
-    }
-  });
-  tryOnMounted(() => {
-    if (options.elapsed !== false) {
-      const elapsedTime = options.elapsed === true ? 200 : options.elapsed;
-      setTimeout(() => {
-        elapsed.value = false;
-      }, elapsedTime);
-    }
-  });
-  return loading;
-}

package/dist/components/page/Page.vue

@@ -1,106 +0,0 @@
-<template>
-  <div
-    class="page"
-    data-testid="page"
-    :class="classNames">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
-import { useVModel } from '../input'
-import type { ToggleableVariant } from '../navbar'
-import type { TypeVariant } from '../sidebar'
-
-const props = defineProps({
-  expand: {
-    type   : String as PropType<ToggleableVariant>,
-    default: undefined,
-  },
-  type: {
-    type   : String as PropType<TypeVariant>,
-    default: 'narrow',
-  },
-  modelValue: {
-    type   : Boolean,
-    default: true,
-  },
-})
-
-defineEmits<{
-  'update:modelValue': [boolean],
-}>()
-
-const model = useVModel(props)
-
-const classNames = computed(() => {
-  const result: string[] = ['']
-
-  if (props.expand)
-    result.push(`page--expand page--expand-${props.expand}`)
-
-  if (props.expand && model.value)
-    result.push('page--expanded')
-
-  if (props.type)
-    result.push(`page--type-${props.type}`)
-
-  return result
-})
-</script>
-
-<style lang="postcss">
-.page {
-  --p-page-type-wide: 60px;
-  --p-page-type-narrow: 230px;
-
-  @apply w-full text-default;
-  @apply dark:text-dark-default;
-
-  &&--expand {
-    &:where(&&-all, &&-lg, &&-md, &&-sm) {
-      &:is(.page--expanded) {
-        @apply transition-[padding] ease-out delay-75;
-
-        &.page--type-wide {
-          @apply pl-[var(--p-page-type-wide)];
-        }
-
-        &.page--type-narrow {
-          @apply pl-[var(--p-page-type-narrow)];
-        }
-      }
-    }
-
-    &:where(&&-all, &&-lg, &&-md, &&-sm) {
-      @apply pl-0 transition-[padding] ease-in delay-75;
-    }
-
-    &&-lg {
-      @apply lg:pl-[var(--p-page-type-narrow)];
-
-      &:not(.page--type-narrow) {
-        @apply lg:pl-[var(--p-page-type-wide)];
-      }
-    }
-
-    &&-md {
-      @apply md:pl-[var(--p-page-type-narrow)];
-
-      &:not(.page--type-narrow) {
-        @apply md:pl-[var(--p-page-type-wide)];
-      }
-    }
-
-    &&-sm {
-      @apply sm:pl-[var(--p-page-type-narrow)];
-
-      &:not(.page--type-narrow) {
-        @apply sm:pl-[var(--p-page-type-wide)];
-      }
-    }
-  }
-}
-</style>

package/dist/components/pagination/Pagination.vue

@@ -1,415 +0,0 @@
-<template>
-  <div
-    data-testid="pagination"
-    :class="classNames">
-    <div
-      v-if="quickJump"
-      class="pagination__quickjump"
-      data-testid="pagination-quickjump">
-      {{ pageLabel }}
-      <Select
-        v-model="model"
-        :searchable="false"
-        :size="selectSize"
-        data-testid="pagination-select"
-        :options="pageOptions"
-        @change="({ value }) => selectPage(value)" />
-      <slot
-        name="quick-jump-count"
-        :total="totalPageCount">
-        of {{ totalPageCount }}
-      </slot>
-    </div>
-    <nav
-      v-else
-      class="pagination__items">
-      <Button
-        v-if="variant === 'far'"
-        data-testid="pagination-nav-first"
-        variant="solid"
-        size="sm"
-        :disabled="!canPrev"
-        class="pagination__items__nav-first"
-        icon
-        @click="selectPage(1)">
-        <slot name="first-navigation">
-          {{ firstNavLabel }}
-        </slot>
-      </Button>
-      <Button
-        v-if="variant === 'short' || variant === 'far'"
-        data-testid="pagination-nav-prev"
-        variant="solid"
-        size="sm"
-        :disabled="!canPrev"
-        class="pagination__items__nav-prev"
-        icon
-        @click="prev">
-        <slot name="prev-navigation">
-          <template v-if="navigationText">
-            {{ prevNavLabel }}
-          </template>
-          <IconPrev v-else />
-        </slot>
-      </Button>
-      <template v-if="!navigationOnly">
-        <Button
-          v-for="(page, index) in pageItems"
-          :key="index"
-          data-testid="pagination-item"
-          variant="solid"
-          size="sm"
-          icon
-          :readonly="typeof page === 'string'"
-          :active="page === model"
-          @click="selectPage(page)">
-          {{ page }}
-        </Button>
-      </template>
-      <Button
-        v-if="variant === 'short' || variant === 'far'"
-        data-testid="pagination-nav-next"
-        variant="solid"
-        size="sm"
-        :disabled="!canNext"
-        class="pagination__items__nav-next"
-        icon
-        @click="next">
-        <slot name="next-navigation">
-          <template v-if="navigationText">
-            {{ nextNavLabel }}
-          </template>
-          <IconNext v-else />
-        </slot>
-      </Button>
-      <Button
-        v-if="variant === 'far'"
-        data-testid="pagination-nav-last"
-        variant="solid"
-        size="sm"
-        :disabled="!canNext"
-        class="pagination__items__nav-last"
-        icon
-        @click="selectPage(totalPageCount)">
-        <slot name="last-navigation">
-          {{ lastNavLabel }}
-        </slot>
-      </Button>
-    </nav>
-    <div
-      v-if="showCounter || showDetail"
-      class="pagination__count"
-      data-testid="pagination-count">
-      <slot
-        name="pagination-count"
-        :page="modelValue"
-        :per-page="perPage"
-        :range="rowRange"
-        :total-page="totalPageCount"
-        :total="total">
-        {{ rowRange[0] }} - {{ rowRange[1] }} of {{ total }}
-      </slot>
-    </div>
-    <div
-      v-if="showPerPage || showDetail"
-      class="pagination__options"
-      data-testid="pagination-option">
-      {{ showRowsLabel }}
-      <Select
-        v-model="rowPerPage"
-        :searchable="false"
-        :size="selectSize"
-        :options="rowPerPageOptions" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType, VNode } from 'vue-demi'
-import { computed, watch } from 'vue-demi'
-import Button from '../button/Button.vue'
-import Select from '../select/Select.vue'
-import IconPrev from '@privyid/persona-icon/vue/chevron-left/20.vue'
-import IconNext from '@privyid/persona-icon/vue/chevron-right/20.vue'
-import type { SelectItem } from '../select'
-import { useVModel } from '../input'
-import { usePagination } from '.'
-import { getPageRange } from './utils/calculate-page'
-import type { SizeVariant } from '../button'
-
-type NavigationVariant = 'none' | 'short' | 'far'
-
-const props = defineProps({
-  modelValue: {
-    type   : Number,
-    default: 1,
-  },
-  quickJump: {
-    type   : Boolean,
-    default: false,
-  },
-  showCounter: {
-    type   : Boolean,
-    default: false,
-  },
-  showPerPage: {
-    type   : Boolean,
-    default: false,
-  },
-  showDetail: {
-    type   : Boolean,
-    default: false,
-  },
-  navigationText: {
-    type   : Boolean,
-    default: false,
-  },
-  navigationOnly: {
-    type   : Boolean,
-    default: false,
-  },
-  variant: {
-    type   : String as PropType<NavigationVariant>,
-    default: 'short',
-  },
-  perPage: {
-    type   : Number,
-    default: 10,
-  },
-  perPageOptions: {
-    type   : Array<Number>,
-    default: () => [
-      10,
-      20,
-      30,
-    ],
-  },
-  total: {
-    type   : Number,
-    default: 0,
-  },
-  displayLimit: {
-    type   : Number,
-    default: 10,
-  },
-  pageLabel: {
-    type   : String,
-    default: 'Page',
-  },
-  prevNavLabel: {
-    type   : String,
-    default: 'Previous',
-  },
-  nextNavLabel: {
-    type   : String,
-    default: 'Next',
-  },
-  firstNavLabel: {
-    type   : String,
-    default: 'First',
-  },
-  lastNavLabel: {
-    type   : String,
-    default: 'Last',
-  },
-  showRowsLabel: {
-    type   : String,
-    default: 'Show rows',
-  },
-  selectSize: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [number],
-  'update:perPage': [number],
-  'change': [number],
-}>()
-
-const classNames = computed(() => {
-  const results: string [] = ['pagination']
-
-  if (props.navigationOnly)
-    results.push('pagination--navonly')
-
-  return results
-})
-
-const model = useVModel(props)
-
-const {
-  pageItems,
-  rowRange,
-  totalPageCount,
-  canNext,
-  canPrev,
-} = usePagination(props)
-
-const pageOptions = computed<SelectItem[]>(() => {
-  return getPageRange(1, totalPageCount.value).map((page) => {
-    return {
-      text : String(page),
-      value: page,
-    }
-  })
-})
-
-const rowPerPageOptions = computed<SelectItem[]>(() => {
-  return props.perPageOptions.map((option) => {
-    return {
-      text : String(option),
-      value: option,
-    }
-  })
-})
-
-const rowPerPage = computed({
-  get () {
-    return props.perPage
-  },
-  set (value) {
-    emit('update:perPage', value)
-  },
-})
-
-watch(totalPageCount, (value) => {
-  if (model.value > value)
-    model.value = value || 1
-})
-
-function next () {
-  model.value = Math.min(model.value + 1, totalPageCount.value)
-
-  emit('change', model.value)
-}
-
-function prev () {
-  model.value = Math.max(model.value - 1, 1)
-
-  emit('change', model.value)
-}
-
-function selectPage (page: number | string) {
-  if (typeof page === 'string') return
-
-  if (model.value !== page) {
-    model.value = page
-
-    emit('change', page)
-  }
-}
-
-defineExpose({
-  next,
-  prev,
-})
-
-defineSlots<{
-  'quick-jump-count'(props: { total: number }): VNode[],
-  'pagination-count'(props: {
-    page: number,
-    perPage: number,
-    total: number,
-    totalPage: number,
-    range: number[],
-  }): VNode[],
-  'first-navigation'(): VNode[],
-  'prev-navigation'(): VNode[],
-  'next-navigation'(): VNode[],
-  'last-navigation'(): VNode[],
-}>()
-</script>
-
-<style lang="postcss">
-/**
-* Component Name: Pagination
-* Component URI : https://www.figma.com/file/JIYmbyRYZHc9bnVp6Npm9K/B-A-S-E-%2F-Components?node-id=338%3A15323&t=u3Y7jHGZtoyAFn21-4
-* Date Created  : December 22, 2022
-* Last Update   : December 22, 2022
-*/
-.pagination {
-  @apply relative flex flex-wrap justify-start items-center w-full;
-
-  &&--navonly {
-    .pagination {
-      &__items {
-        @apply order-4 ml-4 only:ml-auto;
-      }
-
-      &__count {
-        @apply ml-0 mr-auto;
-      }
-    }
-  }
-
-  &__quickjump,
-  &__items,
-  &__options {
-    @apply flex flex-wrap items-center text-default;
-    @apply dark:text-dark-default;
-  }
-
-  &__quickjump {
-    .dropdown {
-      @apply mx-3;
-    }
-  }
-
-  &__items {
-    @apply space-x-2;
-
-    .btn--icon.btn--sm {
-      @apply px-2 py-1 min-w-[34px];
-
-      &:is(.pagination__items__nav-first, .pagination__items__nav-prev, .pagination__items__nav-next, .pagination__items__nav-last) > svg {
-        @apply my-[0.15rem];
-      }
-    }
-  }
-
-  &__count {
-    @apply ml-5 text-default;
-    @apply dark:text-dark-default;
-  }
-
-  &__options {
-    @apply justify-between items-center ml-auto;
-
-    .dropdown {
-      @apply ml-3;
-    }
-  }
-
-  .dropdown {
-    @apply max-w-[80px];
-
-    &__menu {
-      @apply min-w-fit;
-    }
-  }
-
-  .btn {
-    @apply transition-none;
-  }
-
-  .btn--variant-solid {
-    @apply justify-center items-center hover:shadow-none;
-
-    &.btn--default {
-      @apply bg-transparent hover:bg-ground focus:bg-ground border-transparent focus:border-default hover:border-default text-default font-normal focus:outline-none;
-      @apply dark:bg-transparent hover:dark:bg-dark-ground focus:dark:bg-dark-ground dark:border-transparent focus:dark:border-dark-default hover:dark:border-dark-default dark:text-dark-default;
-
-      &[active="true"] {
-        @apply bg-info-emphasis border-info-emphasis text-state-emphasis cursor-default;
-        @apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis dark:text-dark-state-emphasis;
-      }
-
-      &[readonly] {
-        @apply pointer-events-none;
-      }
-    }
-  }
-}
-</style>

package/dist/components/pagination/index.d.ts

@@ -1,14 +0,0 @@
-interface PaginationProps {
-    modelValue: number;
-    perPage: number;
-    total: number;
-    displayLimit: number;
-}
-export declare function usePagination(props: PaginationProps): {
-    pageItems: import("vue-demi").ComputedRef<(string | number)[] | undefined>;
-    rowRange: import("vue-demi").ComputedRef<number[]>;
-    totalPageCount: import("vue-demi").ComputedRef<number>;
-    canNext: import("vue-demi").ComputedRef<boolean>;
-    canPrev: import("vue-demi").ComputedRef<boolean>;
-};
-export {};

package/dist/components/pagination/index.mjs

@@ -1,38 +0,0 @@
-import { computed, toRef } from "vue-demi";
-import {
-  getPageItems,
-  getPageRange,
-  PAGE_PADDING
-} from "./utils/calculate-page.mjs";
-export function usePagination(props) {
-  const page = toRef(props, "modelValue");
-  const perPage = toRef(props, "perPage");
-  const total = toRef(props, "total");
-  const displayLimit = toRef(props, "displayLimit");
-  const totalPageCount = computed(() => {
-    return total.value <= 0 ? 0 : Math.ceil(total.value / perPage.value);
-  });
-  const rowRange = computed(() => {
-    const start = Math.max((page.value - 1) * perPage.value + 1, 0);
-    const end = Math.min(page.value * perPage.value, total.value);
-    return [start, end];
-  });
-  const pageItems = computed(() => {
-    if (totalPageCount.value === 0 || displayLimit.value < PAGE_PADDING)
-      return [];
-    if (totalPageCount.value === 1)
-      return [1];
-    if (displayLimit.value >= totalPageCount.value)
-      return getPageRange(1, totalPageCount.value);
-    return getPageItems(page.value, totalPageCount.value, displayLimit.value);
-  });
-  const canNext = computed(() => page.value < totalPageCount.value);
-  const canPrev = computed(() => page.value > 1);
-  return {
-    pageItems,
-    rowRange,
-    totalPageCount,
-    canNext,
-    canPrev
-  };
-}

package/dist/components/pagination/utils/calculate-page.d.ts

@@ -1,11 +0,0 @@
-/**
-* PAGE_PADDING is total from first_page + last_page + current_page + 2*DOTS
-*/
-export declare const DOTS = "...";
-export declare const PAGE_PADDING = 5;
-export declare function getPageRange(start: number, end: number): number[];
-export declare function getSiblings(displayLimit: number): {
-    totalSiblings: number;
-    totalPageDisplay: number;
-};
-export declare function getPageItems(page: number, totalPageCount: number, displayLimit: number): (string | number)[] | undefined;

package/dist/components/pagination/utils/calculate-page.mjs

@@ -1,48 +0,0 @@
-export const DOTS = "...";
-export const PAGE_PADDING = 5;
-export function getPageRange(start, end) {
-  const length = end - start + 1;
-  return Array.from({ length }, (_, index) => index + start);
-}
-export function getSiblings(displayLimit) {
-  const totalSiblings = Math.floor((displayLimit - PAGE_PADDING) / 2);
-  const totalPageNumber = 2 * totalSiblings + PAGE_PADDING;
-  const totalPageDisplay = totalPageNumber - 2;
-  return {
-    totalSiblings,
-    totalPageDisplay
-  };
-}
-export function getPageItems(page, totalPageCount, displayLimit) {
-  const { totalSiblings, totalPageDisplay } = getSiblings(displayLimit);
-  const startPage = Math.max(page - totalSiblings, 1);
-  const endPage = Math.min(page + totalSiblings, totalPageCount);
-  const showLeftEllipsis = startPage > 2;
-  const showRightEllipsis = endPage <= totalPageCount - 2;
-  if (showLeftEllipsis && !showRightEllipsis) {
-    const pageRange = getPageRange(totalPageCount - totalPageDisplay + 1, totalPageCount);
-    return [
-      1,
-      DOTS,
-      ...pageRange
-    ];
-  }
-  if (!showLeftEllipsis && showRightEllipsis) {
-    const pageRange = getPageRange(1, totalPageDisplay);
-    return [
-      ...pageRange,
-      DOTS,
-      totalPageCount
-    ];
-  }
-  if (showLeftEllipsis && showRightEllipsis) {
-    const pageRange = getPageRange(startPage, endPage);
-    return [
-      1,
-      DOTS,
-      ...pageRange,
-      DOTS,
-      totalPageCount
-    ];
-  }
-}