@privyid/persona 1.2.1 → 1.2.2-rc.2

package/dist/components/popover/Popover.vue.d.ts

@@ -0,0 +1,209 @@
+import type { PropType, VNode } from 'vue';
+import type { Placement } from '@floating-ui/dom';
+import type { ColorVariant } from '../tooltip';
+declare function toggle(): void;
+declare function show(): void;
+declare function hide(): void;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        activator(props: {
+            isShow: boolean;
+            show: () => void;
+            hide: () => void;
+            toggle: () => void;
+        }): VNode[];
+        default(props: {
+            isShow: boolean;
+            show: () => void;
+            hide: () => void;
+            toggle: () => void;
+        }): VNode[];
+    }> & {
+        activator(props: {
+            isShow: boolean;
+            show: () => void;
+            hide: () => void;
+            toggle: () => void;
+        }): VNode[];
+        default(props: {
+            isShow: boolean;
+            show: () => void;
+            hide: () => void;
+            toggle: () => void;
+        }): VNode[];
+    };
+    refs: {
+        root: HTMLDivElement;
+        tooltip: ({
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: Partial<{
+                target: HTMLElement;
+                color: ColorVariant;
+                placement: Placement;
+                show: boolean;
+            }> & Omit<{
+                readonly color: ColorVariant;
+                readonly placement: Placement;
+                readonly show: boolean;
+                readonly target?: HTMLElement | undefined;
+                readonly onShow?: ((args_0: HTMLElement) => any) | undefined;
+                readonly onHide?: ((args_0: HTMLElement) => any) | undefined;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "target" | "color" | "placement" | "show">;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import("vue").Slot<any> | undefined;
+            }>;
+            $root: import("vue").ComponentPublicInstance | null;
+            $parent: import("vue").ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: ((event: "show", args_0: HTMLElement) => void) & ((event: "hide", args_0: HTMLElement) => void);
+            $el: any;
+            $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+                show: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
+                color: {
+                    type: PropType<ColorVariant>;
+                    default: string;
+                };
+                target: {
+                    type: PropType<HTMLElement>;
+                    default: undefined;
+                };
+                placement: {
+                    type: PropType<Placement>;
+                    default: string;
+                };
+            }>> & Readonly<{
+                onShow?: ((args_0: HTMLElement) => any) | undefined;
+                onHide?: ((args_0: HTMLElement) => any) | undefined;
+            }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                show: (args_0: HTMLElement) => void;
+                hide: (args_0: HTMLElement) => void;
+            }, string, {
+                target: HTMLElement;
+                color: ColorVariant;
+                placement: Placement;
+                show: boolean;
+            }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import("vue").nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+        } & Readonly<{
+            target: HTMLElement;
+            color: ColorVariant;
+            placement: Placement;
+            show: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            show: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            color: {
+                type: PropType<ColorVariant>;
+                default: string;
+            };
+            target: {
+                type: PropType<HTMLElement>;
+                default: undefined;
+            };
+            placement: {
+                type: PropType<Placement>;
+                default: string;
+            };
+        }>> & Readonly<{
+            onShow?: ((args_0: HTMLElement) => any) | undefined;
+            onHide?: ((args_0: HTMLElement) => any) | undefined;
+        }>, "target" | "color" | "placement" | "show"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+            };
+        }) | null;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    isShow: import("vue").Ref<boolean, boolean>;
+    show: typeof show;
+    hide: typeof hide;
+    toggle: typeof toggle;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: boolean) => void;
+    show: () => void;
+    hide: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
+    onShow?: (() => any) | undefined;
+    onHide?: (() => any) | undefined;
+}>, {
+    modelValue: boolean;
+    disabled: boolean;
+    color: ColorVariant;
+    placement: Placement;
+}, {}, {}, {}, 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/popover/index.d.ts

@@ -0,0 +1,17 @@
+import { type InjectionKey, type Ref } from 'vue';
+interface PopoverContext {
+    hide: () => void;
+    show: () => void;
+    toggle: () => void;
+    isShow: Ref<boolean>;
+}
+export declare const POPOVER_CONTEXT: InjectionKey<PopoverContext>;
+export declare function usePopoverPromise<R = any>(): {
+    start: () => Promise<R | undefined>;
+    finish: (result?: R | Error) => void;
+    bind: () => {
+        modelValue: boolean;
+        'onUpdate:modelValue'(value: boolean): void;
+    };
+};
+export {};

package/dist/components/popover/index.mjs

