@privyid/persona 0.17.1 → 0.19.0

package/dist/components/input/utils/accept.d.ts

@@ -0,0 +1,26 @@
+import { LiteralUnion } from 'type-fest';
+export declare const AcceptPresets: {
+    readonly num: string;
+    readonly numeric: string;
+    readonly digit: string;
+    readonly alpha: string;
+    readonly 'alpha-num': string;
+    readonly 'alpha-num-space': string;
+    readonly 'alpha-num-space-symbol': string;
+    readonly 'alpha-numeric': string;
+    readonly 'alpha-numeric-space': string;
+    readonly 'alpha-numeric-space-symbol': string;
+    readonly 'alpha-space': string;
+    readonly 'alpha-space-symbol': string;
+    readonly 'num-space': string;
+    readonly 'num-space-symbol': string;
+    readonly 'numeric-space': string;
+    readonly 'numeric-space-symbol': string;
+    readonly 'non-numeric': string;
+    readonly 'non-alpha': string;
+    readonly text: string;
+};
+export type AcceptVariant = LiteralUnion<keyof typeof AcceptPresets, string>;
+export declare function isAccepted(accept: AcceptVariant | undefined, text: string): boolean;
+export declare function removeUnaccepted(accept: AcceptVariant | undefined, text: string): string;
+export declare function checkOnInput(accept: AcceptVariant | undefined, event: Event): void;

package/dist/components/input/utils/accept.mjs

@@ -0,0 +1,81 @@
+const ALPHA = "A-Za-z";
+const NUMERIC = "\\d";
+const SPACE = "\\s";
+const SYMBOL = "!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
+const REGEX_ALPHA = `${ALPHA}`;
+const REGEX_NUMERIC = `${NUMERIC}`;
+const REGEX_ALPHA_NUMERIC = `${ALPHA}${NUMERIC}`;
+const REGEX_ALPHA_NUMERIC_SPACE = `${ALPHA}${NUMERIC}${SPACE}`;
+const REGEX_ALPHA_NUMERIC_SPACE_SYMBOL = `${ALPHA}${NUMERIC}${SPACE}${SYMBOL}`;
+const REGEX_ALPHA_SPACE = `${ALPHA}${SPACE}`;
+const REGEX_ALPHA_SPACE_SYMBOL = `${ALPHA}${SPACE}${SYMBOL}`;
+const REGEX_NUMERIC_SPACE = `${NUMERIC}${SPACE}`;
+const REGEX_NUMERIC_SPACE_SYMBOL = `${NUMERIC}${SPACE}${SYMBOL}`;
+export const AcceptPresets = {
+  "num": REGEX_NUMERIC,
+  "numeric": REGEX_NUMERIC,
+  "digit": REGEX_NUMERIC,
+  "alpha": REGEX_ALPHA,
+  "alpha-num": REGEX_ALPHA_NUMERIC,
+  "alpha-num-space": REGEX_ALPHA_NUMERIC_SPACE,
+  "alpha-num-space-symbol": REGEX_ALPHA_NUMERIC_SPACE_SYMBOL,
+  "alpha-numeric": REGEX_ALPHA_NUMERIC,
+  "alpha-numeric-space": REGEX_ALPHA_NUMERIC_SPACE,
+  "alpha-numeric-space-symbol": REGEX_ALPHA_NUMERIC_SPACE_SYMBOL,
+  "alpha-space": REGEX_ALPHA_SPACE,
+  "alpha-space-symbol": REGEX_ALPHA_SPACE_SYMBOL,
+  "num-space": REGEX_NUMERIC_SPACE,
+  "num-space-symbol": REGEX_NUMERIC_SPACE_SYMBOL,
+  "numeric-space": REGEX_NUMERIC_SPACE,
+  "numeric-space-symbol": REGEX_NUMERIC_SPACE_SYMBOL,
+  "non-numeric": REGEX_ALPHA_SPACE_SYMBOL,
+  "non-alpha": REGEX_NUMERIC_SPACE_SYMBOL,
+  "text": REGEX_ALPHA_NUMERIC_SPACE_SYMBOL
+};
+export function isAccepted(accept, text) {
+  if (!accept)
+    return true;
+  try {
+    const regexStr = AcceptPresets[accept.toLowerCase()] ?? accept;
+    const regex = new RegExp(`^[${regexStr}]+$`);
+    return regex.test(text);
+  } catch (error) {
+    if (import.meta.env.DEV)
+      console.error(error);
+    return true;
+  }
+}
+export function removeUnaccepted(accept, text) {
+  if (!accept)
+    return text;
+  try {
+    const regexStr = AcceptPresets[accept.toLowerCase()] ?? accept;
+    const regex = new RegExp(`[^${regexStr}]+`, "g");
+    return text.replaceAll(regex, "");
+  } catch (error) {
+    if (import.meta.env.DEV)
+      console.error(error);
+    return text;
+  }
+}
+export function checkOnInput(accept, event) {
+  if (event.data && !isAccepted(accept, event.data)) {
+    event.preventDefault();
+    if (event.inputType === "insertFromPaste") {
+      const target = event.target;
+      const oldValue = target.value;
+      const value = removeUnaccepted(accept, event.data);
+      const ss = target.selectionStart;
+      const se = target.selectionEnd;
+      const nextValue = `${oldValue.slice(0, ss)}${value}${oldValue.slice(se)}`;
+      try {
+        target.value = nextValue;
+        target.dispatchEvent(new InputEvent("input"));
+        target.setSelectionRange(value.length + ss, value.length + ss);
+      } catch (error) {
+        if (import.meta.env.DEV)
+          console.error(error);
+      }
+    }
+  }
+}

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

