@privyid/persona 1.1.2 → 1.2.0

package/dist/components/popup/Popup.spec.mjs

@@ -0,0 +1,164 @@
+import { fireEvent, render } from "@testing-library/vue";
+import { vi } from "vitest";
+import { markRaw } from "vue-demi";
+import Popup from "./Popup.vue";
+import IconFailed from "@privyid/persona-icon/vue/trash/24.vue";
+import { SVGElement } from "happy-dom";
+it("should render title and text properly", () => {
+  const screen = render({
+    components: { Popup },
+    template: `
+      <Popup
+        title="This is title"
+        text="this is text body" />
+    `
+  });
+  const popup = screen.queryByTestId("popup");
+  const title = screen.queryByText("This is title");
+  const text = screen.queryByText("this is text body");
+  expect(popup).toBeInTheDocument();
+  expect(popup).toHaveClass("popup", "popup--info", "popup--simple");
+  expect(title).toBeInTheDocument();
+  expect(text).toBeInTheDocument();
+});
+it('should have class "success" if type prop set to "success"', () => {
+  const screen = render({
+    components: { Popup },
+    template: `
+      <Popup
+        type="success"
+        title="This is title"
+        text="this is text body" />
+    `
+  });
+  const popup = screen.queryByTestId("popup");
+  expect(popup).toBeInTheDocument();
+  expect(popup).toHaveClass("popup", "popup--success", "popup--simple");
+  expect(popup).not.toHaveClass("popup--info");
+});
+it('should have class "filled" if variant prop set to "filled"', () => {
+  const screen = render({
+    components: { Popup },
+    template: `
+      <Popup
+        variant="filled"
+        title="This is title"
+        text="this is text body" />
+    `
+  });
+  const popup = screen.queryByTestId("popup");
+  expect(popup).toBeInTheDocument();
+  expect(popup).toHaveClass("popup", "popup--info", "popup--filled");
+  expect(popup).not.toHaveClass("popup--simple");
+});
+it("should dismiss if close button clicked", async () => {
+  const spy = vi.fn();
+  const screen = render({
+    components: { Popup },
+    template: `
+      <Popup
+        title="This is title"
+        text="this is text body"
+        @dismissed="onDismissed" />
+    `,
+    methods: { onDismissed: spy }
+  });
+  const popup = screen.queryByTestId("popup");
+  const close = screen.queryByTestId("popup-close");
+  expect(popup).toBeInTheDocument();
+  expect(close).toBeInTheDocument();
+  expect(spy).not.toBeCalled();
+  await fireEvent.click(close);
+  expect(spy).toBeCalled();
+});
+it("should render title and text properly", () => {
+  const screen = render({
+    components: { Popup },
+    template: `
+      <Popup
+        title="Popup title" />
+    `
+  });
+  const popup = screen.queryByTestId("popup");
+  const title = screen.queryByText("Popup title");
+  const text = screen.queryByTestId("popup-text");
+  expect(popup).toBeInTheDocument();
+  expect(title).toBeInTheDocument();
+  expect(text).not.toBeInTheDocument();
+});
+it("should be able to custom icon color via `iconColor` props", () => {
+  const screen = render({
+    components: { Popup },
+    template: `
+      <Popup
+        title="Popup title"
+        icon-color="warning" />
+    `
+  });
+  const popup = screen.queryByTestId("popup");
+  const title = screen.queryByText("Popup title");
+  const icon = screen.queryByTestId("popup-icon");
+  expect(popup).toBeInTheDocument();
+  expect(title).toBeInTheDocument();
+  expect(icon).toHaveClass("popup__icon--warning");
+});
+it("should be able to custom icon using url", () => {
+  const screen = render({
+    components: { Popup },
+    template: `
+      <Popup
+        title="Popup title"
+        icon="http://lorem-picsum.com" />
+    `
+  });
+  const popup = screen.queryByTestId("popup");
+  const icon = screen.queryByTestId("popup-icon-image");
+  expect(popup).toBeInTheDocument();
+  expect(icon).toBeInTheDocument();
+  expect(icon).toBeInstanceOf(HTMLImageElement);
+  expect(icon).toHaveAttribute("src", "http://lorem-picsum.com");
+});
+it("should be able to custom icon using component", () => {
+  const screen = render({
+    components: { Popup },
+    template: `
+      <Popup
+        title="Popup title"
+        :icon="icon" />
+    `,
+    setup() {
+      return { icon: markRaw(IconFailed) };
+    }
+  });
+  const popup = screen.queryByTestId("popup");
+  const icon = screen.queryByTestId("popup-icon").firstChild;
+  expect(popup).toBeInTheDocument();
+  expect(icon).toBeInTheDocument();
+  expect(icon).toBeInstanceOf(SVGElement);
+  expect(icon).toHaveClass("persona-icon");
+});
+it("should able to add action button", async () => {
+  const onClick = vi.fn();
+  const screen = render({
+    components: { Popup },
+    template: `
+      <Popup
+        title="Popup title"
+        :actions="actions" />
+    `,
+    setup() {
+      return {
+        actions: [
+          {
+            text: "View Doc",
+            onClick
+          }
+        ]
+      };
+    }
+  });
+  const action = screen.queryByText("View Doc");
+  expect(action).toBeInTheDocument();
+  await fireEvent.click(action);
+  expect(onClick).toBeCalled();
+});