@@ -0,0 +1,52 @@
+import {
+  ref
+} from "vue";
+export const POPOVER_CONTEXT = Symbol("POPOVER_CONTEXT");
+export function usePopoverPromise() {
+  const promise = ref();
+  const resolve = ref();
+  const reject = ref();
+  const isShow = ref(false);
+  function bind() {
+    return {
+      modelValue: isShow.value,
+      "onUpdate:modelValue"(value) {
+        if (resolve.value && !value)
+          finish();
+        isShow.value = value;
+      }
+    };
+  }
+  async function start() {
+    if (!promise.value) {
+      promise.value = new Promise((_resolve, _reject) => {
+        resolve.value = _resolve;
+        reject.value = _reject;
+      });
+    }
+    let result;
+    try {
+      isShow.value = true;
+      result = await promise.value;
+    } finally {
+      promise.value = void 0;
+      resolve.value = void 0;
+      reject.value = void 0;
+      isShow.value = false;
+    }
+    return result;
+  }
+  function finish(result) {
+    if (resolve.value && reject.value) {
+      if (result instanceof Error)
+        reject.value(result);
+      else
+        resolve.value(result);
+    }
+  }
+  return {
+    start,
+    finish,
+    bind
+  };
+}

package/dist/components/popup/Popup.vue

