@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/accordion/AccordionItems.vue

@@ -1,50 +0,0 @@
-<script>
-import { defineComponent, h } from "vue-demi";
-import { findAllChildren } from "../utils/vnode";
-export default defineComponent({
-  props: {
-    modelValue: {
-      type: [Number, Array],
-      default: void 0
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    noCaret: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ["update:modelValue"],
-  setup(props, { slots, emit }) {
-    function setValue(isExpand, i) {
-      if (props.multiple) {
-        const value = Array.isArray(props.modelValue) ? props.modelValue : [];
-        if (isExpand)
-          emit("update:modelValue", [...value, i]);
-        else
-          emit("update:modelValue", value.filter((x) => x !== i));
-      } else {
-        if (isExpand)
-          emit("update:modelValue", i);
-        else if (props.modelValue === i)
-          emit("update:modelValue");
-      }
-    }
-    return () => {
-      const items = findAllChildren(slots.default(), "AccordionItem");
-      return items.map((item, i) => {
-        const isExpand = props.multiple && Array.isArray(props.modelValue) ? props.modelValue.includes(i) : props.modelValue === i;
-        return h(item, {
-          "noCaret": item.props?.noCaret ?? props.noCaret,
-          "modelValue": isExpand,
-          "onUpdate:modelValue": (value) => {
-            setValue(value, i);
-          }
-        });
-      });
-    };
-  }
-});
-</script>

package/dist/components/accordion/AccordionItems.vue.d.ts

@@ -1,41 +0,0 @@
-/**
- * TODO: Migrate this component to script setup after defineRender has been release
- * https://github.com/vuejs/rfcs/discussions/585
- */
-import type { PropType } from 'vue-demi';
-declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: PropType<number | number[]>;
-        default: undefined;
-    };
-    multiple: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    noCaret: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
-    [key: string]: any;
-}>[], {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: PropType<number | number[]>;
-        default: undefined;
-    };
-    multiple: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    noCaret: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
-    modelValue: number | number[];
-    multiple: boolean;
-    noCaret: boolean;
-}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-export default _default;

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

@@ -1,7 +0,0 @@
-export interface AccordionItem {
-    title: string;
-    content: string;
-    disabled?: boolean;
-    noCaret?: boolean;
-}
-export declare function defineAccordion(items: AccordionItem[]): AccordionItem[];

package/dist/components/accordion/index.mjs

@@ -1,3 +0,0 @@
-export function defineAccordion(items) {
-  return items;
-}

package/dist/components/aspect-ratio/index.d.ts

@@ -1,3 +0,0 @@
-import type { Directive } from 'vue-demi';
-export declare const pAspectRatio: Directive<HTMLElement, number>;
-export declare const vPAspectRatio: import("vue-demi").ObjectDirective<HTMLElement, number, string, string>;

package/dist/components/aspect-ratio/index.mjs

@@ -1,21 +0,0 @@
-import { calculateRatio } from "./utils/calculate-ratio.mjs";
-import { getObserver } from "./utils/resize-observer.mjs";
-export const pAspectRatio = {
-  async mounted(el, { value, modifiers }) {
-    const observer = await getObserver();
-    el.dataset.aspectRatio = `${value}`;
-    el.dataset.aspectFixed = modifiers.fixed ? "true" : "false";
-    calculateRatio(el, value, !!modifiers.fixed);
-    observer.observe(el);
-  },
-  updated(el, { value, modifiers }) {
-    el.dataset.aspectRatio = `${value}`;
-    el.dataset.aspectFixed = modifiers.fixed ? "true" : "false";
-    calculateRatio(el, value, !!modifiers.fixed);
-  },
-  async beforeUnmount(el) {
-    const observer = await getObserver();
-    observer.unobserve(el);
-  }
-};
-export const vPAspectRatio = pAspectRatio;

package/dist/components/aspect-ratio/utils/calculate-ratio.d.ts

@@ -1,7 +0,0 @@
-/**
- * Calculate and apply ratio to element
- * @param el HTMLElement
- * @param ratio aspect ratio
- * @param fixed enable fixed size
- */
-export declare function calculateRatio(el: HTMLElement, ratio: number, fixed?: boolean): void;

package/dist/components/aspect-ratio/utils/calculate-ratio.mjs

