@privyid/persona 0.21.0 → 0.22.0

package/dist/components/contextual-bar/ContextualBar.vue

@@ -83,9 +83,9 @@ export default defineComponent({
   },
   inheritAttrs: false,
   props: {
-    variant: {
+    state: {
       type: String,
-      default: "light"
+      default: "info"
     },
     backgroundUrl: {
       type: String,
@@ -131,8 +131,8 @@ export default defineComponent({
     }
     const classNames = computed(() => {
       const result = [""];
-      if (props.variant)
-        result.push(`contextual-bar--${props.variant}`);
+      if (props.state)
+        result.push(`contextual-bar--${props.state}`);
       if (props.align)
         result.push(`contextual-bar--align-${props.align}`);
       if (props.backgroundUrl)
@@ -176,10 +176,6 @@ export default defineComponent({
     @apply transition-transform;
   }
 
-  &--background-image {
-    @apply bg-no-repeat bg-cover bg-[top_center];
-  }
-
   &__wrapper {
     @apply px-24 items-center flex mr-9;
 
@@ -198,6 +194,18 @@ export default defineComponent({
     }
   }
 
+  /**
+  * Custom background image
+  * are available
+  */
+  &--background-image {
+    @apply bg-no-repeat bg-cover bg-[top_center];
+  }
+
+  /**
+  * Contextualbar alignment:
+  * left, center and right
+  */
   &&--align-left {
     .contextual-bar__wrapper {
       @apply justify-start text-left;
@@ -252,6 +260,10 @@ export default defineComponent({
     }
   }
 
+  /**
+  * Contextualbar body
+  * content
+  */
   &__content {
     @apply flex-grow;
 
@@ -279,22 +291,21 @@ export default defineComponent({
     }
   }
 
+  /**
+  * Dismiss button of
+  * contextualbar
+  */
   &__close {
     @apply absolute right-6 top-1/2 -translate-y-1/2 cursor-pointer text-default/30 hover:text-default/50;
     @apply dark:text-dark-default/30 hover:dark:text-dark-default/50;
   }
 
-  &&--dark {
-    @apply bg-inverse text-on-emphasis;
-    @apply dark:bg-dark-inverse dark:text-dark-on-emphasis;
-
-    .contextual-bar__close {
-      @apply text-on-emphasis/30 hover:text-on-emphasis/50;
-      @apply dark:text-dark-on-emphasis/30 hover:dark:text-dark-on-emphasis/50;
-    }
-  }
-
-  &&--light {
+  /**
+  * Contextualbar has 4 state
+  * variant: error, warning, info
+  * and neutral
+  */
+  &&--info {
     @apply bg-base text-default;
     @apply dark:bg-dark-base dark:text-dark-default;
 
@@ -305,5 +316,42 @@ export default defineComponent({
       }
     }
   }
+
+  &&--error,
+  &&--warning,
+  &&--neutral {
+    @apply text-state-emphasis;
+    @apply dark:text-dark-state-emphasis;
+  }
+
+  &&--error {
+    @apply bg-danger-emphasis;
+    @apply dark:bg-dark-danger-emphasis;
+
+    .contextual-bar__close {
+      @apply text-danger hover:text-danger/50;
+      @apply dark:text-dark-danger dark:hover:text-dark-danger/50;
+    }
+  }
+
+  &&--warning {
+    @apply bg-warning-emphasis;
+    @apply dark:bg-dark-warning-emphasis;
+
+    .contextual-bar__close {
+      @apply text-warning hover:text-warning/50;
+      @apply dark:text-dark-warning;
+    }
+  }
+
+  &&--neutral {
+    @apply bg-inverse text-on-emphasis;
+    @apply dark:bg-dark-inverse dark:text-dark-on-emphasis;
+
+    .contextual-bar__close {
+      @apply text-on-emphasis/30 hover:text-on-emphasis/50;
+      @apply dark:text-dark-on-emphasis/30 hover:dark:text-dark-on-emphasis/50;
+    }
+  }
 }
 </style>

package/dist/components/contextual-bar/ContextualBar.vue.d.ts

@@ -2,7 +2,7 @@ import { PropType } from 'vue-demi';
 import { AlignVariant } from '../nav';
 import { StyleVariant } from '.';
 declare const _default: import("vue-demi").DefineComponent<{
-    variant: {
+    state: {
         type: PropType<StyleVariant>;
         default: string;
     };
@@ -37,7 +37,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     onEnter: (target: HTMLDivElement) => void;
     onLeave: (target: HTMLDivElement) => void;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("close" | "show" | "update:modelValue" | "hide")[], "close" | "show" | "update:modelValue" | "hide", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    variant: {
+    state: {
         type: PropType<StyleVariant>;
         default: string;
     };
@@ -71,12 +71,12 @@ declare const _default: import("vue-demi").DefineComponent<{
     onShow?: ((...args: any[]) => any) | undefined;
     onHide?: ((...args: any[]) => any) | undefined;
 }, {
-    variant: StyleVariant;
     dismissable: boolean;
     title: string;
     modelValue: boolean;
     message: string;
     align: AlignVariant;
+    state: StyleVariant;
     backgroundUrl: string;
 }, {}>;
 export default _default;

package/dist/components/contextual-bar/index.d.ts

@@ -1 +1 @@
-export type StyleVariant = 'light' | 'dark';
+export type StyleVariant = 'error' | 'warning' | 'info' | 'neutral';

package/dist/components/cropper/Cropper.vue.d.ts

@@ -24,19 +24,19 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
     width: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
     height: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
     imgWidth: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     imgHeight: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     imgClass: {
@@ -96,19 +96,19 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
     width: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
     height: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
     imgWidth: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     imgHeight: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     imgClass: {

package/dist/components/datepicker/Datepicker.vue

@@ -197,6 +197,8 @@ export default defineComponent({
   }
 
   > .dropdown__menu {
+    --p-dropdown-max-height: 100%;
+
     @apply min-w-max max-h-min;
   }
 }

package/dist/components/datepicker/Datepicker.vue.d.ts

@@ -64,7 +64,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     isOpen: import("vue-demi").Ref<boolean>;
     classNames: import("vue-demi").ComputedRef<string[]>;
-    model: import("vue-demi").Ref<Date | [Date, Date] | undefined>;
+    model: import("vue-demi").Ref<Date | [Date, Date]>;
     value: import("vue-demi").ComputedRef<string>;
     onFocus: () => void;
     onSelected: (event: Event) => void;

package/dist/components/dialog/Dialog.vue

@@ -6,6 +6,8 @@
     :title="context.title"
     :size="context.size"
     :centered="context.centered"
+    :dismissable="context.dismissable"
+    :no-close-on-backdrop="context.noCloseOnBackdrop"
     :text="context.text"
     @close="onCancel">
     <template #footer>

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

@@ -13,6 +13,8 @@ export interface DialogOptions {
     text?: string;
     size?: SizeVariant;
     centered?: boolean;
+    dismissable?: boolean;
+    noCloseOnBackdrop?: boolean;
     footerAlign?: FooterAlignVariant;
     cancel?: DialogButton;
     confirm?: DialogButton;

package/dist/components/divider/Divider.vue

@@ -39,7 +39,7 @@ export default defineComponent({
 
   &&--vertical,
   .input-group > & {
-    @apply flex items-center my-0 py-3 border-subtle bg-transparent z-1;
+    @apply flex items-center my-0 py-3 border-subtle bg-transparent z-1 border-y;
     @apply dark:border-dark-subtle dark:bg-transparent;
 
     &::before {