@privyid/persona 1.2.1 → 1.2.2-rc.2

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

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

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

@@ -0,0 +1,39 @@
+import type { HTMLAttributes, Component } from 'vue';
+import type { ColorVariant } from '../button';
+import type { NotifyInstance, NotifyOption } from '../notify';
+import type { AdditionalAttr } from '../global/types';
+import type { RequireAtLeastOne } from 'type-fest';
+import type pPopup from './Popup.vue';
+export type PopupTypeVariant = 'info' | 'success' | 'warning' | 'error';
+export type PopupStyleVariant = 'simple' | 'filled';
+export type PopupInstance = NotifyInstance<typeof pPopup>;
+export interface PopupActionOption {
+    text?: string;
+    onClick?: (event: MouseEvent & {
+        close: () => void;
+    }) => void | Promise<void>;
+    attrs?: AdditionalAttr;
+}
+interface Option extends Omit<NotifyOption, 'component'> {
+    type?: PopupTypeVariant;
+    variant?: PopupStyleVariant;
+    title?: string;
+    text?: string;
+    icon?: string | Component;
+    iconColor?: ColorVariant;
+    popupClass?: HTMLAttributes['class'];
+    popupAttrs?: AdditionalAttr;
+    dismissable?: boolean;
+    actions?: PopupActionOption[];
+    label?: string;
+}
+export declare const PopupIcons: {
+    info: import("vue").Raw<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+    success: import("vue").Raw<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+    warning: import("vue").Raw<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+    error: import("vue").Raw<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+};
+export type PopupOption = RequireAtLeastOne<Option, 'text' | 'title'>;
+declare function showPopup(text: string, title?: string, type?: PopupTypeVariant, variant?: PopupStyleVariant): Promise<PopupInstance>;
+declare function showPopup(option: PopupOption): Promise<PopupInstance>;
+export default showPopup;

package/dist/components/popup/index.mjs

@@ -0,0 +1,31 @@
+import { markRaw } from "vue";
+import { showNotify } from "../notify/index.mjs";
+import IconInfo from "@privyid/persona-icon/vue/information-circle-solid/20.vue";
+import IconSuccess from "@privyid/persona-icon/vue/checkmark/20.vue";
+import IconWarning from "@privyid/persona-icon/vue/exclamation-circle-solid/20.vue";
+import IconError from "@privyid/persona-icon/vue/exclamation-triangle-solid/20.vue";
+export const PopupIcons = {
+  info: markRaw(IconInfo),
+  success: markRaw(IconSuccess),
+  warning: markRaw(IconWarning),
+  error: markRaw(IconError)
+};
+async function showPopup(textOrOption, title, type, variant) {
+  if (typeof textOrOption === "string") {
+    return await showPopup({
+      text: textOrOption,
+      title,
+      type,
+      variant
+    });
+  }
+  const { default: pPopup } = await import("./Popup.vue");
+  const instance = await showNotify({
+    component: markRaw(pPopup),
+    props: textOrOption,
+    duration: textOrOption.duration,
+    position: textOrOption.position
+  });
+  return instance;
+}
+export default showPopup;

package/dist/components/progress/Progress.vue

