@privyid/persona 1.2.0 → 1.2.1

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

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

package/dist/components/accordion/AccordionItem.vue

@@ -1,224 +0,0 @@
-<template>
-  <div
-    :class="classNames"
-    data-testid="accordion-item"
-    :disabled="disabled">
-    <slot
-      name="activator"
-      :toggle="toggle"
-      :expanded="model">
-      <div
-        class="accordion__item__activator"
-        data-testid="accordion-item-activator"
-        @click="toggle">
-        <div
-          class="accordion__item__title"
-          :class="titleClass"
-          data-testid="accordion-item-title">
-          <div
-            v-if="accordionIcon"
-            class="accordion__item__icon"
-            data-testid="accordion-item-icon"
-            :class="iconClass">
-            <component
-              :is="accordionIcon" />
-          </div>
-          <slot name="title">
-            <Subheading>
-              {{ title }}
-            </Subheading>
-          </slot>
-        </div>
-        <slot
-          v-if="!noCaret"
-          name="caret"
-          :expanded="model">
-          <ChevronUp
-            v-if="model"
-            class="accordion__item__caret"
-            data-testid="accordion-item-caret" />
-          <ChevronDown
-            v-else
-            class="accordion__item__caret"
-            data-testid="accordion-item-caret" />
-        </slot>
-      </div>
-    </slot>
-
-    <p-collapse
-      :model-value="model"
-      class="accordion__item__content"
-      :class="contentClass"
-      data-testid="accordion-item-content">
-      <slot :expanded="model" />
-    </p-collapse>
-  </div>
-</template>
-
-<script setup>
-import { useVModel } from "../input";
-import {
-  computed,
-  watch,
-  h
-} from "vue-demi";
-import Subheading from "../subheading/Subheading.vue";
-import pCollapse from "../collapse/Collapse.vue";
-import ChevronUp from "@privyid/persona-icon/vue/chevron-up/16.vue";
-import ChevronDown from "@privyid/persona-icon/vue/chevron-down/16.vue";
-defineOptions({ name: "AccordionItem" });
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  title: {
-    type: String,
-    default: ""
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  noCaret: {
-    type: Boolean,
-    default: false
-  },
-  icon: {
-    type: [
-      String,
-      Object,
-      Function
-    ],
-    default: void 0
-  },
-  titleClass: {
-    type: [
-      String,
-      Array,
-      Object
-    ],
-    default: void 0
-  },
-  contentClass: {
-    type: [
-      String,
-      Array,
-      Object
-    ],
-    default: void 0
-  },
-  iconClass: {
-    type: [
-      String,
-      Array,
-      Object
-    ],
-    default: void 0
-  }
-});
-const emit = defineEmits(["update:modelValue", "expand", "collapse"]);
-const model = useVModel(props);
-const classNames = computed(() => {
-  const result = ["accordion__item"];
-  if (props.disabled)
-    result.push("accordion__item--disabled");
-  if (model.value)
-    result.push("expanded");
-  else
-    result.push("collapsed");
-  return result;
-});
-const accordionIcon = computed(() => {
-  if (props.icon) {
-    if (typeof props.icon === "string") {
-      return () => h("img", {
-        "src": props.icon,
-        "max-width": "100%",
-        "height": "auto",
-        "data-testid": "accordion-item-icon-image"
-      });
-    }
-    return props.icon;
-  }
-});
-function toggle() {
-  if (!props.disabled)
-    model.value = !model.value;
-}
-watch(model, (value) => {
-  if (value)
-    emit("expand");
-  else
-    emit("collapse");
-});
-defineSlots();
-</script>
-
-<style lang="postcss">
-.accordion__item {
-  --p-accordion-bg: theme(backgroundColor.default.DEFAULT);
-  --p-accordion-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
-  --p-accordion-collapsed-border: theme(borderColor.default.DEFAULT);
-  --p-accordion-collapsed-border-dark: theme(borderColor.dark.default.DEFAULT);
-  --p-accordion-expanded-border: theme(borderColor.default.DEFAULT);
-  --p-accordion-expanded-border-dark: theme(borderColor.dark.default.DEFAULT);
-  --p-accordion-expanded-activator-bg: theme(backgroundColor.default.alpha);
-  --p-accordion-expanded-activator-bg-dark: theme(backgroundColor.dark.default.alpha);
-  --p-accordion-expanded-activator-color: theme(textColor.default);
-  --p-accordion-expanded-activator-color-dark: theme(textColor.dark.default);
-
-  @apply w-full bg-[color:var(--p-accordion-bg)];
-  @apply dark:bg-[color:var(--p-accordion-bg-dark)];
-
-  &:not(.accordion &) {
-    @apply rounded border;
-
-    &.collapsed {
-      @apply border-[color:var(--p-accordion-collapsed-border)];
-      @apply dark:border-[color:var(--p-accordion-collapsed-border-dark)];
-    }
-
-    &.expanded {
-      @apply border-[color:var(--p-accordion-expanded-border)];
-      @apply dark:border-[color:var(--p-accordion-expanded-border-dark)];
-    }
-
-    .accordion__item__activator {
-      @apply bg-[color:var(--p-accordion-expanded-activator-bg)];
-      @apply dark:bg-[color:var(--p-accordion-expanded-activator-bg-dark)];
-    }
-  }
-
-  &__activator {
-    @apply flex justify-between items-center p-4 cursor-pointer space-x-2;
-
-    .expanded & {
-      @apply bg-[color:var(--p-accordion-expanded-activator-bg)];
-      @apply dark:bg-[color:var(--p-accordion-expanded-activator-bg-dark)];
-
-      .accordion__item__title,
-      .subheading {
-        @apply text-[color:var(--p-accordion-expanded-activator-color)];
-        @apply dark:text-[color:var(--p-accordion-expanded-activator-color-dark)];
-      }
-    }
-  }
-
-  &__title {
-    @apply grow flex;
-  }
-
-  &__caret {
-    @apply flex-shrink-0;
-  }
-
-  &:is(&--disabled) {
-    @apply pointer-events-none;
-
-    > .accordion__item__activator {
-      @apply opacity-50;
-    }
-  }
-}
-</style>

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

