@privyid/persona 1.1.2 → 1.2.0

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

@@ -0,0 +1,27 @@
+const instances = /* @__PURE__ */ new Set();
+export class ResizeObserver {
+  handler;
+  targets;
+  constructor(handler) {
+    this.handler = handler;
+    this.targets = /* @__PURE__ */ new Set();
+    instances.add(this);
+  }
+  observe(el) {
+    this.targets.add(el);
+  }
+  unobserve(el) {
+    this.targets.delete(el);
+  }
+  disconnect() {
+    this.targets.clear();
+  }
+}
+export function triggerChange() {
+  for (const observer of instances) {
+    const entries = [...observer.targets].map((target) => {
+      return { target };
+    });
+    observer.handler(entries, observer);
+  }
+}

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

@@ -0,0 +1,84 @@
+<script setup>
+  import { vPAspectRatio } from '.'
+</script>
+
+# Aspect Ratio
+> CSS Aspect-Ratio alternative using JS
+
+## Usage
+
+### Simple Usage
+
+<preview class="items-start space-x-3">
+  <div
+    class="p-4 text-state-emphasis dark:text-dark-state-emphasis w-28 bg-info-emphasis dark:bg-dark-info-emphasis"
+    v-p-aspect-ratio="1 / 1">
+    1 / 1
+  </div>
+  <div
+    class="p-4 text-state-emphasis dark:text-dark-state-emphasis w-28 bg-info-emphasis dark:bg-dark-info-emphasis"
+    v-p-aspect-ratio="4 / 3">
+    4 / 3
+  </div>
+  <div
+    class="p-4 text-state-emphasis dark:text-dark-state-emphasis w-28 bg-info-emphasis dark:bg-dark-info-emphasis"
+    v-p-aspect-ratio="16 / 9">
+    16 / 9
+  </div>
+</preview>
+
+```vue
+<template>
+  <div
+    class="p-4 text-state-emphasis dark:text-dark-state-emphasis w-28 bg-info-emphasis dark:bg-dark-info-emphasis"
+    v-p-aspect-ratio="1 / 1">
+    1 / 1
+  </div>
+  <div
+    class="p-4 text-state-emphasis dark:text-dark-state-emphasis w-28 bg-info-emphasis dark:bg-dark-info-emphasis"
+    v-p-aspect-ratio="4 / 3">
+    4 / 3
+  </div>
+  <div
+    class="p-4 text-state-emphasis dark:text-dark-state-emphasis w-28 bg-info-emphasis dark:bg-dark-info-emphasis"
+    v-p-aspect-ratio="16 / 9">
+    16 / 9
+  </div>
+</template>
+
+<script setup>
+  import { vPAspectRatio } from '@privyid/persona/directive'
+</script>
+```
+
+## Fixed Size
+
+Add modifier `.fixed` to enable fixed size, it'll use style `height` instead of `min-height`
+
+<preview class="space-x-3">
+  <div class="p-4 overflow-hidden text-state-emphasis dark:text-dark-state-emphasis w-28 bg-info-emphasis dark:bg-dark-info-emphasis" v-p-aspect-ratio="1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  </div>
+  <div class="p-4 overflow-hidden text-state-emphasis dark:text-dark-state-emphasis w-28 bg-info-emphasis dark:bg-dark-info-emphasis" v-p-aspect-ratio.fixed="1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  </div>
+</preview>
+
+```vue
+<template>
+  <div class="p-4 overflow-hidden text-state-emphasis dark:text-dark-state-emphasis w-28 bg-info-emphasis dark:bg-dark-info-emphasis" v-p-aspect-ratio="1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  </div>
+  <div class="p-4 overflow-hidden text-state-emphasis dark:text-dark-state-emphasis w-28 bg-info-emphasis dark:bg-dark-info-emphasis" v-p-aspect-ratio.fixed="1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  </div>
+</template>
+```
+
+## API
+
+### Modifiers
+
+| Modifiers | Description        |
+|-----------|--------------------|
+| `fixed`   | Enable fixed sized |

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,64 @@
+import { render } from "@testing-library/vue";
+import { vi } from "vitest";
+import { calculateRatio } from "./__mocks__/calculate-ratio.mjs";
+import { ResizeObserver, triggerChange } from "./__mocks__/resize-observer.mjs";
+import { delay } from "nanodelay";
+import { pAspectRatio, vPAspectRatio } from "./index.mjs";
+vi.mock("./utils/calculate-ratio.ts", () => {
+  return { calculateRatio };
+});
+vi.stubGlobal("ResizeObserver", ResizeObserver);
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+it("should able to calculate element ratio", async () => {
+  const screen = render({
+    directives: { pAspectRatio },
+    template: `
+      <div
+        data-testid="sample"
+        v-p-aspect-ratio="4/3" />
+    `
+  });
+  const sample = screen.queryByTestId("sample");
+  await delay(0);
+  expect(sample).toBeInTheDocument();
+  expect(sample).toHaveAttribute("data-aspect-ratio", `${4 / 3}`);
+  expect(sample).toHaveAttribute("data-aspect-fixed", "false");
+  expect(calculateRatio).lastCalledWith(sample, 4 / 3, false);
+});
+it("should enable fixed size if modifiers fixed set to true", async () => {
+  const screen = render({
+    directives: { pAspectRatio },
+    template: `
+      <div
+        data-testid="sample"
+        v-p-aspect-ratio.fixed="4/3" />
+    `
+  });
+  const sample = screen.queryByTestId("sample");
+  await delay(0);
+  expect(sample).toBeInTheDocument();
+  expect(sample).toHaveAttribute("data-aspect-ratio", `${4 / 3}`);
+  expect(sample).toHaveAttribute("data-aspect-fixed", "true");
+  expect(calculateRatio).lastCalledWith(sample, 4 / 3, true);
+});
+it("should recalculate ratio if element size changed", async () => {
+  const screen = render({
+    directives: { pAspectRatio },
+    template: `
+      <div
+        data-testid="sample"
+        v-p-aspect-ratio.fixed="4/3" />
+    `
+  });
+  const sample = screen.queryByTestId("sample");
+  await delay(0);
+  expect(sample).toBeInTheDocument();
+  expect(calculateRatio).toBeCalledTimes(1);
+  triggerChange();
+  expect(calculateRatio).toBeCalledTimes(2);
+});
+it("should export alias vPAspectRatio", () => {
+  expect(vPAspectRatio).toBe(pAspectRatio);
+});

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,17 @@
+import { vi } from "vitest";
+import { calculateRatio } from "./calculate-ratio.mjs";
+it("should able to calculate ratio from element width", () => {
+  const element = document.createElement("div");
+  document.body.append(element);
+  vi.spyOn(element, "clientWidth", "get").mockReturnValue(400);
+  calculateRatio(element, 4 / 3);
+  expect(element).toHaveStyle({ minHeight: "300px" });
+});
+it("should use `height` instead of `min-height` if fixed size is set to `true`", () => {
+  const element = document.createElement("div");
+  document.body.append(element);
+  vi.spyOn(element, "clientWidth", "get").mockReturnValue(400);
+  calculateRatio(element, 4 / 3, true);
+  expect(element).toHaveStyle({ height: "300px" });
+  expect(element).not.toHaveStyle({ minHeight: "300px" });
+});

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,18 @@
+import { getObserver } from "./resize-observer.mjs";
+it("should return resize observer instance", async () => {
+  const instance = await getObserver();
+  expect(instance).toBeInstanceOf(ResizeObserver);
+});
+it("should return singleton instance", async () => {
+  const a = await getObserver();
+  const b = await getObserver();
+  expect(a).toBe(b);
+});
+it("should use polyfill if browser not support ResizeObserver", async () => {
+  window.ResizeObserver = void 0;
+  const instance = await getObserver();
+  expect(instance).not.toBeUndefined();
+  expect(instance.observe).toBeFunction();
+  expect(instance.unobserve).toBeFunction();
+  expect(instance.disconnect).toBeFunction();
+});

