@privyid/persona 0.21.0 → 0.23.0

package/dist/components/checkbox/Checkbox.vue

@@ -6,31 +6,8 @@
     @click.prevent="toggle">
     <span class="checkbox__icon">
       <!-- checked icon -->
-      <template v-if="indeterminate">
-        <svg
-          width="10"
-          height="10"
-          viewBox="0 0 14 2"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg">
-          <rect
-            width="14"
-            height="2" />
-        </svg>
-      </template>
-      <template v-else>
-        <svg
-          width="10"
-          height="10"
-          viewBox="0 0 14 10"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M3.81581 8.48528L5.23002 9.8995L6.64423 8.48528L13.7153 1.41421L12.3011 0L5.23002 7.07107L1.69449 3.53553L0.280273 4.94975L3.81581 8.48528Z" />
-        </svg>
-      </template>
+      <icon-inderteminate v-if="indeterminate" />
+      <icon-checkbox v-else />
     </span>
     <span class="checkbox__label">
       <slot />
@@ -44,95 +21,104 @@
   </label>
 </template>
 
-<script>
-import { useVModel } from ".";
-import { computed, defineComponent } from "vue-demi";
-export default defineComponent({
-  props: {
-    name: {
-      type: String,
-      default: void 0
-    },
-    modelValue: {
-      type: [
-        String,
-        Number,
-        Boolean,
-        Array,
-        Object,
-        Date
-      ],
-      default: false
-    },
-    value: {
-      type: [
-        String,
-        Number,
-        Boolean,
-        Array,
-        Object,
-        Date
-      ],
-      default: true
-    },
-    uncheckedValue: {
-      type: [
-        String,
-        Number,
-        Boolean,
-        Array,
-        Object,
-        Date
-      ],
-      default: false
-    },
-    checked: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    indeterminate: {
-      type: Boolean,
-      default: false
-    }
-  },
+<script lang="ts" setup>
+import { useVModel } from '.'
+import { computed } from 'vue-demi'
+import IconCheckbox from './icon/IconCheckbox.vue'
+import IconInderteminate from './icon/IconInderteminate.vue'
+
+defineOptions({
   models: {
-    prop: "modelValue",
-    event: "update:modelValue"
+    prop : 'modelValue',
+    event: 'update:modelValue',
   },
-  emits: ["change", "update:modelValue"],
-  setup(props) {
-    const model = useVModel(props);
-    const classNames = computed(() => {
-      const result = [];
-      if (model.value)
-        result.push("checkbox--checked");
-      if (props.indeterminate)
-        result.push("checkbox--indeterminate");
-      if (props.disabled)
-        result.push("checkbox--disabled");
-      if (props.readonly)
-        result.push("checkbox--readonly");
-      return result;
-    });
-    function toggle() {
-      if (!props.readonly && !props.disabled)
-        model.value = !model.value;
-    }
-    return {
-      model,
-      classNames,
-      toggle
-    };
-  }
-});
+})
+
+const props = defineProps({
+  name: {
+    type   : String,
+    default: undefined,
+  },
+  modelValue: {
+    type: [
+      String,
+      Number,
+      Boolean,
+      Array,
+      Object,
+      Date,
+    ],
+    default: false,
+  },
+  value: {
+    type: [
+      String,
+      Number,
+      Boolean,
+      Array,
+      Object,
+      Date,
+    ],
+    default: true,
+  },
+  uncheckedValue: {
+    type: [
+      String,
+      Number,
+      Boolean,
+      Array,
+      Object,
+      Date,
+    ],
+    default: false,
+  },
+  checked: {
+    type   : Boolean,
+    default: false,
+  },
+  readonly: {
+    type   : Boolean,
+    default: false,
+  },
+  disabled: {
+    type   : Boolean,
+    default: false,
+  },
+  indeterminate: {
+    type   : Boolean,
+    default: false,
+  },
+})
+
+defineEmits<{
+  'change': [boolean],
+  'update:modelValue': [unknown],
+}>()
+
+const model = useVModel(props)
+
+const classNames = computed(() => {
+  const result: string[] = []
+
+  if (model.value)
+    result.push('checkbox--checked')
+
+  if (props.indeterminate)
+    result.push('checkbox--indeterminate')
+
+  if (props.disabled)
+    result.push('checkbox--disabled')
+
+  if (props.readonly)
+    result.push('checkbox--readonly')
+
+  return result
+})
+
+function toggle () {
+  if (!props.readonly && !props.disabled)
+    model.value = !model.value
+}
 </script>
 
 <style lang="postcss">

package/dist/components/checkbox/icon/IconCheckbox.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 14 10"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.81581 8.48528L5.23002 9.8995L6.64423 8.48528L13.7153 1.41421L12.3011 0L5.23002 7.07107L1.69449 3.53553L0.280273 4.94975L3.81581 8.48528Z" />
+  </svg>
+</template>

package/dist/components/checkbox/icon/IconInderteminate.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 14 2"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <rect
+      width="14"
+      height="2" />
+  </svg>
+</template>

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;
+    title: string;
     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,23 +24,23 @@ 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: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
     rounded: {
@@ -96,23 +96,23 @@ 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: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
         default: undefined;
     };
     rounded: {

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;
@@ -137,14 +137,14 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     error: boolean;
     size: SizeVariant;
-    modelValue: Date | [Date, Date];
     start: Date;
-    mode: "date" | "month" | "year";
     end: Date;
     min: Date;
     max: Date;
+    modelValue: Date | [Date, Date];
     disabled: boolean;
     readonly: boolean;
+    mode: "date" | "month" | "year";
     range: boolean;
     minRange: string;
     maxRange: string;

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 {

package/dist/components/dot/Dot.vue.d.ts

@@ -22,7 +22,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>>, {
-    color: ColorVariant;
     variant: StyleVariant;
+    color: ColorVariant;
 }, {}>;
 export default _default;