@privyid/persona 0.9.0 → 0.11.0

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

@@ -26,8 +26,10 @@
         </p-input-group-addon>
         <p-input
           readonly
+          :clearable="clearable"
           :model-value="getFileNames(rawModel)"
-          :placeholder="placeholder" />
+          :placeholder="placeholder"
+          @clear.stop.prevent="clear" />
       </p-input-group>
     </template>
   </p-dropzone>
@@ -44,6 +46,7 @@ import pInput from "../input/Input.vue";
 import pInputGroup from "../input-group/InputGroup.vue";
 import pInputGroupAddon from "../input-group/InputGroupAddon.vue";
 import pButton from "../button/Button.vue";
+import { templateRef } from "@vueuse/core";
 export default defineComponent({
   components: {
     pDropzone,
@@ -77,6 +80,10 @@ export default defineComponent({
       type: String,
       default: ""
     },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
     clearOnCancel: {
       type: Boolean,
       default: false
@@ -106,8 +113,15 @@ export default defineComponent({
       default: "md"
     }
   },
-  setup(props) {
+  emits: [
+    "update:modelValue",
+    "clear",
+    "change",
+    "cancel"
+  ],
+  setup(props, { emit }) {
     const model = useVModel(props);
+    const dropzone = templateRef("dropzone");
     const classNames = computed(() => {
       const result = [];
       if (props.readonly)
@@ -121,10 +135,17 @@ export default defineComponent({
     function getFileNames(files) {
       return Array.isArray(files) ? files.map((file) => file.name).join(", ") : files?.name ?? "";
     }
+    function clear() {
+      const event = new Event("clear");
+      emit("clear", event);
+      if (!props.disabled && !props.readonly && !event.defaultPrevented)
+        dropzone.value.clear();
+    }
     return {
       model,
       classNames,
-      getFileNames
+      getFileNames,
+      clear
     };
   }
 });
@@ -133,18 +154,31 @@ export default defineComponent({
 <style lang="postcss">
 .input-file {
   > .input-group > .input-group__addon {
-    @apply p-1;
+    @apply py-1 pl-1 pr-2;
 
     > .btn {
-      @apply py-0 px-3 h-full items-center;
+      @apply py-0 px-3 h-full items-center mr-4;
     }
   }
 
+  .input__clear {
+    @apply pointer-events-auto;
+  }
+
   &--disabled,
   &:disabled {
     .input-group__addon,
     .input-group .input__form {
-      @apply bg-muted border-muted text-muted;
+      @apply bg-subtle text-muted;
+      @apply dark:bg-dark-subtle dark:text-dark-muted;
+    }
+
+    .input-group__addon {
+      @apply rounded-l-sm;
+
+      + .input {
+        @apply rounded-r-sm;
+      }
     }
   }
 
@@ -152,6 +186,7 @@ export default defineComponent({
     .input-group__addon,
     .input-group .input__form {
       @apply border-subtle;
+      @apply dark:border-dark-subtle;
     }
   }
 
@@ -165,6 +200,7 @@ export default defineComponent({
     .input-group__addon,
     .input-group .input__form {
       @apply border-danger-emphasis;
+      @apply dark:border-dark-danger-emphasis;
     }
   }
 }

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

@@ -4,7 +4,7 @@ import { SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<string | string[] | File | File[]>;
-        default: any;
+        default: undefined;
     };
     modelModifiers: {
         type: PropType<ModelModifier>;
@@ -16,12 +16,16 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     maxlength: {
         type: (NumberConstructor | StringConstructor)[];
-        default: any;
+        default: undefined;
     };
     accept: {
         type: StringConstructor;
         default: string;
     };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     clearOnCancel: {
         type: BooleanConstructor;
         default: boolean;
@@ -51,13 +55,14 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }, {
-    model: import("vue-demi").Ref<string | string[] | File | File[]>;
+    model: import("vue-demi").Ref<string | string[] | File | File[] | undefined>;
     classNames: import("vue-demi").ComputedRef<string[]>;
     getFileNames: (files: Array<globalThis.File> | globalThis.File) => string;
-}, unknown, {}, {}, 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<{
+    clear: () => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("cancel" | "change" | "update:modelValue" | "clear")[], "cancel" | "change" | "update:modelValue" | "clear", 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: any;
+        default: undefined;
     };
     modelModifiers: {
         type: PropType<ModelModifier>;
@@ -69,12 +74,16 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     maxlength: {
         type: (NumberConstructor | StringConstructor)[];
-        default: any;
+        default: undefined;
     };
     accept: {
         type: StringConstructor;
         default: string;
     };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     clearOnCancel: {
         type: BooleanConstructor;
         default: boolean;
@@ -103,18 +112,24 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<SizeVariant>;
         default: string;
     };
-}>>, {
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onClear?: ((...args: any[]) => any) | undefined;
+}, {
     error: boolean;
     size: SizeVariant;
-    disabled: boolean;
     modelValue: string | string[] | File | File[];
+    disabled: boolean;
     readonly: boolean;
     modelModifiers: ModelModifier;
     multiple: boolean | MultipleType;
     placeholder: string;
-    accept: string;
     maxlength: string | number;
+    accept: string;
     clearOnCancel: boolean;
+    clearable: boolean;
     browseLabel: string;
 }>;
 export default _default;

package/dist/components/input-group/InputGroup.vue

@@ -10,8 +10,11 @@
 <script>
 import {
   computed,
-  defineComponent
+  defineComponent,
+  provide,
+  toRef
 } from "vue-demi";
+import { INPUTGROUP_SETTING } from ".";
 export default defineComponent({
   props: {
     size: {
@@ -32,6 +35,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    provide(INPUTGROUP_SETTING, { size: toRef(props, "size") });
     const classNames = computed(() => {
       const result = [];
       if (props.size)
@@ -55,9 +59,11 @@ export default defineComponent({
 
   &:has(:first-child:is(.input-group__addon):nth-last-child(2)) {
     @apply rounded bg-default focus-within:ring-4 focus-within:ring-subtle/10 border border-solid border-muted hover:border-subtle focus-within:border-subtle;
+    @apply dark:bg-dark-default focus-within:dark:ring-dark-subtle/10 dark:border-dark-muted hover:dark:border-dark-subtle focus-within:dark:border-dark-subtle;
 
     .input {
       @apply bg-transparent;
+      @apply dark:bg-transparent;
     }
 
     .input > .input__form,
@@ -68,21 +74,34 @@ export default defineComponent({
     .input > .input__form {
       @apply focus:ring-0;
     }
+
+    &.input-group--disabled {
+      @apply border-subtle;
+      @apply dark:border-dark-subtle;
+    }
+
+    &.state--error,
+    &.input-group--error {
+      @apply border-danger-emphasis hover:border-danger-emphasis focus-within:ring-danger focus-within:border-danger-emphasis;
+      @apply dark:border-dark-danger-emphasis hover:dark:border-dark-danger-emphasis focus-within:dark:ring-dark-danger focus-within:dark:border-dark-danger-emphasis;
+    }
   }
 
   & > .input-group__addon:not(:first-child),
   & > .input:not(:first-child) > .input__form,
   & > .select:not(:first-child) > .input > .input__form {
     @apply rounded-l-none border-l-transparent;
+    @apply dark:border-l-transparent;
   }
 
   & > .input-group__addon:not(:last-child),
   & > .input:not(:last-child) > .input__form {
     @apply rounded-r-none border-r-transparent;
+    @apply dark:border-r-transparent;
   }
 
   & > .select:not(:last-child) > .input > .input__form {
-    @apply rounded-r-none;
+    @apply rounded-r-none z-1;
   }
 
   & > .input-group__addon,
@@ -96,16 +115,27 @@ export default defineComponent({
 
   .input,
   .select > .input {
+    @apply rounded-none;
+
+    &:first-child {
+      @apply rounded-l;
+    }
+
+    &:last-child {
+      @apply rounded-r;
+    }
+
     > .input__form {
       &:hover,
       &:focus {
         @apply z-[2] border-l-subtle border-r-subtle;
+        @apply dark:border-l-dark-subtle dark:border-r-dark-subtle;
       }
     }
   }
 
   & > .btn {
-    @apply z-[1];
+    @apply z-1;
 
     &:not(:first-child) {
       @apply rounded-l-none -ml-[1px];
@@ -116,53 +146,37 @@ export default defineComponent({
     }
   }
 
-  &:is(&--xs, &--sm, &--md, &--lg) > &__addon {
-    @apply flex-shrink-0;
+  &&--disabled {
+    @apply border-subtle border-solid border rounded;
+    @apply dark:border-dark-subtle;
 
-    + .input {
-      > .input__form {
-        @apply pl-0;
-      }
+    > .input > .input__form,
+    > .input-group__addon,
+    > .btn.btn--variant-input {
+      @apply border-transparent;
+      @apply dark:border-transparent;
     }
-  }
 
-  &&--xs {
-    .input > .input__form {
-      @apply text-xs px-3 py-2;
+    > .input:first-child .input__form,
+    > .input-group__addon:first-child,
+    > .btn:first-child {
+      @apply rounded-l-sm;
     }
 
-    .btn {
-      @apply px-2 py-1 gap-1 text-sm;
+    > .input:last-child .input__form,
+    > .input-group__addon:last-child,
+    > .btn:last-child {
+      @apply rounded-r-sm;
     }
   }
 
-  &&--sm {
-    .input > .input__form {
-      @apply px-3 py-2;
-    }
-
-    .btn {
-      @apply px-4 py-2 gap-2 text-base;
-    }
-  }
-
-  &&--md {
-    .input > .input__form {
-      @apply px-3 py-3;
-    }
-
-    .btn {
-      @apply px-5 py-3 gap-3 text-base;
-    }
-  }
-
-  &&--lg {
-    .input > .input__form {
-      @apply px-3 py-4;
-    }
+  &:is(&--xs, &--sm, &--md, &--lg) > &__addon {
+    @apply flex-shrink-0;
 
-    .btn {
-      @apply px-8 py-4 gap-4 text-base;
+    + .input {
+      > .input__form {
+        @apply pl-0;
+      }
     }
   }
 }

package/dist/components/input-group/InputGroupAddon.vue

@@ -7,36 +7,35 @@
 <style lang="postcss">
 .input-group {
   &__addon {
-    @apply flex items-center text-muted rounded border border-solid border-muted outline-none bg-default;
+    @apply flex px-3 items-center rounded border border-solid border-muted outline-none text-muted bg-default;
+    @apply dark:border-dark-muted dark:text-dark-muted dark:bg-dark-default;
 
     .input-group--xs > & {
-      @apply text-xs px-3 py-2;
+      @apply text-sm py-[2px];
     }
 
     .input-group--sm > & {
-      @apply px-3 py-2;
+      @apply py-1;
     }
 
     .input-group--md > & {
-      @apply px-3 py-3;
+      @apply py-[10px];
     }
 
     .input-group--lg > & {
-      @apply px-3 py-4;
+      @apply py-4;
     }
 
     .state--error &,
     .input-group--error & {
-      @apply border-danger-emphasis;
-
-      &:focus {
-        @apply ring-danger border-danger-emphasis;
-      }
+      @apply border-danger-emphasis focus:ring-danger focus:border-danger-emphasis;
+      @apply dark:border-dark-danger-emphasis focus:dark:ring-dark-danger focus:dark:border-dark-danger-emphasis;
     }
 
     .state--disabled &,
     .input-group--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;
     }
   }
 }

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

@@ -0,0 +1,6 @@
+import { InjectionKey, Ref } from 'vue-demi';
+import { SizeVariant } from '../button';
+export interface InputGroupSetting {
+    size?: Ref<SizeVariant>;
+}
+export declare const INPUTGROUP_SETTING: InjectionKey<InputGroupSetting>;

package/dist/components/input-group/index.mjs

@@ -0,0 +1 @@
+export const INPUTGROUP_SETTING = Symbol("InputGroupSetting");

package/dist/components/input-password/InputPassword.vue

@@ -44,10 +44,12 @@ export default defineComponent({
   @apply pr-9;
 
   &__toggle {
-    @apply absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer z-1;
+    @apply absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer z-1 text-default/30 hover:text-subtle;
+    @apply dark:text-dark-default/30 hover:dark:text-dark-subtle;
 
     .input--disabled ~ & {
       @apply pointer-events-none text-muted;
+      @apply dark:text-dark-muted;
     }
   }
 

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

@@ -70,7 +70,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const root = templateRef("root");
     const num = useToNumber(toRef(props, "length"));
-    const localModel = ref([...props.modelValue].slice(0, num.value).map((val) => val.trim()));
+    const localModel = ref([...props.modelValue.padEnd(num.value)].slice(0, num.value));
     const classNames = computed(() => {
       const result = [];
       if (props.disabled)
@@ -84,7 +84,7 @@ export default defineComponent({
     const { next: nextFocus, prev: prevFocus } = useFocus(root, false);
     const model = computed({
       get() {
-        return [...props.modelValue].slice(0, num.value);
+        return [...props.modelValue.padEnd(num.value)].slice(0, num.value);
       },
       set(value) {
         const text = value.map((val) => val || " ").join("").trimEnd();
@@ -110,7 +110,7 @@ export default defineComponent({
       event.target.select();
     }
     function onDelete(event) {
-      if (root.value && !event.target.value)
+      if (root.value && !event.target.value.trim())
         prevFocus();
     }
     function onPaste(event) {

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

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

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

@@ -233,14 +233,16 @@ export default defineComponent({
   @apply py-2 w-full;
 
   &__tracks {
-    @apply relative flex w-full bg-subtle cursor-pointer overflow-visible rounded;
+    @apply relative flex w-full bg-base cursor-pointer overflow-visible rounded;
+    @apply dark:bg-dark-base;
   }
 
   &__track {
     @apply h-2 rounded;
 
     &-active {
-      @apply bg-accent-emphasis relative text-center;
+      @apply bg-info-emphasis relative text-center;
+      @apply dark:bg-dark-info-emphasis;
     }
 
     &-upper {
@@ -249,12 +251,13 @@ export default defineComponent({
   }
 
   &__thumb {
-    @apply w-4 h-4 rounded-full bg-default shadow-sm absolute top-1/2 bottom-0 -translate-y-1/2 border border-gray-25;
-    @apply touch-none select-none;
+    @apply w-4 h-4 rounded-full bg-default shadow-sm absolute top-1/2 bottom-0 -translate-y-1/2 border border-muted touch-none select-none;
+    @apply dark:bg-dark-layer-2 dark:border-dark-subtle;
 
     &:hover,
     &:active {
-      @apply ring ring-accent border-accent-emphasis;
+      @apply ring ring-info border-info-emphasis;
+      @apply dark:ring-dark-info dark:border-dark-info-emphasis;
     }
 
     &-start {

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

@@ -2,15 +2,15 @@ import { PropType, StyleValue } from 'vue-demi';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<number | [number, number]>;
-        default: any;
+        default: undefined;
     };
     start: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     end: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     step: {
         type: (NumberConstructor | StringConstructor)[];
@@ -50,15 +50,15 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:end" | "update:start")[], "change" | "update:modelValue" | "update:end" | "update:start", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: PropType<number | [number, number]>;
-        default: any;
+        default: undefined;
     };
     start: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     end: {
         type: NumberConstructor;
-        default: any;
+        default: undefined;
     };
     step: {
         type: (NumberConstructor | StringConstructor)[];
@@ -89,18 +89,18 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-    "onUpdate:end"?: (...args: any[]) => any;
-    "onUpdate:start"?: (...args: any[]) => any;
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:end"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:start"?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
-    disabled: boolean;
     min: string | number;
     max: string | number;
     start: number;
     end: number;
     modelValue: number | [number, number];
+    disabled: boolean;
     readonly: boolean;
     multiple: boolean;
     step: string | number;

package/dist/components/input-range/utils/use-drag.mjs

@@ -11,7 +11,11 @@ export default function useDrag(target, handler) {
       instance.value.unset();
     if (element) {
       const { default: Interact } = await import("interactjs");
-      const onmove = throttle(handler, 1e3 / 120);
+      const onmove = throttle(
+        handler,
+        1e3 / 120
+        /* limit 120fps */
+      );
       instance.value = Interact(element).styleCursor(false).draggable({ onmove });
     }
   });