package/dist/components/avatar/Avatar.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/avatar/Avatar.spec.mjs

@@ -0,0 +1,179 @@
+import { fireEvent, render } from "@testing-library/vue";
+import Avatar from "./Avatar.vue";
+import IconUser from "@privyid/persona-icon/vue/profile/20.vue";
+import MockImage from "./__mocks__/image.mjs";
+import { vi, expect } from "vitest";
+import { delay } from "nanodelay";
+vi.stubGlobal("Image", MockImage);
+it("should render properly", () => {
+  const screen = render({
+    components: { Avatar },
+    template: `
+      <Avatar />
+    `
+  });
+  const avatar = screen.queryByTestId("avatar");
+  const image = screen.queryByTestId("avatar-image");
+  expect(avatar).toBeInTheDocument();
+  expect(avatar).toHaveClass("avatar", "avatar--md");
+  expect(image).toBeInTheDocument();
+});
+it('should have type "alias" if variant set to alias', () => {
+  const screen = render({
+    components: { Avatar },
+    template: `
+      <Avatar variant="alias" name="Tarjono" />
+    `
+  });
+  const image = screen.queryByTestId("avatar-image");
+  expect(image).toHaveAttribute("data-type", "alias");
+});
+it('should have type "alias" if no src but name was provided', () => {
+  const screen = render({
+    components: { Avatar },
+    template: `
+      <Avatar name="Tarjono" />
+    `
+  });
+  const image = screen.queryByTestId("avatar-image");
+  expect(image).toHaveAttribute("data-type", "alias");
+});
+it('should have type "image" if src is present', async () => {
+  const screen = render({
+    components: { Avatar },
+    template: `
+      <Avatar src="/imageA.jpg" />
+    `
+  });
+  const image = screen.queryByTestId("avatar-image");
+  expect(image).toHaveAttribute("data-type", "image");
+});
+it("should use fallback url if src invalid", async () => {
+  const screen = render({
+    components: { Avatar },
+    template: `
+      <Avatar
+        src="/broken-link.jpg"
+        fallback-src="/fallback.jpg" />
+    `
+  });
+  const image = screen.queryByTestId("avatar-image");
+  await delay(1);
+  expect(image).toHaveAttribute("src", "/fallback.jpg");
+});
+it("should re-init if src changed", async () => {
+  const screen = render({
+    components: { Avatar },
+    template: `
+      <Avatar
+        :src="url" />
+      <button @click="changeUrl">Change URL</button>
+    `,
+    data: () => ({ url: "/imageA.jpg" }),
+    methods: {
+      changeUrl() {
+        this.url = "/imageB.jpg";
+      }
+    }
+  });
+  const image = screen.queryByTestId("avatar-image");
+  const button = screen.queryByText("Change URL");
+  await delay(1);
+  expect(image).toHaveAttribute("src", "/imageA.jpg");
+  await fireEvent.click(button);
+  await delay(1);
+  expect(image).toHaveAttribute("src", "/imageB.jpg");
+});
+it('should have style "lg" if size prop set to "lg"', () => {
+  const screen = render({
+    components: { Avatar },
+    template: `
+      <Avatar size="lg" />
+    `
+  });
+  const avatar = screen.queryByTestId("avatar");
+  expect(avatar).toBeInTheDocument();
+  expect(avatar).toHaveClass("avatar--lg");
+  expect(avatar).not.toHaveClass("avatar--md");
+});
+it("should replace image if slot is used", () => {
+  const screen = render({
+    components: {
+      Avatar,
+      IconUser
+    },
+    template: `
+      <Avatar>
+        <IconUser data-testid="icon" />
+      </Avatar>
+    `
+  });
+  const avatar = screen.queryByTestId("avatar");
+  const image = screen.queryByTestId("avatar-image");
+  const icon = screen.queryByTestId("icon");
+  expect(avatar).toBeInTheDocument();
+  expect(icon).toBeInTheDocument();
+  expect(image).not.toBeInTheDocument();
+});
+it('should emit event "imgloaded" when image sucess to load', async () => {
+  const spy = vi.fn();
+  const screen = render({
+    components: {
+      Avatar,
+      IconUser
+    },
+    template: `
+      <Avatar src="/imageA.jpg" @imgloaded="onLoaded" />
+    `,
+    methods: { onLoaded: spy }
+  });
+  const image = screen.queryByTestId("avatar-image");
+  await delay(1);
+  expect(image).toBeInTheDocument();
+  expect(spy).toBeCalled();
+  expect(spy).toBeCalledWith("/imageA.jpg");
+});
+it('should emit event "imgerror" when image fail to load', async () => {
+  const spy = vi.fn();
+  const screen = render({
+    components: {
+      Avatar,
+      IconUser
+    },
+    template: `
+      <Avatar src="/broken-link.jpg" @imgerror="onFailed" />
+    `,
+    methods: { onFailed: spy }
+  });
+  const image = screen.queryByTestId("avatar-image");
+  await delay(1);
+  expect(image).toBeInTheDocument();
+  expect(spy).toBeCalled();
+  expect(spy).toHaveBeenCalledWith(
+    expect.objectContaining({ message: "ERR_FAILED_LOAD_IMAGE" })
+  );
+});
+it("should have additional class if prop imgClass if provided", () => {
+  const screen = render({
+    components: { Avatar },
+    template: `
+      <Avatar img-class="custom-class" />
+    `
+  });
+  const avatar = screen.queryByTestId("avatar");
+  const image = screen.queryByTestId("avatar-image");
+  expect(avatar).toBeInTheDocument();
+  expect(image).toHaveClass("custom-class");
+  expect(avatar).not.toHaveClass("custom-class");
+});
+it("should have style `square` when `square` prop was provided", () => {
+  const screen = render({
+    components: { Avatar },
+    template: `
+      <Avatar square />
+    `
+  });
+  const avatar = screen.queryByTestId("avatar");
+  expect(avatar).toBeInTheDocument();
+  expect(avatar).toHaveClass("avatar--square");
+});

