@privyid/persona 1.2.1 → 1.2.2-dev.2

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

@@ -0,0 +1,177 @@
+<template>
+  <div
+    class="input-group"
+    data-testid="input-group"
+    :class="classNames">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import {
+  computed,
+  provide,
+  toRef
+} from "vue";
+import { INPUTGROUP_SETTING } from ".";
+const props = defineProps({
+  size: {
+    type: String,
+    default: "md"
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: Boolean,
+    default: false
+  }
+});
+const classNames = computed(() => {
+  const result = [];
+  if (props.size)
+    result.push(`input-group--${props.size}`);
+  if (props.disabled)
+    result.push("input-group--disabled", "state--disabled");
+  if (props.readonly)
+    result.push("input-group--readonly");
+  if (props.error)
+    result.push("input-group--error", "state--error");
+  return result;
+});
+provide(INPUTGROUP_SETTING, { size: toRef(props, "size") });
+</script>
+
+<style lang="postcss">
+.input-group {
+  @apply flex w-full;
+
+  &: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-subtlest hover:border-subtle focus-within:border-subtle;
+    @apply dark:bg-dark-default focus-within:dark:ring-dark-subtle/10 dark:border-dark-subtlest hover:dark:border-dark-subtle focus-within:dark:border-dark-subtle;
+
+    .input {
+      @apply bg-transparent;
+      @apply dark:bg-transparent;
+    }
+
+    .input > .input__form,
+    .input-group__addon {
+      @apply border-0;
+    }
+
+    .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 z-1;
+  }
+
+  & > .input-group__addon,
+  & > .input,
+  & > .select,
+  & > .divider {
+    &:not(:first-child) {
+      @apply -ml-[1px];
+    }
+  }
+
+  .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;
+
+    &:not(:first-child) {
+      @apply rounded-l-none -ml-[1px];
+    }
+
+    &:not(:last-child) {
+      @apply rounded-r-none;
+    }
+  }
+
+  &&--disabled {
+    @apply border-subtle border-solid border rounded;
+    @apply dark:border-dark-subtle;
+
+    > .input > .input__form,
+    > .input-group__addon,
+    > .btn.btn--variant-input {
+      @apply border-transparent;
+      @apply dark:border-transparent;
+    }
+
+    > .input:first-child .input__form,
+    > .input-group__addon:first-child,
+    > .btn:first-child {
+      @apply rounded-l-sm;
+    }
+
+    > .input:last-child .input__form,
+    > .input-group__addon:last-child,
+    > .btn:last-child {
+      @apply rounded-r-sm;
+    }
+  }
+
+  &:is(&--xs, &--sm, &--md, &--lg) > &__addon {
+    @apply shrink-0;
+
+    + .input {
+      > .input__form {
+        @apply pl-0;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,58 @@
+import type { PropType } from 'vue';
+import type { SizeVariant } from '../button';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    size: SizeVariant;
+    disabled: boolean;
+    error: boolean;
+    readonly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,42 @@
+<template>
+  <div class="input-group__addon">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss">
+.input-group {
+  &__addon {
+    @apply flex px-3 items-center rounded border border-solid border-subtlest outline-none text-muted bg-default;
+    @apply dark:border-dark-subtlest dark:text-dark-muted dark:bg-dark-default;
+
+    .input-group--xs > & {
+      @apply text-sm py-[2px];
+    }
+
+    .input-group--sm > & {
+      @apply py-1;
+    }
+
+    .input-group--md > & {
+      @apply py-[10px];
+    }
+
+    .input-group--lg > & {
+      @apply py-4;
+    }
+
+    .state--error &,
+    .input-group--error & {
+      @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-base border-subtle pointer-events-none text-muted;
+      @apply dark:bg-dark-base dark:border-dark-subtle  dark:text-dark-muted;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,6 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { 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

@@ -0,0 +1,100 @@
+<template>
+  <p-input
+    class="input-password"
+    :model-value="modelValue"
+    :size="size"
+    :disabled="disabled"
+    :readonly="readonly"
+    :error="error"
+    :clearable="clearable"
+    :container-class="containerClass"
+    :accept="accept"
+    :type="isShow ? 'text' : 'password'"
+    @clear="$emit('clear', $event)"
+    @update:model-value="$emit('update:modelValue', $event)">
+    <template #append>
+      <IconHide
+        v-if="isShow"
+        class="input-password__toggle"
+        @click.prevent.stop="toggle" />
+      <IconShow
+        v-else
+        class="input-password__toggle"
+        @click.prevent.stop="toggle" />
+    </template>
+  </p-input>
+</template>
+
+<script setup>
+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 { ref } from "vue";
+defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: void 0
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  containerClass: {
+    type: [
+      String,
+      Array,
+      Object
+    ],
+    default: void 0
+  },
+  accept: {
+    type: String,
+    default: void 0
+  }
+});
+defineEmits(["update:modelValue", "clear"]);
+const isShow = ref(false);
+function toggle() {
+  isShow.value = !isShow.value;
+}
+</script>
+
+<style lang="postcss">
+.input-password {
+  @apply pr-9;
+
+  &__toggle {
+    @apply absolute right-[0.15rem] 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;
+    }
+  }
+
+  &.input--clearable {
+    @apply pr-16;
+
+    + .input__clear {
+      @apply right-10;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,86 @@
+import type { PropType } from 'vue';
+import type { SizeVariant } from '../button';
+import type { AcceptVariant } from '../input/utils/accept';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    containerClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    accept: {
+        type: PropType<AcceptVariant>;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: (args_0: MouseEvent) => void;
+    "update:modelValue": (args_0: string | number) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    containerClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    accept: {
+        type: PropType<AcceptVariant>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onClear?: ((args_0: MouseEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: string | number) => any) | undefined;
+}>, {
+    size: SizeVariant;
+    modelValue: string | number;
+    disabled: boolean;
+    error: boolean;
+    readonly: boolean;
+    clearable: boolean;
+    containerClass: string | unknown[] | Record<string, any>;
+    accept: AcceptVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,2 @@
+import type { MaybeRef } from '@vueuse/core';
+export declare function usePasswordStrength(input: MaybeRef<string>): import("vue").Ref<number, number>;

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

@@ -0,0 +1,17 @@
+import { watchDebounced } from "@vueuse/core";
+import {
+  ref,
+  unref
+} from "vue";
+export function usePasswordStrength(input) {
+  const score = ref(0);
+  watchDebounced(() => unref(input), async (value) => {
+    if (value) {
+      const { default: zxcvbn } = await import("zxcvbn");
+      const result = zxcvbn(value);
+      score.value = Math.round(result.score / 4 * 6 + 1);
+    } else
+      score.value = 0;
+  }, { debounce: 300 });
+  return score;
+}

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

@@ -0,0 +1,142 @@
+<template>
+  <div
+    ref="root"
+    data-testid="input-pin"
+    class="input-pin"
+    :class="classNames">
+    <p-input
+      v-for="i in num"
+      :key="i"
+      maxlength="1"
+      v-bind="$attrs"
+      :model-value="getValue(i - 1)"
+      :size="size"
+      :clearable="false"
+      :readonly="readonly"
+      :disabled="disabled"
+      :error="error"
+      @keydown="onKeyDown($event)"
+      @beforeinput.prevent="setValue(i - 1, $event)"
+      @keydown.left.stop.prevent="prevFocus"
+      @keydown.right.stop.prevent="nextFocus" />
+  </div>
+</template>
+
+<script setup>
+import pInput from "../input/Input.vue";
+import {
+  computed,
+  toRef,
+  ref
+} from "vue";
+import {
+  syncRef,
+  useToNumber
+} from "@vueuse/core";
+import { useFocus } from "../dropdown/utils/use-focus";
+import {
+  isAccepted,
+  removeUnaccepted
+} from "../input";
+import { toArray } from ".";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: void 0
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  length: {
+    type: [Number, String],
+    default: 5
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: Boolean,
+    default: false
+  },
+  accept: {
+    type: String,
+    default: void 0
+  }
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+const root = ref();
+const num = useToNumber(toRef(props, "length"));
+const localModel = ref(toArray(props.modelValue, num.value));
+const classNames = computed(() => {
+  const result = [];
+  if (props.disabled)
+    result.push("input-pin--disabled");
+  if (props.readonly)
+    result.push("input-pin--readonly");
+  if (props.error)
+    result.push("input-pin--error", "state--error");
+  return result;
+});
+const {
+  next: nextFocus,
+  prev: prevFocus
+} = useFocus(root, false);
+const model = computed({
+  get() {
+    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, immediate: false });
+function getValue(index) {
+  return localModel.value.at(index);
+}
+function setValue(index, event) {
+  if (event.inputType === "insertFromPaste")
+    localModel.value = toArray(removeUnaccepted(props.accept, event.data), num.value);
+  else if (event.inputType !== "insertLineBreak" && (!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 onKeyDown(event) {
+  if (!props.readonly && !props.disabled) {
+    const target = event.target;
+    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" }));
+    }
+  }
+}
+</script>
+
+<style lang="postcss">
+.input-pin {
+  @apply flex flex-row space-x-4;
+
+  .input__form {
+    -webkit-touch-callout: none;
+
+    @apply text-center;
+  }
+}
+</style>