@privyid/persona 1.1.1 → 1.2.0

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

@@ -22,136 +22,108 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import pInput from '../input/Input.vue'
-import type { PropType } from 'vue-demi'
+<script setup>
+import pInput from "../input/Input.vue";
 import {
   computed,
   toRef,
-  ref,
-} from 'vue-demi'
+  ref
+} from "vue-demi";
 import {
   syncRef,
-  useToNumber,
-} from '@vueuse/core'
-import { useFocus } from '../dropdown/utils/use-focus'
-import type { AcceptVariant } from '../input'
+  useToNumber
+} from "@vueuse/core";
+import { useFocus } from "../dropdown/utils/use-focus";
 import {
   isAccepted,
-  removeUnaccepted,
-} from '../input'
-import { toArray } from '.'
-import type { SizeVariant } from '../button'
-
-defineOptions({ inheritAttrs: false })
-
+  removeUnaccepted
+} from "../input";
+import { toArray } from ".";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   modelValue: {
-    type   : String,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
+    type: String,
+    default: "md"
   },
   length: {
-    type   : [Number, String],
-    default: 5,
+    type: [Number, String],
+    default: 5
   },
   disabled: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   readonly: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   error: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   accept: {
-    type   : String as PropType<AcceptVariant>,
-    default: undefined,
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [string],
-  'change': [string],
-}>()
-
-const root       = ref<HTMLDivElement>()
-const num        = useToNumber(toRef(props, 'length'))
-const localModel = ref<string[]>(toArray(props.modelValue, num.value))
-
+    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: string[] = []
-
+  const result = [];
   if (props.disabled)
-    result.push('input-pin--disabled')
-
+    result.push("input-pin--disabled");
   if (props.readonly)
-    result.push('input-pin--readonly')
-
+    result.push("input-pin--readonly");
   if (props.error)
