@privyid/persona 1.1.1 → 1.2.0

package/dist/components/accordion/Accordion.spec.d.ts

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

package/dist/components/accordion/Accordion.spec.mjs

@@ -0,0 +1,169 @@
+import { render, fireEvent } from "@testing-library/vue";
+import { ref } from "vue-demi";
+import pAccordion from "./Accordion.vue";
+import pAccordionItem from "./AccordionItem.vue";
+import { defineAccordion } from "./index.mjs";
+it("should render properly without any props", () => {
+  const screen = render({
+    components: { pAccordion },
+    template: `
+      <p-accordion />
+    `
+  });
+  const accordion = screen.queryByTestId("accordion");
+  expect(accordion).toBeInTheDocument();
+});
+it("should be able to make accordion without borderdered-container via `flush` props", () => {
+  const screen = render({
+    components: { pAccordion },
+    template: "<p-accordion flush />"
+  });
+  const accordion = screen.getByTestId("accordion");
+  expect(accordion).toBeInTheDocument();
+  expect(accordion).toHaveClass("accordion", "accordion--flush");
+});
+it("should be able to make accordion space on each item via `pill` props", () => {
+  const screen = render({
+    components: { pAccordion },
+    template: "<p-accordion pill />"
+  });
+  const accordion = screen.getByTestId("accordion");
+  expect(accordion).toBeInTheDocument();
+  expect(accordion).toHaveClass("accordion", "accordion--pills");
+});
+it("should hide caret icon if props `no-caret` is provided", () => {
+  const screen = render({
+    components: { pAccordion, pAccordionItem },
+    template: `
+      <p-accordion no-caret>
+        <p-accordion-item title="Item 1">
+          Content Item 1
+        </p-accordion-item>
+        <p-accordion-item title="Item 2">
+          Content Item 2
+        </p-accordion-item>
+      </p-accordion>
+    `
+  });
+  const accordion = screen.getByTestId("accordion");
+  expect(accordion).toBeInTheDocument();
+  const items = screen.queryAllByTestId("accordion-item");
+  for (const item of items) {
+    const caret = item.querySelector(".accordion__item__caret");
+    expect(caret).not.toBeInTheDocument();
+  }
+});
+it("should collapse other items if expanding one", async () => {
+  const model = ref("");
+  const screen = render({
+    components: { pAccordion, pAccordionItem },
+    template: `
+      <p-accordion v-model="model">
+        <p-accordion-item title="Item 1">
+          Content Item 1
+        </p-accordion-item>
+        <p-accordion-item title="Item 2">
+          Content Item 2
+        </p-accordion-item>
+      </p-accordion>
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const accordion = screen.getByTestId("accordion");
+  const items = screen.queryAllByTestId("accordion-item");
+  const activators = screen.queryAllByTestId("accordion-item-activator");
+  expect(accordion).toBeInTheDocument();
+  await fireEvent.click(activators.at(0));
+  expect(model.value).toBe(0);
+  expect(items.at(0)).toHaveClass("expanded");
+  expect(items.at(1)).toHaveClass("collapsed");
+  await fireEvent.click(activators.at(1));
+  expect(model.value).toBe(1);
+  expect(items.at(0)).toHaveClass("collapsed");
+  expect(items.at(1)).toHaveClass("expanded");
+});
+it("should be support expand multiple accordion items if props `multiple` is provided", async () => {
+  const screen = render({
+    components: { pAccordion, pAccordionItem },
+    template: `
+      <p-accordion multiple>
+        <p-accordion-item title="Item 1">
+          Content Item 1
+        </p-accordion-item>
+        <p-accordion-item title="Item 2">
+          Content Item 2
+        </p-accordion-item>
+      </p-accordion>
+    `
+  });
+  const accordion = screen.getByTestId("accordion");
+  expect(accordion).toBeInTheDocument();
+  const items = screen.queryAllByTestId("accordion-item");
+  const activators = screen.queryAllByTestId("accordion-item-activator");
+  await fireEvent.click(activators.at(0));
+  await fireEvent.click(activators.at(1));
+  expect(items.at(0)).toHaveClass("expanded");
+  expect(items.at(1)).toHaveClass("expanded");
+  await fireEvent.click(activators.at(1));
+  expect(items.at(0)).toHaveClass("expanded");
+  expect(items.at(1)).not.toHaveClass("expanded");
+});
+it("should be render accordion items with same length if props `items` is provided", async () => {
+  const items = defineAccordion([
+    {
+      title: "Item Title 1",
+      content: "Content Item 1"
+    },
+    {
+      title: "Item Title 2",
+      content: "Content Item 2"
+    },
+    {
+      title: "Item Title 3",
+      content: "Content Item 3",
+      disabled: true
+    },
+    {
+      title: "Item Title 4",
+      content: "Content Item 4"
+    }
+  ]);
+  const screen = render({
+    components: { pAccordion },
+    template: `
+      <p-accordion :items="items" />
+    `,
+    setup() {
+      return { items };
+    }
+  });
+  const accordion = screen.getByTestId("accordion");
+  const accItems = screen.queryAllByTestId("accordion-item");
+  expect(accordion).toBeInTheDocument();
+  expect(accItems.length).toBe(items.length);
+});
+it("should be unset v-model value if no expanded accordion items", async () => {
+  const model = ref("");
+  const screen = render({
+    components: { pAccordion, pAccordionItem },
+    template: `
+      <p-accordion v-model="model">
+        <p-accordion-item title="Item 1">
+          Content Item 1
+        </p-accordion-item>
+      </p-accordion>
+    `,
+    setup() {
+      return { model };
+    }
+  });
+  const accordion = screen.getByTestId("accordion");
+  const activators = screen.queryAllByTestId("accordion-item-activator");
+  expect(accordion).toBeInTheDocument();
+  await fireEvent.click(activators.at(0));
+  expect(model.value).toBe(0);
+  await fireEvent.click(activators.at(0));
+  expect(model.value).toBeUndefined();
+});

package/dist/components/accordion/Accordion.vue

@@ -21,58 +21,48 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { useVModel } from '../input'
-import { type AccordionItem } from '.'
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
-import Item from './AccordionItem.vue'
-import AccordionItems from './AccordionItems.vue'
-
+<script setup>
+import { useVModel } from "../input";
+import {} from ".";
+import { computed } from "vue-demi";
+import Item from "./AccordionItem.vue";
+import AccordionItems from "./AccordionItems.vue";
 const props = defineProps({
   modelValue: {
-    type   : [Number, Array] as PropType<number | number[]>,
-    default: undefined,
+    type: [Number, Array],
+    default: void 0
   },
   multiple: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   flush: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   pill: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   noCaret: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   items: {
-    type   : Array as PropType<AccordionItem[]>,
-    default: () => ([] as AccordionItem[]),
-  },
-})
-
-defineEmits<{
-  'update:modelValue': [unknown],
-}>()
-
-const model = useVModel(props)
-
+    type: Array,
+    default: () => []
+  }
+});
+defineEmits(["update:modelValue"]);
+const model = useVModel(props);
 const classNames = computed(() => {
-  const result: string[] = ['accordion']
-
+  const result = ["accordion"];
   if (props.flush)
-    result.push('accordion--flush')
-
+    result.push("accordion--flush");
   if (props.pill)
-    result.push('accordion--pills')
-
-  return result
-})
+    result.push("accordion--pills");
+  return result;
+});
 </script>
 
 <style lang="postcss">

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

@@ -0,0 +1,80 @@
+import { type AccordionItem } from '.';
+import type { PropType } from 'vue-demi';
+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<{
+    modelValue: {
+        type: PropType<number | number[]>;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flush: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    items: {
+        type: PropType<AccordionItem[]>;
+        default: () => AccordionItem[];
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: unknown) => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<number | number[]>;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flush: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCaret: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    items: {
+        type: PropType<AccordionItem[]>;
+        default: () => AccordionItem[];
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+}>, {
+    modelValue: number | number[];
+    noCaret: boolean;
+    multiple: boolean;
+    flush: boolean;
+    pill: boolean;
+    items: AccordionItem[];
+}, {}, {}, {}, 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/accordion/AccordionItem.spec.d.ts

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

package/dist/components/accordion/AccordionItem.spec.mjs

@@ -0,0 +1,185 @@
+import { render, fireEvent } from "@testing-library/vue";
+import { vi } from "vitest";
+import pAccordionItem from "./AccordionItem.vue";
+import iconPrivy from "@privyid/persona-icon/vue/privy-alt/24.vue";
+import { markRaw } from "vue-demi";
+it("should render properly without any props", () => {
+  const screen = render({
+    components: { pAccordionItem },
+    template: `
+      <p-accordion-item />
+    `
+  });
+  const accordion = screen.queryByTestId("accordion-item");
+  expect(accordion).toBeInTheDocument();
+  expect(accordion).toHaveClass("accordion__item");
+});
+it("should be disable when accordion item has `disabled` props", async () => {
+  const screen = render({
+    components: { pAccordionItem },
+    template: `
+      <p-accordion-item disabled />
+    `
+  });
+  const accordion = screen.queryByTestId("accordion-item");
+  const activator = screen.queryByTestId("accordion-item-activator");
+  expect(accordion).toBeInTheDocument();
+  expect(accordion).toHaveClass("accordion__item--disabled");
+  await fireEvent.click(activator);
+  expect(accordion).toHaveClass("collapsed");
+});
+it("should be render title text if props `title` is provided", async () => {
+  const screen = render({
+    components: { pAccordionItem },
+    template: `
+      <p-accordion-item title="Item Title 1" />
+    `
+  });
+  const accordion = screen.queryByTestId("accordion-item");
+  const titleEl = screen.queryByTestId("subheading");
+  expect(accordion).toBeInTheDocument();
+  expect(titleEl).toBeInTheDocument();
+  expect(titleEl).toHaveClass("subheading");
+  const title = screen.queryByText("Item Title 1");
+  expect(title).toBeInTheDocument();
+});
+it("should toggle expand accordion content if activator clicked", async () => {
+  const screen = render({
+    components: { pAccordionItem },
+    template: `
+      <p-accordion-item />
+    `
+  });
+  const accordion = screen.queryByTestId("accordion-item");
+  const activator = screen.queryByTestId("accordion-item-activator");
+  const content = screen.queryByTestId("accordion-item-content");
+  expect(accordion).toBeInTheDocument();
+  expect(activator).toBeInTheDocument();
+  expect(accordion).toHaveClass("collapsed");
+  expect(content).toHaveAttribute("data-collapse", "collapsed");
+  await fireEvent.click(activator);
+  expect(accordion).toHaveClass("expanded");
+  expect(content).not.toHaveAttribute("data-collapse", "collapsed");
+});
+it("should trigger event `expand` and `collapse` when toggle accordion item", async () => {
+  const spyExpand = vi.fn();
+  const spyCollapse = vi.fn();
+  const screen = render({
+    components: { pAccordionItem },
+    template: `
+      <p-accordion-item @expand="onExpand" @collapse="onCollapse" />
+    `,
+    setup() {
+      return { onExpand: spyExpand, onCollapse: spyCollapse };
+    }
+  });
+  const accordion = screen.queryByTestId("accordion-item");
+  const activator = screen.queryByTestId("accordion-item-activator");
+  expect(accordion).toBeInTheDocument();
+  expect(activator).toBeInTheDocument();
+  await fireEvent.click(activator);
+  expect(spyExpand).toBeCalled();
+  await fireEvent.click(activator);
+  expect(spyCollapse).toBeCalled();
+});
+it("should hide caret icon if props `no-caret` is provided", () => {
+  const screen = render({
+    components: { pAccordionItem },
+    template: `
+      <p-accordion-item no-caret />
+    `
+  });
+  const accordion = screen.queryByTestId("accordion-item");
+  const caret = screen.queryByTestId("accordion-item-caret");
+  expect(accordion).toBeInTheDocument();
+  expect(caret).not.toBeInTheDocument();
+});
+it("Should be able to add custom title class from `titleClass` props", () => {
+  const screen = render({
+    components: { pAccordionItem },
+    template: `
+      <p-accordion-item 
+        title="custom title class" 
+        titleClass="custom-title-class">
+        content
+      </p-accordion-item>
+    `
+  });
+  const title = screen.queryByTestId("accordion-item-title");
+  expect(title).toBeInTheDocument();
+  expect(title).toHaveClass("custom-title-class");
+});
+it("Should be able to add custom content class from `contentClass` props", () => {
+  const screen = render({
+    components: { pAccordionItem },
+    template: `
+      <p-accordion-item 
+        title="custom content class"
+        contentClass="custom-content-class">
+        content
+      </p-accordion-item>
+    `
+  });
+  const title = screen.queryByTestId("accordion-item-content");
+  expect(title).toBeInTheDocument();
+  expect(title).toHaveClass("custom-content-class");
+});
+it("should be able to add accordion title via slot `title`", () => {
+  const screen = render({
+    components: { pAccordionItem },
+    template: `
+      <p-accordion-item>
+        <template #title>
+          Accordion Title
+        </template>
+        Accordion Text
+      </p-accordion-item>
+    `
+  });
+  const title = screen.queryByTestId("accordion-item-title");
+  const text = screen.queryByText("Accordion Title");
+  expect(title).toBeInTheDocument();
+  expect(title).toHaveClass("accordion__item__title");
+  expect(text).toBeInTheDocument();
+});
+it("Should be able to custom icon via `icon` props", () => {
+  const screen = render({
+    components: { pAccordionItem },
+    template: `
+      <p-accordion-item 
+        title="custom icon class"
+        icon="http://lorem-picsum.com">
+        content
+      </p-accordion-item>
+    `
+  });
+  const icon = screen.queryByTestId("accordion-item-icon");
+  const iconImg = screen.queryByTestId("accordion-item-icon-image");
+  expect(icon).toBeInTheDocument();
+  expect(icon).toHaveClass("accordion__item__icon");
+  expect(iconImg).toBeInTheDocument();
+  expect(iconImg).toBeInstanceOf(HTMLImageElement);
+  expect(iconImg).toHaveAttribute("src", "http://lorem-picsum.com");
+});
+it("should be able to custom icon with Component and add custom icon class via `icon` & `iconClass` props", () => {
+  const screen = render({
+    components: {
+      pAccordionItem,
+      iconPrivy
+    },
+    template: `
+      <p-accordion-item 
+        title="custom icon"
+        :icon="icon"
+        iconClass="custom-icon-class">
+        content
+      </p-accordion-item>
+    `,
+    setup() {
+      return { icon: markRaw(iconPrivy) };
+    }
+  });
+  const icon = screen.queryByTestId("accordion-item-icon");
+  expect(icon).toBeInTheDocument();
+  expect(icon).toHaveClass("custom-icon-class");
+});