@privyid/persona 0.25.2 → 0.27.0

package/dist/components/calendar/Calendar.vue.d.ts

@@ -174,19 +174,19 @@ declare const _default: import("vue-demi").DefineComponent<{
         validator(value: string): boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:start"?: ((...args: any[]) => any) | undefined;
     "onUpdate:end"?: ((...args: any[]) => any) | undefined;
 }, {
+    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/camera/Camera.vue.d.ts

@@ -49,7 +49,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     toast: (text: string) => void;
     deviceId: ComputedRef<string | undefined>;
     constraints: ComputedRef<MediaStreamConstraints>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "start" | "update:modelValue" | "result")[], "change" | "start" | "update:modelValue" | "result", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue" | "result" | "start")[], "change" | "update:modelValue" | "result" | "start", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: PropType<string | string[] | File | File[]>;
         default: string;
@@ -79,15 +79,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onStart?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     onResult?: ((...args: any[]) => any) | undefined;
+    onStart?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: string | string[] | File | File[];
     facingMode: ConstrainDOMString;
     mask: MaskVariant;
     mirror: boolean | "preview" | "all";
+    modelValue: string | string[] | File | File[];
     modelModifiers: ModelModifier;
     adapter: Adapter;
     silent: boolean;

package/dist/components/card/Card.vue.d.ts

@@ -67,8 +67,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     onDismissed?: ((...args: any[]) => any) | undefined;
 }, {
     dismissable: boolean;
-    disabled: boolean;
     title: string;
+    disabled: boolean;
     element: ElementVariant;
     sectioned: boolean;
     callout: boolean;

package/dist/components/card/CardSection.vue.d.ts

@@ -19,7 +19,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    disabled: boolean;
     title: string;
+    disabled: boolean;
 }, {}>;
 export default _default;

package/dist/components/carousel/Carousel.vue.d.ts

@@ -94,15 +94,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: number;
     direction: DirectionVariant;
     align: AlignmentVariant;
     width: string | number;
-    height: string | number;
     loop: boolean;
+    height: string | number;
     autoplay: boolean;
     autoplayInterval: string | number;
     splideOptions: Options;

package/dist/components/checkbox/index.mjs

@@ -12,21 +12,19 @@ function isChecked(modelValue, checked) {
 }
 export function useVModel(props) {
   const { emit } = getCurrentInstance();
-  const checked = props.value;
-  const unchecked = props.uncheckedValue;
-  const localValue = ref(isChecked(props.modelValue, checked) || props.checked);
+  const localValue = ref(isChecked(props.modelValue, props.value) || props.checked);
   const model = computed({
     get() {
-      return isChecked(props.modelValue, checked) || props.checked;
+      return isChecked(props.modelValue, props.value) || props.checked;
     },
     set(value) {
-      const newValue = value ? checked : unchecked;
+      const newValue = value ? props.value : props.uncheckedValue;
       if (Array.isArray(props.modelValue)) {
         if (value) {
           if (!valueIn(props.modelValue, newValue))
             emit("update:modelValue", [...props.modelValue, newValue]);
         } else
-          emit("update:modelValue", props.modelValue.filter((old) => !isEqual(old, checked)));
+          emit("update:modelValue", props.modelValue.filter((old) => !isEqual(old, props.value)));
       } else
         emit("update:modelValue", newValue);
       emit("change", value);

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

@@ -72,8 +72,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     onHide?: ((...args: any[]) => any) | undefined;
 }, {
     dismissable: boolean;
-    modelValue: boolean;
     title: string;
+    modelValue: boolean;
     message: string;
     align: AlignVariant;
     state: StyleVariant;

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

@@ -128,8 +128,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     onResult?: ((...args: any[]) => any) | undefined;
     onLoad?: ((...args: any[]) => any) | undefined;
 }, {

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

@@ -130,25 +130,25 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:start"?: ((...args: any[]) => any) | undefined;
     "onUpdate:end"?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
     size: SizeVariant;
+    placeholder: string;
+    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;
-    placeholder: string;
     format: string;
 }, {}>;
 export default _default;

package/dist/components/dropdown/Dropdown.vue

@@ -197,8 +197,10 @@ defineEmits<{
 }>()
 
 const slots = defineSlots<{
-  prepend(): VNode[],
-  append(): VNode[],
+  'activator'(props: { isOpen: boolean, open: () => void, close: () => void, toggle: () => void }): VNode[],
+  'button-content'(): VNode[],
+  'prepend'(): VNode[],
+  'append'(): VNode[],
 }>()
 
 const root     = ref<HTMLDivElement>()

package/dist/components/dropdown-subitem/DropdownSubitem.vue.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     back: () => void;
     reset: () => void;
     canBack: import("vue-demi").ComputedRef<boolean>;
-    transition: import("vue-demi").Ref<"slide-left" | "slide-right" | "none">;
+    transition: import("vue-demi").Ref<"none" | "slide-left" | "slide-right">;
     handleOnClick: () => void;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "click"[], "click", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     text: {

package/dist/components/dropzone/Dropzone.vue.d.ts

@@ -77,15 +77,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }, {
+    accept: string;
     modelValue: string | string[] | File | File[];
+    modelModifiers: ModelModifier;
     disabled: boolean;
     readonly: boolean;
-    accept: string;
-    modelModifiers: ModelModifier;
     multiple: boolean | MultipleType;
     maxlength: string | number;
     clearOnCancel: boolean;

package/dist/components/filterbar/pinned/PinnedDate.vue.d.ts

@@ -58,10 +58,10 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    min: Date;
-    max: Date;
     modelValue: Date;
     mode: "date" | "month" | "year";
+    min: Date;
+    max: Date;
     format: string;
 }, {}>;
 export default _default;

package/dist/components/filterbar/pinned/PinnedMultiselect.vue.d.ts

@@ -36,7 +36,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    options: string[] | SelectItem[];
     modelValue: unknown[];
+    options: string[] | SelectItem[];
 }, {}>;
 export default _default;

package/dist/components/filterbar/pinned/PinnedSelect.vue.d.ts

@@ -36,7 +36,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    options: string[] | SelectItem[];
     modelValue: string | number | boolean | Record<string, any> | unknown[] | Date;
+    options: string[] | SelectItem[];
 }, {}>;
 export default _default;

package/dist/components/filterbar/pinned/PinnedToggle.vue.d.ts

@@ -46,8 +46,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }, {
     value: string | number | boolean | Record<string, any> | unknown[] | Date;
     modelValue: string | number | boolean | Record<string, any> | unknown[] | Date;

package/dist/components/input/Input.vue.d.ts

@@ -80,11 +80,11 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     error: boolean;
     size: SizeVariant;
+    clearable: boolean;
+    accept: AcceptVariant;
     modelValue: string | number;
     disabled: boolean;
     readonly: boolean;
-    clearable: boolean;
-    accept: AcceptVariant;
     containerClass: string | Record<string, any> | unknown[];
 }, {}>;
 export default _default;