@@ -0,0 +1,198 @@
+<template>
+  <div
+    class="progress"
+    data-testid="progress"
+    :class="classNames">
+    <div class="progress__items">
+      <slot />
+    </div>
+
+    <div
+      v-if="titleVariant === 'general'"
+      data-testid="progress-title-general"
+      class="progress__title">
+      <template v-if="item.slots?.title">
+        <component :is="item.slots.title" />
+      </template>
+      <template v-else>
+        {{ item.title }}
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { findLast } from "lodash-es";
+import { computed } from "vue";
+import { findAllChildren, toBoolean } from "../utils/vnode";
+const props = defineProps({
+  variant: {
+    type: String,
+    default: "dot"
+  },
+  titleVariant: {
+    type: String,
+    default: "specific"
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  }
+});
+const slots = defineSlots();
+const classNames = computed(() => {
+  const result = [];
+  if (props.variant)
+    result.push(`progress--${props.variant}`);
+  if (props.titleVariant)
+    result.push(`progress--${props.titleVariant}`);
+  if (props.vertical)
+    result.push("progress--vertical");
+  else
+    result.push("progress--horizontal");
+  return result;
+});
+const item = computed(() => {
+  const vnodes = findAllChildren(slots.default(), "ProgressItem");
+  const activeNode = findLast(vnodes, (vnode) => {
+    return toBoolean(vnode.props?.active);
+  });
+  return {
+    title: activeNode?.props?.title ?? "",
+    slots: activeNode?.children ?? {}
+  };
+});
+</script>
+
+<style lang="postcss">
+.progress {
+  --p-bg-bar-active-state: theme(backgroundColor.info.emphasis);
+  --p-bg-bar-normal-state: theme(backgroundColor.base.DEFAULT);
+  --p-bg-dark-bar-active-state: theme(backgroundColor.dark.info.emphasis);
+  --p-bg-dark-bar-normal-state: theme(backgroundColor.dark.base);
+
+  &__items {
+    @apply flex overflow-hidden;
+  }
+
+  &__item {
+    @apply flex-1 flex justify-center relative;
+
+    &:first-child .progress__bar {
+      @apply hidden;
+    }
+  }
+
+  &__content {
+    @apply flex flex-col space-y-2;
+  }
+
+  &__point {
+    @apply w-7 h-7 rounded-full bg-[color:var(--p-bg-bar-normal-state)] flex items-center justify-center text-default;
+    @apply dark:bg-[color:var(--p-bg-dark-bar-normal-state)] dark:text-dark-default;
+  }
+
+  &__bar {
+    @apply absolute rounded-full transition-[background-position] ease-linear duration-150;
+    @apply from-[var(--p-bg-bar-active-state)_50%] to-[var(--p-bg-bar-normal-state)_50%];
+    @apply dark:from-[var(--p-bg-dark-bar-active-state)_50%] dark:to-[var(--p-bg-dark-bar-normal-state)_50%];
+  }
+
+  &__title {
+    @apply truncate text-sm text-center w-full text-default;
+    @apply dark:text-dark-default;
+  }
+
+  & > .progress__title {
+    @apply pt-2;
+  }
+
+  &--active {
+    .progress__point {
+      @apply bg-brand-accent text-state-emphasis;
+      @apply dark:bg-dark-brand-accent dark:text-dark-state-emphasis;
+    }
+  }
+
+  &--horizontal {
+    @apply w-full;
+
+    .progress__items {
+      @apply flex-row;
+    }
+
+    .progress__content {
+      @apply justify-start items-center;
+    }
+
+    .progress__bar {
+      @apply w-[calc(100%_-_3rem)] h-1 top-5 right-[calc(50%_+_1.5rem)] bg-gradient-to-r bg-[length:210%_100%] bg-right;
+    }
+
+    .progress--active + .progress--active {
+      .progress__bar {
+        @apply bg-left;
+      }
+    }
+  }
+
+  &--vertical {
+    @apply h-full;
+
+    > .progress__title {
+      @apply hidden;
+    }
+
+    .progress__items {
+      @apply flex-col items-center justify-between h-full space-y-2;
+    }
+
+    .progress__content {
+      @apply justify-center items-center;
+    }
+
+    .progress__bar {
+      @apply h-[calc(100%_-_4.25rem)] w-1 bottom-[calc(50%_+_2.25rem)] left-1/2 -translate-x-1/2 bg-gradient-to-b bg-bottom bg-[length:100%_210%];
+    }
+
+    .progress--active + .progress--active {
+      .progress__bar {
+        @apply bg-top;
+      }
+    }
+  }
+
+  &--dot {
+    .progress__point-item {
+      @apply w-3 h-3 rounded-full bg-default;
+      @apply dark:bg-dark-default;
+    }
+  }
+
+  &--counter {
+    counter-reset: progress;
+
+    .progress__point {
+      counter-increment: progress;
+
+      &-item::before {
+        content: counter(progress);
+
+        @apply text-sm font-medium;
+      }
+    }
+  }
+
+  &--specific {
+    > .progress__title {
+      @apply hidden;
+    }
+  }
+
+  &--general {
+    .progress__content > .progress__title {
+      @apply hidden;
+    }
+  }
+}
+</style>

package/dist/components/progress/Progress.vue.d.ts

@@ -0,0 +1,53 @@
+import type { PropType, VNode } from 'vue';
+import type { IconVariant, TitleVariant } from '.';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        title(): VNode[];
+        default(): VNode[];
+    }> & {
+        title(): VNode[];
+        default(): VNode[];
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<IconVariant>;
+        default: string;
+    };
+    titleVariant: {
+        type: PropType<TitleVariant>;
+        default: string;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<IconVariant>;
+        default: string;
+    };
+    titleVariant: {
+        type: PropType<TitleVariant>;
+        default: string;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    variant: IconVariant;
+    vertical: boolean;
+    titleVariant: TitleVariant;
+}, {}, {}, {}, 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/progress/ProgressItem.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="progress__item"
+    data-testid="progress-item"
+    :class="classNames">
+    <div class="progress__content">
+      <div class="progress__bar" />
+      <div class="progress__point">
+        <slot name="icon">
+          <div
+            data-testid="progress-point-item"
+            class="progress__point-item" />
+        </slot>
+      </div>
+      <div
+        data-testid="progress-title"
+        class="progress__title">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+defineOptions({ name: "ProgressItem" });
+const props = defineProps({
+  title: {
+    type: String,
+    default: ""
+  },
+  active: {
+    type: Boolean,
+    default: false
+  }
+});
+const classNames = computed(() => {
+  const result = [];
+  if (props.active)
+    result.push("progress--active");
+  return result;
+});
+defineSlots();
+</script>