package/dist/components/avatar/Avatar.vue

@@ -14,126 +14,100 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
+<script setup>
 import {
   computed,
   onMounted,
   ref,
-  watch,
-} from 'vue-demi'
+  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' })
-
+  dummyAvatar
+} from "./utils/create-image";
+import loadImage from "./utils/load-image";
+defineOptions({ name: "Avatar" });
 const props = defineProps({
   variant: {
-    type   : String as PropType<TypeVariant>,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   src: {
-    type   : String,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   fallbackSrc: {
-    type   : String,
-    default: dummyAvatar(),
+    type: String,
+    default: dummyAvatar()
   },
   name: {
-    type   : String,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
+    type: String,
+    default: "md"
   },
   imgClass: {
     type: [
       String,
       Array,
-      Object,
+      Object
     ],
-    default: undefined,
+    default: void 0
   },
   square: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits<{
-  'imgloaded': [string],
-  'imgerror': [Error],
-}>()
-
-const imageSrc = ref(createSpinner(50))
-
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(["imgloaded", "imgerror"]);
+const imageSrc = ref(createSpinner(50));
 const classNames = computed(() => {
-  const result: string[] = ['avatar']
-
-  // eslint-disable-next-line unicorn/explicit-length-check
+  const result = ["avatar"];
   if (props.size)
-    result.push(`avatar--${props.size}`)
-
+    result.push(`avatar--${props.size}`);
   if (props.square)
-    result.push('avatar--square')
-
-  return result
-})
-
-const type = computed<TypeVariant>(() => {
+    result.push("avatar--square");
+  return result;
+});
+const type = computed(() => {
   if (props.variant)
-    return props.variant
-
+    return props.variant;
   if (!props.src && props.name)
-    return 'alias'
-
-  return 'image'
-})
-
-function init () {
-  if (type.value === 'alias')
-    loadAlias()
+    return "alias";
+  return "image";
+});
+function init() {
+  if (type.value === "alias")
+    loadAlias();
   else
-    load()
+    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 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)
+function loadAlias() {
+  imageSrc.value = createAlias(props.name);
 }
-
 watch(() => [
   props.src,
   props.name,
-  props.variant,
+  props.variant
 ], () => {
-  init()
-})
-
+  init();
+});
 onMounted(() => {
-  init()
-})
+  init();
+});
 </script>
 
 <style lang="postcss">

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

@@ -0,0 +1,91 @@
+import type { PropType } from 'vue-demi';
+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-demi").DefineComponent<import("vue-demi").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-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    imgloaded: (args_0: string) => void;
+    imgerror: (args_0: Error) => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").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-demi").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.spec.d.ts

@@ -0,0 +1 @@
+export {};