package/dist/components/popup/Popup.vue

@@ -47,131 +47,104 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type { Component, PropType } from 'vue-demi'
+<script setup>
 import {
   computed,
-  h,
-} from 'vue-demi'
-import type {
-  PopupActionOption,
-  PopupStyleVariant,
-  PopupTypeVariant,
-} from '.'
-import IconClose from '@privyid/persona-icon/vue/close/16.vue'
-import { vPMd } from '../markdown'
-import type { ColorVariant } from '../button'
-import type { AdditionalAttr } from '../global/types'
-import { useNotifyItem } from '../notify'
-import { PopupIcons } from '.'
-
+  h
+} from "vue-demi";
+import IconClose from "@privyid/persona-icon/vue/close/16.vue";
+import { vPMd } from "../markdown";
+import { useNotifyItem } from "../notify";
+import { PopupIcons } from ".";
 const props = defineProps({
   title: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   text: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   type: {
-    type   : String as PropType<PopupTypeVariant>,
-    default: 'info',
+    type: String,
+    default: "info"
   },
   variant: {
-    type   : String as PropType<PopupStyleVariant>,
-    default: 'simple',
+    type: String,
+    default: "simple"
   },
   icon: {
     type: [
       String,
       Object,
-      Function,
-    ] as PropType<string | Component>,
-    default: undefined,
+      Function
+    ],
+    default: void 0
   },
   iconColor: {
-    type   : String as PropType<ColorVariant>,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   popupAttrs: {
-    type   : Object as PropType<AdditionalAttr>,
-    default: undefined,
+    type: Object,
+    default: void 0
   },
   popupClass: {
     type: [
       String,
       Array,
-      Object,
+      Object
     ],
-    default: undefined,
+    default: void 0
   },
   actions: {
-    type   : Array as PropType<PopupActionOption[]>,
-    default: () => ([]),
+    type: Array,
+    default: () => []
   },
   dismissable: {
-    type   : Boolean,
-    default: true,
-  },
-})
-
-const notify = useNotifyItem()
-const emit   = defineEmits<{
-  'dismissed': [],
-}>()
-
+    type: Boolean,
+    default: true
+  }
+});
+const notify = useNotifyItem();
+const emit = defineEmits(["dismissed"]);
 const classNames = computed(() => {
-  const result: string[] = ['popup']
-
+  const result = ["popup"];
   if (props.type)
-    result.push(`popup--${props.type}`)
-
+    result.push(`popup--${props.type}`);
   if (props.variant)
-    result.push(`popup--${props.variant}`)
-
-  return result
-})
-
+    result.push(`popup--${props.variant}`);
+  return result;
+});
 const classIcon = computed(() => {
-  const result: string[] = ['default']
-
+  const result = ["default"];
   if (props.iconColor)
-    result.push(`popup__icon--${props.iconColor}`)
-
-  return result
-})
-
+    result.push(`popup__icon--${props.iconColor}`);
+  return result;
+});
 const toastIcon = computed(() => {
   if (!props.icon)
-    return PopupIcons[props.type]
-
-  if (typeof props.icon === 'string') {
-    return () => h('img', {
-      'src'        : props.icon,
-      'width'      : 20,
-      'height'     : 20,
-      'data-testid': 'popup-icon-image',
-    })
+    return PopupIcons[props.type];
+  if (typeof props.icon === "string") {
+    return () => h("img", {
+      "src": props.icon,
+      "width": 20,
+      "height": 20,
+      "data-testid": "popup-icon-image"
+    });
   }
-
-  return props.icon
-})
-
-function close () {
-  notify.close()
-
-  emit('dismissed')
+  return props.icon;
+});
+function close() {
+  notify.close();
+  emit("dismissed");
 }