package/dist/components/progress/ProgressItem.vue.d.ts

@@ -0,0 +1,43 @@
+import type { VNode } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        icon(): VNode[];
+        title(): VNode[];
+    }> & {
+        icon(): VNode[];
+        title(): VNode[];
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    active: boolean;
+}, {}, {}, {}, 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/progress/index.d.ts

@@ -0,0 +1,2 @@
+export type IconVariant = 'dot' | 'counter';
+export type TitleVariant = 'specific' | 'general';

package/dist/components/progress-indicator/ProgressIndicator.vue

@@ -0,0 +1,114 @@
+<template>
+  <div
+    class="progress-indicator"
+    data-testid="progress-indicator"
+    :class="classNames">
+    <div class="progress-indicator__container">
+      <template
+        v-for="i in nums"
+        :key="i">
+        <div
+          class="progress-indicator__item"
+          data-testid="progress-indicator-item"
+          @click="setValue(i)" />
+      </template>
+    </div>
+    <div
+      :style="activeStyle"
+      class="progress-indicator__item progress-indicator__item--active"
+      data-testid="progress-indicator-item-active" />
+  </div>
+</template>
+
+<script setup>
+import { useVModel } from "../input";
+import { useToNumber } from "@vueuse/core";
+import { useClamp } from "@vueuse/math";
+import { computed, toRef } from "vue";
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 1
+  },
+  direction: {
+    type: String,
+    default: "horizontal"
+  },
+  length: {
+    type: [Number, String],
+    default: 6
+  }
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+const model = useVModel(props);
+const nums = useToNumber(toRef(props, "length"), { nanToZero: true, method: "parseInt" });
+const active = useClamp(model, 1, nums);
+const classNames = computed(() => {
+  const result = [];
+  if (props.direction)
+    result.push(`progress-indicator--${props.direction}`);
+  return result;
+});
+const activeStyle = computed(() => {
+  if (props.direction === "vertical") {
+    return {
+      transform: `translateY(calc((100% + .25rem) * ${active.value - 1}))`,
+      height: `calc((100% - (.25rem * (${nums.value} - 1))) / ${nums.value} )`
+    };
+  }
+  return { transform: `translateX(calc((100% + .25rem) * ${active.value - 1}))` };
+});
+function setValue(value) {
+  active.value = value;
+  emit("change", value);
+}
+</script>
+
+<style lang="postcss">
+.progress-indicator {
+  --p-bg-indicator-item: rgba(theme(backgroundColor.inverse), theme(opacity.20));
+  --p-bg-dark-indicator-item: rgba(theme(backgroundColor.dark.inverse), theme(opacity.20));
+  --p-bg-indicator-item-active: rgba(theme(backgroundColor.inverse), theme(opacity.60));
+  --p-bg-dark-indicator-item-active: rgba(theme(backgroundColor.dark.inverse), theme(opacity.60));
+
+  @apply relative;
+
+  &__container {
+    @apply flex flex-1;
+  }
+
+  &__item {
+    @apply bg-[color:var(--p-bg-indicator-item)] cursor-pointer;
+    @apply dark:bg-[color:var(--p-bg-dark-indicator-item)];
+
+    &--active {
+      @apply absolute top-0 left-0 transition-transform;
+      @apply bg-[color:var(--p-bg-indicator-item-active)] pointer-events-none;
+      @apply dark:bg-[color:var(--p-bg-dark-indicator-item-active)];
+    }
+  }
+
+  &--horizontal {
+    .progress-indicator__container {
+      @apply justify-center space-x-1;
+    }
+
+    .progress-indicator__item {
+      @apply w-2 h-2 rounded-full;
+    }
+  }
+
+  &--vertical {
+    @apply h-full;
+
+    .progress-indicator__container {
+      @apply flex-col space-y-1 h-full;
+    }
+
+    .progress-indicator__item {
+      @apply w-2 h-full rounded-full;
+    }
+  }
+
+}
+</style>

package/dist/components/progress-indicator/ProgressIndicator.vue.d.ts

@@ -0,0 +1,40 @@
+import type { PropType } from 'vue';
+import type { DirectionVariant } from '../steps';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: PropType<DirectionVariant>;
+        default: string;
+    };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: number) => void;
+    change: (args_0: number) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: PropType<DirectionVariant>;
+        default: string;
+    };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: number) => any) | undefined;
+    onChange?: ((args_0: number) => any) | undefined;
+}>, {
+    length: string | number;
+    modelValue: number;
+    direction: DirectionVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;