@privyid/persona 1.2.1 → 1.2.2-dev.2

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,167 @@
+<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 setup>
+import {
+  computed,
+  onMounted,
+  ref,
+  watch
+} from "vue";
+import {
+  createAlias,
+  createSpinner,
+  dummyAvatar
+} from "./utils/create-image";
+import loadImage from "./utils/load-image";
+defineOptions({ name: "Avatar" });
+const props = defineProps({
+  variant: {
+    type: String,
+    default: void 0
+  },
+  src: {
+    type: String,
+    default: void 0
+  },
+  fallbackSrc: {
+    type: String,
+    default: dummyAvatar()
+  },
+  name: {
+    type: String,
+    default: void 0
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  imgClass: {
+    type: [
+      String,
+      Array,
+      Object
+    ],
+    default: void 0
+  },
+  square: {
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(["imgloaded", "imgerror"]);
+const imageSrc = ref(createSpinner(50));
+const classNames = computed(() => {
+  const result = ["avatar"];
+  if (props.size)
+    result.push(`avatar--${props.size}`);
+  if (props.square)
+    result.push("avatar--square");
+  return result;
+});
+const type = computed(() => {
+  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/Avatar.vue.d.ts

@@ -0,0 +1,91 @@
+import type { PropType } from 'vue';
+import type { TypeVariant, SizeVariant } from '.';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<TypeVariant>;
+        default: undefined;
+    };
+    src: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fallbackSrc: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    imgClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    square: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    imgloaded: (args_0: string) => void;
+    imgerror: (args_0: Error) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<TypeVariant>;
+        default: undefined;
+    };
+    src: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fallbackSrc: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    imgClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    square: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onImgloaded?: ((args_0: string) => any) | undefined;
+    onImgerror?: ((args_0: Error) => any) | undefined;
+}>, {
+    size: SizeVariant;
+    name: string;
+    src: string;
+    variant: TypeVariant;
+    fallbackSrc: string;
+    imgClass: string | unknown[] | Record<string, any>;
+    square: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/avatar/AvatarGroup.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    data-testid="avatar-group"
+    class="avatar-group">
+    <pAvatarTruncate
+      :size="size"
+      :length="length">
+      <slot />
+    </pAvatarTruncate>
+  </div>
+</template>
+
+<script setup>
+import pAvatarTruncate from "./AvatarTruncate.vue";
+defineProps({
+  size: {
+    type: String,
+    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/AvatarGroup.vue.d.ts

@@ -0,0 +1,40 @@
+import type { PropType } from 'vue';
+import type { SizeVariant } from '.';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    size: SizeVariant;
+    length: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/avatar/AvatarTruncate.vue

@@ -0,0 +1,33 @@
+<script>
+import {
+  h,
+  defineComponent
+} from "vue";
+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

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,19 @@
+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

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

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

@@ -0,0 +1,22 @@
+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;
+  });
+}