@@ -0,0 +1,412 @@
+<template>
+  <div
+    data-testid="popup"
+    :class="[classNames, popupClass]"
+    v-bind="popupAttrs">
+    <div
+      class="popup__icon"
+      data-testid="popup-icon"
+      :class="classIcon">
+      <component
+        :is="toastIcon"
+        v-if="toastIcon" />
+    </div>
+    <div class="popup__body">
+      <div
+        v-if="title"
+        v-p-md.inline="title"
+        class="popup__title" />
+      <div
+        v-if="text"
+        v-p-md.inline="text"
+        class="popup__text"
+        data-testid="popup-text" />
+      <p-label
+        v-if="label"
+        variant="light"
+        class="w-fit">
+        {{ label }}
+      </p-label>
+      <div
+        v-if="actions.length > 0"
+        class="popup__actions">
+        <template
+          v-for="(action, i) in actions"
+          :key="i">
+          <a
+            v-p-md.inline="action.text"
+            data-testid="popup-action"
+            href="javascript:void"
+            class="popup__action"
+            v-bind="action.attrs"
+            @click.prevent="onActionClick(action)" />
+        </template>
+      </div>
+    </div>
+    <div
+      v-if="dismissable"
+      data-testid="popup-close"
+      class="popup__close"
+      @click="close">
+      <IconClose />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  computed,
+  h
+} from "vue";
+import IconClose from "@privyid/persona-icon/vue/close/16.vue";
+import { vPMd } from "../markdown";
+import { useNotifyItem } from "../notify";
+import { PopupIcons } from ".";
+import pLabel from "../label/Label.vue";
+const props = defineProps({
+  title: {
+    type: String,
+    default: ""
+  },
+  text: {
+    type: String,
+    default: ""
+  },
+  type: {
+    type: String,
+    default: "info"
+  },
+  variant: {
+    type: String,
+    default: "simple"
+  },
+  icon: {
+    type: [
+      String,
+      Object,
+      Function
+    ],
+    default: void 0
+  },
+  iconColor: {
+    type: String,
+    default: void 0
+  },
+  popupAttrs: {
+    type: Object,
+    default: void 0
+  },
+  label: {
+    type: String,
+    default: ""
+  },
+  popupClass: {
+    type: [
+      String,
+      Array,
+      Object
+    ],
+    default: void 0
+  },
+  actions: {
+    type: Array,
+    default: () => []
+  },
+  dismissable: {
+    type: Boolean,
+    default: true
+  }
+});
+const notify = useNotifyItem();
+const emit = defineEmits(["dismissed"]);
+const classNames = computed(() => {
+  const result = ["popup"];
+  if (props.type)
+    result.push(`popup--${props.type}`);
+  if (props.variant)
+    result.push(`popup--${props.variant}`);
+  return result;
+});
+const classIcon = computed(() => {
+  const result = ["default"];
+  if (props.iconColor)
+    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 props.icon;
+});
+function close() {
+  notify.close();
+  emit("dismissed");
+}
+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();
+}
+</script>
+
+<style lang="postcss">
+.popup {
+  --p-popup-icon-color-primary: theme(textColor.brand.accent.DEFAULT);
+  --p-popup-icon-color-primary-dark: theme(textColor.dark.brand.accent.DEFAULT);
+
+  /**
+  * global style
+  * of popup
+  */
+  @apply flex shadow-xl rounded w-72 md:w-96 overflow-hidden;
+
+  .popup__icon,
+  .popup__close {
+    @apply shrink-0 p-4;
+  }
+
+  .popup__icon {
+    @apply flex items-center justify-center;
+  }
+
+  .popup__close {
+    @apply cursor-pointer text-muted hover:text-default;
+    @apply dark:text-dark-muted dark:hover:text-dark-default;
+  }
+
+  .popup__body {
+    @apply py-4 grow space-y-2 flex flex-col overflow-hidden justify-center;
+  }
+
+  .popup__title {
+    @apply text-sm font-medium leading-[1.75] truncate;
+  }
+
+  .popup__text {
+    @apply text-xs line-clamp-2;
+  }
+
+  .popup__actions {
+    @apply space-x-2;
+  }
+
+  .popup__action {
+    @apply text-xs truncate hover:underline;
+  }
+
+  /**
+  * Give padding-left when
+  * popup variant is not filled
+  */
+  &:not(.popup--filled) {
+    .popup__body {
+      @apply pl-4;
+    }
+  }
+
+  /**
+  * set popup info title
+  * and text color
+  */
+  &:is(.popup--info) {
+    .popup__title {
+      @apply text-default;
+      @apply dark:text-dark-default;
+    }
+
+    .popup__text {
+      @apply text-subtle;
+      @apply dark:text-dark-subtle;
+    }
+  }
+
+  /**
+  * set popup info icon color.
+  * provide background when
+  * variant is filled
+  */
+  &&--info {
+    &:is(.popup--simple) {
+      .popup__icon {
+        @apply bg-ground text-info;
+        @apply dark:bg-dark-ground dark:text-dark-info;
+
+        &--default {
+          @apply text-default;
+          @apply dark:text-dark-default;
+        }
+
+        &--warning {
+          @apply text-warning;
+          @apply dark:text-dark-warning;
+        }
+
+        &--success {
+          @apply text-success;
+          @apply dark:text-dark-success;
+        }
+
+        &--primary {
+          @apply text-[color:var(--p-toast-icon-color-primary)];
+          @apply dark:text-[color:var(--p-toast-icon-color-primary-dark)];
+        }
+
+        &--danger {
+          @apply text-danger;
+          @apply dark:text-danger;
+        }
+      }
+      .popup__title {
+        @apply text-default;
+        @apply dark:text-dark-default;
+      }
+    }
+    &.popup--filled {
+      @apply bg-ground text-info;
+      @apply dark:bg-dark-ground dark:text-dark-info;
+    }
+  }
+
+  /**
+  * provide title color
+  * in simple variant.
+  * set popup icon color and background.
+  * provide background color when
+  * variant is filled
+  */
+  &&--error {
+    &.popup--simple {
+      .popup__title {
+        @apply text-danger;
+        @apply dark:text-dark-danger;
+      }
+    }
+
+    .popup__icon,
+    &.popup--filled {
+      @apply bg-danger-emphasis;
+      @apply dark:bg-dark-danger-emphasis;
+    }
+  }
+
+  &&--success {
+    &.popup--simple {
+      .popup__title {
+        @apply text-success;
+        @apply dark:text-dark-success;
+      }
+    }
+
+    .popup__icon,
+    &.popup--filled {
+      @apply bg-success-emphasis;
+      @apply dark:bg-dark-success-emphasis;
+    }
+  }
+
+  &&--warning {
+    &.popup--simple {
+      .popup__title {
+        @apply text-warning;
+        @apply dark:text-dark-warning;
+      }
+    }
+
+    .popup__icon,
+    &.popup--filled {
+      @apply bg-warning-emphasis;
+      @apply dark:bg-dark-warning-emphasis;
+    }
+  }
+
+  /**
+  * set global style
+  * of popup in simple
+  * variant
+  */
+  &&--simple {
+    @apply bg-default;
+    @apply dark:bg-dark-default;
+
+    .popup__text {
+      @apply text-subtle;
+      @apply dark:text-dark-subtle;
+    }
+
+    &:not(.popup--info) {
+      .popup__icon {
+        @apply text-state-emphasis;
+        @apply dark:text-dark-state-emphasis;
+      }
+    }
+
+    .popup__action {
+      @apply text-info;
+      @apply dark:text-dark-info;
+      @apply underline hover:no-underline;
+    }
+  }
+
+  /**
+  * aligning popup icon
+  * when variant is filled.
+  * provide text color
+  * when popup color isn't info
+  */
+  &&--filled {
+    .popup__icon {
+      @apply items-start;
+
+      > svg {
+        @apply h-[24.56px];
+      }
+
+      &--default {
+        @apply text-on-emphasis;
+        @apply dark:text-dark-on-emphasis;
+      }
+
+      &--warning {
+        @apply text-warning;
+        @apply dark:text-dark-warning;
+      }
+
+      &--success {
+        @apply text-success;
+        @apply dark:text-dark-success;
+      }
+
+      &--primary {
+        @apply text-[color:var(--p-popup-icon-color-primary)];
+        @apply dark:text-[color:var(--p-popup-icon-color-primary-dark)];
+      }
+
+      &--danger {
+        @apply text-danger;
+        @apply dark:text-danger;
+      }
+    }
+
+    &:not(.popup--info),
+    &:not(.popup--info) .popup__action {
+      @apply text-state-emphasis;
+      @apply dark:text-dark-state-emphasis;
+    }
+
+    &:not(.popup--info) .popup__close {
+      @apply text-on-emphasis/70 hover:text-on-emphasis;
+      @apply dark:text-dark-on-emphasis/70 dark:hover:text-dark-on-emphasis;
+    }
+  }
+}
+</style>