@@ -1,10 +0,0 @@
-export function calculateRatio(el, ratio, fixed = false) {
-  if (Number.isFinite(ratio)) {
-    const width = el.clientWidth;
-    const height = width / ratio;
-    if (fixed)
-      el.style.height = `${height}px`;
-    else
-      el.style.minHeight = `${height}px`;
-  }
-}

package/dist/components/aspect-ratio/utils/resize-observer.d.ts

@@ -1 +0,0 @@
-export declare function getObserver(): Promise<ResizeObserver>;

package/dist/components/aspect-ratio/utils/resize-observer.mjs

@@ -1,22 +0,0 @@
-import { calculateRatio } from "./calculate-ratio.mjs";
-let observer;
-export async function getObserver() {
-  let Observer = window.ResizeObserver;
-  if (!Observer) {
-    const {
-      ResizeObserver: Polyfill
-    } = await import("@juggle/resize-observer");
-    Observer = Polyfill;
-  }
-  if (!observer) {
-    observer = new Observer((entries) => {
-      for (const entry of entries) {
-        const target = entry.target;
-        const ratio = Number.parseFloat(target.dataset.aspectRatio);
-        const fixed = target.dataset.aspectFixed === "true";
-        calculateRatio(target, ratio, fixed);
-      }
-    });
-  }
-  return observer;
-}

package/dist/components/avatar/Avatar.vue

@@ -1,193 +0,0 @@
-<template>
-  <div
-    data-testid="avatar"
-    :class="classNames">
-    <slot>
-      <img
-        data-testid="avatar-image"
-        class="avatar__image"
-        :class="imgClass"
-        :data-type="type"
-        :src="imageSrc"
-        alt="Avatar Image">
-    </slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import {
-  computed,
-  onMounted,
-  ref,
-  watch,
-} from 'vue-demi'
-import {
-  createAlias,
-  createSpinner,
-  dummyAvatar,
-} from './utils/create-image'
-import loadImage from './utils/load-image'
-import type { TypeVariant, SizeVariant } from '.'
-
-defineOptions({ name: 'Avatar' })
-
-const props = defineProps({
-  variant: {
-    type   : String as PropType<TypeVariant>,
-    default: undefined,
-  },
-  src: {
-    type   : String,
-    default: undefined,
-  },
-  fallbackSrc: {
-    type   : String,
-    default: dummyAvatar(),
-  },
-  name: {
-    type   : String,
-    default: undefined,
-  },
-  size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
-  },
-  imgClass: {
-    type: [
-      String,
-      Array,
-      Object,
-    ],
-    default: undefined,
-  },
-  square: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits<{
-  'imgloaded': [string],
-  'imgerror': [Error],
-}>()
-
-const imageSrc = ref(createSpinner(50))
-
-const classNames = computed(() => {
-  const result: string[] = ['avatar']
-
-  // eslint-disable-next-line unicorn/explicit-length-check
-  if (props.size)
-    result.push(`avatar--${props.size}`)
-
-  if (props.square)
-    result.push('avatar--square')
-
-  return result
-})
-
-const type = computed<TypeVariant>(() => {
-  if (props.variant)
-    return props.variant
-
-  if (!props.src && props.name)
-    return 'alias'
-
-  return 'image'
-})
-
-function init () {
-  if (type.value === 'alias')
-    loadAlias()
-  else
-    load()
-}
-
-function load () {
-  imageSrc.value = createSpinner(50)
-
-  loadImage(props.src)
-    .then(() => {
-      imageSrc.value = props.src
-
-      emit('imgloaded', props.src)
-    })
-    .catch((error) => {
-      imageSrc.value = props.fallbackSrc
-      emit('imgerror', error)
-    })
-}
-
-function loadAlias () {
-  imageSrc.value = createAlias(props.name)
-}
-
-watch(() => [
-  props.src,
-  props.name,
-  props.variant,
-], () => {
-  init()
-})
-
-onMounted(() => {
-  init()
-})
-</script>
-
-<style lang="postcss">
-.avatar {
-  @apply inline-flex items-center justify-center overflow-hidden text-subtle bg-base;
-  @apply dark:text-dark-subtle dark:bg-dark-base;
-
-  &:not(&--square) {
-    @apply rounded-full;
-  }
-
-  &__image {
-    @apply w-full h-full object-cover;
-  }
-
-  &--xs {
-    @apply w-6 h-6 text-tn;
-  }
-
-  &--sm {
-    @apply w-8 h-8 text-xs;
-  }
-
-  &--md {
-    @apply w-10 h-10 text-sm;
-  }
-
-  &--lg {
-    @apply w-14 h-14 text-base;
-  }
-
-  &--xl {
-    @apply w-24 h-24 text-lg;
-  }
-
-  &--square {
-    &.avatar {
-      &--xs {
-        @apply rounded-xs;
-      }
-
-      &--sm {
-        @apply rounded-sm;
-      }
-
-      &--md {
-        @apply rounded;
-      }
-
-      &--lg,
-      &--xl {
-        @apply rounded-md;
-      }
-    }
-  }
-}
-</style>

package/dist/components/avatar/AvatarGroup.vue

@@ -1,42 +0,0 @@
-<template>
-  <div
-    data-testid="avatar-group"
-    class="avatar-group">
-    <pAvatarTruncate
-      :size="size"
-      :length="length">
-      <slot />
-    </pAvatarTruncate>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import type { SizeVariant } from '.'
-import pAvatarTruncate from './AvatarTruncate.vue'
-
-defineProps({
-  size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'xs',
-  },
-  length: {
-    type   : [Number, String],
-    default: 5,
-  },
-})
-</script>
-
-<style lang="postcss">
-.avatar-group {
-  --p-avatar-outline-color: theme(backgroundColor.default.DEFAULT);
-  --p-avatar-outline-color-dark: theme(backgroundColor.dark.default.DEFAULT);
-
-  @apply items-center flex -space-x-1;
-
-  .avatar {
-    @apply outline outline-2 outline-offset-0 outline-[color:var(--p-avatar-outline-color)];
-    @apply dark:outline-[color:var(--p-avatar-outline-color-dark)];
-  }
-}
-</style>

