@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/progress/ProgressItem.vue

@@ -1,56 +0,0 @@
-<template>
-  <div
-    class="progress__item"
-    data-testid="progress-item"
-    :class="classNames">
-    <div class="progress__content">
-      <div class="progress__bar" />
-      <div class="progress__point">
-        <slot name="icon">
-          <div
-            data-testid="progress-point-item"
-            class="progress__point-item" />
-        </slot>
-      </div>
-      <div
-        data-testid="progress-title"
-        class="progress__title">
-        <slot name="title">
-          {{ title }}
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { VNode } from 'vue-demi'
-import { computed } from 'vue-demi'
-
-defineOptions({ name: 'ProgressItem' })
-
-const props = defineProps({
-  title: {
-    type   : String,
-    default: '',
-  },
-  active: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (props.active)
-    result.push('progress--active')
-
-  return result
-})
-
-defineSlots<{
-  'icon'(): VNode[],
-  'title'(): VNode[],
-}>()
-</script>

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

@@ -1,2 +0,0 @@
-export type IconVariant = 'dot' | 'counter';
-export type TitleVariant = 'specific' | 'general';

package/dist/components/progress-indicator/ProgressIndicator.vue

@@ -1,132 +0,0 @@
-<template>
-  <div
-    class="progress-indicator"
-    data-testid="progress-indicator"
-    :class="classNames">
-    <div class="progress-indicator__container">
-      <template
-        v-for="i in nums"
-        :key="i">
-        <div
-          class="progress-indicator__item"
-          data-testid="progress-indicator-item"
-          @click="setValue(i)" />
-      </template>
-    </div>
-    <div
-      :style="activeStyle"
-      class="progress-indicator__item progress-indicator__item--active"
-      data-testid="progress-indicator-item-active" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useVModel } from '../input'
-import { useToNumber } from '@vueuse/core'
-import { useClamp } from '@vueuse/math'
-import type {
-  StyleValue,
-  PropType,
-} from 'vue-demi'
-import { computed, toRef } from 'vue-demi'
-import type { DirectionVariant } from '../steps'
-
-const props = defineProps({
-  modelValue: {
-    type   : Number,
-    default: 1,
-  },
-  direction: {
-    type   : String as PropType<DirectionVariant>,
-    default: 'horizontal',
-  },
-  length: {
-    type   : [Number, String],
-    default: 6,
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [number],
-  'change': [number],
-}>()
-
-const model  = useVModel(props)
-const nums   = useToNumber(toRef(props, 'length'), { nanToZero: true, method: 'parseInt' })
-const active = useClamp(model, 1, nums)
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (props.direction)
-    result.push(`progress-indicator--${props.direction}`)
-
-  return result
-})
-
-const activeStyle = computed<StyleValue>(() => {
-  if (props.direction === 'vertical') {
-    return {
-      transform: `translateY(calc((100% + .25rem) * ${active.value - 1}))`,
-      height   : `calc((100% - (.25rem * (${nums.value} - 1))) / ${nums.value} )`,
-    }
-  }
-
-  return { transform: `translateX(calc((100% + .25rem) * ${active.value - 1}))` }
-})
-
-function setValue (value: number) {
-  active.value = value
-
-  emit('change', value)
-}
-</script>
-
-<style lang="postcss">
-.progress-indicator {
-  --p-bg-indicator-item: rgba(theme(backgroundColor.inverse), theme(opacity.20));
-  --p-bg-dark-indicator-item: rgba(theme(backgroundColor.dark.inverse), theme(opacity.20));
-  --p-bg-indicator-item-active: rgba(theme(backgroundColor.inverse), theme(opacity.60));
-  --p-bg-dark-indicator-item-active: rgba(theme(backgroundColor.dark.inverse), theme(opacity.60));
-
-  @apply relative;
-
-  &__container {
-    @apply flex flex-1;
-  }
-
-  &__item {
-    @apply bg-[color:var(--p-bg-indicator-item)] cursor-pointer;
-    @apply dark:bg-[color:var(--p-bg-dark-indicator-item)];
-
-    &--active {
-      @apply absolute top-0 left-0 transition-transform;
-      @apply bg-[color:var(--p-bg-indicator-item-active)] pointer-events-none;
-      @apply dark:bg-[color:var(--p-bg-dark-indicator-item-active)];
-    }
-  }
-
-  &--horizontal {
-    .progress-indicator__container {
-      @apply justify-center space-x-1;
-    }
-
-    .progress-indicator__item {
-      @apply w-2 h-2 rounded-full;
-    }
-  }
-
-  &--vertical {
-    @apply h-full;
-
-    .progress-indicator__container {
-      @apply flex-col space-y-1 h-full;
-    }
-
-    .progress-indicator__item {
-      @apply w-2 h-full rounded-full;
-    }
-  }
-
-}
-</style>

