@privyid/persona 0.23.0 → 0.24.0

package/dist/components/toast/Toast.vue

@@ -3,17 +3,21 @@
     data-testid="toast"
     :class="classNames">
     <div class="toast__icon">
-      <component
-        :is="icon"
-        v-if="icon" />
+      <slot name="icon">
+        <component
+          :is="toastIcon"
+          v-if="toastIcon" />
+      </slot>
     </div>
     <div class="toast__body">
-      <div class="toast__title">
-        {{ title }}
-      </div>
-      <div class="toast__text">
-        {{ text }}
-      </div>
+      <div
+        v-p-md.inline="title"
+        class="toast__title" />
+      <div
+        v-if="text"
+        v-p-md.inline="text"
+        class="toast__text"
+        data-testid="toast-text" />
     </div>
     <div
       data-testid="toast-close"
@@ -37,6 +41,7 @@ import IconSuccess from "@privyid/persona-icon/vue/checkmark/24.vue";
 import IconWarning from "@privyid/persona-icon/vue/exclamation-circle-solid/24.vue";
 import IconError from "@privyid/persona-icon/vue/exclamation-triangle-solid/24.vue";
 import IconClose from "@privyid/persona-icon/vue/close/16.vue";
+import { pMd } from "../markdown";
 const ToastIcons = {
   info: IconInfo,
   success: IconSuccess,
@@ -45,15 +50,13 @@ const ToastIcons = {
 };
 export default defineComponent({
   components: { IconClose },
+  directives: { pMd },
   props: {
     title: {
       type: String,
       required: true
     },
-    text: {
-      type: String,
-      required: true
-    },
+    text: { type: String },
     type: {
       type: String,
       default: "info"
@@ -78,7 +81,7 @@ export default defineComponent({
         result.push(`toast--${props.variant}`);
       return result;
     });
-    const icon = computed(() => {
+    const toastIcon = computed(() => {
       return ToastIcons[props.type];
     });
     function close() {
@@ -97,7 +100,7 @@ export default defineComponent({
     });
     return {
       classNames,
-      icon,
+      toastIcon,
       close
     };
   }
@@ -114,7 +117,7 @@ export default defineComponent({
 
   .toast__icon,
   .toast__close {
-    @apply flex-shrink-0 p-4;
+    @apply shrink-0 p-4;
   }
 
   .toast__icon {
@@ -127,11 +130,11 @@ export default defineComponent({
   }
 
   .toast__body {
-    @apply py-4 pr-4 flex-grow space-y-2 flex flex-col;
+    @apply py-4 pr-4 grow space-y-2 flex flex-col;
   }
 
   .toast__title {
-    @apply text-sm font-medium;
+    @apply text-sm font-medium leading-[1.75];
   }
 
   .toast__text {

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

@@ -7,7 +7,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     text: {
         type: StringConstructor;
-        required: true;
     };
     type: {
         type: PropType<ToastTypeVariant>;
@@ -23,7 +22,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
-    icon: import("vue-demi").ComputedRef<any>;
+    toastIcon: import("vue-demi").ComputedRef<any>;
     close: () => void;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "dismissed"[], "dismissed", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     title: {
@@ -32,7 +31,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     text: {
         type: StringConstructor;
-        required: true;
     };
     type: {
         type: PropType<ToastTypeVariant>;

package/dist/components/toast/ToastContainer.vue

@@ -15,7 +15,18 @@
         :variant="item.variant"
         :duration="item.duration"
         :class="item.toastClass"
-        @dismissed="remove(i)" />
+        @dismissed="remove(i)">
+        <template #icon>
+          <template v-if="item.icon && typeof item.icon === 'string'">
+            <img
+              :src="item.icon"
+              alt="toast-icon">
+          </template>
+          <template v-else-if="item.icon">
+            <component :is="item.icon" />
+          </template>
+        </template>
+      </Toast>
     </TransitionGroup>
   </div>
 </template>

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

@@ -13,7 +13,129 @@ declare const _default: import("vue-demi").DefineComponent<{
         type?: import(".").ToastTypeVariant | undefined;
         variant?: import(".").ToastStyleVariant | undefined;
         title: string;
-        text: string;
+        text?: string | undefined;
+        icon?: string | import("vue-demi").FunctionalComponent<any, any, any> | {
+            new (...args: any[]): any;
+            __isFragment?: undefined;
+            __isTeleport?: undefined;
+            __isSuspense?: undefined;
+        } | {
+            [x: string]: any;
+            setup?: ((this: void, props: import("@vue/shared").LooseRequired<any>, ctx: {
+                attrs: {
+                    [x: string]: unknown;
+                };
+                slots: Readonly<{
+                    [name: string]: import("vue-demi").Slot<any> | undefined;
+                }>;
+                emit: ((event: unknown, ...args: any[]) => void) | ((event: string, ...args: any[]) => void);
+                expose: (exposed?: Record<string, any> | undefined) => void;
+            }) => any) | undefined;
+            name?: string | undefined;
+            template?: string | object | undefined;
+            render?: Function | undefined;
+            components?: Record<string, import("vue-demi").Component<any, any, any, import("vue-demi").ComputedOptions, import("vue-demi").MethodOptions>> | undefined;
+            directives?: Record<string, import("vue-demi").Directive<any, any>> | undefined;
+            inheritAttrs?: boolean | undefined;
+            emits?: any;
+            slots?: {} | undefined;
+            expose?: string[] | undefined;
+            serverPrefetch?: (() => void | Promise<any>) | undefined;
+            compilerOptions?: {
+                isCustomElement?: ((tag: string) => boolean) | undefined;
+                whitespace?: "preserve" | "condense" | undefined;
+                comments?: boolean | undefined;
+                delimiters?: [string, string] | undefined;
+            } | undefined;
+            call?: ((this: unknown, ...args: unknown[]) => never) | undefined;
+            __isFragment?: undefined;
+            __isTeleport?: undefined;
+            __isSuspense?: undefined;
+            __defaults?: any;
+            compatConfig?: {
+                GLOBAL_MOUNT?: boolean | "suppress-warning" | undefined;
+                GLOBAL_MOUNT_CONTAINER?: boolean | "suppress-warning" | undefined;
+                GLOBAL_EXTEND?: boolean | "suppress-warning" | undefined;
+                GLOBAL_PROTOTYPE?: boolean | "suppress-warning" | undefined;
+                GLOBAL_SET?: boolean | "suppress-warning" | undefined;
+                GLOBAL_DELETE?: boolean | "suppress-warning" | undefined;
+                GLOBAL_OBSERVABLE?: boolean | "suppress-warning" | undefined;
+                GLOBAL_PRIVATE_UTIL?: boolean | "suppress-warning" | undefined;
+                CONFIG_SILENT?: boolean | "suppress-warning" | undefined;
+                CONFIG_DEVTOOLS?: boolean | "suppress-warning" | undefined;
+                CONFIG_KEY_CODES?: boolean | "suppress-warning" | undefined;
+                CONFIG_PRODUCTION_TIP?: boolean | "suppress-warning" | undefined;
+                CONFIG_IGNORED_ELEMENTS?: boolean | "suppress-warning" | undefined;
+                CONFIG_WHITESPACE?: boolean | "suppress-warning" | undefined;
+                CONFIG_OPTION_MERGE_STRATS?: boolean | "suppress-warning" | undefined;
+                INSTANCE_SET?: boolean | "suppress-warning" | undefined;
+                INSTANCE_DELETE?: boolean | "suppress-warning" | undefined;
+                INSTANCE_DESTROY?: boolean | "suppress-warning" | undefined;
+                INSTANCE_EVENT_EMITTER?: boolean | "suppress-warning" | undefined;
+                INSTANCE_EVENT_HOOKS?: boolean | "suppress-warning" | undefined;
+                INSTANCE_CHILDREN?: boolean | "suppress-warning" | undefined;
+                INSTANCE_LISTENERS?: boolean | "suppress-warning" | undefined;
+                INSTANCE_SCOPED_SLOTS?: boolean | "suppress-warning" | undefined;
+                INSTANCE_ATTRS_CLASS_STYLE?: boolean | "suppress-warning" | undefined;
+                OPTIONS_DATA_FN?: boolean | "suppress-warning" | undefined;
+                OPTIONS_DATA_MERGE?: boolean | "suppress-warning" | undefined;
+                OPTIONS_BEFORE_DESTROY?: boolean | "suppress-warning" | undefined;
+                OPTIONS_DESTROYED?: boolean | "suppress-warning" | undefined;
+                WATCH_ARRAY?: boolean | "suppress-warning" | undefined;
+                PROPS_DEFAULT_THIS?: boolean | "suppress-warning" | undefined;
+                V_ON_KEYCODE_MODIFIER?: boolean | "suppress-warning" | undefined;
+                CUSTOM_DIR?: boolean | "suppress-warning" | undefined;
+                ATTR_FALSE_VALUE?: boolean | "suppress-warning" | undefined;
+                ATTR_ENUMERATED_COERCION?: boolean | "suppress-warning" | undefined;
+                TRANSITION_CLASSES?: boolean | "suppress-warning" | undefined;
+                TRANSITION_GROUP_ROOT?: boolean | "suppress-warning" | undefined;
+                COMPONENT_ASYNC?: boolean | "suppress-warning" | undefined;
+                COMPONENT_FUNCTIONAL?: boolean | "suppress-warning" | undefined;
+                COMPONENT_V_MODEL?: boolean | "suppress-warning" | undefined;
+                RENDER_FUNCTION?: boolean | "suppress-warning" | undefined;
+                FILTERS?: boolean | "suppress-warning" | undefined;
+                PRIVATE_APIS?: boolean | "suppress-warning" | undefined;
+                MODE?: 2 | 3 | ((comp: import("vue-demi").Component<any, any, any, import("vue-demi").ComputedOptions, import("vue-demi").MethodOptions> | null) => 2 | 3) | undefined;
+            } | undefined;
+            data?: ((this: any, vm: any) => any) | undefined;
+            computed?: import("vue-demi").ComputedOptions | undefined;
+            methods?: import("vue-demi").MethodOptions | undefined;
+            watch?: {
+                [x: string]: (string | import("vue-demi").WatchCallback<any, any> | ({
+                    handler: string | import("vue-demi").WatchCallback<any, any>;
+                } & import("vue-demi").WatchOptions<boolean>)) | (string | import("vue-demi").WatchCallback<any, any> | ({
+                    handler: string | import("vue-demi").WatchCallback<any, any>;
+                } & import("vue-demi").WatchOptions<boolean>))[];
+            } | undefined;
+            provide?: import("vue-demi").ComponentProvideOptions | undefined;
+            inject?: {} | string[] | undefined;
+            filters?: Record<string, Function> | undefined;
+            mixins?: any[] | undefined;
+            extends?: any;
+            beforeCreate?: (() => void) | undefined;
+            created?: (() => void) | undefined;
+            beforeMount?: (() => void) | undefined;
+            mounted?: (() => void) | undefined;
+            beforeUpdate?: (() => void) | undefined;
+            updated?: (() => void) | undefined;
+            activated?: (() => void) | undefined;
+            deactivated?: (() => void) | undefined;
+            beforeDestroy?: (() => void) | undefined;
+            beforeUnmount?: (() => void) | undefined;
+            destroyed?: (() => void) | undefined;
+            unmounted?: (() => void) | undefined;
+            renderTracked?: ((e: import("vue-demi").DebuggerEvent) => void) | undefined;
+            renderTriggered?: ((e: import("vue-demi").DebuggerEvent) => void) | undefined;
+            errorCaptured?: ((err: unknown, instance: import("vue-demi").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue-demi").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | undefined;
+            delimiters?: [string, string] | undefined;
+            __differentiator?: string | number | symbol | undefined;
+            __isBuiltIn?: boolean | undefined;
+            __file?: string | undefined;
+            __name?: string | undefined;
+            beforeRouteEnter?: import("vue-router").NavigationGuardWithThis<undefined> | undefined;
+            beforeRouteUpdate?: import("vue-router").NavigationGuard | undefined;
+            beforeRouteLeave?: import("vue-router").NavigationGuard | undefined;
+        } | undefined;
         duration?: number | undefined;
         toastClass?: string | string[] | undefined;
         position?: ToastPositionVariant | undefined;

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

@@ -1,10 +1,12 @@
+import { Component } from 'vue-demi';
 export type ToastTypeVariant = 'info' | 'success' | 'warning' | 'error';
 export type ToastStyleVariant = 'simple' | 'filled';
 export interface ToastOption {
     type?: ToastTypeVariant;
     variant?: ToastStyleVariant;
     title: string;
-    text: string;
+    text?: string;
+    icon?: string | Component;
     duration?: number;
     toastClass?: string | string[];
     position?: ToastPositionVariant;

package/dist/components/toggle/Toggle.vue

@@ -46,36 +46,15 @@ export default defineComponent({
       default: "pill"
     },
     modelValue: {
-      type: [
-        String,
-        Number,
-        Boolean,
-        Array,
-        Object,
-        Date
-      ],
+      type: void 0,
       default: false
     },
     value: {
-      type: [
-        String,
-        Number,
-        Boolean,
-        Array,
-        Object,
-        Date
-      ],
+      type: void 0,
       default: true
     },
     uncheckedValue: {
-      type: [
-        String,
-        Number,
-        Boolean,
-        Array,
-        Object,
-        Date
-      ],
+      type: void 0,
       default: false
     },
     checked: {
@@ -151,7 +130,7 @@ export default defineComponent({
   @apply dark:text-dark-default;
 
   &__switch {
-    @apply flex items-center justify-center relative bg-subtle border-default font-medium;
+    @apply flex shrink-0 items-center justify-center relative bg-subtle border-default font-medium;
     @apply dark:bg-dark-subtle dark:border-dark-default;
   }
 

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

@@ -6,15 +6,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        type: PropType<any>;
         default: boolean;
     };
     value: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        type: PropType<any>;
         default: boolean;
     };
     uncheckedValue: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        type: PropType<any>;
         default: boolean;
     };
     checked: {
@@ -42,7 +42,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     switchClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
 }, {
@@ -55,15 +55,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        type: PropType<any>;
         default: boolean;
     };
     value: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        type: PropType<any>;
         default: boolean;
     };
     uncheckedValue: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        type: PropType<any>;
         default: boolean;
     };
     checked: {
@@ -91,20 +91,20 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     switchClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    value: string | number | boolean | Record<string, any> | unknown[] | Date;
+    value: any;
     variant: StyleVariant;
-    modelValue: string | number | boolean | Record<string, any> | unknown[] | Date;
+    modelValue: any;
     disabled: boolean;
     readonly: boolean;
     checked: boolean;
-    uncheckedValue: string | number | boolean | Record<string, any> | unknown[] | Date;
+    uncheckedValue: any;
     noLabel: boolean;
     checkedLabel: string;
     uncheckedLabel: string;

package/dist/components/tour/TourDialog.vue

@@ -187,12 +187,12 @@ export default defineComponent({
   }
 
   &__meta {
-    @apply text-xs text-muted flex-shrink-0;
+    @apply text-xs text-muted shrink-0;
     @apply dark:text-dark-muted;
   }
 
   &__controls {
-    @apply flex-grow flex space-x-2 justify-end items-center;
+    @apply grow flex space-x-2 justify-end items-center;
 
     > .btn--variant-link.btn--default {
       @apply text-on-emphasis hover:text-on-emphasis focus:text-on-emphasis;

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

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

package/dist/components/truncate/Truncate.vue.d.ts

@@ -4,7 +4,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     length: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     omission: {
@@ -38,7 +38,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     length: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     omission: {

package/dist/components/wizard/Wizard.vue

@@ -75,11 +75,11 @@ export default defineComponent({
   @apply flex flex-col w-full space-y-3;
 
   &__header {
-    @apply flex-shrink-0;
+    @apply shrink-0;
   }
 
   &__body {
-    @apply flex-grow;
+    @apply grow;
   }
 }
 </style>

package/dist/core/index.d.ts

@@ -28,3 +28,6 @@ export { useStep, } from '../components/steps';
 export { defineAccordion, } from '../components/accordion';
 export { useVModel, } from '../components/input';
 export { installLocale, formatDate, } from '../components/utils/date';
+export { default as useLoading, } from '../components/overlay/utils/use-loading';
+export { findAllChildren, toBoolean, } from '../components/utils/vnode';
+export { createSpinner, createAlias, createText, } from '../components/avatar/utils/create-image';

package/dist/core/index.mjs

@@ -98,3 +98,15 @@ export {
   installLocale,
   formatDate
 } from "../components/utils/date";
+export {
+  default as useLoading
+} from "../components/overlay/utils/use-loading";
+export {
+  findAllChildren,
+  toBoolean
+} from "../components/utils/vnode";
+export {
+  createSpinner,
+  createAlias,
+  createText
+} from "../components/avatar/utils/create-image";

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.23.0"
+  "version": "0.24.0"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/persona",
   "description": "Persona core package",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/privy-open-source/design-system.git",
@@ -64,7 +64,7 @@
     "@splidejs/splide": "4.1.4",
     "@testing-library/dom": "9.3.3",
     "@testing-library/user-event": "14.5.1",
-    "@vueuse/core": "10.3.0",
+    "@vueuse/core": "10.5.0",
     "@vueuse/math": "10.3.0",
     "@zxing/browser": "0.1.4",
     "@zxing/library": "0.20.0",
@@ -92,8 +92,8 @@
     "extends @privyid/browserslist-config"
   ],
   "peerDependencies": {
-    "@privyid/browserslist-config": "^0.23.0",
-    "@privyid/tailwind-preset": "^0.23.0",
+    "@privyid/browserslist-config": "^0.24.0",
+    "@privyid/tailwind-preset": "^0.24.0",
     "postcss-custom-properties": "^12.1.11 || ^13.0.0",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",
@@ -104,8 +104,8 @@
     "@nuxt/module-builder": "^0.5.0",
     "@nuxt/schema": "3.7.4",
     "@nuxtjs/tailwindcss": "^6.2.0",
-    "@privyid/browserslist-config": "^0.23.0",
-    "@privyid/tailwind-preset": "^0.23.0",
+    "@privyid/browserslist-config": "^0.24.0",
+    "@privyid/tailwind-preset": "^0.24.0",
     "@types/sanitize-html": "^2",
     "browserslist-to-esbuild": "^1.2.0",
     "nuxt": "3.7.4",