package/dist/components/avatar/AvatarTruncate.vue

@@ -1,33 +0,0 @@
-<script>
-import {
-  h,
-  defineComponent
-} from "vue-demi";
-import { findAllChildren } from "../utils/vnode";
-import pAvatar from "./Avatar.vue";
-export default defineComponent({
-  props: {
-    size: {
-      type: String,
-      default: "xs"
-    },
-    length: {
-      type: [Number, String],
-      default: 0
-    }
-  },
-  setup(props, { slots }) {
-    return () => {
-      const maxlength = Number(props.length);
-      const items = findAllChildren(slots.default(), "Avatar");
-      const shownItems = items.length > maxlength ? items.slice(0, maxlength - 1) : items;
-      const result = shownItems.map((avatar) => {
-        return h(avatar, { size: props.size });
-      });
-      if (items.length > maxlength)
-        result.push(h(pAvatar, { size: props.size }, () => `+${items.length + 1 - maxlength}`));
-      return result;
-    };
-  }
-});
-</script>

package/dist/components/avatar/AvatarTruncate.vue.d.ts

@@ -1,31 +0,0 @@
-/**
- * TODO: Migrate this component to script setup after defineRender has been release
- * https://github.com/vuejs/rfcs/discussions/585
- */
-import type { PropType } from 'vue-demi';
-import type { SizeVariant } from '.';
-declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    size: {
-        type: PropType<SizeVariant>;
-        default: string;
-    };
-    length: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
-}>, () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
-    [key: string]: any;
-}>[], {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    size: {
-        type: PropType<SizeVariant>;
-        default: string;
-    };
-    length: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
-}>> & Readonly<{}>, {
-    size: SizeVariant;
-    length: string | number;
-}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-export default _default;

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

@@ -1,2 +0,0 @@
-export type TypeVariant = 'image' | 'alias';
-export type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/dist/components/avatar/utils/color-hash.d.ts

@@ -1,2 +0,0 @@
-export declare function colorHash(text: string): [string, string];
-export declare function colorRandom(): [string, string];

package/dist/components/avatar/utils/color-hash.mjs

@@ -1,22 +0,0 @@
-const COLOR_SEED = [
-  ["#F2F7FD", "#0065D1"],
-  ["#F8F8F8", "#737373"],
-  ["#F4FBF6", "#23B242"],
-  ["#F2FBFC", "#02AEC5"],
-  ["#FFFBF4", "#F5A623"],
-  ["#FEF5F4", "#E42E2C"],
-  ["#FBFAF2", "#B79A00"],
-  ["#FEFDF4", "#EFD52C"],
-  ["#FAFEF5", "#A3E635"],
-  ["#F3FBFA", "#12B89C"],
-  ["#F7F2FD", "#5E00D1"]
-];
-export function colorHash(text) {
-  let hash = 0;
-  for (let index = 0; index < text.length; ++index)
-    hash = (hash << 5) - hash + text.charCodeAt(index) | 0;
-  return COLOR_SEED.at(Math.abs(hash) % COLOR_SEED.length);
-}
-export function colorRandom() {
-  return COLOR_SEED.at(Math.floor(Math.random() * COLOR_SEED.length));
-}

