@privyid/persona 0.16.0 → 0.17.0

package/dist/components/steps/StepSlider.vue

@@ -3,9 +3,7 @@ import {
   defineComponent,
   h,
   KeepAlive,
-  ref,
-  Transition,
-  watch
+  Transition
 } from "vue-demi";
 import { findAllChildren } from "../utils/vnode";
 export default defineComponent({
@@ -17,20 +15,20 @@ export default defineComponent({
     keepAlive: {
       type: Boolean,
       default: false
+    },
+    transition: {
+      type: String,
+      default: "slide-left"
     }
   },
   setup(props, { slots }) {
-    const transition = ref("slide-left");
-    watch(() => props.active, (value, old) => {
-      transition.value = value > old ? "slide-left" : "slide-right";
-    });
     return () => {
       const step = findAllChildren(slots.default(), "Step").at(props.active);
       const body = () => {
         return props.keepAlive ? h(KeepAlive, () => h(step, { key: props.active })) : h(step, { key: props.active });
       };
       return h(Transition, {
-        name: transition.value,
+        name: props.transition,
         mode: "out-in"
       }, body);
     };

package/dist/components/steps/StepSlider.vue.d.ts

@@ -7,6 +7,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
 }, () => import("vue-demi").VNode<import("vue-demi").RendererNode, import("vue-demi").RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
@@ -18,8 +22,13 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
 }>>, {
     active: number;
+    transition: string;
     keepAlive: boolean;
 }, {}>;
 export default _default;

package/dist/components/steps/Steps.vue

@@ -3,8 +3,9 @@
     class="steps"
     data-testid="steps">
     <StepSlider
-      :active="model - 1"
-      :keep-alive="keepAlive">
+      :active="step - 1"
+      :keep-alive="keepAlive"
+      :transition="transition">
       <slot />
     </StepSlider>
   </div>
@@ -38,6 +39,18 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    loop: {
+      type: Boolean,
+      default: false
+    },
+    animation: {
+      type: String,
+      default: "slide"
+    },
     onBeforePrev: {
       type: Function,
       default: () => true
@@ -60,15 +73,16 @@ export default defineComponent({
     const onNextHooks = ref([props.onBeforeNext]);
     const onPrevHooks = ref([props.onBeforePrev]);
     const model = useVModel(props);
+    const transition = ref(props.direction === "vertical" ? "slide-top" : "slide-left");
     const total = computed(() => {
       return findAllChildren(slots.default(), "Step").length;
     });
     const step = useClamp(model, 1, total);
     const canNext = computed(() => {
-      return model.value <= total.value;
+      return props.loop || model.value <= total.value;
     });
     const canPrev = computed(() => {
-      return model.value > 1;
+      return props.loop || model.value > 1;
     });
     async function next() {
       if (canNext.value)
@@ -81,10 +95,12 @@ export default defineComponent({
     async function toStep(to) {
       const from = model.value;
       const hooks = to > from ? onNextHooks.value : onPrevHooks.value;
-      if (await runAllHooks(hooks, to, from)) {
-        if (to <= total.value)
-          step.value = to;
-        else
+      const toIndex = props.loop ? ((to - 1) % total.value + total.value) % total.value + 1 : to;
+      if (await runAllHooks(hooks, toIndex, from)) {
+        if (toIndex <= total.value) {
+          transition.value = to > from ? props.direction === "vertical" ? `${props.animation}-top` : `${props.animation}-left` : props.direction === "vertical" ? `${props.animation}-bottom` : `${props.animation}-right`;
+          step.value = toIndex;
+        } else
           await props.onFinished();
       }
     }
@@ -99,7 +115,10 @@ export default defineComponent({
       onPrevHooks,
       onNextHooks
     });
-    return { model };
+    return {
+      transition,
+      step
+    };
   }
 });
 </script>

package/dist/components/steps/Steps.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-import { TravelHook, FinishedHook } from '.';
+import { TravelHook, FinishedHook, DirectionVariant, AnimationVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: NumberConstructor;
@@ -9,6 +9,18 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    direction: {
+        type: PropType<DirectionVariant>;
+        default: string;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    animation: {
+        type: PropType<AnimationVariant>;
+        default: string;
+    };
     onBeforePrev: {
         type: PropType<TravelHook>;
         default: () => boolean;
@@ -22,7 +34,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: (...args: any[]) => void;
     };
 }, {
-    model: import("vue-demi").Ref<number>;
+    transition: import("vue-demi").Ref<string>;
+    step: import("vue-demi").Ref<number>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: NumberConstructor;
@@ -32,6 +45,18 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    direction: {
+        type: PropType<DirectionVariant>;
+        default: string;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    animation: {
+        type: PropType<AnimationVariant>;
+        default: string;
+    };
     onBeforePrev: {
         type: PropType<TravelHook>;
         default: () => boolean;
@@ -48,6 +73,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: number;
+    direction: DirectionVariant;
+    loop: boolean;
+    animation: AnimationVariant;
     onBeforePrev: TravelHook;
     onBeforeNext: TravelHook;
     keepAlive: boolean;

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

@@ -1,6 +1,8 @@
 import { ComputedRef, InjectionKey, Ref } from 'vue-demi';
 export type TravelHook = (to: number, from: number) => boolean | Promise<boolean>;
 export type FinishedHook = () => void | Promise<void>;
+export type DirectionVariant = 'horizontal' | 'vertical';
+export type AnimationVariant = 'slide' | 'slide-full';
 export interface StepContext {
     next: () => void;
     prev: () => void;

package/dist/components/tabs/Tabs.vue.d.ts

@@ -72,8 +72,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     fill: boolean;
     variant: TabsStyleVariant;
     modelValue: number;
-    align: TabsAlignVariant;
     vertical: boolean;
+    align: TabsAlignVariant;
     justified: boolean;
     navWrapperClass: string;
 }, {}>;

package/dist/components/text/Text.vue

@@ -169,10 +169,12 @@ export default defineComponent({
   * Form Label Style
   */
   &--formlabel {
-    @apply font-medium text-sm tracking-wide;
+    @apply font-medium text-sm tracking-wide text-subtle;
+    @apply dark:text-dark-subtle;
   }
   &--formlabel2 {
-    @apply font-medium text-xs leading-tightest;
+    @apply font-medium text-xs leading-tightest text-subtle;
+    @apply dark:text-dark-subtle;
   }
 
   /**

package/dist/components/textarea/Textarea.vue

@@ -38,7 +38,7 @@ export default defineComponent({
   props: {
     modelValue: {
       type: String,
-      default: ""
+      default: void 0
     },
     placeholder: {
       type: String,

package/dist/components/textarea/Textarea.vue.d.ts

@@ -1,7 +1,7 @@
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     placeholder: {
         type: StringConstructor;
@@ -40,7 +40,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
 }, {
-    model: import("vue-demi").Ref<string>;
+    model: import("vue-demi").Ref<string | undefined>;
     classNames: import("vue-demi").ComputedRef<string[]>;
     handleInput: () => void;
     charactersLength: import("vue-demi").ComputedRef<number | "0">;
@@ -48,7 +48,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("input" | "update:modelValue")[], "input" | "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
-        default: string;
+        default: undefined;
     };
     placeholder: {
         type: StringConstructor;

package/dist/components/toast/Toast.vue

@@ -122,8 +122,8 @@ export default defineComponent({
   }
 
   .toast__close {
-    @apply cursor-pointer text-default/30 hover:text-default/50;
-    @apply dark:text-dark-default/30 dark:text-dark-default/50;
+    @apply cursor-pointer text-dark-default/50 hover:text-default/50;
+    @apply dark:text-default/30;
   }
 
   .toast__body {
@@ -154,13 +154,13 @@ export default defineComponent({
   */
   &:is(.toast--info) {
     .toast__title {
-      @apply text-default;
-      @apply dark:text-dark-default;
+      @apply text-on-emphasis;
+      @apply dark:text-dark-on-emphasis;
     }
 
     .toast__text {
-      @apply text-subtle;
-      @apply dark:text-dark-subtle;
+      @apply text-on-emphasis;
+      @apply dark:text-dark-on-emphasis;
     }
   }
 
@@ -170,10 +170,19 @@ export default defineComponent({
   * variant is filled
   */
   &&--info {
-    .toast__icon,
+    &:is(.toast--simple) {
+      .toast__icon {
+        @apply bg-base text-info;
+        @apply dark:bg-dark-base dark:text-dark-info;
+      }
+      .toast__title {
+        @apply text-default;
+        @apply dark:text-dark-default;
+      }
+    }
     &.toast--filled {
-      @apply bg-base text-info;
-      @apply dark:bg-dark-base dark:text-dark-info;
+      @apply bg-inverse text-info;
+      @apply dark:bg-dark-inverse dark:text-dark-info;
     }
   }
 

package/dist/components/toast/ToastContainer.vue

@@ -1,34 +1,61 @@
 <template>
-  <TransitionGroup
-    tag="div"
-    name="toast"
+  <div
+    data-testid="toast-container"
     class="toast-container"
-    data-testid="toast-container">
-    <Toast
-      v-for="(item, i) in items"
-      :key="item._id"
-      :title="item.title"
-      :text="item.text"
-      :type="item.type"
-      :variant="item.variant"
-      :duration="item.duration"
-      :class="item.toastClass"
-      @dismissed="remove(i)" />
-  </TransitionGroup>
+    :class="classNames">
+    <TransitionGroup
+      tag="div"
+      name="toast">
+      <Toast
+        v-for="(item, i) in items"
+        :key="item._id"
+        :title="item.title"
+        :text="item.text"
+        :type="item.type"
+        :variant="item.variant"
+        :duration="item.duration"
+        :class="item.toastClass"
+        @dismissed="remove(i)" />
+    </TransitionGroup>
+  </div>
 </template>
 
 <script>
-import { defineComponent, ref } from "vue-demi";
+import {
+  computed,
+  defineComponent,
+  ref
+} from "vue-demi";
 import Toast from "./Toast.vue";
+import { startsWith } from "lodash-es";
 export default defineComponent({
   components: { Toast },
-  setup() {
+  props: {
+    position: {
+      type: String,
+      default: "bottom-left"
+    }
+  },
+  setup(props) {
     const items = ref([]);
+    const classNames = computed(() => {
+      const result = [];
+      if (props.position)
+        result.push(`toast-container--${props.position}`);
+      return result;
+    });
     function add(option) {
-      items.value.unshift({
-        ...option,
-        _id: Symbol("id")
-      });
+      if (startsWith(option.position, "bottom")) {
+        items.value.push({
+          ...option,
+          _id: Symbol("id")
+        });
+      } else {
+        items.value.unshift({
+          ...option,
+          _id: Symbol("id")
+        });
+      }
     }
     function remove(index) {
       items.value.splice(index, 1);
@@ -36,7 +63,8 @@ export default defineComponent({
     return {
       add,
       remove,
-      items
+      items,
+      classNames
     };
   }
 });
@@ -45,24 +73,81 @@ export default defineComponent({
 <style lang="postcss">
 .toast-container {
   --p-toast-z-index: theme(zIndex.toast);
-  @apply z-[var(--p-toast-z-index)] fixed top-0 right-0 flex flex-col space-y-2 max-h-screen overflow-visible;
+  @apply z-[var(--p-toast-z-index)] fixed flex flex-col space-y-2 max-h-screen overflow-visible;
+
+  &--top-right {
+    @apply top-0 right-0;
 
-  &&--top-left {
-    @apply left-0 top-0;
+    .toast {
+      &-enter-from,
+      &-leave-to {
+        @apply opacity-0 translate-x-20;
+      }
+    }
+  }
+
+  &--top-center {
+    @apply top-0 left-1/2 -translate-x-1/2;
+
+    .toast {
+      &-enter-from,
+      &-leave-to {
+        @apply opacity-0 -translate-y-20;
+      }
+    }
+  }
+
+  &--top-left {
+    @apply top-0 left-0;
+
+    .toast {
+      &-enter-from,
+      &-leave-to {
+        @apply opacity-0 -translate-x-20;
+      }
+    }
+  }
+
+  &--bottom-right {
+    @apply bottom-0 right-0;
+
+    .toast {
+      &-enter-from,
+      &-leave-to {
+        @apply opacity-0 translate-x-20;
+      }
+    }
+  }
+
+  &--bottom-center {
+    @apply  bottom-0 left-1/2 -translate-x-1/2;
+
+    .toast {
+      &-enter-from,
+      &-leave-to {
+        @apply opacity-0 translate-y-20;
+      }
+    }
+  }
+
+  &--bottom-left {
+    @apply bottom-0 left-0;
+
+    .toast {
+      &-enter-from,
+      &-leave-to {
+        @apply opacity-0 -translate-x-20;
+      }
+    }
   }
 }
 
 .toast {
-  @apply will-change-[opacity,transform];
+  @apply will-change-[opacity,transform] my-2;
 
   &-enter-active,
   &-leave-active {
     @apply transition-all duration-150;
   }
-
-  &-enter-from,
-  &-leave-to {
-    @apply opacity-0 translate-x-20;
-  }
 }
 </style>

package/dist/components/toast/ToastContainer.vue.d.ts

@@ -1,5 +1,11 @@
-import { ToastOption } from '.';
-declare const _default: import("vue-demi").DefineComponent<{}, {
+import { PropType } from 'vue-demi';
+import { ToastOption, ToastPositionVariant } from '.';
+declare const _default: import("vue-demi").DefineComponent<{
+    position: {
+        type: PropType<ToastPositionVariant>;
+        default: string;
+    };
+}, {
     add: (option: ToastOption) => void;
     remove: (index: number) => void;
     items: import("vue-demi").Ref<{
@@ -10,6 +16,15 @@ declare const _default: import("vue-demi").DefineComponent<{}, {
         text: string;
         duration?: number | undefined;
         toastClass?: string | string[] | undefined;
+        position?: ToastPositionVariant | undefined;
     }[]>;
-}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{}>>, {}, {}>;
+    classNames: import("vue-demi").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    position: {
+        type: PropType<ToastPositionVariant>;
+        default: string;
+    };
+}>>, {
+    position: ToastPositionVariant;
+}, {}>;
 export default _default;

package/dist/components/toast/ToastRoot.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <template
+      v-for="item in groups.values()"
+      :key="item.position">
+      <ToastGroup
+        :ref="item.ref"
+        :position="item.position" />
+    </template>
+  </div>
+</template>
+
+<script>
+import {
+  ref,
+  defineComponent,
+  shallowRef,
+  triggerRef,
+  nextTick
+} from "vue-demi";
+import ToastGroup from "./ToastContainer.vue";
+export default defineComponent({
+  components: { ToastGroup },
+  setup() {
+    const groups = shallowRef(/* @__PURE__ */ new Map());
+    async function add(options) {
+      if (!options.position)
+        options.position = "bottom-left";
+      const position = options.position;
+      let group = groups.value.get(position);
+      if (!group) {
+        group = { ref: ref(), position };
+        groups.value.set(position, group);
+        triggerRef(groups);
+        await nextTick();
+      }
+      group.ref.value?.at(0).add(options);
+    }
+    return {
+      add,
+      groups
+    };
+  }
+});
+</script>

package/dist/components/toast/ToastRoot.vue.d.ts

@@ -0,0 +1,13 @@
+import { Ref } from 'vue-demi';
+import ToastGroup from './ToastContainer.vue';
+import { ToastOption, ToastPositionVariant } from '.';
+type ToastInstance = InstanceType<typeof ToastGroup>;
+type ToastGroupMap = Map<ToastPositionVariant, {
+    position: ToastPositionVariant;
+    ref: Ref<ToastInstance[]>;
+}>;
+declare const _default: import("vue-demi").DefineComponent<{}, {
+    add: (options: ToastOption) => Promise<void>;
+    groups: import("vue-demi").ShallowRef<ToastGroupMap>;
+}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

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

@@ -7,6 +7,7 @@ export interface ToastOption {
     text: string;
     duration?: number;
     toastClass?: string | string[];
+    position?: ToastPositionVariant;
 }
 export type ToastPositionVariant = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 export default function showToast(option: ToastOption): Promise<void>;

package/dist/components/toast/index.mjs

@@ -1,6 +1,6 @@
 import { useSingleton } from "../global/use-singleton.mjs";
 export default async function showToast(option) {
-  const { default: ToastContainer } = await import("./ToastContainer.vue");
-  const toast = await useSingleton(ToastContainer);
-  toast.add(option);
+  const { default: ToastRoot } = await import("./ToastRoot.vue");
+  const toast = await useSingleton(ToastRoot);
+  await toast.add(option);
 }

package/dist/components/toggle/Toggle.vue.d.ts

@@ -6,15 +6,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {
@@ -51,15 +51,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {

package/dist/components/tour/TourDialog.vue.d.ts

@@ -93,9 +93,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     onDismiss?: ((...args: any[]) => any) | undefined;
     onPrev?: ((...args: any[]) => any) | undefined;
 }, {
+    image: string;
     dismissable: boolean;
     text: string;
-    image: string;
     title: string;
     step: number;
     highlight: boolean;