package/dist/components/input-color/index.d.ts

@@ -0,0 +1 @@
+export type StyleVariant = 'default' | 'circle';

package/dist/components/input-color/inputColor.vue

@@ -0,0 +1,257 @@
+<template>
+  <div
+    class="input-color"
+    :class="[containerClass, inputClass]"
+    data-testid="input-color"
+    :style="`--p-input-color-bg:${model}`">
+    <span class="input-color__body">
+      <span class="input-color__face">
+        <IconAddPlus24
+          v-if="!model"
+          data-testid="input-color-add"
+          class="input-color__icon" />
+        <template v-else>
+          <IconCheckmarkCircleSolid20
+            v-if="variant === 'circle'"
+            data-testid="input-color-check-circle"
+            class="input-color__icon" />
+          <IconCheckmarkCircleSolid24
+            v-else
+            class="input-color__icon"
+            data-testid="input-color-check" />
+        </template>
+      </span>
+      <input
+        v-model="model"
+        :disabled="disabled"
+        type="color"
+        data-testid="input-color-form"
+        :class="[classNames, 'input-color__form']">
+    </span>
+    <slot
+      name="clearable"
+      :clear="clear">
+      <IconClear
+        v-if="model && clearable"
+        data-testid="input-color-clear"
+        class="input-color__clear"
+        @click="clear" />
+    </slot>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue-demi'
+import { computed } from 'vue-demi'
+import { useVModel } from '../input'
+import IconCheckmarkCircleSolid20 from '@privyid/persona-icon/vue/checkmark-circle-solid/20.vue'
+import IconCheckmarkCircleSolid24 from '@privyid/persona-icon/vue/checkmark-circle-solid/24.vue'
+import IconAddPlus24 from '@privyid/persona-icon/vue/add-plus/24.vue'
+import IconClear from '@privyid/persona-icon/vue/close-circle-solid/20.vue'
+import type { StyleVariant } from '.'
+
+const props = defineProps({
+  modelValue: {
+    type   : String,
+    default: '',
+  },
+  variant: {
+    type   : String as PropType<StyleVariant>,
+    default: 'default',
+  },
+  clearable: {
+    type   : Boolean,
+    default: false,
+  },
+  disabled: {
+    type   : Boolean,
+    default: false,
+  },
+  error: {
+    type   : Boolean,
+    default: false,
+  },
+  containerClass: {
+    type   : [String, Object],
+    default: undefined,
+  },
+})
+
+const emit  = defineEmits(['update:modelValue', 'clear'])
+const model = useVModel(props)
+
+const classNames = computed(() => {
+  const result: string[] = ['']
+
+  if (props.clearable)
+    result.push('input-color__form--clearable')
+
+  if (props.error)
+    result.push('input-color__form--error', 'state--error')
+
+  return result
+})
+
+const inputClass = computed(() => {
+  const result: string[] = ['']
+
+  if (props.variant)
+    result.push(`input-color--${props.variant}`)
+
+  if (props.disabled)
+    result.push('input-color--disabled')
+
+  if (model.value)
+    result.push('input-color--selected')
+
+  if (props.error)
+    result.push('input-color--error')
+
+  return result
+})
+
+function clear () {
+  emit('clear')
+  model.value = ''
+}
+</script>
+<style lang="postcss">
+.input-color {
+  /**
+  * define color-bg variable
+  * for change
+  */
+  --p-input-color-bg: theme(backgroundColor.base.DEFAULT);
+
+  @apply flex items-center space-x-3 relative;
+
+  /**
+  * default variant's
+  * size and shape
+  */
+  &--default {
+    .input-color__body {
+      @apply w-14 h-14 rounded;
+    }
+  }
+
+  /**
+  * set sizing of
+  * circle variant
+  */
+  &--circle {
+    .input-color__body {
+      @apply rounded-full w-10 h-10;
+    }
+  }
+
+  /**
+  * make icon in white
+  * when color is selected
+  */
+  &:where(&--selected) {
+    .input-color__icon {
+      @apply text-state-emphasis;
+      @apply dark:text-dark-state-emphasis;
+    }
+  }
+
+  /**
+  * selected state
+  */
+  &--selected {
+    /**
+    * coloring body of
+    * input-color via
+    * color-bg variable
+    * */
+    .input-color__body {
+      @apply border-[color:var(--p-input-color-bg)] bg-[color:var(--p-input-color-bg)];
+      @apply dark:border-[color:var(--p-input-color-bg)] dark:bg-[color:var(--p-input-color-bg)];
+    }
+
+    /**
+    * make circle has
+    * an outline when
+    * selected
+    */
+    &.input-color--circle {
+      .input-color__body {
+        @apply outline outline-4 outline-default;
+        @apply dark:outline-dark-default;
+      }
+    }
+  }
+
+  /**
+  * default style of
+  * body of input-color
+  */
+  &__body {
+    @apply relative border-2 border-dashed border-default bg-base text-subtle;
+    @apply dark:bg-dark-base dark:border-dark-default dark:text-dark-subtle;
+  }
+
+  /**
+  * wrapper of checked
+  * and add icon
+  */
+  &__face {
+    @apply h-full w-full flex justify-center items-center;
+  }
+
+  /**
+  * hide input-color
+  * form visually
+  */
+  &__form {
+    @apply w-full h-full absolute left-0 top-0 opacity-0;
+
+    /**
+    * cursor pointer
+    * when form is not
+    * disabled
+    */
+    &:not(&:disabled, &[disabled="true"], &--disabled) {
+      @apply hover:cursor-pointer;
+    }
+  }
+
+  /**
+  * clear button
+  */
+  &__clear {
+    @apply z-[10] text-default/30 cursor-pointer hover:text-danger absolute -right-2.5 -top-2.5;
+    @apply dark:text-base-black/30 dark:hover:text-dark-danger;
+  }
+
+  /**
+  * make input-color
+  * looks vague when
+  * disabled
+  */
+  &--disabled {
+    .input-color__body {
+      @apply opacity-50;
+    }
+  }
+
+  /**
+  * adding red border
+  * when input error
+  */
+  &--error {
+    .input-color__body {
+      @apply ring-1 ring-danger-emphasis ring-offset-2;
+      @apply dark:ring-dark-danger-emphasis;
+    }
+  }
+
+  /**
+  * make icon subtle
+  * by default */
+  &__icon {
+    @apply text-subtle;
+    @apply dark:text-dark-subtle;
+  }
+}
+</style>