package/dist/components/avatar/utils/create-image.d.ts

@@ -1,5 +0,0 @@
-export declare function createText(text: string, size: number, bgColor: string, textColor: string): string;
-export declare function createSpinner(width?: number, height?: number): string;
-export declare function getAlias(name: string): string;
-export declare function createAlias(name?: string, size?: number): string;
-export declare function dummyAvatar(): string;

package/dist/components/avatar/utils/create-image.mjs

@@ -1,19 +0,0 @@
-import avatarImg from "../assets/avatar.png";
-import { colorHash, colorRandom } from "./color-hash.mjs";
-export function createText(text, size, bgColor, textColor) {
-  return `data:image/svg+xml,<svg height="${size}" width="${size}" xmlns="http://www.w3.org/2000/svg"><rect fill="${encodeURIComponent(bgColor)}" x="0" y="0" height="${size}" width="${size}"></rect><text fill="${encodeURIComponent(textColor)}" dominant-baseline="central" text-anchor="middle" x="50%" y="50%" font-family="sans-serif" font-weight="600">${encodeURIComponent(text)}</text></svg>`;
-}
-export function createSpinner(width = 50, height = width) {
-  return `data:image/svg+xml,<svg class="spinner spinner-basic" width="${width}" height="${height}" viewBox="0 0 19 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g transform="translate(4.75 4.75) scale(.5)"><rect class="spinner-basic__bar" x="8.125" width="2.5" height="6.25" rx="1.25" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="15.1202" y="1.86199" width="2.5" height="6.25" rx="1.25" transform="rotate(45 15.1202 1.86199)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.125s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="18.75" y="8.125" width="2.5" height="6.25" rx="1.25" transform="rotate(90 18.75 8.125)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.250s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="16.888" y="15.1202" width="2.5" height="6.25" rx="1.25" transform="rotate(135 16.888 15.1202)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.375s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="8.125" y="12.5" width="2.5" height="6.25" rx="1.25" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.500s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="6.2814" y="10.7008" width="2.5" height="6.25" rx="1.25" transform="rotate(45 6.2814 10.7008)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.625s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="6.25" y="8.125" width="2.5" height="6.25" rx="1.25" transform="rotate(90 6.25 8.125)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.750s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="8.04917" y="6.2814" width="2.5" height="6.25" rx="1.25" transform="rotate(135 8.04917 6.2814)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.875s" repeatCount="indefinite" /></rect></g></svg>`;
-}
-export function getAlias(name) {
-  return name.split(" ").slice(0, 2).map((c) => c.at(0)).join("").toUpperCase();
-}
-export function createAlias(name, size = 50) {
-  const alias = name ? getAlias(name) : "\uFF65\u1D17\uFF65";
-  const [bgColor, textColor] = name ? colorHash(name) : colorRandom();
-  return createText(alias, size, bgColor, textColor);
-}
-export function dummyAvatar() {
-  return avatarImg;
-}

package/dist/components/avatar/utils/load-image.d.ts

@@ -1 +0,0 @@
-export default function loadImage(url?: string | null): Promise<HTMLImageElement>;

package/dist/components/avatar/utils/load-image.mjs

@@ -1,22 +0,0 @@
-export default function loadImage(url) {
-  if (!url)
-    return Promise.reject(new Error("ERR_INVALID_IMAGE_SRC"));
-  return new Promise((resolve, reject) => {
-    const image = new globalThis.Image();
-    const onLoad = () => {
-      onFinish();
-      resolve(image);
-    };
-    const onError = () => {
-      onFinish();
-      reject(new Error("ERR_FAILED_LOAD_IMAGE"));
-    };
-    const onFinish = () => {
-      image.removeEventListener("load", onLoad);
-      image.removeEventListener("error", onError);
-    };
-    image.addEventListener("load", onLoad);
-    image.addEventListener("error", onError);
-    image.src = url;
-  });
-}