-
-async function onActionClick (action: PopupActionOption) {
-  const event = new MouseEvent('click')
-
-  if (typeof action.onClick === 'function')
-    await action.onClick(Object.assign(event, { close }))
-
+async function onActionClick(action) {
+  const event = new MouseEvent("click");
+  if (typeof action.onClick === "function")
+    await action.onClick(Object.assign(event, { close }));
   if (!event.defaultPrevented)
-    close()
+    close();
 }
 </script>
 
@@ -424,5 +397,4 @@ async function onActionClick (action: PopupActionOption) {
     }
   }
 }
-
 </style>

package/dist/components/popup/Popup.vue.d.ts

@@ -0,0 +1,103 @@
+import type { Component, PropType } from 'vue-demi';
+import type { PopupActionOption, PopupStyleVariant, PopupTypeVariant } from '.';
+import type { ColorVariant } from '../button';
+import type { AdditionalAttr } from '../global/types';
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: PropType<PopupTypeVariant>;
+        default: string;
+    };
+    variant: {
+        type: PropType<PopupStyleVariant>;
+        default: string;
+    };
+    icon: {
+        type: PropType<string | Component>;
+        default: undefined;
+    };
+    iconColor: {
+        type: PropType<ColorVariant>;
+        default: undefined;
+    };
+    popupAttrs: {
+        type: PropType<AdditionalAttr>;
+        default: undefined;
+    };
+    popupClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    actions: {
+        type: PropType<PopupActionOption[]>;
+        default: () => never[];
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    dismissed: () => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: PropType<PopupTypeVariant>;
+        default: string;
+    };
+    variant: {
+        type: PropType<PopupStyleVariant>;
+        default: string;
+    };
+    icon: {
+        type: PropType<string | Component>;
+        default: undefined;
+    };
+    iconColor: {
+        type: PropType<ColorVariant>;
+        default: undefined;
+    };
+    popupAttrs: {
+        type: PropType<AdditionalAttr>;
+        default: undefined;
+    };
+    popupClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    actions: {
+        type: PropType<PopupActionOption[]>;
+        default: () => never[];
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onDismissed?: (() => any) | undefined;
+}>, {
+    text: string;
+    type: PopupTypeVariant;
+    title: string;
+    icon: string | Component;
+    variant: PopupStyleVariant;
+    dismissable: boolean;
+    iconColor: ColorVariant;
+    popupAttrs: AdditionalAttr;
+    popupClass: string | unknown[] | Record<string, any>;
+    actions: PopupActionOption[];
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -27,10 +27,10 @@ interface Option extends Omit<NotifyOption, 'component'> {
     actions?: PopupActionOption[];
 }
 export declare const PopupIcons: {
-    info: any;
-    success: any;
-    warning: any;
-    error: any;
+    info: import("vue-demi").Raw<import("vue-demi").DefineComponent<{}, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>>;
+    success: import("vue-demi").Raw<import("vue-demi").DefineComponent<{}, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>>;
+    warning: import("vue-demi").Raw<import("vue-demi").DefineComponent<{}, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>>;
+    error: import("vue-demi").Raw<import("vue-demi").DefineComponent<{}, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>>;
 };
 export type PopupOption = RequireAtLeastOne<Option, 'text' | 'title'>;
 declare function showPopup(text: string, title?: string, type?: PopupTypeVariant, variant?: PopupStyleVariant): Promise<PopupInstance>;