package/dist/components/input-file/InputFile.vue.d.ts

@@ -113,20 +113,20 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
     size: SizeVariant;
-    modelValue: string | string[] | File | File[];
-    disabled: boolean;
-    readonly: boolean;
     placeholder: string;
     clearable: boolean;
     accept: string;
+    modelValue: string | string[] | File | File[];
     modelModifiers: ModelModifier;
+    disabled: boolean;
+    readonly: boolean;
     multiple: boolean | MultipleType;
     maxlength: string | number;
     clearOnCancel: boolean;

package/dist/components/input-pin/InputPin.vue.d.ts

@@ -69,15 +69,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
     length: string | number;
     size: SizeVariant;
+    accept: AcceptVariant;
     modelValue: string;
     disabled: boolean;
     readonly: boolean;
-    accept: AcceptVariant;
 }, {}>;
 export default _default;

package/dist/components/input-range/InputRange.vue.d.ts

@@ -89,17 +89,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:start"?: ((...args: any[]) => any) | undefined;
     "onUpdate:end"?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
+    modelValue: number | [number, number];
     start: number;
     end: number;
     min: string | number;
     max: string | number;
-    modelValue: number | [number, number];
     disabled: boolean;
     readonly: boolean;
     step: string | number;

package/dist/components/list-group/ListGroup.vue.d.ts

@@ -35,8 +35,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    horizontal: boolean;
     flush: boolean;
+    horizontal: boolean;
     rounded: boolean;
     borderless: boolean;
 }, {}>;