@@ -1,121 +0,0 @@
-import type { VNode, PropType, Component } from 'vue-demi';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<{
-        activator(props: {
-            toggle: () => void;
-            expanded: boolean;
-        }): VNode[];
-        caret(props: {
-            expanded: boolean;
-        }): VNode[];
-        default(props: {
-            expanded: boolean;
-        }): VNode[];
-    }> & {
-        activator(props: {
-            toggle: () => void;
-            expanded: boolean;
-        }): VNode[];
-        caret(props: {
-            expanded: boolean;
-        }): VNode[];
-        default(props: {
-            expanded: boolean;
-        }): VNode[];
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    noCaret: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    icon: {
-        type: PropType<string | Component>;
-        default: undefined;
-    };
-    titleClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    contentClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    iconClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: boolean) => void;
-    collapse: () => void;
-    expand: () => void;
-}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    noCaret: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    icon: {
-        type: PropType<string | Component>;
-        default: undefined;
-    };
-    titleClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    contentClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    iconClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-}>> & Readonly<{
-    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
-    onCollapse?: (() => any) | undefined;
-    onExpand?: (() => any) | undefined;
-}>, {
-    title: string;
-    modelValue: boolean;
-    disabled: boolean;
-    noCaret: boolean;
-    icon: string | Component;
-    titleClass: string | unknown[] | Record<string, any>;
-    contentClass: string | unknown[] | Record<string, any>;
-    iconClass: string | unknown[] | Record<string, any>;
-}, {}, {}, {}, 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/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[];
-    noCaret: boolean;
-    multiple: 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[];