@@ -15,7 +15,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     maxlength: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: undefined;
     };
     accept: {
@@ -73,7 +73,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     maxlength: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: undefined;
     };
     accept: {

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

@@ -19,7 +19,10 @@
 import pInput from "../input/Input.vue";
 import IconShow from "@privyid/persona-icon/vue/view/20.vue";
 import IconHide from "@privyid/persona-icon/vue/view-off/20.vue";
-import { defineComponent, ref } from "vue-demi";
+import {
+  ref,
+  defineComponent
+} from "vue-demi";
 export default defineComponent({
   components: {
     pInput,

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

@@ -1,5 +1,9 @@
-declare const _default: import("vue-demi").DefineComponent<{}, {
-    isShow: import("vue-demi").Ref<boolean>;
+import { Ref } from 'vue-demi';
+type Bindings = {
+    isShow: Ref<boolean>;
     toggle: () => void;
-}, {}, {}, {}, 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<{}>>, {}, {}>;
+};
+declare const _default: import("vue-demi").DefineComponent<any, Bindings, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<any>, {} | {
+    [x: string]: any;
+}, {}>;
 export default _default;

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

@@ -10,16 +10,15 @@
       maxlength="1"
       v-bind="$attrs"
       :model-value="getValue(i - 1)"
+      :size="size"
       :clearable="false"
       :readonly="readonly"
       :disabled="disabled"
       :error="error"
-      @input="setValue(i - 1, $event)"
-      @focus.passive="onFocus"
-      @keyup.delete.stop.prevent="onDelete"
+      @keydown="onKeyDown($event)"
+      @beforeinput.prevent="setValue(i - 1, $event)"
       @keyup.left.stop.prevent="prevFocus"
-      @keyup.right.stop.prevent="nextFocus"
-      @paste.passive="onPaste" />
+      @keyup.right.stop.prevent="nextFocus" />
   </div>
 </template>
 
@@ -37,6 +36,11 @@ import {
   useToNumber
 } from "@vueuse/core";
 import { useFocus } from "../dropdown/utils/use-focus";
+import {
+  isAccepted,
+  removeUnaccepted
+} from "../input";
+import { toArray } from ".";
 export default defineComponent({
   components: { pInput },
   inheritAttrs: false,
@@ -45,6 +49,10 @@ export default defineComponent({
       type: String,
       default: void 0
     },
+    size: {
+      type: String,
+      default: "md"
+    },
     length: {
       type: [Number, String],
       default: 5
@@ -60,17 +68,21 @@ export default defineComponent({
     error: {
       type: Boolean,
       default: false
+    },
+    accept: {
+      type: String,
+      default: void 0
     }
   },
   models: {
     prop: "modelValue",
     event: "update:modelValue"
   },
-  emits: ["update:modelValue", "clear"],
+  emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
     const root = templateRef("root");
     const num = useToNumber(toRef(props, "length"));
-    const localModel = ref([...props.modelValue?.padEnd(num.value) ?? ""].slice(0, num.value));
+    const localModel = ref(toArray(props.modelValue, num.value));
     const classNames = computed(() => {
       const result = [];
       if (props.disabled)
@@ -84,37 +96,42 @@ export default defineComponent({
     const { next: nextFocus, prev: prevFocus } = useFocus(root, false);
     const model = computed({
       get() {
-        return [...props.modelValue?.padEnd(num.value) ?? ""].slice(0, num.value);
+        return toArray(props.modelValue, num.value);
       },
       set(value) {
         const text = value.map((val) => val || " ").join("").trimEnd();
+        emit("change", text);
         emit("update:modelValue", text);
       }
     });
-    syncRef(localModel, model, { deep: true });
+    syncRef(localModel, model, { deep: true, immediate: false });
     function getValue(index) {
       return localModel.value.at(index);
     }
     function setValue(index, event) {
-      const target = event.target;
-      const value = target.value;
-      localModel.value[index] = value;
-      if (root.value) {
-        if (value)
-          nextFocus();
-        else
-          prevFocus();
+      if (event.inputType === "insertFromPaste")
+        localModel.value = toArray(removeUnaccepted(props.accept, event.data), num.value);
+      else if (!event.data || isAccepted(props.accept, event.data)) {
+        localModel.value[index] = event.data;
+        if (root.value) {
+          if (event.inputType === "deleteContentBackward")
+            prevFocus();
+          if (event.inputType === "insertText")
+            nextFocus();
+        }
       }
     }
-    function onFocus(event) {
-      event.target.select();
-    }
-    function onDelete(event) {
-      if (root.value && !event.target.value.trim())
-        prevFocus();
-    }
-    function onPaste(event) {
-      localModel.value = [...event.clipboardData.getData("Text")].slice(0, num.value);
+    function onKeyDown(event) {
+      const target = event.target;
+      if (props.readonly || props.disabled)
+        return;
+      if (target.value && [...event.key].length === 1 && !event.ctrlKey && !event.metaKey) {
+        event.preventDefault();
+        target.dispatchEvent(new InputEvent("beforeinput", { inputType: "insertText", data: event.key }));
+      } else if (event.key === "Backspace") {
+        event.preventDefault();
+        target.dispatchEvent(new InputEvent("beforeinput", { inputType: "deleteContentBackward" }));
+      }
     }
     return {
       classNames,
@@ -122,11 +139,9 @@ export default defineComponent({
       localModel,
       getValue,
       setValue,
-      onFocus,
-      onDelete,
-      onPaste,
       nextFocus,
-      prevFocus
+      prevFocus,
+      onKeyDown
     };
   }
 });

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

@@ -1,10 +1,17 @@
+import { PropType } from 'vue-demi';
+import { AcceptVariant } from '../input';
+import { SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: StringConstructor;
         default: undefined;
     };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
     length: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     disabled: {
@@ -19,24 +26,30 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    accept: {
+        type: PropType<AcceptVariant>;
+        default: undefined;
+    };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
     num: import("vue-demi").ComputedRef<number>;
     localModel: import("vue-demi").Ref<string[]>;
     getValue: (index: number) => string;
     setValue: (index: number, event: InputEvent) => void;
-    onFocus: (event: InputEvent) => void;
-    onDelete: (event: InputEvent) => void;
-    onPaste: (event: ClipboardEvent) => void;
     nextFocus: () => void;
     prevFocus: () => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "clear")[], "update:modelValue" | "clear", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    onKeyDown: (event: KeyboardEvent) => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
         default: undefined;
     };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
     length: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     disabled: {
@@ -51,14 +64,20 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    accept: {
+        type: PropType<AcceptVariant>;
+        default: undefined;
+    };
 }>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onClear?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
     length: string | number;
+    size: SizeVariant;
     modelValue: string;
     disabled: boolean;
     readonly: boolean;
+    accept: AcceptVariant;
 }, {}>;
 export default _default;

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

@@ -0,0 +1,6 @@
+/**
+ * Split string to array
+ * @param text
+ * @param length
+ */
+export declare function toArray(text: string | undefined, length: number): string[];

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

@@ -0,0 +1,3 @@
+export function toArray(text, length) {
+  return [...(text ?? "").padEnd(length)].slice(0, length);
+}

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

@@ -12,14 +12,14 @@
         data-testid="track-lower"
         class="input-range__track input-range__track-lower"
         :style="lowerStyle"
-        @click="onClickLowerTrack" />
+        @click.capture="onClickLowerTrack" />
       <!-- Active Track -->
       <div
         ref="track-active"
         data-testid="track-active"
         class="input-range__track input-range__track-active"
         :style="upperStyle"
-        @click="onClickActiveTrack">
+        @click.capture="onClickActiveTrack">
         <div
           v-show="multiple"
           ref="thumb-start"
@@ -34,7 +34,7 @@
       <div
         data-testid="track-upper"
         class="input-range__track input-range__track-upper"
-        @click="onClickUpperTrack" />
+        @click.capture="onClickUpperTrack" />
     </div>
   </div>
 </template>
@@ -203,8 +203,8 @@ export default defineComponent({
       if (!props.disabled && !props.readonly)
         end.value = getValue(event);
     });
-    syncRef(start, vStart);
-    syncRef(end, vEnd);
+    syncRef(start, vStart, { immediate: false });
+    syncRef(end, vEnd, { immediate: false });
     watch([start, end], ([startVal, endVal]) => {
       localStart.value = startVal;
       localEnd.value = endVal;

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

@@ -13,15 +13,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
     step: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     min: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     max: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     multiple: {
@@ -61,15 +61,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: undefined;
     };
     step: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     min: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     max: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
     multiple: {

package/dist/components/label/Label.vue

@@ -25,7 +25,7 @@ import {
   ref
 } from "vue-demi";
 import Dot from "../dot/Dot.vue";
-import IconClose from "@carbon/icons-vue/lib/close/16";
+import IconClose from "@privyid/persona-icon/vue/close/16.vue";
 export default defineComponent({
   components: { Dot, IconClose },
   props: {

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

@@ -17,6 +17,14 @@ export default defineComponent({
     horizontal: {
       type: Boolean,
       default: false
+    },
+    borderless: {
+      type: Boolean,
+      default: false
+    },
+    rounded: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
@@ -26,6 +34,10 @@ export default defineComponent({
         result.push("list-group--flush");
       if (props.horizontal)
         result.push("list-group--horizontal");
+      if (props.borderless)
+        result.push("list-group--borderless");
+      if (props.rounded)
+        result.push("list-group--rounded");
       return result;
     });
     return { classNames };
@@ -47,5 +59,18 @@ export default defineComponent({
   &--horizontal {
     @apply flex-row divide-x divide-y-0;
   }
+
+  &--borderless {
+    @apply border-0 divide-y-0;
+  }
+
+  &--rounded {
+    @apply divide-y-0;
+
+    > :not([hidden]) ~ :not([hidden]),
+    > :first-child {
+      @apply rounded-md;
+    }
+  }
 }
 </style>

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

@@ -7,6 +7,14 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    borderless: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     classNames: import("vue-demi").ComputedRef<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<{
@@ -18,8 +26,18 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    borderless: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     horizontal: boolean;
     flush: boolean;
+    rounded: boolean;
+    borderless: boolean;
 }, {}>;
 export default _default;

package/dist/components/modal/Modal.vue

@@ -68,7 +68,7 @@ import {
 } from "vue-demi";
 import { onKeyStroke } from "@vueuse/core";
 import Heading from "../heading/Heading.vue";
-import IconClose from "@carbon/icons-vue/lib/close/16";
+import IconClose from "@privyid/persona-icon/vue/close/16.vue";
 import { useVModel } from "../input";
 export default defineComponent({
   components: { Heading, IconClose },
@@ -178,6 +178,9 @@ export default defineComponent({
   --p-modal-size-sm: 400px;
   --p-modal-z-index: theme(zIndex.modal);
   --p-modal-dismiss-z-index: calc(var(--p-modal-z-index) + 1);
+  --p-modal-body-scrollable-max-height: theme(spacing.64);
+  --p-modal-body-scrollable-min-height: 0;
+  --p-modal-content-margin-y: theme(spacing.8);
 
   /**
   * Set modal backdrop
@@ -238,7 +241,7 @@ export default defineComponent({
 
   &__body {
     &&--scroll {
-      @apply max-h-64 overflow-y-auto overscroll-contain;
+      @apply max-h-[var(--p-modal-body-scrollable-max-height)] min-h-[var(--p-modal-body-scrollable-min-height)] overflow-y-auto overscroll-contain;
     }
 
     + .modal__footer {

package/dist/components/modal/Modal.vue.d.ts

@@ -92,11 +92,11 @@ declare const _default: import("vue-demi").DefineComponent<{
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
     size: SizeVariant;
+    dismissable: boolean;
+    banner: boolean;
     text: string;
     modelValue: boolean;
     title: string;
-    dismissable: boolean;
-    banner: boolean;
     centered: boolean;
     noCloseOnEsc: boolean;
     noCloseOnBackdrop: boolean;