package/dist/components/progressbar/Progressbar.vue

@@ -1,113 +0,0 @@
-<template>
-  <div
-    data-testid="progressbar"
-    role="progressbar"
-    class="progressbar"
-    :class="classNames"
-    :data-value="percentage">
-    <div
-      data-testid="progressbar-bar"
-      class="progressbar__bar"
-      :style="{ width }" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue-demi'
-import { useProgressbar } from '.'
-
-const props = defineProps({
-  value: {
-    type   : [Number, String],
-    default: 0,
-  },
-  min: {
-    type   : [Number, String],
-    default: 0,
-  },
-  max: {
-    type   : [Number, String],
-    default: 100,
-  },
-  success: {
-    type   : Boolean,
-    default: false,
-  },
-  error: {
-    type   : Boolean,
-    default: false,
-  },
-  indeterminate: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const percentage = useProgressbar(props)
-
-const width = computed(() => {
-  if (props.success || props.error)
-    return '100%'
-
-  return `${percentage.value * 100}%`
-})
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (props.indeterminate)
-    result.push('progressbar--indeterminate')
-
-  if (props.error)
-    result.push('progressbar--error')
-  else if (props.success)
-    result.push('progressbar--success')
-
-  return result
-})
-</script>
-
-<style lang="postcss">
-.progressbar {
-  /* --p-bg-progress-default: theme(backgroundColor.base.DEFAULT); */
-  --p-bg-progress-default: theme(backgroundColor.emphasis-alpha);
-  --p-bg-dark-progress-default: theme(backgroundColor.dark.emphasis-alpha);
-
-  @apply bg-[color:var(--p-bg-progress-default)] w-full h-1 rounded-full overflow-hidden;
-  @apply dark:[color:var(--p-bg-dark-progress-default)];
-
-  &__bar {
-    @apply transition-[width] will-change-[width] duration-75 ease-out;
-    @apply bg-brand-accent rounded-full h-full origin-center;
-    @apply dark:bg-dark-brand-accent;
-  }
-
-  &--indeterminate {
-    .progressbar__bar {
-      animation: 1s ease-in-out infinite alternate progressbar-bounce;
-    }
-  }
-
-  &--success &__bar {
-    @apply bg-success-emphasis;
-    @apply dark:bg-dark-success-emphasis;
-  }
-
-  &--error &__bar {
-    @apply bg-dark-danger-emphasis;
-    @apply dark:bg-dark-danger-emphasis;
-  }
-}
-
-@keyframes progressbar-bounce {
-  0% {
-    width: 40%;
-    transform: translateX(-75%);
-  }
-
-  100% {
-    width: 40%;
-    transform: translateX(225%);
-  }
-}
-</style>

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

@@ -1,7 +0,0 @@
-interface ProgressbarProp {
-    min: number | string;
-    max: number | string;
-    value: number | string;
-}
-export declare function useProgressbar(props: ProgressbarProp): import("vue-demi").ComputedRef<number>;
-export {};

package/dist/components/progressbar/index.mjs

@@ -1,11 +0,0 @@
-import { toRef, computed } from "vue-demi";
-import { useToNumber } from "@vueuse/core";
-export function useProgressbar(props) {
-  const min = useToNumber(toRef(props, "min"), { nanToZero: true });
-  const max = useToNumber(toRef(props, "max"), { nanToZero: true });
-  const value = useToNumber(toRef(props, "value"), { nanToZero: true });
-  const presentage = computed(() => {
-    return (value.value - min.value) / (max.value - min.value);
-  });
-  return presentage;
-}

