@privyid/persona 0.9.0 → 0.11.0

package/dist/components/steps/utils/hook.d.ts

@@ -1,4 +1,4 @@
-export declare type HookFn = (...args: unknown[]) => unknown | Promise<unknown>;
+export type HookFn = (...args: unknown[]) => unknown | Promise<unknown>;
 export declare function runHook<H extends HookFn>(hook: H, ...args: Parameters<H>): Promise<boolean>;
 export declare function runAllHooks<H extends HookFn>(hooks: Iterable<H>, ...args: Parameters<H>): Promise<boolean>;
 export declare class Hook<H extends HookFn> {

package/dist/components/strengthbar/Strengthbar.vue

@@ -73,23 +73,27 @@ export default defineComponent({
 
   &__bar {
     @apply rounded-full h-1 bg-subtle-alpha flex-grow transition-colors duration-150;
+    @apply dark:bg-dark-subtle-alpha;
   }
 
   &&[data-status="low"] {
     .strengthbar--active {
       @apply bg-danger-emphasis;
+      @apply dark:bg-dark-danger-emphasis;
     }
   }
 
   &&[data-status="mid"] {
     .strengthbar--active {
       @apply bg-warning-emphasis;
+      @apply dark:bg-dark-warning-emphasis;
     }
   }
 
   &&[data-status="high"] {
     .strengthbar--active {
       @apply bg-success-emphasis;
+      @apply dark:bg-dark-success-emphasis;
     }
   }
 }

package/dist/components/subheading/Subheading.vue

@@ -50,7 +50,7 @@ export default defineComponent({
 
 <style lang="postcss">
 .subheading {
-  @apply m-0 capitalize tracking-normal text-default;
+  @apply m-0 capitalize tracking-normal text-default dark:text-dark-default;
 
   /**
   * Weight variant

package/dist/components/subheading/Subheading.vue.d.ts

@@ -16,7 +16,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     overline: {
         type: BooleanConstructor;
-        default: any;
+        default: undefined;
     };
 }, {
     classNames: import("vue-demi").ComputedRef<String[]>;
@@ -35,7 +35,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     overline: {
         type: BooleanConstructor;
-        default: any;
+        default: undefined;
     };
 }>>, {
     size: SizeVariant;

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

@@ -1 +1 @@
-export declare type SizeVariant = 'sm' | 'md';
+export type SizeVariant = 'sm' | 'md';

package/dist/components/table/Table.vue

@@ -39,6 +39,7 @@
     </div>
 
     <Draggable
+      v-if="items.length > 0"
       v-model="rows"
       class="datatable__body"
       handle=".datatable__drag"
@@ -96,6 +97,45 @@
         </div>
       </template>
     </Draggable>
+
+    <div
+      v-else
+      class="datatable__body">
+      <div
+        class="datatable__row">
+        <template v-if="variant === 'flexible'">
+          <div
+            v-for="field in fields"
+            :key="field.key"
+            class="datatable__cell datatable__cell--empty"
+            data-testid="datatable-cell-empty"
+            :class="field.tdClass"
+            :style="field.width ? { width: `${field.width}%` } : { flex: '1 1 0%' }"
+            :data-cell="field.key">
+            <div
+              class="datatable__header"
+              :class="field.thClass">
+              <slot
+                :name="`head(${field.key})`"
+                :label="field.label"
+                :field="field"
+                :data-header="field.key">
+                {{ field.label }}
+              </slot>
+            </div>
+          </div>
+        </template>
+        <div
+          data-testid="datatable-empty"
+          class="datatable__cell datatable__cell--empty datatable__state-empty">
+          <slot name="empty">
+            <span class="flex justify-center items-center text-subtle dark:text-dark-subtle">
+              {{ emptyLabel }}
+            </span>
+          </slot>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -139,6 +179,10 @@ export default defineComponent({
     draggable: {
       type: Boolean,
       default: false
+    },
+    emptyLabel: {
+      type: String,
+      default: "There are no records to show"
     }
   },
   models: {
@@ -200,14 +244,20 @@ export default defineComponent({
 
   &__headers {
     @apply flex pt-4 space-x-2 bg-default;
+    @apply dark:bg-dark-default;
 
     > .datatable__header {
       @apply px-3;
     }
+
+    + .datatable__body {
+      @apply pt-2;
+    }
   }
 
   .datatable__header {
     @apply text-subtle text-xs font-bold pb-3;
+    @apply dark:text-dark-subtle;
 
     &.datatable__checkbox,
     &.datatable__drag {
@@ -215,16 +265,23 @@ export default defineComponent({
     }
 
     &.datatable__drag {
-      @apply invisible;
+      @apply invisible mx-3;
     }
   }
 
   &__row {
-    @apply flex space-x-2 w-full items-center bg-default;
+    @apply flex space-x-2 w-full items-start flex-wrap;
+
+    & > :not([hidden]) {
+      ~ .basis-full {
+        @apply ml-0;
+      }
+    }
   }
 
   &__cell {
-    @apply py-4 px-3 text-sm text-default;
+    @apply py-4 px-3 text-sm text-default break-all;
+    @apply dark:text-dark-default;
 
     & > .datatable__header {
       @apply text-xs;
@@ -232,7 +289,7 @@ export default defineComponent({
 
     &.datatable__checkbox,
     &.datatable__drag {
-      @apply flex-shrink-0 flex-grow-0;
+      @apply flex-shrink-0 flex-grow-0 self-center;
     }
 
     &.datatable__checkbox {
@@ -244,6 +301,18 @@ export default defineComponent({
     &.datatable__drag {
       @apply cursor-grabbing mx-3;
     }
+
+    &--empty {
+      @apply pt-4 pb-0 px-3 text-sm text-default;
+
+      &.basis-full {
+        @apply pb-4;
+      }
+    }
+  }
+
+  &__state-empty {
+    @apply basis-full flex-1;
   }
 
   &__body {
@@ -256,13 +325,20 @@ export default defineComponent({
     }
 
     .datatable__row {
-      @apply rounded border border-default;
+      @apply rounded border border-default bg-default;
+      @apply dark:border-dark-default dark:bg-dark-default;
     }
   }
 
   &--static {
+    .datatable__headers {
+      @apply border-b border-b-default;
+      @apply dark:border-b-dark-default;
+    }
+
     .datatable__body {
-      @apply border-b border-b-default divide-y divide-default;
+      @apply border-b border-b-default divide-y divide-default bg-default;
+      @apply dark:border-b-dark-default dark:divide-dark-default dark:bg-dark-default;
     }
   }
 }

package/dist/components/table/Table.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
 import { TableField } from '.';
-declare type TypeVariant = 'flexible' | 'static';
+type TypeVariant = 'flexible' | 'static';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<TypeVariant>;
@@ -8,15 +8,15 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     modelValue: {
         type: PropType<Record<string, unknown>[]>;
-        default: () => any[];
+        default: () => never[];
     };
     fields: {
         type: PropType<TableField[]>;
-        default: () => any[];
+        default: () => never[];
     };
     items: {
         type: PropType<Record<string, unknown>[]>;
-        default: () => any[];
+        default: () => never[];
     };
     selectable: {
         type: BooleanConstructor;
@@ -26,6 +26,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    emptyLabel: {
+        type: StringConstructor;
+        default: string;
+    };
 }, {
     model: import("vue-demi").Ref<Record<string, unknown>[]>;
     rows: import("vue-demi").WritableComputedRef<Record<string, unknown>[]>;
@@ -39,15 +43,15 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     modelValue: {
         type: PropType<Record<string, unknown>[]>;
-        default: () => any[];
+        default: () => never[];
     };
     fields: {
         type: PropType<TableField[]>;
-        default: () => any[];
+        default: () => never[];
     };
     items: {
         type: PropType<Record<string, unknown>[]>;
-        default: () => any[];
+        default: () => never[];
     };
     selectable: {
         type: BooleanConstructor;
@@ -57,15 +61,20 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    emptyLabel: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & {
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-    "onUpdate:items"?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:items"?: ((...args: any[]) => any) | undefined;
 }, {
     variant: TypeVariant;
-    modelValue: Record<string, unknown>[];
     items: Record<string, unknown>[];
+    modelValue: Record<string, unknown>[];
     draggable: boolean;
     fields: TableField[];
     selectable: boolean;
+    emptyLabel: string;
 }>;
 export default _default;

package/dist/components/tabs/Tabs.vue

@@ -21,7 +21,7 @@
           data-testid="tab"
           :disabled="tab.disabled"
           :active="i === active"
-          :class="[{ 'nav__item--no-icon' : (!tab.slots.icon) }, { 'nav__item--no-label' : (!tab.title && !tab.slots.title) }]"
+          :class="{ 'nav__item--no-icon' : (!tab.slots.icon), 'nav__item--no-label' : (!tab.title && !tab.slots.title) }"
           @click="selectTab(i, tab)">
           <template #icon>
             <template v-if="tab.slots.icon">
@@ -147,6 +147,7 @@ export default defineComponent({
   */
   .nav {
     @apply border-b border-b-default;
+    @apply dark:border-b-dark-default;
 
     &__link {
       .badge {
@@ -156,6 +157,7 @@ export default defineComponent({
 
     &--vertical {
       @apply pb-2 border-b-0 border-r border-r-default;
+      @apply dark:border-r-dark-default;
     }
   }
 
@@ -187,6 +189,7 @@ export default defineComponent({
 
     .nav {
       @apply border-b-0 border-r-0 border-l border-l-default;
+      @apply dark:border-l-dark-default;
 
       &.nav--pills {
         @apply pl-2 pr-0;

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

@@ -28,7 +28,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     navWrapperClass: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     modelValue: {
         type: NumberConstructor;
@@ -62,7 +62,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     navWrapperClass: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     modelValue: {
         type: NumberConstructor;

package/dist/components/text/Text.vue.d.ts

@@ -7,7 +7,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     href: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
 }, {
     hyperlink: import("vue-demi").ComputedRef<String>;
@@ -19,7 +19,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     href: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
 }>>, {
     variant: StyleVariant;

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

@@ -1 +1 @@
-export declare type StyleVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subheading' | 'subheading2' | 'body' | 'body2' | 'btn' | 'btn2' | 'caption' | 'caption2' | 'formlabel' | 'formlabel2' | 'overline';
+export type StyleVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subheading' | 'subheading2' | 'body' | 'body2' | 'btn' | 'btn2' | 'caption' | 'caption2' | 'formlabel' | 'formlabel2' | 'overline';

package/dist/components/textarea/Textarea.vue

@@ -134,14 +134,17 @@ export default defineComponent({
   @apply flex flex-auto relative;
 
   &__input {
-    @apply p-3 rounded border border-solid border-muted hover:border-subtle focus:border-subtle placeholder:text-muted w-full outline-none text-default bg-default resize-none min-h-[46px] focus:ring-4 focus:ring-subtle/10 focus:z-[1];
+    @apply p-3 rounded border border-solid border-muted hover:border-subtle focus:border-subtle placeholder:text-muted w-full outline-none text-default bg-default resize-none min-h-[46px] focus:ring-4 focus:ring-subtle/10 focus:z-1;
+    @apply dark:border-dark-muted hover:dark:border-dark-subtle focus:dark:border-dark-subtle placeholder:dark:text-dark-muted dark:text-dark-default dark:bg-dark-default focus:dark:ring-dark-subtle/10;
 
     .textarea--readonly & {
       @apply hover:border-muted focus:border-muted focus:ring-0 focus:z-0;
+      @apply hover:dark:border-dark-muted focus:dark:border-dark-muted;
     }
 
     .textarea--disabled & {
-      @apply bg-muted border-muted pointer-events-none text-muted;
+      @apply bg-subtle border-subtle pointer-events-none text-muted;
+      @apply dark:bg-dark-subtle dark:border-dark-subtle dark:text-dark-muted;
     }
 
     .textarea--resize & {
@@ -154,16 +157,14 @@ export default defineComponent({
 
     .state--error &,
     .textarea--error & {
-      @apply border-danger-emphasis hover:border-danger-emphasis;
-
-      &:focus {
-        @apply ring-danger border-danger-emphasis;
-      }
+      @apply border-danger-emphasis hover:border-danger-emphasis focus:ring-danger focus:border-danger-emphasis;
+      @apply dark:border-dark-danger-emphasis hover:dark:border-dark-danger-emphasis focus:dark:ring-dark-danger focus:dark:border-dark-danger-emphasis;
     }
   }
 
   &__counter {
     @apply text-right text-muted text-xs absolute bottom-1 right-1 pointer-events-none z-1;
+    @apply dark:text-dark-muted;
   }
 }
 

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

@@ -37,7 +37,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     maxlength: {
         type: (NumberConstructor | StringConstructor)[];
-        default: any;
+        default: undefined;
     };
 }, {
     model: import("vue-demi").Ref<string>;
@@ -84,16 +84,16 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     maxlength: {
         type: (NumberConstructor | StringConstructor)[];
-        default: any;
+        default: undefined;
     };
 }>> & {
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-    onInput?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onInput?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
     resize: boolean;
-    disabled: boolean;
     modelValue: string;
+    disabled: boolean;
     readonly: boolean;
     placeholder: string;
     maxlength: string | number;

package/dist/components/toast/Toast.vue

@@ -123,6 +123,7 @@ 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;
   }
 
   .toast__body {
@@ -154,10 +155,12 @@ export default defineComponent({
   &:is(.toast--info) {
     .toast__title {
       @apply text-default;
+      @apply dark:text-dark-default;
     }
 
     .toast__text {
       @apply text-subtle;
+      @apply dark:text-dark-subtle;
     }
   }
 
@@ -169,7 +172,8 @@ export default defineComponent({
   &&--info {
     .toast__icon,
     &.toast--filled {
-      @apply bg-subtle text-accent;
+      @apply bg-base text-info;
+      @apply dark:bg-dark-base dark:text-dark-info;
     }
   }
 
@@ -184,12 +188,14 @@ export default defineComponent({
     &.toast--simple {
       .toast__title {
         @apply text-danger;
+        @apply dark:text-dark-danger;
       }
     }
 
     .toast__icon,
     &.toast--filled {
       @apply bg-danger-emphasis;
+      @apply dark:bg-dark-danger-emphasis;
     }
   }
 
@@ -197,12 +203,14 @@ export default defineComponent({
     &.toast--simple {
       .toast__title {
         @apply text-success;
+        @apply dark:text-dark-success;
       }
     }
 
     .toast__icon,
     &.toast--filled {
       @apply bg-success-emphasis;
+      @apply dark:bg-dark-success-emphasis;
     }
   }
 
@@ -210,12 +218,14 @@ export default defineComponent({
     &.toast--simple {
       .toast__title {
         @apply text-warning;
+        @apply dark:text-dark-warning;
       }
     }
 
     .toast__icon,
     &.toast--filled {
       @apply bg-warning-emphasis;
+      @apply dark:bg-dark-warning-emphasis;
     }
   }
 
@@ -226,14 +236,17 @@ export default defineComponent({
   */
   &&--simple {
     @apply bg-default;
+    @apply dark:bg-dark-default;
 
     .toast__text {
       @apply text-subtle;
+      @apply dark:text-dark-subtle;
     }
 
     &:not(.toast--info) {
       .toast__icon {
-        @apply text-on-emphasis;
+        @apply text-state-emphasis;
+        @apply dark:text-dark-state-emphasis;
       }
     }
   }
@@ -250,7 +263,8 @@ export default defineComponent({
     }
 
     &:not(.toast--info) {
-      @apply text-on-emphasis;
+      @apply text-state-emphasis;
+      @apply dark:text-dark-state-emphasis;
     }
   }
 }

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

@@ -47,7 +47,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: number;
     };
 }>> & {
-    onDismissed?: (...args: any[]) => any;
+    onDismissed?: ((...args: any[]) => any) | undefined;
 }, {
     variant: ToastStyleVariant;
     type: ToastTypeVariant;

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

@@ -4,12 +4,12 @@ declare const _default: import("vue-demi").DefineComponent<{}, {
     remove: (index: number) => void;
     items: import("vue-demi").Ref<{
         _id: symbol;
-        type?: import(".").ToastTypeVariant;
-        variant?: import(".").ToastStyleVariant;
+        type?: import(".").ToastTypeVariant | undefined;
+        variant?: import(".").ToastStyleVariant | undefined;
         title: string;
         text: string;
-        duration?: number;
-        toastClass?: string | string[];
+        duration?: number | undefined;
+        toastClass?: string | string[] | 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<{}>>, {}>;
 export default _default;

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

@@ -1,5 +1,5 @@
-export declare type ToastTypeVariant = 'info' | 'success' | 'warning' | 'error';
-export declare type ToastStyleVariant = 'simple' | 'filled';
+export type ToastTypeVariant = 'info' | 'success' | 'warning' | 'error';
+export type ToastStyleVariant = 'simple' | 'filled';
 export interface ToastOption {
     type?: ToastTypeVariant;
     variant?: ToastStyleVariant;