@privyid/persona 0.10.0 → 0.12.0

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,6 +244,7 @@ export default defineComponent({
 
   &__headers {
     @apply flex pt-4 space-x-2 bg-default;
+    @apply dark:bg-dark-default;
 
     > .datatable__header {
       @apply px-3;
@@ -212,6 +257,7 @@ export default defineComponent({
 
   .datatable__header {
     @apply text-subtle text-xs font-bold pb-3;
+    @apply dark:text-dark-subtle;
 
     &.datatable__checkbox,
     &.datatable__drag {
@@ -224,11 +270,18 @@ export default defineComponent({
   }
 
   &__row {
-    @apply flex space-x-2 w-full items-start;
+    @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 break-all;
+    @apply dark:text-dark-default;
 
     & > .datatable__header {
       @apply text-xs;
@@ -248,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 {
@@ -261,16 +326,19 @@ export default defineComponent({
 
     .datatable__row {
       @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 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,9 +61,13 @@ 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;
     items: Record<string, unknown>[];
@@ -67,5 +75,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     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;

package/dist/components/toggle/Toggle.vue

@@ -136,14 +136,17 @@ export default defineComponent({
 
 <style lang="postcss">
 .toggle {
-  @apply inline-flex cursor-pointer relative items-center select-none;
+  @apply inline-flex cursor-pointer relative items-center select-none text-default;
+  @apply dark:text-dark-default;
 
   &__switch {
-    @apply flex items-center justify-center relative bg-inactive border-subtle;
+    @apply flex items-center justify-center relative bg-subtle border-default;
+    @apply dark:bg-dark-subtle dark:border-dark-default;
   }
 
   &__pointer {
     @apply block absolute appearance-none cursor-pointer will-change-transform transition-transform -translate-x-1/2 bg-default;
+    @apply dark:bg-dark-layer-2;
   }
 
   &--disabled {
@@ -152,7 +155,8 @@ export default defineComponent({
 
   &&--pill {
     .toggle__switch {
-      @apply w-9 h-5 rounded-full text-[0.5rem] text-on-emphasis border;
+      @apply w-9 h-5 rounded-full text-[0.5rem] text-state-emphasis border;
+      @apply dark:text-dark-state-emphasis;
     }
 
     .toggle__label {
@@ -165,7 +169,8 @@ export default defineComponent({
 
     &.toggle--checked {
       .toggle__switch {
-        @apply bg-accent-emphasis border-accent-emphasis;
+        @apply bg-info-emphasis border-info-emphasis;
+        @apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis;
       }
 
       .toggle__pointer {
@@ -176,7 +181,7 @@ export default defineComponent({
 
   &&--flat {
     .toggle__switch {
-      @apply flex-row-reverse border-2 rounded-xs min-h-[1.5rem] min-w-[2.5rem];
+      @apply flex-row-reverse border-2 rounded-sm min-h-[1.5rem] min-w-[2.5rem];
     }
 
     .toggle__label {
@@ -185,19 +190,22 @@ export default defineComponent({
 
     .toggle__checked-label {
       @apply text-muted;
+      @apply dark:text-dark-muted;
     }
 
     .toggle__pointer {
-      @apply w-1/2 h-full rounded-sm z-[1];
+      @apply w-1/2 h-full rounded-xs z-[1];
     }
 
     &.toggle--checked {
       .toggle__checked-label {
         @apply text-default;
+        @apply dark:text-dark-default;
       }
 
       .toggle__unchecked-label {
         @apply text-muted;
+        @apply dark:text-dark-muted;
       }
 
       .toggle__pointer {
@@ -208,10 +216,12 @@ export default defineComponent({
 
   .dropdown__menu & {
     @apply px-3 py-2 cursor-pointer text-default w-full select-none text-left flex justify-between items-center flex-row-reverse;
+    @apply dark:text-dark-default;
 
     &:hover,
     &:focus-visible {
-      @apply bg-inactive;
+      @apply bg-subtle;
+      @apply dark:bg-dark-subtle;
     }
   }
 

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

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

package/dist/components/tooltip/Tooltip.vue

@@ -137,18 +137,22 @@ export default defineComponent({
   }
 
   &--black {
-    @apply bg-base-black text-on-emphasis;
+    @apply bg-inverse text-on-emphasis;
+    @apply dark:bg-dark-inverse dark:text-dark-on-emphasis;
 
     .tooltip__arrow {
-      @apply after:bg-base-black;
+      @apply after:bg-inverse;
+      @apply dark:after:bg-dark-inverse;
     }
   }
 
   &--white {
     @apply bg-default text-subtle;
+    @apply dark:bg-dark-default dark:text-dark-subtle;
 
     .tooltip__arrow {
       @apply after:bg-default;
+      @apply dark:after:bg-dark-default;
     }
   }
 }