package/dist/components/pspdfkit/PspdfHelipad.vue

@@ -1,165 +0,0 @@
-<template>
-  <div
-    data-testid="pdf-helipad"
-    class="pdf-helipad"
-    :class="classNames">
-    <div
-      ref="object"
-      data-testid="pdf-helipad-object"
-      class="pdf-object pdf-object--external"
-      :style="{ width: `${width}px`, height: `${height}px` }">
-      <div class="pdf-object__container">
-        <slot />
-      </div>
-    </div>
-    <div
-      class="pdf-object pdf-object--external pdf-helipad__ghost"
-      :style="{ width: `${width}px`, height: `${height}px` }">
-      <div class="pdf-object__container">
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import '../pdf-object/PdfObject.vue'
-import {
-  computed,
-  ref,
-  toRef,
-  watch,
-  watchEffect,
-} from 'vue-demi'
-import { getPosition } from '../pdf-object/utils/position'
-import useDrag from '../pdf-helipad/utils/use-drag'
-import type { PdfHelipadResult } from '../pdf-helipad'
-import type { InteractEvent } from '@interactjs/types'
-import type { Instance } from 'pspdfkit'
-import { isInside } from './utils/position'
-
-const props = defineProps({
-  scale: {
-    type   : Number,
-    default: 1,
-  },
-  width: {
-    type   : Number,
-    default: 198,
-  },
-  height: {
-    type   : Number,
-    default: 106,
-  },
-  disabled: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits<{
-  'landed': [PdfHelipadResult],
-  'click': [InteractEvent],
-}>()
-
-const object = ref<HTMLDivElement>()
-const scale  = toRef(props, 'scale')
-const width  = toRef(props, 'width')
-const height = toRef(props, 'height')
-
-const isDragged = ref(false)
-const x         = ref(0)
-const y         = ref(0)
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (props.disabled)
-    result.push('pdf-helipad--disabled')
-
-  return result
-})
-
-const draggable = useDrag(object, {
-  onstart () {
-    const { left, top } = object.value.getBoundingClientRect()
-
-    isDragged.value = true
-    x.value         = left
-    y.value         = top
-  },
-  onmove (event) {
-    x.value = event.clientX - (event.rect.width * scale.value / 2)
-    y.value = event.clientY - (event.rect.height * scale.value / 2)
-  },
-  onend (event) {
-    if (event.relatedTarget && (event.target as any).instance) {
-      const instance = (event.target as any).instance as Instance
-      const elements = instance.contentDocument.querySelectorAll<HTMLDivElement>('.PSPDFKit-Spread')
-
-      let reference: HTMLDivElement
-
-      for (const page of elements) {
-        if (isInside(object.value, page)) {
-          reference = page
-
-          break
-        }
-      }
-
-      if (reference) {
-        const page   = Number.parseInt(reference.dataset.spreadIndex) + 1
-        const result = getPosition({
-          reference: reference,
-          object   : object.value,
-          scale    : scale.value,
-        })
-
-        emit('landed', {
-          ...result,
-          page  : page,
-          width : width.value,
-          height: height.value,
-        })
-      }
-    }
-
-    isDragged.value = false
-  },
-  ontap (event) {
-    emit('click', event)
-  },
-})
-
-watchEffect(() => {
-  if (object.value) {
-    if (isDragged.value) {
-      object.value.style.position  = 'fixed'
-      object.value.style.transform = `translate(${x.value}px, ${y.value}px) scale(${scale.value})`
-      object.value.style.zIndex    = '50'
-    } else {
-      object.value.style.position  = 'absolute'
-      object.value.style.transform = 'translate(0px, 0px)'
-      object.value.style.zIndex    = '2'
-    }
-  }
-})
-
-watch(() => props.disabled, (isDisabled) => {
-  draggable.value = !isDisabled
-}, { immediate: true })
-</script>
-
-<style lang="postcss">
-.pdf-helipad {
-  @apply relative inline-block;
-
-  &__ghost {
-    @apply opacity-25 z-1 touch-none pointer-events-none;
-  }
-
-  &&--disabled {
-    @apply opacity-50;
-  }
-}
-</style>