-    result.push('input-pin--error', 'state--error')
-
-  return result
-})
-
+    result.push("input-pin--error", "state--error");
+  return result;
+});
 const {
   next: nextFocus,
-  prev: prevFocus,
-} = useFocus(root, false)
-
-const model = computed<string[]>({
-  get () {
-    return toArray(props.modelValue, num.value)
+  prev: prevFocus
+} = useFocus(root, false);
+const model = computed({
+  get() {
+    return toArray(props.modelValue, num.value);
   },
-  set (value: string[]) {
-    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: number): string {
-  return localModel.value.at(index)
+  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: number, event: InputEvent) {
-  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
-
+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()
+      if (event.inputType === "deleteContentBackward")
+        prevFocus();
+      if (event.inputType === "insertText")
+        nextFocus();
     }
   }
 }
-
-function onKeyDown (event: KeyboardEvent) {
+function onKeyDown(event) {
   if (!props.readonly && !props.disabled) {
-    const target = event.target as HTMLInputElement
-
+    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' }))
+      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" }));
     }
   }
 }

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

@@ -0,0 +1,77 @@
+import type { PropType } from 'vue-demi';
+import type { AcceptVariant } from '../input';
+import type { SizeVariant } from '../button';
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    accept: {
+        type: PropType<AcceptVariant>;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: string) => void;
+    change: (args_0: string) => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    accept: {
+        type: PropType<AcceptVariant>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+    onChange?: ((args_0: string) => any) | undefined;
+}>, {
+    size: SizeVariant;
+    length: string | number;
+    modelValue: string;
+    disabled: boolean;
+    error: boolean;
+    readonly: boolean;
+    accept: AcceptVariant;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,172 @@
+---
+title: Input Pin · Components
+description: One at time input form.
+---
+
+<script setup>
+  import pInputPin from './InputPin.vue'
+  import { ref } from 'vue-demi'
+
+  const result = ref('')
+</script>
+
+# Input Pin
+
+> One at time input form.
+
+## Usage
+
+### Simple Usage
+
+<preview>
+  <p-input-pin />
+</preview>
+
+```vue
+<template>
+  <p-input-pin />
+</template>
+```
+
+## Number of Input
+
+You can set how many input digit do you want with prop `length`, default is `5`.
+
+<preview>
+  <p-input-pin length="3" />
+</preview>
+
+```vue
+<template>
+  <p-input-pin length="3" />
+</template>
+```
+
+## Sizing
+
+Input has 4 variants size: `xs`, `sm`, `md`, `lg`, default is `md`.
+
+<preview class="flex-col space-y-3">
+  <p-input-pin size="xs" />
+  <p-input-pin size="sm" />
+  <p-input-pin size="md" />
+  <p-input-pin size="lg" />
+</preview>
+
+```vue
+<template>
+  <p-input-pin size="xs" />
+  <p-input-pin size="sm" />
+  <p-input-pin size="md" />
+  <p-input-pin size="lg" />
+</template>
+```
+
+## Disabled State
+
+<preview>
+  <p-input-pin disabled />
+</preview>
+
+```vue
+<template>
+  <p-input-pin disabled />
+</template>
+```
+
+## Readonly State
+<preview>
+  <p-input-pin readonly />
+</preview>
+
+```vue
+<template>
+  <p-input-pin readonly />
+</template>
+```
+
+## Error State
+<preview>
+  <p-input-pin error />
+</preview>
+
+```vue
+<template>
+  <p-input-pin error />
+</template>
+```
+
+## Accept Character
+
+You can filter what characters are allowed to be input using the prop `accept`. The value can be RegExp, or using available preset.
+
+<preview class="flex-col space-y-4">
+  <p-input-pin accept="numeric" />
+</preview>
+
+```vue
+<template>
+  <p-input-pin accept="numeric" />
+</template>
+```
+
+👉 See [Available Preset](../input/#available-preset) for more information
+
+## Binding v-model
+
+Like other input, input value can be binding with `v-model`.
+
+<preview>
+  <p-input-pin v-model="result" />
+</preview>
+
+**result:**
+
+<code class="truncate whitespace-pre">{{ result || '-' }}</code>
+
+```vue
+<template>
+  <p-input-pin v-model="result" />
+</template>
+```
+
+## API
+
+### Props
+
+| Props        |   Type    | Default | Description                                             |
+|--------------|:---------:|:-------:|---------------------------------------------------------|
+| `length`     | `Number`  |   `5`   | Number of input                                         |
+| `size`       | `String`  |  `md`   | Input size variant, valid value: `xs`, `sm`, `md`, `lg` |
+| `disabled`   | `Boolean` | `false` | Disabled state                                          |
+| `readonly`   | `Boolean` | `false` | Readonly state                                          |
+| `error`      | `Boolean` | `false` | Error state                                             |
+| `accept`     | `String`  |   `-`   | Whitelist character can be inputted                     |
+| `modelValue` | `String`  |   `-`   | v-model value                                           |
+
+### Slots
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2" class="text-center">There no slots here</td>
+    </tr>
+  </tbody>
+</table>
+
+### Events
+
+| Name     | Arguments | Description              |
+|----------|-----------|--------------------------|
+| `change` | `String`  | Event when value changed |
+
+## See Also
+
+- [Form Group](/components/form-group/)
+- [Input Group](/components/input-group/)

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

@@ -0,0 +1 @@
+export {};

package/dist/components/input-range/InputRange.spec.mjs

@@ -0,0 +1,180 @@
+import { fireEvent, render } from "@testing-library/vue";
+import { vi } from "vitest";
+import {
+  resetHook,
+  triggerDrag,
+  useDrag
+} from "./__mocks__/use-drag.mjs";
+import { useElementBounding } from "./__mocks__/use-element-bounding.mjs";
+import InputRange from "./InputRange.vue";
+import { ref } from "vue-demi";
+import { delay } from "nanodelay";
+class FakeMouseEvent extends MouseEvent {
+  pageX;
+  constructor(type, pageX) {
+    super(type);
+    this.pageX = pageX;
+  }
+}
+vi.mock("./utils/use-drag.ts", () => ({ default: useDrag }));
+vi.mock("@vueuse/core", async () => {
+  const vueuse = await vi.importActual("@vueuse/core");
+  return {
+    ...vueuse,
+    useElementBounding
+  };
+});
+beforeEach(() => {
+  resetHook();
+});
+it("should render properly without any prop", () => {
+  const screen = render({
+    components: { InputRange },
+    template: "<input-range />"
+  });
+  const input = screen.queryByTestId("input-range");
+  expect(input).toBeInTheDocument();
+  expect(input).toHaveClass("input-range");
+});
+it("should have double thumb if multiple prop is provided", () => {
+  const screen = render({
+    components: { InputRange },
+    template: "<input-range multiple />"
+  });
+  const start = screen.queryByTestId("thumb-start");
+  expect(start).toBeInTheDocument();
+  expect(start).toBeVisible();
+});
+it("should have disabled state if prop disabled was provided", () => {
+  const screen = render({
+    components: { InputRange },
+    template: "<input-range disabled />"
+  });
+  const input = screen.queryByTestId("input-range");
+  expect(input).toBeInTheDocument();
+  expect(input).toHaveClass("input-range", "input-range--disabled");
+});
+it("should have readonly state if prop readonly was provided", () => {
+  const screen = render({
+    components: { InputRange },
+    template: "<input-range readonly />"
+  });
+  const input = screen.queryByTestId("input-range");
+  expect(input).toBeInTheDocument();
+  expect(input).toHaveClass("input-range", "input-range--readonly");
+});
+it("should have error state if prop error was provided", () => {
+  const screen = render({
+    components: { InputRange },
+    template: "<input-range error />"
+  });
+  const input = screen.queryByTestId("input-range");
+  expect(input).toBeInTheDocument();
+  expect(input).toHaveClass("input-range", "input-range--error", "state--error");
+});
+it("should able to change value inside v-model", async () => {
+  const model = ref(100);
+  const screen = render({
+    components: { InputRange },
+    template: '<input-range v-model="model" />',
+    setup() {
+      return { model };
+    }
+  });
+  await delay(0);
+  const thumbEnd = screen.queryByTestId("thumb-end");
+  await triggerDrag(thumbEnd, 70);
+  expect(model.value).toBe(70);
+});
+it("should able to change value inside v-model (multiple)", async () => {
+  const model = ref([0, 100]);
+  const screen = render({
+    components: { InputRange },
+    template: '<input-range v-model="model" multiple />',
+    setup() {
+      return { model };
+    }
+  });
+  await delay(0);
+  const thumbStart = screen.queryByTestId("thumb-start");
+  const thumbEnd = screen.queryByTestId("thumb-end");
+  await triggerDrag(thumbStart, 30);
+  await triggerDrag(thumbEnd, 70);
+  expect(model.value).toStrictEqual([30, 70]);
+});
+it("also able to change value inside v-model:start and v-model:end", async () => {
+  const start = ref(0);
+  const end = ref(100);
+  const screen = render({
+    components: { InputRange },
+    template: `
+      <input-range
+        v-model:start="start"
+        v-model:end="end"
+        multiple
+      />
+    `,
+    setup() {
+      return {
+        start,
+        end
+      };
+    }
+  });
+  await delay(0);
+  const thumbStart = screen.queryByTestId("thumb-start");
+  const thumbEnd = screen.queryByTestId("thumb-end");
+  await triggerDrag(thumbStart, 30);
+  await triggerDrag(thumbEnd, 70);
+  expect(start.value).toStrictEqual(30);
+  expect(end.value).toStrictEqual(70);
+});
+it("should have value between min and max value", async () => {
+  const model = ref(100);
+  const screen = render({
+    components: { InputRange },
+    template: '<input-range v-model="model" min="100" max="500" />',
+    setup() {
+      return { model };
+    }
+  });
+  await delay(0);
+  const thumbEnd = screen.queryByTestId("thumb-end");
+  await triggerDrag(thumbEnd, 70);
+  expect(model.value).toBe(0.7 * (500 - 100) + 100);
+});
+it("should able to set value using click on trackbar", async () => {
+  const model = ref([40, 60]);
+  const screen = render({
+    components: { InputRange },
+    template: '<input-range v-model="model" multiple />',
+    setup() {
+      return { model };
+    }
+  });
+  await delay(0);
+  const lowerTrack = screen.queryByTestId("track-lower");
+  const activeTrack = screen.queryByTestId("track-active");
+  const upperTrack = screen.queryByTestId("track-upper");
+  await fireEvent(lowerTrack, new FakeMouseEvent("click", 20));
+  expect(model.value).toStrictEqual([20, 60]);
+  await fireEvent(upperTrack, new FakeMouseEvent("click", 90));
+  expect(model.value).toStrictEqual([20, 90]);
+  await fireEvent(activeTrack, new FakeMouseEvent("click", 40));
+  await fireEvent(activeTrack, new FakeMouseEvent("click", 80));
+  expect(model.value).toStrictEqual([40, 80]);
+});
+it("should goto nearest value of step", async () => {
+  const model = ref(100);
+  const screen = render({
+    components: { InputRange },
+    template: '<input-range v-model="model" step="25" />',
+    setup() {
+      return { model };
+    }
+  });
+  await delay(0);
+  const thumbEnd = screen.queryByTestId("thumb-end");
+  await triggerDrag(thumbEnd, 60);
+  expect(model.value).toBe(50);
+});